From 1cef65e56fd37452b4ab729d21bfac6779f6daca Mon Sep 17 00:00:00 2001
From: Kevin Logan <56395104+kevinlog@users.noreply.github.com>
Date: Wed, 17 Jun 2020 11:27:00 -0400
Subject: [PATCH 01/63] [Endpoint] add policy data to Host list UI (#69202)

---
 .../view/details/host_details.tsx             | 38 ++++++++-
 .../endpoint_hosts/view/host_constants.ts     | 15 ++++
 .../pages/endpoint_hosts/view/index.test.tsx  | 77 +++++++++++++++++
 .../pages/endpoint_hosts/view/index.tsx       | 83 +++++++++++++------
 4 files changed, 186 insertions(+), 27 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/host_details.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/host_details.tsx
index b191bfe4effea..9ec65a5d17898 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/host_details.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/host_details.tsx
@@ -93,13 +93,40 @@ export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
 
   const policyStatusClickHandler = useNavigateByRouterEventHandler(policyResponseRoutePath);
 
+  const [policyDetailsRoutePath, policyDetailsRouteUrl] = useMemo(() => {
+    return [
+      getManagementUrl({
+        name: 'policyDetails',
+        policyId: details.endpoint.policy.applied.id,
+        excludePrefix: true,
+      }),
+      getManagementUrl({
+        name: 'policyDetails',
+        policyId: details.endpoint.policy.applied.id,
+      }),
+    ];
+  }, [details.endpoint.policy.applied.id]);
+
+  const policyDetailsClickHandler = useNavigateByRouterEventHandler(policyDetailsRoutePath);
+
   const detailsResultsPolicy = useMemo(() => {
     return [
       {
         title: i18n.translate('xpack.securitySolution.endpoint.host.details.policy', {
           defaultMessage: 'Policy',
         }),
-        description: details.endpoint.policy.applied.id,
+        description: (
+          <>
+            {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
+            <EuiLink
+              data-test-subj="policyDetailsValue"
+              href={policyDetailsRouteUrl}
+              onClick={policyDetailsClickHandler}
+            >
+              {details.endpoint.policy.applied.name}
+            </EuiLink>
+          </>
+        ),
       },
       {
         title: i18n.translate('xpack.securitySolution.endpoint.host.details.policyStatus', {
@@ -128,7 +155,14 @@ export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
         ),
       },
     ];
-  }, [details, policyResponseUri, policyStatus, policyStatusClickHandler]);
+  }, [
+    details,
+    policyResponseUri,
+    policyStatus,
+    policyStatusClickHandler,
+    policyDetailsRouteUrl,
+    policyDetailsClickHandler,
+  ]);
   const detailsResultsLower = useMemo(() => {
     return [
       {
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/host_constants.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/host_constants.ts
index 645a4896770ee..790bbd3cb98da 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/host_constants.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/host_constants.ts
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import { HostStatus, HostPolicyResponseActionStatus } from '../../../../../common/endpoint/types';
 
 export const HOST_STATUS_TO_HEALTH_COLOR = Object.freeze<
@@ -23,3 +24,17 @@ export const POLICY_STATUS_TO_HEALTH_COLOR = Object.freeze<
   warning: 'warning',
   failure: 'danger',
 });
+
+export const POLICY_STATUS_TO_TEXT = Object.freeze<
+  { [key in keyof typeof HostPolicyResponseActionStatus]: string }
+>({
+  success: i18n.translate('xpack.securitySolution.policyStatusText.success', {
+    defaultMessage: 'Success',
+  }),
+  warning: i18n.translate('xpack.securitySolution.policyStatusText.warning', {
+    defaultMessage: 'Warning',
+  }),
+  failure: i18n.translate('xpack.securitySolution.policyStatusText.failure', {
+    defaultMessage: 'Failure',
+  }),
+});
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
index 7d84bb52238a2..e0f797b143055 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
@@ -9,6 +9,7 @@ import * as reactTestingLibrary from '@testing-library/react';
 
 import { HostList } from './index';
 import { mockHostDetailsApiResult, mockHostResultList } from '../store/mock_host_result_list';
+import { mockPolicyResultList } from '../../policy/store/policy_list/mock_policy_result_list';
 import { AppContextTestRender, createAppRootMockRenderer } from '../../../../common/mock/endpoint';
 import {
   HostInfo,
@@ -17,6 +18,7 @@ import {
 } from '../../../../../common/endpoint/types';
 import { EndpointDocGenerator } from '../../../../../common/endpoint/generate_data';
 import { AppAction } from '../../../../common/store/actions';
+import { POLICY_STATUS_TO_HEALTH_COLOR, POLICY_STATUS_TO_TEXT } from './host_constants';
 
 describe('when on the hosts page', () => {
   const docGenerator = new EndpointDocGenerator();
@@ -47,15 +49,23 @@ describe('when on the hosts page', () => {
       });
     });
     describe('when list data loads', () => {
+      const generatedPolicyStatuses: Array<
+        HostInfo['metadata']['endpoint']['policy']['applied']['status']
+      > = [];
+      let firstPolicyID: string;
       beforeEach(() => {
         reactTestingLibrary.act(() => {
           const hostListData = mockHostResultList({ total: 3 });
+          firstPolicyID = hostListData.hosts[0].metadata.endpoint.policy.applied.id;
           [HostStatus.ERROR, HostStatus.ONLINE, HostStatus.OFFLINE].forEach((status, index) => {
             hostListData.hosts[index] = {
               metadata: hostListData.hosts[index].metadata,
               host_status: status,
             };
           });
+          hostListData.hosts.forEach((item, index) => {
+            generatedPolicyStatuses[index] = item.metadata.endpoint.policy.applied.status;
+          });
           const action: AppAction = {
             type: 'serverReturnedHostList',
             payload: hostListData,
@@ -92,6 +102,29 @@ describe('when on the hosts page', () => {
         ).not.toBeNull();
       });
 
+      it('should display correct policy status', async () => {
+        const renderResult = render();
+        const policyStatuses = await renderResult.findAllByTestId('rowPolicyStatus');
+
+        policyStatuses.forEach((status, index) => {
+          expect(status.textContent).toEqual(POLICY_STATUS_TO_TEXT[generatedPolicyStatuses[index]]);
+          expect(
+            status.querySelector(
+              `[data-euiicon-type][color=${
+                POLICY_STATUS_TO_HEALTH_COLOR[generatedPolicyStatuses[index]]
+              }]`
+            )
+          ).not.toBeNull();
+        });
+      });
+
+      it('should display policy name as a link', async () => {
+        const renderResult = render();
+        const firstPolicyName = (await renderResult.findAllByTestId('policyNameCellLink'))[0];
+        expect(firstPolicyName).not.toBeNull();
+        expect(firstPolicyName.getAttribute('href')).toContain(`policy/${firstPolicyID}`);
+      });
+
       describe('when the user clicks the first hostname in the table', () => {
         let renderResult: reactTestingLibrary.RenderResult;
         beforeEach(async () => {
@@ -197,6 +230,32 @@ describe('when on the hosts page', () => {
         expect(flyout).not.toBeNull();
       });
     });
+
+    it('should display policy name value as a link', async () => {
+      const renderResult = render();
+      const policyDetailsLink = await renderResult.findByTestId('policyDetailsValue');
+      expect(policyDetailsLink).not.toBeNull();
+      expect(policyDetailsLink.getAttribute('href')).toEqual(
+        `#/management/policy/${hostDetails.metadata.endpoint.policy.applied.id}`
+      );
+    });
+
+    it('should update the URL when policy name link is clicked', async () => {
+      const policyItem = mockPolicyResultList({ total: 1 }).items[0];
+      coreStart.http.get.mockReturnValue(Promise.resolve({ item: policyItem }));
+
+      const renderResult = render();
+      const policyDetailsLink = await renderResult.findByTestId('policyDetailsValue');
+      const userChangedUrlChecker = middlewareSpy.waitForAction('userChangedUrl');
+      reactTestingLibrary.act(() => {
+        reactTestingLibrary.fireEvent.click(policyDetailsLink);
+      });
+      const changedUrlAction = await userChangedUrlChecker;
+      expect(changedUrlAction.payload.pathname).toEqual(
+        `/management/policy/${hostDetails.metadata.endpoint.policy.applied.id}`
+      );
+    });
+
     it('should display policy status value as a link', async () => {
       const renderResult = render();
       const policyStatusLink = await renderResult.findByTestId('policyStatusValue');
@@ -205,6 +264,7 @@ describe('when on the hosts page', () => {
         '#/management/endpoints?page_index=0&page_size=10&selected_host=1&show=policy_response'
       );
     });
+
     it('should update the URL when policy status link is clicked', async () => {
       const renderResult = render();
       const policyStatusLink = await renderResult.findByTestId('policyStatusValue');
@@ -217,6 +277,7 @@ describe('when on the hosts page', () => {
         '?page_index=0&page_size=10&selected_host=1&show=policy_response'
       );
     });
+
     it('should display Success overall policy status', async () => {
       const renderResult = render();
       reactTestingLibrary.act(() => {
@@ -230,6 +291,7 @@ describe('when on the hosts page', () => {
         policyStatusHealth.querySelector('[data-euiicon-type][color="success"]')
       ).not.toBeNull();
     });
+
     it('should display Warning overall policy status', async () => {
       const renderResult = render();
       reactTestingLibrary.act(() => {
@@ -243,6 +305,7 @@ describe('when on the hosts page', () => {
         policyStatusHealth.querySelector('[data-euiicon-type][color="warning"]')
       ).not.toBeNull();
     });
+
     it('should display Failed overall policy status', async () => {
       const renderResult = render();
       reactTestingLibrary.act(() => {
@@ -256,6 +319,7 @@ describe('when on the hosts page', () => {
         policyStatusHealth.querySelector('[data-euiicon-type][color="danger"]')
       ).not.toBeNull();
     });
+
     it('should display Unknown overall policy status', async () => {
       const renderResult = render();
       reactTestingLibrary.act(() => {
@@ -269,6 +333,7 @@ describe('when on the hosts page', () => {
         policyStatusHealth.querySelector('[data-euiicon-type][color="subdued"]')
       ).not.toBeNull();
     });
+
     it('should include the link to logs', async () => {
       const renderResult = render();
       const linkToLogs = await renderResult.findByTestId('hostDetailsLinkToLogs');
@@ -278,6 +343,7 @@ describe('when on the hosts page', () => {
         "/app/logs/stream?logFilter=(expression:'host.id:1',kind:kuery)"
       );
     });
+
     describe('when link to logs is clicked', () => {
       beforeEach(async () => {
         const renderResult = render();
@@ -291,6 +357,7 @@ describe('when on the hosts page', () => {
         expect(coreStart.application.navigateToApp.mock.calls).toHaveLength(1);
       });
     });
+
     describe('when showing host Policy Response panel', () => {
       let renderResult: ReturnType<typeof render>;
       beforeEach(async () => {
@@ -305,10 +372,12 @@ describe('when on the hosts page', () => {
           dispatchServerReturnedHostPolicyResponse();
         });
       });
+
       it('should hide the host details panel', async () => {
         const hostDetailsFlyout = await renderResult.queryByTestId('hostDetailsFlyoutBody');
         expect(hostDetailsFlyout).toBeNull();
       });
+
       it('should display policy response sub-panel', async () => {
         expect(
           await renderResult.findByTestId('hostDetailsPolicyResponseFlyoutHeader')
@@ -317,17 +386,20 @@ describe('when on the hosts page', () => {
           await renderResult.findByTestId('hostDetailsPolicyResponseFlyoutBody')
         ).not.toBeNull();
       });
+
       it('should include the sub-panel title', async () => {
         expect(
           (await renderResult.findByTestId('hostDetailsPolicyResponseFlyoutTitle')).textContent
         ).toBe('Policy Response');
       });
+
       it('should show a configuration section for each protection', async () => {
         const configAccordions = await renderResult.findAllByTestId(
           'hostDetailsPolicyResponseConfigAccordion'
         );
         expect(configAccordions).not.toBeNull();
       });
+
       it('should show an actions section for each configuration', async () => {
         const actionAccordions = await renderResult.findAllByTestId(
           'hostDetailsPolicyResponseActionsAccordion'
@@ -340,6 +412,7 @@ describe('when on the hosts page', () => {
         expect(statusHealth).not.toBeNull();
         expect(message).not.toBeNull();
       });
+
       it('should not show any numbered badges if all actions are successful', () => {
         const policyResponse = docGenerator.generatePolicyResponse(
           new Date().getTime(),
@@ -359,6 +432,7 @@ describe('when on the hosts page', () => {
             expect(e).not.toBeNull();
           });
       });
+
       it('should show a numbered badge if at least one action failed', () => {
         reactTestingLibrary.act(() => {
           dispatchServerReturnedHostPolicyResponse(HostPolicyResponseActionStatus.failure);
@@ -368,6 +442,7 @@ describe('when on the hosts page', () => {
         );
         expect(attentionBadge).not.toBeNull();
       });
+
       it('should show a numbered badge if at least one action has a warning', () => {
         reactTestingLibrary.act(() => {
           dispatchServerReturnedHostPolicyResponse(HostPolicyResponseActionStatus.warning);
@@ -377,6 +452,7 @@ describe('when on the hosts page', () => {
         );
         expect(attentionBadge).not.toBeNull();
       });
+
       it('should include the back to details link', async () => {
         const subHeaderBackLink = await renderResult.findByTestId('flyoutSubHeaderBackButton');
         expect(subHeaderBackLink.textContent).toBe('Endpoint Details');
@@ -384,6 +460,7 @@ describe('when on the hosts page', () => {
           '#/management/endpoints?page_index=0&page_size=10&selected_host=1'
         );
       });
+
       it('should update URL when back to details link is clicked', async () => {
         const subHeaderBackLink = await renderResult.findByTestId('flyoutSubHeaderBackButton');
         const userChangedUrlChecker = middlewareSpy.waitForAction('userChangedUrl');
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
index 125723e9bcea6..c67c29fbc73a9 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
@@ -22,7 +22,11 @@ import { createStructuredSelector } from 'reselect';
 import { HostDetailsFlyout } from './details';
 import * as selectors from '../store/selectors';
 import { useHostSelector } from './hooks';
-import { HOST_STATUS_TO_HEALTH_COLOR } from './host_constants';
+import {
+  HOST_STATUS_TO_HEALTH_COLOR,
+  POLICY_STATUS_TO_HEALTH_COLOR,
+  POLICY_STATUS_TO_TEXT,
+} from './host_constants';
 import { useNavigateByRouterEventHandler } from '../../../../common/hooks/endpoint/use_navigate_by_router_event_handler';
 import { CreateStructuredSelector } from '../../../../common/store';
 import { Immutable, HostInfo } from '../../../../../common/endpoint/types';
@@ -31,17 +35,18 @@ import { ManagementPageView } from '../../../components/management_page_view';
 import { getManagementUrl } from '../../..';
 import { FormattedDate } from '../../../../common/components/formatted_date';
 
-const HostLink = memo<{
+const HostListNavLink = memo<{
   name: string;
   href: string;
   route: string;
-}>(({ name, href, route }) => {
+  dataTestSubj: string;
+}>(({ name, href, route, dataTestSubj }) => {
   const clickHandler = useNavigateByRouterEventHandler(route);
 
   return (
     // eslint-disable-next-line @elastic/eui/href-or-on-click
     <EuiLink
-      data-test-subj="hostnameCellLink"
+      data-test-subj={dataTestSubj}
       className="eui-textTruncate"
       href={href}
       onClick={clickHandler}
@@ -50,7 +55,7 @@ const HostLink = memo<{
     </EuiLink>
   );
 });
-HostLink.displayName = 'HostLink';
+HostListNavLink.displayName = 'HostListNavLink';
 
 const selector = (createStructuredSelector as CreateStructuredSelector)(selectors);
 export const HostList = () => {
@@ -116,7 +121,14 @@ export const HostList = () => {
             name: 'endpointDetails',
             selected_host: id,
           });
-          return <HostLink name={hostname} href={toRouteUrl} route={toRoutePath} />;
+          return (
+            <HostListNavLink
+              name={hostname}
+              href={toRouteUrl}
+              route={toRoutePath}
+              dataTestSubj="hostnameCellLink"
+            />
+          );
         },
       },
       {
@@ -142,43 +154,64 @@ export const HostList = () => {
         },
       },
       {
-        field: '',
+        field: 'metadata.endpoint.policy.applied',
         name: i18n.translate('xpack.securitySolution.endpointList.policy', {
           defaultMessage: 'Policy',
         }),
         truncateText: true,
         // eslint-disable-next-line react/display-name
-        render: () => {
-          return <span className="eui-textTruncate">{'Policy Name'}</span>;
+        render: (policy: HostInfo['metadata']['endpoint']['policy']['applied']) => {
+          const toRoutePath = getManagementUrl({
+            name: 'policyDetails',
+            policyId: policy.id,
+            excludePrefix: true,
+          });
+          const toRouteUrl = getManagementUrl({
+            name: 'policyDetails',
+            policyId: policy.id,
+          });
+          return (
+            <HostListNavLink
+              name={policy.name}
+              href={toRouteUrl}
+              route={toRoutePath}
+              dataTestSubj="policyNameCellLink"
+            />
+          );
         },
       },
       {
-        field: '',
+        field: 'metadata.endpoint.policy.applied',
         name: i18n.translate('xpack.securitySolution.endpointList.policyStatus', {
           defaultMessage: 'Policy Status',
         }),
         // eslint-disable-next-line react/display-name
-        render: () => {
+        render: (policy: HostInfo['metadata']['endpoint']['policy']['applied'], item: HostInfo) => {
+          const toRoutePath = getManagementUrl({
+            name: 'endpointPolicyResponse',
+            selected_host: item.metadata.host.id,
+            excludePrefix: true,
+          });
+          const toRouteUrl = getManagementUrl({
+            name: 'endpointPolicyResponse',
+            selected_host: item.metadata.host.id,
+          });
           return (
-            <EuiHealth color="success" className="eui-textTruncate">
-              <FormattedMessage
-                id="xpack.securitySolution.endpointList.policyStatus"
-                defaultMessage="Policy Status"
+            <EuiHealth
+              color={POLICY_STATUS_TO_HEALTH_COLOR[policy.status]}
+              className="eui-textTruncate"
+              data-test-subj="rowPolicyStatus"
+            >
+              <HostListNavLink
+                name={POLICY_STATUS_TO_TEXT[policy.status]}
+                href={toRouteUrl}
+                route={toRoutePath}
+                dataTestSubj="policyStatusCellLink"
               />
             </EuiHealth>
           );
         },
       },
-      {
-        field: '',
-        name: i18n.translate('xpack.securitySolution.endpointList.alerts', {
-          defaultMessage: 'Alerts',
-        }),
-        dataType: 'number',
-        render: () => {
-          return '0';
-        },
-      },
       {
         field: 'metadata.host.os.name',
         name: i18n.translate('xpack.securitySolution.endpointList.os', {

From a077fdea32ee63668ac545e28ad8db1fef587308 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Wed, 17 Jun 2020 18:47:20 +0200
Subject: [PATCH 02/63] [Ingest Pipelines] Add doc links to processor types
 (#69279)

* added doc links to processor types

* Bring doc links in line with mappings editor

Also refactor the processors type map

* remove helpText prop from Custom field

* fix i18n

* rename doc button and refactor type map const name

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../pipeline_form/pipeline_form_fields.tsx    |   3 +-
 .../pipeline_processors_editor.test.tsx       |   6 +-
 .../components/index.ts                       |   8 +-
 .../on_failure_processors_title.tsx           |   5 +-
 .../documentation_button.tsx                  |  25 ++
 .../processor_settings_form/index.ts          |   1 +
 .../map_processor_type_to_form.tsx            | 297 +++++++++++++++---
 .../processor_settings_form.container.tsx     |  14 +-
 .../processor_settings_form.tsx               | 164 +++++++---
 .../processors_title_and_test_button.tsx      |   2 +-
 .../components/settings_form_flyout.tsx       |  67 ----
 .../pipeline_processors_editor/context.tsx    |   3 +-
 .../pipeline_processors_editor.container.tsx  |   8 +-
 .../pipeline_processors_editor.tsx            |  28 +-
 .../processors_reducer/constants.ts           |   8 +
 .../processors_reducer/index.ts               |   4 +-
 .../processors_reducer/utils.ts               |  11 +
 .../application/services/documentation.ts     |   4 +
 18 files changed, 470 insertions(+), 188 deletions(-)
 create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/documentation_button.tsx
 delete mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/settings_form_flyout.tsx
 create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/constants.ts

diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx
index a0e7c8fd8bcd7..52d1a77c1df6d 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx
@@ -128,8 +128,7 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
           return (
             <PipelineProcessorsEditor
               onFlyoutOpen={onEditorFlyoutOpen}
-              learnMoreAboutProcessorsUrl={services.documentation.getProcessorsUrl()}
-              learnMoreAboutOnFailureProcessorsUrl={services.documentation.getHandlingFailureUrl()}
+              esDocsBasePath={services.documentation.getEsDocsBasePath()}
               isTestButtonDisabled={isTestButtonDisabled}
               onTestPipelineClick={onTestPipelineClick}
               onUpdate={onProcessorsUpdate}
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx
index 758d6f5e620ce..ad0474a94f56c 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx
@@ -36,8 +36,7 @@ describe('Pipeline Editor', () => {
       onUpdate,
       isTestButtonDisabled: false,
       onTestPipelineClick: jest.fn(),
-      learnMoreAboutProcessorsUrl: 'test',
-      learnMoreAboutOnFailureProcessorsUrl: 'test',
+      esDocsBasePath: 'test',
     });
 
     const {
@@ -56,8 +55,7 @@ describe('Pipeline Editor', () => {
       onUpdate: jest.fn(),
       isTestButtonDisabled: false,
       onTestPipelineClick: jest.fn(),
-      learnMoreAboutProcessorsUrl: 'test',
-      learnMoreAboutOnFailureProcessorsUrl: 'test',
+      esDocsBasePath: 'test',
     });
 
     expect(exists('pipelineEditorOnFailureTree')).toBe(false);
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/index.ts
index cb5d5a10e9f42..2d512a6bfa2ed 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/index.ts
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/index.ts
@@ -4,9 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { SettingsFormFlyout, OnSubmitHandler } from './settings_form_flyout';
-
-export { ProcessorSettingsForm, ProcessorSettingsFromOnSubmitArg } from './processor_settings_form';
+export {
+  ProcessorSettingsForm,
+  ProcessorSettingsFromOnSubmitArg,
+  OnSubmitHandler,
+} from './processor_settings_form';
 
 export { ProcessorsTree, ProcessorInfo, OnActionHandler } from './processors_tree';
 
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx
index 1c8edac7cfd64..6451096c897d7 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx
@@ -34,7 +34,10 @@ export const OnFailureProcessorsTitle: FunctionComponent = () => {
             defaultMessage="The processors used to pre-process documents before indexing. {learnMoreLink}"
             values={{
               learnMoreLink: (
-                <EuiLink href={links.learnMoreAboutOnFailureProcessorsUrl} target="_blank">
+                <EuiLink
+                  href={links.esDocsBasePath + '/handling-failure-in-pipelines.html'}
+                  target="_blank"
+                >
                   {i18n.translate(
                     'xpack.ingestPipelines.pipelineEditor.onFailureProcessorsDocumentationLink',
                     {
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/documentation_button.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/documentation_button.tsx
new file mode 100644
index 0000000000000..b1fd9e97aa23d
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/documentation_button.tsx
@@ -0,0 +1,25 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+import { EuiButtonEmpty } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+interface Props {
+  processorLabel: string;
+  docLink: string;
+}
+
+export const DocumentationButton: FunctionComponent<Props> = ({ processorLabel, docLink }) => {
+  return (
+    <EuiButtonEmpty size="s" flush="right" href={docLink} target="_blank" iconType="help">
+      {i18n.translate(
+        'xpack.ingestPipelines.pipelineEditor.settingsForm.learnMoreLabelLink.processor',
+        { defaultMessage: '{processorLabel} documentation', values: { processorLabel } }
+      )}
+    </EuiButtonEmpty>
+  );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/index.ts
index 60a1aa0a96fb1..1a7da4891967a 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/index.ts
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/index.ts
@@ -7,4 +7,5 @@
 export {
   ProcessorSettingsForm,
   ProcessorSettingsFromOnSubmitArg,
+  OnSubmitHandler,
 } from './processor_settings_form.container';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/map_processor_type_to_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/map_processor_type_to_form.tsx
index e8164a0057d39..5993d7fb3f87a 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/map_processor_type_to_form.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/map_processor_type_to_form.tsx
@@ -4,53 +4,270 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import { FunctionComponent } from 'react';
 
 // import { SetProcessor } from './processors/set';
 // import { Gsub } from './processors/gsub';
 
-const mapProcessorTypeToForm = {
-  append: undefined, // TODO: Implement
-  bytes: undefined, // TODO: Implement
-  circle: undefined, // TODO: Implement
-  convert: undefined, // TODO: Implement
-  csv: undefined, // TODO: Implement
-  date: undefined, // TODO: Implement
-  date_index_name: undefined, // TODO: Implement
-  dissect: undefined, // TODO: Implement
-  dot_expander: undefined, // TODO: Implement
-  drop: undefined, // TODO: Implement
-  enrich: undefined, // TODO: Implement
-  fail: undefined, // TODO: Implement
-  foreach: undefined, // TODO: Implement
-  geoip: undefined, // TODO: Implement
-  grok: undefined, // TODO: Implement
-  html_strip: undefined, // TODO: Implement
-  inference: undefined, // TODO: Implement
-  join: undefined, // TODO: Implement
-  json: undefined, // TODO: Implement
-  kv: undefined, // TODO: Implement
-  lowercase: undefined, // TODO: Implement
-  pipeline: undefined, // TODO: Implement
-  remove: undefined, // TODO: Implement
-  rename: undefined, // TODO: Implement
-  script: undefined, // TODO: Implement
-  set_security_user: undefined, // TODO: Implement
-  split: undefined, // TODO: Implement
-  sort: undefined, // TODO: Implement
-  trim: undefined, // TODO: Implement
-  uppercase: undefined, // TODO: Implement
-  urldecode: undefined, // TODO: Implement
-  user_agent: undefined, // TODO: Implement
-
-  gsub: undefined,
-  set: undefined,
+interface FieldsFormDescriptor {
+  FieldsComponent?: FunctionComponent;
+  docLinkPath: string;
+  /**
+   * A sentence case label that can be displayed to users
+   */
+  label: string;
+}
+
+const mapProcessorTypeToFormDescriptor: Record<string, FieldsFormDescriptor> = {
+  append: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/append-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.append', {
+      defaultMessage: 'Append',
+    }),
+  },
+  bytes: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/bytes-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.bytes', {
+      defaultMessage: 'Bytes',
+    }),
+  },
+  circle: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/ingest-circle-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.circle', {
+      defaultMessage: 'Circle',
+    }),
+  },
+  convert: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/convert-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.convert', {
+      defaultMessage: 'Convert',
+    }),
+  },
+  csv: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/csv-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.csv', {
+      defaultMessage: 'CSV',
+    }),
+  },
+  date: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/date-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.date', {
+      defaultMessage: 'Date',
+    }),
+  },
+  date_index_name: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/date-index-name-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.dateIndexName', {
+      defaultMessage: 'Date Index Name',
+    }),
+  },
+  dissect: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/dissect-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.dissect', {
+      defaultMessage: 'Dissect',
+    }),
+  },
+  dot_expander: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/dot-expand-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.dotExpander', {
+      defaultMessage: 'Dot Expander',
+    }),
+  },
+  drop: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/drop-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.drop', {
+      defaultMessage: 'Drop',
+    }),
+  },
+  enrich: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/enrich-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.enrich', {
+      defaultMessage: 'Enrich',
+    }),
+  },
+  fail: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/fail-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.fail', {
+      defaultMessage: 'Fail',
+    }),
+  },
+  foreach: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/foreach-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.foreach', {
+      defaultMessage: 'Foreach',
+    }),
+  },
+  geoip: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/geoip-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.geoip', {
+      defaultMessage: 'GeoIP',
+    }),
+  },
+  gsub: {
+    FieldsComponent: undefined,
+    docLinkPath: '/gsub-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.gsub', {
+      defaultMessage: 'Gsub',
+    }),
+  },
+  html_strip: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/htmlstrip-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.htmlStrip', {
+      defaultMessage: 'HTML Strip',
+    }),
+  },
+  inference: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/inference-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.inference', {
+      defaultMessage: 'Inference',
+    }),
+  },
+  join: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/join-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.join', {
+      defaultMessage: 'Join',
+    }),
+  },
+  json: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/json-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.json', {
+      defaultMessage: 'JSON',
+    }),
+  },
+  kv: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/kv-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.kv', {
+      defaultMessage: 'KV',
+    }),
+  },
+  lowercase: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/lowercase-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.lowercase', {
+      defaultMessage: 'Lowercase',
+    }),
+  },
+  pipeline: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/pipeline-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.pipeline', {
+      defaultMessage: 'Pipeline',
+    }),
+  },
+  remove: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/remove-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.remove', {
+      defaultMessage: 'Remove',
+    }),
+  },
+  rename: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/rename-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.rename', {
+      defaultMessage: 'Rename',
+    }),
+  },
+  script: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/script-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.script', {
+      defaultMessage: 'Script',
+    }),
+  },
+  set_security_user: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/ingest-node-set-security-user-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.setSecurityUser', {
+      defaultMessage: 'Set Security User',
+    }),
+  },
+  split: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/split-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.split', {
+      defaultMessage: 'Split',
+    }),
+  },
+  sort: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/sort-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.sort', {
+      defaultMessage: 'Sort',
+    }),
+  },
+  trim: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/trim-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.trim', {
+      defaultMessage: 'Trim',
+    }),
+  },
+  uppercase: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/uppercase-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.uppercase', {
+      defaultMessage: 'Uppercase',
+    }),
+  },
+  urldecode: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/urldecode-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.urldecode', {
+      defaultMessage: 'URL Decode',
+    }),
+  },
+  user_agent: {
+    FieldsComponent: undefined, // TODO: Implement
+    docLinkPath: '/user-agent-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.userAgent', {
+      defaultMessage: 'User Agent',
+    }),
+  },
+
+  // --- The below processor descriptors have components implemented ---
+  set: {
+    FieldsComponent: undefined,
+    docLinkPath: '/set-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.set', {
+      defaultMessage: 'Set',
+    }),
+  },
+  grok: {
+    FieldsComponent: undefined,
+    docLinkPath: '/grok-processor.html',
+    label: i18n.translate('xpack.ingestPipelines.processors.label.grok', {
+      defaultMessage: 'Grok',
+    }),
+  },
 };
 
-export const types = Object.keys(mapProcessorTypeToForm);
+export const types = Object.keys(mapProcessorTypeToFormDescriptor).sort();
 
-export type ProcessorType = keyof typeof mapProcessorTypeToForm;
+export type ProcessorType = keyof typeof mapProcessorTypeToFormDescriptor;
 
-export const getProcessorForm = (type: ProcessorType | string): FunctionComponent | undefined => {
-  return mapProcessorTypeToForm[type as ProcessorType];
+export const getProcessorFormDescriptor = (
+  type: ProcessorType | string
+): FieldsFormDescriptor | undefined => {
+  return mapProcessorTypeToFormDescriptor[type as ProcessorType];
 };
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.container.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.container.tsx
index 29b52ef84600a..d76e9225c1a13 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.container.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.container.tsx
@@ -13,9 +13,16 @@ import { ProcessorSettingsForm as ViewComponent } from './processor_settings_for
 
 export type ProcessorSettingsFromOnSubmitArg = Omit<ProcessorInternal, 'id'>;
 
+export type OnSubmitHandler = (processor: ProcessorSettingsFromOnSubmitArg) => void;
+
+export type OnFormUpdateHandler = (form: OnFormUpdateArg<any>) => void;
+
 interface Props {
-  onFormUpdate: (form: OnFormUpdateArg<any>) => void;
-  onSubmit: (processor: ProcessorSettingsFromOnSubmitArg) => void;
+  onFormUpdate: OnFormUpdateHandler;
+  onSubmit: OnSubmitHandler;
+  isOnFailure: boolean;
+  onOpen: () => void;
+  onClose: () => void;
   processor?: ProcessorInternal;
 }
 
@@ -23,6 +30,7 @@ export const ProcessorSettingsForm: FunctionComponent<Props> = ({
   processor,
   onFormUpdate,
   onSubmit,
+  ...rest
 }) => {
   const handleSubmit = useCallback(
     async (data: FormData, isValid: boolean) => {
@@ -52,5 +60,5 @@ export const ProcessorSettingsForm: FunctionComponent<Props> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onFormUpdate]);
 
-  return <ViewComponent processor={processor} form={form} />;
+  return <ViewComponent processor={processor} form={form} {...rest} />;
 };
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx
index 49bde2129aab6..81b5731a96d5f 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx
@@ -3,67 +3,141 @@
  * 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, { FunctionComponent, memo } from 'react';
-import { EuiButton, EuiHorizontalRule } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React, { FunctionComponent, memo, useEffect } from 'react';
+import {
+  EuiButton,
+  EuiHorizontalRule,
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiTitle,
+  EuiFlyoutBody,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
 
 import { Form, useForm, FormDataProvider } from '../../../../../shared_imports';
-
+import { usePipelineProcessorsContext } from '../../context';
 import { ProcessorInternal } from '../../types';
 
-import { getProcessorForm } from './map_processor_type_to_form';
+import { DocumentationButton } from './documentation_button';
+import { ProcessorSettingsFromOnSubmitArg } from './processor_settings_form.container';
+import { getProcessorFormDescriptor } from './map_processor_type_to_form';
 import { CommonProcessorFields, ProcessorTypeField } from './processors/common_fields';
 import { Custom } from './processors/custom';
 
+export type OnSubmitHandler = (processor: ProcessorSettingsFromOnSubmitArg) => void;
+
 export interface Props {
+  isOnFailure: boolean;
   processor?: ProcessorInternal;
   form: ReturnType<typeof useForm>['form'];
+  onClose: () => void;
+  onOpen: () => void;
 }
 
 export const ProcessorSettingsForm: FunctionComponent<Props> = memo(
-  ({ processor, form }) => {
+  ({ processor, form, isOnFailure, onClose, onOpen }) => {
+    const {
+      links: { esDocsBasePath },
+    } = usePipelineProcessorsContext();
+
+    const flyoutTitleContent = isOnFailure ? (
+      <FormattedMessage
+        id="xpack.ingestPipelines.settingsFormOnFailureFlyout.title"
+        defaultMessage="Configure on-failure processor"
+      />
+    ) : (
+      <FormattedMessage
+        id="xpack.ingestPipelines.settingsFormFlyout.title"
+        defaultMessage="Configure processor"
+      />
+    );
+
+    useEffect(
+      () => {
+        onOpen();
+      },
+      [] /* eslint-disable-line react-hooks/exhaustive-deps */
+    );
+
     return (
       <Form form={form}>
-        <ProcessorTypeField initialType={processor?.type} />
-
-        <EuiHorizontalRule />
-
-        <FormDataProvider pathsToWatch="type">
-          {(arg: any) => {
-            const { type } = arg;
-            let formContent: React.ReactNode | undefined;
-
-            if (type?.length) {
-              const ProcessorFormFields = getProcessorForm(type as any);
-
-              if (ProcessorFormFields) {
-                formContent = (
-                  <>
-                    <ProcessorFormFields />
-                    <CommonProcessorFields />
-                  </>
-                );
-              } else {
-                formContent = <Custom defaultOptions={processor?.options} />;
-              }
-
-              return (
-                <>
-                  {formContent}
-                  <EuiButton onClick={form.submit}>
-                    {i18n.translate(
-                      'xpack.ingestPipelines.pipelineEditor.settingsForm.submitButtonLabel',
-                      { defaultMessage: 'Submit' }
-                    )}
-                  </EuiButton>
-                </>
-              );
-            }
-
-            // If the user has not yet defined a type, we do not show any settings fields
-            return null;
-          }}
-        </FormDataProvider>
+        <EuiFlyout onClose={onClose}>
+          <EuiFlyoutHeader>
+            <EuiFlexGroup gutterSize="xs">
+              <EuiFlexItem>
+                <div>
+                  <EuiTitle size="m">
+                    <h2>{flyoutTitleContent}</h2>
+                  </EuiTitle>
+                </div>
+              </EuiFlexItem>
+
+              <EuiFlexItem grow={false}>
+                <FormDataProvider pathsToWatch="type">
+                  {({ type }) => {
+                    const formDescriptor = getProcessorFormDescriptor(type as any);
+
+                    if (formDescriptor) {
+                      return (
+                        <DocumentationButton
+                          processorLabel={formDescriptor.label}
+                          docLink={esDocsBasePath + formDescriptor.docLinkPath}
+                        />
+                      );
+                    }
+                    return null;
+                  }}
+                </FormDataProvider>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlyoutHeader>
+          <EuiFlyoutBody>
+            <ProcessorTypeField initialType={processor?.type} />
+
+            <EuiHorizontalRule />
+
+            <FormDataProvider pathsToWatch="type">
+              {(arg: any) => {
+                const { type } = arg;
+                let formContent: React.ReactNode | undefined;
+
+                if (type?.length) {
+                  const formDescriptor = getProcessorFormDescriptor(type as any);
+
+                  if (formDescriptor?.FieldsComponent) {
+                    formContent = (
+                      <>
+                        <formDescriptor.FieldsComponent />
+                        <CommonProcessorFields />
+                      </>
+                    );
+                  } else {
+                    formContent = <Custom defaultOptions={processor?.options} />;
+                  }
+
+                  return (
+                    <>
+                      {formContent}
+                      <EuiButton onClick={form.submit}>
+                        {i18n.translate(
+                          'xpack.ingestPipelines.pipelineEditor.settingsForm.submitButtonLabel',
+                          { defaultMessage: 'Submit' }
+                        )}
+                      </EuiButton>
+                    </>
+                  );
+                }
+
+                // If the user has not yet defined a type, we do not show any settings fields
+                return null;
+              }}
+            </FormDataProvider>
+          </EuiFlyoutBody>
+        </EuiFlyout>
       </Form>
     );
   },
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_title_and_test_button.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_title_and_test_button.tsx
index bc646c9eefa55..6d1e2610b5c2b 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_title_and_test_button.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_title_and_test_button.tsx
@@ -42,7 +42,7 @@ export const ProcessorsTitleAndTestButton: FunctionComponent<Props> = ({
             defaultMessage="The processors used to pre-process documents before indexing. {learnMoreLink}"
             values={{
               learnMoreLink: (
-                <EuiLink href={links.learnMoreAboutProcessorsUrl} target="_blank">
+                <EuiLink href={links.esDocsBasePath + '/ingest-processors.html'} target="_blank">
                   {i18n.translate(
                     'xpack.ingestPipelines.pipelineEditor.processorsDocumentationLink',
                     {
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/settings_form_flyout.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/settings_form_flyout.tsx
deleted file mode 100644
index 94d5f0eda6454..0000000000000
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/settings_form_flyout.tsx
+++ /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 { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
-
-import React, { FunctionComponent, memo, useEffect } from 'react';
-
-import { FormattedMessage } from '@kbn/i18n/react';
-
-import { OnFormUpdateArg } from '../../../../shared_imports';
-
-import { ProcessorInternal } from '../types';
-
-import { ProcessorSettingsForm, ProcessorSettingsFromOnSubmitArg } from '.';
-
-export type OnSubmitHandler = (processor: ProcessorSettingsFromOnSubmitArg) => void;
-
-export interface Props {
-  processor: ProcessorInternal | undefined;
-  onFormUpdate: (form: OnFormUpdateArg<any>) => void;
-  onSubmit: OnSubmitHandler;
-  isOnFailureProcessor: boolean;
-  onOpen: () => void;
-  onClose: () => void;
-}
-
-export const SettingsFormFlyout: FunctionComponent<Props> = memo(
-  ({ onClose, processor, onSubmit, onFormUpdate, onOpen, isOnFailureProcessor }) => {
-    useEffect(
-      () => {
-        onOpen();
-      },
-      [] /* eslint-disable-line react-hooks/exhaustive-deps */
-    );
-    const flyoutTitleContent = isOnFailureProcessor ? (
-      <FormattedMessage
-        id="xpack.ingestPipelines.settingsFormOnFailureFlyout.title"
-        defaultMessage="Configure on-failure processor"
-      />
-    ) : (
-      <FormattedMessage
-        id="xpack.ingestPipelines.settingsFormFlyout.title"
-        defaultMessage="Configure processor"
-      />
-    );
-
-    return (
-      <EuiFlyout onClose={onClose}>
-        <EuiFlyoutHeader>
-          <EuiTitle>
-            <h2>{flyoutTitleContent}</h2>
-          </EuiTitle>
-        </EuiFlyoutHeader>
-        <EuiFlyoutBody>
-          <ProcessorSettingsForm
-            onFormUpdate={onFormUpdate}
-            processor={processor}
-            onSubmit={onSubmit}
-          />
-        </EuiFlyoutBody>
-      </EuiFlyout>
-    );
-  }
-);
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/context.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/context.tsx
index 150a52f1a5fe0..fbc06f41208fe 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/context.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/context.tsx
@@ -9,8 +9,7 @@ import { EditorMode } from './types';
 import { ProcessorsDispatch } from './processors_reducer';
 
 interface Links {
-  learnMoreAboutProcessorsUrl: string;
-  learnMoreAboutOnFailureProcessorsUrl: string;
+  esDocsBasePath: string;
 }
 
 const PipelineProcessorsContext = createContext<{
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.container.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.container.tsx
index 057f8638700a4..7257677c08fc2 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.container.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.container.tsx
@@ -26,8 +26,7 @@ export interface Props {
   onUpdate: (arg: OnUpdateHandlerArg) => void;
   isTestButtonDisabled: boolean;
   onTestPipelineClick: () => void;
-  learnMoreAboutProcessorsUrl: string;
-  learnMoreAboutOnFailureProcessorsUrl: string;
+  esDocsBasePath: string;
   /**
    * Give users a way to react to this component opening a flyout
    */
@@ -41,8 +40,7 @@ export const PipelineProcessorsEditor: FunctionComponent<Props> = ({
   onFlyoutOpen,
   onUpdate,
   isTestButtonDisabled,
-  learnMoreAboutOnFailureProcessorsUrl,
-  learnMoreAboutProcessorsUrl,
+  esDocsBasePath,
   onTestPipelineClick,
 }) => {
   const deserializedResult = useMemo(
@@ -61,7 +59,7 @@ export const PipelineProcessorsEditor: FunctionComponent<Props> = ({
   return (
     <PipelineProcessorsContextProvider
       processorsDispatch={processorsDispatch}
-      links={{ learnMoreAboutOnFailureProcessorsUrl, learnMoreAboutProcessorsUrl }}
+      links={{ esDocsBasePath }}
     >
       <PipelineProcessorsEditorUI
         onFlyoutOpen={onFlyoutOpen}
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx
index 24b9598a74d47..b64f77f582b3a 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx
@@ -14,19 +14,22 @@ import {
   ProcessorsTitleAndTestButton,
   OnFailureProcessorsTitle,
   ProcessorsTree,
-  SettingsFormFlyout,
   ProcessorRemoveModal,
   OnActionHandler,
   OnSubmitHandler,
+  ProcessorSettingsForm,
 } from './components';
 
+import { ProcessorInternal, OnUpdateHandlerArg, FormValidityState, OnFormUpdateArg } from './types';
+
 import {
-  ProcessorInternal,
-  ProcessorSelector,
-  OnUpdateHandlerArg,
-  FormValidityState,
-  OnFormUpdateArg,
-} from './types';
+  ON_FAILURE_STATE_SCOPE,
+  PROCESSOR_STATE_SCOPE,
+  isOnFailureSelector,
+} from './processors_reducer';
+
+const PROCESSORS_BASE_SELECTOR = [PROCESSOR_STATE_SCOPE];
+const ON_FAILURE_BASE_SELECTOR = [ON_FAILURE_STATE_SCOPE];
 
 import { serialize } from './serialize';
 import { getValue } from './utils';
@@ -41,9 +44,6 @@ export interface Props {
   onFlyoutOpen: () => void;
 }
 
-const PROCESSOR_STATE_SCOPE: ProcessorSelector = ['processors'];
-const ON_FAILURE_STATE_SCOPE: ProcessorSelector = ['onFailure'];
-
 export const PipelineProcessorsEditor: FunctionComponent<Props> = memo(
   function PipelineProcessorsEditor({
     processors,
@@ -168,7 +168,7 @@ export const PipelineProcessorsEditor: FunctionComponent<Props> = memo(
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <ProcessorsTree
-              baseSelector={PROCESSOR_STATE_SCOPE}
+              baseSelector={PROCESSORS_BASE_SELECTOR}
               processors={processors}
               onAction={onTreeAction}
               movingProcessor={movingProcessor}
@@ -197,7 +197,7 @@ export const PipelineProcessorsEditor: FunctionComponent<Props> = memo(
             <EuiFlexItem grow={false}>
               <ProcessorsTree
                 data-test-subj="pipelineEditorOnFailureTree"
-                baseSelector={ON_FAILURE_STATE_SCOPE}
+                baseSelector={ON_FAILURE_BASE_SELECTOR}
                 processors={onFailureProcessors}
                 onAction={onTreeAction}
                 movingProcessor={movingProcessor}
@@ -206,8 +206,8 @@ export const PipelineProcessorsEditor: FunctionComponent<Props> = memo(
           ) : undefined}
         </EuiFlexGroup>
         {editorMode.id === 'editingProcessor' || editorMode.id === 'creatingProcessor' ? (
-          <SettingsFormFlyout
-            isOnFailureProcessor={editorMode.arg.selector.length > 1}
+          <ProcessorSettingsForm
+            isOnFailure={isOnFailureSelector(editorMode.arg.selector)}
             processor={editorMode.id === 'editingProcessor' ? editorMode.arg.processor : undefined}
             onOpen={onFlyoutOpen}
             onFormUpdate={onFormUpdate}
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/constants.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/constants.ts
new file mode 100644
index 0000000000000..51d5cac8ceef2
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/constants.ts
@@ -0,0 +1,8 @@
+/*
+ * 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 PROCESSOR_STATE_SCOPE = 'processors';
+export const ON_FAILURE_STATE_SCOPE = 'onFailure';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/index.ts
index b43d94e19bf9f..7265f63f45a5d 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/index.ts
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/index.ts
@@ -12,4 +12,6 @@ export {
   Action,
 } from './processors_reducer';
 
-export { isChildPath } from './utils';
+export { ON_FAILURE_STATE_SCOPE, PROCESSOR_STATE_SCOPE } from './constants';
+
+export { isChildPath, isOnFailureSelector } from './utils';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/utils.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/utils.ts
index 7cb7d076623aa..6ee6b321f8b46 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/utils.ts
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/processors_reducer/utils.ts
@@ -9,6 +9,17 @@ import { ProcessorInternal, ProcessorSelector } from '../types';
 import { DropSpecialLocations } from '../constants';
 import { checkIfSamePath, getValue } from '../utils';
 
+import { ON_FAILURE_STATE_SCOPE } from './constants';
+
+/**
+ * We know that it must be an on-failure handler if the selector length is greater than 2
+ * because the first element will always be either processors or the global on-failure
+ * array and the second element will be a number indicating the processor position in the
+ * array. Anything more than that we know we are add an on failure handler.
+ */
+export const isOnFailureSelector = (selector: ProcessorSelector) =>
+  selector[0] === ON_FAILURE_STATE_SCOPE || selector.length > 2;
+
 export const PARENT_CHILD_NEST_ERROR = 'PARENT_CHILD_NEST_ERROR';
 
 export const duplicateProcessor = (sourceProcessor: ProcessorInternal): ProcessorInternal => {
diff --git a/x-pack/plugins/ingest_pipelines/public/application/services/documentation.ts b/x-pack/plugins/ingest_pipelines/public/application/services/documentation.ts
index 05fdc4b1dfb84..7f6a87a46fea3 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/services/documentation.ts
+++ b/x-pack/plugins/ingest_pipelines/public/application/services/documentation.ts
@@ -15,6 +15,10 @@ export class DocumentationService {
     this.esDocBasePath = `${docsBase}/elasticsearch/reference/${DOC_LINK_VERSION}`;
   }
 
+  public getEsDocsBasePath() {
+    return this.esDocBasePath;
+  }
+
   public getIngestNodeUrl() {
     return `${this.esDocBasePath}/ingest.html`;
   }

From bb03b75416bb04900b64d6e1d4da321fb410e7d0 Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Wed, 17 Jun 2020 14:00:52 -0400
Subject: [PATCH 03/63] Removing flaky axe rule (#69418)

---
 test/accessibility/services/a11y/a11y.ts          | 3 +++
 x-pack/test/accessibility/apps/home.ts            | 3 +--
 x-pack/test/accessibility/apps/search_profiler.ts | 3 +--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/test/accessibility/services/a11y/a11y.ts b/test/accessibility/services/a11y/a11y.ts
index 525445c60818a..35cef2b81d64e 100644
--- a/test/accessibility/services/a11y/a11y.ts
+++ b/test/accessibility/services/a11y/a11y.ts
@@ -99,6 +99,9 @@ export function A11yProvider({ getService }: FtrProviderContext) {
           'color-contrast': {
             enabled: false,
           },
+          bypass: {
+            enabled: false, // disabled because it's too flaky
+          },
         },
       };
 
diff --git a/x-pack/test/accessibility/apps/home.ts b/x-pack/test/accessibility/apps/home.ts
index fe698acec322a..1f05ff676e3a0 100644
--- a/x-pack/test/accessibility/apps/home.ts
+++ b/x-pack/test/accessibility/apps/home.ts
@@ -12,8 +12,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const globalNav = getService('globalNav');
 
-  // FLAKY: https://github.com/elastic/kibana/issues/66976
-  describe.skip('Kibana Home', () => {
+  describe('Kibana Home', () => {
     before(async () => {
       await PageObjects.common.navigateToApp('home');
     });
diff --git a/x-pack/test/accessibility/apps/search_profiler.ts b/x-pack/test/accessibility/apps/search_profiler.ts
index 138231d3cf025..8a13940695f9e 100644
--- a/x-pack/test/accessibility/apps/search_profiler.ts
+++ b/x-pack/test/accessibility/apps/search_profiler.ts
@@ -14,8 +14,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const a11y = getService('a11y');
   const flyout = getService('flyout');
 
-  // FLAKY: https://github.com/elastic/kibana/issues/67821
-  describe.skip('Accessibility Search Profiler Editor', () => {
+  describe('Accessibility Search Profiler Editor', () => {
     before(async () => {
       await PageObjects.common.navigateToApp('searchProfiler');
       await a11y.testAppSnapshot();

From 052dfe9f9a7132a9a13b709e862435065a44420e Mon Sep 17 00:00:00 2001
From: Jen Huang <its.jenetic@gmail.com>
Date: Wed, 17 Jun 2020 12:23:31 -0700
Subject: [PATCH 04/63] [Ingest Manager] Replace `datasources` with `inputs`
 when generating agent config (#69226)

* Adjust agent config generation, change `datasources` to `inputs`

* Add dataset.type

* Remove dead code

* Revert "Add dataset.type"

This reverts commit fbcf50cbe2b6a93536386c82d754a6a7c7f2b8e9.

* Update endpoint policy test assertion
---
 .../common/services/config_to_yaml.ts         |   5 +-
 .../datasource_to_agent_datasource.test.ts    | 190 ------------------
 .../datasource_to_agent_datasource.ts         |  60 ------
 .../datasources_to_agent_inputs.test.ts       | 158 +++++++++++++++
 .../services/datasources_to_agent_inputs.ts   |  64 ++++++
 .../ingest_manager/common/services/index.ts   |   2 +-
 .../common/types/models/agent_config.ts       |  38 ++--
 .../ingest_manager/services/index.ts          |   2 +-
 .../server/services/agent_config.test.ts      |   6 +-
 .../server/services/agent_config.ts           |   6 +-
 .../ingest_manager/server/types/index.tsx     |   2 +-
 .../apps/endpoint/policy_details.ts           | 144 +++++--------
 12 files changed, 303 insertions(+), 374 deletions(-)
 delete mode 100644 x-pack/plugins/ingest_manager/common/services/datasource_to_agent_datasource.test.ts
 delete mode 100644 x-pack/plugins/ingest_manager/common/services/datasource_to_agent_datasource.ts
 create mode 100644 x-pack/plugins/ingest_manager/common/services/datasources_to_agent_inputs.test.ts
 create mode 100644 x-pack/plugins/ingest_manager/common/services/datasources_to_agent_inputs.ts

diff --git a/x-pack/plugins/ingest_manager/common/services/config_to_yaml.ts b/x-pack/plugins/ingest_manager/common/services/config_to_yaml.ts
index 9dfd76b9ddd21..a3bef72e8db5a 100644
--- a/x-pack/plugins/ingest_manager/common/services/config_to_yaml.ts
+++ b/x-pack/plugins/ingest_manager/common/services/config_to_yaml.ts
@@ -11,10 +11,11 @@ const CONFIG_KEYS_ORDER = [
   'name',
   'revision',
   'type',
-  'outputs',
   'settings',
-  'datasources',
+  'outputs',
+  'inputs',
   'enabled',
+  'use_output',
   'package',
   'input',
 ];
diff --git a/x-pack/plugins/ingest_manager/common/services/datasource_to_agent_datasource.test.ts b/x-pack/plugins/ingest_manager/common/services/datasource_to_agent_datasource.test.ts
deleted file mode 100644
index d319ba2beddf9..0000000000000
--- a/x-pack/plugins/ingest_manager/common/services/datasource_to_agent_datasource.test.ts
+++ /dev/null
@@ -1,190 +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 { Datasource, DatasourceInput } from '../types';
-import { storedDatasourceToAgentDatasource } from './datasource_to_agent_datasource';
-
-describe('Ingest Manager - storedDatasourceToAgentDatasource', () => {
-  const mockDatasource: Datasource = {
-    id: 'some-uuid',
-    name: 'mock-datasource',
-    description: '',
-    created_at: '',
-    created_by: '',
-    updated_at: '',
-    updated_by: '',
-    config_id: '',
-    enabled: true,
-    output_id: '',
-    namespace: 'default',
-    inputs: [],
-    revision: 1,
-  };
-
-  const mockInput: DatasourceInput = {
-    type: 'test-logs',
-    enabled: true,
-    vars: {
-      inputVar: { value: 'input-value' },
-      inputVar2: { value: undefined },
-      inputVar3: {
-        type: 'yaml',
-        value: 'testField: test',
-      },
-      inputVar4: { value: '' },
-    },
-    streams: [
-      {
-        id: 'test-logs-foo',
-        enabled: true,
-        dataset: 'foo',
-        vars: {
-          fooVar: { value: 'foo-value' },
-          fooVar2: { value: [1, 2] },
-        },
-        agent_stream: {
-          fooKey: 'fooValue1',
-          fooKey2: ['fooValue2'],
-        },
-      },
-      {
-        id: 'test-logs-bar',
-        enabled: true,
-        dataset: 'bar',
-        vars: {
-          barVar: { value: 'bar-value' },
-          barVar2: { value: [1, 2] },
-          barVar3: {
-            type: 'yaml',
-            value:
-              '- namespace: mockNamespace\n  #disabledProp: ["test"]\n  anotherProp: test\n- namespace: mockNamespace2\n  #disabledProp: ["test2"]\n  anotherProp: test2',
-          },
-          barVar4: {
-            type: 'yaml',
-            value: '',
-          },
-          barVar5: {
-            type: 'yaml',
-            value: 'testField: test\n invalidSpacing: foo',
-          },
-        },
-      },
-    ],
-  };
-
-  it('returns agent datasource config for datasource with no inputs', () => {
-    expect(storedDatasourceToAgentDatasource(mockDatasource)).toEqual({
-      id: 'some-uuid',
-      name: 'mock-datasource',
-      namespace: 'default',
-      enabled: true,
-      use_output: 'default',
-      inputs: [],
-    });
-
-    expect(
-      storedDatasourceToAgentDatasource({
-        ...mockDatasource,
-        package: {
-          name: 'mock-package',
-          title: 'Mock package',
-          version: '0.0.0',
-        },
-      })
-    ).toEqual({
-      id: 'some-uuid',
-      name: 'mock-datasource',
-      namespace: 'default',
-      enabled: true,
-      use_output: 'default',
-      package: {
-        name: 'mock-package',
-        version: '0.0.0',
-      },
-      inputs: [],
-    });
-  });
-
-  it('returns agent datasource config with flattened input and package stream', () => {
-    expect(storedDatasourceToAgentDatasource({ ...mockDatasource, inputs: [mockInput] })).toEqual({
-      id: 'some-uuid',
-      name: 'mock-datasource',
-      namespace: 'default',
-      enabled: true,
-      use_output: 'default',
-      inputs: [
-        {
-          type: 'test-logs',
-          enabled: true,
-          streams: [
-            {
-              id: 'test-logs-foo',
-              enabled: true,
-              dataset: 'foo',
-              fooKey: 'fooValue1',
-              fooKey2: ['fooValue2'],
-            },
-            {
-              id: 'test-logs-bar',
-              enabled: true,
-              dataset: 'bar',
-            },
-          ],
-        },
-      ],
-    });
-  });
-
-  it('returns agent datasource config without disabled streams', () => {
-    expect(
-      storedDatasourceToAgentDatasource({
-        ...mockDatasource,
-        inputs: [
-          {
-            ...mockInput,
-            streams: [{ ...mockInput.streams[0] }, { ...mockInput.streams[1], enabled: false }],
-          },
-        ],
-      })
-    ).toEqual({
-      id: 'some-uuid',
-      name: 'mock-datasource',
-      namespace: 'default',
-      enabled: true,
-      use_output: 'default',
-      inputs: [
-        {
-          type: 'test-logs',
-          enabled: true,
-          streams: [
-            {
-              id: 'test-logs-foo',
-              enabled: true,
-              dataset: 'foo',
-              fooKey: 'fooValue1',
-              fooKey2: ['fooValue2'],
-            },
-          ],
-        },
-      ],
-    });
-  });
-
-  it('returns agent datasource config without disabled inputs', () => {
-    expect(
-      storedDatasourceToAgentDatasource({
-        ...mockDatasource,
-        inputs: [{ ...mockInput, enabled: false }],
-      })
-    ).toEqual({
-      id: 'some-uuid',
-      name: 'mock-datasource',
-      namespace: 'default',
-      enabled: true,
-      use_output: 'default',
-      inputs: [],
-    });
-  });
-});
diff --git a/x-pack/plugins/ingest_manager/common/services/datasource_to_agent_datasource.ts b/x-pack/plugins/ingest_manager/common/services/datasource_to_agent_datasource.ts
deleted file mode 100644
index 2a8b687675bf9..0000000000000
--- a/x-pack/plugins/ingest_manager/common/services/datasource_to_agent_datasource.ts
+++ /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 { Datasource, FullAgentConfigDatasource } from '../types';
-import { DEFAULT_OUTPUT } from '../constants';
-
-export const storedDatasourceToAgentDatasource = (
-  datasource: Datasource
-): FullAgentConfigDatasource => {
-  const { id, name, namespace, enabled, package: pkg, inputs } = datasource;
-
-  const fullDatasource: FullAgentConfigDatasource = {
-    id: id || name,
-    name,
-    namespace,
-    enabled,
-    use_output: DEFAULT_OUTPUT.name, // TODO: hardcoded to default output for now
-    inputs: inputs
-      .filter((input) => input.enabled)
-      .map((input) => {
-        const fullInput = {
-          ...input,
-          ...Object.entries(input.config || {}).reduce((acc, [key, { value }]) => {
-            acc[key] = value;
-            return acc;
-          }, {} as { [k: string]: any }),
-          streams: input.streams
-            .filter((stream) => stream.enabled)
-            .map((stream) => {
-              const fullStream = {
-                ...stream,
-                ...stream.agent_stream,
-                ...Object.entries(stream.config || {}).reduce((acc, [key, { value }]) => {
-                  acc[key] = value;
-                  return acc;
-                }, {} as { [k: string]: any }),
-              };
-              delete fullStream.agent_stream;
-              delete fullStream.vars;
-              delete fullStream.config;
-              return fullStream;
-            }),
-        };
-        delete fullInput.vars;
-        delete fullInput.config;
-        return fullInput;
-      }),
-  };
-
-  if (pkg) {
-    fullDatasource.package = {
-      name: pkg.name,
-      version: pkg.version,
-    };
-  }
-
-  return fullDatasource;
-};
diff --git a/x-pack/plugins/ingest_manager/common/services/datasources_to_agent_inputs.test.ts b/x-pack/plugins/ingest_manager/common/services/datasources_to_agent_inputs.test.ts
new file mode 100644
index 0000000000000..df94168ec88d0
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/common/services/datasources_to_agent_inputs.test.ts
@@ -0,0 +1,158 @@
+/*
+ * 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 { Datasource, DatasourceInput } from '../types';
+import { storedDatasourcesToAgentInputs } from './datasources_to_agent_inputs';
+
+describe('Ingest Manager - storedDatasourcesToAgentInputs', () => {
+  const mockDatasource: Datasource = {
+    id: 'some-uuid',
+    name: 'mock-datasource',
+    description: '',
+    created_at: '',
+    created_by: '',
+    updated_at: '',
+    updated_by: '',
+    config_id: '',
+    enabled: true,
+    output_id: '',
+    namespace: 'default',
+    inputs: [],
+    revision: 1,
+  };
+
+  const mockInput: DatasourceInput = {
+    type: 'test-logs',
+    enabled: true,
+    vars: {
+      inputVar: { value: 'input-value' },
+      inputVar2: { value: undefined },
+      inputVar3: {
+        type: 'yaml',
+        value: 'testField: test',
+      },
+      inputVar4: { value: '' },
+    },
+    streams: [
+      {
+        id: 'test-logs-foo',
+        enabled: true,
+        dataset: 'foo',
+        vars: {
+          fooVar: { value: 'foo-value' },
+          fooVar2: { value: [1, 2] },
+        },
+        agent_stream: {
+          fooKey: 'fooValue1',
+          fooKey2: ['fooValue2'],
+        },
+      },
+      {
+        id: 'test-logs-bar',
+        enabled: true,
+        dataset: 'bar',
+        vars: {
+          barVar: { value: 'bar-value' },
+          barVar2: { value: [1, 2] },
+          barVar3: {
+            type: 'yaml',
+            value:
+              '- namespace: mockNamespace\n  #disabledProp: ["test"]\n  anotherProp: test\n- namespace: mockNamespace2\n  #disabledProp: ["test2"]\n  anotherProp: test2',
+          },
+          barVar4: {
+            type: 'yaml',
+            value: '',
+          },
+          barVar5: {
+            type: 'yaml',
+            value: 'testField: test\n invalidSpacing: foo',
+          },
+        },
+      },
+    ],
+  };
+
+  it('returns no inputs for datasource with no inputs, or only disabled inputs', () => {
+    expect(storedDatasourcesToAgentInputs([mockDatasource])).toEqual([]);
+
+    expect(
+      storedDatasourcesToAgentInputs([
+        {
+          ...mockDatasource,
+          package: {
+            name: 'mock-package',
+            title: 'Mock package',
+            version: '0.0.0',
+          },
+        },
+      ])
+    ).toEqual([]);
+
+    expect(
+      storedDatasourcesToAgentInputs([
+        {
+          ...mockDatasource,
+          inputs: [{ ...mockInput, enabled: false }],
+        },
+      ])
+    ).toEqual([]);
+  });
+
+  it('returns agent inputs', () => {
+    expect(storedDatasourcesToAgentInputs([{ ...mockDatasource, inputs: [mockInput] }])).toEqual([
+      {
+        id: 'some-uuid',
+        name: 'mock-datasource',
+        type: 'test-logs',
+        dataset: { namespace: 'default' },
+        use_output: 'default',
+        streams: [
+          {
+            id: 'test-logs-foo',
+            dataset: { name: 'foo' },
+            fooKey: 'fooValue1',
+            fooKey2: ['fooValue2'],
+          },
+          {
+            id: 'test-logs-bar',
+            dataset: { name: 'bar' },
+          },
+        ],
+      },
+    ]);
+  });
+
+  it('returns agent inputs without disabled streams', () => {
+    expect(
+      storedDatasourcesToAgentInputs([
+        {
+          ...mockDatasource,
+          inputs: [
+            {
+              ...mockInput,
+              streams: [{ ...mockInput.streams[0] }, { ...mockInput.streams[1], enabled: false }],
+            },
+          ],
+        },
+      ])
+    ).toEqual([
+      {
+        id: 'some-uuid',
+        name: 'mock-datasource',
+        type: 'test-logs',
+        dataset: { namespace: 'default' },
+        use_output: 'default',
+        streams: [
+          {
+            id: 'test-logs-foo',
+            dataset: { name: 'foo' },
+            fooKey: 'fooValue1',
+            fooKey2: ['fooValue2'],
+          },
+        ],
+      },
+    ]);
+  });
+});
diff --git a/x-pack/plugins/ingest_manager/common/services/datasources_to_agent_inputs.ts b/x-pack/plugins/ingest_manager/common/services/datasources_to_agent_inputs.ts
new file mode 100644
index 0000000000000..d5a752e817b4f
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/common/services/datasources_to_agent_inputs.ts
@@ -0,0 +1,64 @@
+/*
+ * 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 { Datasource, FullAgentConfigInput, FullAgentConfigInputStream } from '../types';
+import { DEFAULT_OUTPUT } from '../constants';
+
+export const storedDatasourcesToAgentInputs = (
+  datasources: Datasource[]
+): FullAgentConfigInput[] => {
+  const fullInputs: FullAgentConfigInput[] = [];
+
+  datasources.forEach((datasource) => {
+    if (!datasource.enabled || !datasource.inputs || !datasource.inputs.length) {
+      return;
+    }
+    datasource.inputs.forEach((input) => {
+      if (!input.enabled) {
+        return;
+      }
+
+      const fullInput: FullAgentConfigInput = {
+        id: datasource.id || datasource.name,
+        name: datasource.name,
+        type: input.type,
+        dataset: { namespace: datasource.namespace || 'default' },
+        use_output: DEFAULT_OUTPUT.name,
+        ...Object.entries(input.config || {}).reduce((acc, [key, { value }]) => {
+          acc[key] = value;
+          return acc;
+        }, {} as { [k: string]: any }),
+        streams: input.streams
+          .filter((stream) => stream.enabled)
+          .map((stream) => {
+            const fullStream: FullAgentConfigInputStream = {
+              id: stream.id,
+              dataset: { name: stream.dataset },
+              ...stream.agent_stream,
+              ...Object.entries(stream.config || {}).reduce((acc, [key, { value }]) => {
+                acc[key] = value;
+                return acc;
+              }, {} as { [k: string]: any }),
+            };
+            if (stream.processors) {
+              fullStream.processors = stream.processors;
+            }
+            return fullStream;
+          }),
+      };
+
+      if (datasource.package) {
+        fullInput.package = {
+          name: datasource.package.name,
+          version: datasource.package.version,
+        };
+      }
+
+      fullInputs.push(fullInput);
+    });
+  });
+
+  return fullInputs;
+};
diff --git a/x-pack/plugins/ingest_manager/common/services/index.ts b/x-pack/plugins/ingest_manager/common/services/index.ts
index c595c9a52f66f..e53d97972fa2f 100644
--- a/x-pack/plugins/ingest_manager/common/services/index.ts
+++ b/x-pack/plugins/ingest_manager/common/services/index.ts
@@ -7,7 +7,7 @@ import * as AgentStatusKueryHelper from './agent_status';
 
 export * from './routes';
 export { packageToConfigDatasourceInputs, packageToConfigDatasource } from './package_to_config';
-export { storedDatasourceToAgentDatasource } from './datasource_to_agent_datasource';
+export { storedDatasourcesToAgentInputs } from './datasources_to_agent_inputs';
 export { configToYaml } from './config_to_yaml';
 export { AgentStatusKueryHelper };
 export { decodeCloudId } from './decode_cloud_id';
diff --git a/x-pack/plugins/ingest_manager/common/types/models/agent_config.ts b/x-pack/plugins/ingest_manager/common/types/models/agent_config.ts
index 7547f56237eec..36b3176ffa415 100644
--- a/x-pack/plugins/ingest_manager/common/types/models/agent_config.ts
+++ b/x-pack/plugins/ingest_manager/common/types/models/agent_config.ts
@@ -3,12 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import {
-  Datasource,
-  DatasourcePackage,
-  DatasourceInput,
-  DatasourceInputStream,
-} from './datasource';
+import { Datasource, DatasourcePackage, DatasourceInputStream } from './datasource';
 import { Output } from './output';
 
 export enum AgentConfigStatus {
@@ -35,23 +30,22 @@ export interface AgentConfig extends NewAgentConfig {
 
 export type AgentConfigSOAttributes = Omit<AgentConfig, 'id'>;
 
-export type FullAgentConfigDatasource = Pick<
-  Datasource,
-  'id' | 'name' | 'namespace' | 'enabled'
-> & {
-  package?: Pick<DatasourcePackage, 'name' | 'version'>;
-  use_output: string;
-  inputs: Array<
-    Omit<DatasourceInput, 'streams'> & {
-      streams: Array<
-        Omit<DatasourceInputStream, 'config'> & {
-          [key: string]: any;
-        }
-      >;
-    }
-  >;
+export type FullAgentConfigInputStream = Pick<DatasourceInputStream, 'id' | 'processors'> & {
+  dataset: { name: string };
+  [key: string]: any;
 };
 
+export interface FullAgentConfigInput {
+  id: string;
+  name: string;
+  type: string;
+  dataset: { namespace: string };
+  use_output: string;
+  package?: Pick<DatasourcePackage, 'name' | 'version'>;
+  streams: FullAgentConfigInputStream[];
+  [key: string]: any;
+}
+
 export interface FullAgentConfig {
   id: string;
   outputs: {
@@ -59,7 +53,7 @@ export interface FullAgentConfig {
       [key: string]: any;
     };
   };
-  datasources: FullAgentConfigDatasource[];
+  inputs: FullAgentConfigInput[];
   revision?: number;
   settings?: {
     monitoring: {
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/services/index.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/services/index.ts
index 6dbc8d67caaee..ece7aef2c247f 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/services/index.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/services/index.ts
@@ -19,7 +19,7 @@ export {
   settingsRoutesService,
   appRoutesService,
   packageToConfigDatasourceInputs,
-  storedDatasourceToAgentDatasource,
+  storedDatasourcesToAgentInputs,
   configToYaml,
   AgentStatusKueryHelper,
 } from '../../../../common';
diff --git a/x-pack/plugins/ingest_manager/server/services/agent_config.test.ts b/x-pack/plugins/ingest_manager/server/services/agent_config.test.ts
index 17758f6e3d7f1..c46e648ad088a 100644
--- a/x-pack/plugins/ingest_manager/server/services/agent_config.test.ts
+++ b/x-pack/plugins/ingest_manager/server/services/agent_config.test.ts
@@ -59,7 +59,7 @@ describe('agent config', () => {
             api_key: undefined,
           },
         },
-        datasources: [],
+        inputs: [],
         revision: 1,
         settings: {
           monitoring: {
@@ -88,7 +88,7 @@ describe('agent config', () => {
             api_key: undefined,
           },
         },
-        datasources: [],
+        inputs: [],
         revision: 1,
         settings: {
           monitoring: {
@@ -118,7 +118,7 @@ describe('agent config', () => {
             api_key: undefined,
           },
         },
-        datasources: [],
+        inputs: [],
         revision: 1,
         settings: {
           monitoring: {
diff --git a/x-pack/plugins/ingest_manager/server/services/agent_config.ts b/x-pack/plugins/ingest_manager/server/services/agent_config.ts
index 18d5d8dedfb1f..9e0386de74763 100644
--- a/x-pack/plugins/ingest_manager/server/services/agent_config.ts
+++ b/x-pack/plugins/ingest_manager/server/services/agent_config.ts
@@ -20,7 +20,7 @@ import {
   AgentConfigStatus,
   ListWithKuery,
 } from '../types';
-import { DeleteAgentConfigResponse, storedDatasourceToAgentDatasource } from '../../common';
+import { DeleteAgentConfigResponse, storedDatasourcesToAgentInputs } from '../../common';
 import { listAgents } from './agents';
 import { datasourceService } from './datasource';
 import { outputService } from './output';
@@ -375,9 +375,7 @@ class AgentConfigService {
           {} as FullAgentConfig['outputs']
         ),
       },
-      datasources: (config.datasources as Datasource[])
-        .filter((datasource) => datasource.enabled)
-        .map((ds) => storedDatasourceToAgentDatasource(ds)),
+      inputs: storedDatasourcesToAgentInputs(config.datasources as Datasource[]),
       revision: config.revision,
       ...(config.monitoring_enabled && config.monitoring_enabled.length > 0
         ? {
diff --git a/x-pack/plugins/ingest_manager/server/types/index.tsx b/x-pack/plugins/ingest_manager/server/types/index.tsx
index 2218d967fa8aa..2b543490ca8da 100644
--- a/x-pack/plugins/ingest_manager/server/types/index.tsx
+++ b/x-pack/plugins/ingest_manager/server/types/index.tsx
@@ -20,7 +20,7 @@ export {
   Datasource,
   NewDatasource,
   DatasourceSOAttributes,
-  FullAgentConfigDatasource,
+  FullAgentConfigInput,
   FullAgentConfig,
   AgentConfig,
   AgentConfigSOAttributes,
diff --git a/x-pack/test/security_solution_endpoint/apps/endpoint/policy_details.ts b/x-pack/test/security_solution_endpoint/apps/endpoint/policy_details.ts
index 25fb477b5a99a..036f82a591fb3 100644
--- a/x-pack/test/security_solution_endpoint/apps/endpoint/policy_details.ts
+++ b/x-pack/test/security_solution_endpoint/apps/endpoint/policy_details.ts
@@ -99,107 +99,71 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         );
 
         expect(agentFullConfig).to.eql({
-          datasources: [
+          inputs: [
             {
-              enabled: true,
               id: policyInfo.datasource.id,
-              inputs: [
-                {
-                  enabled: true,
-                  policy: {
-                    linux: {
-                      advanced: {
-                        elasticsearch: {
-                          indices: {
-                            control: 'control-index',
-                            event: 'event-index',
-                            logging: 'logging-index',
-                          },
-                          kernel: {
-                            connect: true,
-                            process: true,
-                          },
-                        },
-                      },
-                      events: {
-                        file: false,
-                        network: true,
-                        process: true,
-                      },
-                      logging: {
-                        file: 'info',
-                        stdout: 'debug',
+              dataset: { namespace: 'default' },
+              name: 'Protect East Coast',
+              package: {
+                name: 'endpoint',
+                version: policyInfo.packageInfo.version,
+              },
+              policy: {
+                linux: {
+                  advanced: {
+                    elasticsearch: {
+                      indices: {
+                        control: 'control-index',
+                        event: 'event-index',
+                        logging: 'logging-index',
                       },
+                      kernel: { connect: true, process: true },
                     },
-                    mac: {
-                      advanced: {
-                        elasticsearch: {
-                          indices: {
-                            control: 'control-index',
-                            event: 'event-index',
-                            logging: 'logging-index',
-                          },
-                          kernel: {
-                            connect: true,
-                            process: true,
-                          },
-                        },
-                      },
-                      events: {
-                        file: false,
-                        network: true,
-                        process: true,
-                      },
-                      logging: {
-                        file: 'info',
-                        stdout: 'debug',
-                      },
-                      malware: {
-                        mode: 'detect',
+                  },
+                  events: { file: false, network: true, process: true },
+                  logging: { file: 'info', stdout: 'debug' },
+                },
+                mac: {
+                  advanced: {
+                    elasticsearch: {
+                      indices: {
+                        control: 'control-index',
+                        event: 'event-index',
+                        logging: 'logging-index',
                       },
+                      kernel: { connect: true, process: true },
                     },
-                    windows: {
-                      advanced: {
-                        elasticsearch: {
-                          indices: {
-                            control: 'control-index',
-                            event: 'event-index',
-                            logging: 'logging-index',
-                          },
-                          kernel: {
-                            connect: true,
-                            process: true,
-                          },
-                        },
-                      },
-                      events: {
-                        dll_and_driver_load: true,
-                        dns: true,
-                        file: false,
-                        network: true,
-                        process: true,
-                        registry: true,
-                        security: true,
-                      },
-                      logging: {
-                        file: 'info',
-                        stdout: 'debug',
-                      },
-                      malware: {
-                        mode: 'prevent',
+                  },
+                  events: { file: false, network: true, process: true },
+                  logging: { file: 'info', stdout: 'debug' },
+                  malware: { mode: 'detect' },
+                },
+                windows: {
+                  advanced: {
+                    elasticsearch: {
+                      indices: {
+                        control: 'control-index',
+                        event: 'event-index',
+                        logging: 'logging-index',
                       },
+                      kernel: { connect: true, process: true },
                     },
                   },
-                  streams: [],
-                  type: 'endpoint',
+                  events: {
+                    dll_and_driver_load: true,
+                    dns: true,
+                    file: false,
+                    network: true,
+                    process: true,
+                    registry: true,
+                    security: true,
+                  },
+                  logging: { file: 'info', stdout: 'debug' },
+                  malware: { mode: 'prevent' },
                 },
-              ],
-              name: 'Protect East Coast',
-              namespace: 'default',
-              package: {
-                name: 'endpoint',
-                version: policyInfo.packageInfo.version,
               },
+              streams: [],
+              type: 'endpoint',
               use_output: 'default',
             },
           ],

From 1dd5db2cf09c91a9888b8364bc35285e21085986 Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Wed, 17 Jun 2020 21:25:37 +0200
Subject: [PATCH 05/63] [ML] Add Anomaly Swimlane Embeddable to the dashboard
 from the Anomaly Explorer page (#68784)

* [ML] WIP attach swimlane embeddable to dashboard from the explorer page

* [ML] fix deps

* [ML] getDefaultPanelTitle

* [ML] fix TS issue

* [ML] DashboardService

* [ML] unit tests

* [ML] redirect to the dashboard

* [ML] swimlane_panel

* [ML] Anomaly Timeline panel

* [ML] swimlane container

* [ML] fix ts

* [ML] Add multiple swimlanes

* [ML] fix SwimlaneType usage

* [ML] disable edit button on update

* [ML] fix i18n translation key

* [ML] use ViewMode enum

* [ML] use navigateToUrl

* [ML] TODO for edit dashboard

* [ML] check kibana dashboard capabilities

* [ML] mlApiServicesProvider

* [ML] mlResultsServiceProvider

* [ML] fix alignment

* [ML] labels and tooltips

* [ML] fix ts issue for proxyHttpStart

* [ML] canEditDashboards check

* [ML] fix TS

* [ML] update add_to_dashboard_control.tsx

* [ML] add form label, disable control on empty swimlanes selection

* [ML] resolve PR review comments

* [ML] e2e test

* [ML] increase panel padding

* [ML] position in row

* [ML] update e2e

* [ML] add data-test-subj for search box

* [ML] PR remarks
---
 src/plugins/dashboard/public/index.ts         |    4 +-
 src/plugins/dashboard/public/url_generator.ts |    7 +
 x-pack/package.json                           |    1 +
 x-pack/plugins/ml/public/application/app.tsx  |    2 +
 .../loading_indicator/{index.js => index.ts}  |    0
 ...ing_indicator.js => loading_indicator.tsx} |   11 +-
 .../contexts/kibana/kibana_context.ts         |    4 +-
 .../application/contexts/ml/ml_context.ts     |    1 +
 .../explorer/add_to_dashboard_control.tsx     |  321 +++
 .../application/explorer/anomaly_timeline.tsx |  392 +++
 ...d.js => explorer_no_influencers_found.tsx} |   23 +-
 .../public/application/explorer/explorer.js   |  297 +--
 .../explorer/explorer_constants.ts            |   10 +-
 .../explorer/explorer_swimlane.tsx            |    4 +-
 .../reducers/explorer_reducer/state.ts        |    7 +-
 .../explorer/select_limit/select_limit.tsx    |    2 +-
 .../explorer/swimlane_container.tsx           |   61 +
 .../services/dashboard_service.test.ts        |  174 ++
 .../application/services/dashboard_service.ts |  136 +
 .../application/services/http_service.ts      |    6 +-
 .../services/ml_api_service/index.ts          | 1191 +++++----
 .../services/ml_api_service/results.ts        |   16 +-
 .../services/results_service/index.ts         |   53 +-
 .../results_service/result_service_rx.ts      |  940 +++----
 .../results_service/results_service.d.ts      |   86 +-
 .../results_service/results_service.js        | 2361 +++++++++--------
 .../anomaly_swimlane_embeddable.tsx           |   17 +-
 .../anomaly_swimlane_embeddable_factory.ts    |    6 +-
 .../anomaly_swimlane_initializer.tsx          |   10 +-
 .../anomaly_swimlane_setup_flyout.tsx         |   13 +-
 .../explorer_swimlane_container.tsx           |   18 +-
 .../swimlane_input_resolver.ts                |    4 +-
 x-pack/plugins/ml/public/index.ts             |    4 +-
 x-pack/plugins/ml/public/plugin.ts            |   14 +-
 .../ml/anomaly_detection/anomaly_explorer.ts  |    7 +
 x-pack/test/functional/apps/ml/index.ts       |    1 +
 .../services/ml/anomaly_explorer.ts           |   33 +
 .../functional/services/ml/test_resources.ts  |   37 +-
 .../services/ml/test_resources_data.ts        |   19 +
 yarn.lock                                     |    5 +
 40 files changed, 3638 insertions(+), 2660 deletions(-)
 rename x-pack/plugins/ml/public/application/components/loading_indicator/{index.js => index.ts} (100%)
 rename x-pack/plugins/ml/public/application/components/loading_indicator/{loading_indicator.js => loading_indicator.tsx} (70%)
 create mode 100644 x-pack/plugins/ml/public/application/explorer/add_to_dashboard_control.tsx
 create mode 100644 x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx
 rename x-pack/plugins/ml/public/application/explorer/components/explorer_no_influencers_found/{explorer_no_influencers_found.js => explorer_no_influencers_found.tsx} (78%)
 create mode 100644 x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
 create mode 100644 x-pack/plugins/ml/public/application/services/dashboard_service.test.ts
 create mode 100644 x-pack/plugins/ml/public/application/services/dashboard_service.ts

diff --git a/src/plugins/dashboard/public/index.ts b/src/plugins/dashboard/public/index.ts
index 28606b7dd9784..17968dd0281e6 100644
--- a/src/plugins/dashboard/public/index.ts
+++ b/src/plugins/dashboard/public/index.ts
@@ -32,8 +32,10 @@ export {
 export { DashboardConstants, createDashboardEditUrl } from './dashboard_constants';
 
 export { DashboardStart, DashboardUrlGenerator } from './plugin';
-export { DASHBOARD_APP_URL_GENERATOR } from './url_generator';
+export { DASHBOARD_APP_URL_GENERATOR, createDashboardUrlGenerator } from './url_generator';
 export { addEmbeddableToDashboardUrl } from './url_utils/url_helper';
+export { SavedObjectDashboard } from './saved_dashboards';
+export { SavedDashboardPanel } from './types';
 
 export function plugin(initializerContext: PluginInitializerContext) {
   return new DashboardPlugin(initializerContext);
diff --git a/src/plugins/dashboard/public/url_generator.ts b/src/plugins/dashboard/public/url_generator.ts
index d6805b2d94119..188de7fd857be 100644
--- a/src/plugins/dashboard/public/url_generator.ts
+++ b/src/plugins/dashboard/public/url_generator.ts
@@ -28,6 +28,7 @@ import {
 import { setStateToKbnUrl } from '../../kibana_utils/public';
 import { UrlGeneratorsDefinition, UrlGeneratorState } from '../../share/public';
 import { SavedObjectLoader } from '../../saved_objects/public';
+import { ViewMode } from '../../embeddable/public';
 
 export const STATE_STORAGE_KEY = '_a';
 export const GLOBAL_STATE_STORAGE_KEY = '_g';
@@ -73,6 +74,11 @@ export type DashboardAppLinkGeneratorState = UrlGeneratorState<{
    * true is default
    */
   preserveSavedFilters?: boolean;
+
+  /**
+   * View mode of the dashboard.
+   */
+  viewMode?: ViewMode;
 }>;
 
 export const createDashboardUrlGenerator = (
@@ -123,6 +129,7 @@ export const createDashboardUrlGenerator = (
       cleanEmptyKeys({
         query: state.query,
         filters: filters?.filter((f) => !esFilters.isFilterPinned(f)),
+        viewMode: state.viewMode,
       }),
       { useHash },
       `${appBasePath}#/${hash}`
diff --git a/x-pack/package.json b/x-pack/package.json
index e24d75cc0d968..b40a1e4364251 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -61,6 +61,7 @@
     "@types/d3-shape": "^1.3.1",
     "@types/d3-time": "^1.0.10",
     "@types/d3-time-format": "^2.1.1",
+    "@types/dragselect": "^1.13.1",
     "@types/elasticsearch": "^5.0.33",
     "@types/fancy-log": "^1.3.1",
     "@types/file-saver": "^2.0.0",
diff --git a/x-pack/plugins/ml/public/application/app.tsx b/x-pack/plugins/ml/public/application/app.tsx
index 4b6ff8c64822b..b871d857f7fde 100644
--- a/x-pack/plugins/ml/public/application/app.tsx
+++ b/x-pack/plugins/ml/public/application/app.tsx
@@ -35,6 +35,8 @@ const App: FC<AppProps> = ({ coreStart, deps }) => {
   };
   const services = {
     appName: 'ML',
+    kibanaVersion: deps.kibanaVersion,
+    share: deps.share,
     data: deps.data,
     security: deps.security,
     licenseManagement: deps.licenseManagement,
diff --git a/x-pack/plugins/ml/public/application/components/loading_indicator/index.js b/x-pack/plugins/ml/public/application/components/loading_indicator/index.ts
similarity index 100%
rename from x-pack/plugins/ml/public/application/components/loading_indicator/index.js
rename to x-pack/plugins/ml/public/application/components/loading_indicator/index.ts
diff --git a/x-pack/plugins/ml/public/application/components/loading_indicator/loading_indicator.js b/x-pack/plugins/ml/public/application/components/loading_indicator/loading_indicator.tsx
similarity index 70%
rename from x-pack/plugins/ml/public/application/components/loading_indicator/loading_indicator.js
rename to x-pack/plugins/ml/public/application/components/loading_indicator/loading_indicator.tsx
index 20f4fb86b5372..364b23a27eaf7 100644
--- a/x-pack/plugins/ml/public/application/components/loading_indicator/loading_indicator.js
+++ b/x-pack/plugins/ml/public/application/components/loading_indicator/loading_indicator.tsx
@@ -4,12 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import { EuiLoadingChart, EuiSpacer } from '@elastic/eui';
 
-export function LoadingIndicator({ height, label }) {
+export const LoadingIndicator: FC<{ height?: number; label?: string }> = ({ height, label }) => {
   height = height ? +height : 100;
   return (
     <div
@@ -21,13 +20,9 @@ export function LoadingIndicator({ height, label }) {
       {label && (
         <>
           <EuiSpacer size="s" />
-          <div ml-loading-indicator-label="true">{label}</div>
+          <div>{label}</div>
         </>
       )}
     </div>
   );
-}
-LoadingIndicator.propTypes = {
-  height: PropTypes.number,
-  label: PropTypes.string,
 };
diff --git a/x-pack/plugins/ml/public/application/contexts/kibana/kibana_context.ts b/x-pack/plugins/ml/public/application/contexts/kibana/kibana_context.ts
index c65d872212ad6..2a156b5716ad4 100644
--- a/x-pack/plugins/ml/public/application/contexts/kibana/kibana_context.ts
+++ b/x-pack/plugins/ml/public/application/contexts/kibana/kibana_context.ts
@@ -12,13 +12,15 @@ import {
 } from '../../../../../../../src/plugins/kibana_react/public';
 import { SecurityPluginSetup } from '../../../../../security/public';
 import { LicenseManagementUIPluginSetup } from '../../../../../license_management/public';
+import { SharePluginStart } from '../../../../../../../src/plugins/share/public';
 
 interface StartPlugins {
   data: DataPublicPluginStart;
   security?: SecurityPluginSetup;
   licenseManagement?: LicenseManagementUIPluginSetup;
+  share: SharePluginStart;
 }
-export type StartServices = CoreStart & StartPlugins;
+export type StartServices = CoreStart & StartPlugins & { kibanaVersion: string };
 // eslint-disable-next-line react-hooks/rules-of-hooks
 export const useMlKibana = () => useKibana<StartServices>();
 export type MlKibanaReactContextValue = KibanaReactContextValue<StartServices>;
diff --git a/x-pack/plugins/ml/public/application/contexts/ml/ml_context.ts b/x-pack/plugins/ml/public/application/contexts/ml/ml_context.ts
index f8abd48ce8562..07d5a153664b7 100644
--- a/x-pack/plugins/ml/public/application/contexts/ml/ml_context.ts
+++ b/x-pack/plugins/ml/public/application/contexts/ml/ml_context.ts
@@ -14,6 +14,7 @@ export interface MlContextValue {
   currentSavedSearch: SavedSearchSavedObject | null;
   indexPatterns: IndexPatternsContract;
   kibanaConfig: any; // IUiSettingsClient;
+  kibanaVersion: string;
 }
 
 export type SavedSearchQuery = object;
diff --git a/x-pack/plugins/ml/public/application/explorer/add_to_dashboard_control.tsx b/x-pack/plugins/ml/public/application/explorer/add_to_dashboard_control.tsx
new file mode 100644
index 0000000000000..cb11a33ccfd76
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/explorer/add_to_dashboard_control.tsx
@@ -0,0 +1,321 @@
+/*
+ * 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, useCallback, useMemo, useState, useEffect } from 'react';
+import { debounce } from 'lodash';
+import {
+  EuiFormRow,
+  EuiCheckboxGroup,
+  EuiInMemoryTableProps,
+  EuiModal,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiOverlayMask,
+  EuiSpacer,
+  EuiButtonEmpty,
+  EuiButton,
+  EuiModalFooter,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiModalBody } from '@elastic/eui';
+import { EuiInMemoryTable } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useMlKibana } from '../contexts/kibana';
+import { SavedObjectDashboard } from '../../../../../../src/plugins/dashboard/public';
+import {
+  ANOMALY_SWIMLANE_EMBEDDABLE_TYPE,
+  getDefaultPanelTitle,
+} from '../../embeddables/anomaly_swimlane/anomaly_swimlane_embeddable';
+import { useDashboardService } from '../services/dashboard_service';
+import { SWIMLANE_TYPE, SwimlaneType } from './explorer_constants';
+import { JobId } from '../../../common/types/anomaly_detection_jobs';
+
+export interface DashboardItem {
+  id: string;
+  title: string;
+  description: string | undefined;
+  attributes: SavedObjectDashboard;
+}
+
+export type EuiTableProps = EuiInMemoryTableProps<DashboardItem>;
+
+function getDefaultEmbeddablepaPanelConfig(jobIds: JobId[]) {
+  return {
+    type: ANOMALY_SWIMLANE_EMBEDDABLE_TYPE,
+    title: getDefaultPanelTitle(jobIds),
+  };
+}
+
+interface AddToDashboardControlProps {
+  jobIds: JobId[];
+  viewBy: string;
+  limit: number;
+  onClose: (callback?: () => Promise<any>) => void;
+}
+
+/**
+ * Component for attaching anomaly swimlane embeddable to dashboards.
+ */
+export const AddToDashboardControl: FC<AddToDashboardControlProps> = ({
+  onClose,
+  jobIds,
+  viewBy,
+  limit,
+}) => {
+  const {
+    notifications: { toasts },
+    services: {
+      application: { navigateToUrl },
+    },
+  } = useMlKibana();
+
+  useEffect(() => {
+    fetchDashboards();
+
+    return () => {
+      fetchDashboards.cancel();
+    };
+  }, []);
+
+  const dashboardService = useDashboardService();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedSwimlanes, setSelectedSwimlanes] = useState<{ [key in SwimlaneType]: boolean }>({
+    [SWIMLANE_TYPE.OVERALL]: true,
+    [SWIMLANE_TYPE.VIEW_BY]: false,
+  });
+  const [dashboardItems, setDashboardItems] = useState<DashboardItem[]>([]);
+  const [selectedItems, setSelectedItems] = useState<DashboardItem[]>([]);
+
+  const fetchDashboards = useCallback(
+    debounce(async (query?: string) => {
+      try {
+        const response = await dashboardService.fetchDashboards(query);
+        const items: DashboardItem[] = response.savedObjects.map((savedObject) => {
+          return {
+            id: savedObject.id,
+            title: savedObject.attributes.title,
+            description: savedObject.attributes.description,
+            attributes: savedObject.attributes,
+          };
+        });
+        setDashboardItems(items);
+      } catch (e) {
+        toasts.danger({
+          body: e,
+        });
+      }
+      setIsLoading(false);
+    }, 500),
+    []
+  );
+
+  const search: EuiTableProps['search'] = useMemo(() => {
+    return {
+      onChange: ({ queryText }) => {
+        setIsLoading(true);
+        fetchDashboards(queryText);
+      },
+      box: {
+        incremental: true,
+        'data-test-subj': 'mlDashboardsSearchBox',
+      },
+    };
+  }, []);
+
+  const addSwimlaneToDashboardCallback = useCallback(async () => {
+    const swimlanes = Object.entries(selectedSwimlanes)
+      .filter(([, isSelected]) => isSelected)
+      .map(([swimlaneType]) => swimlaneType);
+
+    for (const selectedDashboard of selectedItems) {
+      const panelsData = swimlanes.map((swimlaneType) => {
+        const config = getDefaultEmbeddablepaPanelConfig(jobIds);
+        if (swimlaneType === SWIMLANE_TYPE.VIEW_BY) {
+          return {
+            ...config,
+            embeddableConfig: {
+              jobIds,
+              swimlaneType,
+              viewBy,
+              limit,
+            },
+          };
+        }
+        return {
+          ...config,
+          embeddableConfig: {
+            jobIds,
+            swimlaneType,
+          },
+        };
+      });
+
+      try {
+        await dashboardService.attachPanels(
+          selectedDashboard.id,
+          selectedDashboard.attributes,
+          panelsData
+        );
+        toasts.success({
+          title: (
+            <FormattedMessage
+              id="xpack.ml.explorer.dashboardsTable.savedSuccessfullyTitle"
+              defaultMessage='Dashboard "{dashboardTitle}" updated successfully'
+              values={{ dashboardTitle: selectedDashboard.title }}
+            />
+          ),
+          toastLifeTimeMs: 3000,
+        });
+      } catch (e) {
+        toasts.danger({
+          body: e,
+        });
+      }
+    }
+  }, [selectedSwimlanes, selectedItems]);
+
+  const columns: EuiTableProps['columns'] = [
+    {
+      field: 'title',
+      name: i18n.translate('xpack.ml.explorer.dashboardsTable.titleColumnHeader', {
+        defaultMessage: 'Title',
+      }),
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: 'description',
+      name: i18n.translate('xpack.ml.explorer.dashboardsTable.descriptionColumnHeader', {
+        defaultMessage: 'Description',
+      }),
+      truncateText: true,
+    },
+  ];
+
+  const swimlaneTypeOptions = [
+    {
+      id: SWIMLANE_TYPE.OVERALL,
+      label: i18n.translate('xpack.ml.explorer.overallLabel', {
+        defaultMessage: 'Overall',
+      }),
+    },
+    {
+      id: SWIMLANE_TYPE.VIEW_BY,
+      label: i18n.translate('xpack.ml.explorer.viewByFieldLabel', {
+        defaultMessage: 'View by {viewByField}, up to {limit} rows',
+        values: { viewByField: viewBy, limit },
+      }),
+    },
+  ];
+
+  const selection: EuiTableProps['selection'] = {
+    onSelectionChange: setSelectedItems,
+  };
+
+  const noSwimlaneSelected = Object.values(selectedSwimlanes).every((isSelected) => !isSelected);
+
+  return (
+    <EuiOverlayMask data-test-subj="mlAddToDashboardModal">
+      <EuiModal onClose={onClose.bind(null, undefined)}>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>
+            <FormattedMessage
+              id="xpack.ml.explorer.dashboardsTitle"
+              defaultMessage="Add swimlanes to dashboards"
+            />
+          </EuiModalHeaderTitle>
+        </EuiModalHeader>
+        <EuiModalBody>
+          <EuiFormRow
+            label={
+              <FormattedMessage
+                id="xpack.ml.explorer.addToDashboard.selectSwimlanesLabel"
+                defaultMessage="Select swimlane view:"
+              />
+            }
+          >
+            <EuiCheckboxGroup
+              options={swimlaneTypeOptions}
+              idToSelectedMap={selectedSwimlanes}
+              onChange={(optionId) => {
+                const newSelection = {
+                  ...selectedSwimlanes,
+                  [optionId]: !selectedSwimlanes[optionId as SwimlaneType],
+                };
+                setSelectedSwimlanes(newSelection);
+              }}
+              data-test-subj="mlAddToDashboardSwimlaneTypeSelector"
+            />
+          </EuiFormRow>
+
+          <EuiSpacer size="m" />
+
+          <EuiFormRow
+            fullWidth
+            label={
+              <FormattedMessage
+                id="xpack.ml.explorer.addToDashboard.selectDashboardsLabel"
+                defaultMessage="Select dashboards:"
+              />
+            }
+            data-test-subj="mlDashboardSelectionContainer"
+          >
+            <EuiInMemoryTable
+              itemId="id"
+              isSelectable={true}
+              selection={selection}
+              items={dashboardItems}
+              loading={isLoading}
+              columns={columns}
+              search={search}
+              pagination={true}
+              sorting={true}
+              data-test-subj="mlDashboardSelectionTable"
+            />
+          </EuiFormRow>
+        </EuiModalBody>
+        <EuiModalFooter>
+          <EuiButtonEmpty onClick={onClose.bind(null, undefined)}>
+            <FormattedMessage
+              id="xpack.ml.explorer.addToDashboard.cancelButtonLabel"
+              defaultMessage="Cancel"
+            />
+          </EuiButtonEmpty>
+          <EuiButton
+            disabled={noSwimlaneSelected || selectedItems.length !== 1}
+            onClick={async () => {
+              onClose(async () => {
+                const selectedDashboardId = selectedItems[0].id;
+                await addSwimlaneToDashboardCallback();
+                await navigateToUrl(
+                  await dashboardService.getDashboardEditUrl(selectedDashboardId)
+                );
+              });
+            }}
+            data-test-subj="mlAddAndEditDashboardButton"
+          >
+            <FormattedMessage
+              id="xpack.ml.explorer.dashboardsTable.addAndEditDashboardLabel"
+              defaultMessage="Add and edit dashboard"
+            />
+          </EuiButton>
+          <EuiButton
+            fill
+            onClick={onClose.bind(null, addSwimlaneToDashboardCallback)}
+            disabled={noSwimlaneSelected || selectedItems.length === 0}
+            data-test-subj="mlAddToDashboardsButton"
+          >
+            <FormattedMessage
+              id="xpack.ml.explorer.dashboardsTable.addToDashboardLabel"
+              defaultMessage="Add to dashboards"
+            />
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    </EuiOverlayMask>
+  );
+};
diff --git a/x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx b/x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx
new file mode 100644
index 0000000000000..b4d32e2af64b8
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx
@@ -0,0 +1,392 @@
+/*
+ * 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, useCallback, useMemo, useRef, useState } from 'react';
+import { isEqual } from 'lodash';
+import DragSelect from 'dragselect';
+import {
+  EuiPanel,
+  EuiPopover,
+  EuiContextMenuPanel,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiSelect,
+  EuiTitle,
+  EuiSpacer,
+  EuiContextMenuItem,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { DRAG_SELECT_ACTION, VIEW_BY_JOB_LABEL } from './explorer_constants';
+import { AddToDashboardControl } from './add_to_dashboard_control';
+import { useMlKibana } from '../contexts/kibana';
+import { TimeBuckets } from '../util/time_buckets';
+import { UI_SETTINGS } from '../../../../../../src/plugins/data/common';
+import { SelectLimit } from './select_limit';
+import {
+  ALLOW_CELL_RANGE_SELECTION,
+  dragSelect$,
+  explorerService,
+} from './explorer_dashboard_service';
+import { ExplorerState } from './reducers/explorer_reducer';
+import { hasMatchingPoints } from './has_matching_points';
+import { ExplorerNoInfluencersFound } from './components/explorer_no_influencers_found/explorer_no_influencers_found';
+import { LoadingIndicator } from '../components/loading_indicator';
+import { SwimlaneContainer } from './swimlane_container';
+import { OverallSwimlaneData } from './explorer_utils';
+
+function mapSwimlaneOptionsToEuiOptions(options: string[]) {
+  return options.map((option) => ({
+    value: option,
+    text: option,
+  }));
+}
+
+interface AnomalyTimelineProps {
+  explorerState: ExplorerState;
+  setSelectedCells: (cells?: any) => void;
+}
+
+export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
+  ({ explorerState, setSelectedCells }) => {
+    const {
+      services: {
+        uiSettings,
+        application: { capabilities },
+      },
+    } = useMlKibana();
+
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [isAddDashboardsActive, setIsAddDashboardActive] = useState(false);
+
+    const isSwimlaneSelectActive = useRef(false);
+    // make sure dragSelect is only available if the mouse pointer is actually over a swimlane
+    const disableDragSelectOnMouseLeave = useRef(true);
+
+    const canEditDashboards = capabilities.dashboard?.createNew ?? false;
+
+    const timeBuckets = useMemo(() => {
+      return new TimeBuckets({
+        'histogram:maxBars': uiSettings.get(UI_SETTINGS.HISTOGRAM_MAX_BARS),
+        'histogram:barTarget': uiSettings.get(UI_SETTINGS.HISTOGRAM_BAR_TARGET),
+        dateFormat: uiSettings.get('dateFormat'),
+        'dateFormat:scaled': uiSettings.get('dateFormat:scaled'),
+      });
+    }, [uiSettings]);
+
+    const dragSelect = useMemo(
+      () =>
+        new DragSelect({
+          selectorClass: 'ml-swimlane-selector',
+          selectables: document.querySelectorAll('.sl-cell'),
+          callback(elements) {
+            if (elements.length > 1 && !ALLOW_CELL_RANGE_SELECTION) {
+              elements = [elements[0]];
+            }
+
+            if (elements.length > 0) {
+              dragSelect$.next({
+                action: DRAG_SELECT_ACTION.NEW_SELECTION,
+                elements,
+              });
+            }
+
+            disableDragSelectOnMouseLeave.current = true;
+          },
+          onDragStart(e) {
+            let target = e.target as HTMLElement;
+            while (target && target !== document.body && !target.classList.contains('sl-cell')) {
+              target = target.parentNode as HTMLElement;
+            }
+            if (ALLOW_CELL_RANGE_SELECTION && target !== document.body) {
+              dragSelect$.next({
+                action: DRAG_SELECT_ACTION.DRAG_START,
+              });
+              disableDragSelectOnMouseLeave.current = false;
+            }
+          },
+          onElementSelect() {
+            if (ALLOW_CELL_RANGE_SELECTION) {
+              dragSelect$.next({
+                action: DRAG_SELECT_ACTION.ELEMENT_SELECT,
+              });
+            }
+          },
+        }),
+      []
+    );
+
+    const {
+      filterActive,
+      filteredFields,
+      maskAll,
+      overallSwimlaneData,
+      selectedCells,
+      viewByLoadedForTimeFormatted,
+      viewBySwimlaneData,
+      viewBySwimlaneDataLoading,
+      viewBySwimlaneFieldName,
+      viewBySwimlaneOptions,
+      swimlaneLimit,
+      selectedJobs,
+    } = explorerState;
+
+    const setSwimlaneSelectActive = useCallback((active: boolean) => {
+      if (isSwimlaneSelectActive.current && !active && disableDragSelectOnMouseLeave.current) {
+        dragSelect.stop();
+        isSwimlaneSelectActive.current = active;
+        return;
+      }
+      if (!isSwimlaneSelectActive.current && active) {
+        dragSelect.start();
+        dragSelect.clearSelection();
+        dragSelect.setSelectables(document.querySelectorAll('.sl-cell'));
+        isSwimlaneSelectActive.current = active;
+      }
+    }, []);
+    const onSwimlaneEnterHandler = () => setSwimlaneSelectActive(true);
+    const onSwimlaneLeaveHandler = () => setSwimlaneSelectActive(false);
+
+    // Listens to render updates of the swimlanes to update dragSelect
+    const swimlaneRenderDoneListener = useCallback(() => {
+      dragSelect.clearSelection();
+      dragSelect.setSelectables(document.querySelectorAll('.sl-cell'));
+    }, []);
+
+    // Listener for click events in the swimlane to load corresponding anomaly data.
+    const swimlaneCellClick = useCallback((selectedCellsUpdate: any) => {
+      // If selectedCells is an empty object we clear any existing selection,
+      // otherwise we save the new selection in AppState and update the Explorer.
+      if (Object.keys(selectedCellsUpdate).length === 0) {
+        setSelectedCells();
+      } else {
+        setSelectedCells(selectedCellsUpdate);
+      }
+    }, []);
+
+    const showOverallSwimlane =
+      overallSwimlaneData !== null &&
+      overallSwimlaneData.laneLabels &&
+      overallSwimlaneData.laneLabels.length > 0;
+
+    const showViewBySwimlane =
+      viewBySwimlaneData !== null &&
+      viewBySwimlaneData.laneLabels &&
+      viewBySwimlaneData.laneLabels.length > 0;
+
+    const menuItems = useMemo(() => {
+      const items = [];
+      if (canEditDashboards) {
+        items.push(
+          <EuiContextMenuItem
+            key="addToDashboard"
+            onClick={setIsAddDashboardActive.bind(null, true)}
+            data-test-subj="mlAnomalyTimelinePanelAddToDashboardButton"
+          >
+            <FormattedMessage
+              id="xpack.ml.explorer.addToDashboardLabel"
+              defaultMessage="Add to dashboard"
+            />
+          </EuiContextMenuItem>
+        );
+      }
+      return items;
+    }, [canEditDashboards]);
+
+    return (
+      <>
+        <EuiPanel paddingSize="m">
+          <EuiFlexGroup direction="row" gutterSize="m" responsive={false} alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiTitle className="panel-title">
+                <h2>
+                  <FormattedMessage
+                    id="xpack.ml.explorer.anomalyTimelineTitle"
+                    defaultMessage="Anomaly timeline"
+                  />
+                </h2>
+              </EuiTitle>
+            </EuiFlexItem>
+            {viewBySwimlaneOptions.length > 0 && (
+              <>
+                <EuiFlexItem grow={false}>
+                  <EuiFormRow
+                    label={
+                      <span className="eui-textNoWrap">
+                        <FormattedMessage
+                          id="xpack.ml.explorer.viewByLabel"
+                          defaultMessage="View by"
+                        />
+                      </span>
+                    }
+                    display={'columnCompressed'}
+                  >
+                    <EuiSelect
+                      compressed
+                      id="selectViewBy"
+                      options={mapSwimlaneOptionsToEuiOptions(viewBySwimlaneOptions)}
+                      value={viewBySwimlaneFieldName}
+                      onChange={(e) => explorerService.setViewBySwimlaneFieldName(e.target.value)}
+                    />
+                  </EuiFormRow>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiFormRow
+                    label={
+                      <span className="eui-textNoWrap">
+                        <FormattedMessage
+                          id="xpack.ml.explorer.limitLabel"
+                          defaultMessage="Limit"
+                        />
+                      </span>
+                    }
+                    display={'columnCompressed'}
+                  >
+                    <SelectLimit />
+                  </EuiFormRow>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false} style={{ alignSelf: 'center' }}>
+                  <div className="panel-sub-title">
+                    {viewByLoadedForTimeFormatted && (
+                      <FormattedMessage
+                        id="xpack.ml.explorer.sortedByMaxAnomalyScoreForTimeFormattedLabel"
+                        defaultMessage="(Sorted by max anomaly score for {viewByLoadedForTimeFormatted})"
+                        values={{ viewByLoadedForTimeFormatted }}
+                      />
+                    )}
+                    {viewByLoadedForTimeFormatted === undefined && (
+                      <FormattedMessage
+                        id="xpack.ml.explorer.sortedByMaxAnomalyScoreLabel"
+                        defaultMessage="(Sorted by max anomaly score)"
+                      />
+                    )}
+                    {filterActive === true && viewBySwimlaneFieldName === VIEW_BY_JOB_LABEL && (
+                      <FormattedMessage
+                        id="xpack.ml.explorer.jobScoreAcrossAllInfluencersLabel"
+                        defaultMessage="(Job score across all influencers)"
+                      />
+                    )}
+                  </div>
+                </EuiFlexItem>
+              </>
+            )}
+
+            {menuItems.length > 0 && (
+              <EuiFlexItem grow={false} style={{ marginLeft: 'auto', alignSelf: 'baseline' }}>
+                <EuiPopover
+                  button={
+                    <EuiButtonIcon
+                      size="s"
+                      aria-label={i18n.translate('xpack.ml.explorer.swimlaneActions', {
+                        defaultMessage: 'Actions',
+                      })}
+                      color="subdued"
+                      iconType="boxesHorizontal"
+                      onClick={setIsMenuOpen.bind(null, !isMenuOpen)}
+                      data-test-subj="mlAnomalyTimelinePanelMenu"
+                    />
+                  }
+                  isOpen={isMenuOpen}
+                  closePopover={setIsMenuOpen.bind(null, false)}
+                  panelPaddingSize="none"
+                  anchorPosition="downLeft"
+                >
+                  <EuiContextMenuPanel items={menuItems} />
+                </EuiPopover>
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+
+          <EuiSpacer size="m" />
+
+          <div
+            className="ml-explorer-swimlane euiText"
+            onMouseEnter={onSwimlaneEnterHandler}
+            onMouseLeave={onSwimlaneLeaveHandler}
+            data-test-subj="mlAnomalyExplorerSwimlaneOverall"
+          >
+            {showOverallSwimlane && (
+              <SwimlaneContainer
+                filterActive={filterActive}
+                maskAll={maskAll}
+                timeBuckets={timeBuckets}
+                swimlaneCellClick={swimlaneCellClick}
+                swimlaneData={overallSwimlaneData as OverallSwimlaneData}
+                swimlaneType={'overall'}
+                selection={selectedCells}
+                swimlaneRenderDoneListener={swimlaneRenderDoneListener}
+                onResize={(width) => explorerService.setSwimlaneContainerWidth(width)}
+              />
+            )}
+          </div>
+
+          {viewBySwimlaneOptions.length > 0 && (
+            <>
+              {showViewBySwimlane && (
+                <>
+                  <EuiSpacer size="m" />
+                  <div
+                    className="ml-explorer-swimlane euiText"
+                    onMouseEnter={onSwimlaneEnterHandler}
+                    onMouseLeave={onSwimlaneLeaveHandler}
+                    data-test-subj="mlAnomalyExplorerSwimlaneViewBy"
+                  >
+                    <SwimlaneContainer
+                      filterActive={filterActive}
+                      maskAll={
+                        maskAll &&
+                        !hasMatchingPoints({
+                          filteredFields,
+                          swimlaneData: viewBySwimlaneData,
+                        })
+                      }
+                      timeBuckets={timeBuckets}
+                      swimlaneCellClick={swimlaneCellClick}
+                      swimlaneData={viewBySwimlaneData as OverallSwimlaneData}
+                      swimlaneType={'viewBy'}
+                      selection={selectedCells}
+                      swimlaneRenderDoneListener={swimlaneRenderDoneListener}
+                      onResize={(width) => explorerService.setSwimlaneContainerWidth(width)}
+                    />
+                  </div>
+                </>
+              )}
+
+              {viewBySwimlaneDataLoading && <LoadingIndicator />}
+
+              {!showViewBySwimlane &&
+                !viewBySwimlaneDataLoading &&
+                typeof viewBySwimlaneFieldName === 'string' && (
+                  <ExplorerNoInfluencersFound
+                    viewBySwimlaneFieldName={viewBySwimlaneFieldName}
+                    showFilterMessage={filterActive === true}
+                  />
+                )}
+            </>
+          )}
+        </EuiPanel>
+        {isAddDashboardsActive && selectedJobs && (
+          <AddToDashboardControl
+            onClose={async (callback) => {
+              setIsAddDashboardActive(false);
+              if (callback) {
+                await callback();
+              }
+            }}
+            jobIds={selectedJobs.map(({ id }) => id)}
+            viewBy={viewBySwimlaneFieldName!}
+            limit={swimlaneLimit}
+          />
+        )}
+      </>
+    );
+  },
+  (prevProps, nextProps) => {
+    return isEqual(prevProps.explorerState, nextProps.explorerState);
+  }
+);
diff --git a/x-pack/plugins/ml/public/application/explorer/components/explorer_no_influencers_found/explorer_no_influencers_found.js b/x-pack/plugins/ml/public/application/explorer/components/explorer_no_influencers_found/explorer_no_influencers_found.tsx
similarity index 78%
rename from x-pack/plugins/ml/public/application/explorer/components/explorer_no_influencers_found/explorer_no_influencers_found.js
rename to x-pack/plugins/ml/public/application/explorer/components/explorer_no_influencers_found/explorer_no_influencers_found.tsx
index 5f54c383e76ad..639c0f7b78504 100644
--- a/x-pack/plugins/ml/public/application/explorer/components/explorer_no_influencers_found/explorer_no_influencers_found.js
+++ b/x-pack/plugins/ml/public/application/explorer/components/explorer_no_influencers_found/explorer_no_influencers_found.tsx
@@ -4,20 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-/*
- * React component for rendering EuiEmptyPrompt when no influencers were found.
- */
-
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiEmptyPrompt } from '@elastic/eui';
 
-export const ExplorerNoInfluencersFound = ({
-  viewBySwimlaneFieldName,
-  showFilterMessage = false,
-}) => (
+/*
+ * React component for rendering EuiEmptyPrompt when no influencers were found.
+ */
+export const ExplorerNoInfluencersFound: FC<{
+  viewBySwimlaneFieldName: string;
+  showFilterMessage?: boolean;
+}> = ({ viewBySwimlaneFieldName, showFilterMessage = false }) => (
   <EuiEmptyPrompt
     titleSize="xs"
     title={
@@ -40,8 +38,3 @@ export const ExplorerNoInfluencersFound = ({
     }
   />
 );
-
-ExplorerNoInfluencersFound.propTypes = {
-  viewBySwimlaneFieldName: PropTypes.string.isRequired,
-  showFilterMessage: PropTypes.bool,
-};
diff --git a/x-pack/plugins/ml/public/application/explorer/explorer.js b/x-pack/plugins/ml/public/application/explorer/explorer.js
index 1a5a9a9d82862..71c96840d1b57 100644
--- a/x-pack/plugins/ml/public/application/explorer/explorer.js
+++ b/x-pack/plugins/ml/public/application/explorer/explorer.js
@@ -9,10 +9,9 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { createRef } from 'react';
+import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import DragSelect from 'dragselect/dist/ds.min.js';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -26,34 +25,23 @@ import {
   EuiPageBody,
   EuiPageHeader,
   EuiPageHeaderSection,
-  EuiSelect,
   EuiSpacer,
   EuiTitle,
 } from '@elastic/eui';
 
 import { AnnotationFlyout } from '../components/annotations/annotation_flyout';
 import { AnnotationsTable } from '../components/annotations/annotations_table';
-import {
-  ExplorerNoInfluencersFound,
-  ExplorerNoJobsFound,
-  ExplorerNoResultsFound,
-} from './components';
-import { ExplorerSwimlane } from './explorer_swimlane';
-import { getTimeBucketsFromCache } from '../util/time_buckets';
+import { ExplorerNoJobsFound, ExplorerNoResultsFound } from './components';
 import { DatePickerWrapper } from '../components/navigation_menu/date_picker_wrapper';
 import { InfluencersList } from '../components/influencers_list';
-import {
-  ALLOW_CELL_RANGE_SELECTION,
-  dragSelect$,
-  explorerService,
-} from './explorer_dashboard_service';
+import { explorerService } from './explorer_dashboard_service';
 import { AnomalyResultsViewSelector } from '../components/anomaly_results_view_selector';
 import { LoadingIndicator } from '../components/loading_indicator/loading_indicator';
 import { NavigationMenu } from '../components/navigation_menu';
 import { CheckboxShowCharts } from '../components/controls/checkbox_showcharts';
 import { JobSelector } from '../components/job_selector';
 import { SelectInterval } from '../components/controls/select_interval/select_interval';
-import { SelectLimit, limit$ } from './select_limit/select_limit';
+import { limit$ } from './select_limit/select_limit';
 import { SelectSeverity } from '../components/controls/select_severity/select_severity';
 import {
   ExplorerQueryBar,
@@ -67,14 +55,9 @@ import {
   escapeParens,
   escapeDoubleQuotes,
 } from './explorer_utils';
-import { getSwimlaneContainerWidth } from './legacy_utils';
+import { AnomalyTimeline } from './anomaly_timeline';
 
-import {
-  DRAG_SELECT_ACTION,
-  FILTER_ACTION,
-  SWIMLANE_TYPE,
-  VIEW_BY_JOB_LABEL,
-} from './explorer_constants';
+import { FILTER_ACTION } from './explorer_constants';
 
 // Explorer Charts
 import { ExplorerChartsContainer } from './explorer_charts/explorer_charts_container';
@@ -82,17 +65,7 @@ import { ExplorerChartsContainer } from './explorer_charts/explorer_charts_conta
 // Anomalies Table
 import { AnomaliesTable } from '../components/anomalies_table/anomalies_table';
 
-import { ResizeChecker } from '../../../../../../src/plugins/kibana_utils/public';
 import { getTimefilter, getToastNotifications } from '../util/dependency_cache';
-import { MlTooltipComponent } from '../components/chart_tooltip';
-import { hasMatchingPoints } from './has_matching_points';
-
-function mapSwimlaneOptionsToEuiOptions(options) {
-  return options.map((option) => ({
-    value: option,
-    text: option,
-  }));
-}
 
 const ExplorerPage = ({
   children,
@@ -105,9 +78,8 @@ const ExplorerPage = ({
   queryString,
   filterIconTriggeredQuery,
   updateLanguage,
-  resizeRef,
 }) => (
-  <div ref={resizeRef} data-test-subj="mlPageAnomalyExplorer">
+  <div data-test-subj="mlPageAnomalyExplorer">
     <NavigationMenu tabId="anomaly_detection" />
     <EuiPage style={{ background: 'none' }}>
       <EuiPageBody>
@@ -171,108 +143,18 @@ export class Explorer extends React.Component {
   state = { filterIconTriggeredQuery: undefined, language: DEFAULT_QUERY_LANG };
 
   _unsubscribeAll = new Subject();
-  // make sure dragSelect is only available if the mouse pointer is actually over a swimlane
-  disableDragSelectOnMouseLeave = true;
-
-  dragSelect = new DragSelect({
-    selectorClass: 'ml-swimlane-selector',
-    selectables: document.getElementsByClassName('sl-cell'),
-    callback(elements) {
-      if (elements.length > 1 && !ALLOW_CELL_RANGE_SELECTION) {
-        elements = [elements[0]];
-      }
-
-      if (elements.length > 0) {
-        dragSelect$.next({
-          action: DRAG_SELECT_ACTION.NEW_SELECTION,
-          elements,
-        });
-      }
-
-      this.disableDragSelectOnMouseLeave = true;
-    },
-    onDragStart(e) {
-      let target = e.target;
-      while (target && target !== document.body && !target.classList.contains('sl-cell')) {
-        target = target.parentNode;
-      }
-      if (ALLOW_CELL_RANGE_SELECTION && target !== document.body) {
-        dragSelect$.next({
-          action: DRAG_SELECT_ACTION.DRAG_START,
-        });
-        this.disableDragSelectOnMouseLeave = false;
-      }
-    },
-    onElementSelect() {
-      if (ALLOW_CELL_RANGE_SELECTION) {
-        dragSelect$.next({
-          action: DRAG_SELECT_ACTION.ELEMENT_SELECT,
-        });
-      }
-    },
-  });
-
-  // Listens to render updates of the swimlanes to update dragSelect
-  swimlaneRenderDoneListener = () => {
-    this.dragSelect.clearSelection();
-    this.dragSelect.setSelectables(document.getElementsByClassName('sl-cell'));
-  };
-
-  resizeRef = createRef();
-  resizeChecker = undefined;
-  resizeHandler = () => {
-    explorerService.setSwimlaneContainerWidth(getSwimlaneContainerWidth());
-  };
 
   componentDidMount() {
     limit$.pipe(takeUntil(this._unsubscribeAll)).subscribe(explorerService.setSwimlaneLimit);
-
-    // Required to redraw the time series chart when the container is resized.
-    this.resizeChecker = new ResizeChecker(this.resizeRef.current);
-    this.resizeChecker.on('resize', this.resizeHandler);
-
-    this.timeBuckets = getTimeBucketsFromCache();
   }
 
   componentWillUnmount() {
     this._unsubscribeAll.next();
     this._unsubscribeAll.complete();
-    this.resizeChecker.destroy();
-  }
-
-  resetCache() {
-    this.anomaliesTablePreviousArgs = null;
   }
 
   viewByChangeHandler = (e) => explorerService.setViewBySwimlaneFieldName(e.target.value);
 
-  isSwimlaneSelectActive = false;
-  onSwimlaneEnterHandler = () => this.setSwimlaneSelectActive(true);
-  onSwimlaneLeaveHandler = () => this.setSwimlaneSelectActive(false);
-  setSwimlaneSelectActive = (active) => {
-    if (this.isSwimlaneSelectActive && !active && this.disableDragSelectOnMouseLeave) {
-      this.dragSelect.stop();
-      this.isSwimlaneSelectActive = active;
-      return;
-    }
-    if (!this.isSwimlaneSelectActive && active) {
-      this.dragSelect.start();
-      this.dragSelect.clearSelection();
-      this.dragSelect.setSelectables(document.getElementsByClassName('sl-cell'));
-      this.isSwimlaneSelectActive = active;
-    }
-  };
-
-  // Listener for click events in the swimlane to load corresponding anomaly data.
-  swimlaneCellClick = (selectedCells) => {
-    // If selectedCells is an empty object we clear any existing selection,
-    // otherwise we save the new selection in AppState and update the Explorer.
-    if (Object.keys(selectedCells).length === 0) {
-      this.props.setSelectedCells();
-    } else {
-      this.props.setSelectedCells(selectedCells);
-    }
-  };
   // Escape regular parens from fieldName as that portion of the query is not wrapped in double quotes
   // and will cause a syntax error when called with getKqlQueryValues
   applyFilter = (fieldName, fieldValue, action) => {
@@ -339,24 +221,16 @@ export class Explorer extends React.Component {
       annotationsData,
       chartsData,
       filterActive,
-      filteredFields,
       filterPlaceHolder,
       indexPattern,
       influencers,
       loading,
-      maskAll,
       noInfluencersConfigured,
       overallSwimlaneData,
       queryString,
       selectedCells,
       selectedJobs,
-      swimlaneContainerWidth,
       tableData,
-      viewByLoadedForTimeFormatted,
-      viewBySwimlaneData,
-      viewBySwimlaneDataLoading,
-      viewBySwimlaneFieldName,
-      viewBySwimlaneOptions,
     } = this.props.explorerState;
 
     const jobSelectorProps = {
@@ -378,7 +252,6 @@ export class Explorer extends React.Component {
           indexPattern={indexPattern}
           queryString={queryString}
           updateLanguage={this.updateLanguage}
-          resizeRef={this.resizeRef}
         >
           <LoadingIndicator
             label={i18n.translate('xpack.ml.explorer.loadingLabel', {
@@ -391,7 +264,7 @@ export class Explorer extends React.Component {
 
     if (noJobsFound) {
       return (
-        <ExplorerPage jobSelectorProps={jobSelectorProps} resizeRef={this.resizeRef}>
+        <ExplorerPage jobSelectorProps={jobSelectorProps}>
           <ExplorerNoJobsFound />
         </ExplorerPage>
       );
@@ -399,7 +272,7 @@ export class Explorer extends React.Component {
 
     if (noJobsFound && hasResults === false) {
       return (
-        <ExplorerPage jobSelectorProps={jobSelectorProps} resizeRef={this.resizeRef}>
+        <ExplorerPage jobSelectorProps={jobSelectorProps}>
           <ExplorerNoResultsFound />
         </ExplorerPage>
       );
@@ -408,15 +281,6 @@ export class Explorer extends React.Component {
     const mainColumnWidthClassName = noInfluencersConfigured === true ? 'col-xs-12' : 'col-xs-10';
     const mainColumnClasses = `column ${mainColumnWidthClassName}`;
 
-    const showOverallSwimlane =
-      overallSwimlaneData !== null &&
-      overallSwimlaneData.laneLabels &&
-      overallSwimlaneData.laneLabels.length > 0;
-    const showViewBySwimlane =
-      viewBySwimlaneData !== null &&
-      viewBySwimlaneData.laneLabels &&
-      viewBySwimlaneData.laneLabels.length > 0;
-
     const timefilter = getTimefilter();
     const bounds = timefilter.getActiveBounds();
 
@@ -431,7 +295,6 @@ export class Explorer extends React.Component {
         indexPattern={indexPattern}
         queryString={queryString}
         updateLanguage={this.updateLanguage}
-        resizeRef={this.resizeRef}
       >
         <div className="results-container">
           {noInfluencersConfigured && (
@@ -462,142 +325,12 @@ export class Explorer extends React.Component {
           )}
 
           <div className={mainColumnClasses}>
-            <EuiTitle className="panel-title">
-              <h2>
-                <FormattedMessage
-                  id="xpack.ml.explorer.anomalyTimelineTitle"
-                  defaultMessage="Anomaly timeline"
-                />
-              </h2>
-            </EuiTitle>
-
-            <div
-              className="ml-explorer-swimlane euiText"
-              onMouseEnter={this.onSwimlaneEnterHandler}
-              onMouseLeave={this.onSwimlaneLeaveHandler}
-              data-test-subj="mlAnomalyExplorerSwimlaneOverall"
-            >
-              {showOverallSwimlane && (
-                <MlTooltipComponent>
-                  {(tooltipService) => (
-                    <ExplorerSwimlane
-                      chartWidth={swimlaneContainerWidth}
-                      filterActive={filterActive}
-                      filteredFields={filteredFields}
-                      maskAll={maskAll}
-                      timeBuckets={this.timeBuckets}
-                      swimlaneCellClick={this.swimlaneCellClick}
-                      swimlaneData={overallSwimlaneData}
-                      swimlaneType={SWIMLANE_TYPE.OVERALL}
-                      selection={selectedCells}
-                      swimlaneRenderDoneListener={this.swimlaneRenderDoneListener}
-                      tooltipService={tooltipService}
-                    />
-                  )}
-                </MlTooltipComponent>
-              )}
-            </div>
-
-            {viewBySwimlaneOptions.length > 0 && (
-              <>
-                <EuiFlexGroup direction="row" gutterSize="l" responsive={true}>
-                  <EuiFlexItem grow={false}>
-                    <EuiFormRow
-                      label={i18n.translate('xpack.ml.explorer.viewByLabel', {
-                        defaultMessage: 'View by',
-                      })}
-                    >
-                      <EuiSelect
-                        id="selectViewBy"
-                        options={mapSwimlaneOptionsToEuiOptions(viewBySwimlaneOptions)}
-                        value={viewBySwimlaneFieldName}
-                        onChange={this.viewByChangeHandler}
-                      />
-                    </EuiFormRow>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
-                    <EuiFormRow
-                      label={i18n.translate('xpack.ml.explorer.limitLabel', {
-                        defaultMessage: 'Limit',
-                      })}
-                    >
-                      <SelectLimit />
-                    </EuiFormRow>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false} style={{ alignSelf: 'center' }}>
-                    <EuiFormRow label="&#8203;">
-                      <div className="panel-sub-title">
-                        {viewByLoadedForTimeFormatted && (
-                          <FormattedMessage
-                            id="xpack.ml.explorer.sortedByMaxAnomalyScoreForTimeFormattedLabel"
-                            defaultMessage="(Sorted by max anomaly score for {viewByLoadedForTimeFormatted})"
-                            values={{ viewByLoadedForTimeFormatted }}
-                          />
-                        )}
-                        {viewByLoadedForTimeFormatted === undefined && (
-                          <FormattedMessage
-                            id="xpack.ml.explorer.sortedByMaxAnomalyScoreLabel"
-                            defaultMessage="(Sorted by max anomaly score)"
-                          />
-                        )}
-                        {filterActive === true && viewBySwimlaneFieldName === VIEW_BY_JOB_LABEL && (
-                          <FormattedMessage
-                            id="xpack.ml.explorer.jobScoreAcrossAllInfluencersLabel"
-                            defaultMessage="(Job score across all influencers)"
-                          />
-                        )}
-                      </div>
-                    </EuiFormRow>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-
-                {showViewBySwimlane && (
-                  <>
-                    <EuiSpacer size="m" />
-                    <div
-                      className="ml-explorer-swimlane euiText"
-                      onMouseEnter={this.onSwimlaneEnterHandler}
-                      onMouseLeave={this.onSwimlaneLeaveHandler}
-                      data-test-subj="mlAnomalyExplorerSwimlaneViewBy"
-                    >
-                      <MlTooltipComponent>
-                        {(tooltipService) => (
-                          <ExplorerSwimlane
-                            chartWidth={swimlaneContainerWidth}
-                            filterActive={filterActive}
-                            maskAll={
-                              maskAll &&
-                              !hasMatchingPoints({
-                                filteredFields,
-                                swimlaneData: viewBySwimlaneData,
-                              })
-                            }
-                            timeBuckets={this.timeBuckets}
-                            swimlaneCellClick={this.swimlaneCellClick}
-                            swimlaneData={viewBySwimlaneData}
-                            swimlaneType={SWIMLANE_TYPE.VIEW_BY}
-                            selection={selectedCells}
-                            swimlaneRenderDoneListener={this.swimlaneRenderDoneListener}
-                            tooltipService={tooltipService}
-                          />
-                        )}
-                      </MlTooltipComponent>
-                    </div>
-                  </>
-                )}
-
-                {viewBySwimlaneDataLoading && <LoadingIndicator />}
-
-                {!showViewBySwimlane &&
-                  !viewBySwimlaneDataLoading &&
-                  viewBySwimlaneFieldName !== null && (
-                    <ExplorerNoInfluencersFound
-                      viewBySwimlaneFieldName={viewBySwimlaneFieldName}
-                      showFilterMessage={filterActive === true}
-                    />
-                  )}
-              </>
-            )}
+            <EuiSpacer size="m" />
+            <AnomalyTimeline
+              explorerState={this.props.explorerState}
+              setSelectedCells={this.props.setSelectedCells}
+            />
+            <EuiSpacer size="m" />
 
             {annotationsData.length > 0 && (
               <>
diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_constants.ts b/x-pack/plugins/ml/public/application/explorer/explorer_constants.ts
index 1cfd29e2f60d2..d1adf8c7ad744 100644
--- a/x-pack/plugins/ml/public/application/explorer/explorer_constants.ts
+++ b/x-pack/plugins/ml/public/application/explorer/explorer_constants.ts
@@ -37,10 +37,12 @@ export const FILTER_ACTION = {
   REMOVE: '-',
 };
 
-export enum SWIMLANE_TYPE {
-  OVERALL = 'overall',
-  VIEW_BY = 'viewBy',
-}
+export const SWIMLANE_TYPE = {
+  OVERALL: 'overall',
+  VIEW_BY: 'viewBy',
+} as const;
+
+export type SwimlaneType = typeof SWIMLANE_TYPE[keyof typeof SWIMLANE_TYPE];
 
 export const CHART_TYPE = {
   EVENT_DISTRIBUTION: 'event_distribution',
diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx b/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx
index 18b5de1d51f9c..4e6dcdcc5129c 100644
--- a/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx
+++ b/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx
@@ -22,7 +22,7 @@ import { numTicksForDateFormat } from '../util/chart_utils';
 import { getSeverityColor } from '../../../common/util/anomaly_utils';
 import { mlEscape } from '../util/string_utils';
 import { ALLOW_CELL_RANGE_SELECTION, dragSelect$ } from './explorer_dashboard_service';
-import { DRAG_SELECT_ACTION } from './explorer_constants';
+import { DRAG_SELECT_ACTION, SwimlaneType } from './explorer_constants';
 import { EMPTY_FIELD_VALUE_LABEL } from '../timeseriesexplorer/components/entity_control/entity_control';
 import { TimeBuckets as TimeBucketsClass } from '../util/time_buckets';
 import {
@@ -58,7 +58,7 @@ export interface ExplorerSwimlaneProps {
   timeBuckets: InstanceType<typeof TimeBucketsClass>;
   swimlaneCellClick?: Function;
   swimlaneData: OverallSwimlaneData;
-  swimlaneType: string;
+  swimlaneType: SwimlaneType;
   selection?: {
     lanes: any[];
     type: string;
diff --git a/x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/state.ts b/x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/state.ts
index 0a2dbf5bcff35..4e1a2af9b13a6 100644
--- a/x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/state.ts
+++ b/x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/state.ts
@@ -16,8 +16,9 @@ import {
   AnomaliesTableData,
   ExplorerJob,
   AppStateSelectedCells,
-  SwimlaneData,
   TimeRangeBounds,
+  OverallSwimlaneData,
+  SwimlaneData,
 } from '../../explorer_utils';
 
 export interface ExplorerState {
@@ -35,7 +36,7 @@ export interface ExplorerState {
   loading: boolean;
   maskAll: boolean;
   noInfluencersConfigured: boolean;
-  overallSwimlaneData: SwimlaneData;
+  overallSwimlaneData: SwimlaneData | OverallSwimlaneData;
   queryString: string;
   selectedCells: AppStateSelectedCells | undefined;
   selectedJobs: ExplorerJob[] | null;
@@ -45,7 +46,7 @@ export interface ExplorerState {
   tableData: AnomaliesTableData;
   tableQueryString: string;
   viewByLoadedForTimeFormatted: string | null;
-  viewBySwimlaneData: SwimlaneData;
+  viewBySwimlaneData: SwimlaneData | OverallSwimlaneData;
   viewBySwimlaneDataLoading: boolean;
   viewBySwimlaneFieldName?: string;
   viewBySwimlaneOptions: string[];
diff --git a/x-pack/plugins/ml/public/application/explorer/select_limit/select_limit.tsx b/x-pack/plugins/ml/public/application/explorer/select_limit/select_limit.tsx
index 7f7a8fc5a70bd..7a2df1a0f0535 100644
--- a/x-pack/plugins/ml/public/application/explorer/select_limit/select_limit.tsx
+++ b/x-pack/plugins/ml/public/application/explorer/select_limit/select_limit.tsx
@@ -36,5 +36,5 @@ export const SelectLimit = () => {
     setLimit(parseInt(e.target.value, 10));
   }
 
-  return <EuiSelect options={euiOptions} onChange={onChange} value={limit} />;
+  return <EuiSelect compressed options={euiOptions} onChange={onChange} value={limit} />;
 };
diff --git a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
new file mode 100644
index 0000000000000..57d1fd81000b7
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
@@ -0,0 +1,61 @@
+/*
+ * 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, useCallback, useState } from 'react';
+import { EuiResizeObserver, EuiText } from '@elastic/eui';
+
+import { throttle } from 'lodash';
+import {
+  ExplorerSwimlane,
+  ExplorerSwimlaneProps,
+} from '../../application/explorer/explorer_swimlane';
+
+import { MlTooltipComponent } from '../../application/components/chart_tooltip';
+
+const RESIZE_THROTTLE_TIME_MS = 500;
+
+export const SwimlaneContainer: FC<
+  Omit<ExplorerSwimlaneProps, 'chartWidth' | 'tooltipService'> & {
+    onResize: (width: number) => void;
+  }
+> = ({ children, onResize, ...props }) => {
+  const [chartWidth, setChartWidth] = useState<number>(0);
+
+  const resizeHandler = useCallback(
+    throttle((e: { width: number; height: number }) => {
+      const labelWidth = 200;
+      setChartWidth(e.width - labelWidth);
+      onResize(e.width);
+    }, RESIZE_THROTTLE_TIME_MS),
+    []
+  );
+
+  return (
+    <EuiResizeObserver onResize={resizeHandler}>
+      {(resizeRef) => (
+        <div
+          ref={(el) => {
+            resizeRef(el);
+          }}
+        >
+          <div style={{ width: '100%' }}>
+            <EuiText color="subdued" size="s">
+              <MlTooltipComponent>
+                {(tooltipService) => (
+                  <ExplorerSwimlane
+                    chartWidth={chartWidth}
+                    tooltipService={tooltipService}
+                    {...props}
+                  />
+                )}
+              </MlTooltipComponent>
+            </EuiText>
+          </div>
+        </div>
+      )}
+    </EuiResizeObserver>
+  );
+};
diff --git a/x-pack/plugins/ml/public/application/services/dashboard_service.test.ts b/x-pack/plugins/ml/public/application/services/dashboard_service.test.ts
new file mode 100644
index 0000000000000..6cab23eb187c7
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/services/dashboard_service.test.ts
@@ -0,0 +1,174 @@
+/*
+ * 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 { dashboardServiceProvider } from './dashboard_service';
+import { savedObjectsServiceMock } from '../../../../../../src/core/public/mocks';
+import { SavedObjectDashboard } from '../../../../../../src/plugins/dashboard/public/saved_dashboards';
+import {
+  DashboardUrlGenerator,
+  SavedDashboardPanel,
+} from '../../../../../../src/plugins/dashboard/public';
+
+jest.mock('@elastic/eui', () => {
+  return {
+    htmlIdGenerator: jest.fn(() => {
+      return jest.fn(() => 'test-panel-id');
+    }),
+  };
+});
+
+describe('DashboardService', () => {
+  const mockSavedObjectClient = savedObjectsServiceMock.createStartContract().client;
+  const dashboardUrlGenerator = ({
+    createUrl: jest.fn(),
+  } as unknown) as DashboardUrlGenerator;
+  const dashboardService = dashboardServiceProvider(
+    mockSavedObjectClient,
+    '8.0.0',
+    dashboardUrlGenerator
+  );
+
+  test('should fetch dashboard', () => {
+    // act
+    dashboardService.fetchDashboards('test');
+    // assert
+    expect(mockSavedObjectClient.find).toHaveBeenCalledWith({
+      type: 'dashboard',
+      perPage: 10,
+      search: `test*`,
+      searchFields: ['title^3', 'description'],
+    });
+  });
+
+  test('should attach panel to the dashboard', () => {
+    // act
+    dashboardService.attachPanels(
+      'test-dashboard',
+      ({
+        title: 'ML Test',
+        hits: 0,
+        description: '',
+        panelsJSON: JSON.stringify([
+          {
+            version: '8.0.0',
+            type: 'ml_anomaly_swimlane',
+            gridData: { x: 0, y: 0, w: 24, h: 15, i: 'i63c960b1-ab1b-11ea-809d-f5c60c43347f' },
+            panelIndex: 'i63c960b1-ab1b-11ea-809d-f5c60c43347f',
+            embeddableConfig: {
+              title: 'Panel test!',
+              jobIds: ['cw_multi_1'],
+              swimlaneType: 'overall',
+            },
+            title: 'Panel test!',
+          },
+          {
+            version: '8.0.0',
+            type: 'ml_anomaly_swimlane',
+            gridData: { x: 24, y: 0, w: 24, h: 15, i: '0aa334bd-8308-4ded-9462-80dbd37680ee' },
+            panelIndex: '0aa334bd-8308-4ded-9462-80dbd37680ee',
+            embeddableConfig: {
+              title: 'ML anomaly swimlane for fb_population_1',
+              jobIds: ['fb_population_1'],
+              limit: 5,
+              swimlaneType: 'overall',
+            },
+            title: 'ML anomaly swimlane for fb_population_1',
+          },
+          {
+            version: '8.0.0',
+            gridData: { x: 0, y: 15, w: 24, h: 15, i: 'abd36eb7-4774-4216-891e-12100752b46d' },
+            panelIndex: 'abd36eb7-4774-4216-891e-12100752b46d',
+            embeddableConfig: {},
+            panelRefName: 'panel_2',
+          },
+        ]),
+        optionsJSON: '{"hidePanelTitles":false,"useMargins":true}',
+        version: 1,
+        timeRestore: false,
+        kibanaSavedObjectMeta: {
+          searchSourceJSON: '{"query":{"language":"kuery","query":""},"filter":[]}',
+        },
+      } as unknown) as SavedObjectDashboard,
+      [{ title: 'Test title', type: 'test-panel', embeddableConfig: { testConfig: '' } }]
+    );
+    // assert
+    expect(mockSavedObjectClient.update).toHaveBeenCalledWith('dashboard', 'test-dashboard', {
+      title: 'ML Test',
+      hits: 0,
+      description: '',
+      panelsJSON: JSON.stringify([
+        {
+          version: '8.0.0',
+          type: 'ml_anomaly_swimlane',
+          gridData: { x: 0, y: 0, w: 24, h: 15, i: 'i63c960b1-ab1b-11ea-809d-f5c60c43347f' },
+          panelIndex: 'i63c960b1-ab1b-11ea-809d-f5c60c43347f',
+          embeddableConfig: {
+            title: 'Panel test!',
+            jobIds: ['cw_multi_1'],
+            swimlaneType: 'overall',
+          },
+          title: 'Panel test!',
+        },
+        {
+          version: '8.0.0',
+          type: 'ml_anomaly_swimlane',
+          gridData: { x: 24, y: 0, w: 24, h: 15, i: '0aa334bd-8308-4ded-9462-80dbd37680ee' },
+          panelIndex: '0aa334bd-8308-4ded-9462-80dbd37680ee',
+          embeddableConfig: {
+            title: 'ML anomaly swimlane for fb_population_1',
+            jobIds: ['fb_population_1'],
+            limit: 5,
+            swimlaneType: 'overall',
+          },
+          title: 'ML anomaly swimlane for fb_population_1',
+        },
+        {
+          version: '8.0.0',
+          gridData: { x: 0, y: 15, w: 24, h: 15, i: 'abd36eb7-4774-4216-891e-12100752b46d' },
+          panelIndex: 'abd36eb7-4774-4216-891e-12100752b46d',
+          embeddableConfig: {},
+          panelRefName: 'panel_2',
+        },
+        {
+          panelIndex: 'test-panel-id',
+          embeddableConfig: { testConfig: '' },
+          title: 'Test title',
+          type: 'test-panel',
+          version: '8.0.0',
+          gridData: { h: 15, i: 'test-panel-id', w: 24, x: 24, y: 15 },
+        },
+      ]),
+      optionsJSON: '{"hidePanelTitles":false,"useMargins":true}',
+      version: 1,
+      timeRestore: false,
+      kibanaSavedObjectMeta: {
+        searchSourceJSON: '{"query":{"language":"kuery","query":""},"filter":[]}',
+      },
+    });
+  });
+
+  test('should generate edit url to the dashboard', () => {
+    dashboardService.getDashboardEditUrl('test-id');
+    expect(dashboardUrlGenerator.createUrl).toHaveBeenCalledWith({
+      dashboardId: 'test-id',
+      useHash: false,
+      viewMode: 'edit',
+    });
+  });
+
+  test('should find the panel positioned at the end', () => {
+    expect(
+      dashboardService.getLastPanel([
+        { gridData: { y: 15, x: 7 } },
+        { gridData: { y: 17, x: 9 } },
+        { gridData: { y: 15, x: 1 } },
+        { gridData: { y: 17, x: 10 } },
+        { gridData: { y: 15, x: 22 } },
+        { gridData: { y: 17, x: 9 } },
+      ] as SavedDashboardPanel[])
+    ).toEqual({ gridData: { y: 17, x: 10 } });
+  });
+});
diff --git a/x-pack/plugins/ml/public/application/services/dashboard_service.ts b/x-pack/plugins/ml/public/application/services/dashboard_service.ts
new file mode 100644
index 0000000000000..7f2bb71d18eb9
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/services/dashboard_service.ts
@@ -0,0 +1,136 @@
+/*
+ * 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 { SavedObjectsClientContract } from 'kibana/public';
+import { htmlIdGenerator } from '@elastic/eui';
+import { useMemo } from 'react';
+import {
+  DASHBOARD_APP_URL_GENERATOR,
+  DashboardUrlGenerator,
+  SavedDashboardPanel,
+  SavedObjectDashboard,
+} from '../../../../../../src/plugins/dashboard/public';
+import { useMlKibana } from '../contexts/kibana';
+import { ViewMode } from '../../../../../../src/plugins/embeddable/public';
+
+export type DashboardService = ReturnType<typeof dashboardServiceProvider>;
+
+export function dashboardServiceProvider(
+  savedObjectClient: SavedObjectsClientContract,
+  kibanaVersion: string,
+  dashboardUrlGenerator: DashboardUrlGenerator
+) {
+  const generateId = htmlIdGenerator();
+  const DEFAULT_PANEL_WIDTH = 24;
+  const DEFAULT_PANEL_HEIGHT = 15;
+
+  return {
+    /**
+     * Fetches dashboards
+     */
+    async fetchDashboards(query?: string) {
+      return await savedObjectClient.find<SavedObjectDashboard>({
+        type: 'dashboard',
+        perPage: 10,
+        search: query ? `${query}*` : '',
+        searchFields: ['title^3', 'description'],
+      });
+    },
+    /**
+     * Resolves the last positioned panel from the collection.
+     */
+    getLastPanel(panels: SavedDashboardPanel[]): SavedDashboardPanel | null {
+      return panels.length > 0
+        ? panels.reduce((prev, current) =>
+            prev.gridData.y >= current.gridData.y
+              ? prev.gridData.y === current.gridData.y
+                ? prev.gridData.x > current.gridData.x
+                  ? prev
+                  : current
+                : prev
+              : current
+          )
+        : null;
+    },
+    /**
+     * Attaches embeddable panels to the dashboard
+     */
+    async attachPanels(
+      dashboardId: string,
+      dashboardAttributes: SavedObjectDashboard,
+      panelsData: Array<Pick<SavedDashboardPanel, 'title' | 'type' | 'embeddableConfig'>>
+    ) {
+      const panels = JSON.parse(dashboardAttributes.panelsJSON) as SavedDashboardPanel[];
+      const version = kibanaVersion;
+      const rowWidth = DEFAULT_PANEL_WIDTH * 2;
+
+      for (const panelData of panelsData) {
+        const panelIndex = generateId();
+        const lastPanel = this.getLastPanel(panels);
+
+        const xOffset = lastPanel ? lastPanel.gridData.w + lastPanel.gridData.x : 0;
+        const availableRowSpace = rowWidth - xOffset;
+        const xPosition = availableRowSpace - DEFAULT_PANEL_WIDTH >= 0 ? xOffset : 0;
+
+        panels.push({
+          panelIndex,
+          embeddableConfig: panelData.embeddableConfig as { [key: string]: any },
+          title: panelData.title,
+          type: panelData.type,
+          version,
+          gridData: {
+            h: DEFAULT_PANEL_HEIGHT,
+            i: panelIndex,
+            w: DEFAULT_PANEL_WIDTH,
+            x: xPosition,
+            y: lastPanel
+              ? xPosition > 0
+                ? lastPanel.gridData.y
+                : lastPanel.gridData.y + lastPanel.gridData.h
+              : 0,
+          },
+        });
+      }
+
+      await savedObjectClient.update('dashboard', dashboardId, {
+        ...dashboardAttributes,
+        panelsJSON: JSON.stringify(panels),
+      });
+    },
+    /**
+     * Generates dashboard url with edit mode
+     */
+    async getDashboardEditUrl(dashboardId: string) {
+      return await dashboardUrlGenerator.createUrl({
+        dashboardId,
+        useHash: false,
+        viewMode: ViewMode.EDIT,
+      });
+    },
+  };
+}
+
+/**
+ * Hook to use {@link DashboardService} in react components
+ */
+export function useDashboardService(): DashboardService {
+  const {
+    services: {
+      savedObjects: { client: savedObjectClient },
+      kibanaVersion,
+      share: { urlGenerators },
+    },
+  } = useMlKibana();
+  return useMemo(
+    () =>
+      dashboardServiceProvider(
+        savedObjectClient,
+        kibanaVersion,
+        urlGenerators.getUrlGenerator(DASHBOARD_APP_URL_GENERATOR)
+      ),
+    [savedObjectClient, kibanaVersion]
+  );
+}
diff --git a/x-pack/plugins/ml/public/application/services/http_service.ts b/x-pack/plugins/ml/public/application/services/http_service.ts
index 7144411c2885d..bd927dc0e3011 100644
--- a/x-pack/plugins/ml/public/application/services/http_service.ts
+++ b/x-pack/plugins/ml/public/application/services/http_service.ts
@@ -37,6 +37,8 @@ function getFetchOptions(
 /**
  * Function for making HTTP requests to Kibana's backend.
  * Wrapper for Kibana's HttpHandler.
+ *
+ * @deprecated use {@link HttpService} instead
  */
 export async function http<T>(options: HttpFetchOptionsWithPath): Promise<T> {
   const { path, fetchOptions } = getFetchOptions(options);
@@ -46,6 +48,8 @@ export async function http<T>(options: HttpFetchOptionsWithPath): Promise<T> {
 /**
  * Function for making HTTP requests to Kibana's backend which returns an Observable
  * with request cancellation support.
+ *
+ * @deprecated use {@link HttpService} instead
  */
 export function http$<T>(options: HttpFetchOptionsWithPath): Observable<T> {
   const { path, fetchOptions } = getFetchOptions(options);
@@ -55,7 +59,7 @@ export function http$<T>(options: HttpFetchOptionsWithPath): Observable<T> {
 /**
  * Creates an Observable from Kibana's HttpHandler.
  */
-export function fromHttpHandler<T>(input: string, init?: RequestInit): Observable<T> {
+function fromHttpHandler<T>(input: string, init?: RequestInit): Observable<T> {
   return new Observable<T>((subscriber) => {
     const controller = new AbortController();
     const signal = controller.signal;
diff --git a/x-pack/plugins/ml/public/application/services/ml_api_service/index.ts b/x-pack/plugins/ml/public/application/services/ml_api_service/index.ts
index fdaa3c2ffe79e..6d32fca6a645c 100644
--- a/x-pack/plugins/ml/public/application/services/ml_api_service/index.ts
+++ b/x-pack/plugins/ml/public/application/services/ml_api_service/index.ts
@@ -5,12 +5,13 @@
  */
 
 import { Observable } from 'rxjs';
-import { http, http$ } from '../http_service';
+import { HttpStart } from 'kibana/public';
+import { HttpService } from '../http_service';
 
 import { annotations } from './annotations';
 import { dataFrameAnalytics } from './data_frame_analytics';
 import { filters } from './filters';
-import { results } from './results';
+import { resultsApiProvider } from './results';
 import { jobs } from './jobs';
 import { fileDatavisualizer } from './datavisualizer';
 import { MlServerDefaults, MlServerLimits } from '../../../../common/types/ml_server_info';
@@ -28,6 +29,7 @@ import {
 import { ES_AGGREGATION } from '../../../../common/constants/aggregation_types';
 import { FieldRequestConfig } from '../../datavisualizer/index_based/common';
 import { DataRecognizerConfigResponse, Module } from '../../../../common/types/modules';
+import { getHttp } from '../../util/dependency_cache';
 
 export interface MlInfoResponse {
   defaults: MlServerDefaults;
@@ -87,327 +89,330 @@ export function basePath() {
   return '/api/ml';
 }
 
-export const ml = {
-  getJobs(obj?: { jobId?: string }) {
-    const jobId = obj && obj.jobId ? `/${obj.jobId}` : '';
-    return http<any>({
-      path: `${basePath()}/anomaly_detectors${jobId}`,
-    });
-  },
-
-  getJobStats(obj: { jobId?: string }) {
-    const jobId = obj && obj.jobId ? `/${obj.jobId}` : '';
-    return http<any>({
-      path: `${basePath()}/anomaly_detectors${jobId}/_stats`,
-    });
-  },
-
-  addJob({ jobId, job }: { jobId: string; job: Job }) {
-    const body = JSON.stringify(job);
-    return http<any>({
-      path: `${basePath()}/anomaly_detectors/${jobId}`,
-      method: 'PUT',
-      body,
-    });
-  },
-
-  openJob({ jobId }: { jobId: string }) {
-    return http<any>({
-      path: `${basePath()}/anomaly_detectors/${jobId}/_open`,
-      method: 'POST',
-    });
-  },
-
-  closeJob({ jobId }: { jobId: string }) {
-    return http<any>({
-      path: `${basePath()}/anomaly_detectors/${jobId}/_close`,
-      method: 'POST',
-    });
-  },
-
-  forceCloseJob({ jobId }: { jobId: string }) {
-    return http<any>({
-      path: `${basePath()}/anomaly_detectors/${jobId}/_close?force=true`,
-      method: 'POST',
-    });
-  },
-
-  deleteJob({ jobId }: { jobId: string }) {
-    return http<any>({
-      path: `${basePath()}/anomaly_detectors/${jobId}`,
-      method: 'DELETE',
-    });
-  },
-
-  forceDeleteJob({ jobId }: { jobId: string }) {
-    return http<any>({
-      path: `${basePath()}/anomaly_detectors/${jobId}?force=true`,
-      method: 'DELETE',
-    });
-  },
-
-  updateJob({ jobId, job }: { jobId: string; job: Job }) {
-    const body = JSON.stringify(job);
-    return http<any>({
-      path: `${basePath()}/anomaly_detectors/${jobId}/_update`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  estimateBucketSpan(obj: BucketSpanEstimatorData) {
-    const body = JSON.stringify(obj);
-    return http<BucketSpanEstimatorResponse>({
-      path: `${basePath()}/validate/estimate_bucket_span`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  validateJob(payload: {
-    job: Job;
-    duration: {
-      start?: number;
-      end?: number;
-    };
-    fields?: any[];
-  }) {
-    const body = JSON.stringify(payload);
-    return http<any>({
-      path: `${basePath()}/validate/job`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  validateCardinality$(job: CombinedJob): Observable<CardinalityValidationResults> {
-    const body = JSON.stringify(job);
-    return http$({
-      path: `${basePath()}/validate/cardinality`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  getDatafeeds(obj: { datafeedId: string }) {
-    const datafeedId = obj && obj.datafeedId ? `/${obj.datafeedId}` : '';
-    return http<any>({
-      path: `${basePath()}/datafeeds${datafeedId}`,
-    });
-  },
-
-  getDatafeedStats(obj: { datafeedId: string }) {
-    const datafeedId = obj && obj.datafeedId ? `/${obj.datafeedId}` : '';
-    return http<any>({
-      path: `${basePath()}/datafeeds${datafeedId}/_stats`,
-    });
-  },
-
-  addDatafeed({ datafeedId, datafeedConfig }: { datafeedId: string; datafeedConfig: Datafeed }) {
-    const body = JSON.stringify(datafeedConfig);
-    return http<any>({
-      path: `${basePath()}/datafeeds/${datafeedId}`,
-      method: 'PUT',
-      body,
-    });
-  },
-
-  updateDatafeed({ datafeedId, datafeedConfig }: { datafeedId: string; datafeedConfig: Datafeed }) {
-    const body = JSON.stringify(datafeedConfig);
-    return http<any>({
-      path: `${basePath()}/datafeeds/${datafeedId}/_update`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  deleteDatafeed({ datafeedId }: { datafeedId: string }) {
-    return http<any>({
-      path: `${basePath()}/datafeeds/${datafeedId}`,
-      method: 'DELETE',
-    });
-  },
-
-  forceDeleteDatafeed({ datafeedId }: { datafeedId: string }) {
-    return http<any>({
-      path: `${basePath()}/datafeeds/${datafeedId}?force=true`,
-      method: 'DELETE',
-    });
-  },
-
-  startDatafeed({ datafeedId, start, end }: { datafeedId: string; start: number; end: number }) {
-    const body = JSON.stringify({
-      ...(start !== undefined ? { start } : {}),
-      ...(end !== undefined ? { end } : {}),
-    });
-
-    return http<any>({
-      path: `${basePath()}/datafeeds/${datafeedId}/_start`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  stopDatafeed({ datafeedId }: { datafeedId: string }) {
-    return http<any>({
-      path: `${basePath()}/datafeeds/${datafeedId}/_stop`,
-      method: 'POST',
-    });
-  },
-
-  forceStopDatafeed({ datafeedId }: { datafeedId: string }) {
-    return http<any>({
-      path: `${basePath()}/datafeeds/${datafeedId}/_stop?force=true`,
-      method: 'POST',
-    });
-  },
-
-  datafeedPreview({ datafeedId }: { datafeedId: string }) {
-    return http<any>({
-      path: `${basePath()}/datafeeds/${datafeedId}/_preview`,
-      method: 'GET',
-    });
-  },
-
-  validateDetector({ detector }: { detector: Detector }) {
-    const body = JSON.stringify(detector);
-    return http<any>({
-      path: `${basePath()}/anomaly_detectors/_validate/detector`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  forecast({ jobId, duration }: { jobId: string; duration?: string }) {
-    const body = JSON.stringify({
-      ...(duration !== undefined ? { duration } : {}),
-    });
-
-    return http<any>({
-      path: `${basePath()}/anomaly_detectors/${jobId}/_forecast`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  overallBuckets({
-    jobId,
-    topN,
-    bucketSpan,
-    start,
-    end,
-  }: {
-    jobId: string;
-    topN: string;
-    bucketSpan: string;
-    start: number;
-    end: number;
-  }) {
-    const body = JSON.stringify({ topN, bucketSpan, start, end });
-    return http<any>({
-      path: `${basePath()}/anomaly_detectors/${jobId}/results/overall_buckets`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  hasPrivileges(obj: any) {
-    const body = JSON.stringify(obj);
-    return http<any>({
-      path: `${basePath()}/_has_privileges`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  checkMlCapabilities() {
-    return http<MlCapabilitiesResponse>({
-      path: `${basePath()}/ml_capabilities`,
-      method: 'GET',
-    });
-  },
-
-  checkManageMLCapabilities() {
-    return http<MlCapabilitiesResponse>({
-      path: `${basePath()}/ml_capabilities`,
-      method: 'GET',
-    });
-  },
-
-  getNotificationSettings() {
-    return http<any>({
-      path: `${basePath()}/notification_settings`,
-      method: 'GET',
-    });
-  },
-
-  getFieldCaps({ index, fields }: { index: string; fields: string[] }) {
-    const body = JSON.stringify({
-      ...(index !== undefined ? { index } : {}),
-      ...(fields !== undefined ? { fields } : {}),
-    });
-
-    return http<any>({
-      path: `${basePath()}/indices/field_caps`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  recognizeIndex({ indexPatternTitle }: { indexPatternTitle: string }) {
-    return http<any>({
-      path: `${basePath()}/modules/recognize/${indexPatternTitle}`,
-      method: 'GET',
-    });
-  },
-
-  listDataRecognizerModules() {
-    return http<any>({
-      path: `${basePath()}/modules/get_module`,
-      method: 'GET',
-    });
-  },
-
-  getDataRecognizerModule({ moduleId }: { moduleId: string }) {
-    return http<Module>({
-      path: `${basePath()}/modules/get_module/${moduleId}`,
-      method: 'GET',
-    });
-  },
-
-  dataRecognizerModuleJobsExist({ moduleId }: { moduleId: string }) {
-    return http<any>({
-      path: `${basePath()}/modules/jobs_exist/${moduleId}`,
-      method: 'GET',
-    });
+/**
+ * Temp solution to allow {@link ml} service to use http from
+ * the dependency_cache.
+ */
+const proxyHttpStart = new Proxy<HttpStart>(({} as unknown) as HttpStart, {
+  get(obj, prop: keyof HttpStart) {
+    try {
+      return getHttp()[prop];
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
   },
-
-  setupDataRecognizerConfig({
-    moduleId,
-    prefix,
-    groups,
-    indexPatternName,
-    query,
-    useDedicatedIndex,
-    startDatafeed,
-    start,
-    end,
-    jobOverrides,
-    estimateModelMemory,
-  }: {
-    moduleId: string;
-    prefix?: string;
-    groups?: string[];
-    indexPatternName?: string;
-    query?: any;
-    useDedicatedIndex?: boolean;
-    startDatafeed?: boolean;
-    start?: number;
-    end?: number;
-    jobOverrides?: Array<Partial<Job>>;
-    estimateModelMemory?: boolean;
-  }) {
-    const body = JSON.stringify({
+});
+
+export type MlApiServices = ReturnType<typeof mlApiServicesProvider>;
+
+export const ml = mlApiServicesProvider(new HttpService(proxyHttpStart));
+
+export function mlApiServicesProvider(httpService: HttpService) {
+  const { http } = httpService;
+  return {
+    getJobs(obj?: { jobId?: string }) {
+      const jobId = obj && obj.jobId ? `/${obj.jobId}` : '';
+      return httpService.http<any>({
+        path: `${basePath()}/anomaly_detectors${jobId}`,
+      });
+    },
+
+    getJobStats(obj: { jobId?: string }) {
+      const jobId = obj && obj.jobId ? `/${obj.jobId}` : '';
+      return httpService.http<any>({
+        path: `${basePath()}/anomaly_detectors${jobId}/_stats`,
+      });
+    },
+
+    addJob({ jobId, job }: { jobId: string; job: Job }) {
+      const body = JSON.stringify(job);
+      return httpService.http<any>({
+        path: `${basePath()}/anomaly_detectors/${jobId}`,
+        method: 'PUT',
+        body,
+      });
+    },
+
+    openJob({ jobId }: { jobId: string }) {
+      return httpService.http<any>({
+        path: `${basePath()}/anomaly_detectors/${jobId}/_open`,
+        method: 'POST',
+      });
+    },
+
+    closeJob({ jobId }: { jobId: string }) {
+      return http<any>({
+        path: `${basePath()}/anomaly_detectors/${jobId}/_close`,
+        method: 'POST',
+      });
+    },
+
+    forceCloseJob({ jobId }: { jobId: string }) {
+      return http<any>({
+        path: `${basePath()}/anomaly_detectors/${jobId}/_close?force=true`,
+        method: 'POST',
+      });
+    },
+
+    deleteJob({ jobId }: { jobId: string }) {
+      return httpService.http<any>({
+        path: `${basePath()}/anomaly_detectors/${jobId}`,
+        method: 'DELETE',
+      });
+    },
+
+    forceDeleteJob({ jobId }: { jobId: string }) {
+      return httpService.http<any>({
+        path: `${basePath()}/anomaly_detectors/${jobId}?force=true`,
+        method: 'DELETE',
+      });
+    },
+
+    updateJob({ jobId, job }: { jobId: string; job: Job }) {
+      const body = JSON.stringify(job);
+      return httpService.http<any>({
+        path: `${basePath()}/anomaly_detectors/${jobId}/_update`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    estimateBucketSpan(obj: BucketSpanEstimatorData) {
+      const body = JSON.stringify(obj);
+      return httpService.http<BucketSpanEstimatorResponse>({
+        path: `${basePath()}/validate/estimate_bucket_span`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    validateJob(payload: {
+      job: Job;
+      duration: {
+        start?: number;
+        end?: number;
+      };
+      fields?: any[];
+    }) {
+      const body = JSON.stringify(payload);
+      return httpService.http<any>({
+        path: `${basePath()}/validate/job`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    validateCardinality$(job: CombinedJob): Observable<CardinalityValidationResults> {
+      const body = JSON.stringify(job);
+      return httpService.http$({
+        path: `${basePath()}/validate/cardinality`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    getDatafeeds(obj: { datafeedId: string }) {
+      const datafeedId = obj && obj.datafeedId ? `/${obj.datafeedId}` : '';
+      return httpService.http<any>({
+        path: `${basePath()}/datafeeds${datafeedId}`,
+      });
+    },
+
+    getDatafeedStats(obj: { datafeedId: string }) {
+      const datafeedId = obj && obj.datafeedId ? `/${obj.datafeedId}` : '';
+      return httpService.http<any>({
+        path: `${basePath()}/datafeeds${datafeedId}/_stats`,
+      });
+    },
+
+    addDatafeed({ datafeedId, datafeedConfig }: { datafeedId: string; datafeedConfig: Datafeed }) {
+      const body = JSON.stringify(datafeedConfig);
+      return httpService.http<any>({
+        path: `${basePath()}/datafeeds/${datafeedId}`,
+        method: 'PUT',
+        body,
+      });
+    },
+
+    updateDatafeed({
+      datafeedId,
+      datafeedConfig,
+    }: {
+      datafeedId: string;
+      datafeedConfig: Datafeed;
+    }) {
+      const body = JSON.stringify(datafeedConfig);
+      return httpService.http<any>({
+        path: `${basePath()}/datafeeds/${datafeedId}/_update`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    deleteDatafeed({ datafeedId }: { datafeedId: string }) {
+      return httpService.http<any>({
+        path: `${basePath()}/datafeeds/${datafeedId}`,
+        method: 'DELETE',
+      });
+    },
+
+    forceDeleteDatafeed({ datafeedId }: { datafeedId: string }) {
+      return httpService.http<any>({
+        path: `${basePath()}/datafeeds/${datafeedId}?force=true`,
+        method: 'DELETE',
+      });
+    },
+
+    startDatafeed({ datafeedId, start, end }: { datafeedId: string; start: number; end: number }) {
+      const body = JSON.stringify({
+        ...(start !== undefined ? { start } : {}),
+        ...(end !== undefined ? { end } : {}),
+      });
+
+      return httpService.http<any>({
+        path: `${basePath()}/datafeeds/${datafeedId}/_start`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    stopDatafeed({ datafeedId }: { datafeedId: string }) {
+      return http<any>({
+        path: `${basePath()}/datafeeds/${datafeedId}/_stop`,
+        method: 'POST',
+      });
+    },
+
+    forceStopDatafeed({ datafeedId }: { datafeedId: string }) {
+      return http<any>({
+        path: `${basePath()}/datafeeds/${datafeedId}/_stop?force=true`,
+        method: 'POST',
+      });
+    },
+
+    datafeedPreview({ datafeedId }: { datafeedId: string }) {
+      return httpService.http<any>({
+        path: `${basePath()}/datafeeds/${datafeedId}/_preview`,
+        method: 'GET',
+      });
+    },
+
+    validateDetector({ detector }: { detector: Detector }) {
+      const body = JSON.stringify(detector);
+      return httpService.http<any>({
+        path: `${basePath()}/anomaly_detectors/_validate/detector`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    forecast({ jobId, duration }: { jobId: string; duration?: string }) {
+      const body = JSON.stringify({
+        ...(duration !== undefined ? { duration } : {}),
+      });
+
+      return httpService.http<any>({
+        path: `${basePath()}/anomaly_detectors/${jobId}/_forecast`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    overallBuckets({
+      jobId,
+      topN,
+      bucketSpan,
+      start,
+      end,
+    }: {
+      jobId: string;
+      topN: string;
+      bucketSpan: string;
+      start: number;
+      end: number;
+    }) {
+      const body = JSON.stringify({ topN, bucketSpan, start, end });
+      return httpService.http<any>({
+        path: `${basePath()}/anomaly_detectors/${jobId}/results/overall_buckets`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    hasPrivileges(obj: any) {
+      const body = JSON.stringify(obj);
+      return httpService.http<any>({
+        path: `${basePath()}/_has_privileges`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    checkMlCapabilities() {
+      return httpService.http<MlCapabilitiesResponse>({
+        path: `${basePath()}/ml_capabilities`,
+        method: 'GET',
+      });
+    },
+
+    checkManageMLCapabilities() {
+      return httpService.http<MlCapabilitiesResponse>({
+        path: `${basePath()}/ml_capabilities`,
+        method: 'GET',
+      });
+    },
+
+    getNotificationSettings() {
+      return httpService.http<any>({
+        path: `${basePath()}/notification_settings`,
+        method: 'GET',
+      });
+    },
+
+    getFieldCaps({ index, fields }: { index: string; fields: string[] }) {
+      const body = JSON.stringify({
+        ...(index !== undefined ? { index } : {}),
+        ...(fields !== undefined ? { fields } : {}),
+      });
+
+      return httpService.http<any>({
+        path: `${basePath()}/indices/field_caps`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    recognizeIndex({ indexPatternTitle }: { indexPatternTitle: string }) {
+      return httpService.http<any>({
+        path: `${basePath()}/modules/recognize/${indexPatternTitle}`,
+        method: 'GET',
+      });
+    },
+
+    listDataRecognizerModules() {
+      return httpService.http<any>({
+        path: `${basePath()}/modules/get_module`,
+        method: 'GET',
+      });
+    },
+
+    getDataRecognizerModule({ moduleId }: { moduleId: string }) {
+      return httpService.http<Module>({
+        path: `${basePath()}/modules/get_module/${moduleId}`,
+        method: 'GET',
+      });
+    },
+
+    dataRecognizerModuleJobsExist({ moduleId }: { moduleId: string }) {
+      return httpService.http<any>({
+        path: `${basePath()}/modules/jobs_exist/${moduleId}`,
+        method: 'GET',
+      });
+    },
+
+    setupDataRecognizerConfig({
+      moduleId,
       prefix,
       groups,
       indexPatternName,
@@ -418,37 +423,41 @@ export const ml = {
       end,
       jobOverrides,
       estimateModelMemory,
-    });
-
-    return http<DataRecognizerConfigResponse>({
-      path: `${basePath()}/modules/setup/${moduleId}`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  getVisualizerFieldStats({
-    indexPatternTitle,
-    query,
-    timeFieldName,
-    earliest,
-    latest,
-    samplerShardSize,
-    interval,
-    fields,
-    maxExamples,
-  }: {
-    indexPatternTitle: string;
-    query: any;
-    timeFieldName?: string;
-    earliest?: number;
-    latest?: number;
-    samplerShardSize?: number;
-    interval?: string;
-    fields?: FieldRequestConfig[];
-    maxExamples?: number;
-  }) {
-    const body = JSON.stringify({
+    }: {
+      moduleId: string;
+      prefix?: string;
+      groups?: string[];
+      indexPatternName?: string;
+      query?: any;
+      useDedicatedIndex?: boolean;
+      startDatafeed?: boolean;
+      start?: number;
+      end?: number;
+      jobOverrides?: Array<Partial<Job>>;
+      estimateModelMemory?: boolean;
+    }) {
+      const body = JSON.stringify({
+        prefix,
+        groups,
+        indexPatternName,
+        query,
+        useDedicatedIndex,
+        startDatafeed,
+        start,
+        end,
+        jobOverrides,
+        estimateModelMemory,
+      });
+
+      return httpService.http<DataRecognizerConfigResponse>({
+        path: `${basePath()}/modules/setup/${moduleId}`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    getVisualizerFieldStats({
+      indexPatternTitle,
       query,
       timeFieldName,
       earliest,
@@ -457,35 +466,37 @@ export const ml = {
       interval,
       fields,
       maxExamples,
-    });
-
-    return http<any>({
-      path: `${basePath()}/data_visualizer/get_field_stats/${indexPatternTitle}`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  getVisualizerOverallStats({
-    indexPatternTitle,
-    query,
-    timeFieldName,
-    earliest,
-    latest,
-    samplerShardSize,
-    aggregatableFields,
-    nonAggregatableFields,
-  }: {
-    indexPatternTitle: string;
-    query: any;
-    timeFieldName?: string;
-    earliest?: number;
-    latest?: number;
-    samplerShardSize?: number;
-    aggregatableFields: string[];
-    nonAggregatableFields: string[];
-  }) {
-    const body = JSON.stringify({
+    }: {
+      indexPatternTitle: string;
+      query: any;
+      timeFieldName?: string;
+      earliest?: number;
+      latest?: number;
+      samplerShardSize?: number;
+      interval?: string;
+      fields?: FieldRequestConfig[];
+      maxExamples?: number;
+    }) {
+      const body = JSON.stringify({
+        query,
+        timeFieldName,
+        earliest,
+        latest,
+        samplerShardSize,
+        interval,
+        fields,
+        maxExamples,
+      });
+
+      return httpService.http<any>({
+        path: `${basePath()}/data_visualizer/get_field_stats/${indexPatternTitle}`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    getVisualizerOverallStats({
+      indexPatternTitle,
       query,
       timeFieldName,
       earliest,
@@ -493,204 +504,230 @@ export const ml = {
       samplerShardSize,
       aggregatableFields,
       nonAggregatableFields,
-    });
-
-    return http<any>({
-      path: `${basePath()}/data_visualizer/get_overall_stats/${indexPatternTitle}`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  /**
-   * Gets a list of calendars
-   * @param obj
-   * @returns {Promise<Calendar[]>}
-   */
-  calendars(obj?: { calendarId?: CalendarId; calendarIds?: CalendarId[] }) {
-    const { calendarId, calendarIds } = obj || {};
-    let calendarIdsPathComponent = '';
-    if (calendarId) {
-      calendarIdsPathComponent = `/${calendarId}`;
-    } else if (calendarIds) {
-      calendarIdsPathComponent = `/${calendarIds.join(',')}`;
-    }
-    return http<Calendar[]>({
-      path: `${basePath()}/calendars${calendarIdsPathComponent}`,
-      method: 'GET',
-    });
-  },
-
-  addCalendar(obj: Calendar) {
-    const body = JSON.stringify(obj);
-    return http<any>({
-      path: `${basePath()}/calendars`,
-      method: 'PUT',
-      body,
-    });
-  },
-
-  updateCalendar(obj: UpdateCalendar) {
-    const calendarId = obj && obj.calendarId ? `/${obj.calendarId}` : '';
-    const body = JSON.stringify(obj);
-    return http<any>({
-      path: `${basePath()}/calendars${calendarId}`,
-      method: 'PUT',
-      body,
-    });
-  },
-
-  deleteCalendar({ calendarId }: { calendarId?: string }) {
-    return http<any>({
-      path: `${basePath()}/calendars/${calendarId}`,
-      method: 'DELETE',
-    });
-  },
-
-  mlNodeCount() {
-    return http<{ count: number }>({
-      path: `${basePath()}/ml_node_count`,
-      method: 'GET',
-    });
-  },
-
-  mlInfo() {
-    return http<MlInfoResponse>({
-      path: `${basePath()}/info`,
-      method: 'GET',
-    });
-  },
-
-  calculateModelMemoryLimit$({
-    analysisConfig,
-    indexPattern,
-    query,
-    timeFieldName,
-    earliestMs,
-    latestMs,
-  }: {
-    analysisConfig: AnalysisConfig;
-    indexPattern: string;
-    query: any;
-    timeFieldName: string;
-    earliestMs: number;
-    latestMs: number;
-  }) {
-    const body = JSON.stringify({
+    }: {
+      indexPatternTitle: string;
+      query: any;
+      timeFieldName?: string;
+      earliest?: number;
+      latest?: number;
+      samplerShardSize?: number;
+      aggregatableFields: string[];
+      nonAggregatableFields: string[];
+    }) {
+      const body = JSON.stringify({
+        query,
+        timeFieldName,
+        earliest,
+        latest,
+        samplerShardSize,
+        aggregatableFields,
+        nonAggregatableFields,
+      });
+
+      return httpService.http<any>({
+        path: `${basePath()}/data_visualizer/get_overall_stats/${indexPatternTitle}`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    /**
+     * Gets a list of calendars
+     * @param obj
+     * @returns {Promise<Calendar[]>}
+     */
+    calendars(obj?: { calendarId?: CalendarId; calendarIds?: CalendarId[] }) {
+      const { calendarId, calendarIds } = obj || {};
+      let calendarIdsPathComponent = '';
+      if (calendarId) {
+        calendarIdsPathComponent = `/${calendarId}`;
+      } else if (calendarIds) {
+        calendarIdsPathComponent = `/${calendarIds.join(',')}`;
+      }
+      return httpService.http<Calendar[]>({
+        path: `${basePath()}/calendars${calendarIdsPathComponent}`,
+        method: 'GET',
+      });
+    },
+
+    addCalendar(obj: Calendar) {
+      const body = JSON.stringify(obj);
+      return httpService.http<any>({
+        path: `${basePath()}/calendars`,
+        method: 'PUT',
+        body,
+      });
+    },
+
+    updateCalendar(obj: UpdateCalendar) {
+      const calendarId = obj && obj.calendarId ? `/${obj.calendarId}` : '';
+      const body = JSON.stringify(obj);
+      return httpService.http<any>({
+        path: `${basePath()}/calendars${calendarId}`,
+        method: 'PUT',
+        body,
+      });
+    },
+
+    deleteCalendar({ calendarId }: { calendarId?: string }) {
+      return httpService.http<any>({
+        path: `${basePath()}/calendars/${calendarId}`,
+        method: 'DELETE',
+      });
+    },
+
+    mlNodeCount() {
+      return httpService.http<{ count: number }>({
+        path: `${basePath()}/ml_node_count`,
+        method: 'GET',
+      });
+    },
+
+    mlInfo() {
+      return httpService.http<MlInfoResponse>({
+        path: `${basePath()}/info`,
+        method: 'GET',
+      });
+    },
+
+    calculateModelMemoryLimit$({
       analysisConfig,
       indexPattern,
       query,
       timeFieldName,
       earliestMs,
       latestMs,
-    });
-
-    return http$<{ modelMemoryLimit: string }>({
-      path: `${basePath()}/validate/calculate_model_memory_limit`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  getCardinalityOfFields({
-    index,
-    fieldNames,
-    query,
-    timeFieldName,
-    earliestMs,
-    latestMs,
-  }: {
-    index: string;
-    fieldNames: string[];
-    query: any;
-    timeFieldName: string;
-    earliestMs: number;
-    latestMs: number;
-  }) {
-    const body = JSON.stringify({ index, fieldNames, query, timeFieldName, earliestMs, latestMs });
-
-    return http<any>({
-      path: `${basePath()}/fields_service/field_cardinality`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  getTimeFieldRange({
-    index,
-    timeFieldName,
-    query,
-  }: {
-    index: string;
-    timeFieldName?: string;
-    query: any;
-  }) {
-    const body = JSON.stringify({ index, timeFieldName, query });
-
-    return http<GetTimeFieldRangeResponse>({
-      path: `${basePath()}/fields_service/time_field_range`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  esSearch(obj: any) {
-    const body = JSON.stringify(obj);
-    return http<any>({
-      path: `${basePath()}/es_search`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  esSearch$(obj: any) {
-    const body = JSON.stringify(obj);
-    return http$<any>({
-      path: `${basePath()}/es_search`,
-      method: 'POST',
-      body,
-    });
-  },
-
-  getIndices() {
-    const tempBasePath = '/api';
-    return http<Array<{ name: string }>>({
-      path: `${tempBasePath}/index_management/indices`,
-      method: 'GET',
-    });
-  },
-
-  getModelSnapshots(jobId: string, snapshotId?: string) {
-    return http<GetModelSnapshotsResponse>({
-      path: `${basePath()}/anomaly_detectors/${jobId}/model_snapshots${
-        snapshotId !== undefined ? `/${snapshotId}` : ''
-      }`,
-    });
-  },
-
-  updateModelSnapshot(
-    jobId: string,
-    snapshotId: string,
-    body: { description?: string; retain?: boolean }
-  ) {
-    return http<any>({
-      path: `${basePath()}/anomaly_detectors/${jobId}/model_snapshots/${snapshotId}/_update`,
-      method: 'POST',
-      body: JSON.stringify(body),
-    });
-  },
-
-  deleteModelSnapshot(jobId: string, snapshotId: string) {
-    return http<any>({
-      path: `${basePath()}/anomaly_detectors/${jobId}/model_snapshots/${snapshotId}`,
-      method: 'DELETE',
-    });
-  },
-
-  annotations,
-  dataFrameAnalytics,
-  filters,
-  results,
-  jobs,
-  fileDatavisualizer,
-};
+    }: {
+      analysisConfig: AnalysisConfig;
+      indexPattern: string;
+      query: any;
+      timeFieldName: string;
+      earliestMs: number;
+      latestMs: number;
+    }) {
+      const body = JSON.stringify({
+        analysisConfig,
+        indexPattern,
+        query,
+        timeFieldName,
+        earliestMs,
+        latestMs,
+      });
+
+      return httpService.http$<{ modelMemoryLimit: string }>({
+        path: `${basePath()}/validate/calculate_model_memory_limit`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    getCardinalityOfFields({
+      index,
+      fieldNames,
+      query,
+      timeFieldName,
+      earliestMs,
+      latestMs,
+    }: {
+      index: string;
+      fieldNames: string[];
+      query: any;
+      timeFieldName: string;
+      earliestMs: number;
+      latestMs: number;
+    }) {
+      const body = JSON.stringify({
+        index,
+        fieldNames,
+        query,
+        timeFieldName,
+        earliestMs,
+        latestMs,
+      });
+
+      return httpService.http<any>({
+        path: `${basePath()}/fields_service/field_cardinality`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    getTimeFieldRange({
+      index,
+      timeFieldName,
+      query,
+    }: {
+      index: string;
+      timeFieldName?: string;
+      query: any;
+    }) {
+      const body = JSON.stringify({ index, timeFieldName, query });
+
+      return httpService.http<GetTimeFieldRangeResponse>({
+        path: `${basePath()}/fields_service/time_field_range`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    esSearch(obj: any) {
+      const body = JSON.stringify(obj);
+      return httpService.http<any>({
+        path: `${basePath()}/es_search`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    esSearch$(obj: any) {
+      const body = JSON.stringify(obj);
+      return httpService.http$<any>({
+        path: `${basePath()}/es_search`,
+        method: 'POST',
+        body,
+      });
+    },
+
+    getIndices() {
+      const tempBasePath = '/api';
+      return httpService.http<Array<{ name: string }>>({
+        path: `${tempBasePath}/index_management/indices`,
+        method: 'GET',
+      });
+    },
+
+    getModelSnapshots(jobId: string, snapshotId?: string) {
+      return http<GetModelSnapshotsResponse>({
+        path: `${basePath()}/anomaly_detectors/${jobId}/model_snapshots${
+          snapshotId !== undefined ? `/${snapshotId}` : ''
+        }`,
+      });
+    },
+
+    updateModelSnapshot(
+      jobId: string,
+      snapshotId: string,
+      body: { description?: string; retain?: boolean }
+    ) {
+      return http<any>({
+        path: `${basePath()}/anomaly_detectors/${jobId}/model_snapshots/${snapshotId}/_update`,
+        method: 'POST',
+        body: JSON.stringify(body),
+      });
+    },
+
+    deleteModelSnapshot(jobId: string, snapshotId: string) {
+      return http<any>({
+        path: `${basePath()}/anomaly_detectors/${jobId}/model_snapshots/${snapshotId}`,
+        method: 'DELETE',
+      });
+    },
+
+    annotations,
+    dataFrameAnalytics,
+    filters,
+    results: resultsApiProvider(httpService),
+    jobs,
+    fileDatavisualizer,
+  };
+}
diff --git a/x-pack/plugins/ml/public/application/services/ml_api_service/results.ts b/x-pack/plugins/ml/public/application/services/ml_api_service/results.ts
index 830e6fab4163a..521fd306847eb 100644
--- a/x-pack/plugins/ml/public/application/services/ml_api_service/results.ts
+++ b/x-pack/plugins/ml/public/application/services/ml_api_service/results.ts
@@ -5,14 +5,14 @@
  */
 
 // Service for obtaining data for the ML Results dashboards.
-import { http, http$ } from '../http_service';
+import { HttpService } from '../http_service';
 
 import { basePath } from './index';
 
 import { JobId } from '../../../../common/types/anomaly_detection_jobs';
 import { PartitionFieldsDefinition } from '../results_service/result_service_rx';
 
-export const results = {
+export const resultsApiProvider = (httpService: HttpService) => ({
   getAnomaliesTableData(
     jobIds: string[],
     criteriaFields: string[],
@@ -40,7 +40,7 @@ export const results = {
       influencersFilterQuery,
     });
 
-    return http$<any>({
+    return httpService.http$<any>({
       path: `${basePath()}/results/anomalies_table_data`,
       method: 'POST',
       body,
@@ -53,7 +53,7 @@ export const results = {
       earliestMs,
       latestMs,
     });
-    return http<any>({
+    return httpService.http<any>({
       path: `${basePath()}/results/max_anomaly_score`,
       method: 'POST',
       body,
@@ -62,7 +62,7 @@ export const results = {
 
   getCategoryDefinition(jobId: string, categoryId: string) {
     const body = JSON.stringify({ jobId, categoryId });
-    return http<any>({
+    return httpService.http<any>({
       path: `${basePath()}/results/category_definition`,
       method: 'POST',
       body,
@@ -75,7 +75,7 @@ export const results = {
       categoryIds,
       maxExamples,
     });
-    return http<any>({
+    return httpService.http<any>({
       path: `${basePath()}/results/category_examples`,
       method: 'POST',
       body,
@@ -90,10 +90,10 @@ export const results = {
     latestMs: number
   ) {
     const body = JSON.stringify({ jobId, searchTerm, criteriaFields, earliestMs, latestMs });
-    return http$<PartitionFieldsDefinition>({
+    return httpService.http$<PartitionFieldsDefinition>({
       path: `${basePath()}/results/partition_fields_values`,
       method: 'POST',
       body,
     });
   },
-};
+});
diff --git a/x-pack/plugins/ml/public/application/services/results_service/index.ts b/x-pack/plugins/ml/public/application/services/results_service/index.ts
index cc02248f4d5a9..6c508422e7063 100644
--- a/x-pack/plugins/ml/public/application/services/results_service/index.ts
+++ b/x-pack/plugins/ml/public/application/services/results_service/index.ts
@@ -4,47 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  getMetricData,
-  getModelPlotOutput,
-  getRecordsForCriteria,
-  getScheduledEventsByBucket,
-  fetchPartitionFieldsValues,
-} from './result_service_rx';
-import {
-  getEventDistributionData,
-  getEventRateData,
-  getInfluencerValueMaxScoreByTime,
-  getOverallBucketScores,
-  getRecordInfluencers,
-  getRecordMaxScoreByTime,
-  getRecords,
-  getRecordsForDetector,
-  getRecordsForInfluencer,
-  getScoresByBucket,
-  getTopInfluencers,
-  getTopInfluencerValues,
-} from './results_service';
-
-export const mlResultsService = {
-  getScoresByBucket,
-  getScheduledEventsByBucket,
-  getTopInfluencers,
-  getTopInfluencerValues,
-  getOverallBucketScores,
-  getInfluencerValueMaxScoreByTime,
-  getRecordInfluencers,
-  getRecordsForInfluencer,
-  getRecordsForDetector,
-  getRecords,
-  getRecordsForCriteria,
-  getMetricData,
-  getEventRateData,
-  getEventDistributionData,
-  getModelPlotOutput,
-  getRecordMaxScoreByTime,
-  fetchPartitionFieldsValues,
-};
+import { resultsServiceRxProvider } from './result_service_rx';
+import { resultsServiceProvider } from './results_service';
+import { ml, MlApiServices } from '../ml_api_service';
 
 export type MlResultsService = typeof mlResultsService;
 
@@ -57,3 +19,12 @@ export interface CriteriaField {
   fieldName: string;
   fieldValue: any;
 }
+
+export const mlResultsService = mlResultsServiceProvider(ml);
+
+export function mlResultsServiceProvider(mlApiServices: MlApiServices) {
+  return {
+    ...resultsServiceProvider(mlApiServices),
+    ...resultsServiceRxProvider(mlApiServices),
+  };
+}
diff --git a/x-pack/plugins/ml/public/application/services/results_service/result_service_rx.ts b/x-pack/plugins/ml/public/application/services/results_service/result_service_rx.ts
index a21d0caaedd33..1bcbd8dbcdd63 100644
--- a/x-pack/plugins/ml/public/application/services/results_service/result_service_rx.ts
+++ b/x-pack/plugins/ml/public/application/services/results_service/result_service_rx.ts
@@ -17,7 +17,7 @@ import _ from 'lodash';
 import { Dictionary } from '../../../../common/types/common';
 import { ML_MEDIAN_PERCENTS } from '../../../../common/util/job_utils';
 import { JobId } from '../../../../common/types/anomaly_detection_jobs';
-import { ml } from '../ml_api_service';
+import { MlApiServices } from '../ml_api_service';
 import { ML_RESULTS_INDEX_PATTERN } from '../../../../common/constants/index_patterns';
 import { CriteriaField } from './index';
 
@@ -46,524 +46,528 @@ export type PartitionFieldsDefinition = {
   [field in FieldTypes]: FieldDefinition;
 };
 
-export function getMetricData(
-  index: string,
-  entityFields: any[],
-  query: object | undefined,
-  metricFunction: string, // ES aggregation name
-  metricFieldName: string,
-  timeFieldName: string,
-  earliestMs: number,
-  latestMs: number,
-  interval: string
-): Observable<MetricData> {
-  // Build the criteria to use in the bool filter part of the request.
-  // Add criteria for the time range, entity fields,
-  // plus any additional supplied query.
-  const shouldCriteria: object[] = [];
-  const mustCriteria: object[] = [
-    {
-      range: {
-        [timeFieldName]: {
-          gte: earliestMs,
-          lte: latestMs,
-          format: 'epoch_millis',
-        },
-      },
-    },
-    ...(query ? [query] : []),
-  ];
-
-  entityFields.forEach((entity) => {
-    if (entity.fieldValue.length !== 0) {
-      mustCriteria.push({
-        term: {
-          [entity.fieldName]: entity.fieldValue,
-        },
-      });
-    } else {
-      // Add special handling for blank entity field values, checking for either
-      // an empty string or the field not existing.
-      shouldCriteria.push({
-        bool: {
-          must: [
-            {
-              term: {
-                [entity.fieldName]: '',
-              },
-            },
-          ],
-        },
-      });
-      shouldCriteria.push({
-        bool: {
-          must_not: [
-            {
-              exists: { field: entity.fieldName },
-            },
-          ],
-        },
-      });
-    }
-  });
-
-  const body: any = {
-    query: {
-      bool: {
-        must: mustCriteria,
-      },
-    },
-    size: 0,
-    _source: {
-      excludes: [],
-    },
-    aggs: {
-      byTime: {
-        date_histogram: {
-          field: timeFieldName,
-          interval,
-          min_doc_count: 0,
-        },
-      },
-    },
-  };
-
-  if (shouldCriteria.length > 0) {
-    body.query.bool.should = shouldCriteria;
-    body.query.bool.minimum_should_match = shouldCriteria.length / 2;
-  }
-
-  if (metricFieldName !== undefined && metricFieldName !== '') {
-    body.aggs.byTime.aggs = {};
-
-    const metricAgg: any = {
-      [metricFunction]: {
-        field: metricFieldName,
-      },
-    };
-
-    if (metricFunction === 'percentiles') {
-      metricAgg[metricFunction].percents = [ML_MEDIAN_PERCENTS];
-    }
-    body.aggs.byTime.aggs.metric = metricAgg;
-  }
-
-  return ml.esSearch$({ index, body }).pipe(
-    map((resp: any) => {
-      const obj: MetricData = { success: true, results: {} };
-      const dataByTime = resp?.aggregations?.byTime?.buckets ?? [];
-      dataByTime.forEach((dataForTime: any) => {
-        if (metricFunction === 'count') {
-          obj.results[dataForTime.key] = dataForTime.doc_count;
-        } else {
-          const value = dataForTime?.metric?.value;
-          const values = dataForTime?.metric?.values;
-          if (dataForTime.doc_count === 0) {
-            obj.results[dataForTime.key] = null;
-          } else if (value !== undefined) {
-            obj.results[dataForTime.key] = value;
-          } else if (values !== undefined) {
-            // Percentiles agg currently returns NaN rather than null when none of the docs in the
-            // bucket contain the field used in the aggregation
-            // (see elasticsearch issue https://github.com/elastic/elasticsearch/issues/29066).
-            // Store as null, so values can be handled in the same manner downstream as other aggs
-            // (min, mean, max) which return null.
-            const medianValues = values[ML_MEDIAN_PERCENTS];
-            obj.results[dataForTime.key] = !isNaN(medianValues) ? medianValues : null;
-          } else {
-            obj.results[dataForTime.key] = null;
-          }
-        }
-      });
-
-      return obj;
-    })
-  );
-}
-
 export interface ModelPlotOutput extends ResultResponse {
   results: Record<string, any>;
 }
 
-export function getModelPlotOutput(
-  jobId: string,
-  detectorIndex: number,
-  criteriaFields: any[],
-  earliestMs: number,
-  latestMs: number,
-  interval: string,
-  aggType?: { min: any; max: any }
-): Observable<ModelPlotOutput> {
-  const obj: ModelPlotOutput = {
-    success: true,
-    results: {},
-  };
+export interface RecordsForCriteria extends ResultResponse {
+  records: any[];
+}
 
-  // if an aggType object has been passed in, use it.
-  // otherwise default to min and max aggs for the upper and lower bounds
-  const modelAggs =
-    aggType === undefined
-      ? { max: 'max', min: 'min' }
-      : {
-          max: aggType.max,
-          min: aggType.min,
-        };
+export interface ScheduledEventsByBucket extends ResultResponse {
+  events: Record<string, any>;
+}
 
-  // Build the criteria to use in the bool filter part of the request.
-  // Add criteria for the job ID and time range.
-  const mustCriteria: object[] = [
-    {
-      term: { job_id: jobId },
-    },
-    {
-      range: {
-        timestamp: {
-          gte: earliestMs,
-          lte: latestMs,
-          format: 'epoch_millis',
-        },
-      },
-    },
-  ];
-
-  // Add in term queries for each of the specified criteria.
-  _.each(criteriaFields, (criteria) => {
-    mustCriteria.push({
-      term: {
-        [criteria.fieldName]: criteria.fieldValue,
-      },
-    });
-  });
-
-  // Add criteria for the detector index. Results from jobs created before 6.1 will not
-  // contain a detector_index field, so use a should criteria with a 'not exists' check.
-  const shouldCriteria = [
-    {
-      term: { detector_index: detectorIndex },
-    },
-    {
-      bool: {
-        must_not: [
-          {
-            exists: { field: 'detector_index' },
+export function resultsServiceRxProvider(mlApiServices: MlApiServices) {
+  return {
+    getMetricData(
+      index: string,
+      entityFields: any[],
+      query: object | undefined,
+      metricFunction: string, // ES aggregation name
+      metricFieldName: string,
+      timeFieldName: string,
+      earliestMs: number,
+      latestMs: number,
+      interval: string
+    ): Observable<MetricData> {
+      // Build the criteria to use in the bool filter part of the request.
+      // Add criteria for the time range, entity fields,
+      // plus any additional supplied query.
+      const shouldCriteria: object[] = [];
+      const mustCriteria: object[] = [
+        {
+          range: {
+            [timeFieldName]: {
+              gte: earliestMs,
+              lte: latestMs,
+              format: 'epoch_millis',
+            },
           },
-        ],
-      },
-    },
-  ];
+        },
+        ...(query ? [query] : []),
+      ];
+
+      entityFields.forEach((entity) => {
+        if (entity.fieldValue.length !== 0) {
+          mustCriteria.push({
+            term: {
+              [entity.fieldName]: entity.fieldValue,
+            },
+          });
+        } else {
+          // Add special handling for blank entity field values, checking for either
+          // an empty string or the field not existing.
+          shouldCriteria.push({
+            bool: {
+              must: [
+                {
+                  term: {
+                    [entity.fieldName]: '',
+                  },
+                },
+              ],
+            },
+          });
+          shouldCriteria.push({
+            bool: {
+              must_not: [
+                {
+                  exists: { field: entity.fieldName },
+                },
+              ],
+            },
+          });
+        }
+      });
 
-  return ml
-    .esSearch$({
-      index: ML_RESULTS_INDEX_PATTERN,
-      size: 0,
-      body: {
+      const body: any = {
         query: {
           bool: {
-            filter: [
-              {
-                query_string: {
-                  query: 'result_type:model_plot',
-                  analyze_wildcard: true,
-                },
-              },
-              {
-                bool: {
-                  must: mustCriteria,
-                  should: shouldCriteria,
-                  minimum_should_match: 1,
-                },
-              },
-            ],
+            must: mustCriteria,
           },
         },
+        size: 0,
+        _source: {
+          excludes: [],
+        },
         aggs: {
-          times: {
+          byTime: {
             date_histogram: {
-              field: 'timestamp',
+              field: timeFieldName,
               interval,
               min_doc_count: 0,
             },
-            aggs: {
-              actual: {
-                avg: {
-                  field: 'actual',
-                },
-              },
-              modelUpper: {
-                [modelAggs.max]: {
-                  field: 'model_upper',
-                },
-              },
-              modelLower: {
-                [modelAggs.min]: {
-                  field: 'model_lower',
-                },
-              },
-            },
           },
         },
-      },
-    })
-    .pipe(
-      map((resp) => {
-        const aggregationsByTime = _.get(resp, ['aggregations', 'times', 'buckets'], []);
-        _.each(aggregationsByTime, (dataForTime: any) => {
-          const time = dataForTime.key;
-          const modelUpper: number | undefined = _.get(dataForTime, ['modelUpper', 'value']);
-          const modelLower: number | undefined = _.get(dataForTime, ['modelLower', 'value']);
-          const actual = _.get(dataForTime, ['actual', 'value']);
-
-          obj.results[time] = {
-            actual,
-            modelUpper:
-              modelUpper === undefined || isFinite(modelUpper) === false ? null : modelUpper,
-            modelLower:
-              modelLower === undefined || isFinite(modelLower) === false ? null : modelLower,
-          };
-        });
+      };
 
-        return obj;
-      })
-    );
-}
+      if (shouldCriteria.length > 0) {
+        body.query.bool.should = shouldCriteria;
+        body.query.bool.minimum_should_match = shouldCriteria.length / 2;
+      }
 
-export interface RecordsForCriteria extends ResultResponse {
-  records: any[];
-}
+      if (metricFieldName !== undefined && metricFieldName !== '') {
+        body.aggs.byTime.aggs = {};
 
-// Queries Elasticsearch to obtain the record level results matching the given criteria,
-// for the specified job(s), time range, and record score threshold.
-// criteriaFields parameter must be an array, with each object in the array having 'fieldName'
-// 'fieldValue' properties.
-// Pass an empty array or ['*'] to search over all job IDs.
-export function getRecordsForCriteria(
-  jobIds: string[] | undefined,
-  criteriaFields: CriteriaField[],
-  threshold: any,
-  earliestMs: number,
-  latestMs: number,
-  maxResults: number | undefined
-): Observable<RecordsForCriteria> {
-  const obj: RecordsForCriteria = { success: true, records: [] };
-
-  // Build the criteria to use in the bool filter part of the request.
-  // Add criteria for the time range, record score, plus any specified job IDs.
-  const boolCriteria: any[] = [
-    {
-      range: {
-        timestamp: {
-          gte: earliestMs,
-          lte: latestMs,
-          format: 'epoch_millis',
-        },
-      },
-    },
-    {
-      range: {
-        record_score: {
-          gte: threshold,
-        },
-      },
-    },
-  ];
+        const metricAgg: any = {
+          [metricFunction]: {
+            field: metricFieldName,
+          },
+        };
 
-  if (jobIds && jobIds.length > 0 && !(jobIds.length === 1 && jobIds[0] === '*')) {
-    let jobIdFilterStr = '';
-    _.each(jobIds, (jobId, i) => {
-      if (i > 0) {
-        jobIdFilterStr += ' OR ';
+        if (metricFunction === 'percentiles') {
+          metricAgg[metricFunction].percents = [ML_MEDIAN_PERCENTS];
+        }
+        body.aggs.byTime.aggs.metric = metricAgg;
       }
-      jobIdFilterStr += 'job_id:';
-      jobIdFilterStr += jobId;
-    });
-    boolCriteria.push({
-      query_string: {
-        analyze_wildcard: false,
-        query: jobIdFilterStr,
-      },
-    });
-  }
-
-  // Add in term queries for each of the specified criteria.
-  _.each(criteriaFields, (criteria) => {
-    boolCriteria.push({
-      term: {
-        [criteria.fieldName]: criteria.fieldValue,
-      },
-    });
-  });
-
-  return ml
-    .esSearch$({
-      index: ML_RESULTS_INDEX_PATTERN,
-      rest_total_hits_as_int: true,
-      size: maxResults !== undefined ? maxResults : 100,
-      body: {
-        query: {
-          bool: {
-            filter: [
-              {
-                query_string: {
-                  query: 'result_type:record',
-                  analyze_wildcard: false,
-                },
-              },
-              {
-                bool: {
-                  must: boolCriteria,
-                },
-              },
-            ],
-          },
-        },
-        sort: [{ record_score: { order: 'desc' } }],
-      },
-    })
-    .pipe(
-      map((resp) => {
-        if (resp.hits.total !== 0) {
-          _.each(resp.hits.hits, (hit: any) => {
-            obj.records.push(hit._source);
+
+      return mlApiServices.esSearch$({ index, body }).pipe(
+        map((resp: any) => {
+          const obj: MetricData = { success: true, results: {} };
+          const dataByTime = resp?.aggregations?.byTime?.buckets ?? [];
+          dataByTime.forEach((dataForTime: any) => {
+            if (metricFunction === 'count') {
+              obj.results[dataForTime.key] = dataForTime.doc_count;
+            } else {
+              const value = dataForTime?.metric?.value;
+              const values = dataForTime?.metric?.values;
+              if (dataForTime.doc_count === 0) {
+                obj.results[dataForTime.key] = null;
+              } else if (value !== undefined) {
+                obj.results[dataForTime.key] = value;
+              } else if (values !== undefined) {
+                // Percentiles agg currently returns NaN rather than null when none of the docs in the
+                // bucket contain the field used in the aggregation
+                // (see elasticsearch issue https://github.com/elastic/elasticsearch/issues/29066).
+                // Store as null, so values can be handled in the same manner downstream as other aggs
+                // (min, mean, max) which return null.
+                const medianValues = values[ML_MEDIAN_PERCENTS];
+                obj.results[dataForTime.key] = !isNaN(medianValues) ? medianValues : null;
+              } else {
+                obj.results[dataForTime.key] = null;
+              }
+            }
           });
-        }
-        return obj;
-      })
-    );
-}
 
-export interface ScheduledEventsByBucket extends ResultResponse {
-  events: Record<string, any>;
-}
+          return obj;
+        })
+      );
+    },
 
-// Obtains a list of scheduled events by job ID and time.
-// Pass an empty array or ['*'] to search over all job IDs.
-// Returned response contains a events property, which will only
-// contains keys for jobs which have scheduled events for the specified time range.
-export function getScheduledEventsByBucket(
-  jobIds: string[] | undefined,
-  earliestMs: number,
-  latestMs: number,
-  interval: string,
-  maxJobs: number,
-  maxEvents: number
-): Observable<ScheduledEventsByBucket> {
-  const obj: ScheduledEventsByBucket = {
-    success: true,
-    events: {},
-  };
+    getModelPlotOutput(
+      jobId: string,
+      detectorIndex: number,
+      criteriaFields: any[],
+      earliestMs: number,
+      latestMs: number,
+      interval: string,
+      aggType?: { min: any; max: any }
+    ): Observable<ModelPlotOutput> {
+      const obj: ModelPlotOutput = {
+        success: true,
+        results: {},
+      };
+
+      // if an aggType object has been passed in, use it.
+      // otherwise default to min and max aggs for the upper and lower bounds
+      const modelAggs =
+        aggType === undefined
+          ? { max: 'max', min: 'min' }
+          : {
+              max: aggType.max,
+              min: aggType.min,
+            };
+
+      // Build the criteria to use in the bool filter part of the request.
+      // Add criteria for the job ID and time range.
+      const mustCriteria: object[] = [
+        {
+          term: { job_id: jobId },
+        },
+        {
+          range: {
+            timestamp: {
+              gte: earliestMs,
+              lte: latestMs,
+              format: 'epoch_millis',
+            },
+          },
+        },
+      ];
 
-  // Build the criteria to use in the bool filter part of the request.
-  // Adds criteria for the time range plus any specified job IDs.
-  const boolCriteria: any[] = [
-    {
-      range: {
-        timestamp: {
-          gte: earliestMs,
-          lte: latestMs,
-          format: 'epoch_millis',
+      // Add in term queries for each of the specified criteria.
+      _.each(criteriaFields, (criteria) => {
+        mustCriteria.push({
+          term: {
+            [criteria.fieldName]: criteria.fieldValue,
+          },
+        });
+      });
+
+      // Add criteria for the detector index. Results from jobs created before 6.1 will not
+      // contain a detector_index field, so use a should criteria with a 'not exists' check.
+      const shouldCriteria = [
+        {
+          term: { detector_index: detectorIndex },
         },
-      },
-    },
-    {
-      exists: { field: 'scheduled_events' },
-    },
-  ];
-
-  if (jobIds && jobIds.length > 0 && !(jobIds.length === 1 && jobIds[0] === '*')) {
-    let jobIdFilterStr = '';
-    _.each(jobIds, (jobId, i) => {
-      jobIdFilterStr += `${i > 0 ? ' OR ' : ''}job_id:${jobId}`;
-    });
-    boolCriteria.push({
-      query_string: {
-        analyze_wildcard: false,
-        query: jobIdFilterStr,
-      },
-    });
-  }
-
-  return ml
-    .esSearch$({
-      index: ML_RESULTS_INDEX_PATTERN,
-      size: 0,
-      body: {
-        query: {
+        {
           bool: {
-            filter: [
+            must_not: [
               {
-                query_string: {
-                  query: 'result_type:bucket',
-                  analyze_wildcard: false,
-                },
-              },
-              {
-                bool: {
-                  must: boolCriteria,
-                },
+                exists: { field: 'detector_index' },
               },
             ],
           },
         },
-        aggs: {
-          jobs: {
-            terms: {
-              field: 'job_id',
-              min_doc_count: 1,
-              size: maxJobs,
+      ];
+
+      return mlApiServices
+        .esSearch$({
+          index: ML_RESULTS_INDEX_PATTERN,
+          size: 0,
+          body: {
+            query: {
+              bool: {
+                filter: [
+                  {
+                    query_string: {
+                      query: 'result_type:model_plot',
+                      analyze_wildcard: true,
+                    },
+                  },
+                  {
+                    bool: {
+                      must: mustCriteria,
+                      should: shouldCriteria,
+                      minimum_should_match: 1,
+                    },
+                  },
+                ],
+              },
             },
             aggs: {
               times: {
                 date_histogram: {
                   field: 'timestamp',
                   interval,
-                  min_doc_count: 1,
+                  min_doc_count: 0,
                 },
                 aggs: {
-                  events: {
-                    terms: {
-                      field: 'scheduled_events',
-                      size: maxEvents,
+                  actual: {
+                    avg: {
+                      field: 'actual',
+                    },
+                  },
+                  modelUpper: {
+                    [modelAggs.max]: {
+                      field: 'model_upper',
+                    },
+                  },
+                  modelLower: {
+                    [modelAggs.min]: {
+                      field: 'model_lower',
                     },
                   },
                 },
               },
             },
           },
+        })
+        .pipe(
+          map((resp) => {
+            const aggregationsByTime = _.get(resp, ['aggregations', 'times', 'buckets'], []);
+            _.each(aggregationsByTime, (dataForTime: any) => {
+              const time = dataForTime.key;
+              const modelUpper: number | undefined = _.get(dataForTime, ['modelUpper', 'value']);
+              const modelLower: number | undefined = _.get(dataForTime, ['modelLower', 'value']);
+              const actual = _.get(dataForTime, ['actual', 'value']);
+
+              obj.results[time] = {
+                actual,
+                modelUpper:
+                  modelUpper === undefined || isFinite(modelUpper) === false ? null : modelUpper,
+                modelLower:
+                  modelLower === undefined || isFinite(modelLower) === false ? null : modelLower,
+              };
+            });
+
+            return obj;
+          })
+        );
+    },
+
+    // Queries Elasticsearch to obtain the record level results matching the given criteria,
+    // for the specified job(s), time range, and record score threshold.
+    // criteriaFields parameter must be an array, with each object in the array having 'fieldName'
+    // 'fieldValue' properties.
+    // Pass an empty array or ['*'] to search over all job IDs.
+    getRecordsForCriteria(
+      jobIds: string[] | undefined,
+      criteriaFields: CriteriaField[],
+      threshold: any,
+      earliestMs: number,
+      latestMs: number,
+      maxResults: number | undefined
+    ): Observable<RecordsForCriteria> {
+      const obj: RecordsForCriteria = { success: true, records: [] };
+
+      // Build the criteria to use in the bool filter part of the request.
+      // Add criteria for the time range, record score, plus any specified job IDs.
+      const boolCriteria: any[] = [
+        {
+          range: {
+            timestamp: {
+              gte: earliestMs,
+              lte: latestMs,
+              format: 'epoch_millis',
+            },
+          },
         },
-      },
-    })
-    .pipe(
-      map((resp) => {
-        const dataByJobId = _.get(resp, ['aggregations', 'jobs', 'buckets'], []);
-        _.each(dataByJobId, (dataForJob: any) => {
-          const jobId: string = dataForJob.key;
-          const resultsForTime: Record<string, any> = {};
-          const dataByTime = _.get(dataForJob, ['times', 'buckets'], []);
-          _.each(dataByTime, (dataForTime: any) => {
-            const time: string = dataForTime.key;
-            const events: object[] = _.get(dataForTime, ['events', 'buckets']);
-            resultsForTime[time] = _.map(events, 'key');
-          });
-          obj.events[jobId] = resultsForTime;
+        {
+          range: {
+            record_score: {
+              gte: threshold,
+            },
+          },
+        },
+      ];
+
+      if (jobIds && jobIds.length > 0 && !(jobIds.length === 1 && jobIds[0] === '*')) {
+        let jobIdFilterStr = '';
+        _.each(jobIds, (jobId, i) => {
+          if (i > 0) {
+            jobIdFilterStr += ' OR ';
+          }
+          jobIdFilterStr += 'job_id:';
+          jobIdFilterStr += jobId;
+        });
+        boolCriteria.push({
+          query_string: {
+            analyze_wildcard: false,
+            query: jobIdFilterStr,
+          },
         });
+      }
 
-        return obj;
-      })
-    );
-}
+      // Add in term queries for each of the specified criteria.
+      _.each(criteriaFields, (criteria) => {
+        boolCriteria.push({
+          term: {
+            [criteria.fieldName]: criteria.fieldValue,
+          },
+        });
+      });
 
-export function fetchPartitionFieldsValues(
-  jobId: JobId,
-  searchTerm: Dictionary<string>,
-  criteriaFields: Array<{ fieldName: string; fieldValue: any }>,
-  earliestMs: number,
-  latestMs: number
-) {
-  return ml.results.fetchPartitionFieldsValues(
-    jobId,
-    searchTerm,
-    criteriaFields,
-    earliestMs,
-    latestMs
-  );
+      return mlApiServices
+        .esSearch$({
+          index: ML_RESULTS_INDEX_PATTERN,
+          rest_total_hits_as_int: true,
+          size: maxResults !== undefined ? maxResults : 100,
+          body: {
+            query: {
+              bool: {
+                filter: [
+                  {
+                    query_string: {
+                      query: 'result_type:record',
+                      analyze_wildcard: false,
+                    },
+                  },
+                  {
+                    bool: {
+                      must: boolCriteria,
+                    },
+                  },
+                ],
+              },
+            },
+            sort: [{ record_score: { order: 'desc' } }],
+          },
+        })
+        .pipe(
+          map((resp) => {
+            if (resp.hits.total !== 0) {
+              _.each(resp.hits.hits, (hit: any) => {
+                obj.records.push(hit._source);
+              });
+            }
+            return obj;
+          })
+        );
+    },
+
+    // Obtains a list of scheduled events by job ID and time.
+    // Pass an empty array or ['*'] to search over all job IDs.
+    // Returned response contains a events property, which will only
+    // contains keys for jobs which have scheduled events for the specified time range.
+    getScheduledEventsByBucket(
+      jobIds: string[] | undefined,
+      earliestMs: number,
+      latestMs: number,
+      interval: string,
+      maxJobs: number,
+      maxEvents: number
+    ): Observable<ScheduledEventsByBucket> {
+      const obj: ScheduledEventsByBucket = {
+        success: true,
+        events: {},
+      };
+
+      // Build the criteria to use in the bool filter part of the request.
+      // Adds criteria for the time range plus any specified job IDs.
+      const boolCriteria: any[] = [
+        {
+          range: {
+            timestamp: {
+              gte: earliestMs,
+              lte: latestMs,
+              format: 'epoch_millis',
+            },
+          },
+        },
+        {
+          exists: { field: 'scheduled_events' },
+        },
+      ];
+
+      if (jobIds && jobIds.length > 0 && !(jobIds.length === 1 && jobIds[0] === '*')) {
+        let jobIdFilterStr = '';
+        _.each(jobIds, (jobId, i) => {
+          jobIdFilterStr += `${i > 0 ? ' OR ' : ''}job_id:${jobId}`;
+        });
+        boolCriteria.push({
+          query_string: {
+            analyze_wildcard: false,
+            query: jobIdFilterStr,
+          },
+        });
+      }
+
+      return mlApiServices
+        .esSearch$({
+          index: ML_RESULTS_INDEX_PATTERN,
+          size: 0,
+          body: {
+            query: {
+              bool: {
+                filter: [
+                  {
+                    query_string: {
+                      query: 'result_type:bucket',
+                      analyze_wildcard: false,
+                    },
+                  },
+                  {
+                    bool: {
+                      must: boolCriteria,
+                    },
+                  },
+                ],
+              },
+            },
+            aggs: {
+              jobs: {
+                terms: {
+                  field: 'job_id',
+                  min_doc_count: 1,
+                  size: maxJobs,
+                },
+                aggs: {
+                  times: {
+                    date_histogram: {
+                      field: 'timestamp',
+                      interval,
+                      min_doc_count: 1,
+                    },
+                    aggs: {
+                      events: {
+                        terms: {
+                          field: 'scheduled_events',
+                          size: maxEvents,
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        })
+        .pipe(
+          map((resp) => {
+            const dataByJobId = _.get(resp, ['aggregations', 'jobs', 'buckets'], []);
+            _.each(dataByJobId, (dataForJob: any) => {
+              const jobId: string = dataForJob.key;
+              const resultsForTime: Record<string, any> = {};
+              const dataByTime = _.get(dataForJob, ['times', 'buckets'], []);
+              _.each(dataByTime, (dataForTime: any) => {
+                const time: string = dataForTime.key;
+                const events: object[] = _.get(dataForTime, ['events', 'buckets']);
+                resultsForTime[time] = _.map(events, 'key');
+              });
+              obj.events[jobId] = resultsForTime;
+            });
+
+            return obj;
+          })
+        );
+    },
+
+    fetchPartitionFieldsValues(
+      jobId: JobId,
+      searchTerm: Dictionary<string>,
+      criteriaFields: Array<{ fieldName: string; fieldValue: any }>,
+      earliestMs: number,
+      latestMs: number
+    ) {
+      return mlApiServices.results.fetchPartitionFieldsValues(
+        jobId,
+        searchTerm,
+        criteriaFields,
+        earliestMs,
+        latestMs
+      );
+    },
+  };
 }
diff --git a/x-pack/plugins/ml/public/application/services/results_service/results_service.d.ts b/x-pack/plugins/ml/public/application/services/results_service/results_service.d.ts
index 4af08994432bd..1b2c01ab73fce 100644
--- a/x-pack/plugins/ml/public/application/services/results_service/results_service.d.ts
+++ b/x-pack/plugins/ml/public/application/services/results_service/results_service.d.ts
@@ -4,43 +4,49 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export function getScoresByBucket(
-  jobIds: string[],
-  earliestMs: number,
-  latestMs: number,
-  interval: string | number,
-  maxResults: number
-): Promise<any>;
-export function getTopInfluencers(): Promise<any>;
-export function getTopInfluencerValues(): Promise<any>;
-export function getOverallBucketScores(
-  jobIds: any,
-  topN: any,
-  earliestMs: any,
-  latestMs: any,
-  interval?: any
-): Promise<any>;
-export function getInfluencerValueMaxScoreByTime(
-  jobIds: string[],
-  influencerFieldName: string,
-  influencerFieldValues: string[],
-  earliestMs: number,
-  latestMs: number,
-  interval: string,
-  maxResults: number,
-  influencersFilterQuery: any
-): Promise<any>;
-export function getRecordInfluencers(): Promise<any>;
-export function getRecordsForInfluencer(): Promise<any>;
-export function getRecordsForDetector(): Promise<any>;
-export function getRecords(): Promise<any>;
-export function getEventRateData(
-  index: string,
-  query: any,
-  timeFieldName: string,
-  earliestMs: number,
-  latestMs: number,
-  interval: string | number
-): Promise<any>;
-export function getEventDistributionData(): Promise<any>;
-export function getRecordMaxScoreByTime(): Promise<any>;
+import { MlApiServices } from '../ml_api_service';
+
+export function resultsServiceProvider(
+  mlApiServices: MlApiServices
+): {
+  getScoresByBucket(
+    jobIds: string[],
+    earliestMs: number,
+    latestMs: number,
+    interval: string | number,
+    maxResults: number
+  ): Promise<any>;
+  getTopInfluencers(): Promise<any>;
+  getTopInfluencerValues(): Promise<any>;
+  getOverallBucketScores(
+    jobIds: any,
+    topN: any,
+    earliestMs: any,
+    latestMs: any,
+    interval?: any
+  ): Promise<any>;
+  getInfluencerValueMaxScoreByTime(
+    jobIds: string[],
+    influencerFieldName: string,
+    influencerFieldValues: string[],
+    earliestMs: number,
+    latestMs: number,
+    interval: string,
+    maxResults: number,
+    influencersFilterQuery: any
+  ): Promise<any>;
+  getRecordInfluencers(): Promise<any>;
+  getRecordsForInfluencer(): Promise<any>;
+  getRecordsForDetector(): Promise<any>;
+  getRecords(): Promise<any>;
+  getEventRateData(
+    index: string,
+    query: any,
+    timeFieldName: string,
+    earliestMs: number,
+    latestMs: number,
+    interval: string | number
+  ): Promise<any>;
+  getEventDistributionData(): Promise<any>;
+  getRecordMaxScoreByTime(): Promise<any>;
+};
diff --git a/x-pack/plugins/ml/public/application/services/results_service/results_service.js b/x-pack/plugins/ml/public/application/services/results_service/results_service.js
index 4fccc4d789370..9e3fed189b6f4 100644
--- a/x-pack/plugins/ml/public/application/services/results_service/results_service.js
+++ b/x-pack/plugins/ml/public/application/services/results_service/results_service.js
@@ -4,1322 +4,1331 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// Service for carrying out Elasticsearch queries to obtain data for the
-// Ml Results dashboards.
 import _ from 'lodash';
-// import d3 from 'd3';
 
 import { ML_MEDIAN_PERCENTS } from '../../../../common/util/job_utils';
 import { escapeForElasticsearchQuery } from '../../util/string_utils';
 import { ML_RESULTS_INDEX_PATTERN } from '../../../../common/constants/index_patterns';
 
-import { ml } from '../ml_api_service';
-
-// Obtains the maximum bucket anomaly scores by job ID and time.
-// Pass an empty array or ['*'] to search over all job IDs.
-// Returned response contains a results property, with a key for job
-// which has results for the specified time range.
-export function getScoresByBucket(jobIds, earliestMs, latestMs, interval, maxResults) {
-  return new Promise((resolve, reject) => {
-    const obj = {
-      success: true,
-      results: {},
-    };
-
-    // Build the criteria to use in the bool filter part of the request.
-    // Adds criteria for the time range plus any specified job IDs.
-    const boolCriteria = [
-      {
-        range: {
-          timestamp: {
-            gte: earliestMs,
-            lte: latestMs,
-            format: 'epoch_millis',
-          },
-        },
-      },
-    ];
-
-    if (jobIds && jobIds.length > 0 && !(jobIds.length === 1 && jobIds[0] === '*')) {
-      let jobIdFilterStr = '';
-      _.each(jobIds, (jobId, i) => {
-        if (i > 0) {
-          jobIdFilterStr += ' OR ';
-        }
-        jobIdFilterStr += 'job_id:';
-        jobIdFilterStr += jobId;
-      });
-      boolCriteria.push({
-        query_string: {
-          analyze_wildcard: false,
-          query: jobIdFilterStr,
-        },
-      });
-    }
-
-    ml.esSearch({
-      index: ML_RESULTS_INDEX_PATTERN,
-      size: 0,
-      body: {
-        query: {
-          bool: {
-            filter: [
-              {
-                query_string: {
-                  query: 'result_type:bucket',
-                  analyze_wildcard: false,
-                },
-              },
-              {
-                bool: {
-                  must: boolCriteria,
-                },
+/**
+ * Service for carrying out Elasticsearch queries to obtain data for the Ml Results dashboards.
+ */
+export function resultsServiceProvider(mlApiServices) {
+  const SAMPLER_TOP_TERMS_SHARD_SIZE = 20000;
+  const ENTITY_AGGREGATION_SIZE = 10;
+  const AGGREGATION_MIN_DOC_COUNT = 1;
+  const CARDINALITY_PRECISION_THRESHOLD = 100;
+
+  return {
+    // Obtains the maximum bucket anomaly scores by job ID and time.
+    // Pass an empty array or ['*'] to search over all job IDs.
+    // Returned response contains a results property, with a key for job
+    // which has results for the specified time range.
+    getScoresByBucket(jobIds, earliestMs, latestMs, interval, maxResults) {
+      return new Promise((resolve, reject) => {
+        const obj = {
+          success: true,
+          results: {},
+        };
+
+        // Build the criteria to use in the bool filter part of the request.
+        // Adds criteria for the time range plus any specified job IDs.
+        const boolCriteria = [
+          {
+            range: {
+              timestamp: {
+                gte: earliestMs,
+                lte: latestMs,
+                format: 'epoch_millis',
               },
-            ],
+            },
           },
-        },
-        aggs: {
-          jobId: {
-            terms: {
-              field: 'job_id',
-              size: maxResults !== undefined ? maxResults : 5,
-              order: {
-                anomalyScore: 'desc',
-              },
+        ];
+
+        if (jobIds && jobIds.length > 0 && !(jobIds.length === 1 && jobIds[0] === '*')) {
+          let jobIdFilterStr = '';
+          _.each(jobIds, (jobId, i) => {
+            if (i > 0) {
+              jobIdFilterStr += ' OR ';
+            }
+            jobIdFilterStr += 'job_id:';
+            jobIdFilterStr += jobId;
+          });
+          boolCriteria.push({
+            query_string: {
+              analyze_wildcard: false,
+              query: jobIdFilterStr,
             },
-            aggs: {
-              anomalyScore: {
-                max: {
-                  field: 'anomaly_score',
+          });
+        }
+
+        mlApiServices
+          .esSearch({
+            index: ML_RESULTS_INDEX_PATTERN,
+            size: 0,
+            body: {
+              query: {
+                bool: {
+                  filter: [
+                    {
+                      query_string: {
+                        query: 'result_type:bucket',
+                        analyze_wildcard: false,
+                      },
+                    },
+                    {
+                      bool: {
+                        must: boolCriteria,
+                      },
+                    },
+                  ],
                 },
               },
-              byTime: {
-                date_histogram: {
-                  field: 'timestamp',
-                  interval: interval,
-                  min_doc_count: 1,
-                  extended_bounds: {
-                    min: earliestMs,
-                    max: latestMs,
+              aggs: {
+                jobId: {
+                  terms: {
+                    field: 'job_id',
+                    size: maxResults !== undefined ? maxResults : 5,
+                    order: {
+                      anomalyScore: 'desc',
+                    },
                   },
-                },
-                aggs: {
-                  anomalyScore: {
-                    max: {
-                      field: 'anomaly_score',
+                  aggs: {
+                    anomalyScore: {
+                      max: {
+                        field: 'anomaly_score',
+                      },
+                    },
+                    byTime: {
+                      date_histogram: {
+                        field: 'timestamp',
+                        interval: interval,
+                        min_doc_count: 1,
+                        extended_bounds: {
+                          min: earliestMs,
+                          max: latestMs,
+                        },
+                      },
+                      aggs: {
+                        anomalyScore: {
+                          max: {
+                            field: 'anomaly_score',
+                          },
+                        },
+                      },
                     },
                   },
                 },
               },
             },
+          })
+          .then((resp) => {
+            const dataByJobId = _.get(resp, ['aggregations', 'jobId', 'buckets'], []);
+            _.each(dataByJobId, (dataForJob) => {
+              const jobId = dataForJob.key;
+
+              const resultsForTime = {};
+
+              const dataByTime = _.get(dataForJob, ['byTime', 'buckets'], []);
+              _.each(dataByTime, (dataForTime) => {
+                const value = _.get(dataForTime, ['anomalyScore', 'value']);
+                if (value !== undefined) {
+                  const time = dataForTime.key;
+                  resultsForTime[time] = _.get(dataForTime, ['anomalyScore', 'value']);
+                }
+              });
+              obj.results[jobId] = resultsForTime;
+            });
+
+            resolve(obj);
+          })
+          .catch((resp) => {
+            reject(resp);
+          });
+      });
+    },
+
+    // Obtains the top influencers, by maximum influencer score, for the specified index, time range and job ID(s).
+    // Pass an empty array or ['*'] to search over all job IDs.
+    // An optional array of influencers may be supplied, with each object in the array having 'fieldName'
+    // and 'fieldValue' properties, to limit data to the supplied list of influencers.
+    // Returned response contains an influencers property, with a key for each of the influencer field names,
+    // whose value is an array of objects containing influencerFieldValue, maxAnomalyScore and sumAnomalyScore keys.
+    getTopInfluencers(
+      jobIds,
+      earliestMs,
+      latestMs,
+      maxFieldValues = 10,
+      influencers = [],
+      influencersFilterQuery
+    ) {
+      return new Promise((resolve, reject) => {
+        const obj = { success: true, influencers: {} };
+
+        // Build the criteria to use in the bool filter part of the request.
+        // Adds criteria for the time range plus any specified job IDs.
+        const boolCriteria = [
+          {
+            range: {
+              timestamp: {
+                gte: earliestMs,
+                lte: latestMs,
+                format: 'epoch_millis',
+              },
+            },
           },
-        },
-      },
-    })
-      .then((resp) => {
-        const dataByJobId = _.get(resp, ['aggregations', 'jobId', 'buckets'], []);
-        _.each(dataByJobId, (dataForJob) => {
-          const jobId = dataForJob.key;
-
-          const resultsForTime = {};
-
-          const dataByTime = _.get(dataForJob, ['byTime', 'buckets'], []);
-          _.each(dataByTime, (dataForTime) => {
-            const value = _.get(dataForTime, ['anomalyScore', 'value']);
-            if (value !== undefined) {
-              const time = dataForTime.key;
-              resultsForTime[time] = _.get(dataForTime, ['anomalyScore', 'value']);
+          {
+            range: {
+              influencer_score: {
+                gt: 0,
+              },
+            },
+          },
+        ];
+
+        if (jobIds && jobIds.length > 0 && !(jobIds.length === 1 && jobIds[0] === '*')) {
+          let jobIdFilterStr = '';
+          _.each(jobIds, (jobId, i) => {
+            if (i > 0) {
+              jobIdFilterStr += ' OR ';
             }
+            jobIdFilterStr += 'job_id:';
+            jobIdFilterStr += jobId;
           });
-          obj.results[jobId] = resultsForTime;
-        });
+          boolCriteria.push({
+            query_string: {
+              analyze_wildcard: false,
+              query: jobIdFilterStr,
+            },
+          });
+        }
 
-        resolve(obj);
-      })
-      .catch((resp) => {
-        reject(resp);
-      });
-  });
-}
+        if (influencersFilterQuery !== undefined) {
+          boolCriteria.push(influencersFilterQuery);
+        }
 
-// Obtains the top influencers, by maximum influencer score, for the specified index, time range and job ID(s).
-// Pass an empty array or ['*'] to search over all job IDs.
-// An optional array of influencers may be supplied, with each object in the array having 'fieldName'
-// and 'fieldValue' properties, to limit data to the supplied list of influencers.
-// Returned response contains an influencers property, with a key for each of the influencer field names,
-// whose value is an array of objects containing influencerFieldValue, maxAnomalyScore and sumAnomalyScore keys.
-export function getTopInfluencers(
-  jobIds,
-  earliestMs,
-  latestMs,
-  maxFieldValues = 10,
-  influencers = [],
-  influencersFilterQuery
-) {
-  return new Promise((resolve, reject) => {
-    const obj = { success: true, influencers: {} };
-
-    // Build the criteria to use in the bool filter part of the request.
-    // Adds criteria for the time range plus any specified job IDs.
-    const boolCriteria = [
-      {
-        range: {
-          timestamp: {
-            gte: earliestMs,
-            lte: latestMs,
-            format: 'epoch_millis',
-          },
-        },
-      },
-      {
-        range: {
-          influencer_score: {
-            gt: 0,
-          },
-        },
-      },
-    ];
-
-    if (jobIds && jobIds.length > 0 && !(jobIds.length === 1 && jobIds[0] === '*')) {
-      let jobIdFilterStr = '';
-      _.each(jobIds, (jobId, i) => {
-        if (i > 0) {
-          jobIdFilterStr += ' OR ';
+        // Add a should query to filter for each of the specified influencers.
+        if (influencers.length > 0) {
+          boolCriteria.push({
+            bool: {
+              should: influencers.map((influencer) => {
+                return {
+                  bool: {
+                    must: [
+                      { term: { influencer_field_name: influencer.fieldName } },
+                      { term: { influencer_field_value: influencer.fieldValue } },
+                    ],
+                  },
+                };
+              }),
+              minimum_should_match: 1,
+            },
+          });
         }
-        jobIdFilterStr += 'job_id:';
-        jobIdFilterStr += jobId;
-      });
-      boolCriteria.push({
-        query_string: {
-          analyze_wildcard: false,
-          query: jobIdFilterStr,
-        },
-      });
-    }
-
-    if (influencersFilterQuery !== undefined) {
-      boolCriteria.push(influencersFilterQuery);
-    }
-
-    // Add a should query to filter for each of the specified influencers.
-    if (influencers.length > 0) {
-      boolCriteria.push({
-        bool: {
-          should: influencers.map((influencer) => {
-            return {
-              bool: {
-                must: [
-                  { term: { influencer_field_name: influencer.fieldName } },
-                  { term: { influencer_field_value: influencer.fieldValue } },
-                ],
-              },
-            };
-          }),
-          minimum_should_match: 1,
-        },
-      });
-    }
-
-    ml.esSearch({
-      index: ML_RESULTS_INDEX_PATTERN,
-      size: 0,
-      body: {
-        query: {
-          bool: {
-            filter: [
-              {
-                query_string: {
-                  query: 'result_type:influencer',
-                  analyze_wildcard: false,
-                },
-              },
-              {
+
+        mlApiServices
+          .esSearch({
+            index: ML_RESULTS_INDEX_PATTERN,
+            size: 0,
+            body: {
+              query: {
                 bool: {
-                  must: boolCriteria,
-                },
-              },
-            ],
-          },
-        },
-        aggs: {
-          influencerFieldNames: {
-            terms: {
-              field: 'influencer_field_name',
-              size: 5,
-              order: {
-                maxAnomalyScore: 'desc',
-              },
-            },
-            aggs: {
-              maxAnomalyScore: {
-                max: {
-                  field: 'influencer_score',
+                  filter: [
+                    {
+                      query_string: {
+                        query: 'result_type:influencer',
+                        analyze_wildcard: false,
+                      },
+                    },
+                    {
+                      bool: {
+                        must: boolCriteria,
+                      },
+                    },
+                  ],
                 },
               },
-              influencerFieldValues: {
-                terms: {
-                  field: 'influencer_field_value',
-                  size: maxFieldValues,
-                  order: {
-                    maxAnomalyScore: 'desc',
-                  },
-                },
-                aggs: {
-                  maxAnomalyScore: {
-                    max: {
-                      field: 'influencer_score',
+              aggs: {
+                influencerFieldNames: {
+                  terms: {
+                    field: 'influencer_field_name',
+                    size: 5,
+                    order: {
+                      maxAnomalyScore: 'desc',
                     },
                   },
-                  sumAnomalyScore: {
-                    sum: {
-                      field: 'influencer_score',
+                  aggs: {
+                    maxAnomalyScore: {
+                      max: {
+                        field: 'influencer_score',
+                      },
+                    },
+                    influencerFieldValues: {
+                      terms: {
+                        field: 'influencer_field_value',
+                        size: maxFieldValues,
+                        order: {
+                          maxAnomalyScore: 'desc',
+                        },
+                      },
+                      aggs: {
+                        maxAnomalyScore: {
+                          max: {
+                            field: 'influencer_score',
+                          },
+                        },
+                        sumAnomalyScore: {
+                          sum: {
+                            field: 'influencer_score',
+                          },
+                        },
+                      },
                     },
                   },
                 },
               },
             },
-          },
-        },
-      },
-    })
-      .then((resp) => {
-        const fieldNameBuckets = _.get(
-          resp,
-          ['aggregations', 'influencerFieldNames', 'buckets'],
-          []
-        );
-        _.each(fieldNameBuckets, (nameBucket) => {
-          const fieldName = nameBucket.key;
-          const fieldValues = [];
-
-          const fieldValueBuckets = _.get(nameBucket, ['influencerFieldValues', 'buckets'], []);
-          _.each(fieldValueBuckets, (valueBucket) => {
-            const fieldValueResult = {
-              influencerFieldValue: valueBucket.key,
-              maxAnomalyScore: valueBucket.maxAnomalyScore.value,
-              sumAnomalyScore: valueBucket.sumAnomalyScore.value,
-            };
-            fieldValues.push(fieldValueResult);
-          });
-
-          obj.influencers[fieldName] = fieldValues;
-        });
-
-        resolve(obj);
-      })
-      .catch((resp) => {
-        reject(resp);
-      });
-  });
-}
+          })
+          .then((resp) => {
+            const fieldNameBuckets = _.get(
+              resp,
+              ['aggregations', 'influencerFieldNames', 'buckets'],
+              []
+            );
+            _.each(fieldNameBuckets, (nameBucket) => {
+              const fieldName = nameBucket.key;
+              const fieldValues = [];
+
+              const fieldValueBuckets = _.get(nameBucket, ['influencerFieldValues', 'buckets'], []);
+              _.each(fieldValueBuckets, (valueBucket) => {
+                const fieldValueResult = {
+                  influencerFieldValue: valueBucket.key,
+                  maxAnomalyScore: valueBucket.maxAnomalyScore.value,
+                  sumAnomalyScore: valueBucket.sumAnomalyScore.value,
+                };
+                fieldValues.push(fieldValueResult);
+              });
+
+              obj.influencers[fieldName] = fieldValues;
+            });
 
-// Obtains the top influencer field values, by maximum anomaly score, for a
-// particular index, field name and job ID(s).
-// Pass an empty array or ['*'] to search over all job IDs.
-// Returned response contains a results property, which is an array of objects
-// containing influencerFieldValue, maxAnomalyScore and sumAnomalyScore keys.
-export function getTopInfluencerValues(
-  jobIds,
-  influencerFieldName,
-  earliestMs,
-  latestMs,
-  maxResults
-) {
-  return new Promise((resolve, reject) => {
-    const obj = { success: true, results: [] };
-
-    // Build the criteria to use in the bool filter part of the request.
-    // Adds criteria for the time range plus any specified job IDs.
-    const boolCriteria = [
-      {
-        range: {
-          timestamp: {
-            gte: earliestMs,
-            lte: latestMs,
-            format: 'epoch_millis',
-          },
-        },
-      },
-    ];
-
-    if (jobIds && jobIds.length > 0 && !(jobIds.length === 1 && jobIds[0] === '*')) {
-      let jobIdFilterStr = '';
-      _.each(jobIds, (jobId, i) => {
-        if (i > 0) {
-          jobIdFilterStr += ' OR ';
-        }
-        jobIdFilterStr += 'job_id:';
-        jobIdFilterStr += jobId;
-      });
-      boolCriteria.push({
-        query_string: {
-          analyze_wildcard: false,
-          query: jobIdFilterStr,
-        },
+            resolve(obj);
+          })
+          .catch((resp) => {
+            reject(resp);
+          });
       });
-    }
-
-    ml.esSearch({
-      index: ML_RESULTS_INDEX_PATTERN,
-      size: 0,
-      body: {
-        query: {
-          bool: {
-            filter: [
-              {
-                query_string: {
-                  query: `result_type:influencer AND influencer_field_name: ${escapeForElasticsearchQuery(
-                    influencerFieldName
-                  )}`,
-                  analyze_wildcard: false,
-                },
+    },
+
+    // Obtains the top influencer field values, by maximum anomaly score, for a
+    // particular index, field name and job ID(s).
+    // Pass an empty array or ['*'] to search over all job IDs.
+    // Returned response contains a results property, which is an array of objects
+    // containing influencerFieldValue, maxAnomalyScore and sumAnomalyScore keys.
+    getTopInfluencerValues(jobIds, influencerFieldName, earliestMs, latestMs, maxResults) {
+      return new Promise((resolve, reject) => {
+        const obj = { success: true, results: [] };
+
+        // Build the criteria to use in the bool filter part of the request.
+        // Adds criteria for the time range plus any specified job IDs.
+        const boolCriteria = [
+          {
+            range: {
+              timestamp: {
+                gte: earliestMs,
+                lte: latestMs,
+                format: 'epoch_millis',
               },
-              {
-                bool: {
-                  must: boolCriteria,
-                },
-              },
-            ],
+            },
           },
-        },
-        aggs: {
-          influencerFieldValues: {
-            terms: {
-              field: 'influencer_field_value',
-              size: maxResults !== undefined ? maxResults : 2,
-              order: {
-                maxAnomalyScore: 'desc',
-              },
+        ];
+
+        if (jobIds && jobIds.length > 0 && !(jobIds.length === 1 && jobIds[0] === '*')) {
+          let jobIdFilterStr = '';
+          _.each(jobIds, (jobId, i) => {
+            if (i > 0) {
+              jobIdFilterStr += ' OR ';
+            }
+            jobIdFilterStr += 'job_id:';
+            jobIdFilterStr += jobId;
+          });
+          boolCriteria.push({
+            query_string: {
+              analyze_wildcard: false,
+              query: jobIdFilterStr,
             },
-            aggs: {
-              maxAnomalyScore: {
-                max: {
-                  field: 'influencer_score',
+          });
+        }
+
+        mlApiServices
+          .esSearch({
+            index: ML_RESULTS_INDEX_PATTERN,
+            size: 0,
+            body: {
+              query: {
+                bool: {
+                  filter: [
+                    {
+                      query_string: {
+                        query: `result_type:influencer AND influencer_field_name: ${escapeForElasticsearchQuery(
+                          influencerFieldName
+                        )}`,
+                        analyze_wildcard: false,
+                      },
+                    },
+                    {
+                      bool: {
+                        must: boolCriteria,
+                      },
+                    },
+                  ],
                 },
               },
-              sumAnomalyScore: {
-                sum: {
-                  field: 'influencer_score',
+              aggs: {
+                influencerFieldValues: {
+                  terms: {
+                    field: 'influencer_field_value',
+                    size: maxResults !== undefined ? maxResults : 2,
+                    order: {
+                      maxAnomalyScore: 'desc',
+                    },
+                  },
+                  aggs: {
+                    maxAnomalyScore: {
+                      max: {
+                        field: 'influencer_score',
+                      },
+                    },
+                    sumAnomalyScore: {
+                      sum: {
+                        field: 'influencer_score',
+                      },
+                    },
+                  },
                 },
               },
             },
-          },
-        },
-      },
-    })
-      .then((resp) => {
-        const buckets = _.get(resp, ['aggregations', 'influencerFieldValues', 'buckets'], []);
-        _.each(buckets, (bucket) => {
-          const result = {
-            influencerFieldValue: bucket.key,
-            maxAnomalyScore: bucket.maxAnomalyScore.value,
-            sumAnomalyScore: bucket.sumAnomalyScore.value,
-          };
-          obj.results.push(result);
-        });
+          })
+          .then((resp) => {
+            const buckets = _.get(resp, ['aggregations', 'influencerFieldValues', 'buckets'], []);
+            _.each(buckets, (bucket) => {
+              const result = {
+                influencerFieldValue: bucket.key,
+                maxAnomalyScore: bucket.maxAnomalyScore.value,
+                sumAnomalyScore: bucket.sumAnomalyScore.value,
+              };
+              obj.results.push(result);
+            });
 
-        resolve(obj);
-      })
-      .catch((resp) => {
-        reject(resp);
+            resolve(obj);
+          })
+          .catch((resp) => {
+            reject(resp);
+          });
       });
-  });
-}
-
-// Obtains the overall bucket scores for the specified job ID(s).
-// Pass ['*'] to search over all job IDs.
-// Returned response contains a results property as an object of max score by time.
-export function getOverallBucketScores(jobIds, topN, earliestMs, latestMs, interval) {
-  return new Promise((resolve, reject) => {
-    const obj = { success: true, results: {} };
-
-    ml.overallBuckets({
-      jobId: jobIds,
-      topN: topN,
-      bucketSpan: interval,
-      start: earliestMs,
-      end: latestMs,
-    })
-      .then((resp) => {
-        const dataByTime = _.get(resp, ['overall_buckets'], []);
-        _.each(dataByTime, (dataForTime) => {
-          const value = _.get(dataForTime, ['overall_score']);
-          if (value !== undefined) {
-            obj.results[dataForTime.timestamp] = value;
-          }
-        });
+    },
+
+    // Obtains the overall bucket scores for the specified job ID(s).
+    // Pass ['*'] to search over all job IDs.
+    // Returned response contains a results property as an object of max score by time.
+    getOverallBucketScores(jobIds, topN, earliestMs, latestMs, interval) {
+      return new Promise((resolve, reject) => {
+        const obj = { success: true, results: {} };
+
+        mlApiServices
+          .overallBuckets({
+            jobId: jobIds,
+            topN: topN,
+            bucketSpan: interval,
+            start: earliestMs,
+            end: latestMs,
+          })
+          .then((resp) => {
+            const dataByTime = _.get(resp, ['overall_buckets'], []);
+            _.each(dataByTime, (dataForTime) => {
+              const value = _.get(dataForTime, ['overall_score']);
+              if (value !== undefined) {
+                obj.results[dataForTime.timestamp] = value;
+              }
+            });
 
-        resolve(obj);
-      })
-      .catch((resp) => {
-        reject(resp);
+            resolve(obj);
+          })
+          .catch((resp) => {
+            reject(resp);
+          });
       });
-  });
-}
-
-// Obtains the maximum score by influencer_field_value and by time for the specified job ID(s)
-// (pass an empty array or ['*'] to search over all job IDs), and specified influencer field
-// values (pass an empty array to search over all field values).
-// Returned response contains a results property with influencer field values keyed
-// against max score by time.
-export function getInfluencerValueMaxScoreByTime(
-  jobIds,
-  influencerFieldName,
-  influencerFieldValues,
-  earliestMs,
-  latestMs,
-  interval,
-  maxResults,
-  influencersFilterQuery
-) {
-  return new Promise((resolve, reject) => {
-    const obj = { success: true, results: {} };
-
-    // Build the criteria to use in the bool filter part of the request.
-    // Adds criteria for the time range plus any specified job IDs.
-    const boolCriteria = [
-      {
-        range: {
-          timestamp: {
-            gte: earliestMs,
-            lte: latestMs,
-            format: 'epoch_millis',
+    },
+
+    // Obtains the maximum score by influencer_field_value and by time for the specified job ID(s)
+    // (pass an empty array or ['*'] to search over all job IDs), and specified influencer field
+    // values (pass an empty array to search over all field values).
+    // Returned response contains a results property with influencer field values keyed
+    // against max score by time.
+    getInfluencerValueMaxScoreByTime(
+      jobIds,
+      influencerFieldName,
+      influencerFieldValues,
+      earliestMs,
+      latestMs,
+      interval,
+      maxResults,
+      influencersFilterQuery
+    ) {
+      return new Promise((resolve, reject) => {
+        const obj = { success: true, results: {} };
+
+        // Build the criteria to use in the bool filter part of the request.
+        // Adds criteria for the time range plus any specified job IDs.
+        const boolCriteria = [
+          {
+            range: {
+              timestamp: {
+                gte: earliestMs,
+                lte: latestMs,
+                format: 'epoch_millis',
+              },
+            },
           },
-        },
-      },
-      {
-        range: {
-          influencer_score: {
-            gt: 0,
+          {
+            range: {
+              influencer_score: {
+                gt: 0,
+              },
+            },
           },
-        },
-      },
-    ];
-
-    if (jobIds && jobIds.length > 0 && !(jobIds.length === 1 && jobIds[0] === '*')) {
-      let jobIdFilterStr = '';
-      _.each(jobIds, (jobId, i) => {
-        if (i > 0) {
-          jobIdFilterStr += ' OR ';
-        }
-        jobIdFilterStr += `job_id:${jobId}`;
-      });
-      boolCriteria.push({
-        query_string: {
-          analyze_wildcard: false,
-          query: jobIdFilterStr,
-        },
-      });
-    }
+        ];
 
-    if (influencersFilterQuery !== undefined) {
-      boolCriteria.push(influencersFilterQuery);
-    }
+        if (jobIds && jobIds.length > 0 && !(jobIds.length === 1 && jobIds[0] === '*')) {
+          let jobIdFilterStr = '';
+          _.each(jobIds, (jobId, i) => {
+            if (i > 0) {
+              jobIdFilterStr += ' OR ';
+            }
+            jobIdFilterStr += `job_id:${jobId}`;
+          });
+          boolCriteria.push({
+            query_string: {
+              analyze_wildcard: false,
+              query: jobIdFilterStr,
+            },
+          });
+        }
 
-    if (influencerFieldValues && influencerFieldValues.length > 0) {
-      let influencerFilterStr = '';
-      _.each(influencerFieldValues, (value, i) => {
-        if (i > 0) {
-          influencerFilterStr += ' OR ';
+        if (influencersFilterQuery !== undefined) {
+          boolCriteria.push(influencersFilterQuery);
         }
-        if (value.trim().length > 0) {
-          influencerFilterStr += `influencer_field_value:${escapeForElasticsearchQuery(value)}`;
-        } else {
-          // Wrap whitespace influencer field values in quotes for the query_string query.
-          influencerFilterStr += `influencer_field_value:"${value}"`;
+
+        if (influencerFieldValues && influencerFieldValues.length > 0) {
+          let influencerFilterStr = '';
+          _.each(influencerFieldValues, (value, i) => {
+            if (i > 0) {
+              influencerFilterStr += ' OR ';
+            }
+            if (value.trim().length > 0) {
+              influencerFilterStr += `influencer_field_value:${escapeForElasticsearchQuery(value)}`;
+            } else {
+              // Wrap whitespace influencer field values in quotes for the query_string query.
+              influencerFilterStr += `influencer_field_value:"${value}"`;
+            }
+          });
+          boolCriteria.push({
+            query_string: {
+              analyze_wildcard: false,
+              query: influencerFilterStr,
+            },
+          });
         }
-      });
-      boolCriteria.push({
-        query_string: {
-          analyze_wildcard: false,
-          query: influencerFilterStr,
-        },
-      });
-    }
-
-    ml.esSearch({
-      index: ML_RESULTS_INDEX_PATTERN,
-      size: 0,
-      body: {
-        query: {
-          bool: {
-            filter: [
-              {
-                query_string: {
-                  query: `result_type:influencer AND influencer_field_name: ${escapeForElasticsearchQuery(
-                    influencerFieldName
-                  )}`,
-                  analyze_wildcard: false,
+
+        mlApiServices
+          .esSearch({
+            index: ML_RESULTS_INDEX_PATTERN,
+            size: 0,
+            body: {
+              query: {
+                bool: {
+                  filter: [
+                    {
+                      query_string: {
+                        query: `result_type:influencer AND influencer_field_name: ${escapeForElasticsearchQuery(
+                          influencerFieldName
+                        )}`,
+                        analyze_wildcard: false,
+                      },
+                    },
+                    {
+                      bool: {
+                        must: boolCriteria,
+                      },
+                    },
+                  ],
+                },
+              },
+              aggs: {
+                influencerFieldValues: {
+                  terms: {
+                    field: 'influencer_field_value',
+                    size: maxResults !== undefined ? maxResults : 10,
+                    order: {
+                      maxAnomalyScore: 'desc',
+                    },
+                  },
+                  aggs: {
+                    maxAnomalyScore: {
+                      max: {
+                        field: 'influencer_score',
+                      },
+                    },
+                    byTime: {
+                      date_histogram: {
+                        field: 'timestamp',
+                        interval,
+                        min_doc_count: 1,
+                      },
+                      aggs: {
+                        maxAnomalyScore: {
+                          max: {
+                            field: 'influencer_score',
+                          },
+                        },
+                      },
+                    },
+                  },
                 },
               },
-              {
+            },
+          })
+          .then((resp) => {
+            const fieldValueBuckets = _.get(
+              resp,
+              ['aggregations', 'influencerFieldValues', 'buckets'],
+              []
+            );
+            _.each(fieldValueBuckets, (valueBucket) => {
+              const fieldValue = valueBucket.key;
+              const fieldValues = {};
+
+              const timeBuckets = _.get(valueBucket, ['byTime', 'buckets'], []);
+              _.each(timeBuckets, (timeBucket) => {
+                const time = timeBucket.key;
+                const score = timeBucket.maxAnomalyScore.value;
+                fieldValues[time] = score;
+              });
+
+              obj.results[fieldValue] = fieldValues;
+            });
+
+            resolve(obj);
+          })
+          .catch((resp) => {
+            reject(resp);
+          });
+      });
+    },
+
+    // Queries Elasticsearch to obtain record level results containing the influencers
+    // for the specified job(s), record score threshold, and time range.
+    // Pass an empty array or ['*'] to search over all job IDs.
+    // Returned response contains a records property, with each record containing
+    // only the fields job_id, detector_index, record_score and influencers.
+    getRecordInfluencers(jobIds, threshold, earliestMs, latestMs, maxResults) {
+      return new Promise((resolve, reject) => {
+        const obj = { success: true, records: [] };
+
+        // Build the criteria to use in the bool filter part of the request.
+        // Adds criteria for the existence of the nested influencers field, time range,
+        // record score, plus any specified job IDs.
+        const boolCriteria = [
+          {
+            nested: {
+              path: 'influencers',
+              query: {
                 bool: {
-                  must: boolCriteria,
+                  must: [
+                    {
+                      exists: { field: 'influencers' },
+                    },
+                  ],
                 },
               },
-            ],
+            },
           },
-        },
-        aggs: {
-          influencerFieldValues: {
-            terms: {
-              field: 'influencer_field_value',
-              size: maxResults !== undefined ? maxResults : 10,
-              order: {
-                maxAnomalyScore: 'desc',
+          {
+            range: {
+              timestamp: {
+                gte: earliestMs,
+                lte: latestMs,
+                format: 'epoch_millis',
               },
             },
-            aggs: {
-              maxAnomalyScore: {
-                max: {
-                  field: 'influencer_score',
-                },
+          },
+          {
+            range: {
+              record_score: {
+                gte: threshold,
               },
-              byTime: {
-                date_histogram: {
-                  field: 'timestamp',
-                  interval,
-                  min_doc_count: 1,
-                },
-                aggs: {
-                  maxAnomalyScore: {
-                    max: {
-                      field: 'influencer_score',
+            },
+          },
+        ];
+
+        if (jobIds && jobIds.length > 0 && !(jobIds.length === 1 && jobIds[0] === '*')) {
+          let jobIdFilterStr = '';
+          _.each(jobIds, (jobId, i) => {
+            if (i > 0) {
+              jobIdFilterStr += ' OR ';
+            }
+            jobIdFilterStr += 'job_id:';
+            jobIdFilterStr += jobId;
+          });
+          boolCriteria.push({
+            query_string: {
+              analyze_wildcard: false,
+              query: jobIdFilterStr,
+            },
+          });
+        }
+
+        mlApiServices
+          .esSearch({
+            index: ML_RESULTS_INDEX_PATTERN,
+            size: maxResults !== undefined ? maxResults : 100,
+            rest_total_hits_as_int: true,
+            body: {
+              _source: ['job_id', 'detector_index', 'influencers', 'record_score'],
+              query: {
+                bool: {
+                  filter: [
+                    {
+                      query_string: {
+                        query: 'result_type:record',
+                        analyze_wildcard: false,
+                      },
                     },
-                  },
+                    {
+                      bool: {
+                        must: boolCriteria,
+                      },
+                    },
+                  ],
                 },
               },
+              sort: [{ record_score: { order: 'desc' } }],
             },
-          },
-        },
-      },
-    })
-      .then((resp) => {
-        const fieldValueBuckets = _.get(
-          resp,
-          ['aggregations', 'influencerFieldValues', 'buckets'],
-          []
-        );
-        _.each(fieldValueBuckets, (valueBucket) => {
-          const fieldValue = valueBucket.key;
-          const fieldValues = {};
-
-          const timeBuckets = _.get(valueBucket, ['byTime', 'buckets'], []);
-          _.each(timeBuckets, (timeBucket) => {
-            const time = timeBucket.key;
-            const score = timeBucket.maxAnomalyScore.value;
-            fieldValues[time] = score;
+          })
+          .then((resp) => {
+            if (resp.hits.total !== 0) {
+              _.each(resp.hits.hits, (hit) => {
+                obj.records.push(hit._source);
+              });
+            }
+            resolve(obj);
+          })
+          .catch((resp) => {
+            reject(resp);
           });
+      });
+    },
+
+    // Queries Elasticsearch to obtain the record level results containing the specified influencer(s),
+    // for the specified job(s), time range, and record score threshold.
+    // influencers parameter must be an array, with each object in the array having 'fieldName'
+    // 'fieldValue' properties. The influencer array uses 'should' for the nested bool query,
+    // so this returns record level results which have at least one of the influencers.
+    // Pass an empty array or ['*'] to search over all job IDs.
+    getRecordsForInfluencer(
+      jobIds,
+      influencers,
+      threshold,
+      earliestMs,
+      latestMs,
+      maxResults,
+      influencersFilterQuery
+    ) {
+      return new Promise((resolve, reject) => {
+        const obj = { success: true, records: [] };
+
+        // Build the criteria to use in the bool filter part of the request.
+        // Add criteria for the time range, record score, plus any specified job IDs.
+        const boolCriteria = [
+          {
+            range: {
+              timestamp: {
+                gte: earliestMs,
+                lte: latestMs,
+                format: 'epoch_millis',
+              },
+            },
+          },
+          {
+            range: {
+              record_score: {
+                gte: threshold,
+              },
+            },
+          },
+        ];
 
-          obj.results[fieldValue] = fieldValues;
-        });
+        if (jobIds && jobIds.length > 0 && !(jobIds.length === 1 && jobIds[0] === '*')) {
+          let jobIdFilterStr = '';
+          _.each(jobIds, (jobId, i) => {
+            if (i > 0) {
+              jobIdFilterStr += ' OR ';
+            }
+            jobIdFilterStr += 'job_id:';
+            jobIdFilterStr += jobId;
+          });
+          boolCriteria.push({
+            query_string: {
+              analyze_wildcard: false,
+              query: jobIdFilterStr,
+            },
+          });
+        }
 
-        resolve(obj);
-      })
-      .catch((resp) => {
-        reject(resp);
-      });
-  });
-}
+        if (influencersFilterQuery !== undefined) {
+          boolCriteria.push(influencersFilterQuery);
+        }
 
-// Queries Elasticsearch to obtain record level results containing the influencers
-// for the specified job(s), record score threshold, and time range.
-// Pass an empty array or ['*'] to search over all job IDs.
-// Returned response contains a records property, with each record containing
-// only the fields job_id, detector_index, record_score and influencers.
-export function getRecordInfluencers(jobIds, threshold, earliestMs, latestMs, maxResults) {
-  return new Promise((resolve, reject) => {
-    const obj = { success: true, records: [] };
-
-    // Build the criteria to use in the bool filter part of the request.
-    // Adds criteria for the existence of the nested influencers field, time range,
-    // record score, plus any specified job IDs.
-    const boolCriteria = [
-      {
-        nested: {
-          path: 'influencers',
-          query: {
+        // Add a nested query to filter for each of the specified influencers.
+        if (influencers.length > 0) {
+          boolCriteria.push({
             bool: {
-              must: [
-                {
-                  exists: { field: 'influencers' },
+              should: influencers.map((influencer) => {
+                return {
+                  nested: {
+                    path: 'influencers',
+                    query: {
+                      bool: {
+                        must: [
+                          {
+                            match: {
+                              'influencers.influencer_field_name': influencer.fieldName,
+                            },
+                          },
+                          {
+                            match: {
+                              'influencers.influencer_field_values': influencer.fieldValue,
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  },
+                };
+              }),
+              minimum_should_match: 1,
+            },
+          });
+        }
+
+        mlApiServices
+          .esSearch({
+            index: ML_RESULTS_INDEX_PATTERN,
+            size: maxResults !== undefined ? maxResults : 100,
+            rest_total_hits_as_int: true,
+            body: {
+              query: {
+                bool: {
+                  filter: [
+                    {
+                      query_string: {
+                        query: 'result_type:record',
+                        analyze_wildcard: false,
+                      },
+                    },
+                    {
+                      bool: {
+                        must: boolCriteria,
+                      },
+                    },
+                  ],
                 },
-              ],
+              },
+              sort: [{ record_score: { order: 'desc' } }],
+            },
+          })
+          .then((resp) => {
+            if (resp.hits.total !== 0) {
+              _.each(resp.hits.hits, (hit) => {
+                obj.records.push(hit._source);
+              });
+            }
+            resolve(obj);
+          })
+          .catch((resp) => {
+            reject(resp);
+          });
+      });
+    },
+
+    // Queries Elasticsearch to obtain the record level results for the specified job and detector,
+    // time range, record score threshold, and whether to only return results containing influencers.
+    // An additional, optional influencer field name and value may also be provided.
+    getRecordsForDetector(
+      jobId,
+      detectorIndex,
+      checkForInfluencers,
+      influencerFieldName,
+      influencerFieldValue,
+      threshold,
+      earliestMs,
+      latestMs,
+      maxResults
+    ) {
+      return new Promise((resolve, reject) => {
+        const obj = { success: true, records: [] };
+
+        // Build the criteria to use in the bool filter part of the request.
+        // Add criteria for the time range, record score, plus any specified job IDs.
+        const boolCriteria = [
+          {
+            range: {
+              timestamp: {
+                gte: earliestMs,
+                lte: latestMs,
+                format: 'epoch_millis',
+              },
             },
           },
-        },
-      },
-      {
-        range: {
-          timestamp: {
-            gte: earliestMs,
-            lte: latestMs,
-            format: 'epoch_millis',
+          {
+            term: { job_id: jobId },
           },
-        },
-      },
-      {
-        range: {
-          record_score: {
-            gte: threshold,
+          {
+            term: { detector_index: detectorIndex },
           },
-        },
-      },
-    ];
-
-    if (jobIds && jobIds.length > 0 && !(jobIds.length === 1 && jobIds[0] === '*')) {
-      let jobIdFilterStr = '';
-      _.each(jobIds, (jobId, i) => {
-        if (i > 0) {
-          jobIdFilterStr += ' OR ';
-        }
-        jobIdFilterStr += 'job_id:';
-        jobIdFilterStr += jobId;
-      });
-      boolCriteria.push({
-        query_string: {
-          analyze_wildcard: false,
-          query: jobIdFilterStr,
-        },
-      });
-    }
-
-    ml.esSearch({
-      index: ML_RESULTS_INDEX_PATTERN,
-      size: maxResults !== undefined ? maxResults : 100,
-      rest_total_hits_as_int: true,
-      body: {
-        _source: ['job_id', 'detector_index', 'influencers', 'record_score'],
-        query: {
-          bool: {
-            filter: [
-              {
-                query_string: {
-                  query: 'result_type:record',
-                  analyze_wildcard: false,
-                },
+          {
+            range: {
+              record_score: {
+                gte: threshold,
               },
-              {
+            },
+          },
+        ];
+
+        // Add a nested query to filter for the specified influencer field name and value.
+        if (influencerFieldName && influencerFieldValue) {
+          boolCriteria.push({
+            nested: {
+              path: 'influencers',
+              query: {
                 bool: {
-                  must: boolCriteria,
+                  must: [
+                    {
+                      match: {
+                        'influencers.influencer_field_name': influencerFieldName,
+                      },
+                    },
+                    {
+                      match: {
+                        'influencers.influencer_field_values': influencerFieldValue,
+                      },
+                    },
+                  ],
                 },
               },
-            ],
-          },
-        },
-        sort: [{ record_score: { order: 'desc' } }],
-      },
-    })
-      .then((resp) => {
-        if (resp.hits.total !== 0) {
-          _.each(resp.hits.hits, (hit) => {
-            obj.records.push(hit._source);
+            },
           });
-        }
-        resolve(obj);
-      })
-      .catch((resp) => {
-        reject(resp);
-      });
-  });
-}
-
-// Queries Elasticsearch to obtain the record level results containing the specified influencer(s),
-// for the specified job(s), time range, and record score threshold.
-// influencers parameter must be an array, with each object in the array having 'fieldName'
-// 'fieldValue' properties. The influencer array uses 'should' for the nested bool query,
-// so this returns record level results which have at least one of the influencers.
-// Pass an empty array or ['*'] to search over all job IDs.
-export function getRecordsForInfluencer(
-  jobIds,
-  influencers,
-  threshold,
-  earliestMs,
-  latestMs,
-  maxResults,
-  influencersFilterQuery
-) {
-  return new Promise((resolve, reject) => {
-    const obj = { success: true, records: [] };
-
-    // Build the criteria to use in the bool filter part of the request.
-    // Add criteria for the time range, record score, plus any specified job IDs.
-    const boolCriteria = [
-      {
-        range: {
-          timestamp: {
-            gte: earliestMs,
-            lte: latestMs,
-            format: 'epoch_millis',
-          },
-        },
-      },
-      {
-        range: {
-          record_score: {
-            gte: threshold,
-          },
-        },
-      },
-    ];
-
-    if (jobIds && jobIds.length > 0 && !(jobIds.length === 1 && jobIds[0] === '*')) {
-      let jobIdFilterStr = '';
-      _.each(jobIds, (jobId, i) => {
-        if (i > 0) {
-          jobIdFilterStr += ' OR ';
-        }
-        jobIdFilterStr += 'job_id:';
-        jobIdFilterStr += jobId;
-      });
-      boolCriteria.push({
-        query_string: {
-          analyze_wildcard: false,
-          query: jobIdFilterStr,
-        },
-      });
-    }
-
-    if (influencersFilterQuery !== undefined) {
-      boolCriteria.push(influencersFilterQuery);
-    }
-
-    // Add a nested query to filter for each of the specified influencers.
-    if (influencers.length > 0) {
-      boolCriteria.push({
-        bool: {
-          should: influencers.map((influencer) => {
-            return {
+        } else {
+          if (checkForInfluencers === true) {
+            boolCriteria.push({
               nested: {
                 path: 'influencers',
                 query: {
                   bool: {
                     must: [
                       {
-                        match: {
-                          'influencers.influencer_field_name': influencer.fieldName,
-                        },
-                      },
-                      {
-                        match: {
-                          'influencers.influencer_field_values': influencer.fieldValue,
-                        },
+                        exists: { field: 'influencers' },
                       },
                     ],
                   },
                 },
               },
-            };
-          }),
-          minimum_should_match: 1,
-        },
-      });
-    }
-
-    ml.esSearch({
-      index: ML_RESULTS_INDEX_PATTERN,
-      size: maxResults !== undefined ? maxResults : 100,
-      rest_total_hits_as_int: true,
-      body: {
-        query: {
-          bool: {
-            filter: [
-              {
-                query_string: {
-                  query: 'result_type:record',
-                  analyze_wildcard: false,
-                },
-              },
-              {
-                bool: {
-                  must: boolCriteria,
-                },
-              },
-            ],
-          },
-        },
-        sort: [{ record_score: { order: 'desc' } }],
-      },
-    })
-      .then((resp) => {
-        if (resp.hits.total !== 0) {
-          _.each(resp.hits.hits, (hit) => {
-            obj.records.push(hit._source);
-          });
+            });
+          }
         }
-        resolve(obj);
-      })
-      .catch((resp) => {
-        reject(resp);
-      });
-  });
-}
 
-// Queries Elasticsearch to obtain the record level results for the specified job and detector,
-// time range, record score threshold, and whether to only return results containing influencers.
-// An additional, optional influencer field name and value may also be provided.
-export function getRecordsForDetector(
-  jobId,
-  detectorIndex,
-  checkForInfluencers,
-  influencerFieldName,
-  influencerFieldValue,
-  threshold,
-  earliestMs,
-  latestMs,
-  maxResults
-) {
-  return new Promise((resolve, reject) => {
-    const obj = { success: true, records: [] };
-
-    // Build the criteria to use in the bool filter part of the request.
-    // Add criteria for the time range, record score, plus any specified job IDs.
-    const boolCriteria = [
-      {
-        range: {
-          timestamp: {
-            gte: earliestMs,
-            lte: latestMs,
-            format: 'epoch_millis',
-          },
-        },
-      },
-      {
-        term: { job_id: jobId },
-      },
-      {
-        term: { detector_index: detectorIndex },
-      },
-      {
-        range: {
-          record_score: {
-            gte: threshold,
-          },
-        },
-      },
-    ];
-
-    // Add a nested query to filter for the specified influencer field name and value.
-    if (influencerFieldName && influencerFieldValue) {
-      boolCriteria.push({
-        nested: {
-          path: 'influencers',
-          query: {
-            bool: {
-              must: [
-                {
-                  match: {
-                    'influencers.influencer_field_name': influencerFieldName,
-                  },
-                },
-                {
-                  match: {
-                    'influencers.influencer_field_values': influencerFieldValue,
-                  },
+        mlApiServices
+          .esSearch({
+            index: ML_RESULTS_INDEX_PATTERN,
+            size: maxResults !== undefined ? maxResults : 100,
+            rest_total_hits_as_int: true,
+            body: {
+              query: {
+                bool: {
+                  filter: [
+                    {
+                      query_string: {
+                        query: 'result_type:record',
+                        analyze_wildcard: false,
+                      },
+                    },
+                    {
+                      bool: {
+                        must: boolCriteria,
+                      },
+                    },
+                  ],
                 },
-              ],
+              },
+              sort: [{ record_score: { order: 'desc' } }],
             },
-          },
-        },
+          })
+          .then((resp) => {
+            if (resp.hits.total !== 0) {
+              _.each(resp.hits.hits, (hit) => {
+                obj.records.push(hit._source);
+              });
+            }
+            resolve(obj);
+          })
+          .catch((resp) => {
+            reject(resp);
+          });
       });
-    } else {
-      if (checkForInfluencers === true) {
-        boolCriteria.push({
-          nested: {
-            path: 'influencers',
-            query: {
-              bool: {
-                must: [
-                  {
-                    exists: { field: 'influencers' },
-                  },
-                ],
+    },
+
+    // Queries Elasticsearch to obtain all the record level results for the specified job(s), time range,
+    // and record score threshold.
+    // Pass an empty array or ['*'] to search over all job IDs.
+    // Returned response contains a records property, which is an array of the matching results.
+    getRecords(jobIds, threshold, earliestMs, latestMs, maxResults) {
+      return this.getRecordsForInfluencer(jobIds, [], threshold, earliestMs, latestMs, maxResults);
+    },
+
+    // Queries Elasticsearch to obtain event rate data i.e. the count
+    // of documents over time.
+    // index can be a String, or String[], of index names to search.
+    // Extra query object can be supplied, or pass null if no additional query.
+    // Returned response contains a results property, which is an object
+    // of document counts against time (epoch millis).
+    getEventRateData(index, query, timeFieldName, earliestMs, latestMs, interval) {
+      return new Promise((resolve, reject) => {
+        const obj = { success: true, results: {} };
+
+        // Build the criteria to use in the bool filter part of the request.
+        // Add criteria for the time range, entity fields,
+        // plus any additional supplied query.
+        const mustCriteria = [
+          {
+            range: {
+              [timeFieldName]: {
+                gte: earliestMs,
+                lte: latestMs,
+                format: 'epoch_millis',
               },
             },
           },
-        });
-      }
-    }
-
-    ml.esSearch({
-      index: ML_RESULTS_INDEX_PATTERN,
-      size: maxResults !== undefined ? maxResults : 100,
-      rest_total_hits_as_int: true,
-      body: {
-        query: {
-          bool: {
-            filter: [
-              {
-                query_string: {
-                  query: 'result_type:record',
-                  analyze_wildcard: false,
+        ];
+
+        if (query) {
+          mustCriteria.push(query);
+        }
+
+        mlApiServices
+          .esSearch({
+            index,
+            rest_total_hits_as_int: true,
+            size: 0,
+            body: {
+              query: {
+                bool: {
+                  must: mustCriteria,
                 },
               },
-              {
-                bool: {
-                  must: boolCriteria,
+              _source: {
+                excludes: [],
+              },
+              aggs: {
+                eventRate: {
+                  date_histogram: {
+                    field: timeFieldName,
+                    interval: interval,
+                    min_doc_count: 0,
+                    extended_bounds: {
+                      min: earliestMs,
+                      max: latestMs,
+                    },
+                  },
                 },
               },
-            ],
-          },
-        },
-        sort: [{ record_score: { order: 'desc' } }],
-      },
-    })
-      .then((resp) => {
-        if (resp.hits.total !== 0) {
-          _.each(resp.hits.hits, (hit) => {
-            obj.records.push(hit._source);
+            },
+          })
+          .then((resp) => {
+            const dataByTimeBucket = _.get(resp, ['aggregations', 'eventRate', 'buckets'], []);
+            _.each(dataByTimeBucket, (dataForTime) => {
+              const time = dataForTime.key;
+              obj.results[time] = dataForTime.doc_count;
+            });
+            obj.total = resp.hits.total;
+
+            resolve(obj);
+          })
+          .catch((resp) => {
+            reject(resp);
           });
-        }
-        resolve(obj);
-      })
-      .catch((resp) => {
-        reject(resp);
       });
-  });
-}
-
-// Queries Elasticsearch to obtain all the record level results for the specified job(s), time range,
-// and record score threshold.
-// Pass an empty array or ['*'] to search over all job IDs.
-// Returned response contains a records property, which is an array of the matching results.
-export function getRecords(jobIds, threshold, earliestMs, latestMs, maxResults) {
-  return this.getRecordsForInfluencer(jobIds, [], threshold, earliestMs, latestMs, maxResults);
-}
+    },
 
-// Queries Elasticsearch to obtain event rate data i.e. the count
-// of documents over time.
-// index can be a String, or String[], of index names to search.
-// Extra query object can be supplied, or pass null if no additional query.
-// Returned response contains a results property, which is an object
-// of document counts against time (epoch millis).
-export function getEventRateData(index, query, timeFieldName, earliestMs, latestMs, interval) {
-  return new Promise((resolve, reject) => {
-    const obj = { success: true, results: {} };
-
-    // Build the criteria to use in the bool filter part of the request.
-    // Add criteria for the time range, entity fields,
-    // plus any additional supplied query.
-    const mustCriteria = [
-      {
-        range: {
-          [timeFieldName]: {
-            gte: earliestMs,
-            lte: latestMs,
-            format: 'epoch_millis',
-          },
-        },
-      },
-    ];
-
-    if (query) {
-      mustCriteria.push(query);
-    }
+    // Queries Elasticsearch to obtain event distribution i.e. the count
+    // of entities over time.
+    // index can be a String, or String[], of index names to search.
+    // Extra query object can be supplied, or pass null if no additional query.
+    // Returned response contains a results property, which is an object
+    // of document counts against time (epoch millis).
 
-    ml.esSearch({
+    getEventDistributionData(
       index,
-      rest_total_hits_as_int: true,
-      size: 0,
-      body: {
-        query: {
-          bool: {
-            must: mustCriteria,
-          },
-        },
-        _source: {
-          excludes: [],
-        },
-        aggs: {
-          eventRate: {
-            date_histogram: {
-              field: timeFieldName,
-              interval: interval,
-              min_doc_count: 0,
-              extended_bounds: {
-                min: earliestMs,
-                max: latestMs,
-              },
+      splitField,
+      filterField = null,
+      query,
+      metricFunction, // ES aggregation name
+      metricFieldName,
+      timeFieldName,
+      earliestMs,
+      latestMs,
+      interval
+    ) {
+      return new Promise((resolve, reject) => {
+        if (splitField === undefined) {
+          return resolve([]);
+        }
+
+        // Build the criteria to use in the bool filter part of the request.
+        // Add criteria for the time range, entity fields,
+        // plus any additional supplied query.
+        const mustCriteria = [];
+
+        mustCriteria.push({
+          range: {
+            [timeFieldName]: {
+              gte: earliestMs,
+              lte: latestMs,
+              format: 'epoch_millis',
             },
           },
-        },
-      },
-    })
-      .then((resp) => {
-        const dataByTimeBucket = _.get(resp, ['aggregations', 'eventRate', 'buckets'], []);
-        _.each(dataByTimeBucket, (dataForTime) => {
-          const time = dataForTime.key;
-          obj.results[time] = dataForTime.doc_count;
         });
-        obj.total = resp.hits.total;
 
-        resolve(obj);
-      })
-      .catch((resp) => {
-        reject(resp);
-      });
-  });
-}
+        if (query) {
+          mustCriteria.push(query);
+        }
 
-// Queries Elasticsearch to obtain event distribution i.e. the count
-// of entities over time.
-// index can be a String, or String[], of index names to search.
-// Extra query object can be supplied, or pass null if no additional query.
-// Returned response contains a results property, which is an object
-// of document counts against time (epoch millis).
-const SAMPLER_TOP_TERMS_SHARD_SIZE = 20000;
-const ENTITY_AGGREGATION_SIZE = 10;
-const AGGREGATION_MIN_DOC_COUNT = 1;
-const CARDINALITY_PRECISION_THRESHOLD = 100;
-export function getEventDistributionData(
-  index,
-  splitField,
-  filterField = null,
-  query,
-  metricFunction, // ES aggregation name
-  metricFieldName,
-  timeFieldName,
-  earliestMs,
-  latestMs,
-  interval
-) {
-  return new Promise((resolve, reject) => {
-    if (splitField === undefined) {
-      return resolve([]);
-    }
-
-    // Build the criteria to use in the bool filter part of the request.
-    // Add criteria for the time range, entity fields,
-    // plus any additional supplied query.
-    const mustCriteria = [];
-
-    mustCriteria.push({
-      range: {
-        [timeFieldName]: {
-          gte: earliestMs,
-          lte: latestMs,
-          format: 'epoch_millis',
-        },
-      },
-    });
-
-    if (query) {
-      mustCriteria.push(query);
-    }
-
-    if (filterField !== null) {
-      mustCriteria.push({
-        term: {
-          [filterField.fieldName]: filterField.fieldValue,
-        },
-      });
-    }
-
-    const body = {
-      query: {
-        // using function_score and random_score to get a random sample of documents.
-        // otherwise all documents would have the same score and the sampler aggregation
-        // would pick the first N documents instead of a random set.
-        function_score: {
-          query: {
-            bool: {
-              must: mustCriteria,
+        if (filterField !== null) {
+          mustCriteria.push({
+            term: {
+              [filterField.fieldName]: filterField.fieldValue,
             },
-          },
-          functions: [
-            {
-              random_score: {
-                // static seed to get same randomized results on every request
-                seed: 10,
-                field: '_seq_no',
+          });
+        }
+
+        const body = {
+          query: {
+            // using function_score and random_score to get a random sample of documents.
+            // otherwise all documents would have the same score and the sampler aggregation
+            // would pick the first N documents instead of a random set.
+            function_score: {
+              query: {
+                bool: {
+                  must: mustCriteria,
+                },
               },
+              functions: [
+                {
+                  random_score: {
+                    // static seed to get same randomized results on every request
+                    seed: 10,
+                    field: '_seq_no',
+                  },
+                },
+              ],
             },
-          ],
-        },
-      },
-      size: 0,
-      _source: {
-        excludes: [],
-      },
-      aggs: {
-        sample: {
-          sampler: {
-            shard_size: SAMPLER_TOP_TERMS_SHARD_SIZE,
+          },
+          size: 0,
+          _source: {
+            excludes: [],
           },
           aggs: {
-            byTime: {
-              date_histogram: {
-                field: timeFieldName,
-                interval: interval,
-                min_doc_count: AGGREGATION_MIN_DOC_COUNT,
+            sample: {
+              sampler: {
+                shard_size: SAMPLER_TOP_TERMS_SHARD_SIZE,
               },
               aggs: {
-                entities: {
-                  terms: {
-                    field: splitField.fieldName,
-                    size: ENTITY_AGGREGATION_SIZE,
+                byTime: {
+                  date_histogram: {
+                    field: timeFieldName,
+                    interval: interval,
                     min_doc_count: AGGREGATION_MIN_DOC_COUNT,
                   },
+                  aggs: {
+                    entities: {
+                      terms: {
+                        field: splitField.fieldName,
+                        size: ENTITY_AGGREGATION_SIZE,
+                        min_doc_count: AGGREGATION_MIN_DOC_COUNT,
+                      },
+                    },
+                  },
                 },
               },
             },
           },
-        },
-      },
-    };
-
-    if (metricFieldName !== undefined && metricFieldName !== '') {
-      body.aggs.sample.aggs.byTime.aggs.entities.aggs = {};
-
-      const metricAgg = {
-        [metricFunction]: {
-          field: metricFieldName,
-        },
-      };
-
-      if (metricFunction === 'percentiles') {
-        metricAgg[metricFunction].percents = [ML_MEDIAN_PERCENTS];
-      }
-
-      if (metricFunction === 'cardinality') {
-        metricAgg[metricFunction].precision_threshold = CARDINALITY_PRECISION_THRESHOLD;
-      }
-      body.aggs.sample.aggs.byTime.aggs.entities.aggs.metric = metricAgg;
-    }
-
-    ml.esSearch({
-      index,
-      body,
-      rest_total_hits_as_int: true,
-    })
-      .then((resp) => {
-        // Because of the sampling, results of metricFunctions which use sum or count
-        // can be significantly skewed. Taking into account totalHits we calculate a
-        // a factor to normalize results for these metricFunctions.
-        const totalHits = _.get(resp, ['hits', 'total'], 0);
-        const successfulShards = _.get(resp, ['_shards', 'successful'], 0);
-
-        let normalizeFactor = 1;
-        if (totalHits > successfulShards * SAMPLER_TOP_TERMS_SHARD_SIZE) {
-          normalizeFactor = totalHits / (successfulShards * SAMPLER_TOP_TERMS_SHARD_SIZE);
+        };
+
+        if (metricFieldName !== undefined && metricFieldName !== '') {
+          body.aggs.sample.aggs.byTime.aggs.entities.aggs = {};
+
+          const metricAgg = {
+            [metricFunction]: {
+              field: metricFieldName,
+            },
+          };
+
+          if (metricFunction === 'percentiles') {
+            metricAgg[metricFunction].percents = [ML_MEDIAN_PERCENTS];
+          }
+
+          if (metricFunction === 'cardinality') {
+            metricAgg[metricFunction].precision_threshold = CARDINALITY_PRECISION_THRESHOLD;
+          }
+          body.aggs.sample.aggs.byTime.aggs.entities.aggs.metric = metricAgg;
         }
 
-        const dataByTime = _.get(resp, ['aggregations', 'sample', 'byTime', 'buckets'], []);
-        const data = dataByTime.reduce((d, dataForTime) => {
-          const date = +dataForTime.key;
-          const entities = _.get(dataForTime, ['entities', 'buckets'], []);
-          entities.forEach((entity) => {
-            let value = metricFunction === 'count' ? entity.doc_count : entity.metric.value;
-
-            if (
-              metricFunction === 'count' ||
-              metricFunction === 'cardinality' ||
-              metricFunction === 'sum'
-            ) {
-              value = value * normalizeFactor;
+        mlApiServices
+          .esSearch({
+            index,
+            body,
+            rest_total_hits_as_int: true,
+          })
+          .then((resp) => {
+            // Because of the sampling, results of metricFunctions which use sum or count
+            // can be significantly skewed. Taking into account totalHits we calculate a
+            // a factor to normalize results for these metricFunctions.
+            const totalHits = _.get(resp, ['hits', 'total'], 0);
+            const successfulShards = _.get(resp, ['_shards', 'successful'], 0);
+
+            let normalizeFactor = 1;
+            if (totalHits > successfulShards * SAMPLER_TOP_TERMS_SHARD_SIZE) {
+              normalizeFactor = totalHits / (successfulShards * SAMPLER_TOP_TERMS_SHARD_SIZE);
             }
 
-            d.push({
-              date,
-              entity: entity.key,
-              value,
-            });
+            const dataByTime = _.get(resp, ['aggregations', 'sample', 'byTime', 'buckets'], []);
+            const data = dataByTime.reduce((d, dataForTime) => {
+              const date = +dataForTime.key;
+              const entities = _.get(dataForTime, ['entities', 'buckets'], []);
+              entities.forEach((entity) => {
+                let value = metricFunction === 'count' ? entity.doc_count : entity.metric.value;
+
+                if (
+                  metricFunction === 'count' ||
+                  metricFunction === 'cardinality' ||
+                  metricFunction === 'sum'
+                ) {
+                  value = value * normalizeFactor;
+                }
+
+                d.push({
+                  date,
+                  entity: entity.key,
+                  value,
+                });
+              });
+              return d;
+            }, []);
+            resolve(data);
+          })
+          .catch((resp) => {
+            reject(resp);
           });
-          return d;
-        }, []);
-        resolve(data);
-      })
-      .catch((resp) => {
-        reject(resp);
       });
-  });
-}
-
-// Queries Elasticsearch to obtain the max record score over time for the specified job,
-// criteria, time range, and aggregation interval.
-// criteriaFields parameter must be an array, with each object in the array having 'fieldName'
-// 'fieldValue' properties.
-export function getRecordMaxScoreByTime(jobId, criteriaFields, earliestMs, latestMs, interval) {
-  return new Promise((resolve, reject) => {
-    const obj = {
-      success: true,
-      results: {},
-    };
-
-    // Build the criteria to use in the bool filter part of the request.
-    const mustCriteria = [
-      {
-        range: {
-          timestamp: {
-            gte: earliestMs,
-            lte: latestMs,
-            format: 'epoch_millis',
-          },
-        },
-      },
-      { term: { job_id: jobId } },
-    ];
-
-    _.each(criteriaFields, (criteria) => {
-      mustCriteria.push({
-        term: {
-          [criteria.fieldName]: criteria.fieldValue,
-        },
-      });
-    });
-
-    ml.esSearch({
-      index: ML_RESULTS_INDEX_PATTERN,
-      size: 0,
-      body: {
-        query: {
-          bool: {
-            filter: [
-              {
-                query_string: {
-                  query: 'result_type:record',
-                  analyze_wildcard: true,
-                },
+    },
+
+    // Queries Elasticsearch to obtain the max record score over time for the specified job,
+    // criteria, time range, and aggregation interval.
+    // criteriaFields parameter must be an array, with each object in the array having 'fieldName'
+    // 'fieldValue' properties.
+    getRecordMaxScoreByTime(jobId, criteriaFields, earliestMs, latestMs, interval) {
+      return new Promise((resolve, reject) => {
+        const obj = {
+          success: true,
+          results: {},
+        };
+
+        // Build the criteria to use in the bool filter part of the request.
+        const mustCriteria = [
+          {
+            range: {
+              timestamp: {
+                gte: earliestMs,
+                lte: latestMs,
+                format: 'epoch_millis',
               },
-              {
+            },
+          },
+          { term: { job_id: jobId } },
+        ];
+
+        _.each(criteriaFields, (criteria) => {
+          mustCriteria.push({
+            term: {
+              [criteria.fieldName]: criteria.fieldValue,
+            },
+          });
+        });
+
+        mlApiServices
+          .esSearch({
+            index: ML_RESULTS_INDEX_PATTERN,
+            size: 0,
+            body: {
+              query: {
                 bool: {
-                  must: mustCriteria,
+                  filter: [
+                    {
+                      query_string: {
+                        query: 'result_type:record',
+                        analyze_wildcard: true,
+                      },
+                    },
+                    {
+                      bool: {
+                        must: mustCriteria,
+                      },
+                    },
+                  ],
                 },
               },
-            ],
-          },
-        },
-        aggs: {
-          times: {
-            date_histogram: {
-              field: 'timestamp',
-              interval: interval,
-              min_doc_count: 1,
-            },
-            aggs: {
-              recordScore: {
-                max: {
-                  field: 'record_score',
+              aggs: {
+                times: {
+                  date_histogram: {
+                    field: 'timestamp',
+                    interval: interval,
+                    min_doc_count: 1,
+                  },
+                  aggs: {
+                    recordScore: {
+                      max: {
+                        field: 'record_score',
+                      },
+                    },
+                  },
                 },
               },
             },
-          },
-        },
-      },
-    })
-      .then((resp) => {
-        const aggregationsByTime = _.get(resp, ['aggregations', 'times', 'buckets'], []);
-        _.each(aggregationsByTime, (dataForTime) => {
-          const time = dataForTime.key;
-          obj.results[time] = {
-            score: _.get(dataForTime, ['recordScore', 'value']),
-          };
-        });
+          })
+          .then((resp) => {
+            const aggregationsByTime = _.get(resp, ['aggregations', 'times', 'buckets'], []);
+            _.each(aggregationsByTime, (dataForTime) => {
+              const time = dataForTime.key;
+              obj.results[time] = {
+                score: _.get(dataForTime, ['recordScore', 'value']),
+              };
+            });
 
-        resolve(obj);
-      })
-      .catch((resp) => {
-        reject(resp);
+            resolve(obj);
+          })
+          .catch((resp) => {
+            reject(resp);
+          });
       });
-  });
+    },
+  };
 }
diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable.tsx
index b53b08e5f6146..b4b25db452bdb 100644
--- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable.tsx
+++ b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable.tsx
@@ -7,6 +7,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { CoreStart } from 'kibana/public';
+import { i18n } from '@kbn/i18n';
 import { Subject } from 'rxjs';
 import {
   Embeddable,
@@ -25,12 +26,19 @@ import {
   RefreshInterval,
   TimeRange,
 } from '../../../../../../src/plugins/data/common';
+import { SwimlaneType } from '../../application/explorer/explorer_constants';
 
 export const ANOMALY_SWIMLANE_EMBEDDABLE_TYPE = 'ml_anomaly_swimlane';
 
+export const getDefaultPanelTitle = (jobIds: JobId[]) =>
+  i18n.translate('xpack.ml.swimlaneEmbeddable.title', {
+    defaultMessage: 'ML anomaly swimlane for {jobIds}',
+    values: { jobIds: jobIds.join(', ') },
+  });
+
 export interface AnomalySwimlaneEmbeddableCustomInput {
   jobIds: JobId[];
-  swimlaneType: string;
+  swimlaneType: SwimlaneType;
   viewBy?: string;
   limit?: number;
 
@@ -43,9 +51,12 @@ export interface AnomalySwimlaneEmbeddableCustomInput {
 
 export type AnomalySwimlaneEmbeddableInput = EmbeddableInput & AnomalySwimlaneEmbeddableCustomInput;
 
-export interface AnomalySwimlaneEmbeddableOutput extends EmbeddableOutput {
+export type AnomalySwimlaneEmbeddableOutput = EmbeddableOutput &
+  AnomalySwimlaneEmbeddableCustomOutput;
+
+export interface AnomalySwimlaneEmbeddableCustomOutput {
   jobIds: JobId[];
-  swimlaneType: string;
+  swimlaneType: SwimlaneType;
   viewBy?: string;
   limit?: number;
 }
diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable_factory.ts b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable_factory.ts
index e86d738d8b809..09091b21e49b6 100644
--- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable_factory.ts
+++ b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable_factory.ts
@@ -23,8 +23,9 @@ import { MlStartDependencies } from '../../plugin';
 import { HttpService } from '../../application/services/http_service';
 import { AnomalyDetectorService } from '../../application/services/anomaly_detector_service';
 import { ExplorerService } from '../../application/services/explorer_service';
-import { mlResultsService } from '../../application/services/results_service';
+import { mlResultsServiceProvider } from '../../application/services/results_service';
 import { resolveAnomalySwimlaneUserInput } from './anomaly_swimlane_setup_flyout';
+import { mlApiServicesProvider } from '../../application/services/ml_api_service';
 
 export class AnomalySwimlaneEmbeddableFactory
   implements EmbeddableFactoryDefinition<AnomalySwimlaneEmbeddableInput> {
@@ -64,8 +65,7 @@ export class AnomalySwimlaneEmbeddableFactory
     const explorerService = new ExplorerService(
       pluginsStart.data.query.timefilter.timefilter,
       coreStart.uiSettings,
-      // TODO mlResultsService to use DI
-      mlResultsService
+      mlResultsServiceProvider(mlApiServicesProvider(httpService))
     );
 
     return [coreStart, pluginsStart, { anomalyDetectorService, explorerService }];
diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_initializer.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_initializer.tsx
index 00d47c0d897c7..4c93b9ef23239 100644
--- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_initializer.tsx
+++ b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_initializer.tsx
@@ -20,7 +20,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { SWIMLANE_TYPE } from '../../application/explorer/explorer_constants';
+import { SWIMLANE_TYPE, SwimlaneType } from '../../application/explorer/explorer_constants';
 import { AnomalySwimlaneEmbeddableInput } from './anomaly_swimlane_embeddable';
 
 export interface AnomalySwimlaneInitializerProps {
@@ -31,7 +31,7 @@ export interface AnomalySwimlaneInitializerProps {
   >;
   onCreate: (swimlaneProps: {
     panelTitle: string;
-    swimlaneType: string;
+    swimlaneType: SwimlaneType;
     viewBy?: string;
     limit?: number;
   }) => void;
@@ -51,8 +51,8 @@ export const AnomalySwimlaneInitializer: FC<AnomalySwimlaneInitializerProps> = (
   initialInput,
 }) => {
   const [panelTitle, setPanelTitle] = useState(defaultTitle);
-  const [swimlaneType, setSwimlaneType] = useState<SWIMLANE_TYPE>(
-    (initialInput?.swimlaneType ?? SWIMLANE_TYPE.OVERALL) as SWIMLANE_TYPE
+  const [swimlaneType, setSwimlaneType] = useState(
+    initialInput?.swimlaneType ?? SWIMLANE_TYPE.OVERALL
   );
   const [viewBySwimlaneFieldName, setViewBySwimlaneFieldName] = useState(initialInput?.viewBy);
   const [limit, setLimit] = useState(initialInput?.limit ?? 5);
@@ -135,7 +135,7 @@ export const AnomalySwimlaneInitializer: FC<AnomalySwimlaneInitializerProps> = (
               })}
               options={swimlaneTypeOptions}
               idSelected={swimlaneType}
-              onChange={(id) => setSwimlaneType(id as SWIMLANE_TYPE)}
+              onChange={(id) => setSwimlaneType(id as SwimlaneType)}
             />
           </EuiFormRow>
 
diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_setup_flyout.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_setup_flyout.tsx
index 83f9833109bf4..54f50d2d3da32 100644
--- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_setup_flyout.tsx
+++ b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_setup_flyout.tsx
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import { IUiSettingsClient, OverlayStart } from 'kibana/public';
-import { i18n } from '@kbn/i18n';
 import moment from 'moment';
 import { VIEW_BY_JOB_LABEL } from '../../application/explorer/explorer_constants';
 import { toMountPoint } from '../../../../../../src/plugins/kibana_react/public';
@@ -14,7 +13,10 @@ import { AnomalySwimlaneInitializer } from './anomaly_swimlane_initializer';
 import { JobSelectorFlyout } from '../../application/components/job_selector/job_selector_flyout';
 import { AnomalyDetectorService } from '../../application/services/anomaly_detector_service';
 import { getInitialGroupsMap } from '../../application/components/job_selector/job_selector';
-import { AnomalySwimlaneEmbeddableInput } from './anomaly_swimlane_embeddable';
+import {
+  AnomalySwimlaneEmbeddableInput,
+  getDefaultPanelTitle,
+} from './anomaly_swimlane_embeddable';
 
 export async function resolveAnomalySwimlaneUserInput(
   {
@@ -52,12 +54,7 @@ export async function resolveAnomalySwimlaneUserInput(
             reject();
           }}
           onSelectionConfirmed={async ({ jobIds, groups }) => {
-            const title =
-              input?.title ??
-              i18n.translate('xpack.ml.swimlaneEmbeddable.title', {
-                defaultMessage: 'ML anomaly swimlane for {jobIds}',
-                values: { jobIds: jobIds.join(', ') },
-              });
+            const title = input?.title ?? getDefaultPanelTitle(jobIds);
 
             const jobs = await anomalyDetectorService.getJobs$(jobIds).toPromise();
 
diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/explorer_swimlane_container.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/explorer_swimlane_container.tsx
index e5d8584683c55..0bba9b59f7bf7 100644
--- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/explorer_swimlane_container.tsx
+++ b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/explorer_swimlane_container.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, useState } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 import {
   EuiCallOut,
   EuiFlexGroup,
@@ -28,6 +28,7 @@ import {
 } from './anomaly_swimlane_embeddable';
 import { MlTooltipComponent } from '../../application/components/chart_tooltip';
 import { useSwimlaneInputResolver } from './swimlane_input_resolver';
+import { SwimlaneType } from '../../application/explorer/explorer_constants';
 
 const RESIZE_THROTTLE_TIME_MS = 500;
 
@@ -54,10 +55,13 @@ export const ExplorerSwimlaneContainer: FC<ExplorerSwimlaneContainerProps> = ({
     chartWidth
   );
 
-  const onResize = throttle((e: { width: number; height: number }) => {
-    const labelWidth = 200;
-    setChartWidth(e.width - labelWidth);
-  }, RESIZE_THROTTLE_TIME_MS);
+  const onResize = useCallback(
+    throttle((e: { width: number; height: number }) => {
+      const labelWidth = 200;
+      setChartWidth(e.width - labelWidth);
+    }, RESIZE_THROTTLE_TIME_MS),
+    []
+  );
 
   if (error) {
     return (
@@ -91,14 +95,14 @@ export const ExplorerSwimlaneContainer: FC<ExplorerSwimlaneContainerProps> = ({
             <EuiSpacer size="m" />
 
             {chartWidth > 0 && swimlaneData && swimlaneType ? (
-              <EuiText color="subdued" size="s">
+              <EuiText color="subdued" size="s" data-test-subj="mlAnomalySwimlaneEmbeddableWrapper">
                 <MlTooltipComponent>
                   {(tooltipService) => (
                     <ExplorerSwimlane
                       chartWidth={chartWidth}
                       timeBuckets={timeBuckets}
                       swimlaneData={swimlaneData}
-                      swimlaneType={swimlaneType}
+                      swimlaneType={swimlaneType as SwimlaneType}
                       tooltipService={tooltipService}
                     />
                   )}
diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.ts b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.ts
index e704582d5d61a..3829bbce5e5c9 100644
--- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.ts
+++ b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.ts
@@ -24,7 +24,7 @@ import {
   AnomalySwimlaneServices,
 } from './anomaly_swimlane_embeddable';
 import { MlStartDependencies } from '../../plugin';
-import { SWIMLANE_TYPE } from '../../application/explorer/explorer_constants';
+import { SWIMLANE_TYPE, SwimlaneType } from '../../application/explorer/explorer_constants';
 import { Filter } from '../../../../../../src/plugins/data/common/es_query/filters';
 import { Query } from '../../../../../../src/plugins/data/common/query';
 import { esKuery, UI_SETTINGS } from '../../../../../../src/plugins/data/public';
@@ -55,7 +55,7 @@ export function useSwimlaneInputResolver(
   const [{ uiSettings }, , { explorerService, anomalyDetectorService }] = services;
 
   const [swimlaneData, setSwimlaneData] = useState<OverallSwimlaneData>();
-  const [swimlaneType, setSwimlaneType] = useState<string>();
+  const [swimlaneType, setSwimlaneType] = useState<SwimlaneType>();
   const [error, setError] = useState<Error | null>();
 
   const chartWidth$ = useMemo(() => new Subject<number>(), []);
diff --git a/x-pack/plugins/ml/public/index.ts b/x-pack/plugins/ml/public/index.ts
index a9ffb1a5bf579..5a956651c86d8 100755
--- a/x-pack/plugins/ml/public/index.ts
+++ b/x-pack/plugins/ml/public/index.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { PluginInitializer } from 'kibana/public';
+import { PluginInitializer, PluginInitializerContext } from 'kibana/public';
 import './index.scss';
 import {
   MlPlugin,
@@ -19,7 +19,7 @@ export const plugin: PluginInitializer<
   MlPluginStart,
   MlSetupDependencies,
   MlStartDependencies
-> = () => new MlPlugin();
+> = (initializerContext: PluginInitializerContext) => new MlPlugin(initializerContext);
 
 export { MlPluginSetup, MlPluginStart };
 export * from './shared';
diff --git a/x-pack/plugins/ml/public/plugin.ts b/x-pack/plugins/ml/public/plugin.ts
index fe9f602bc3637..be2ebb3caa416 100644
--- a/x-pack/plugins/ml/public/plugin.ts
+++ b/x-pack/plugins/ml/public/plugin.ts
@@ -5,7 +5,13 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { Plugin, CoreStart, CoreSetup, AppMountParameters } from 'kibana/public';
+import {
+  Plugin,
+  CoreStart,
+  CoreSetup,
+  AppMountParameters,
+  PluginInitializerContext,
+} from 'kibana/public';
 import { ManagementSetup } from 'src/plugins/management/public';
 import { SharePluginStart } from 'src/plugins/share/public';
 import { UsageCollectionSetup } from 'src/plugins/usage_collection/server';
@@ -38,9 +44,13 @@ export interface MlSetupDependencies {
   home: HomePublicPluginSetup;
   embeddable: EmbeddableSetup;
   uiActions: UiActionsSetup;
+  kibanaVersion: string;
+  share: SharePluginStart;
 }
 
 export class MlPlugin implements Plugin<MlPluginSetup, MlPluginStart> {
+  constructor(private initializerContext: PluginInitializerContext) {}
+
   setup(core: CoreSetup<MlStartDependencies, MlPluginStart>, pluginsSetup: MlSetupDependencies) {
     core.application.register({
       id: PLUGIN_ID,
@@ -53,6 +63,7 @@ export class MlPlugin implements Plugin<MlPluginSetup, MlPluginStart> {
       category: DEFAULT_APP_CATEGORIES.kibana,
       mount: async (params: AppMountParameters) => {
         const [coreStart, pluginsStart] = await core.getStartServices();
+        const kibanaVersion = this.initializerContext.env.packageInfo.version;
         const { renderApp } = await import('./application/app');
         return renderApp(
           coreStart,
@@ -67,6 +78,7 @@ export class MlPlugin implements Plugin<MlPluginSetup, MlPluginStart> {
             home: pluginsSetup.home,
             embeddable: pluginsSetup.embeddable,
             uiActions: pluginsSetup.uiActions,
+            kibanaVersion,
           },
           {
             element: params.element,
diff --git a/x-pack/test/functional/apps/ml/anomaly_detection/anomaly_explorer.ts b/x-pack/test/functional/apps/ml/anomaly_detection/anomaly_explorer.ts
index 56d00a4e11390..c23abead458f1 100644
--- a/x-pack/test/functional/apps/ml/anomaly_detection/anomaly_explorer.ts
+++ b/x-pack/test/functional/apps/ml/anomaly_detection/anomaly_explorer.ts
@@ -61,6 +61,7 @@ export default function ({ getService }: FtrProviderContext) {
     before(async () => {
       await esArchiver.loadIfNeeded('ml/farequote');
       await ml.testResources.createIndexPatternIfNeeded('ft_farequote', '@timestamp');
+      await ml.testResources.createMLTestDashboardIfNeeded();
       await ml.testResources.setKibanaTimeZoneToUTC();
 
       await ml.securityUI.loginAsMlPowerUser();
@@ -125,6 +126,12 @@ export default function ({ getService }: FtrProviderContext) {
         it('anomalies table is not empty', async () => {
           await ml.anomaliesTable.assertTableNotEmpty();
         });
+
+        // should be the last step because it navigates away from the Anomaly Explorer page
+        it('should allow to attach anomaly swimlane embeddable to the dashboard', async () => {
+          await ml.anomalyExplorer.openAddToDashboardControl();
+          await ml.anomalyExplorer.addAndEditSwimlaneInDashboard('ML Test');
+        });
       });
     }
   });
diff --git a/x-pack/test/functional/apps/ml/index.ts b/x-pack/test/functional/apps/ml/index.ts
index 92e836e0c4c1b..2d8aac3b8dddf 100644
--- a/x-pack/test/functional/apps/ml/index.ts
+++ b/x-pack/test/functional/apps/ml/index.ts
@@ -22,6 +22,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
       await ml.securityCommon.cleanMlRoles();
 
       await ml.testResources.deleteSavedSearches();
+      await ml.testResources.deleteDashboards();
 
       await ml.testResources.deleteIndexPatternByTitle('ft_farequote');
       await ml.testResources.deleteIndexPatternByTitle('ft_ecommerce');
diff --git a/x-pack/test/functional/services/ml/anomaly_explorer.ts b/x-pack/test/functional/services/ml/anomaly_explorer.ts
index 6ec72c76bb9cf..7c479a4234673 100644
--- a/x-pack/test/functional/services/ml/anomaly_explorer.ts
+++ b/x-pack/test/functional/services/ml/anomaly_explorer.ts
@@ -66,5 +66,38 @@ export function MachineLearningAnomalyExplorerProvider({ getService }: FtrProvid
     async assertSwimlaneViewByExists() {
       await testSubjects.existOrFail('mlAnomalyExplorerSwimlaneViewBy');
     },
+
+    async openAddToDashboardControl() {
+      await testSubjects.click('mlAnomalyTimelinePanelMenu');
+      await testSubjects.click('mlAnomalyTimelinePanelAddToDashboardButton');
+      await testSubjects.existOrFail('mlAddToDashboardModal');
+    },
+
+    async addAndEditSwimlaneInDashboard(dashboardTitle: string) {
+      await this.filterWithSearchString(dashboardTitle);
+      await testSubjects.isDisplayed('mlDashboardSelectionTable > checkboxSelectAll');
+      await testSubjects.click('mlDashboardSelectionTable > checkboxSelectAll');
+      expect(await testSubjects.isChecked('mlDashboardSelectionTable > checkboxSelectAll')).to.be(
+        true
+      );
+      await testSubjects.clickWhenNotDisabled('mlAddAndEditDashboardButton');
+      const embeddable = await testSubjects.find('mlAnomalySwimlaneEmbeddableWrapper');
+      const swimlane = await embeddable.findByClassName('ml-swimlanes');
+      expect(await swimlane.isDisplayed()).to.eql(
+        true,
+        'Anomaly swimlane should be displayed in dashboard'
+      );
+    },
+
+    async waitForDashboardsToLoad() {
+      await testSubjects.existOrFail('~mlDashboardSelectionTable', { timeout: 60 * 1000 });
+    },
+
+    async filterWithSearchString(filter: string) {
+      await this.waitForDashboardsToLoad();
+      const searchBarInput = await testSubjects.find('mlDashboardsSearchBox');
+      await searchBarInput.clearValueWithKeyboard();
+      await searchBarInput.type(filter);
+    },
   };
 }
diff --git a/x-pack/test/functional/services/ml/test_resources.ts b/x-pack/test/functional/services/ml/test_resources.ts
index 4e3d1d9d86271..9927c987bbea5 100644
--- a/x-pack/test/functional/services/ml/test_resources.ts
+++ b/x-pack/test/functional/services/ml/test_resources.ts
@@ -5,7 +5,7 @@
  */
 
 import { ProvidedType } from '@kbn/test/types/ftr';
-import { savedSearches } from './test_resources_data';
+import { savedSearches, dashboards } from './test_resources_data';
 import { COMMON_REQUEST_HEADERS } from './common';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
@@ -137,6 +137,20 @@ export function MachineLearningTestResourcesProvider({ getService }: FtrProvider
       return createResponse.id;
     },
 
+    async createDashboard(title: string, body: object): Promise<string> {
+      log.debug(`Creating dashboard with title '${title}'`);
+
+      const createResponse = await supertest
+        .post(`/api/saved_objects/${SavedObjectType.DASHBOARD}`)
+        .set(COMMON_REQUEST_HEADERS)
+        .send(body)
+        .expect(200)
+        .then((res: any) => res.body);
+
+      log.debug(` > Created with id '${createResponse.id}'`);
+      return createResponse.id;
+    },
+
     async createSavedSearchIfNeeded(savedSearch: any): Promise<string> {
       const title = savedSearch.requestBody.attributes.title;
       const savedSearchId = await this.getSavedSearchId(title);
@@ -181,6 +195,21 @@ export function MachineLearningTestResourcesProvider({ getService }: FtrProvider
       await this.createSavedSearchIfNeeded(savedSearches.farequoteFilter);
     },
 
+    async createMLTestDashboardIfNeeded() {
+      await this.createDashboardIfNeeded(dashboards.mlTestDashboard);
+    },
+
+    async createDashboardIfNeeded(dashboard: any) {
+      const title = dashboard.requestBody.attributes.title;
+      const dashboardId = await this.getDashboardId(title);
+      if (dashboardId !== undefined) {
+        log.debug(`Dashboard with title '${title}' already exists. Nothing to create.`);
+        return dashboardId;
+      } else {
+        return await this.createDashboard(title, dashboard.requestBody);
+      }
+    },
+
     async createSavedSearchFarequoteLuceneIfNeeded() {
       await this.createSavedSearchIfNeeded(savedSearches.farequoteLucene);
     },
@@ -285,6 +314,12 @@ export function MachineLearningTestResourcesProvider({ getService }: FtrProvider
       }
     },
 
+    async deleteDashboards() {
+      for (const dashboard of Object.values(dashboards)) {
+        await this.deleteDashboardByTitle(dashboard.requestBody.attributes.title);
+      }
+    },
+
     async assertSavedObjectExistsByTitle(title: string, objectType: SavedObjectType) {
       await retry.waitForWithTimeout(
         `${objectType} with title '${title}' to exist`,
diff --git a/x-pack/test/functional/services/ml/test_resources_data.ts b/x-pack/test/functional/services/ml/test_resources_data.ts
index dd600077182f9..2ab1f4de54228 100644
--- a/x-pack/test/functional/services/ml/test_resources_data.ts
+++ b/x-pack/test/functional/services/ml/test_resources_data.ts
@@ -247,3 +247,22 @@ export const savedSearches = {
     },
   },
 };
+
+export const dashboards = {
+  mlTestDashboard: {
+    requestBody: {
+      attributes: {
+        title: 'ML Test',
+        hits: 0,
+        description: '',
+        panelsJSON: '[]',
+        optionsJSON: '{"hidePanelTitles":false,"useMargins":true}',
+        version: 1,
+        timeRestore: false,
+        kibanaSavedObjectMeta: {
+          searchSourceJSON: '{"query":{"language":"kuery","query":""},"filter":[]}',
+        },
+      },
+    },
+  },
+};
diff --git a/yarn.lock b/yarn.lock
index 2b2eab444d04a..c9bbbd8a999f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4803,6 +4803,11 @@
   resolved "https://registry.yarnpkg.com/@types/delete-empty/-/delete-empty-2.0.0.tgz#1647ae9e68f708a6ba778531af667ec55bc61964"
   integrity sha512-sq+kwx8zA9BSugT9N+Jr8/uWjbHMZ+N/meJEzRyT3gmLq/WMtx/iSIpvdpmBUi/cvXl6Kzpvve8G2ESkabFwmg==
 
+"@types/dragselect@^1.13.1":
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/@types/dragselect/-/dragselect-1.13.1.tgz#f19b7b41063a7c9d5963194c83c3c364e84d46ee"
+  integrity sha512-3m0fvSM0cSs0DXvprytV/ZY92hNX3jJuEb/vkdqU+4QMzV2jxYKgBFTuaT2fflqbmfzUqHHIkGP55WIuigElQw==
+
 "@types/elasticsearch@^5.0.33":
   version "5.0.33"
   resolved "https://registry.yarnpkg.com/@types/elasticsearch/-/elasticsearch-5.0.33.tgz#b0fd37dc674f498223b6d68c313bdfd71f4d812b"

From b434cac29a0fe3b592c90eb8d3651b0aa4585aaf Mon Sep 17 00:00:00 2001
From: Jonathan Budzenski <jon@budzenski.me>
Date: Wed, 17 Jun 2020 14:57:45 -0500
Subject: [PATCH 06/63] [docker] add spaces settings (#69019)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../os_packages/docker_generator/resources/bin/kibana-docker    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/dev/build/tasks/os_packages/docker_generator/resources/bin/kibana-docker b/src/dev/build/tasks/os_packages/docker_generator/resources/bin/kibana-docker
index d1fb544de733c..745a3d1f0c830 100755
--- a/src/dev/build/tasks/os_packages/docker_generator/resources/bin/kibana-docker
+++ b/src/dev/build/tasks/os_packages/docker_generator/resources/bin/kibana-docker
@@ -235,6 +235,8 @@ kibana_vars=(
     xpack.security.session.lifespan
     xpack.security.loginAssistanceMessage
     xpack.security.loginHelp
+    xpack.spaces.enabled
+    xpack.spaces.maxSpaces
     telemetry.allowChangingOptInStatus
     telemetry.enabled
     telemetry.optIn

From f7266d3b7b3502e31ae27b824524818ba8b98597 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Wed, 17 Jun 2020 16:17:30 -0600
Subject: [PATCH 07/63] [Maps] layer wizard select re-design (#69313)

* [Maps] layer wizard select re-design

* review feedback

* tslint

* add unit test

* use smaller gutters

* review feedback
---
 x-pack/plugins/maps/common/constants.ts       |   6 +
 .../classes/layers/layer_wizard_registry.ts   |   2 +
 .../observability_layer_wizard.tsx            |   2 +
 .../security/security_layer_wizard.tsx        |   2 +
 .../upload_layer_wizard.tsx                   |   1 +
 .../ems_boundaries_layer_wizard.tsx           |   2 +
 .../ems_base_map_layer_wizard.tsx             |   2 +
 .../clusters_layer_wizard.tsx                 |   2 +
 .../heatmap_layer_wizard.tsx                  |   3 +-
 .../point_2_point_layer_wizard.tsx            |   2 +
 .../es_documents_layer_wizard.tsx             |   3 +-
 .../kibana_regionmap_layer_wizard.tsx         |   2 +
 .../kibana_base_map_layer_wizard.tsx          |   2 +
 .../layer_wizard.tsx                          |   2 +
 .../sources/wms_source/wms_layer_wizard.tsx   |   2 +
 .../sources/xyz_tms_source/layer_wizard.tsx   |   2 +
 .../public/connected_components/_index.scss   |   1 -
 .../add_layer_panel/_index.scss               |  12 --
 .../layer_wizard_select.test.tsx.snap         |  83 ++++++++++
 .../flyout_body/layer_wizard_select.test.tsx  |  59 +++++++
 .../flyout_body/layer_wizard_select.tsx       | 151 +++++++++++++++---
 .../gis_map/_gis_map.scss                     |   4 +-
 22 files changed, 304 insertions(+), 43 deletions(-)
 delete mode 100644 x-pack/plugins/maps/public/connected_components/add_layer_panel/_index.scss
 create mode 100644 x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/__snapshots__/layer_wizard_select.test.tsx.snap
 create mode 100644 x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.test.tsx

diff --git a/x-pack/plugins/maps/common/constants.ts b/x-pack/plugins/maps/common/constants.ts
index ad99780a7d32f..edb395633827f 100644
--- a/x-pack/plugins/maps/common/constants.ts
+++ b/x-pack/plugins/maps/common/constants.ts
@@ -227,3 +227,9 @@ export enum INITIAL_LOCATION {
   FIXED_LOCATION = 'FIXED_LOCATION',
   BROWSER_LOCATION = 'BROWSER_LOCATION',
 }
+
+export enum LAYER_WIZARD_CATEGORY {
+  ELASTICSEARCH = 'ELASTICSEARCH',
+  REFERENCE = 'REFERENCE',
+  SOLUTIONS = 'SOLUTIONS',
+}
diff --git a/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts b/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts
index 2bdeb6446cf28..a255ffb00e312 100644
--- a/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts
+++ b/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts
@@ -7,6 +7,7 @@
 
 import { ReactElement } from 'react';
 import { LayerDescriptor } from '../../../common/descriptor_types';
+import { LAYER_WIZARD_CATEGORY } from '../../../common/constants';
 
 export type RenderWizardArguments = {
   previewLayers: (layerDescriptors: LayerDescriptor[], isIndexingSource?: boolean) => void;
@@ -20,6 +21,7 @@ export type RenderWizardArguments = {
 };
 
 export type LayerWizard = {
+  categories: LAYER_WIZARD_CATEGORY[];
   checkVisibility?: () => Promise<boolean>;
   description: string;
   icon: string;
diff --git a/x-pack/plugins/maps/public/classes/layers/solution_layers/observability/observability_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/layers/solution_layers/observability/observability_layer_wizard.tsx
index db97c08596e06..ddb07a9facee7 100644
--- a/x-pack/plugins/maps/public/classes/layers/solution_layers/observability/observability_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/layers/solution_layers/observability/observability_layer_wizard.tsx
@@ -6,12 +6,14 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { LAYER_WIZARD_CATEGORY } from '../../../../../common/constants';
 import { LayerWizard, RenderWizardArguments } from '../../layer_wizard_registry';
 import { ObservabilityLayerTemplate } from './observability_layer_template';
 import { APM_INDEX_PATTERN_ID } from './create_layer_descriptor';
 import { getIndexPatternService } from '../../../../kibana_services';
 
 export const ObservabilityLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH, LAYER_WIZARD_CATEGORY.SOLUTIONS],
   checkVisibility: async () => {
     try {
       await getIndexPatternService().get(APM_INDEX_PATTERN_ID);
diff --git a/x-pack/plugins/maps/public/classes/layers/solution_layers/security/security_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/layers/solution_layers/security/security_layer_wizard.tsx
index cece00fa37350..f51aa5b40aa80 100644
--- a/x-pack/plugins/maps/public/classes/layers/solution_layers/security/security_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/layers/solution_layers/security/security_layer_wizard.tsx
@@ -6,11 +6,13 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { LAYER_WIZARD_CATEGORY } from '../../../../../common/constants';
 import { LayerWizard, RenderWizardArguments } from '../../layer_wizard_registry';
 import { getSecurityIndexPatterns } from './security_index_pattern_utils';
 import { SecurityLayerTemplate } from './security_layer_template';
 
 export const SecurityLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH, LAYER_WIZARD_CATEGORY.SOLUTIONS],
   checkVisibility: async () => {
     const indexPatterns = await getSecurityIndexPatterns();
     return indexPatterns.length > 0;
diff --git a/x-pack/plugins/maps/public/classes/sources/client_file_source/upload_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/client_file_source/upload_layer_wizard.tsx
index 3f4ec0d3f1268..0a224f75b981d 100644
--- a/x-pack/plugins/maps/public/classes/sources/client_file_source/upload_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/client_file_source/upload_layer_wizard.tsx
@@ -22,6 +22,7 @@ import { GeojsonFileSource } from './geojson_file_source';
 import { VectorLayer } from '../../layers/vector_layer/vector_layer';
 
 export const uploadLayerWizardConfig: LayerWizard = {
+  categories: [],
   description: i18n.translate('xpack.maps.source.geojsonFileDescription', {
     defaultMessage: 'Index GeoJSON data in Elasticsearch',
   }),
diff --git a/x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_boundaries_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_boundaries_layer_wizard.tsx
index 7eec84ef5bb2e..c53a7a4facb0c 100644
--- a/x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_boundaries_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_boundaries_layer_wizard.tsx
@@ -13,8 +13,10 @@ import { EMSFileSource, sourceTitle } from './ems_file_source';
 // @ts-ignore
 import { getIsEmsEnabled } from '../../../kibana_services';
 import { EMSFileSourceDescriptor } from '../../../../common/descriptor_types';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const emsBoundariesLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
   checkVisibility: () => {
     return getIsEmsEnabled();
   },
diff --git a/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx
index 60e67b1ae7053..49d262cbad1a1 100644
--- a/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx
@@ -13,8 +13,10 @@ import { VectorTileLayer } from '../../layers/vector_tile_layer/vector_tile_laye
 // @ts-ignore
 import { TileServiceSelect } from './tile_service_select';
 import { getIsEmsEnabled } from '../../../kibana_services';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const emsBaseMapLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
   checkVisibility: () => {
     return getIsEmsEnabled();
   },
diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx
index b9d5faa8e18f1..715c16b22dc51 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx
@@ -23,6 +23,7 @@ import {
   COUNT_PROP_NAME,
   COLOR_MAP_TYPE,
   FIELD_ORIGIN,
+  LAYER_WIZARD_CATEGORY,
   RENDER_AS,
   VECTOR_STYLES,
   STYLE_TYPE,
@@ -30,6 +31,7 @@ import {
 import { COLOR_GRADIENTS } from '../../styles/color_utils';
 
 export const clustersLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
   description: i18n.translate('xpack.maps.source.esGridClustersDescription', {
     defaultMessage: 'Geospatial data grouped in grids with metrics for each gridded cell',
   }),
diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx
index 79252c7febf8c..92a0f1006ea43 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx
@@ -14,9 +14,10 @@ import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_re
 // @ts-ignore
 import { HeatmapLayer } from '../../layers/heatmap_layer/heatmap_layer';
 import { ESGeoGridSourceDescriptor } from '../../../../common/descriptor_types';
-import { RENDER_AS } from '../../../../common/constants';
+import { LAYER_WIZARD_CATEGORY, RENDER_AS } from '../../../../common/constants';
 
 export const heatmapLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
   description: i18n.translate('xpack.maps.source.esGridHeatmapDescription', {
     defaultMessage: 'Geospatial data grouped in grids to show density',
   }),
diff --git a/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx
index 5169af9bdddf2..ae7414b827c8d 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx
@@ -14,6 +14,7 @@ import { VectorStyle } from '../../styles/vector/vector_style';
 import {
   FIELD_ORIGIN,
   COUNT_PROP_NAME,
+  LAYER_WIZARD_CATEGORY,
   VECTOR_STYLES,
   STYLE_TYPE,
 } from '../../../../common/constants';
@@ -24,6 +25,7 @@ import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_re
 import { ColorDynamicOptions, SizeDynamicOptions } from '../../../../common/descriptor_types';
 
 export const point2PointLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
   description: i18n.translate('xpack.maps.source.pewPewDescription', {
     defaultMessage: 'Aggregated data paths between the source and destination',
   }),
diff --git a/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx
index 888de2e7297cb..4598b1467229d 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx
@@ -13,7 +13,7 @@ import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_re
 import { ESSearchSource, sourceTitle } from './es_search_source';
 import { BlendedVectorLayer } from '../../layers/blended_vector_layer/blended_vector_layer';
 import { VectorLayer } from '../../layers/vector_layer/vector_layer';
-import { SCALING_TYPES } from '../../../../common/constants';
+import { LAYER_WIZARD_CATEGORY, SCALING_TYPES } from '../../../../common/constants';
 
 export function createDefaultLayerDescriptor(sourceConfig: unknown, mapColors: string[]) {
   const sourceDescriptor = ESSearchSource.createDescriptor(sourceConfig);
@@ -24,6 +24,7 @@ export function createDefaultLayerDescriptor(sourceConfig: unknown, mapColors: s
 }
 
 export const esDocumentsLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
   description: i18n.translate('xpack.maps.source.esSearchDescription', {
     defaultMessage: 'Vector data from a Kibana index pattern',
   }),
diff --git a/x-pack/plugins/maps/public/classes/sources/kibana_regionmap_source/kibana_regionmap_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/kibana_regionmap_source/kibana_regionmap_layer_wizard.tsx
index ca78aaefe404f..c8a1c346646e0 100644
--- a/x-pack/plugins/maps/public/classes/sources/kibana_regionmap_source/kibana_regionmap_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/kibana_regionmap_source/kibana_regionmap_layer_wizard.tsx
@@ -13,8 +13,10 @@ import { VectorLayer } from '../../layers/vector_layer/vector_layer';
 // @ts-ignore
 import { CreateSourceEditor } from './create_source_editor';
 import { getKibanaRegionList } from '../../../meta';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const kibanaRegionMapLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
   checkVisibility: async () => {
     const regions = getKibanaRegionList();
     return regions.length > 0;
diff --git a/x-pack/plugins/maps/public/classes/sources/kibana_tilemap_source/kibana_base_map_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/kibana_tilemap_source/kibana_base_map_layer_wizard.tsx
index 84d2e5e74fa9a..9f63372a78511 100644
--- a/x-pack/plugins/maps/public/classes/sources/kibana_tilemap_source/kibana_base_map_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/kibana_tilemap_source/kibana_base_map_layer_wizard.tsx
@@ -13,8 +13,10 @@ import { CreateSourceEditor } from './create_source_editor';
 import { KibanaTilemapSource, sourceTitle } from './kibana_tilemap_source';
 import { TileLayer } from '../../layers/tile_layer/tile_layer';
 import { getKibanaTileMap } from '../../../meta';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const kibanaBasemapLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
   checkVisibility: async () => {
     const tilemap = getKibanaTileMap();
     // @ts-ignore
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx
index c29302a2058b2..067c7f5a47ca3 100644
--- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx
@@ -13,8 +13,10 @@ import {
 import { MVTSingleLayerVectorSource, sourceTitle } from './mvt_single_layer_vector_source';
 import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
 import { TiledVectorLayer } from '../../layers/tiled_vector_layer/tiled_vector_layer';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const mvtVectorSourceWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
   description: i18n.translate('xpack.maps.source.mvtVectorSourceWizard', {
     defaultMessage: 'Vector source wizard',
   }),
diff --git a/x-pack/plugins/maps/public/classes/sources/wms_source/wms_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/wms_source/wms_layer_wizard.tsx
index 62eeef234f414..b3950baf8dbeb 100644
--- a/x-pack/plugins/maps/public/classes/sources/wms_source/wms_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/wms_source/wms_layer_wizard.tsx
@@ -12,8 +12,10 @@ import { WMSCreateSourceEditor } from './wms_create_source_editor';
 import { sourceTitle, WMSSource } from './wms_source';
 import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
 import { TileLayer } from '../../layers/tile_layer/tile_layer';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const wmsLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
   description: i18n.translate('xpack.maps.source.wmsDescription', {
     defaultMessage: 'Maps from OGC Standard WMS',
   }),
diff --git a/x-pack/plugins/maps/public/classes/sources/xyz_tms_source/layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/xyz_tms_source/layer_wizard.tsx
index b99b17c1d22d4..48c526855d3a4 100644
--- a/x-pack/plugins/maps/public/classes/sources/xyz_tms_source/layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/xyz_tms_source/layer_wizard.tsx
@@ -10,8 +10,10 @@ import { XYZTMSEditor, XYZTMSSourceConfig } from './xyz_tms_editor';
 import { XYZTMSSource, sourceTitle } from './xyz_tms_source';
 import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
 import { TileLayer } from '../../layers/tile_layer/tile_layer';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const tmsLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
   description: i18n.translate('xpack.maps.source.ems_xyzDescription', {
     defaultMessage: 'Tile map service configured in interface',
   }),
diff --git a/x-pack/plugins/maps/public/connected_components/_index.scss b/x-pack/plugins/maps/public/connected_components/_index.scss
index 6de2a51590700..bd8070e8c36fd 100644
--- a/x-pack/plugins/maps/public/connected_components/_index.scss
+++ b/x-pack/plugins/maps/public/connected_components/_index.scss
@@ -1,5 +1,4 @@
 @import 'gis_map/gis_map';
-@import 'add_layer_panel/index';
 @import 'layer_panel/index';
 @import 'widget_overlay/index';
 @import 'toolbar_overlay/index';
diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/_index.scss b/x-pack/plugins/maps/public/connected_components/add_layer_panel/_index.scss
deleted file mode 100644
index 4e60b8d4b7c4b..0000000000000
--- a/x-pack/plugins/maps/public/connected_components/add_layer_panel/_index.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.mapLayerAddpanel__card {
-  // EUITODO: Fix horizontal layout so it works with any size icon
-  .euiCard__content {
-    // sass-lint:disable-block no-important
-    padding-top: 0 !important;
-  }
-
-  .euiCard__top + .euiCard__content {
-    // sass-lint:disable-block no-important
-    padding-top: 2px !important;
-  }
-}
diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/__snapshots__/layer_wizard_select.test.tsx.snap b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/__snapshots__/layer_wizard_select.test.tsx.snap
new file mode 100644
index 0000000000000..ef11f9958d8db
--- /dev/null
+++ b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/__snapshots__/layer_wizard_select.test.tsx.snap
@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LayerWizardSelect Should render layer select after layer wizards are loaded 1`] = `
+<Fragment>
+  <EuiFacetGroup
+    layout="horizontal"
+  >
+    <EuiFacetButton
+      isSelected={true}
+      key="all"
+      onClick={[Function]}
+    >
+      <FormattedMessage
+        defaultMessage="All"
+        id="xpack.maps.layerWizardSelect.allCategories"
+        values={Object {}}
+      />
+    </EuiFacetButton>
+    <EuiFacetButton
+      isSelected={false}
+      key="ELASTICSEARCH"
+      onClick={[Function]}
+    >
+      Elasticsearch
+    </EuiFacetButton>
+    <EuiFacetButton
+      isSelected={false}
+      key="SOLUTIONS"
+      onClick={[Function]}
+    >
+      Solutions
+    </EuiFacetButton>
+  </EuiFacetGroup>
+  <EuiSpacer
+    size="s"
+  />
+  <EuiFlexGrid
+    columns={2}
+    gutterSize="m"
+  >
+    <EuiFlexItem
+      key="wizard 1"
+    >
+      <EuiCard
+        data-test-subj="wizard1"
+        description="mock wizard without icon"
+        onClick={[Function]}
+        title="wizard 1"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem
+      key="wizard 2"
+    >
+      <EuiCard
+        data-test-subj="wizard2"
+        description="mock wizard with icon"
+        icon={
+          <EuiIcon
+            size="l"
+            type="logoObservability"
+          />
+        }
+        onClick={[Function]}
+        title="wizard 2"
+      />
+    </EuiFlexItem>
+  </EuiFlexGrid>
+</Fragment>
+`;
+
+exports[`LayerWizardSelect Should render loading screen before layer wizards are loaded 1`] = `
+<div>
+  <EuiCard
+    description={
+      <EuiLoadingContent
+        lines={2}
+      />
+    }
+    layout="horizontal"
+    title=""
+  />
+</div>
+`;
diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.test.tsx b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.test.tsx
new file mode 100644
index 0000000000000..e802c5259e5ed
--- /dev/null
+++ b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.test.tsx
@@ -0,0 +1,59 @@
+/*
+ * 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.
+ */
+
+jest.mock('../../../classes/layers/layer_wizard_registry', () => ({}));
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { LayerWizardSelect } from './layer_wizard_select';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
+
+const defaultProps = {
+  onSelect: () => {},
+};
+
+describe('LayerWizardSelect', () => {
+  beforeAll(() => {
+    require('../../../classes/layers/layer_wizard_registry').getLayerWizards = async () => {
+      return [
+        {
+          categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
+          description: 'mock wizard without icon',
+          renderWizard: () => {
+            return <div />;
+          },
+          title: 'wizard 1',
+        },
+        {
+          categories: [LAYER_WIZARD_CATEGORY.SOLUTIONS],
+          description: 'mock wizard with icon',
+          icon: 'logoObservability',
+          renderWizard: () => {
+            return <div />;
+          },
+          title: 'wizard 2',
+        },
+      ];
+    };
+  });
+
+  test('Should render layer select after layer wizards are loaded', async () => {
+    const component = shallow(<LayerWizardSelect {...defaultProps} />);
+
+    // Ensure all promises resolve
+    await new Promise((resolve) => process.nextTick(resolve));
+    // Ensure the state changes are reflected
+    component.update();
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('Should render loading screen before layer wizards are loaded', () => {
+    const component = shallow(<LayerWizardSelect {...defaultProps} />);
+
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.tsx b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.tsx
index b0c50133ceabb..f0195bc5dee2f 100644
--- a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.tsx
+++ b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.tsx
@@ -5,26 +5,63 @@
  */
 
 import _ from 'lodash';
-import React, { Component, Fragment } from 'react';
-import { EuiSpacer, EuiCard, EuiIcon } from '@elastic/eui';
-import { EuiLoadingContent } from '@elastic/eui';
+import React, { Component } from 'react';
+import {
+  EuiCard,
+  EuiIcon,
+  EuiFlexGrid,
+  EuiFlexItem,
+  EuiLoadingContent,
+  EuiFacetGroup,
+  EuiFacetButton,
+  EuiSpacer,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 import { getLayerWizards, LayerWizard } from '../../../classes/layers/layer_wizard_registry';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 interface Props {
   onSelect: (layerWizard: LayerWizard) => void;
 }
 
 interface State {
-  layerWizards: LayerWizard[];
+  activeCategories: LAYER_WIZARD_CATEGORY[];
   hasLoadedWizards: boolean;
+  layerWizards: LayerWizard[];
+  selectedCategory: LAYER_WIZARD_CATEGORY | null;
+}
+
+function getCategoryLabel(category: LAYER_WIZARD_CATEGORY): string {
+  if (category === LAYER_WIZARD_CATEGORY.ELASTICSEARCH) {
+    return i18n.translate('xpack.maps.layerWizardSelect.elasticsearchCategoryLabel', {
+      defaultMessage: 'Elasticsearch',
+    });
+  }
+
+  if (category === LAYER_WIZARD_CATEGORY.REFERENCE) {
+    return i18n.translate('xpack.maps.layerWizardSelect.referenceCategoryLabel', {
+      defaultMessage: 'Reference',
+    });
+  }
+
+  if (category === LAYER_WIZARD_CATEGORY.SOLUTIONS) {
+    return i18n.translate('xpack.maps.layerWizardSelect.solutionsCategoryLabel', {
+      defaultMessage: 'Solutions',
+    });
+  }
+
+  throw new Error(`Unexpected category: ${category}`);
 }
 
 export class LayerWizardSelect extends Component<Props, State> {
   private _isMounted: boolean = false;
 
   state = {
-    layerWizards: [],
+    activeCategories: [],
     hasLoadedWizards: false,
+    layerWizards: [],
+    selectedCategory: null,
   };
 
   componentDidMount() {
@@ -38,9 +75,57 @@ export class LayerWizardSelect extends Component<Props, State> {
 
   async _loadLayerWizards() {
     const layerWizards = await getLayerWizards();
+    const activeCategories: LAYER_WIZARD_CATEGORY[] = [];
+    layerWizards.forEach((layerWizard: LayerWizard) => {
+      layerWizard.categories.forEach((category: LAYER_WIZARD_CATEGORY) => {
+        if (!activeCategories.includes(category)) {
+          activeCategories.push(category);
+        }
+      });
+    });
+
     if (this._isMounted) {
-      this.setState({ layerWizards, hasLoadedWizards: true });
+      this.setState({
+        activeCategories,
+        layerWizards,
+        hasLoadedWizards: true,
+      });
+    }
+  }
+
+  _filterByCategory(category: LAYER_WIZARD_CATEGORY | null) {
+    this.setState({ selectedCategory: category });
+  }
+
+  _renderCategoryFacets() {
+    if (this.state.activeCategories.length === 0) {
+      return null;
     }
+
+    const facets = this.state.activeCategories.map((category: LAYER_WIZARD_CATEGORY) => {
+      return (
+        <EuiFacetButton
+          key={category}
+          isSelected={category === this.state.selectedCategory}
+          onClick={() => this._filterByCategory(category)}
+        >
+          {getCategoryLabel(category)}
+        </EuiFacetButton>
+      );
+    });
+
+    return (
+      <EuiFacetGroup layout="horizontal">
+        <EuiFacetButton
+          key="all"
+          isSelected={!this.state.selectedCategory}
+          onClick={() => this._filterByCategory(null)}
+        >
+          <FormattedMessage id="xpack.maps.layerWizardSelect.allCategories" defaultMessage="All" />
+        </EuiFacetButton>
+        {facets}
+      </EuiFacetGroup>
+    );
   }
 
   render() {
@@ -51,27 +136,41 @@ export class LayerWizardSelect extends Component<Props, State> {
         </div>
       );
     }
-    return this.state.layerWizards.map((layerWizard: LayerWizard) => {
-      const icon = layerWizard.icon ? <EuiIcon type={layerWizard.icon} size="l" /> : undefined;
 
-      const onClick = () => {
-        this.props.onSelect(layerWizard);
-      };
+    const wizardCards = this.state.layerWizards
+      .filter((layerWizard: LayerWizard) => {
+        return this.state.selectedCategory
+          ? layerWizard.categories.includes(this.state.selectedCategory!)
+          : true;
+      })
+      .map((layerWizard: LayerWizard) => {
+        const icon = layerWizard.icon ? <EuiIcon type={layerWizard.icon} size="l" /> : undefined;
 
-      return (
-        <Fragment key={layerWizard.title}>
-          <EuiSpacer size="s" />
-          <EuiCard
-            className="mapLayerAddpanel__card"
-            title={layerWizard.title}
-            icon={icon}
-            onClick={onClick}
-            description={layerWizard.description}
-            layout="horizontal"
-            data-test-subj={_.camelCase(layerWizard.title)}
-          />
-        </Fragment>
-      );
-    });
+        const onClick = () => {
+          this.props.onSelect(layerWizard);
+        };
+
+        return (
+          <EuiFlexItem key={layerWizard.title}>
+            <EuiCard
+              title={layerWizard.title}
+              icon={icon}
+              onClick={onClick}
+              description={layerWizard.description}
+              data-test-subj={_.camelCase(layerWizard.title)}
+            />
+          </EuiFlexItem>
+        );
+      });
+
+    return (
+      <>
+        {this._renderCategoryFacets()}
+        <EuiSpacer size="s" />
+        <EuiFlexGrid columns={2} gutterSize="m">
+          {wizardCards}
+        </EuiFlexGrid>
+      </>
+    );
   }
 }
diff --git a/x-pack/plugins/maps/public/connected_components/gis_map/_gis_map.scss b/x-pack/plugins/maps/public/connected_components/gis_map/_gis_map.scss
index 85168d970c6de..2180573ef4583 100644
--- a/x-pack/plugins/maps/public/connected_components/gis_map/_gis_map.scss
+++ b/x-pack/plugins/maps/public/connected_components/gis_map/_gis_map.scss
@@ -9,11 +9,11 @@
   overflow: hidden;
 
   > * {
-    width: $euiSizeXXL * 11;
+    width: $euiSizeXXL * 12;
   }
 
   &-isVisible {
-    width: $euiSizeXXL * 11;
+    width: $euiSizeXXL * 12;
     transition: width $euiAnimSpeedNormal $euiAnimSlightResistance;
   }
 }

From 789851eb1a2d794b17fdcdbfc474679ddd493d0b Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Wed, 17 Jun 2020 16:46:16 -0700
Subject: [PATCH 08/63] skip flaky suite (#52854)

---
 test/functional/apps/dashboard/dashboard_snapshots.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/test/functional/apps/dashboard/dashboard_snapshots.js b/test/functional/apps/dashboard/dashboard_snapshots.js
index 787e839aa08a5..20bc30c889d65 100644
--- a/test/functional/apps/dashboard/dashboard_snapshots.js
+++ b/test/functional/apps/dashboard/dashboard_snapshots.js
@@ -28,7 +28,8 @@ export default function ({ getService, getPageObjects, updateBaselines }) {
   const dashboardPanelActions = getService('dashboardPanelActions');
   const dashboardAddPanel = getService('dashboardAddPanel');
 
-  describe('dashboard snapshots', function describeIndexTests() {
+  // FLAKY: https://github.com/elastic/kibana/issues/52854
+  describe.skip('dashboard snapshots', function describeIndexTests() {
     before(async function () {
       await esArchiver.load('dashboard/current/kibana');
       await kibanaServer.uiSettings.replace({

From 2642d658c4a94fc77017ad425a442cd65baa2521 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <nathan.smith@elastic.co>
Date: Wed, 17 Jun 2020 19:18:15 -0500
Subject: [PATCH 09/63] [APM] License feature tracking for service maps
 (#69455)

Use the license feature API to register the service maps feature and track its usage when the API endpoint is accessed.

Fixes #64850.
---
 x-pack/plugins/apm/server/feature.ts          |  3 ++
 x-pack/plugins/apm/server/plugin.ts           | 39 +++++++++++++------
 .../server/routes/create_api/index.test.ts    |  3 +-
 .../plugins/apm/server/routes/service_map.ts  |  5 +++
 x-pack/plugins/apm/server/routes/typings.ts   |  5 ++-
 5 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/x-pack/plugins/apm/server/feature.ts b/x-pack/plugins/apm/server/feature.ts
index 60a7be9391eea..80f722bae0868 100644
--- a/x-pack/plugins/apm/server/feature.ts
+++ b/x-pack/plugins/apm/server/feature.ts
@@ -70,3 +70,6 @@ export const APM_FEATURE = {
     },
   },
 };
+
+export const APM_SERVICE_MAPS_FEATURE_NAME = 'APM service maps';
+export const APM_SERVICE_MAPS_LICENSE_TYPE = 'platinum';
diff --git a/x-pack/plugins/apm/server/plugin.ts b/x-pack/plugins/apm/server/plugin.ts
index f0a05dfc0df30..eb781ee078307 100644
--- a/x-pack/plugins/apm/server/plugin.ts
+++ b/x-pack/plugins/apm/server/plugin.ts
@@ -14,7 +14,7 @@ import {
 import { Observable, combineLatest } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 import { ObservabilityPluginSetup } from '../../observability/server';
-import { SecurityPluginSetup } from '../../security/public';
+import { SecurityPluginSetup } from '../../security/server';
 import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/server';
 import { TaskManagerSetupContract } from '../../task_manager/server';
 import { AlertingPlugin } from '../../alerts/server';
@@ -28,11 +28,19 @@ import { APMConfig, mergeConfigs, APMXPackConfig } from '.';
 import { HomeServerPluginSetup } from '../../../../src/plugins/home/server';
 import { CloudSetup } from '../../cloud/server';
 import { getInternalSavedObjectsClient } from './lib/helpers/get_internal_saved_objects_client';
-import { LicensingPluginSetup } from '../../licensing/public';
+import {
+  LicensingPluginSetup,
+  LicensingPluginStart,
+} from '../../licensing/server';
 import { registerApmAlerts } from './lib/alerts/register_apm_alerts';
 import { createApmTelemetry } from './lib/apm_telemetry';
+
 import { PluginSetupContract as FeaturesPluginSetup } from '../../features/server';
-import { APM_FEATURE } from './feature';
+import {
+  APM_FEATURE,
+  APM_SERVICE_MAPS_FEATURE_NAME,
+  APM_SERVICE_MAPS_LICENSE_TYPE,
+} from './feature';
 import { apmIndices, apmTelemetry } from './saved_objects';
 import { createElasticCloudInstructions } from './tutorial/elastic_cloud';
 import { MlPluginSetup } from '../../ml/server';
@@ -120,16 +128,25 @@ export class APMPlugin implements Plugin<APMPluginSetup> {
         elasticCloud: createElasticCloudInstructions(plugins.cloud),
       };
     });
+
     plugins.features.registerFeature(APM_FEATURE);
+    plugins.licensing.featureUsage.register(
+      APM_SERVICE_MAPS_FEATURE_NAME,
+      APM_SERVICE_MAPS_LICENSE_TYPE
+    );
 
-    createApmApi().init(core, {
-      config$: mergedConfig$,
-      logger: this.logger!,
-      plugins: {
-        observability: plugins.observability,
-        security: plugins.security,
-        ml: plugins.ml,
-      },
+    core.getStartServices().then(([_coreStart, pluginsStart]) => {
+      createApmApi().init(core, {
+        config$: mergedConfig$,
+        logger: this.logger!,
+        plugins: {
+          licensing: (pluginsStart as { licensing: LicensingPluginStart })
+            .licensing,
+          observability: plugins.observability,
+          security: plugins.security,
+          ml: plugins.ml,
+        },
+      });
     });
 
     return {
diff --git a/x-pack/plugins/apm/server/routes/create_api/index.test.ts b/x-pack/plugins/apm/server/routes/create_api/index.test.ts
index 3d3e26f680e0d..f5db936c00d3a 100644
--- a/x-pack/plugins/apm/server/routes/create_api/index.test.ts
+++ b/x-pack/plugins/apm/server/routes/create_api/index.test.ts
@@ -9,6 +9,7 @@ import { CoreSetup, Logger } from 'src/core/server';
 import { Params } from '../typings';
 import { BehaviorSubject } from 'rxjs';
 import { APMConfig } from '../..';
+import { LicensingPluginStart } from '../../../../licensing/server';
 
 const getCoreMock = () => {
   const get = jest.fn();
@@ -40,7 +41,7 @@ const getCoreMock = () => {
       logger: ({
         error: jest.fn(),
       } as unknown) as Logger,
-      plugins: {},
+      plugins: { licensing: {} as LicensingPluginStart },
     },
   };
 };
diff --git a/x-pack/plugins/apm/server/routes/service_map.ts b/x-pack/plugins/apm/server/routes/service_map.ts
index df0403be7b975..3937c18b3fe5e 100644
--- a/x-pack/plugins/apm/server/routes/service_map.ts
+++ b/x-pack/plugins/apm/server/routes/service_map.ts
@@ -15,6 +15,7 @@ import { getServiceMap } from '../lib/service_map/get_service_map';
 import { getServiceMapServiceNodeInfo } from '../lib/service_map/get_service_map_service_node_info';
 import { createRoute } from './create_route';
 import { rangeRt } from './default_api_types';
+import { APM_SERVICE_MAPS_FEATURE_NAME } from '../feature';
 
 export const serviceMapRoute = createRoute(() => ({
   path: '/api/apm/service-map',
@@ -35,6 +36,10 @@ export const serviceMapRoute = createRoute(() => ({
       throw Boom.forbidden(invalidLicenseMessage);
     }
 
+    context.plugins.licensing.featureUsage.notifyUsage(
+      APM_SERVICE_MAPS_FEATURE_NAME
+    );
+
     const setup = await setupRequest(context, request);
     const {
       query: { serviceName, environment },
diff --git a/x-pack/plugins/apm/server/routes/typings.ts b/x-pack/plugins/apm/server/routes/typings.ts
index bc31cb7a582af..f30a9d18d7aea 100644
--- a/x-pack/plugins/apm/server/routes/typings.ts
+++ b/x-pack/plugins/apm/server/routes/typings.ts
@@ -14,10 +14,11 @@ import {
 import { PickByValue, Optional } from 'utility-types';
 import { Observable } from 'rxjs';
 import { Server } from 'hapi';
+import { LicensingPluginStart } from '../../../licensing/server';
 import { ObservabilityPluginSetup } from '../../../observability/server';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { FetchOptions } from '../../public/services/rest/callApi';
-import { SecurityPluginSetup } from '../../../security/public';
+import { SecurityPluginSetup } from '../../../security/server';
 import { MlPluginSetup } from '../../../ml/server';
 import { APMConfig } from '..';
 
@@ -66,6 +67,7 @@ export type APMRequestHandlerContext<
   config: APMConfig;
   logger: Logger;
   plugins: {
+    licensing: LicensingPluginStart;
     observability?: ObservabilityPluginSetup;
     security?: SecurityPluginSetup;
     ml?: MlPluginSetup;
@@ -114,6 +116,7 @@ export interface ServerAPI<TRouteState extends RouteState> {
       config$: Observable<APMConfig>;
       logger: Logger;
       plugins: {
+        licensing: LicensingPluginStart;
         observability?: ObservabilityPluginSetup;
         security?: SecurityPluginSetup;
         ml?: MlPluginSetup;

From dea2768545080cc779cac30a2d2f9d85b7a50f0f Mon Sep 17 00:00:00 2001
From: MadameSheema <snootchie.boochies@gmail.com>
Date: Thu, 18 Jun 2020 08:22:50 +0200
Subject: [PATCH 10/63] fixes screenshots upload (#69392)

---
 vars/kibanaPipeline.groovy | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vars/kibanaPipeline.groovy b/vars/kibanaPipeline.groovy
index ca9af5d2346cd..4a5c8dff8a230 100644
--- a/vars/kibanaPipeline.groovy
+++ b/vars/kibanaPipeline.groovy
@@ -98,7 +98,7 @@ def withGcsArtifactUpload(workerName, closure) {
   def uploadPrefix = "kibana-ci-artifacts/jobs/${env.JOB_NAME}/${BUILD_NUMBER}/${workerName}"
   def ARTIFACT_PATTERNS = [
     'target/kibana-*',
-    'target/kibana-siem/**/*.png',
+    'target/kibana-security-solution/**/*.png',
     'target/junit/**/*',
     'test/**/screenshots/**/*.png',
     'test/functional/failure_debug/html/*.html',

From 9f9a5c69f94a03cc41c738480088161dd814adae Mon Sep 17 00:00:00 2001
From: Mikhail Shustov <restrry@gmail.com>
Date: Thu, 18 Jun 2020 09:53:16 +0300
Subject: [PATCH 11/63] Remove unused deps (#69243)

* remove unused deps

* move types in devDeps
---
 package.json |  6 ++----
 yarn.lock    | 28 ----------------------------
 2 files changed, 2 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index e91c5e96b78ab..06dfb4cdfe387 100644
--- a/package.json
+++ b/package.json
@@ -144,7 +144,6 @@
     "@kbn/test-subj-selector": "0.2.1",
     "@kbn/ui-framework": "1.0.0",
     "@kbn/ui-shared-deps": "1.0.0",
-    "@types/tar": "^4.0.3",
     "JSONStream": "1.3.5",
     "abortcontroller-polyfill": "^1.4.0",
     "accept": "3.0.2",
@@ -390,9 +389,10 @@
     "@types/styled-components": "^5.1.0",
     "@types/supertest": "^2.0.5",
     "@types/supertest-as-promised": "^2.0.38",
+    "@types/tar": "^4.0.3",
+    "@types/testing-library__dom": "^6.10.0",
     "@types/testing-library__react": "^9.1.2",
     "@types/testing-library__react-hooks": "^3.1.0",
-    "@types/testing-library__dom": "^6.10.0",
     "@types/type-detect": "^4.0.1",
     "@types/uuid": "^3.4.4",
     "@types/vinyl-fs": "^2.4.11",
@@ -486,12 +486,10 @@
     "prettier": "^2.0.5",
     "proxyquire": "1.8.0",
     "react-popper-tooltip": "^2.10.1",
-    "react-textarea-autosize": "^7.1.2",
     "regenerate": "^1.4.0",
     "sass-lint": "^1.12.1",
     "selenium-webdriver": "^4.0.0-alpha.7",
     "simple-git": "1.116.0",
-    "simplebar-react": "^2.1.0",
     "sinon": "^7.4.2",
     "strip-ansi": "^3.0.1",
     "supertest": "^3.1.0",
diff --git a/yarn.lock b/yarn.lock
index c9bbbd8a999f8..256c8642a02ae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -25637,14 +25637,6 @@ react-textarea-autosize@^7.1.0:
     "@babel/runtime" "^7.1.2"
     prop-types "^15.6.0"
 
-react-textarea-autosize@^7.1.2:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-7.1.2.tgz#70fdb333ef86bcca72717e25e623e90c336e2cda"
-  integrity sha512-uH3ORCsCa3C6LHxExExhF4jHoXYCQwE5oECmrRsunlspaDAbS4mGKNlWZqjLfInWtFQcf0o1n1jC/NGXFdUBCg==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    prop-types "^15.6.0"
-
 react-tiny-virtual-list@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/react-tiny-virtual-list/-/react-tiny-virtual-list-2.2.0.tgz#eafb6fcf764e4ed41150ff9752cdaad8b35edf4a"
@@ -27892,14 +27884,6 @@ simplebar-react@^1.0.0-alpha.6:
     prop-types "^15.6.1"
     simplebar "^4.2.0"
 
-simplebar-react@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/simplebar-react/-/simplebar-react-2.1.0.tgz#57d524f4253579d81ac30db00acf7886b17bf826"
-  integrity sha512-UIMFPNkn6o57v058vPOiYbnbpc1CUZwPKLmQaDMvEJdgm+btZ2umFA6meXfiqFEQUjDE6Vq4ePnL7Fr6nzJd8w==
-  dependencies:
-    prop-types "^15.6.1"
-    simplebar "^5.1.0"
-
 simplebar@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-4.2.0.tgz#97e5c1c85d05cc04f8c92939e4da71dd087e325c"
@@ -27912,18 +27896,6 @@ simplebar@^4.2.0:
     lodash.throttle "^4.1.1"
     resize-observer-polyfill "^1.5.1"
 
-simplebar@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-5.1.0.tgz#15437ace314ec888accd7d8f24ada672e9bb2717"
-  integrity sha512-bdi1SleK1YOSnfeUjo5UQXt/79zNjsCJVEfzrm6photmGi2aU6x0l7rX4KAGcrtj5AwsWPBVXgDyYAqbbpnuRg==
-  dependencies:
-    can-use-dom "^0.1.0"
-    core-js "^3.0.1"
-    lodash.debounce "^4.0.8"
-    lodash.memoize "^4.1.2"
-    lodash.throttle "^4.1.1"
-    resize-observer-polyfill "^1.5.1"
-
 simplicial-complex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/simplicial-complex/-/simplicial-complex-1.0.0.tgz#6c33a4ed69fcd4d91b7bcadd3b30b63683eae241"

From f27162a2133f71ce0b6050a864a05383e3049706 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Casper=20H=C3=BCbertz?= <casper@elastic.co>
Date: Thu, 18 Jun 2020 09:35:48 +0200
Subject: [PATCH 12/63] [Observability] Creates "Add data" links in all
 Observability app headers (#69016)

* Add data options to all Observability app headers

* Updated failing snapshot

* [Uptime] Update snapshot

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../components/app/ServiceDetails/index.tsx   | 24 ++++++++++++++++++-
 .../ServiceOverview.test.tsx.snap             |  2 +-
 .../shared/Links/SetupInstructionsLink.tsx    | 10 +++++---
 .../infra/public/pages/logs/page_content.tsx  | 18 +++++++++++++-
 .../infra/public/pages/metrics/index.tsx      | 20 +++++++++++++++-
 .../__snapshots__/page_header.test.tsx.snap   | 23 ++++++++++++++++++
 .../uptime/public/pages/page_header.tsx       | 16 +++++++++++++
 7 files changed, 106 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/ServiceDetails/index.tsx b/x-pack/plugins/apm/public/components/app/ServiceDetails/index.tsx
index 0dbde5ea86a18..2d52ad88d20dc 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceDetails/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceDetails/index.tsx
@@ -4,8 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+  EuiButtonEmpty,
+} from '@elastic/eui';
 import React from 'react';
+import { i18n } from '@kbn/i18n';
 import { ApmHeader } from '../../shared/ApmHeader';
 import { ServiceDetailTabs } from './ServiceDetailTabs';
 import { ServiceIntegrations } from './ServiceIntegrations';
@@ -33,6 +39,12 @@ export function ServiceDetails({ tab }: Props) {
   const isAlertingAvailable =
     isAlertingPluginEnabled && (canReadAlerts || canSaveAlerts);
 
+  const { core } = useApmPluginContext();
+
+  const ADD_DATA_LABEL = i18n.translate('xpack.apm.addDataButtonLabel', {
+    defaultMessage: 'Add data',
+  });
+
   return (
     <div>
       <ApmHeader>
@@ -53,6 +65,16 @@ export function ServiceDetails({ tab }: Props) {
               />
             </EuiFlexItem>
           )}
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              href={core.http.basePath.prepend('/app/home#/tutorial/apm')}
+              size="s"
+              color="primary"
+              iconType="plusInCircle"
+            >
+              {ADD_DATA_LABEL}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
         </EuiFlexGroup>
       </ApmHeader>
 
diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap
index e89acca55d4fe..241ba8c244496 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap
@@ -114,7 +114,7 @@ NodeList [
                   <span
                     class="euiButton__text"
                   >
-                    Setup Instructions
+                    Setup instructions
                   </span>
                 </span>
               </button>
diff --git a/x-pack/plugins/apm/public/components/shared/Links/SetupInstructionsLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/SetupInstructionsLink.tsx
index e85605e42981c..a5bcec1501ad3 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/SetupInstructionsLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/SetupInstructionsLink.tsx
@@ -12,10 +12,14 @@ import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
 const SETUP_INSTRUCTIONS_LABEL = i18n.translate(
   'xpack.apm.setupInstructionsButtonLabel',
   {
-    defaultMessage: 'Setup Instructions',
+    defaultMessage: 'Setup instructions',
   }
 );
 
+const ADD_DATA_LABEL = i18n.translate('xpack.apm.addDataButtonLabel', {
+  defaultMessage: 'Add data',
+});
+
 // renders a filled button or a link as a kibana link to setup instructions
 export function SetupInstructionsLink({
   buttonFill = false,
@@ -30,8 +34,8 @@ export function SetupInstructionsLink({
           {SETUP_INSTRUCTIONS_LABEL}
         </EuiButton>
       ) : (
-        <EuiButtonEmpty size="s" color="primary" iconType="help">
-          {SETUP_INSTRUCTIONS_LABEL}
+        <EuiButtonEmpty size="s" color="primary" iconType="plusInCircle">
+          {ADD_DATA_LABEL}
         </EuiButtonEmpty>
       )}
     </EuiLink>
diff --git a/x-pack/plugins/infra/public/pages/logs/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
index 14c53557ba2c7..78b7f86993cbd 100644
--- a/x-pack/plugins/infra/public/pages/logs/page_content.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
@@ -32,6 +32,8 @@ export const LogsPageContent: React.FunctionComponent = () => {
 
   const { initialize } = useLogSourceContext();
 
+  const kibana = useKibana();
+
   useMount(() => {
     initialize();
   });
@@ -88,6 +90,16 @@ export const LogsPageContent: React.FunctionComponent = () => {
           <EuiFlexItem grow={false}>
             <AlertDropdown />
           </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              href={kibana.services?.application?.getUrlForApp('/home#/tutorial_directory/logging')}
+              size="s"
+              color="primary"
+              iconType="plusInCircle"
+            >
+              {ADD_DATA_LABEL}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
         </EuiFlexGroup>
       </AppNavigation>
       <Switch>
@@ -123,3 +135,7 @@ const settingsTabTitle = i18n.translate('xpack.infra.logs.index.settingsTabTitle
 });
 
 const feedbackLinkUrl = 'https://discuss.elastic.co/c/logs';
+
+const ADD_DATA_LABEL = i18n.translate('xpack.infra.logsHeaderAddDataButtonLabel', {
+  defaultMessage: 'Add data',
+});
diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx
index 35a6cadc786f6..05296fbf6b0a3 100644
--- a/x-pack/plugins/infra/public/pages/metrics/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/index.tsx
@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 
-import { EuiErrorBoundary, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+import { EuiErrorBoundary, EuiFlexItem, EuiFlexGroup, EuiButtonEmpty } from '@elastic/eui';
 import { DocumentTitle } from '../../components/document_title';
 import { HelpCenterContent } from '../../components/help_center_content';
 import { RoutedTabs } from '../../components/navigation/routed_tabs';
@@ -32,9 +32,15 @@ import { WaffleFiltersProvider } from './inventory_view/hooks/use_waffle_filters
 import { InventoryAlertDropdown } from '../../components/alerting/inventory/alert_dropdown';
 import { MetricsAlertDropdown } from '../../alerting/metric_threshold/components/alert_dropdown';
 
+const ADD_DATA_LABEL = i18n.translate('xpack.infra.metricsHeaderAddDataButtonLabel', {
+  defaultMessage: 'Add data',
+});
+
 export const InfrastructurePage = ({ match }: RouteComponentProps) => {
   const uiCapabilities = useKibana().services.application?.capabilities;
 
+  const kibana = useKibana();
+
   return (
     <EuiErrorBoundary>
       <Source.Provider sourceId="default">
@@ -102,6 +108,18 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
                       <Route path={'/explorer'} component={MetricsAlertDropdown} />
                       <Route path={'/inventory'} component={InventoryAlertDropdown} />
                     </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiButtonEmpty
+                        href={kibana.services?.application?.getUrlForApp(
+                          '/home#/tutorial_directory/metrics'
+                        )}
+                        size="s"
+                        color="primary"
+                        iconType="plusInCircle"
+                      >
+                        {ADD_DATA_LABEL}
+                      </EuiButtonEmpty>
+                    </EuiFlexItem>
                   </EuiFlexGroup>
                 </AppNavigation>
 
diff --git a/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap b/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap
index dbdfd6b27e69f..fcf68ad97c8ce 100644
--- a/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap
@@ -104,6 +104,29 @@ Array [
             </button>
           </a>
         </div>
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <button
+            class="euiButtonEmpty euiButtonEmpty--primary"
+            type="button"
+          >
+            <span
+              class="euiButtonEmpty__content"
+            >
+              <div
+                aria-hidden="true"
+                class="euiButtonEmpty__icon"
+                data-euiicon-type="plusInCircle"
+              />
+              <span
+                class="euiButtonEmpty__text"
+              >
+                Add data
+              </span>
+            </span>
+          </button>
+        </div>
       </div>
     </div>
     <div
diff --git a/x-pack/plugins/uptime/public/pages/page_header.tsx b/x-pack/plugins/uptime/public/pages/page_header.tsx
index 3b228afe904f4..421e0e3a4ebde 100644
--- a/x-pack/plugins/uptime/public/pages/page_header.tsx
+++ b/x-pack/plugins/uptime/public/pages/page_header.tsx
@@ -12,6 +12,7 @@ import styled from 'styled-components';
 import { UptimeDatePicker } from '../components/common/uptime_date_picker';
 import { SETTINGS_ROUTE } from '../../common/constants';
 import { ToggleAlertFlyoutButton } from '../components/overview/alerts/alerts_containers';
+import { useKibana } from '../../../../../src/plugins/kibana_react/public';
 
 interface PageHeaderProps {
   headingText: string | JSX.Element;
@@ -23,6 +24,10 @@ const SETTINGS_LINK_TEXT = i18n.translate('xpack.uptime.page_header.settingsLink
   defaultMessage: 'Settings',
 });
 
+const ADD_DATA_LABEL = i18n.translate('xpack.uptime.addDataButtonLabel', {
+  defaultMessage: 'Add data',
+});
+
 const StyledPicker = styled(EuiFlexItem)`
   &&& {
     @media only screen and (max-width: 1024px) and (min-width: 868px) {
@@ -52,6 +57,8 @@ export const PageHeader = React.memo(
         </StyledPicker>
       ) : null;
 
+    const kibana = useKibana();
+
     const extraLinkComponents = !extraLinks ? null : (
       <EuiFlexGroup alignItems="flexEnd" responsive={false}>
         <EuiFlexItem grow={false}>
@@ -64,6 +71,15 @@ export const PageHeader = React.memo(
             </EuiButtonEmpty>
           </Link>
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
+            href={kibana.services?.application?.getUrlForApp('/home#/tutorial/uptimeMonitors')}
+            color="primary"
+            iconType="plusInCircle"
+          >
+            {ADD_DATA_LABEL}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
       </EuiFlexGroup>
     );
 

From daf20daf2dc40999e60c18413807bc933bf47d04 Mon Sep 17 00:00:00 2001
From: Pierre Gayvallet <pierre.gayvallet@elastic.co>
Date: Thu, 18 Jun 2020 11:32:13 +0200
Subject: [PATCH 13/63] Beats Management: Pre-migration cleanup (#69155)

* adapt KibanaDatabaseAdapter to use core ES service

* remove unused `exposeStaticDir` method

* create empty KP plugin

* remove unused and broken tests

* delete unused wallaby config file

* delete unused utils

* delete unused d.ts and move formsy definition to new plugin

* fix findNonExistentItems

* remove dead code and useless exports from common package

* delete non migratable test suite + remove unused test adapter

* remove yet another unused adapter

* restore awaits in KibanaDatabaseAdapter
---
 .../common/config_block_validation.ts         |  57 ----
 .../common/config_schemas_translations_map.ts |   2 +-
 .../beats_management/common/domain_types.ts   |   2 -
 .../beats_management/common/io_ts_types.ts    |   2 +-
 .../beats_management/common/return_types.ts   |  11 -
 .../adapters/beats/memory_beats_adapter.ts    | 118 ---------
 .../memory_tags_adapter.ts                    |  75 ------
 .../lib/adapters/database/__tests__/kibana.ts |  40 ---
 .../database/__tests__/test_contract.ts       |  58 ----
 .../lib/adapters/database/adapter_types.ts    |  11 +-
 .../database/kibana_database_adapter.ts       |  56 ++--
 .../lib/adapters/events/adapter_types.ts      |  12 -
 .../elasticsearch_beat_events_adapter.ts      |  21 --
 .../lib/adapters/framework/adapter_types.ts   |   6 +-
 .../framework/hapi_framework_adapter.ts       | 148 -----------
 .../framework/integration_tests/kibana.ts     |  38 ---
 .../integration_tests/test_contract.ts        |  29 --
 .../framework/kibana_framework_adapter.ts     |  12 -
 .../lib/adapters/tags/memory_tags_adapter.ts  |  50 ----
 .../adapters/tokens/memory_tokens_adapter.ts  |  49 ----
 .../server/lib/beat_events.ts                 |   4 +-
 .../beats_management/server/lib/beats.ts      |  10 +-
 .../server/lib/compose/kibana.ts              |   6 +-
 .../server/lib/compose/testing.ts             |  51 ----
 .../beats_management/server/lib/framework.ts  |   1 -
 .../__tests__/beats_assignments.test.ts       | 249 ------------------
 .../server/rest_api/__tests__/data.json       | 178 -------------
 .../server/rest_api/__tests__/test_harnes.ts  | 102 -------
 .../beats_management/server/utils/README.md   |   1 -
 .../server/utils/find_non_existent_items.ts   |  19 --
 .../server/utils/helper_types.ts              |  13 -
 .../utils/index_templates/beats_template.json | 119 ---------
 .../server/utils/polyfills.ts                 |  17 --
 .../server/utils/wrap_request.ts              |  36 ---
 .../plugins/beats_management/types/eui.d.ts   |  16 --
 .../plugins/beats_management/wallaby.js       |  62 -----
 .../plugins/beats_management/server/index.ts  |   8 +-
 .../plugins/beats_management/server/plugin.ts |  39 +++
 .../beats_management/types/formsy.d.ts        |   0
 39 files changed, 83 insertions(+), 1645 deletions(-)
 delete mode 100644 x-pack/legacy/plugins/beats_management/common/config_block_validation.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/lib/adapters/beats/memory_beats_adapter.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/lib/adapters/configuration_blocks/memory_tags_adapter.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/lib/adapters/database/__tests__/kibana.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/lib/adapters/database/__tests__/test_contract.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/lib/adapters/events/adapter_types.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/lib/adapters/events/elasticsearch_beat_events_adapter.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/hapi_framework_adapter.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/integration_tests/kibana.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/integration_tests/test_contract.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/lib/adapters/tags/memory_tags_adapter.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/lib/adapters/tokens/memory_tokens_adapter.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/lib/compose/testing.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/rest_api/__tests__/beats_assignments.test.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/rest_api/__tests__/data.json
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/rest_api/__tests__/test_harnes.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/utils/README.md
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/utils/find_non_existent_items.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/utils/helper_types.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/utils/index_templates/beats_template.json
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/utils/polyfills.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/server/utils/wrap_request.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/types/eui.d.ts
 delete mode 100644 x-pack/legacy/plugins/beats_management/wallaby.js
 create mode 100644 x-pack/plugins/beats_management/server/plugin.ts
 rename x-pack/{legacy => }/plugins/beats_management/types/formsy.d.ts (100%)

diff --git a/x-pack/legacy/plugins/beats_management/common/config_block_validation.ts b/x-pack/legacy/plugins/beats_management/common/config_block_validation.ts
deleted file mode 100644
index f3d1b9164e976..0000000000000
--- a/x-pack/legacy/plugins/beats_management/common/config_block_validation.ts
+++ /dev/null
@@ -1,57 +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 * as t from 'io-ts';
-import { PathReporter } from 'io-ts/lib/PathReporter';
-import { isLeft } from 'fp-ts/lib/Either';
-import { configBlockSchemas } from './config_schemas';
-import { ConfigurationBlock, createConfigurationBlockInterface } from './domain_types';
-
-export const validateConfigurationBlocks = (configurationBlocks: ConfigurationBlock[]) => {
-  const validationMap = {
-    isHosts: t.array(t.string),
-    isString: t.string,
-    isPeriod: t.string,
-    isPath: t.string,
-    isPaths: t.array(t.string),
-    isYaml: t.string,
-  };
-
-  for (const [index, block] of configurationBlocks.entries()) {
-    const blockSchema = configBlockSchemas.find((s) => s.id === block.type);
-    if (!blockSchema) {
-      throw new Error(
-        `Invalid config type of ${block.type} used in 'configuration_blocks' at index ${index}`
-      );
-    }
-
-    const interfaceConfig = blockSchema.configs.reduce((props, config) => {
-      if (config.options) {
-        props[config.id] = t.keyof(
-          Object.fromEntries(config.options.map((opt) => [opt.value, null])) as Record<string, null>
-        );
-      } else if (config.validation) {
-        props[config.id] = validationMap[config.validation];
-      }
-
-      return props;
-    }, {} as t.Props);
-
-    const runtimeInterface = createConfigurationBlockInterface(
-      t.literal(blockSchema.id),
-      t.interface(interfaceConfig)
-    );
-
-    const validationResults = runtimeInterface.decode(block);
-
-    if (isLeft(validationResults)) {
-      throw new Error(
-        `configuration_blocks validation error, configuration_blocks at index ${index} is invalid. ${
-          PathReporter.report(validationResults)[0]
-        }`
-      );
-    }
-  }
-};
diff --git a/x-pack/legacy/plugins/beats_management/common/config_schemas_translations_map.ts b/x-pack/legacy/plugins/beats_management/common/config_schemas_translations_map.ts
index 1aec3e8081708..7cae2a85dc4ca 100644
--- a/x-pack/legacy/plugins/beats_management/common/config_schemas_translations_map.ts
+++ b/x-pack/legacy/plugins/beats_management/common/config_schemas_translations_map.ts
@@ -7,7 +7,7 @@
 import { i18n } from '@kbn/i18n';
 import { ConfigBlockSchema } from './domain_types';
 
-export const supportedConfigLabelsMap = new Map<string, string>([
+const supportedConfigLabelsMap = new Map<string, string>([
   [
     'filebeatInputConfig.paths.ui.label',
     i18n.translate('xpack.beatsManagement.filebeatInputConfig.pathsLabel', {
diff --git a/x-pack/legacy/plugins/beats_management/common/domain_types.ts b/x-pack/legacy/plugins/beats_management/common/domain_types.ts
index b4a9ac8a07479..32e1d81451c65 100644
--- a/x-pack/legacy/plugins/beats_management/common/domain_types.ts
+++ b/x-pack/legacy/plugins/beats_management/common/domain_types.ts
@@ -7,8 +7,6 @@ import * as t from 'io-ts';
 import { configBlockSchemas } from './config_schemas';
 import { DateFromString } from './io_ts_types';
 
-export const OutputTypesArray = ['elasticsearch', 'logstash', 'kafka', 'redis'];
-
 // Here we create the runtime check for a generic, unknown beat config type.
 // We can also pass in optional params to create spacific runtime checks that
 // can be used to validate blocs on the API and UI
diff --git a/x-pack/legacy/plugins/beats_management/common/io_ts_types.ts b/x-pack/legacy/plugins/beats_management/common/io_ts_types.ts
index d77ad92298699..7d71ea5ad8256 100644
--- a/x-pack/legacy/plugins/beats_management/common/io_ts_types.ts
+++ b/x-pack/legacy/plugins/beats_management/common/io_ts_types.ts
@@ -7,7 +7,7 @@
 import * as t from 'io-ts';
 import { isRight } from 'fp-ts/lib/Either';
 
-export class DateFromStringType extends t.Type<Date, string, t.mixed> {
+class DateFromStringType extends t.Type<Date, string, t.mixed> {
   // eslint-disable-next-line
   public readonly _tag: 'DateFromISOStringType' = 'DateFromISOStringType';
   constructor() {
diff --git a/x-pack/legacy/plugins/beats_management/common/return_types.ts b/x-pack/legacy/plugins/beats_management/common/return_types.ts
index a7125795a5c7d..7e0e39e12e60a 100644
--- a/x-pack/legacy/plugins/beats_management/common/return_types.ts
+++ b/x-pack/legacy/plugins/beats_management/common/return_types.ts
@@ -34,11 +34,6 @@ export interface ReturnTypeBulkCreate<T> extends BaseReturnType {
   }>;
 }
 
-// delete
-export interface ReturnTypeDelete extends BaseReturnType {
-  action: 'deleted';
-}
-
 export interface ReturnTypeBulkDelete extends BaseReturnType {
   results: Array<{
     success: boolean;
@@ -84,12 +79,6 @@ export interface ReturnTypeBulkGet<T> extends BaseReturnType {
   items: T[];
 }
 
-// action -- e.g. validate config block. Like ES simulate endpoint
-export interface ReturnTypeAction extends BaseReturnType {
-  result: {
-    [key: string]: any;
-  };
-}
 // e.g.
 // {
 //   result: {
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/adapters/beats/memory_beats_adapter.ts b/x-pack/legacy/plugins/beats_management/server/lib/adapters/beats/memory_beats_adapter.ts
deleted file mode 100644
index afae87c490158..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/lib/adapters/beats/memory_beats_adapter.ts
+++ /dev/null
@@ -1,118 +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, omit } from 'lodash';
-
-import { CMBeat } from '../../../../common/domain_types';
-import { FrameworkUser } from '../framework/adapter_types';
-import { BeatsTagAssignment, CMBeatsAdapter } from './adapter_types';
-
-export class MemoryBeatsAdapter implements CMBeatsAdapter {
-  private beatsDB: CMBeat[];
-
-  constructor(beatsDB: CMBeat[]) {
-    this.beatsDB = beatsDB;
-  }
-
-  public async get(user: FrameworkUser, id: string) {
-    return this.beatsDB.find((beat) => beat.id === id) || null;
-  }
-
-  public async insert(user: FrameworkUser, beat: CMBeat) {
-    this.beatsDB.push(beat);
-  }
-
-  public async update(user: FrameworkUser, beat: CMBeat) {
-    const beatIndex = this.beatsDB.findIndex((b) => b.id === beat.id);
-
-    this.beatsDB[beatIndex] = {
-      ...this.beatsDB[beatIndex],
-      ...beat,
-    };
-  }
-
-  public async getWithIds(user: FrameworkUser, beatIds: string[]) {
-    return this.beatsDB.filter((beat) => beatIds.includes(beat.id));
-  }
-
-  public async getAllWithTags(user: FrameworkUser, tagIds: string[]): Promise<CMBeat[]> {
-    return this.beatsDB.filter((beat) => intersection(tagIds, beat.tags || []).length !== 0);
-  }
-
-  public async getBeatWithToken(
-    user: FrameworkUser,
-    enrollmentToken: string
-  ): Promise<CMBeat | null> {
-    return this.beatsDB.find((beat) => enrollmentToken === beat.enrollment_token) || null;
-  }
-
-  public async getAll(user: FrameworkUser) {
-    return this.beatsDB.map<CMBeat>((beat: any) => omit(beat, ['access_token']));
-  }
-
-  public async removeTagsFromBeats(
-    user: FrameworkUser,
-    removals: BeatsTagAssignment[]
-  ): Promise<BeatsTagAssignment[]> {
-    const beatIds = removals.map((r) => r.beatId);
-
-    const response = this.beatsDB
-      .filter((beat) => beatIds.includes(beat.id))
-      .map((beat) => {
-        const tagData = removals.find((r) => r.beatId === beat.id);
-        if (tagData) {
-          if (beat.tags) {
-            beat.tags = beat.tags.filter((tag) => tag !== tagData.tag);
-          }
-        }
-        return beat;
-      });
-
-    return response.map<any>((item: CMBeat, resultIdx: number) => ({
-      idxInRequest: removals[resultIdx].idxInRequest,
-      result: 'updated',
-      status: 200,
-    }));
-  }
-
-  public async assignTagsToBeats(
-    user: FrameworkUser,
-    assignments: BeatsTagAssignment[]
-  ): Promise<BeatsTagAssignment[]> {
-    const beatIds = assignments.map((r) => r.beatId);
-
-    this.beatsDB
-      .filter((beat) => beatIds.includes(beat.id))
-      .map((beat) => {
-        // get tags that need to be assigned to this beat
-        const tags = assignments
-          .filter((a) => a.beatId === beat.id)
-          .map((t: BeatsTagAssignment) => t.tag);
-
-        if (tags.length > 0) {
-          if (!beat.tags) {
-            beat.tags = [];
-          }
-          const nonExistingTags = tags.filter((t: string) => beat.tags && !beat.tags.includes(t));
-
-          if (nonExistingTags.length > 0) {
-            beat.tags = beat.tags.concat(nonExistingTags);
-          }
-        }
-        return beat;
-      });
-
-    return assignments.map<any>((item: BeatsTagAssignment, resultIdx: number) => ({
-      idxInRequest: assignments[resultIdx].idxInRequest,
-      result: 'updated',
-      status: 200,
-    }));
-  }
-
-  public setDB(beatsDB: CMBeat[]) {
-    this.beatsDB = beatsDB;
-  }
-}
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/adapters/configuration_blocks/memory_tags_adapter.ts b/x-pack/legacy/plugins/beats_management/server/lib/adapters/configuration_blocks/memory_tags_adapter.ts
deleted file mode 100644
index ea8a75c92fad2..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/lib/adapters/configuration_blocks/memory_tags_adapter.ts
+++ /dev/null
@@ -1,75 +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 Chance from 'chance'; // eslint-disable-line
-import { ConfigurationBlock } from '../../../../common/domain_types';
-import { FrameworkUser } from '../framework/adapter_types';
-import { ConfigurationBlockAdapter } from './adapter_types';
-
-const chance = new Chance();
-
-export class MemoryConfigurationBlockAdapter implements ConfigurationBlockAdapter {
-  private db: ConfigurationBlock[] = [];
-
-  constructor(db: ConfigurationBlock[]) {
-    this.db = db.map((config) => {
-      if (config.id === undefined) {
-        config.id = chance.word();
-      }
-      return config as ConfigurationBlock & { id: string };
-    });
-  }
-
-  public async getByIds(user: FrameworkUser, ids: string[]) {
-    return this.db.filter((block) => ids.includes(block.id));
-  }
-  public async delete(user: FrameworkUser, blockIds: string[]) {
-    this.db = this.db.filter((block) => !blockIds.includes(block.id));
-    return blockIds.map((id) => ({
-      id,
-      success: true,
-    }));
-  }
-  public async deleteForTags(
-    user: FrameworkUser,
-    tagIds: string[]
-  ): Promise<{ success: boolean; reason?: string }> {
-    this.db = this.db.filter((block) => !tagIds.includes(block.tag));
-    return {
-      success: true,
-    };
-  }
-
-  public async getForTags(user: FrameworkUser, tagIds: string[], page?: number, size?: number) {
-    const results = this.db.filter((block) => tagIds.includes(block.id));
-    return {
-      page: 0,
-      total: results.length,
-      blocks: results,
-    };
-  }
-
-  public async create(user: FrameworkUser, blocks: ConfigurationBlock[]) {
-    return blocks.map((block) => {
-      const existingIndex = this.db.findIndex((t) => t.id === block.id);
-      if (existingIndex !== -1) {
-        this.db[existingIndex] = block;
-      } else {
-        this.db.push(block);
-      }
-      return block.id;
-    });
-  }
-
-  public setDB(db: ConfigurationBlock[]) {
-    this.db = db.map((block) => {
-      if (block.id === undefined) {
-        block.id = chance.word();
-      }
-      return block;
-    });
-  }
-}
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/adapters/database/__tests__/kibana.ts b/x-pack/legacy/plugins/beats_management/server/lib/adapters/database/__tests__/kibana.ts
deleted file mode 100644
index 460fc412e9491..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/lib/adapters/database/__tests__/kibana.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.
- */
-// file.skip
-
-// @ts-ignore
-import { createLegacyEsTestCluster } from '@kbn/test';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { Root } from 'src/core/server/root';
-// @ts-ignore
-import * as kbnTestServer from '../../../../../../../../../src/test_utils/kbn_server';
-import { DatabaseKbnESPlugin } from '../adapter_types';
-import { KibanaDatabaseAdapter } from '../kibana_database_adapter';
-import { contractTests } from './test_contract';
-const es = createLegacyEsTestCluster({});
-
-let legacyServer: any;
-let rootServer: Root;
-contractTests('Kibana Database Adapter', {
-  before: async () => {
-    await es.start();
-
-    rootServer = kbnTestServer.createRootWithCorePlugins({
-      server: { maxPayloadBytes: 100 },
-    });
-
-    await rootServer.setup();
-    legacyServer = kbnTestServer.getKbnServer(rootServer);
-    return await legacyServer.plugins.elasticsearch.waitUntilReady();
-  },
-  after: async () => {
-    await rootServer.shutdown();
-    return await es.cleanup();
-  },
-  adapterSetup: () => {
-    return new KibanaDatabaseAdapter(legacyServer.plugins.elasticsearch as DatabaseKbnESPlugin);
-  },
-});
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/adapters/database/__tests__/test_contract.ts b/x-pack/legacy/plugins/beats_management/server/lib/adapters/database/__tests__/test_contract.ts
deleted file mode 100644
index 369c2e1056211..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/lib/adapters/database/__tests__/test_contract.ts
+++ /dev/null
@@ -1,58 +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 { DatabaseAdapter } from '../adapter_types';
-
-interface ContractConfig {
-  before?(): Promise<void>;
-  after?(): Promise<void>;
-  adapterSetup(): DatabaseAdapter;
-}
-
-export const contractTests = (testName: string, config: ContractConfig) => {
-  describe.skip(testName, () => {
-    let database: DatabaseAdapter;
-    beforeAll(async () => {
-      jest.setTimeout(100000); // 1 second
-
-      if (config.before) {
-        await config.before();
-      }
-    });
-    afterAll(async () => config.after && (await config.after()));
-    beforeEach(async () => {
-      database = config.adapterSetup();
-    });
-
-    it('Unauthorized users cant query', async () => {
-      const params = {
-        id: `beat:foo`,
-        ignore: [404],
-        index: '.management-beats',
-      };
-      let ranWithoutError = false;
-      try {
-        await database.get({ kind: 'unauthenticated' }, params);
-        ranWithoutError = true;
-      } catch (e) {
-        expect(e).not.toEqual(null);
-      }
-      expect(ranWithoutError).toEqual(false);
-    });
-
-    it('Should query ES', async () => {
-      const params = {
-        id: `beat:foo`,
-        ignore: [404],
-        index: '.management-beats',
-      };
-      const response = await database.get({ kind: 'internal' }, params);
-
-      expect(response).not.toEqual(undefined);
-      // @ts-ignore
-      expect(response.found).toEqual(undefined);
-    });
-  });
-};
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/adapters/database/adapter_types.ts b/x-pack/legacy/plugins/beats_management/server/lib/adapters/database/adapter_types.ts
index 0a06c3dcc6412..90519840af213 100644
--- a/x-pack/legacy/plugins/beats_management/server/lib/adapters/database/adapter_types.ts
+++ b/x-pack/legacy/plugins/beats_management/server/lib/adapters/database/adapter_types.ts
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { FrameworkRequest, FrameworkUser } from '../framework/adapter_types';
+import { FrameworkUser } from '../framework/adapter_types';
 
 export interface DatabaseAdapter {
   get<Source>(
@@ -39,15 +39,6 @@ export interface DatabaseAdapter {
   putTemplate(name: string, template: any): Promise<any>;
 }
 
-export interface DatabaseKbnESCluster {
-  callWithInternalUser(esMethod: string, options: {}): Promise<any>;
-  callWithRequest(req: FrameworkRequest, esMethod: string, options: {}): Promise<any>;
-}
-
-export interface DatabaseKbnESPlugin {
-  getCluster(clusterName: string): DatabaseKbnESCluster;
-}
-
 export interface DatabaseSearchParams extends DatabaseGenericParams {
   analyzer?: string;
   analyzeWildcard?: boolean;
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/adapters/database/kibana_database_adapter.ts b/x-pack/legacy/plugins/beats_management/server/lib/adapters/database/kibana_database_adapter.ts
index 1ca3bcae8bfca..baccbe416f398 100644
--- a/x-pack/legacy/plugins/beats_management/server/lib/adapters/database/kibana_database_adapter.ts
+++ b/x-pack/legacy/plugins/beats_management/server/lib/adapters/database/kibana_database_adapter.ts
@@ -3,6 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { ElasticsearchServiceStart, IClusterClient } from 'src/core/server';
 import { FrameworkUser } from '../framework/adapter_types';
 import { internalAuthData } from './../framework/adapter_types';
 import {
@@ -15,8 +16,6 @@ import {
   DatabaseGetDocumentResponse,
   DatabaseGetParams,
   DatabaseIndexDocumentParams,
-  DatabaseKbnESCluster,
-  DatabaseKbnESPlugin,
   DatabaseMGetParams,
   DatabaseMGetResponse,
   DatabaseSearchParams,
@@ -24,75 +23,67 @@ import {
 } from './adapter_types';
 
 export class KibanaDatabaseAdapter implements DatabaseAdapter {
-  private es: DatabaseKbnESCluster;
+  private es: IClusterClient;
 
-  constructor(kbnElasticSearch: DatabaseKbnESPlugin) {
-    this.es = kbnElasticSearch.getCluster('admin');
+  constructor(elasticsearch: ElasticsearchServiceStart) {
+    this.es = elasticsearch.legacy.client;
   }
 
   public async get<Source>(
     user: FrameworkUser,
     params: DatabaseGetParams
   ): Promise<DatabaseGetDocumentResponse<Source>> {
-    const result = await this.callWithUser(user, 'get', params);
-    return result;
-    // todo
+    return await this.callWithUser(user, 'get', params);
   }
 
   public async mget<T>(
     user: FrameworkUser,
     params: DatabaseMGetParams
   ): Promise<DatabaseMGetResponse<T>> {
-    const result = await this.callWithUser(user, 'mget', params);
-    return result;
-    // todo
+    return await this.callWithUser(user, 'mget', params);
   }
 
   public async bulk(user: FrameworkUser, params: DatabaseBulkIndexDocumentsParams): Promise<any> {
-    const result = await this.callWithUser(user, 'bulk', params);
-    return result;
+    return await this.callWithUser(user, 'bulk', params);
   }
 
   public async create(
     user: FrameworkUser,
     params: DatabaseCreateDocumentParams
   ): Promise<DatabaseCreateDocumentResponse> {
-    const result = await this.callWithUser(user, 'create', params);
-    return result;
+    return await this.callWithUser(user, 'create', params);
   }
+
   public async index<T>(user: FrameworkUser, params: DatabaseIndexDocumentParams<T>): Promise<any> {
-    const result = await this.callWithUser(user, 'index', params);
-    return result;
+    return await this.callWithUser(user, 'index', params);
   }
+
   public async delete(
     user: FrameworkUser,
     params: DatabaseDeleteDocumentParams
   ): Promise<DatabaseDeleteDocumentResponse> {
-    const result = await this.callWithUser(user, 'delete', params);
-    return result;
+    return await this.callWithUser(user, 'delete', params);
   }
 
   public async deleteByQuery(
     user: FrameworkUser,
     params: DatabaseSearchParams
   ): Promise<DatabaseDeleteDocumentResponse> {
-    const result = await this.callWithUser(user, 'deleteByQuery', params);
-    return result;
+    return await this.callWithUser(user, 'deleteByQuery', params);
   }
 
   public async search<Source>(
     user: FrameworkUser,
     params: DatabaseSearchParams
   ): Promise<DatabaseSearchResponse<Source>> {
-    const result = await this.callWithUser(user, 'search', params);
-    return result;
+    return await this.callWithUser(user, 'search', params);
   }
 
   public async searchAll<Source>(
     user: FrameworkUser,
     params: DatabaseSearchParams
   ): Promise<DatabaseSearchResponse<Source>> {
-    const result = await this.callWithUser(user, 'search', {
+    return await this.callWithUser(user, 'search', {
       scroll: '1m',
       ...params,
       body: {
@@ -100,29 +91,24 @@ export class KibanaDatabaseAdapter implements DatabaseAdapter {
         ...params.body,
       },
     });
-    return result;
   }
 
   public async putTemplate(name: string, template: any): Promise<any> {
-    const result = await this.callWithUser({ kind: 'internal' }, 'indices.putTemplate', {
+    return await this.callWithUser({ kind: 'internal' }, 'indices.putTemplate', {
       name,
       body: template,
     });
-
-    return result;
   }
 
   private callWithUser(user: FrameworkUser, esMethod: string, options: any = {}): any {
     if (user.kind === 'authenticated') {
-      return this.es.callWithRequest(
-        {
+      return this.es
+        .asScoped({
           headers: user[internalAuthData],
-        } as any,
-        esMethod,
-        options
-      );
+        })
+        .callAsCurrentUser(esMethod, options);
     } else if (user.kind === 'internal') {
-      return this.es.callWithInternalUser(esMethod, options);
+      return this.es.callAsInternalUser(esMethod, options);
     } else {
       throw new Error('Invalid user type');
     }
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/adapters/events/adapter_types.ts b/x-pack/legacy/plugins/beats_management/server/lib/adapters/events/adapter_types.ts
deleted file mode 100644
index 4cb38bb3d057b..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/lib/adapters/events/adapter_types.ts
+++ /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 { BeatEvent } from '../../../../common/domain_types';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { FrameworkUser } from '../../../../../../../plugins/beats_management/public/lib/adapters/framework/adapter_types';
-
-export interface BeatEventsAdapter {
-  bulkInsert(user: FrameworkUser, beatId: string, events: BeatEvent[]): Promise<void>;
-}
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/adapters/events/elasticsearch_beat_events_adapter.ts b/x-pack/legacy/plugins/beats_management/server/lib/adapters/events/elasticsearch_beat_events_adapter.ts
deleted file mode 100644
index b5056140c8b86..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/lib/adapters/events/elasticsearch_beat_events_adapter.ts
+++ /dev/null
@@ -1,21 +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 { BeatEvent } from '../../../../common/domain_types';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { FrameworkUser } from '../../../../../../../plugins/beats_management/public/lib/adapters/framework/adapter_types';
-import { DatabaseAdapter } from '../database/adapter_types';
-import { BeatEventsAdapter } from './adapter_types';
-
-export class ElasticsearchBeatEventsAdapter implements BeatEventsAdapter {
-  // @ts-ignore
-  constructor(private readonly database: DatabaseAdapter) {}
-
-  // eslint-disable-next-line
-  public bulkInsert = async (user: FrameworkUser, beatId: string, events: BeatEvent[]) => {
-    // await this.database.putTemplate(INDEX_NAMES.EVENTS_TODAY, beatsIndexTemplate);
-  };
-}
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/adapter_types.ts b/x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/adapter_types.ts
index 80599f38d982a..e2703cb5786dd 100644
--- a/x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/adapter_types.ts
+++ b/x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/adapter_types.ts
@@ -8,6 +8,7 @@
 
 import { Lifecycle, ResponseToolkit } from 'hapi';
 import * as t from 'io-ts';
+import { CoreSetup, CoreStart } from 'src/core/server';
 import { SecurityPluginSetup } from '../../../../../../../plugins/security/server';
 import { LicenseType } from '../../../../common/constants/security';
 
@@ -33,7 +34,6 @@ export interface BackendFrameworkAdapter {
   log(text: string): void;
   on(event: 'xpack.status.green' | 'elasticsearch.status.green', cb: () => void): void;
   getSetting(settingPath: string): any;
-  exposeStaticDir(urlPath: string, dir: string): void;
   registerRoute<RouteRequest extends FrameworkRequest, RouteResponse extends FrameworkResponse>(
     route: FrameworkRouteOptions<RouteRequest, RouteResponse>
   ): void;
@@ -42,8 +42,12 @@ export interface BackendFrameworkAdapter {
 export interface KibanaLegacyServer {
   newPlatform: {
     setup: {
+      core: CoreSetup;
       plugins: { security: SecurityPluginSetup };
     };
+    start: {
+      core: CoreStart;
+    };
   };
   plugins: {
     xpack_main: {
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/hapi_framework_adapter.ts b/x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/hapi_framework_adapter.ts
deleted file mode 100644
index 90500e0283511..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/hapi_framework_adapter.ts
+++ /dev/null
@@ -1,148 +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 { LicenseType } from './../../../../common/constants/security';
-import { KibanaServerRequest } from './adapter_types';
-import {
-  BackendFrameworkAdapter,
-  FrameworkInfo,
-  FrameworkRequest,
-  FrameworkResponse,
-  FrameworkRouteOptions,
-  internalAuthData,
-  internalUser,
-} from './adapter_types';
-
-interface TestSettings {
-  enrollmentTokensTtlInSeconds: number;
-  encryptionKey: string;
-}
-
-export class HapiBackendFrameworkAdapter implements BackendFrameworkAdapter {
-  public info: null | FrameworkInfo = null;
-  public readonly internalUser = internalUser;
-
-  private settings: TestSettings;
-  private server: any;
-
-  constructor(
-    settings: TestSettings = {
-      encryptionKey: 'something_who_cares',
-      enrollmentTokensTtlInSeconds: 10 * 60, // 10 minutes
-    },
-    hapiServer?: any,
-    license: LicenseType = 'trial',
-    securityEnabled: boolean = true,
-    licenseActive: boolean = true
-  ) {
-    this.server = hapiServer;
-    this.settings = settings;
-    const now = new Date();
-
-    this.info = {
-      kibana: {
-        version: 'unknown',
-      },
-      license: {
-        type: license,
-        expired: !licenseActive,
-        expiry_date_in_millis: new Date(now.getFullYear(), now.getMonth() + 1, 1).getTime(),
-      },
-      security: {
-        enabled: securityEnabled,
-        available: securityEnabled,
-      },
-      watcher: {
-        enabled: true,
-        available: true,
-      },
-    };
-  }
-  public log(text: string) {
-    this.server.log(text);
-  }
-  public on(event: 'xpack.status.green', cb: () => void) {
-    cb();
-  }
-  public getSetting(settingPath: string) {
-    switch (settingPath) {
-      case 'xpack.beats.enrollmentTokensTtlInSeconds':
-        return this.settings.enrollmentTokensTtlInSeconds;
-      case 'xpack.beats.encryptionKey':
-        return this.settings.encryptionKey;
-    }
-  }
-
-  public exposeStaticDir(urlPath: string, dir: string): void {
-    if (!this.server) {
-      throw new Error('Must pass a hapi server into the adapter to use exposeStaticDir');
-    }
-    this.server.route({
-      handler: {
-        directory: {
-          path: dir,
-        },
-      },
-      method: 'GET',
-      path: urlPath,
-    });
-  }
-
-  public registerRoute<
-    RouteRequest extends FrameworkRequest,
-    RouteResponse extends FrameworkResponse
-  >(route: FrameworkRouteOptions<RouteRequest, RouteResponse>) {
-    if (!this.server) {
-      throw new Error('Must pass a hapi server into the adapter to use registerRoute');
-    }
-    const wrappedHandler = (licenseRequired: string[]) => (request: any, h: any) => {
-      return route.handler(this.wrapRequest(request), h);
-    };
-
-    this.server.route({
-      handler: wrappedHandler(route.licenseRequired || []),
-      method: route.method,
-      path: route.path,
-      config: {
-        ...route.config,
-        auth: false,
-      },
-    });
-  }
-
-  public async injectRequstForTesting({ method, url, headers, payload }: any) {
-    return await this.server.inject({ method, url, headers, payload });
-  }
-
-  private wrapRequest<InternalRequest extends KibanaServerRequest>(
-    req: InternalRequest
-  ): FrameworkRequest<InternalRequest> {
-    const { params, payload, query, headers, info } = req;
-
-    const isAuthenticated = headers.authorization != null;
-
-    return {
-      user: isAuthenticated
-        ? {
-            kind: 'authenticated',
-            [internalAuthData]: headers,
-            username: 'elastic',
-            roles: ['superuser'],
-            full_name: null,
-            email: null,
-            enabled: true,
-          }
-        : {
-            kind: 'unauthenticated',
-          },
-      headers,
-      info,
-      params,
-      payload,
-      query,
-    };
-  }
-}
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/integration_tests/kibana.ts b/x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/integration_tests/kibana.ts
deleted file mode 100644
index 4f0ba01b86082..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/integration_tests/kibana.ts
+++ /dev/null
@@ -1,38 +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.
- */
-// file.skip
-
-import { camelCase } from 'lodash';
-// @ts-ignore
-import * as kbnTestServer from '../../../../../../../../../src/test_utils/kbn_server';
-// @ts-ignore
-import { TestKbnServerConfig } from '../../../../../../../test_utils/kbn_server_config';
-import { CONFIG_PREFIX } from '../../../../../common/constants/plugin';
-import { PLUGIN } from './../../../../../common/constants/plugin';
-import { KibanaBackendFrameworkAdapter } from './../kibana_framework_adapter';
-import { contractTests } from './test_contract';
-
-let kbnServer: any;
-let kbn: any;
-let esServer: any;
-contractTests('Kibana  Framework Adapter', {
-  async before() {
-    const servers = kbnTestServer.createTestServers({
-      adjustTimeout: (t: number) => jest.setTimeout(t),
-      settings: TestKbnServerConfig,
-    });
-    esServer = await servers.startES();
-    kbn = await servers.startKibana();
-    kbnServer = kbn.kbnServer;
-  },
-  async after() {
-    await kbn.stop();
-    await esServer.stop();
-  },
-  adapterSetup: () => {
-    return new KibanaBackendFrameworkAdapter(camelCase(PLUGIN.ID), kbnServer.server, CONFIG_PREFIX);
-  },
-});
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/integration_tests/test_contract.ts b/x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/integration_tests/test_contract.ts
deleted file mode 100644
index 8e21f8cf78ad7..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/integration_tests/test_contract.ts
+++ /dev/null
@@ -1,29 +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 { BackendFrameworkAdapter } from '../adapter_types';
-
-interface ContractConfig {
-  before(): Promise<void>;
-  after(): Promise<void>;
-  adapterSetup(): BackendFrameworkAdapter;
-}
-
-export const contractTests = (testName: string, config: ContractConfig) => {
-  describe(testName, () => {
-    let frameworkAdapter: BackendFrameworkAdapter;
-    beforeAll(config.before);
-    afterAll(config.after);
-    beforeEach(async () => {
-      frameworkAdapter = config.adapterSetup();
-    });
-
-    it('Should have tests here', () => {
-      expect(frameworkAdapter.info).toHaveProperty('server');
-
-      expect(frameworkAdapter).toHaveProperty('server');
-    });
-  });
-};
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/kibana_framework_adapter.ts b/x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/kibana_framework_adapter.ts
index 1bf9bbb22b352..3b29e50e4465b 100644
--- a/x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/kibana_framework_adapter.ts
+++ b/x-pack/legacy/plugins/beats_management/server/lib/adapters/framework/kibana_framework_adapter.ts
@@ -68,18 +68,6 @@ export class KibanaBackendFrameworkAdapter implements BackendFrameworkAdapter {
     this.server.log(text);
   }
 
-  public exposeStaticDir(urlPath: string, dir: string): void {
-    this.server.route({
-      handler: {
-        directory: {
-          path: dir,
-        },
-      },
-      method: 'GET',
-      path: urlPath,
-    });
-  }
-
   public registerRoute<
     RouteRequest extends FrameworkRequest,
     RouteResponse extends FrameworkResponse
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/adapters/tags/memory_tags_adapter.ts b/x-pack/legacy/plugins/beats_management/server/lib/adapters/tags/memory_tags_adapter.ts
deleted file mode 100644
index 66a6c7ebebc2c..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/lib/adapters/tags/memory_tags_adapter.ts
+++ /dev/null
@@ -1,50 +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 { BeatTag } from '../../../../common/domain_types';
-import { FrameworkUser } from '../framework/adapter_types';
-import { CMTagsAdapter } from './adapter_types';
-
-export class MemoryTagsAdapter implements CMTagsAdapter {
-  private tagsDB: BeatTag[] = [];
-
-  constructor(tagsDB: BeatTag[]) {
-    this.tagsDB = tagsDB;
-  }
-
-  public async getAll(user: FrameworkUser) {
-    return this.tagsDB;
-  }
-  public async delete(user: FrameworkUser, tagIds: string[]) {
-    this.tagsDB = this.tagsDB.filter((tag) => !tagIds.includes(tag.id));
-
-    return true;
-  }
-  public async getTagsWithIds(user: FrameworkUser, tagIds: string[]) {
-    return this.tagsDB.filter((tag) => tagIds.includes(tag.id));
-  }
-
-  public async upsertTag(user: FrameworkUser, tag: BeatTag) {
-    const existingTagIndex = this.tagsDB.findIndex((t) => t.id === tag.id);
-    if (existingTagIndex !== -1) {
-      this.tagsDB[existingTagIndex] = tag;
-    } else {
-      this.tagsDB.push(tag);
-    }
-    return tag.id;
-  }
-
-  public async getWithoutConfigTypes(
-    user: FrameworkUser,
-    blockTypes: string[]
-  ): Promise<BeatTag[]> {
-    return this.tagsDB.filter((tag) => tag.hasConfigurationBlocksTypes.includes(blockTypes[0]));
-  }
-
-  public setDB(tagsDB: BeatTag[]) {
-    this.tagsDB = tagsDB;
-  }
-}
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/adapters/tokens/memory_tokens_adapter.ts b/x-pack/legacy/plugins/beats_management/server/lib/adapters/tokens/memory_tokens_adapter.ts
deleted file mode 100644
index 431263c808b45..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/lib/adapters/tokens/memory_tokens_adapter.ts
+++ /dev/null
@@ -1,49 +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 { FrameworkAuthenticatedUser, FrameworkUser } from '../framework/adapter_types';
-import { CMTokensAdapter, TokenEnrollmentData } from './adapter_types';
-
-export class MemoryTokensAdapter implements CMTokensAdapter {
-  private tokenDB: TokenEnrollmentData[];
-
-  constructor(tokenDB: TokenEnrollmentData[]) {
-    this.tokenDB = tokenDB;
-  }
-
-  public async deleteEnrollmentToken(user: FrameworkUser, enrollmentToken: string) {
-    const index = this.tokenDB.findIndex((token) => token.token === enrollmentToken);
-
-    if (index > -1) {
-      this.tokenDB.splice(index, 1);
-    }
-  }
-
-  public async getEnrollmentToken(
-    user: FrameworkUser,
-    tokenString: string
-  ): Promise<TokenEnrollmentData> {
-    return new Promise<TokenEnrollmentData>((resolve) => {
-      return resolve(this.tokenDB.find((token) => token.token === tokenString));
-    });
-  }
-
-  public async insertTokens(user: FrameworkAuthenticatedUser, tokens: TokenEnrollmentData[]) {
-    tokens.forEach((token) => {
-      const existingIndex = this.tokenDB.findIndex((t) => t.token === token.token);
-      if (existingIndex !== -1) {
-        this.tokenDB[existingIndex] = token;
-      } else {
-        this.tokenDB.push(token);
-      }
-    });
-    return tokens;
-  }
-
-  public setDB(tokenDB: TokenEnrollmentData[]) {
-    this.tokenDB = tokenDB;
-  }
-}
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/beat_events.ts b/x-pack/legacy/plugins/beats_management/server/lib/beat_events.ts
index f4cb3cb424f6f..54782783f94ca 100644
--- a/x-pack/legacy/plugins/beats_management/server/lib/beat_events.ts
+++ b/x-pack/legacy/plugins/beats_management/server/lib/beat_events.ts
@@ -6,13 +6,11 @@
 import { PathReporter } from 'io-ts/lib/PathReporter';
 import { isLeft } from 'fp-ts/lib/Either';
 import { BeatEvent, RuntimeBeatEvent } from '../../common/domain_types';
-import { BeatEventsAdapter } from './adapters/events/adapter_types';
 import { FrameworkUser } from './adapters/framework/adapter_types';
 import { CMBeatsDomain } from './beats';
 
 export class BeatEventsLib {
-  // @ts-ignore
-  constructor(private readonly adapter: BeatEventsAdapter, private readonly beats: CMBeatsDomain) {}
+  constructor(private readonly beats: CMBeatsDomain) {}
 
   public log = async (
     user: FrameworkUser,
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/beats.ts b/x-pack/legacy/plugins/beats_management/server/lib/beats.ts
index 3b9c4d35d8331..6b7053f40550b 100644
--- a/x-pack/legacy/plugins/beats_management/server/lib/beats.ts
+++ b/x-pack/legacy/plugins/beats_management/server/lib/beats.ts
@@ -7,7 +7,6 @@
 import { uniq } from 'lodash';
 import moment from 'moment';
 import { CMBeat } from '../../common/domain_types';
-import { findNonExistentItems } from '../utils/find_non_existent_items';
 import {
   BeatsRemovalReturn,
   BeatsTagAssignment,
@@ -249,3 +248,12 @@ function addToResultsToResponse(key: string, response: any, assignmentResults: a
   });
   return response;
 }
+
+export function findNonExistentItems(items: Array<{ id: string }>, requestedItems: string[]) {
+  return requestedItems.reduce((nonExistentItems: string[], requestedItem: string, idx: number) => {
+    if (items.findIndex((item) => item && item.id === requestedItem) === -1) {
+      nonExistentItems.push(requestedItems[idx]);
+    }
+    return nonExistentItems;
+  }, []);
+}
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/compose/kibana.ts b/x-pack/legacy/plugins/beats_management/server/lib/compose/kibana.ts
index 2bda2fe85d62f..b6a645ded8164 100644
--- a/x-pack/legacy/plugins/beats_management/server/lib/compose/kibana.ts
+++ b/x-pack/legacy/plugins/beats_management/server/lib/compose/kibana.ts
@@ -9,9 +9,7 @@ import { PLUGIN } from '../../../common/constants';
 import { CONFIG_PREFIX } from '../../../common/constants/plugin';
 import { ElasticsearchBeatsAdapter } from '../adapters/beats/elasticsearch_beats_adapter';
 import { ElasticsearchConfigurationBlockAdapter } from '../adapters/configuration_blocks/elasticsearch_configuration_block_adapter';
-import { DatabaseKbnESPlugin } from '../adapters/database/adapter_types';
 import { KibanaDatabaseAdapter } from '../adapters/database/kibana_database_adapter';
-import { ElasticsearchBeatEventsAdapter } from '../adapters/events/elasticsearch_beat_events_adapter';
 import { KibanaLegacyServer } from '../adapters/framework/adapter_types';
 import { KibanaBackendFrameworkAdapter } from '../adapters/framework/kibana_framework_adapter';
 import { ElasticsearchTagsAdapter } from '../adapters/tags/elasticsearch_tags_adapter';
@@ -28,7 +26,7 @@ export function compose(server: KibanaLegacyServer): CMServerLibs {
   const framework = new BackendFrameworkLib(
     new KibanaBackendFrameworkAdapter(camelCase(PLUGIN.ID), server, CONFIG_PREFIX)
   );
-  const database = new KibanaDatabaseAdapter(server.plugins.elasticsearch as DatabaseKbnESPlugin);
+  const database = new KibanaDatabaseAdapter(server.newPlatform.start.core.elasticsearch);
   const beatsAdapter = new ElasticsearchBeatsAdapter(database);
   const configAdapter = new ElasticsearchConfigurationBlockAdapter(database);
 
@@ -46,7 +44,7 @@ export function compose(server: KibanaLegacyServer): CMServerLibs {
     tokens,
     framework,
   });
-  const beatEvents = new BeatEventsLib(new ElasticsearchBeatEventsAdapter(database), beats);
+  const beatEvents = new BeatEventsLib(beats);
 
   const libs: CMServerLibs = {
     beatEvents,
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/compose/testing.ts b/x-pack/legacy/plugins/beats_management/server/lib/compose/testing.ts
deleted file mode 100644
index b5fe6195fc7c7..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/lib/compose/testing.ts
+++ /dev/null
@@ -1,51 +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 { MemoryBeatsAdapter } from '../adapters/beats/memory_beats_adapter';
-import { MemoryConfigurationBlockAdapter } from '../adapters/configuration_blocks/memory_tags_adapter';
-import { HapiBackendFrameworkAdapter } from '../adapters/framework/hapi_framework_adapter';
-import { MemoryTagsAdapter } from '../adapters/tags/memory_tags_adapter';
-import { MemoryTokensAdapter } from '../adapters/tokens/memory_tokens_adapter';
-import { BeatEventsLib } from '../beat_events';
-import { CMBeatsDomain } from '../beats';
-import { ConfigurationBlocksLib } from '../configuration_blocks';
-import { BackendFrameworkLib } from '../framework';
-import { CMTagsDomain } from '../tags';
-import { CMTokensDomain } from '../tokens';
-import { CMServerLibs } from '../types';
-
-export function compose(server: any): CMServerLibs {
-  const framework = new BackendFrameworkLib(new HapiBackendFrameworkAdapter(undefined, server));
-
-  const beatsAdapter = new MemoryBeatsAdapter(server.beatsDB || []);
-  const configAdapter = new MemoryConfigurationBlockAdapter(server.configsDB || []);
-  const tags = new CMTagsDomain(
-    new MemoryTagsAdapter(server.tagsDB || []),
-    configAdapter,
-    beatsAdapter
-  );
-  const configurationBlocks = new ConfigurationBlocksLib(configAdapter, tags);
-  const tokens = new CMTokensDomain(new MemoryTokensAdapter(server.tokensDB || []), {
-    framework,
-  });
-  const beats = new CMBeatsDomain(beatsAdapter, {
-    tags,
-    tokens,
-    framework,
-  });
-  const beatEvents = new BeatEventsLib({} as any, beats);
-
-  const libs: CMServerLibs = {
-    beatEvents,
-    framework,
-    beats,
-    tags,
-    tokens,
-    configurationBlocks,
-  };
-
-  return libs;
-}
diff --git a/x-pack/legacy/plugins/beats_management/server/lib/framework.ts b/x-pack/legacy/plugins/beats_management/server/lib/framework.ts
index 1a6f84a6979c6..96a06929073e5 100644
--- a/x-pack/legacy/plugins/beats_management/server/lib/framework.ts
+++ b/x-pack/legacy/plugins/beats_management/server/lib/framework.ts
@@ -16,7 +16,6 @@ import {
 export class BackendFrameworkLib {
   public log = this.adapter.log;
   public on = this.adapter.on.bind(this.adapter);
-  public exposeStaticDir = this.adapter.exposeStaticDir;
   public internalUser = this.adapter.internalUser;
   constructor(private readonly adapter: BackendFrameworkAdapter) {
     this.validateConfig();
diff --git a/x-pack/legacy/plugins/beats_management/server/rest_api/__tests__/beats_assignments.test.ts b/x-pack/legacy/plugins/beats_management/server/rest_api/__tests__/beats_assignments.test.ts
deleted file mode 100644
index 156304443431d..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/rest_api/__tests__/beats_assignments.test.ts
+++ /dev/null
@@ -1,249 +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 { CMServerLibs } from '../../lib/types';
-import { HapiBackendFrameworkAdapter } from './../../lib/adapters/framework/hapi_framework_adapter';
-import { testHarnes } from './test_harnes';
-
-describe('assign_tags_to_beats', () => {
-  let serverLibs: CMServerLibs;
-
-  beforeAll(async () => {
-    jest.setTimeout(100000); // 1 second
-
-    serverLibs = await testHarnes.getServerLibs();
-  });
-  beforeEach(async () => await testHarnes.loadData());
-
-  it('should add a single tag to a single beat', async () => {
-    const { result, statusCode } = await ((serverLibs.framework as any)
-      .adapter as HapiBackendFrameworkAdapter).injectRequstForTesting({
-      method: 'POST',
-      url: '/api/beats/agents_tags/assignments',
-      headers: {
-        'kbn-xsrf': 'xxx',
-        authorization: 'loggedin',
-      },
-      payload: {
-        assignments: [{ beatId: 'bar', tag: 'production' }],
-      },
-    });
-
-    expect(statusCode).toEqual(200);
-    expect(result.results).toEqual([{ success: true, result: { message: 'updated' } }]);
-  });
-
-  it('should not re-add an existing tag to a beat', async () => {
-    const { result, statusCode } = await ((serverLibs.framework as any)
-      .adapter as HapiBackendFrameworkAdapter).injectRequstForTesting({
-      method: 'POST',
-      url: '/api/beats/agents_tags/assignments',
-      headers: {
-        'kbn-xsrf': 'xxx',
-        authorization: 'loggedin',
-      },
-      payload: {
-        assignments: [{ beatId: 'foo', tag: 'production' }],
-      },
-    });
-
-    expect(statusCode).toEqual(200);
-
-    expect(result.results).toEqual([{ success: true, result: { message: 'updated' } }]);
-
-    const beat = await serverLibs.beats.getById(
-      {
-        kind: 'internal',
-      },
-      'foo'
-    );
-    expect(beat!.tags).toEqual(['production', 'qa']); // as
-  });
-
-  it('should add a single tag to a multiple beats', async () => {
-    const { result, statusCode } = await ((serverLibs.framework as any)
-      .adapter as HapiBackendFrameworkAdapter).injectRequstForTesting({
-      method: 'POST',
-      url: '/api/beats/agents_tags/assignments',
-      headers: {
-        'kbn-xsrf': 'xxx',
-        authorization: 'loggedin',
-      },
-      payload: {
-        assignments: [
-          { beatId: 'foo', tag: 'development' },
-          { beatId: 'bar', tag: 'development' },
-        ],
-      },
-    });
-
-    expect(statusCode).toEqual(200);
-
-    expect(result.results).toEqual([
-      { success: true, result: { message: 'updated' } },
-      { success: true, result: { message: 'updated' } },
-    ]);
-
-    let beat;
-
-    beat = await serverLibs.beats.getById(
-      {
-        kind: 'internal',
-      },
-      'foo'
-    );
-    expect(beat!.tags).toEqual(['production', 'qa', 'development']); // as beat 'foo' already had 'production' and 'qa' tags attached to it
-
-    // Beat bar
-    beat = await serverLibs.beats.getById(
-      {
-        kind: 'internal',
-      },
-      'bar'
-    );
-
-    expect(beat!.tags).toEqual(['development']);
-  });
-
-  it('should add multiple tags to a single beat', async () => {
-    const { result, statusCode } = await ((serverLibs.framework as any)
-      .adapter as HapiBackendFrameworkAdapter).injectRequstForTesting({
-      method: 'POST',
-      url: '/api/beats/agents_tags/assignments',
-      headers: {
-        'kbn-xsrf': 'xxx',
-        authorization: 'loggedin',
-      },
-      payload: {
-        assignments: [
-          { beatId: 'bar', tag: 'development' },
-          { beatId: 'bar', tag: 'production' },
-        ],
-      },
-    });
-
-    expect(statusCode).toEqual(200);
-
-    expect(result.results).toEqual([
-      { success: true, result: { message: 'updated' } },
-      { success: true, result: { message: 'updated' } },
-    ]);
-
-    const beat = await serverLibs.beats.getById(
-      {
-        kind: 'internal',
-      },
-      'bar'
-    );
-
-    expect(beat!.tags).toEqual(['development', 'production']);
-  });
-
-  // it('should add multiple tags to a multiple beats', async () => {
-  //   const { body: apiResponse } = await supertest
-  //     .post('/api/beats/agents_tags/assignments')
-  //     .set('kbn-xsrf', 'xxx')
-  //     .send({
-  //       assignments: [{ beatId: 'foo', tag: 'development' }, { beatId: 'bar', tag: 'production' }],
-  //     })
-  //     .expect(200);
-
-  //   expect(apiResponse.assignments).to.eql([
-  //     { status: 200, result: 'updated' },
-  //     { status: 200, result: 'updated' },
-  //   ]);
-
-  //   let esResponse;
-  //   let beat;
-
-  //   // Beat foo
-  //   esResponse = await es.get({
-  //     index: ES_INDEX_NAME,
-  //     type: ES_TYPE_NAME,
-  //     id: `beat:foo`,
-  //   });
-
-  //   beat = esResponse._source.beat;
-  //   expect(beat.tags).to.eql(['production', 'qa', 'development']); // as beat 'foo' already had 'production' and 'qa' tags attached to it
-
-  //   // Beat bar
-  //   esResponse = await es.get({
-  //     index: ES_INDEX_NAME,
-  //     type: ES_TYPE_NAME,
-  //     id: `beat:bar`,
-  //   });
-
-  //   beat = esResponse._source.beat;
-  //   expect(beat.tags).to.eql(['production']);
-  // });
-
-  // it('should return errors for non-existent beats', async () => {
-  //   const nonExistentBeatId = chance.word();
-
-  //   const { body: apiResponse } = await supertest
-  //     .post('/api/beats/agents_tags/assignments')
-  //     .set('kbn-xsrf', 'xxx')
-  //     .send({
-  //       assignments: [{ beatId: nonExistentBeatId, tag: 'production' }],
-  //     })
-  //     .expect(200);
-
-  //   expect(apiResponse.assignments).to.eql([
-  //     { status: 404, result: `Beat ${nonExistentBeatId} not found` },
-  //   ]);
-  // });
-
-  // it('should return errors for non-existent tags', async () => {
-  //   const nonExistentTag = chance.word();
-
-  //   const { body: apiResponse } = await supertest
-  //     .post('/api/beats/agents_tags/assignments')
-  //     .set('kbn-xsrf', 'xxx')
-  //     .send({
-  //       assignments: [{ beatId: 'bar', tag: nonExistentTag }],
-  //     })
-  //     .expect(200);
-
-  //   expect(apiResponse.assignments).to.eql([
-  //     { status: 404, result: `Tag ${nonExistentTag} not found` },
-  //   ]);
-
-  //   const esResponse = await es.get({
-  //     index: ES_INDEX_NAME,
-  //     type: ES_TYPE_NAME,
-  //     id: `beat:bar`,
-  //   });
-
-  //   const beat = esResponse._source.beat;
-  //   expect(beat).to.not.have.property('tags');
-  // });
-
-  // it('should return errors for non-existent beats and tags', async () => {
-  //   const nonExistentBeatId = chance.word();
-  //   const nonExistentTag = chance.word();
-
-  //   const { body: apiResponse } = await supertest
-  //     .post('/api/beats/agents_tags/assignments')
-  //     .set('kbn-xsrf', 'xxx')
-  //     .send({
-  //       assignments: [{ beatID: nonExistentBeatId, tag: nonExistentTag }],
-  //     })
-  //     .expect(200);
-
-  //   expect(apiResponse.assignments).to.eql([
-  //     { status: 404, result: `Beat ${nonExistentBeatId} and tag ${nonExistentTag} not found` },
-  //   ]);
-
-  //   const esResponse = await es.get({
-  //     index: ES_INDEX_NAME,
-  //     type: ES_TYPE_NAME,
-  //     id: `beat:bar`,
-  //   });
-
-  //   const beat = esResponse._source.beat;
-  //   expect(beat).to.not.have.property('tags');
-  // });
-});
diff --git a/x-pack/legacy/plugins/beats_management/server/rest_api/__tests__/data.json b/x-pack/legacy/plugins/beats_management/server/rest_api/__tests__/data.json
deleted file mode 100644
index 4ee5a4a7e2d55..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/rest_api/__tests__/data.json
+++ /dev/null
@@ -1,178 +0,0 @@
-{
-  "value": {
-    "index": ".management-beats",
-    "type": "_doc",
-    "id": "beat:qux",
-    "source": {
-      "type": "beat",
-      "beat": {
-        "type": "filebeat",
-        "active": true,
-        "host_ip": "1.2.3.4",
-        "host_name": "foo.bar.com",
-        "id": "qux",
-        "name": "qux_filebeat",
-        "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjcmVhdGVkIjoiMjAxOC0wNi0zMFQwMzo0MjoxNS4yMzBaIiwiaWF0IjoxNTMwMzMwMTM1fQ.SSsX2Byyo1B1bGxV8C3G4QldhE5iH87EY_1r21-bwbI"
-      }
-    }
-  }
-}
-
-{
-  "value": {
-    "index": ".management-beats",
-    "type": "_doc",
-    "id": "beat:baz",
-    "source": {
-      "type": "beat",
-      "beat": {
-        "type": "metricbeat",
-        "active": true,
-        "host_ip": "22.33.11.44",
-        "host_name": "baz.bar.com",
-        "id": "baz",
-        "name": "baz_metricbeat",
-        "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjcmVhdGVkIjoiMjAxOC0wNi0zMFQwMzo0MjoxNS4yMzBaIiwiaWF0IjoxNTMwMzMwMTM1fQ.SSsX2Byyo1B1bGxV8C3G4QldhE5iH87EY_1r21-bwbI"
-      }
-    }
-  }
-}
-
-{
-  "value": {
-    "index": ".management-beats",
-    "type": "_doc",
-    "id": "beat:foo",
-    "source": {
-      "type": "beat",
-      "beat": {
-        "type": "metricbeat",
-        "active": true,
-        "host_ip": "1.2.3.4",
-        "host_name": "foo.bar.com",
-        "id": "foo",
-        "name": "foo_metricbeat",
-        "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjcmVhdGVkIjoiMjAxOC0wNi0zMFQwMzo0MjoxNS4yMzBaIiwiaWF0IjoxNTMwMzMwMTM1fQ.SSsX2Byyo1B1bGxV8C3G4QldhE5iH87EY_1r21-bwbI",
-        "verified_on": "2018-05-15T16:25:38.924Z",
-        "tags": [
-          "production",
-          "qa"
-        ]
-      }
-    }
-  }
-}
-
-{
-  "value": {
-    "index": ".management-beats",
-    "type": "_doc",
-    "id": "beat:bar",
-    "source": {
-      "type": "beat",
-      "beat": {
-        "type": "filebeat",
-        "active": true,
-        "host_ip": "11.22.33.44",
-        "host_name": "foo.com",
-        "id": "bar",
-        "name": "bar_filebeat",
-        "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjcmVhdGVkIjoiMjAxOC0wNi0zMFQwMzo0MjoxNS4yMzBaIiwiaWF0IjoxNTMwMzMwMTM1fQ.SSsX2Byyo1B1bGxV8C3G4QldhE5iH87EY_1r21-bwbI"
-      }
-    }
-  }
-}
-
-{
-  "value": {
-    "index": ".management-beats",
-    "type": "_doc",
-    "id": "tag:production",
-    "source": {
-      "type": "tag",
-      "tag": {
-        "color": "blue"
-      }
-    }
-  }
-}
-
-{
-  "value": {
-    "index": ".management-beats",
-    "type": "_doc",
-    "id": "tag:development",
-    "source": {
-      "type": "tag",
-      "tag": {
-        "color": "red"
-      }
-    }
-  }
-}
-
-{
-  "value": {
-    "index": ".management-beats",
-    "type": "_doc",
-    "id": "tag:qa",
-    "source": {
-      "type": "tag",
-      "tag": {
-        "color": "green"
-      }
-    }
-  }
-}
-
-{
-  "value": {
-    "index": ".management-beats",
-    "type": "_doc",
-    "id": "configuration_block:SDfsdfIBdsfsf50zbta",
-    "source": {
-      "type": "configuration_block",
-      "configuration_block": {
-        "type": "output",
-        "description": "some description",
-        "tag": "production",
-        "last_updated": "2018-05-15T16:25:38.924Z",
-        "config": "{ \"username\": \"some-username\",  \"hosts\": [\"localhost:11211\"] }"
-      }
-    }
-  }
-}
-
-{
-  "value": {
-    "index": ".management-beats",
-    "type": "_doc",
-    "id": "configuration_block:W0tpsmIBdsfsf50zbta",
-    "source": {
-      "type": "configuration_block",
-      "configuration_block": {
-        "type": "metricbeat.modules",
-        "tag": "production",
-        "last_updated": "2018-05-15T16:25:38.924Z",
-        "config": "{ \"module\": \"memcached\",  \"hosts\": [\"localhost:11211\"] }"
-      }
-    }
-  }
-}
-
-{
-  "value": {
-    "index": ".management-beats",
-    "type": "_doc",
-    "id": "configuration_block:W0tpsmIBdwcYyG50zbta",
-    "source": {
-      "type": "configuration_block",
-      "configuration_block": {
-        "type": "metricbeat.modules",
-        "tag": "qa",
-        "last_updated": "2018-05-15T16:25:38.924Z",
-        "config": "{\"module\": \"memcached\", \"node.namespace\": \"node\", \"hosts\": [\"localhost:4949\"] }"
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/beats_management/server/rest_api/__tests__/test_harnes.ts b/x-pack/legacy/plugins/beats_management/server/rest_api/__tests__/test_harnes.ts
deleted file mode 100644
index 590ce0bd7b287..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/rest_api/__tests__/test_harnes.ts
+++ /dev/null
@@ -1,102 +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 { badRequest } from 'boom';
-import { readFile } from 'fs';
-// @ts-ignore
-import Hapi from 'hapi';
-import { resolve } from 'path';
-import { promisify } from 'util';
-import { BeatTag, CMBeat } from '../../../common/domain_types';
-import { TokenEnrollmentData } from '../../lib/adapters/tokens/adapter_types';
-import { compose } from '../../lib/compose/testing';
-import { CMServerLibs } from '../../lib/types';
-import { initManagementServer } from './../../management_server';
-
-const readFileAsync = promisify(readFile);
-let serverLibs: CMServerLibs;
-
-export const testHarnes = {
-  description: 'API Development Tests',
-  loadData: async () => {
-    if (!serverLibs) {
-      throw new Error('Server libs not composed yet...');
-    }
-    const contents = await readFileAsync(resolve(__dirname, './data.json'), 'utf8');
-    const database = contents.split(/\n\n/);
-
-    // @ts-ignore the private access
-    serverLibs.beats.adapter.setDB(
-      database.reduce((inserts: CMBeat[], source) => {
-        const type = 'beat';
-        const data = JSON.parse(source);
-
-        if (data.value.source.type === type) {
-          inserts.push({
-            id: data.value.id.substring(data.value.id.indexOf(':') + 1),
-            ...data.value.source[type],
-          });
-        }
-        return inserts;
-      }, [])
-    );
-
-    // @ts-ignore the private access
-    serverLibs.tags.adapter.setDB(
-      database.reduce((inserts: BeatTag[], source) => {
-        const type = 'tag';
-        const data = JSON.parse(source);
-
-        if (data.value.source.type === type) {
-          inserts.push({
-            id: data.value.id.substring(data.value.id.indexOf(':') + 1),
-            ...data.value.source[type],
-          });
-        }
-        return inserts;
-      }, [])
-    );
-
-    // @ts-ignore the private access
-    serverLibs.tokens.adapter.setDB(
-      database.reduce((inserts: TokenEnrollmentData[], source) => {
-        const type = 'token';
-        const data = JSON.parse(source);
-
-        if (data.value.source.type === type) {
-          inserts.push({
-            id: data.value.id.substring(data.value.id.indexOf(':') + 1),
-            ...data.value.source[type],
-          });
-        }
-        return inserts;
-      }, [])
-    );
-  },
-  getServerLibs: async () => {
-    if (!serverLibs) {
-      const server = new Hapi.Server({ port: 111111 });
-      const versionHeader = 'kbn-version';
-      const xsrfHeader = 'kbn-xsrf';
-
-      server.ext('onPostAuth', (req: any, h: any) => {
-        const isSafeMethod = req.method === 'get' || req.method === 'head';
-        const hasVersionHeader = versionHeader in req.headers;
-        const hasXsrfHeader = xsrfHeader in req.headers;
-
-        if (!isSafeMethod && !hasVersionHeader && !hasXsrfHeader) {
-          throw badRequest(`Request must contain a ${xsrfHeader} header.`);
-        }
-
-        return h.continue;
-      });
-
-      serverLibs = compose(server);
-      initManagementServer(serverLibs);
-    }
-    return serverLibs;
-  },
-};
diff --git a/x-pack/legacy/plugins/beats_management/server/utils/README.md b/x-pack/legacy/plugins/beats_management/server/utils/README.md
deleted file mode 100644
index 8a6a27aa29867..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/utils/README.md
+++ /dev/null
@@ -1 +0,0 @@
-Utils should be data processing functions and other tools.... all in all utils is basicly everything that is not an adaptor, or presenter and yet too much to put in a lib.
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/beats_management/server/utils/find_non_existent_items.ts b/x-pack/legacy/plugins/beats_management/server/utils/find_non_existent_items.ts
deleted file mode 100644
index 0e9b4f0b6fa5e..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/utils/find_non_existent_items.ts
+++ /dev/null
@@ -1,19 +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.
- */
-
-interface RandomItem {
-  id: string;
-  [key: string]: any;
-}
-
-export function findNonExistentItems(items: RandomItem[], requestedItems: any) {
-  return requestedItems.reduce((nonExistentItems: string[], requestedItem: string, idx: number) => {
-    if (items.findIndex((item: RandomItem) => item && item.id === requestedItem) === -1) {
-      nonExistentItems.push(requestedItems[idx]);
-    }
-    return nonExistentItems;
-  }, []);
-}
diff --git a/x-pack/legacy/plugins/beats_management/server/utils/helper_types.ts b/x-pack/legacy/plugins/beats_management/server/utils/helper_types.ts
deleted file mode 100644
index 96f7b7bc79b62..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/utils/helper_types.ts
+++ /dev/null
@@ -1,13 +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 type InterfaceExcept<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-
-export function arrayFromEnum<T extends string | number>(e: any): T[] {
-  return Object.keys(e)
-    .filter((key) => isNaN(+key))
-    .map((name) => e[name]) as T[];
-}
diff --git a/x-pack/legacy/plugins/beats_management/server/utils/index_templates/beats_template.json b/x-pack/legacy/plugins/beats_management/server/utils/index_templates/beats_template.json
deleted file mode 100644
index ba3a0aba6c256..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/utils/index_templates/beats_template.json
+++ /dev/null
@@ -1,119 +0,0 @@
-{
-  "index_patterns": [".management-beats"],
-  "version": 66000,
-  "settings": {
-    "index": {
-      "number_of_shards": 1,
-      "auto_expand_replicas": "0-1",
-      "codec": "best_compression"
-    }
-  },
-  "mappings": {
-    "_doc": {
-      "dynamic": "strict",
-      "properties": {
-        "type": {
-          "type": "keyword"
-        },
-        "configuration_block": {
-          "properties": {
-            "id": {
-              "type": "keyword"
-            },
-            "type": {
-              "type": "keyword"
-            },
-            "tag": {
-              "type": "keyword"
-            },
-            "description": {
-              "type": "text"
-            },
-            "config": {
-              "type": "keyword"
-            },
-            "last_updated": {
-              "type": "date"
-            }
-          }
-        },
-        "enrollment_token": {
-          "properties": {
-            "token": {
-              "type": "keyword"
-            },
-            "expires_on": {
-              "type": "date"
-            }
-          }
-        },
-        "tag": {
-          "properties": {
-            "id": {
-              "type": "keyword"
-            },
-            "name": {
-              "type": "keyword"
-            },
-            "color": {
-              "type": "keyword"
-            },
-            "hasConfigurationBlocksTypes": {
-              "type": "keyword"
-            }
-          }
-        },
-        "beat": {
-          "properties": {
-            "id": {
-              "type": "keyword"
-            },
-            "config_status": {
-              "type": "keyword"
-            },
-            "active": {
-              "type": "boolean"
-            },
-            "last_checkin": {
-              "type": "date"
-            },
-            "enrollment_token": {
-              "type": "keyword"
-            },
-            "access_token": {
-              "type": "keyword"
-            },
-            "verified_on": {
-              "type": "date"
-            },
-            "type": {
-              "type": "keyword"
-            },
-            "version": {
-              "type": "keyword"
-            },
-            "host_ip": {
-              "type": "ip"
-            },
-            "host_name": {
-              "type": "keyword"
-            },
-            "ephemeral_id": {
-              "type": "keyword"
-            },
-            "tags": {
-              "type": "keyword"
-            },
-            "metadata": {
-              "dynamic": "true",
-              "type": "object"
-            },
-            "name": {
-              "type": "keyword"
-            }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/x-pack/legacy/plugins/beats_management/server/utils/polyfills.ts b/x-pack/legacy/plugins/beats_management/server/utils/polyfills.ts
deleted file mode 100644
index 5291e2c72be7d..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/utils/polyfills.ts
+++ /dev/null
@@ -1,17 +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 entries = (obj: any) => {
-  const ownProps = Object.keys(obj);
-  let i = ownProps.length;
-  const resArray = new Array(i); // preallocate the Array
-
-  while (i--) {
-    resArray[i] = [ownProps[i], obj[ownProps[i]]];
-  }
-
-  return resArray;
-};
diff --git a/x-pack/legacy/plugins/beats_management/server/utils/wrap_request.ts b/x-pack/legacy/plugins/beats_management/server/utils/wrap_request.ts
deleted file mode 100644
index 57cf70a99a296..0000000000000
--- a/x-pack/legacy/plugins/beats_management/server/utils/wrap_request.ts
+++ /dev/null
@@ -1,36 +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 {
-  FrameworkRequest,
-  internalAuthData,
-  KibanaServerRequest,
-} from '../lib/adapters/framework/adapter_types';
-
-export function wrapRequest<InternalRequest extends KibanaServerRequest>(
-  req: InternalRequest
-): FrameworkRequest<InternalRequest> {
-  const { params, payload, query, headers, info } = req;
-
-  const isAuthenticated = headers.authorization != null;
-
-  return {
-    // @ts-ignore -- partial applucation, adapter adds other user data
-    user: isAuthenticated
-      ? {
-          kind: 'authenticated',
-          [internalAuthData]: headers,
-        }
-      : {
-          kind: 'unauthenticated',
-        },
-    headers,
-    info,
-    params,
-    payload,
-    query,
-  };
-}
diff --git a/x-pack/legacy/plugins/beats_management/types/eui.d.ts b/x-pack/legacy/plugins/beats_management/types/eui.d.ts
deleted file mode 100644
index 636d0a2f7b51e..0000000000000
--- a/x-pack/legacy/plugins/beats_management/types/eui.d.ts
+++ /dev/null
@@ -1,16 +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.
- */
-
-/**
- *  /!\  These type definitions are temporary until the upstream @elastic/eui
- *       package includes them.
- */
-
-import * as eui from '@elastic/eui';
-import { Moment } from 'moment';
-import { ChangeEventHandler, MouseEventHandler, ReactType, Ref, FC } from 'react';
-
-declare module '@elastic/eui' {}
diff --git a/x-pack/legacy/plugins/beats_management/wallaby.js b/x-pack/legacy/plugins/beats_management/wallaby.js
deleted file mode 100644
index 823f63b15bcb3..0000000000000
--- a/x-pack/legacy/plugins/beats_management/wallaby.js
+++ /dev/null
@@ -1,62 +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.
- */
-const path = require('path');
-process.env.NODE_PATH = path.resolve(__dirname, '..', '..', '..', 'node_modules');
-
-module.exports = function (wallaby) {
-  return {
-    debug: true,
-    files: [
-      './tsconfig.json',
-      //'plugins/beats/public/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)',
-      'server/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)',
-      'common/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)',
-      'public/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)',
-      '!**/*.test.ts',
-    ],
-
-    tests: ['**/*.test.ts', '**/*.test.tsx'],
-    env: {
-      type: 'node',
-      runner: 'node',
-    },
-    testFramework: {
-      type: 'jest',
-      //path: jestPath,
-    },
-    compilers: {
-      '**/*.ts?(x)': wallaby.compilers.typeScript({
-        typescript: require('typescript'), // eslint-disable-line
-      }),
-      '**/*.js': wallaby.compilers.babel({
-        babelrc: false,
-        presets: [require.resolve('@kbn/babel-preset/node_preset')],
-      }),
-    },
-
-    setup: (wallaby) => {
-      const path = require('path');
-
-      const kibanaDirectory = path.resolve(wallaby.localProjectDir, '..', '..', '..');
-      wallaby.testFramework.configure({
-        rootDir: wallaby.localProjectDir,
-        moduleNameMapper: {
-          '^ui/(.*)': `${kibanaDirectory}/src/legacy/ui/public/$1`,
-          // eslint-disable-next-line
-          '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': `${kibanaDirectory}/src/dev/jest/mocks/file_mock.js`,
-          '\\.(css|less|scss)$': `${kibanaDirectory}/src/dev/jest/mocks/style_mock.js`,
-        },
-        testURL: 'http://localhost',
-        setupFiles: [`${kibanaDirectory}/x-pack/dev-tools/jest/setup/enzyme.js`],
-        snapshotSerializers: [`${kibanaDirectory}/node_modules/enzyme-to-json/serializer`],
-        transform: {
-          '^.+\\.js$': `${kibanaDirectory}/src/dev/jest/babel_transform.js`,
-          //"^.+\\.tsx?$": `${kibanaDirectory}/src/dev/jest/ts_transform.js`,
-        },
-      });
-    },
-  };
-};
diff --git a/x-pack/plugins/beats_management/server/index.ts b/x-pack/plugins/beats_management/server/index.ts
index 607fb0ab2725d..ad19087f5ac9f 100644
--- a/x-pack/plugins/beats_management/server/index.ts
+++ b/x-pack/plugins/beats_management/server/index.ts
@@ -4,7 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { PluginInitializer } from '../../../../src/core/server';
 import { beatsManagementConfigSchema } from '../common';
+import { BeatsManagementPlugin } from './plugin';
 
 export const config = {
   schema: beatsManagementConfigSchema,
@@ -16,8 +18,4 @@ export const config = {
   },
 };
 
-export const plugin = () => ({
-  setup() {},
-  start() {},
-  stop() {},
-});
+export const plugin: PluginInitializer<{}, {}> = (context) => new BeatsManagementPlugin(context);
diff --git a/x-pack/plugins/beats_management/server/plugin.ts b/x-pack/plugins/beats_management/server/plugin.ts
new file mode 100644
index 0000000000000..a82dbcb4a3a6e
--- /dev/null
+++ b/x-pack/plugins/beats_management/server/plugin.ts
@@ -0,0 +1,39 @@
+/*
+ * 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 {
+  CoreSetup,
+  CoreStart,
+  Plugin,
+  PluginInitializerContext,
+} from '../../../../src/core/server';
+import { SecurityPluginSetup } from '../../security/server';
+import { LicensingPluginStart } from '../../licensing/server';
+import { BeatsManagementConfigType } from '../common';
+
+interface SetupDeps {
+  security?: SecurityPluginSetup;
+}
+
+interface StartDeps {
+  licensing: LicensingPluginStart;
+}
+
+export class BeatsManagementPlugin implements Plugin<{}, {}, SetupDeps, StartDeps> {
+  constructor(
+    private readonly initializerContext: PluginInitializerContext<BeatsManagementConfigType>
+  ) {}
+
+  public async setup(core: CoreSetup<StartDeps>, plugins: SetupDeps) {
+    this.initializerContext.config.create();
+
+    return {};
+  }
+
+  public async start(core: CoreStart, { licensing }: StartDeps) {
+    return {};
+  }
+}
diff --git a/x-pack/legacy/plugins/beats_management/types/formsy.d.ts b/x-pack/plugins/beats_management/types/formsy.d.ts
similarity index 100%
rename from x-pack/legacy/plugins/beats_management/types/formsy.d.ts
rename to x-pack/plugins/beats_management/types/formsy.d.ts

From 7dd4fa2618accbb26f56ddb2b18aade7b5d1f6df Mon Sep 17 00:00:00 2001
From: Pierre Gayvallet <pierre.gayvallet@elastic.co>
Date: Thu, 18 Jun 2020 11:37:41 +0200
Subject: [PATCH 14/63] Add section about marble testing to `TESTING.md`
 (#68749)

* Add section about marble testing

* improve `callServerAPI` example

* review comments

* add comment on abort observable anti-pattern
---
 src/core/TESTING.md | 276 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 276 insertions(+)

diff --git a/src/core/TESTING.md b/src/core/TESTING.md
index bed41ab583496..a62922d9b5d64 100644
--- a/src/core/TESTING.md
+++ b/src/core/TESTING.md
@@ -29,6 +29,14 @@ This document outlines best practices and patterns for testing Kibana Plugins.
     - [Testing dependencies usages](#testing-dependencies-usages)
     - [Testing components consuming the dependencies](#testing-components-consuming-the-dependencies)
     - [Testing optional plugin dependencies](#testing-optional-plugin-dependencies)
+  - [RXJS testing](#rxjs-testing)
+    - [Testing RXJS observables with marble](#rxjs-testing-with-marble)
+    - [Precondition](#preconditions-2)
+    - [Examples](#example-5)
+      - [Testing an interval based observable](#testing-an-interval-based-observable)
+      - [Testing observable completion](#testing-observable-completion)
+      - [Testing observable errors](#testing-observable-errors)
+      - [Testing promise based observables](#testing-promise-based-observables)
 
 ## Strategy
 
@@ -1087,3 +1095,271 @@ describe('Plugin', () => {
   });
 });
 ```
+
+## RXJS testing
+
+### Testing RXJS observables with marble
+
+Testing observable based APIs can be challenging, specially when asynchronous operators or sources are used, 
+or when trying to assert against emission's timing.
+
+Fortunately, RXJS comes with it's own `marble` testing module to greatly facilitate that kind of testing.
+
+See [the official doc](https://rxjs-dev.firebaseapp.com/guide/testing/marble-testing) for more information about marble testing.
+
+### Preconditions
+
+The following examples all assume that the following snippet is included in every test file:
+
+```typescript
+import { TestScheduler } from 'rxjs/testing';
+
+const getTestScheduler = () =>
+  new TestScheduler((actual, expected) => {
+    expect(actual).toEqual(expected);
+  });
+```
+
+`getTestScheduler` creates a `TestScheduler` that is wired on `jest`'s `expect` statement when comparing an observable's time frame.
+
+### Examples
+
+#### Testing an interval based observable
+
+Here is a very basic example of an interval-based API:
+
+```typescript
+class FooService {
+  setup() {
+    return {
+      getUpdate$: () => {
+        return interval(100).pipe(map((count) => `update-${count + 1}`));
+      },
+    };
+  }
+}
+```
+
+If we were to be adding a test that asserts the correct behavior of this API without using marble testing, it
+would probably be something like:
+
+```typescript
+it('getUpdate$ emits updates every 100ms', async () => {
+  const service = new FooService();
+  const { getUpdate$ } = service.setup();
+  expect(await getUpdate$().pipe(take(3), toArray()).toPromise()).toEqual([
+    'update-1',
+    'update-2',
+    'update-3',
+  ]);
+});
+```
+
+Note that if we are able to test the correct value of each emission, we don't have any way to assert that
+the interval of 100ms was respected. Even using a subscription based test to try to do so would result
+in potential flakiness, as the subscription execution could trigger on the `101ms` time frame for example.
+
+It also may be important to note:
+- as we need to convert the observable to a promise and wait for the result, the test is `async`
+- we need to perform observable transformation (`take` + `toArray`) in the test to have an usable value to assert against.
+
+Marble testing would allow to get rid of these limitations. An equivalent and improved marble test could be:
+
+```typescript
+  describe('getUpdate$', () => {
+    it('emits updates every 100ms', () => {
+      getTestScheduler().run(({ expectObservable }) => {
+        const { getUpdate$ } = service.setup();
+        expectObservable(getUpdate$(), '301ms !').toBe('100ms a 99ms b 99ms c', {
+          a: 'update-1',
+          b: 'update-2',
+          c: 'update-3',
+        });
+      });
+    });
+  });
+```
+
+Notes:
+- the test is now synchronous
+- the second parameter of `expectObservable` (`'301ms !'`) is used to perform manual unsubscription to the observable, as 
+  `interval` never ends.
+- an emission is considered a time frame, meaning that after the initial `a` emission, we are at the frame `101`, not `100`
+  which is why we are then only using a `99ms` gap between a->b and b->c.
+
+#### Testing observable completion
+
+Let's 'improve' our `getUpdate$` API by allowing the consumer to manually terminate the observable chain using
+a new `abort$` option:
+
+```typescript
+class FooService {
+  setup() {
+    return {
+      // note: using an abortion observable is usually an anti-pattern, as unsubscribing from the observable
+      // is, most of the time, a better solution. This is only used for the example purpose.
+      getUpdate$: ({ abort$ = EMPTY }: { abort$?: Observable<undefined> } = {}) => {
+        return interval(100).pipe(
+            takeUntil(abort$), 
+            map((count) => `update-${count + 1}`)
+        );
+      },
+    };
+  }
+}
+```
+
+We would then add a test to assert than this new option usage is respected:
+
+```typescript
+it('getUpdate$ completes when `abort$` emits', () => {
+  const service = new FooService();
+  getTestScheduler().run(({ expectObservable, hot }) => {
+    const { getUpdate$ } = service.setup();
+    const abort$ = hot('149ms a', { a: undefined });
+    expectObservable(getUpdate$({ abort$ })).toBe('100ms a 48ms |', {
+      a: 'update-1',
+    });
+  });
+});
+```
+
+Notes:
+  - the `|` symbol represents the completion of the observable.
+  - we are here using the `hot` testing utility to create the `abort$` observable to ensure correct emission timing.
+ 
+#### Testing observable errors 
+
+Testing errors thrown by the observable is very close to the previous examples and is done using
+the third parameter of `expectObservable`.
+
+Say we have a service in charge of processing data from an observable and returning the results in a new observable:
+
+```typescript
+interface SomeDataType {
+  id: string;
+}
+
+class BarService {
+  setup() {
+    return {
+      processDataStream: (data$: Observable<SomeDataType>) => {
+        return data$.pipe(
+          map((data) => {
+            if (data.id === 'invalid') {
+              throw new Error(`invalid data: '${data.id}'`);
+            }
+            return {
+              ...data,
+              processed: 'additional-data',
+            };
+          })
+        );
+      },
+    };
+  }
+}
+```
+ 
+We could write a test that asserts the service properly emit processed results until an invalid data is encountered:
+ 
+```typescript
+it('processDataStream throw an error when processing invalid data', () => {
+  getTestScheduler().run(({ expectObservable, hot }) => {
+    const service = new BarService();
+    const { processDataStream } = service.setup();
+
+    const data = hot('--a--b--(c|)', {
+      a: { id: 'a' },
+      b: { id: 'invalid' },
+      c: { id: 'c' },
+    });
+
+    expectObservable(processDataStream(data)).toBe(
+      '--a--#',
+      {
+        a: { id: 'a', processed: 'additional-data' },
+      },
+      `'[Error: invalid data: 'invalid']'`
+    );
+  });
+});
+```
+
+Notes:
+ - the `-` symbol represents one virtual time frame.
+ - the `#` symbol represents an error.
+ - when throwing custom `Error` classes, the assertion can be against an error instance, but this doesn't work
+   with base errors.
+ 
+#### Testing promise based observables
+
+In some cases, the observable we want to test is based on a Promise (like `of(somePromise).pipe(...)`). This can occur
+when using promise-based services, such as core's `http`, for instance.
+
+```typescript
+export const callServerAPI = (
+  http: HttpStart,
+  body: Record<string, any>,
+  { abort$ }: { abort$: Observable<undefined> }
+): Observable<SomeResponse> => {
+  let controller: AbortController | undefined;
+  if (abort$) {
+    controller = new AbortController();
+    abort$.subscribe(() => {
+      controller!.abort();
+    });
+  }
+  return from(
+    http.post<SomeResponse>('/api/endpoint', {
+      body,
+      signal: controller?.signal,
+    })
+  ).pipe(
+    takeUntil(abort$ ?? EMPTY),
+    map((response) => response.results)
+  );
+};
+```
+
+Testing that kind of promise based observable does not work out of the box with marble testing, as the asynchronous promise resolution
+is not handled by the test scheduler's 'sandbox'.
+
+Fortunately, there are workarounds for this problem. The most common one being to mock the promise-returning API to return
+an observable instead for testing, as `of(observable)` also works and returns the input observable. 
+
+Note that when doing so, the test suite must also include tests using a real promise value to ensure correct behavior in real situation.
+
+```typescript
+
+// NOTE: test scheduler do not properly work with promises because of their asynchronous nature.
+// we are cheating here by having `http.post` return an observable instead of a promise.
+// this still allows more finely grained testing about timing, and asserting that the method
+// works properly when `post` returns a real promise is handled in other tests of this suite
+
+it('callServerAPI result observable emits when the response is received', () => {
+  const http = httpServiceMock.createStartContract();
+  getTestScheduler().run(({ expectObservable, hot }) => {
+    // need to cast the observable as `any` because http.post.mockReturnValue expects a promise, see previous comment
+    http.post.mockReturnValue(hot('---(a|)', { a: { someData: 'foo' } }) as any);
+
+    const results = callServerAPI(http, { query: 'term' }, {});
+
+    expectObservable(results).toBe('---(a|)', {
+      a: { someData: 'foo' },
+    });
+  });
+});
+
+it('completes without returning results if aborted$ emits before the response', () => {
+  const http = httpServiceMock.createStartContract();
+  getTestScheduler().run(({ expectObservable, hot }) => {
+    // need to cast the observable as `any` because http.post.mockReturnValue expects a promise, see previous comment
+    http.post.mockReturnValue(hot('---(a|)', { a: { someData: 'foo' } }) as any);
+    const aborted$ = hot('-(a|)', { a: undefined });
+    const results = callServerAPI(http, { query: 'term' }, { aborted$ });
+
+    expectObservable(results).toBe('-|');
+  });
+});
+```
\ No newline at end of file

From d2006ea8a050448ec3d835a9b0c7a56763379c2c Mon Sep 17 00:00:00 2001
From: Pierre Gayvallet <pierre.gayvallet@elastic.co>
Date: Thu, 18 Jun 2020 11:39:25 +0200
Subject: [PATCH 15/63] savedObjects: add `score` to repository.find results
 (#68894)

* add `score` to repository.find results

* update generated doc

* fix FTR result set

* remove score from exports

* fix FTR for find API

* fix label

* fix tsdoc
---
 .../core/server/kibana-plugin-core-server.md  |  1 +
 ...in-core-server.savedobjectsfindresponse.md |  2 +-
 ....savedobjectsfindresponse.saved_objects.md |  2 +-
 ...ugin-core-server.savedobjectsfindresult.md | 19 +++++++++++++++++++
 ...ore-server.savedobjectsfindresult.score.md | 13 +++++++++++++
 .../saved_objects/saved_objects_client.ts     |  6 ++++--
 src/core/server/index.ts                      |  1 +
 .../get_sorted_objects_for_export.test.ts     | 13 +++++++++++++
 .../export/get_sorted_objects_for_export.ts   |  7 +++++--
 .../routes/integration_tests/find.test.ts     |  2 ++
 .../service/lib/repository.test.js            |  8 +++++---
 .../saved_objects/service/lib/repository.ts   |  8 ++++++--
 .../service/saved_objects_client.ts           | 13 ++++++++++++-
 src/core/server/server.api.md                 |  7 ++++++-
 .../server/lib/find_all.test.ts               |  5 +++--
 .../server/lib/find_relationships.test.ts     |  1 +
 .../apis/saved_objects/find.js                |  2 ++
 .../apis/saved_objects_management/find.ts     |  1 +
 .../actions/server/actions_client.test.ts     |  1 +
 .../alerts/server/alerts_client.test.ts       |  1 +
 .../case/server/routes/api/utils.test.ts      | 15 ++++++++++++---
 .../plugins/case/server/routes/api/utils.ts   |  4 ++--
 ...ypted_saved_objects_client_wrapper.test.ts |  6 ++++++
 .../routes/__mocks__/request_responses.ts     |  2 ++
 .../signals/__mocks__/es_results.ts           |  2 +-
 .../spaces_saved_objects_client.test.ts       |  4 ++--
 26 files changed, 123 insertions(+), 23 deletions(-)
 create mode 100644 docs/development/core/server/kibana-plugin-core-server.savedobjectsfindresult.md
 create mode 100644 docs/development/core/server/kibana-plugin-core-server.savedobjectsfindresult.score.md

diff --git a/docs/development/core/server/kibana-plugin-core-server.md b/docs/development/core/server/kibana-plugin-core-server.md
index 147a72016b235..a45bd3d44b28a 100644
--- a/docs/development/core/server/kibana-plugin-core-server.md
+++ b/docs/development/core/server/kibana-plugin-core-server.md
@@ -157,6 +157,7 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 |  [SavedObjectsExportResultDetails](./kibana-plugin-core-server.savedobjectsexportresultdetails.md) | Structure of the export result details entry |
 |  [SavedObjectsFindOptions](./kibana-plugin-core-server.savedobjectsfindoptions.md) |  |
 |  [SavedObjectsFindResponse](./kibana-plugin-core-server.savedobjectsfindresponse.md) | Return type of the Saved Objects <code>find()</code> method.<!-- -->\*Note\*: this type is different between the Public and Server Saved Objects clients. |
+|  [SavedObjectsFindResult](./kibana-plugin-core-server.savedobjectsfindresult.md) |  |
 |  [SavedObjectsImportConflictError](./kibana-plugin-core-server.savedobjectsimportconflicterror.md) | Represents a failure to import due to a conflict. |
 |  [SavedObjectsImportError](./kibana-plugin-core-server.savedobjectsimporterror.md) | Represents a failure to import. |
 |  [SavedObjectsImportMissingReferencesError](./kibana-plugin-core-server.savedobjectsimportmissingreferenceserror.md) | Represents a failure to import due to missing references. |
diff --git a/docs/development/core/server/kibana-plugin-core-server.savedobjectsfindresponse.md b/docs/development/core/server/kibana-plugin-core-server.savedobjectsfindresponse.md
index a1b1a7a056206..4ed069d1598fe 100644
--- a/docs/development/core/server/kibana-plugin-core-server.savedobjectsfindresponse.md
+++ b/docs/development/core/server/kibana-plugin-core-server.savedobjectsfindresponse.md
@@ -20,6 +20,6 @@ export interface SavedObjectsFindResponse<T = unknown>
 |  --- | --- | --- |
 |  [page](./kibana-plugin-core-server.savedobjectsfindresponse.page.md) | <code>number</code> |  |
 |  [per\_page](./kibana-plugin-core-server.savedobjectsfindresponse.per_page.md) | <code>number</code> |  |
-|  [saved\_objects](./kibana-plugin-core-server.savedobjectsfindresponse.saved_objects.md) | <code>Array&lt;SavedObject&lt;T&gt;&gt;</code> |  |
+|  [saved\_objects](./kibana-plugin-core-server.savedobjectsfindresponse.saved_objects.md) | <code>Array&lt;SavedObjectsFindResult&lt;T&gt;&gt;</code> |  |
 |  [total](./kibana-plugin-core-server.savedobjectsfindresponse.total.md) | <code>number</code> |  |
 
diff --git a/docs/development/core/server/kibana-plugin-core-server.savedobjectsfindresponse.saved_objects.md b/docs/development/core/server/kibana-plugin-core-server.savedobjectsfindresponse.saved_objects.md
index adad0dd2b1176..7a91367f6ef0b 100644
--- a/docs/development/core/server/kibana-plugin-core-server.savedobjectsfindresponse.saved_objects.md
+++ b/docs/development/core/server/kibana-plugin-core-server.savedobjectsfindresponse.saved_objects.md
@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-saved_objects: Array<SavedObject<T>>;
+saved_objects: Array<SavedObjectsFindResult<T>>;
 ```
diff --git a/docs/development/core/server/kibana-plugin-core-server.savedobjectsfindresult.md b/docs/development/core/server/kibana-plugin-core-server.savedobjectsfindresult.md
new file mode 100644
index 0000000000000..e455074a7d11b
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-core-server.savedobjectsfindresult.md
@@ -0,0 +1,19 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-server](./kibana-plugin-core-server.md) &gt; [SavedObjectsFindResult](./kibana-plugin-core-server.savedobjectsfindresult.md)
+
+## SavedObjectsFindResult interface
+
+
+<b>Signature:</b>
+
+```typescript
+export interface SavedObjectsFindResult<T = unknown> extends SavedObject<T> 
+```
+
+## Properties
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [score](./kibana-plugin-core-server.savedobjectsfindresult.score.md) | <code>number</code> | The Elasticsearch <code>_score</code> of this result. |
+
diff --git a/docs/development/core/server/kibana-plugin-core-server.savedobjectsfindresult.score.md b/docs/development/core/server/kibana-plugin-core-server.savedobjectsfindresult.score.md
new file mode 100644
index 0000000000000..c6646df6ee470
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-core-server.savedobjectsfindresult.score.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-server](./kibana-plugin-core-server.md) &gt; [SavedObjectsFindResult](./kibana-plugin-core-server.savedobjectsfindresult.md) &gt; [score](./kibana-plugin-core-server.savedobjectsfindresult.score.md)
+
+## SavedObjectsFindResult.score property
+
+The Elasticsearch `_score` of this result.
+
+<b>Signature:</b>
+
+```typescript
+score: number;
+```
diff --git a/src/core/public/saved_objects/saved_objects_client.ts b/src/core/public/saved_objects/saved_objects_client.ts
index 5c8eca4a33ec5..cb279b2cc4c8f 100644
--- a/src/core/public/saved_objects/saved_objects_client.ts
+++ b/src/core/public/saved_objects/saved_objects_client.ts
@@ -303,7 +303,6 @@ export class SavedObjectsClient {
       query,
     });
     return request.then((resp) => {
-      resp.saved_objects = resp.saved_objects.map((d) => this.createSavedObject(d));
       return renameKeys<
         PromiseType<ReturnType<SavedObjectsApi['find']>>,
         SavedObjectsFindResponsePublic
@@ -314,7 +313,10 @@ export class SavedObjectsClient {
           per_page: 'perPage',
           page: 'page',
         },
-        resp
+        {
+          ...resp,
+          saved_objects: resp.saved_objects.map((d) => this.createSavedObject(d)),
+        }
       ) as SavedObjectsFindResponsePublic<T>;
     });
   };
diff --git a/src/core/server/index.ts b/src/core/server/index.ts
index 658c24f835020..dccd58c24a7d0 100644
--- a/src/core/server/index.ts
+++ b/src/core/server/index.ts
@@ -217,6 +217,7 @@ export {
   SavedObjectsErrorHelpers,
   SavedObjectsExportOptions,
   SavedObjectsExportResultDetails,
+  SavedObjectsFindResult,
   SavedObjectsFindResponse,
   SavedObjectsImportConflictError,
   SavedObjectsImportError,
diff --git a/src/core/server/saved_objects/export/get_sorted_objects_for_export.test.ts b/src/core/server/saved_objects/export/get_sorted_objects_for_export.test.ts
index 32485f461f59b..5da2235828b5c 100644
--- a/src/core/server/saved_objects/export/get_sorted_objects_for_export.test.ts
+++ b/src/core/server/saved_objects/export/get_sorted_objects_for_export.test.ts
@@ -47,6 +47,7 @@ describe('getSortedObjectsForExport()', () => {
           id: '2',
           type: 'search',
           attributes: {},
+          score: 1,
           references: [
             {
               name: 'name',
@@ -59,6 +60,7 @@ describe('getSortedObjectsForExport()', () => {
           id: '1',
           type: 'index-pattern',
           attributes: {},
+          score: 1,
           references: [],
         },
       ],
@@ -133,6 +135,7 @@ describe('getSortedObjectsForExport()', () => {
           id: '2',
           type: 'search',
           attributes: {},
+          score: 1,
           references: [
             {
               name: 'name',
@@ -145,6 +148,7 @@ describe('getSortedObjectsForExport()', () => {
           id: '1',
           type: 'index-pattern',
           attributes: {},
+          score: 1,
           references: [],
         },
       ],
@@ -192,6 +196,7 @@ describe('getSortedObjectsForExport()', () => {
           id: '2',
           type: 'search',
           attributes: {},
+          score: 1,
           references: [
             {
               name: 'name',
@@ -204,6 +209,7 @@ describe('getSortedObjectsForExport()', () => {
           id: '1',
           type: 'index-pattern',
           attributes: {},
+          score: 1,
           references: [],
         },
       ],
@@ -279,6 +285,7 @@ describe('getSortedObjectsForExport()', () => {
           id: '2',
           type: 'search',
           attributes: {},
+          score: 1,
           references: [
             {
               name: 'name',
@@ -291,6 +298,7 @@ describe('getSortedObjectsForExport()', () => {
           id: '1',
           type: 'index-pattern',
           attributes: {},
+          score: 1,
           references: [],
         },
       ],
@@ -366,6 +374,7 @@ describe('getSortedObjectsForExport()', () => {
           id: '2',
           type: 'search',
           attributes: {},
+          score: 1,
           references: [
             {
               type: 'index-pattern',
@@ -378,6 +387,7 @@ describe('getSortedObjectsForExport()', () => {
           id: '1',
           type: 'index-pattern',
           attributes: {},
+          score: 1,
           references: [],
         },
       ],
@@ -405,6 +415,7 @@ describe('getSortedObjectsForExport()', () => {
           attributes: {
             name: 'baz',
           },
+          score: 1,
           references: [],
         },
         {
@@ -413,6 +424,7 @@ describe('getSortedObjectsForExport()', () => {
           attributes: {
             name: 'foo',
           },
+          score: 1,
           references: [],
         },
         {
@@ -421,6 +433,7 @@ describe('getSortedObjectsForExport()', () => {
           attributes: {
             name: 'bar',
           },
+          score: 1,
           references: [],
         },
       ],
diff --git a/src/core/server/saved_objects/export/get_sorted_objects_for_export.ts b/src/core/server/saved_objects/export/get_sorted_objects_for_export.ts
index cafaa5a3147db..6e985c25aeaef 100644
--- a/src/core/server/saved_objects/export/get_sorted_objects_for_export.ts
+++ b/src/core/server/saved_objects/export/get_sorted_objects_for_export.ts
@@ -116,8 +116,11 @@ async function fetchObjectsToExport({
     }
 
     // sorts server-side by _id, since it's only available in fielddata
-    return findResponse.saved_objects.sort((a: SavedObject, b: SavedObject) =>
-      a.id > b.id ? 1 : -1
+    return (
+      findResponse.saved_objects
+        // exclude the find-specific `score` property from the exported objects
+        .map(({ score, ...obj }) => obj)
+        .sort((a: SavedObject, b: SavedObject) => (a.id > b.id ? 1 : -1))
     );
   } else {
     throw Boom.badRequest('Either `type` or `objects` are required.');
diff --git a/src/core/server/saved_objects/routes/integration_tests/find.test.ts b/src/core/server/saved_objects/routes/integration_tests/find.test.ts
index 31bda1d6b9cbd..33e12dd4e517d 100644
--- a/src/core/server/saved_objects/routes/integration_tests/find.test.ts
+++ b/src/core/server/saved_objects/routes/integration_tests/find.test.ts
@@ -79,6 +79,7 @@ describe('GET /api/saved_objects/_find', () => {
           timeFieldName: '@timestamp',
           notExpandable: true,
           attributes: {},
+          score: 1,
           references: [],
         },
         {
@@ -88,6 +89,7 @@ describe('GET /api/saved_objects/_find', () => {
           timeFieldName: '@timestamp',
           notExpandable: true,
           attributes: {},
+          score: 1,
           references: [],
         },
       ],
diff --git a/src/core/server/saved_objects/service/lib/repository.test.js b/src/core/server/saved_objects/service/lib/repository.test.js
index d631ef9cb353c..ea749235cbb41 100644
--- a/src/core/server/saved_objects/service/lib/repository.test.js
+++ b/src/core/server/saved_objects/service/lib/repository.test.js
@@ -1939,7 +1939,7 @@ describe('SavedObjectsRepository', () => {
             {
               _index: '.kibana',
               _id: `${namespace ? `${namespace}:` : ''}config:6.0.0-alpha1`,
-              _score: 1,
+              _score: 2,
               ...mockVersionProps,
               _source: {
                 namespace,
@@ -1954,7 +1954,7 @@ describe('SavedObjectsRepository', () => {
             {
               _index: '.kibana',
               _id: `${namespace ? `${namespace}:` : ''}index-pattern:stocks-*`,
-              _score: 1,
+              _score: 3,
               ...mockVersionProps,
               _source: {
                 namespace,
@@ -1970,7 +1970,7 @@ describe('SavedObjectsRepository', () => {
             {
               _index: '.kibana',
               _id: `${NAMESPACE_AGNOSTIC_TYPE}:something`,
-              _score: 1,
+              _score: 4,
               ...mockVersionProps,
               _source: {
                 type: NAMESPACE_AGNOSTIC_TYPE,
@@ -2131,6 +2131,7 @@ describe('SavedObjectsRepository', () => {
             type: doc._source.type,
             ...mockTimestampFields,
             version: mockVersion,
+            score: doc._score,
             attributes: doc._source[doc._source.type],
             references: [],
           });
@@ -2153,6 +2154,7 @@ describe('SavedObjectsRepository', () => {
             type: doc._source.type,
             ...mockTimestampFields,
             version: mockVersion,
+            score: doc._score,
             attributes: doc._source[doc._source.type],
             references: [],
           });
diff --git a/src/core/server/saved_objects/service/lib/repository.ts b/src/core/server/saved_objects/service/lib/repository.ts
index 03538f2394845..40c5282a77e49 100644
--- a/src/core/server/saved_objects/service/lib/repository.ts
+++ b/src/core/server/saved_objects/service/lib/repository.ts
@@ -41,6 +41,7 @@ import {
   SavedObjectsBulkUpdateResponse,
   SavedObjectsCreateOptions,
   SavedObjectsFindResponse,
+  SavedObjectsFindResult,
   SavedObjectsUpdateOptions,
   SavedObjectsUpdateResponse,
   SavedObjectsBulkUpdateObject,
@@ -674,8 +675,11 @@ export class SavedObjectsRepository {
       page,
       per_page: perPage,
       total: response.hits.total,
-      saved_objects: response.hits.hits.map((hit: SavedObjectsRawDoc) =>
-        this._rawToSavedObject(hit)
+      saved_objects: response.hits.hits.map(
+        (hit: SavedObjectsRawDoc): SavedObjectsFindResult => ({
+          ...this._rawToSavedObject(hit),
+          score: (hit as any)._score,
+        })
       ),
     };
   }
diff --git a/src/core/server/saved_objects/service/saved_objects_client.ts b/src/core/server/saved_objects/service/saved_objects_client.ts
index 8780f07cc3091..e15a92c92772f 100644
--- a/src/core/server/saved_objects/service/saved_objects_client.ts
+++ b/src/core/server/saved_objects/service/saved_objects_client.ts
@@ -79,6 +79,17 @@ export interface SavedObjectsBulkResponse<T = unknown> {
   saved_objects: Array<SavedObject<T>>;
 }
 
+/**
+ *
+ * @public
+ */
+export interface SavedObjectsFindResult<T = unknown> extends SavedObject<T> {
+  /**
+   * The Elasticsearch `_score` of this result.
+   */
+  score: number;
+}
+
 /**
  * Return type of the Saved Objects `find()` method.
  *
@@ -88,7 +99,7 @@ export interface SavedObjectsBulkResponse<T = unknown> {
  * @public
  */
 export interface SavedObjectsFindResponse<T = unknown> {
-  saved_objects: Array<SavedObject<T>>;
+  saved_objects: Array<SavedObjectsFindResult<T>>;
   total: number;
   per_page: number;
   page: number;
diff --git a/src/core/server/server.api.md b/src/core/server/server.api.md
index ecfa09fbd37f3..833c8918a0860 100644
--- a/src/core/server/server.api.md
+++ b/src/core/server/server.api.md
@@ -2039,11 +2039,16 @@ export interface SavedObjectsFindResponse<T = unknown> {
     // (undocumented)
     per_page: number;
     // (undocumented)
-    saved_objects: Array<SavedObject<T>>;
+    saved_objects: Array<SavedObjectsFindResult<T>>;
     // (undocumented)
     total: number;
 }
 
+// @public (undocumented)
+export interface SavedObjectsFindResult<T = unknown> extends SavedObject<T> {
+    score: number;
+}
+
 // @public
 export interface SavedObjectsImportConflictError {
     // (undocumented)
diff --git a/src/plugins/saved_objects_management/server/lib/find_all.test.ts b/src/plugins/saved_objects_management/server/lib/find_all.test.ts
index 2515d11f6d4bb..823a103d8bab3 100644
--- a/src/plugins/saved_objects_management/server/lib/find_all.test.ts
+++ b/src/plugins/saved_objects_management/server/lib/find_all.test.ts
@@ -18,17 +18,18 @@
  */
 
 import { times } from 'lodash';
-import { SavedObjectsFindOptions, SavedObject } from 'src/core/server';
+import { SavedObjectsFindOptions, SavedObjectsFindResult } from 'src/core/server';
 import { savedObjectsClientMock } from '../../../../core/server/mocks';
 import { findAll } from './find_all';
 
 describe('findAll', () => {
   let savedObjectsClient: ReturnType<typeof savedObjectsClientMock.create>;
 
-  const createObj = (id: number): SavedObject => ({
+  const createObj = (id: number): SavedObjectsFindResult => ({
     type: 'type',
     id: `id-${id}`,
     attributes: {},
+    score: 1,
     references: [],
   });
 
diff --git a/src/plugins/saved_objects_management/server/lib/find_relationships.test.ts b/src/plugins/saved_objects_management/server/lib/find_relationships.test.ts
index 2c8997c9af21a..e18a45d9bdf44 100644
--- a/src/plugins/saved_objects_management/server/lib/find_relationships.test.ts
+++ b/src/plugins/saved_objects_management/server/lib/find_relationships.test.ts
@@ -77,6 +77,7 @@ describe('findRelationships', () => {
           type: 'parent-type',
           id: 'parent-id',
           attributes: {},
+          score: 1,
           references: [],
         },
       ],
diff --git a/test/api_integration/apis/saved_objects/find.js b/test/api_integration/apis/saved_objects/find.js
index 7a57d182bc812..7cb5955e4a43d 100644
--- a/test/api_integration/apis/saved_objects/find.js
+++ b/test/api_integration/apis/saved_objects/find.js
@@ -46,6 +46,7 @@ export default function ({ getService }) {
                   attributes: {
                     title: 'Count of requests',
                   },
+                  score: 0,
                   migrationVersion: resp.body.saved_objects[0].migrationVersion,
                   references: [
                     {
@@ -134,6 +135,7 @@ export default function ({ getService }) {
                             .searchSourceJSON,
                       },
                     },
+                    score: 0,
                     references: [
                       {
                         name: 'kibanaSavedObjectMeta.searchSourceJSON.index',
diff --git a/test/api_integration/apis/saved_objects_management/find.ts b/test/api_integration/apis/saved_objects_management/find.ts
index e15a9e989d21f..4d9f1c1658139 100644
--- a/test/api_integration/apis/saved_objects_management/find.ts
+++ b/test/api_integration/apis/saved_objects_management/find.ts
@@ -56,6 +56,7 @@ export default function ({ getService }: FtrProviderContext) {
                       type: 'index-pattern',
                     },
                   ],
+                  score: 0,
                   updated_at: '2017-09-21T18:51:23.794Z',
                   meta: {
                     editUrl:
diff --git a/x-pack/plugins/actions/server/actions_client.test.ts b/x-pack/plugins/actions/server/actions_client.test.ts
index 2865bbbe1d944..69fab828e63de 100644
--- a/x-pack/plugins/actions/server/actions_client.test.ts
+++ b/x-pack/plugins/actions/server/actions_client.test.ts
@@ -386,6 +386,7 @@ describe('getAll()', () => {
               foo: 'bar',
             },
           },
+          score: 1,
           references: [],
         },
       ],
diff --git a/x-pack/plugins/alerts/server/alerts_client.test.ts b/x-pack/plugins/alerts/server/alerts_client.test.ts
index 9685f58b8fb31..f494f1358980d 100644
--- a/x-pack/plugins/alerts/server/alerts_client.test.ts
+++ b/x-pack/plugins/alerts/server/alerts_client.test.ts
@@ -1667,6 +1667,7 @@ describe('find()', () => {
               },
             ],
           },
+          score: 1,
           references: [
             {
               name: 'action_0',
diff --git a/x-pack/plugins/case/server/routes/api/utils.test.ts b/x-pack/plugins/case/server/routes/api/utils.test.ts
index 81156b98bab83..2da489e643435 100644
--- a/x-pack/plugins/case/server/routes/api/utils.test.ts
+++ b/x-pack/plugins/case/server/routes/api/utils.test.ts
@@ -222,7 +222,12 @@ describe('Utils', () => {
       ];
 
       const res = transformCases(
-        { saved_objects: mockCases, total: mockCases.length, per_page: 10, page: 1 },
+        {
+          saved_objects: mockCases.map((obj) => ({ ...obj, score: 1 })),
+          total: mockCases.length,
+          per_page: 10,
+          page: 1,
+        },
         2,
         2,
         extraCaseData,
@@ -232,7 +237,11 @@ describe('Utils', () => {
         page: 1,
         per_page: 10,
         total: mockCases.length,
-        cases: flattenCaseSavedObjects(mockCases, extraCaseData, '123'),
+        cases: flattenCaseSavedObjects(
+          mockCases.map((obj) => ({ ...obj, score: 1 })),
+          extraCaseData,
+          '123'
+        ),
         count_open_cases: 2,
         count_closed_cases: 2,
       });
@@ -500,7 +509,7 @@ describe('Utils', () => {
   describe('transformComments', () => {
     it('transforms correctly', () => {
       const comments = {
-        saved_objects: mockCaseComments,
+        saved_objects: mockCaseComments.map((obj) => ({ ...obj, score: 1 })),
         total: mockCaseComments.length,
         per_page: 10,
         page: 1,
diff --git a/x-pack/plugins/case/server/routes/api/utils.ts b/x-pack/plugins/case/server/routes/api/utils.ts
index b7f3c68d1662f..ec2881807442f 100644
--- a/x-pack/plugins/case/server/routes/api/utils.ts
+++ b/x-pack/plugins/case/server/routes/api/utils.ts
@@ -101,7 +101,7 @@ export const transformCases = (
 });
 
 export const flattenCaseSavedObjects = (
-  savedObjects: SavedObjectsFindResponse<CaseAttributes>['saved_objects'],
+  savedObjects: Array<SavedObject<CaseAttributes>>,
   totalCommentByCase: TotalCommentByCase[],
   caseConfigureConnectorId: string = 'none'
 ): CaseResponse[] =>
@@ -146,7 +146,7 @@ export const transformComments = (
 });
 
 export const flattenCommentSavedObjects = (
-  savedObjects: SavedObjectsFindResponse<CommentAttributes>['saved_objects']
+  savedObjects: Array<SavedObject<CommentAttributes>>
 ): CommentResponse[] =>
   savedObjects.reduce((acc: CommentResponse[], savedObject: SavedObject<CommentAttributes>) => {
     return [...acc, flattenCommentSavedObject(savedObject)];
diff --git a/x-pack/plugins/encrypted_saved_objects/server/saved_objects/encrypted_saved_objects_client_wrapper.test.ts b/x-pack/plugins/encrypted_saved_objects/server/saved_objects/encrypted_saved_objects_client_wrapper.test.ts
index 7098f611defa0..ec5d81532e238 100644
--- a/x-pack/plugins/encrypted_saved_objects/server/saved_objects/encrypted_saved_objects_client_wrapper.test.ts
+++ b/x-pack/plugins/encrypted_saved_objects/server/saved_objects/encrypted_saved_objects_client_wrapper.test.ts
@@ -676,12 +676,14 @@ describe('#find', () => {
           id: 'some-id',
           type: 'unknown-type',
           attributes: { attrOne: 'one', attrSecret: 'secret', attrThree: 'three' },
+          score: 1,
           references: [],
         },
         {
           id: 'some-id-2',
           type: 'unknown-type',
           attributes: { attrOne: 'one', attrSecret: 'secret', attrThree: 'three' },
+          score: 1,
           references: [],
         },
       ],
@@ -722,6 +724,7 @@ describe('#find', () => {
             attrNotSoSecret: 'not-so-secret',
             attrThree: 'three',
           },
+          score: 1,
           references: [],
         },
         {
@@ -733,6 +736,7 @@ describe('#find', () => {
             attrNotSoSecret: '*not-so-secret*',
             attrThree: 'three',
           },
+          score: 1,
           references: [],
         },
       ],
@@ -793,6 +797,7 @@ describe('#find', () => {
             attrNotSoSecret: 'not-so-secret',
             attrThree: 'three',
           },
+          score: 1,
           references: [],
         },
         {
@@ -804,6 +809,7 @@ describe('#find', () => {
             attrNotSoSecret: '*not-so-secret*',
             attrThree: 'three',
           },
+          score: 1,
           references: [],
         },
       ],
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/__mocks__/request_responses.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/__mocks__/request_responses.ts
index fe66496f70dcd..9928ce4807da9 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/__mocks__/request_responses.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/__mocks__/request_responses.ts
@@ -549,6 +549,7 @@ export const getFindResultStatus = (): SavedObjectsFindResponse<
         searchAfterTimeDurations: ['200.00'],
         bulkCreateTimeDurations: ['800.43'],
       },
+      score: 1,
       references: [],
       updated_at: '2020-02-18T15:26:51.333Z',
       version: 'WzQ2LDFd',
@@ -570,6 +571,7 @@ export const getFindResultStatus = (): SavedObjectsFindResponse<
         searchAfterTimeDurations: ['200.00'],
         bulkCreateTimeDurations: ['800.43'],
       },
+      score: 1,
       references: [],
       updated_at: '2020-02-18T15:15:58.860Z',
       version: 'WzMyLDFd',
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/__mocks__/es_results.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/__mocks__/es_results.ts
index 6056e692854af..01ee41e3b877c 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/__mocks__/es_results.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/__mocks__/es_results.ts
@@ -391,7 +391,7 @@ export const exampleFindRuleStatusResponse: (
   total: 1,
   per_page: 6,
   page: 1,
-  saved_objects: mockStatuses,
+  saved_objects: mockStatuses.map((obj) => ({ ...obj, score: 1 })),
 });
 
 export const mockLogger: Logger = loggingServiceMock.createLogger();
diff --git a/x-pack/plugins/spaces/server/saved_objects/spaces_saved_objects_client.test.ts b/x-pack/plugins/spaces/server/saved_objects/spaces_saved_objects_client.test.ts
index 75cd501a1a9ae..190429d2dacd4 100644
--- a/x-pack/plugins/spaces/server/saved_objects/spaces_saved_objects_client.test.ts
+++ b/x-pack/plugins/spaces/server/saved_objects/spaces_saved_objects_client.test.ts
@@ -138,7 +138,7 @@ const ERROR_NAMESPACE_SPECIFIED = 'Spaces currently determines the namespaces';
       test(`passes options.type to baseClient if valid singular type specified`, async () => {
         const { client, baseClient } = await createSpacesSavedObjectsClient();
         const expectedReturnValue = {
-          saved_objects: [createMockResponse()],
+          saved_objects: [createMockResponse()].map((obj) => ({ ...obj, score: 1 })),
           total: 1,
           per_page: 0,
           page: 0,
@@ -158,7 +158,7 @@ const ERROR_NAMESPACE_SPECIFIED = 'Spaces currently determines the namespaces';
       test(`supplements options with the current namespace`, async () => {
         const { client, baseClient } = await createSpacesSavedObjectsClient();
         const expectedReturnValue = {
-          saved_objects: [createMockResponse()],
+          saved_objects: [createMockResponse()].map((obj) => ({ ...obj, score: 1 })),
           total: 1,
           per_page: 0,
           page: 0,

From c8c20e4ca8e768bcce2e471a2f80aef03d4a2a62 Mon Sep 17 00:00:00 2001
From: Mikhail Shustov <restrry@gmail.com>
Date: Thu, 18 Jun 2020 13:02:56 +0300
Subject: [PATCH 16/63] Add functional test for Kibana embedded in iframe
 (#68544)

* convert kbn test config into TS

* add test  for Kibana embedded in iframe

* run embedded tests in functional suite

* ignore tls errors in functional tests by default

* switch test to https

* remove env vars mutation

* allow to pass ssl config to Kibana

* pass ssl config to axios

* adopt KbnClient interfaces

* adopt KibanaServer

* use KbnRequester in security service

* set sameSiteCookies:None in test

* acceptInsecureCerts in chrome

* remove leftovers

* fix type error

* remove unnecessary field

* address comments

* refactor plugin

* refactor test

* make acceptInsecureCerts configurable

* run firefox tests on ci

* up TS version

* fix firefox.sh script

* fix path

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../src/kbn_client/kbn_client.ts              |  8 +--
 .../src/kbn_client/kbn_client_requester.ts    | 38 ++++++++---
 .../kbn_client/kbn_client_saved_objects.ts    | 16 +++--
 .../src/kbn_client/kbn_client_status.ts       |  3 +-
 .../src/kbn_client/kbn_client_ui_settings.ts  |  7 +-
 .../lib/config/schema.ts                      |  9 +++
 .../kbn-test/src/kbn/{index.js => index.ts}   |  0
 ...{kbn_test_config.js => kbn_test_config.ts} | 24 ++++---
 .../kbn-test/src/kbn/{users.js => users.ts}   |  0
 src/es_archiver/es_archiver.ts                |  2 +-
 .../services/kibana_server/kibana_server.ts   |  4 +-
 test/common/services/security/role.ts         | 28 ++++----
 .../common/services/security/role_mappings.ts | 32 +++------
 test/common/services/security/security.ts     | 12 ++--
 test/common/services/security/user.ts         | 34 ++++------
 test/functional/services/common/browser.ts    |  5 ++
 test/functional/services/remote/remote.ts     | 14 ++--
 test/functional/services/remote/webdriver.ts  | 18 +++--
 test/scripts/jenkins_xpack_firefox_smoke.sh   |  3 +-
 x-pack/scripts/functional_tests.js            |  1 +
 .../functional_embedded/config.firefox.ts     | 27 ++++++++
 x-pack/test/functional_embedded/config.ts     | 67 +++++++++++++++++++
 .../ftr_provider_context.d.ts                 | 12 ++++
 .../plugins/iframe_embedded/kibana.json       |  7 ++
 .../plugins/iframe_embedded/package.json      | 14 ++++
 .../plugins/iframe_embedded/server/index.ts   | 11 +++
 .../plugins/iframe_embedded/server/plugin.ts  | 45 +++++++++++++
 x-pack/test/functional_embedded/services.ts   |  9 +++
 .../tests/iframe_embedded.ts                  | 42 ++++++++++++
 .../test/functional_embedded/tests/index.ts   | 14 ++++
 30 files changed, 393 insertions(+), 113 deletions(-)
 rename packages/kbn-test/src/kbn/{index.js => index.ts} (100%)
 rename packages/kbn-test/src/kbn/{kbn_test_config.js => kbn_test_config.ts} (76%)
 rename packages/kbn-test/src/kbn/{users.js => users.ts} (100%)
 create mode 100644 x-pack/test/functional_embedded/config.firefox.ts
 create mode 100644 x-pack/test/functional_embedded/config.ts
 create mode 100644 x-pack/test/functional_embedded/ftr_provider_context.d.ts
 create mode 100644 x-pack/test/functional_embedded/plugins/iframe_embedded/kibana.json
 create mode 100644 x-pack/test/functional_embedded/plugins/iframe_embedded/package.json
 create mode 100644 x-pack/test/functional_embedded/plugins/iframe_embedded/server/index.ts
 create mode 100644 x-pack/test/functional_embedded/plugins/iframe_embedded/server/plugin.ts
 create mode 100644 x-pack/test/functional_embedded/services.ts
 create mode 100644 x-pack/test/functional_embedded/tests/iframe_embedded.ts
 create mode 100644 x-pack/test/functional_embedded/tests/index.ts

diff --git a/packages/kbn-dev-utils/src/kbn_client/kbn_client.ts b/packages/kbn-dev-utils/src/kbn_client/kbn_client.ts
index 2eb6c6cc5aac6..861ea0988692c 100644
--- a/packages/kbn-dev-utils/src/kbn_client/kbn_client.ts
+++ b/packages/kbn-dev-utils/src/kbn_client/kbn_client.ts
@@ -18,7 +18,7 @@
  */
 
 import { ToolingLog } from '../tooling_log';
-import { KbnClientRequester, ReqOptions } from './kbn_client_requester';
+import { KibanaConfig, KbnClientRequester, ReqOptions } from './kbn_client_requester';
 import { KbnClientStatus } from './kbn_client_status';
 import { KbnClientPlugins } from './kbn_client_plugins';
 import { KbnClientVersion } from './kbn_client_version';
@@ -26,7 +26,7 @@ import { KbnClientSavedObjects } from './kbn_client_saved_objects';
 import { KbnClientUiSettings, UiSettingValues } from './kbn_client_ui_settings';
 
 export class KbnClient {
-  private readonly requester = new KbnClientRequester(this.log, this.kibanaUrls);
+  private readonly requester = new KbnClientRequester(this.log, this.kibanaConfig);
   readonly status = new KbnClientStatus(this.requester);
   readonly plugins = new KbnClientPlugins(this.status);
   readonly version = new KbnClientVersion(this.status);
@@ -43,10 +43,10 @@ export class KbnClient {
    */
   constructor(
     private readonly log: ToolingLog,
-    private readonly kibanaUrls: string[],
+    private readonly kibanaConfig: KibanaConfig,
     private readonly uiSettingDefaults?: UiSettingValues
   ) {
-    if (!kibanaUrls.length) {
+    if (!kibanaConfig.url) {
       throw new Error('missing Kibana urls');
     }
   }
diff --git a/packages/kbn-dev-utils/src/kbn_client/kbn_client_requester.ts b/packages/kbn-dev-utils/src/kbn_client/kbn_client_requester.ts
index ea4159de55749..2aba2be56f277 100644
--- a/packages/kbn-dev-utils/src/kbn_client/kbn_client_requester.ts
+++ b/packages/kbn-dev-utils/src/kbn_client/kbn_client_requester.ts
@@ -16,10 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
 import Url from 'url';
-
-import Axios from 'axios';
+import Https from 'https';
+import Axios, { AxiosResponse } from 'axios';
 
 import { isAxiosRequestError, isAxiosResponseError } from '../axios';
 import { ToolingLog } from '../tooling_log';
@@ -70,20 +69,38 @@ const delay = (ms: number) =>
     setTimeout(resolve, ms);
   });
 
+export interface KibanaConfig {
+  url: string;
+  ssl?: {
+    enabled: boolean;
+    key: string;
+    certificate: string;
+    certificateAuthorities: string;
+  };
+}
+
 export class KbnClientRequester {
-  constructor(private readonly log: ToolingLog, private readonly kibanaUrls: string[]) {}
+  private readonly httpsAgent: Https.Agent | null;
+  constructor(private readonly log: ToolingLog, private readonly kibanaConfig: KibanaConfig) {
+    this.httpsAgent =
+      kibanaConfig.ssl && kibanaConfig.ssl.enabled
+        ? new Https.Agent({
+            cert: kibanaConfig.ssl.certificate,
+            key: kibanaConfig.ssl.key,
+            ca: kibanaConfig.ssl.certificateAuthorities,
+          })
+        : null;
+  }
 
   private pickUrl() {
-    const url = this.kibanaUrls.shift()!;
-    this.kibanaUrls.push(url);
-    return url;
+    return this.kibanaConfig.url;
   }
 
   public resolveUrl(relativeUrl: string = '/') {
     return Url.resolve(this.pickUrl(), relativeUrl);
   }
 
-  async request<T>(options: ReqOptions): Promise<T> {
+  async request<T>(options: ReqOptions): Promise<AxiosResponse<T>> {
     const url = Url.resolve(this.pickUrl(), options.path);
     const description = options.description || `${options.method} ${url}`;
     let attempt = 0;
@@ -93,7 +110,7 @@ export class KbnClientRequester {
       attempt += 1;
 
       try {
-        const response = await Axios.request<T>({
+        const response = await Axios.request({
           method: options.method,
           url,
           data: options.body,
@@ -101,9 +118,10 @@ export class KbnClientRequester {
           headers: {
             'kbn-xsrf': 'kbn-client',
           },
+          httpsAgent: this.httpsAgent,
         });
 
-        return response.data;
+        return response;
       } catch (error) {
         const conflictOnGet = isConcliftOnGetError(error);
         const requestedRetries = options.retries !== undefined;
diff --git a/packages/kbn-dev-utils/src/kbn_client/kbn_client_saved_objects.ts b/packages/kbn-dev-utils/src/kbn_client/kbn_client_saved_objects.ts
index e671061b34352..7334c6353debf 100644
--- a/packages/kbn-dev-utils/src/kbn_client/kbn_client_saved_objects.ts
+++ b/packages/kbn-dev-utils/src/kbn_client/kbn_client_saved_objects.ts
@@ -71,12 +71,13 @@ export class KbnClientSavedObjects {
   public async migrate() {
     this.log.debug('Migrating saved objects');
 
-    return await this.requester.request<MigrateResponse>({
+    const { data } = await this.requester.request<MigrateResponse>({
       description: 'migrate saved objects',
       path: uriencode`/internal/saved_objects/_migrate`,
       method: 'POST',
       body: {},
     });
+    return data;
   }
 
   /**
@@ -85,11 +86,12 @@ export class KbnClientSavedObjects {
   public async get<Attributes extends Record<string, any>>(options: GetOptions) {
     this.log.debug('Gettings saved object: %j', options);
 
-    return await this.requester.request<SavedObjectResponse<Attributes>>({
+    const { data } = await this.requester.request<SavedObjectResponse<Attributes>>({
       description: 'get saved object',
       path: uriencode`/api/saved_objects/${options.type}/${options.id}`,
       method: 'GET',
     });
+    return data;
   }
 
   /**
@@ -98,7 +100,7 @@ export class KbnClientSavedObjects {
   public async create<Attributes extends Record<string, any>>(options: IndexOptions<Attributes>) {
     this.log.debug('Creating saved object: %j', options);
 
-    return await this.requester.request<SavedObjectResponse<Attributes>>({
+    const { data } = await this.requester.request<SavedObjectResponse<Attributes>>({
       description: 'update saved object',
       path: options.id
         ? uriencode`/api/saved_objects/${options.type}/${options.id}`
@@ -113,6 +115,7 @@ export class KbnClientSavedObjects {
         references: options.references,
       },
     });
+    return data;
   }
 
   /**
@@ -121,7 +124,7 @@ export class KbnClientSavedObjects {
   public async update<Attributes extends Record<string, any>>(options: UpdateOptions<Attributes>) {
     this.log.debug('Updating saved object: %j', options);
 
-    return await this.requester.request<SavedObjectResponse<Attributes>>({
+    const { data } = await this.requester.request<SavedObjectResponse<Attributes>>({
       description: 'update saved object',
       path: uriencode`/api/saved_objects/${options.type}/${options.id}`,
       query: {
@@ -134,6 +137,7 @@ export class KbnClientSavedObjects {
         references: options.references,
       },
     });
+    return data;
   }
 
   /**
@@ -142,10 +146,12 @@ export class KbnClientSavedObjects {
   public async delete(options: GetOptions) {
     this.log.debug('Deleting saved object %s/%s', options);
 
-    return await this.requester.request({
+    const { data } = await this.requester.request({
       description: 'delete saved object',
       path: uriencode`/api/saved_objects/${options.type}/${options.id}`,
       method: 'DELETE',
     });
+
+    return data;
   }
 }
diff --git a/packages/kbn-dev-utils/src/kbn_client/kbn_client_status.ts b/packages/kbn-dev-utils/src/kbn_client/kbn_client_status.ts
index 22baf4a330416..4f203e73620f3 100644
--- a/packages/kbn-dev-utils/src/kbn_client/kbn_client_status.ts
+++ b/packages/kbn-dev-utils/src/kbn_client/kbn_client_status.ts
@@ -52,10 +52,11 @@ export class KbnClientStatus {
    * Get the full server status
    */
   async get() {
-    return await this.requester.request<ApiResponseStatus>({
+    const { data } = await this.requester.request<ApiResponseStatus>({
       method: 'GET',
       path: 'api/status',
     });
+    return data;
   }
 
   /**
diff --git a/packages/kbn-dev-utils/src/kbn_client/kbn_client_ui_settings.ts b/packages/kbn-dev-utils/src/kbn_client/kbn_client_ui_settings.ts
index dbfa87e70032b..6ee2d3bfe59b0 100644
--- a/packages/kbn-dev-utils/src/kbn_client/kbn_client_ui_settings.ts
+++ b/packages/kbn-dev-utils/src/kbn_client/kbn_client_ui_settings.ts
@@ -57,10 +57,11 @@ export class KbnClientUiSettings {
    * Unset a uiSetting
    */
   async unset(setting: string) {
-    return await this.requester.request<any>({
+    const { data } = await this.requester.request<any>({
       path: uriencode`/api/kibana/settings/${setting}`,
       method: 'DELETE',
     });
+    return data;
   }
 
   /**
@@ -105,11 +106,11 @@ export class KbnClientUiSettings {
   }
 
   private async getAll() {
-    const resp = await this.requester.request<UiSettingsApiResponse>({
+    const { data } = await this.requester.request<UiSettingsApiResponse>({
       path: '/api/kibana/settings',
       method: 'GET',
     });
 
-    return resp.settings;
+    return data.settings;
   }
 }
diff --git a/packages/kbn-test/src/functional_test_runner/lib/config/schema.ts b/packages/kbn-test/src/functional_test_runner/lib/config/schema.ts
index 29ec28175a851..e9aeee87f1a3b 100644
--- a/packages/kbn-test/src/functional_test_runner/lib/config/schema.ts
+++ b/packages/kbn-test/src/functional_test_runner/lib/config/schema.ts
@@ -38,6 +38,14 @@ const urlPartsSchema = () =>
       password: Joi.string(),
       pathname: Joi.string().regex(/^\//, 'start with a /'),
       hash: Joi.string().regex(/^\//, 'start with a /'),
+      ssl: Joi.object()
+        .keys({
+          enabled: Joi.boolean().default(false),
+          certificate: Joi.string().optional(),
+          certificateAuthorities: Joi.string().optional(),
+          key: Joi.string().optional(),
+        })
+        .default(),
     })
     .default();
 
@@ -122,6 +130,7 @@ export const schema = Joi.object()
         type: Joi.string().valid('chrome', 'firefox', 'ie', 'msedge').default('chrome'),
 
         logPollingMs: Joi.number().default(100),
+        acceptInsecureCerts: Joi.boolean().default(false),
       })
       .default(),
 
diff --git a/packages/kbn-test/src/kbn/index.js b/packages/kbn-test/src/kbn/index.ts
similarity index 100%
rename from packages/kbn-test/src/kbn/index.js
rename to packages/kbn-test/src/kbn/index.ts
diff --git a/packages/kbn-test/src/kbn/kbn_test_config.js b/packages/kbn-test/src/kbn/kbn_test_config.ts
similarity index 76%
rename from packages/kbn-test/src/kbn/kbn_test_config.js
rename to packages/kbn-test/src/kbn/kbn_test_config.ts
index c43efabb4b747..909c94098cf5d 100644
--- a/packages/kbn-test/src/kbn/kbn_test_config.js
+++ b/packages/kbn-test/src/kbn/kbn_test_config.ts
@@ -16,26 +16,34 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { kibanaTestUser } from './users';
 import url from 'url';
+import { kibanaTestUser } from './users';
+
+interface UrlParts {
+  protocol?: string;
+  hostname?: string;
+  port?: number;
+  auth?: string;
+  username?: string;
+  password?: string;
+}
 
 export const kbnTestConfig = new (class KbnTestConfig {
   getPort() {
     return this.getUrlParts().port;
   }
 
-  getUrlParts() {
+  getUrlParts(): UrlParts {
     // allow setting one complete TEST_KIBANA_URL for ES like https://elastic:changeme@example.com:9200
     if (process.env.TEST_KIBANA_URL) {
       const testKibanaUrl = url.parse(process.env.TEST_KIBANA_URL);
       return {
-        protocol: testKibanaUrl.protocol.slice(0, -1),
+        protocol: testKibanaUrl.protocol?.slice(0, -1),
         hostname: testKibanaUrl.hostname,
-        port: parseInt(testKibanaUrl.port, 10),
+        port: testKibanaUrl.port ? parseInt(testKibanaUrl.port, 10) : undefined,
         auth: testKibanaUrl.auth,
-        username: testKibanaUrl.auth.split(':')[0],
-        password: testKibanaUrl.auth.split(':')[1],
+        username: testKibanaUrl.auth?.split(':')[0],
+        password: testKibanaUrl.auth?.split(':')[1],
       };
     }
 
@@ -44,7 +52,7 @@ export const kbnTestConfig = new (class KbnTestConfig {
     return {
       protocol: process.env.TEST_KIBANA_PROTOCOL || 'http',
       hostname: process.env.TEST_KIBANA_HOSTNAME || 'localhost',
-      port: parseInt(process.env.TEST_KIBANA_PORT, 10) || 5620,
+      port: process.env.TEST_KIBANA_PORT ? parseInt(process.env.TEST_KIBANA_PORT, 10) : 5620,
       auth: `${username}:${password}`,
       username,
       password,
diff --git a/packages/kbn-test/src/kbn/users.js b/packages/kbn-test/src/kbn/users.ts
similarity index 100%
rename from packages/kbn-test/src/kbn/users.js
rename to packages/kbn-test/src/kbn/users.ts
diff --git a/src/es_archiver/es_archiver.ts b/src/es_archiver/es_archiver.ts
index f36cbb3f516b9..e335652195b86 100644
--- a/src/es_archiver/es_archiver.ts
+++ b/src/es_archiver/es_archiver.ts
@@ -49,7 +49,7 @@ export class EsArchiver {
     this.client = client;
     this.dataDir = dataDir;
     this.log = log;
-    this.kbnClient = new KbnClient(log, [kibanaUrl]);
+    this.kbnClient = new KbnClient(log, { url: kibanaUrl });
   }
 
   /**
diff --git a/test/common/services/kibana_server/kibana_server.ts b/test/common/services/kibana_server/kibana_server.ts
index 16039d6fee833..4a251cca044d3 100644
--- a/test/common/services/kibana_server/kibana_server.ts
+++ b/test/common/services/kibana_server/kibana_server.ts
@@ -27,9 +27,9 @@ export function KibanaServerProvider({ getService }: FtrProviderContext) {
   const config = getService('config');
   const lifecycle = getService('lifecycle');
   const url = Url.format(config.get('servers.kibana'));
+  const ssl = config.get('servers.kibana').ssl;
   const defaults = config.get('uiSettings.defaults');
-
-  const kbn = new KbnClient(log, [url], defaults);
+  const kbn = new KbnClient(log, { url, ssl }, defaults);
 
   if (defaults) {
     lifecycle.beforeTests.add(async () => {
diff --git a/test/common/services/security/role.ts b/test/common/services/security/role.ts
index dfc6ff9b164e5..caa5549a70f0c 100644
--- a/test/common/services/security/role.ts
+++ b/test/common/services/security/role.ts
@@ -17,27 +17,20 @@
  * under the License.
  */
 
-import axios, { AxiosInstance } from 'axios';
 import util from 'util';
-import { ToolingLog } from '@kbn/dev-utils';
+import { KbnClient, ToolingLog } from '@kbn/dev-utils';
 
 export class Role {
-  private log: ToolingLog;
-  private axios: AxiosInstance;
-
-  constructor(url: string, log: ToolingLog) {
-    this.log = log;
-    this.axios = axios.create({
-      headers: { 'kbn-xsrf': 'x-pack/ftr/services/security/role' },
-      baseURL: url,
-      maxRedirects: 0,
-      validateStatus: () => true, // we do our own validation below and throw better error messages
-    });
-  }
+  constructor(private log: ToolingLog, private kibanaServer: KbnClient) {}
 
   public async create(name: string, role: any) {
     this.log.debug(`creating role ${name}`);
-    const { data, status, statusText } = await this.axios.put(`/api/security/role/${name}`, role);
+    const { data, status, statusText } = await this.kibanaServer.request({
+      path: `/api/security/role/${name}`,
+      method: 'PUT',
+      body: role,
+      retries: 0,
+    });
     if (status !== 204) {
       throw new Error(
         `Expected status code of 204, received ${status} ${statusText}: ${util.inspect(data)}`
@@ -47,7 +40,10 @@ export class Role {
 
   public async delete(name: string) {
     this.log.debug(`deleting role ${name}`);
-    const { data, status, statusText } = await this.axios.delete(`/api/security/role/${name}`);
+    const { data, status, statusText } = await this.kibanaServer.request({
+      path: `/api/security/role/${name}`,
+      method: 'DELETE',
+    });
     if (status !== 204 && status !== 404) {
       throw new Error(
         `Expected status code of 204 or 404, received ${status} ${statusText}: ${util.inspect(
diff --git a/test/common/services/security/role_mappings.ts b/test/common/services/security/role_mappings.ts
index cc2fa23825498..7951d4b5b47b2 100644
--- a/test/common/services/security/role_mappings.ts
+++ b/test/common/services/security/role_mappings.ts
@@ -17,30 +17,19 @@
  * under the License.
  */
 
-import axios, { AxiosInstance } from 'axios';
 import util from 'util';
-import { ToolingLog } from '@kbn/dev-utils';
+import { KbnClient, ToolingLog } from '@kbn/dev-utils';
 
 export class RoleMappings {
-  private log: ToolingLog;
-  private axios: AxiosInstance;
-
-  constructor(url: string, log: ToolingLog) {
-    this.log = log;
-    this.axios = axios.create({
-      headers: { 'kbn-xsrf': 'x-pack/ftr/services/security/role_mappings' },
-      baseURL: url,
-      maxRedirects: 0,
-      validateStatus: () => true, // we do our own validation below and throw better error messages
-    });
-  }
+  constructor(private log: ToolingLog, private kbnClient: KbnClient) {}
 
   public async create(name: string, roleMapping: Record<string, any>) {
     this.log.debug(`creating role mapping ${name}`);
-    const { data, status, statusText } = await this.axios.post(
-      `/internal/security/role_mapping/${name}`,
-      roleMapping
-    );
+    const { data, status, statusText } = await this.kbnClient.request({
+      path: `/internal/security/role_mapping/${name}`,
+      method: 'POST',
+      body: roleMapping,
+    });
     if (status !== 200) {
       throw new Error(
         `Expected status code of 200, received ${status} ${statusText}: ${util.inspect(data)}`
@@ -51,9 +40,10 @@ export class RoleMappings {
 
   public async delete(name: string) {
     this.log.debug(`deleting role mapping ${name}`);
-    const { data, status, statusText } = await this.axios.delete(
-      `/internal/security/role_mapping/${name}`
-    );
+    const { data, status, statusText } = await this.kbnClient.request({
+      path: `/internal/security/role_mapping/${name}`,
+      method: 'DELETE',
+    });
     if (status !== 200 && status !== 404) {
       throw new Error(
         `Expected status code of 200 or 404, received ${status} ${statusText}: ${util.inspect(
diff --git a/test/common/services/security/security.ts b/test/common/services/security/security.ts
index 6ad0933a2a5a2..fae4c9198cab6 100644
--- a/test/common/services/security/security.ts
+++ b/test/common/services/security/security.ts
@@ -17,8 +17,6 @@
  * under the License.
  */
 
-import { format as formatUrl } from 'url';
-
 import { Role } from './role';
 import { User } from './user';
 import { RoleMappings } from './role_mappings';
@@ -28,14 +26,14 @@ import { createTestUserService } from './test_user';
 export async function SecurityServiceProvider(context: FtrProviderContext) {
   const { getService } = context;
   const log = getService('log');
-  const config = getService('config');
-  const url = formatUrl(config.get('servers.kibana'));
-  const role = new Role(url, log);
-  const user = new User(url, log);
+  const kibanaServer = getService('kibanaServer');
+
+  const role = new Role(log, kibanaServer);
+  const user = new User(log, kibanaServer);
   const testUser = await createTestUserService(role, user, context);
 
   return new (class SecurityService {
-    roleMappings = new RoleMappings(url, log);
+    roleMappings = new RoleMappings(log, kibanaServer);
     testUser = testUser;
     role = role;
     user = user;
diff --git a/test/common/services/security/user.ts b/test/common/services/security/user.ts
index ae02127043234..58c4d0f1cf34e 100644
--- a/test/common/services/security/user.ts
+++ b/test/common/services/security/user.ts
@@ -17,33 +17,22 @@
  * under the License.
  */
 
-import axios, { AxiosInstance } from 'axios';
 import util from 'util';
-import { ToolingLog } from '@kbn/dev-utils';
+import { KbnClient, ToolingLog } from '@kbn/dev-utils';
 
 export class User {
-  private log: ToolingLog;
-  private axios: AxiosInstance;
-
-  constructor(url: string, log: ToolingLog) {
-    this.log = log;
-    this.axios = axios.create({
-      headers: { 'kbn-xsrf': 'x-pack/ftr/services/security/user' },
-      baseURL: url,
-      maxRedirects: 0,
-      validateStatus: () => true, // we do our own validation below and throw better error messages
-    });
-  }
+  constructor(private log: ToolingLog, private kbnClient: KbnClient) {}
 
   public async create(username: string, user: any) {
     this.log.debug(`creating user ${username}`);
-    const { data, status, statusText } = await this.axios.post(
-      `/internal/security/users/${username}`,
-      {
+    const { data, status, statusText } = await this.kbnClient.request({
+      path: `/internal/security/users/${username}`,
+      method: 'POST',
+      body: {
         username,
         ...user,
-      }
-    );
+      },
+    });
     if (status !== 200) {
       throw new Error(
         `Expected status code of 200, received ${status} ${statusText}: ${util.inspect(data)}`
@@ -54,9 +43,10 @@ export class User {
 
   public async delete(username: string) {
     this.log.debug(`deleting user ${username}`);
-    const { data, status, statusText } = await this.axios.delete(
-      `/internal/security/users/${username}`
-    );
+    const { data, status, statusText } = await await this.kbnClient.request({
+      path: `/internal/security/users/${username}`,
+      method: 'DELETE',
+    });
     if (status !== 204) {
       throw new Error(
         `Expected status code of 204, received ${status} ${statusText}: ${util.inspect(data)}`
diff --git a/test/functional/services/common/browser.ts b/test/functional/services/common/browser.ts
index 3297f6e094f7c..d6a4fc91481de 100644
--- a/test/functional/services/common/browser.ts
+++ b/test/functional/services/common/browser.ts
@@ -529,5 +529,10 @@ export async function BrowserProvider({ getService }: FtrProviderContext) {
       await driver.executeScript('document.body.scrollLeft = ' + scrollSize);
       return this.getScrollLeft();
     }
+
+    public async switchToFrame(idOrElement: number | WebElementWrapper) {
+      const _id = idOrElement instanceof WebElementWrapper ? idOrElement._webElement : idOrElement;
+      await driver.switchTo().frame(_id);
+    }
   })();
 }
diff --git a/test/functional/services/remote/remote.ts b/test/functional/services/remote/remote.ts
index 5a3a775cae0c5..99643929c4682 100644
--- a/test/functional/services/remote/remote.ts
+++ b/test/functional/services/remote/remote.ts
@@ -23,7 +23,7 @@ import { resolve } from 'path';
 import { mergeMap } from 'rxjs/operators';
 
 import { FtrProviderContext } from '../../ftr_provider_context';
-import { initWebDriver } from './webdriver';
+import { initWebDriver, BrowserConfig } from './webdriver';
 import { Browsers } from './browsers';
 
 export async function RemoteProvider({ getService }: FtrProviderContext) {
@@ -58,12 +58,12 @@ export async function RemoteProvider({ getService }: FtrProviderContext) {
     Fs.writeFileSync(path, JSON.stringify(JSON.parse(coverageJson), null, 2));
   };
 
-  const { driver, consoleLog$ } = await initWebDriver(
-    log,
-    browserType,
-    lifecycle,
-    config.get('browser.logPollingMs')
-  );
+  const browserConfig: BrowserConfig = {
+    logPollingMs: config.get('browser.logPollingMs'),
+    acceptInsecureCerts: config.get('browser.acceptInsecureCerts'),
+  };
+
+  const { driver, consoleLog$ } = await initWebDriver(log, browserType, lifecycle, browserConfig);
   const isW3CEnabled = (driver as any).executor_.w3c;
 
   const caps = await driver.getCapabilities();
diff --git a/test/functional/services/remote/webdriver.ts b/test/functional/services/remote/webdriver.ts
index 9fbbf28bbf42c..27814060e70c1 100644
--- a/test/functional/services/remote/webdriver.ts
+++ b/test/functional/services/remote/webdriver.ts
@@ -73,13 +73,18 @@ Executor.prototype.execute = preventParallelCalls(
   (command: { getName: () => string }) => NO_QUEUE_COMMANDS.includes(command.getName())
 );
 
+export interface BrowserConfig {
+  logPollingMs: number;
+  acceptInsecureCerts: boolean;
+}
+
 let attemptCounter = 0;
 let edgePaths: { driverPath: string | undefined; browserPath: string | undefined };
 async function attemptToCreateCommand(
   log: ToolingLog,
   browserType: Browsers,
   lifecycle: Lifecycle,
-  logPollingMs: number
+  config: BrowserConfig
 ) {
   const attemptId = ++attemptCounter;
   log.debug('[webdriver] Creating session');
@@ -114,6 +119,7 @@ async function attemptToCreateCommand(
         if (certValidation === '0') {
           chromeOptions.push('ignore-certificate-errors');
         }
+
         if (remoteDebug === '1') {
           // Visit chrome://inspect in chrome to remotely view/debug
           chromeOptions.push('headless', 'disable-gpu', 'remote-debugging-port=9222');
@@ -125,6 +131,7 @@ async function attemptToCreateCommand(
         });
         chromeCapabilities.set('unexpectedAlertBehaviour', 'accept');
         chromeCapabilities.set('goog:loggingPrefs', { browser: 'ALL' });
+        chromeCapabilities.setAcceptInsecureCerts(config.acceptInsecureCerts);
 
         const session = await new Builder()
           .forBrowser(browserType)
@@ -137,7 +144,7 @@ async function attemptToCreateCommand(
           consoleLog$: pollForLogEntry$(
             session,
             logging.Type.BROWSER,
-            logPollingMs,
+            config.logPollingMs,
             lifecycle.cleanup.after$
           ).pipe(
             takeUntil(lifecycle.cleanup.after$),
@@ -174,7 +181,7 @@ async function attemptToCreateCommand(
             consoleLog$: pollForLogEntry$(
               session,
               logging.Type.BROWSER,
-              logPollingMs,
+              config.logPollingMs,
               lifecycle.cleanup.after$
             ).pipe(
               takeUntil(lifecycle.cleanup.after$),
@@ -206,6 +213,7 @@ async function attemptToCreateCommand(
           'browser.helperApps.neverAsk.saveToDisk',
           'application/comma-separated-values, text/csv, text/plain'
         );
+        firefoxOptions.setAcceptInsecureCerts(config.acceptInsecureCerts);
 
         if (headlessBrowser === '1') {
           // See: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Headless_mode
@@ -317,7 +325,7 @@ export async function initWebDriver(
   log: ToolingLog,
   browserType: Browsers,
   lifecycle: Lifecycle,
-  logPollingMs: number
+  config: BrowserConfig
 ) {
   const logger = getLogger('webdriver.http.Executor');
   logger.setLevel(logging.Level.FINEST);
@@ -348,7 +356,7 @@ export async function initWebDriver(
       while (true) {
         const command = await Promise.race([
           delay(30 * SECOND),
-          attemptToCreateCommand(log, browserType, lifecycle, logPollingMs),
+          attemptToCreateCommand(log, browserType, lifecycle, config),
         ]);
 
         if (!command) {
diff --git a/test/scripts/jenkins_xpack_firefox_smoke.sh b/test/scripts/jenkins_xpack_firefox_smoke.sh
index fdaee76cafa9d..ae924a5e10552 100755
--- a/test/scripts/jenkins_xpack_firefox_smoke.sh
+++ b/test/scripts/jenkins_xpack_firefox_smoke.sh
@@ -7,4 +7,5 @@ checks-reporter-with-killswitch "X-Pack firefox smoke test" \
     --debug --bail \
     --kibana-install-dir "$KIBANA_INSTALL_DIR" \
     --include-tag "includeFirefox" \
-    --config test/functional/config.firefox.js;
+    --config test/functional/config.firefox.js \
+    --config test/functional_embedded/config.firefox.ts;
diff --git a/x-pack/scripts/functional_tests.js b/x-pack/scripts/functional_tests.js
index 37b22a687741e..6cafa3eeef08e 100644
--- a/x-pack/scripts/functional_tests.js
+++ b/x-pack/scripts/functional_tests.js
@@ -51,6 +51,7 @@ const onlyNotInCoverageTests = [
   require.resolve('../test/licensing_plugin/config.legacy.ts'),
   require.resolve('../test/endpoint_api_integration_no_ingest/config.ts'),
   require.resolve('../test/reporting_api_integration/config.js'),
+  require.resolve('../test/functional_embedded/config.ts'),
 ];
 
 require('@kbn/plugin-helpers').babelRegister();
diff --git a/x-pack/test/functional_embedded/config.firefox.ts b/x-pack/test/functional_embedded/config.firefox.ts
new file mode 100644
index 0000000000000..2051d1afd4ab3
--- /dev/null
+++ b/x-pack/test/functional_embedded/config.firefox.ts
@@ -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 { FtrConfigProviderContext } from '@kbn/test/types/ftr';
+
+export default async function ({ readConfigFile }: FtrConfigProviderContext) {
+  const chromeConfig = await readConfigFile(require.resolve('./config'));
+
+  return {
+    ...chromeConfig.getAll(),
+
+    browser: {
+      type: 'firefox',
+      acceptInsecureCerts: true,
+    },
+
+    suiteTags: {
+      exclude: ['skipFirefox'],
+    },
+
+    junit: {
+      reportName: 'Firefox Kibana Embedded in iframe with X-Pack Security',
+    },
+  };
+}
diff --git a/x-pack/test/functional_embedded/config.ts b/x-pack/test/functional_embedded/config.ts
new file mode 100644
index 0000000000000..95b290ece7db2
--- /dev/null
+++ b/x-pack/test/functional_embedded/config.ts
@@ -0,0 +1,67 @@
+/*
+ * 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 Fs from 'fs';
+import { resolve } from 'path';
+import { CA_CERT_PATH, KBN_CERT_PATH, KBN_KEY_PATH } from '@kbn/dev-utils';
+import { FtrConfigProviderContext } from '@kbn/test/types/ftr';
+import { pageObjects } from '../functional/page_objects';
+
+export default async function ({ readConfigFile }: FtrConfigProviderContext) {
+  const kibanaFunctionalConfig = await readConfigFile(require.resolve('../functional/config.js'));
+
+  const iframeEmbeddedPlugin = resolve(__dirname, './plugins/iframe_embedded');
+
+  const servers = {
+    ...kibanaFunctionalConfig.get('servers'),
+    elasticsearch: {
+      ...kibanaFunctionalConfig.get('servers.elasticsearch'),
+    },
+    kibana: {
+      ...kibanaFunctionalConfig.get('servers.kibana'),
+      protocol: 'https',
+      ssl: {
+        enabled: true,
+        key: Fs.readFileSync(KBN_KEY_PATH).toString('utf8'),
+        certificate: Fs.readFileSync(KBN_CERT_PATH).toString('utf8'),
+        certificateAuthorities: Fs.readFileSync(CA_CERT_PATH).toString('utf8'),
+      },
+    },
+  };
+
+  return {
+    testFiles: [require.resolve('./tests')],
+    servers,
+    services: kibanaFunctionalConfig.get('services'),
+    pageObjects,
+    browser: {
+      acceptInsecureCerts: true,
+    },
+    junit: {
+      reportName: 'Kibana Embedded in iframe with X-Pack Security',
+    },
+
+    esTestCluster: kibanaFunctionalConfig.get('esTestCluster'),
+    apps: {
+      ...kibanaFunctionalConfig.get('apps'),
+    },
+
+    kbnTestServer: {
+      ...kibanaFunctionalConfig.get('kbnTestServer'),
+      serverArgs: [
+        ...kibanaFunctionalConfig.get('kbnTestServer.serverArgs'),
+        `--plugin-path=${iframeEmbeddedPlugin}`,
+        '--server.ssl.enabled=true',
+        `--server.ssl.key=${KBN_KEY_PATH}`,
+        `--server.ssl.certificate=${KBN_CERT_PATH}`,
+        `--server.ssl.certificateAuthorities=${CA_CERT_PATH}`,
+
+        '--xpack.security.sameSiteCookies=None',
+        '--xpack.security.secureCookies=true',
+      ],
+    },
+  };
+}
diff --git a/x-pack/test/functional_embedded/ftr_provider_context.d.ts b/x-pack/test/functional_embedded/ftr_provider_context.d.ts
new file mode 100644
index 0000000000000..5646c06a3cd30
--- /dev/null
+++ b/x-pack/test/functional_embedded/ftr_provider_context.d.ts
@@ -0,0 +1,12 @@
+/*
+ * 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 { GenericFtrProviderContext } from '@kbn/test/types/ftr';
+import { pageObjects } from '../functional/page_objects';
+import { services } from './services';
+
+export type FtrProviderContext = GenericFtrProviderContext<typeof services, typeof pageObjects>;
+export { pageObjects };
diff --git a/x-pack/test/functional_embedded/plugins/iframe_embedded/kibana.json b/x-pack/test/functional_embedded/plugins/iframe_embedded/kibana.json
new file mode 100644
index 0000000000000..ea9f55bd21c6e
--- /dev/null
+++ b/x-pack/test/functional_embedded/plugins/iframe_embedded/kibana.json
@@ -0,0 +1,7 @@
+{
+  "id": "iframe_embedded",
+  "version": "1.0.0",
+  "kibanaVersion": "kibana",
+  "server": true,
+  "ui": false
+}
diff --git a/x-pack/test/functional_embedded/plugins/iframe_embedded/package.json b/x-pack/test/functional_embedded/plugins/iframe_embedded/package.json
new file mode 100644
index 0000000000000..9fa1554e5312b
--- /dev/null
+++ b/x-pack/test/functional_embedded/plugins/iframe_embedded/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "iframe_embedded",
+  "version": "0.0.0",
+  "kibana": {
+    "version": "kibana"
+  },
+  "scripts": {
+    "kbn": "node ../../../../../scripts/kbn.js",
+    "build": "rm -rf './target' && tsc"
+  },
+  "devDependencies": {
+    "typescript": "3.9.5"
+  }
+}
diff --git a/x-pack/test/functional_embedded/plugins/iframe_embedded/server/index.ts b/x-pack/test/functional_embedded/plugins/iframe_embedded/server/index.ts
new file mode 100644
index 0000000000000..976ef19d4d8a7
--- /dev/null
+++ b/x-pack/test/functional_embedded/plugins/iframe_embedded/server/index.ts
@@ -0,0 +1,11 @@
+/*
+ * 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 { PluginInitializerContext } from 'kibana/server';
+import { IframeEmbeddedPlugin } from './plugin';
+
+export const plugin = (initContext: PluginInitializerContext) =>
+  new IframeEmbeddedPlugin(initContext);
diff --git a/x-pack/test/functional_embedded/plugins/iframe_embedded/server/plugin.ts b/x-pack/test/functional_embedded/plugins/iframe_embedded/server/plugin.ts
new file mode 100644
index 0000000000000..890fe14cf03cf
--- /dev/null
+++ b/x-pack/test/functional_embedded/plugins/iframe_embedded/server/plugin.ts
@@ -0,0 +1,45 @@
+/*
+ * 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 Url from 'url';
+import { Plugin, CoreSetup, PluginInitializerContext } from 'src/core/server';
+
+function renderBody(iframeUrl: string) {
+  return `
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Kibana embedded in iframe</title>
+  </head>
+  <body>
+    <iframe data-test-subj="iframe_embedded" width="1000" height="1200" src="${iframeUrl}" frameborder="0"/>
+  </body>
+</html>
+`;
+}
+export class IframeEmbeddedPlugin implements Plugin {
+  constructor(initializerContext: PluginInitializerContext) {}
+
+  public setup(core: CoreSetup) {
+    core.http.resources.register(
+      {
+        path: '/iframe_embedded',
+        validate: false,
+      },
+      async (context, request, response) => {
+        const { protocol, port, host } = core.http.getServerInfo();
+
+        const kibanaUrl = Url.format({ protocol, hostname: host, port });
+
+        return response.renderHtml({
+          body: renderBody(kibanaUrl),
+        });
+      }
+    );
+  }
+  public start() {}
+  public stop() {}
+}
diff --git a/x-pack/test/functional_embedded/services.ts b/x-pack/test/functional_embedded/services.ts
new file mode 100644
index 0000000000000..1bdf67abd89d0
--- /dev/null
+++ b/x-pack/test/functional_embedded/services.ts
@@ -0,0 +1,9 @@
+/*
+ * 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 { services as functionalServices } from '../functional/services';
+
+export const services = functionalServices;
diff --git a/x-pack/test/functional_embedded/tests/iframe_embedded.ts b/x-pack/test/functional_embedded/tests/iframe_embedded.ts
new file mode 100644
index 0000000000000..9b5c9894a9407
--- /dev/null
+++ b/x-pack/test/functional_embedded/tests/iframe_embedded.ts
@@ -0,0 +1,42 @@
+/*
+ * 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 Url from 'url';
+import expect from '@kbn/expect';
+
+import { FtrProviderContext } from '../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const PageObjects = getPageObjects(['security', 'common']);
+  const browser = getService('browser');
+  const config = getService('config');
+  const testSubjects = getService('testSubjects');
+
+  describe('in iframe', () => {
+    it('should open Kibana for logged-in user', async () => {
+      const isChromeHiddenBefore = await PageObjects.common.isChromeHidden();
+      expect(isChromeHiddenBefore).to.be(true);
+
+      await PageObjects.security.login();
+
+      const { protocol, hostname, port } = config.get('servers.kibana');
+
+      const url = Url.format({
+        protocol,
+        hostname,
+        port,
+        pathname: 'iframe_embedded',
+      });
+
+      await browser.navigateTo(url);
+
+      const iframe = await testSubjects.find('iframe_embedded');
+      await browser.switchToFrame(iframe);
+
+      const isChromeHidden = await PageObjects.common.isChromeHidden();
+      expect(isChromeHidden).to.be(false);
+    });
+  });
+}
diff --git a/x-pack/test/functional_embedded/tests/index.ts b/x-pack/test/functional_embedded/tests/index.ts
new file mode 100644
index 0000000000000..87ac00b242437
--- /dev/null
+++ b/x-pack/test/functional_embedded/tests/index.ts
@@ -0,0 +1,14 @@
+/*
+ * 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 { FtrProviderContext } from '../ftr_provider_context';
+
+export default function ({ loadTestFile }: FtrProviderContext) {
+  describe('Kibana embedded', function () {
+    this.tags('ciGroup2');
+    loadTestFile(require.resolve('./iframe_embedded'));
+  });
+}

From 4ce91b342c42b7798778d8d180206639876046b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Marcondes?=
 <55978943+cauemarcondes@users.noreply.github.com>
Date: Thu, 18 Jun 2020 11:31:22 +0100
Subject: [PATCH 17/63] [APM] Add error rate chart to Errors overview and
 detail views (#67327)

* creating error rate chart

* adding error line chart

* creating error rate chart

* using date_histogram

* reapplying prettier style

* changing to theme color

* dont sync tooltips

* adding avg on error charts

* addressing pr comments

* adding possibility to disable legend toggle

* removing x-axis ticks from histogram

* return no percent when transaction count doesn return hits

* addressing PR comments

* addressing PR comments

* returning null when there is no transaction count

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../ErrorGroupDetails/Distribution/index.tsx  |  24 +-
 .../app/ErrorGroupDetails/index.tsx           | 107 ++++----
 .../app/ErrorGroupOverview/index.tsx          | 122 ++++-----
 .../shared/charts/CustomPlot/Legends.js       |   4 +-
 .../shared/charts/CustomPlot/index.js         |   5 +-
 .../shared/charts/ErrorRateChart/index.tsx    | 100 ++++++++
 .../__snapshots__/Histogram.test.js.snap      |  28 +--
 .../shared/charts/Histogram/index.js          | 232 +++++++++++-------
 .../apm/server/lib/errors/get_error_rate.ts   | 109 ++++++++
 .../apm/server/routes/create_apm_api.ts       |   2 +
 x-pack/plugins/apm/server/routes/errors.ts    |  24 ++
 11 files changed, 534 insertions(+), 223 deletions(-)
 create mode 100644 x-pack/plugins/apm/public/components/shared/charts/ErrorRateChart/index.tsx
 create mode 100644 x-pack/plugins/apm/server/lib/errors/get_error_rate.ts

diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.tsx
index 796f2992236f9..d71d5f2cb480d 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.tsx
@@ -5,9 +5,12 @@
  */
 
 import { EuiTitle } from '@elastic/eui';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
+import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
-import { scaleUtc } from 'd3-scale';
 import d3 from 'd3';
+import { scaleUtc } from 'd3-scale';
+import mean from 'lodash.mean';
 import React from 'react';
 import { asRelativeDateTimeRange } from '../../../../utils/formatters';
 import { getTimezoneOffsetInMs } from '../../../shared/charts/CustomPlot/getTimezoneOffsetInMs';
@@ -17,7 +20,7 @@ import { EmptyMessage } from '../../../shared/EmptyMessage';
 
 interface IBucket {
   key: number;
-  count: number;
+  count: number | undefined;
 }
 
 // TODO: cleanup duplication of this in distribution/get_distribution.ts (ErrorDistributionAPIResponse) and transactions/distribution/index.ts (TransactionDistributionAPIResponse)
@@ -30,7 +33,7 @@ interface IDistribution {
 interface FormattedBucket {
   x0: number;
   x: number;
-  y: number;
+  y: number | undefined;
 }
 
 export function getFormattedBuckets(
@@ -64,7 +67,7 @@ export function ErrorDistribution({ distribution, title }: Props) {
     distribution.bucketSize
   );
 
-  if (!buckets || distribution.noHits) {
+  if (!buckets) {
     return (
       <EmptyMessage
         heading={i18n.translate('xpack.apm.errorGroupDetails.noErrorsLabel', {
@@ -74,6 +77,7 @@ export function ErrorDistribution({ distribution, title }: Props) {
     );
   }
 
+  const averageValue = mean(buckets.map((bucket) => bucket.y)) || 0;
   const xMin = d3.min(buckets, (d) => d.x0);
   const xMax = d3.max(buckets, (d) => d.x);
   const tickFormat = scaleUtc().domain([xMin, xMax]).tickFormat();
@@ -84,6 +88,7 @@ export function ErrorDistribution({ distribution, title }: Props) {
         <span>{title}</span>
       </EuiTitle>
       <Histogram
+        noHits={distribution.noHits}
         tooltipHeader={tooltipHeader}
         verticalLineHover={(bucket: FormattedBucket) => bucket.x}
         xType="time-utc"
@@ -105,6 +110,17 @@ export function ErrorDistribution({ distribution, title }: Props) {
             values: { occCount: value },
           })
         }
+        legends={[
+          {
+            color: theme.euiColorVis1,
+            // 0a abbreviates large whole numbers with metric prefixes like: 1000 = 1k, 32000 = 32k, 1000000 = 1m
+            legendValue: numeral(averageValue).format('0a'),
+            title: i18n.translate('xpack.apm.errorGroupDetails.avgLabel', {
+              defaultMessage: 'Avg.',
+            }),
+            legendClickDisabled: true,
+          },
+        ]}
       />
     </div>
   );
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx
index d8885ec11c511..225e5ef2f6ca2 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx
@@ -26,6 +26,9 @@ import { ErrorDistribution } from './Distribution';
 import { useLocation } from '../../../hooks/useLocation';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { useTrackPageview } from '../../../../../observability/public';
+import { callApmApi } from '../../../services/rest/createCallApmApi';
+import { ErrorRateChart } from '../../shared/charts/ErrorRateChart';
+import { ChartsSyncContextProvider } from '../../../context/ChartsSyncContext';
 
 const Titles = styled.div`
   margin-bottom: ${px(units.plus)};
@@ -61,49 +64,43 @@ export function ErrorGroupDetails() {
   const { urlParams, uiFilters } = useUrlParams();
   const { serviceName, start, end, errorGroupId } = urlParams;
 
-  const { data: errorGroupData } = useFetcher(
-    (callApmApi) => {
-      if (serviceName && start && end && errorGroupId) {
-        return callApmApi({
-          pathname: '/api/apm/services/{serviceName}/errors/{groupId}',
-          params: {
-            path: {
-              serviceName,
-              groupId: errorGroupId,
-            },
-            query: {
-              start,
-              end,
-              uiFilters: JSON.stringify(uiFilters),
-            },
+  const { data: errorGroupData } = useFetcher(() => {
+    if (serviceName && start && end && errorGroupId) {
+      return callApmApi({
+        pathname: '/api/apm/services/{serviceName}/errors/{groupId}',
+        params: {
+          path: {
+            serviceName,
+            groupId: errorGroupId,
           },
-        });
-      }
-    },
-    [serviceName, start, end, errorGroupId, uiFilters]
-  );
-
-  const { data: errorDistributionData } = useFetcher(
-    (callApmApi) => {
-      if (serviceName && start && end && errorGroupId) {
-        return callApmApi({
-          pathname: '/api/apm/services/{serviceName}/errors/distribution',
-          params: {
-            path: {
-              serviceName,
-            },
-            query: {
-              start,
-              end,
-              groupId: errorGroupId,
-              uiFilters: JSON.stringify(uiFilters),
-            },
+          query: {
+            start,
+            end,
+            uiFilters: JSON.stringify(uiFilters),
           },
-        });
-      }
-    },
-    [serviceName, start, end, errorGroupId, uiFilters]
-  );
+        },
+      });
+    }
+  }, [serviceName, start, end, errorGroupId, uiFilters]);
+
+  const { data: errorDistributionData } = useFetcher(() => {
+    if (serviceName && start && end && errorGroupId) {
+      return callApmApi({
+        pathname: '/api/apm/services/{serviceName}/errors/distribution',
+        params: {
+          path: {
+            serviceName,
+          },
+          query: {
+            start,
+            end,
+            groupId: errorGroupId,
+            uiFilters: JSON.stringify(uiFilters),
+          },
+        },
+      });
+    }
+  }, [serviceName, start, end, errorGroupId, uiFilters]);
 
   useTrackPageview({ app: 'apm', path: 'error_group_details' });
   useTrackPageview({ app: 'apm', path: 'error_group_details', delay: 15000 });
@@ -185,16 +182,24 @@ export function ErrorGroupDetails() {
             </EuiText>
           </Titles>
         )}
-
-        <ErrorDistribution
-          distribution={errorDistributionData}
-          title={i18n.translate(
-            'xpack.apm.errorGroupDetails.occurrencesChartLabel',
-            {
-              defaultMessage: 'Occurrences',
-            }
-          )}
-        />
+        <EuiFlexGroup gutterSize="s">
+          <ChartsSyncContextProvider>
+            <EuiFlexItem>
+              <ErrorDistribution
+                distribution={errorDistributionData}
+                title={i18n.translate(
+                  'xpack.apm.errorGroupDetails.occurrencesChartLabel',
+                  {
+                    defaultMessage: 'Occurrences',
+                  }
+                )}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <ErrorRateChart />
+            </EuiFlexItem>
+          </ChartsSyncContextProvider>
+        </EuiFlexGroup>
       </EuiPanel>
       <EuiSpacer size="s" />
       {showDetails && (
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
index ff031c5a86d11..73474208e26c0 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
@@ -13,64 +13,61 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
-import { useFetcher } from '../../../hooks/useFetcher';
-import { ErrorDistribution } from '../ErrorGroupDetails/Distribution';
-import { ErrorGroupList } from './List';
-import { useUrlParams } from '../../../hooks/useUrlParams';
 import { useTrackPageview } from '../../../../../observability/public';
 import { PROJECTION } from '../../../../common/projections/typings';
+import { useFetcher } from '../../../hooks/useFetcher';
+import { useUrlParams } from '../../../hooks/useUrlParams';
+import { callApmApi } from '../../../services/rest/createCallApmApi';
+import { ErrorRateChart } from '../../shared/charts/ErrorRateChart';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
+import { ErrorDistribution } from '../ErrorGroupDetails/Distribution';
+import { ErrorGroupList } from './List';
+import { ChartsSyncContextProvider } from '../../../context/ChartsSyncContext';
 
 const ErrorGroupOverview: React.FC = () => {
   const { urlParams, uiFilters } = useUrlParams();
 
   const { serviceName, start, end, sortField, sortDirection } = urlParams;
 
-  const { data: errorDistributionData } = useFetcher(
-    (callApmApi) => {
-      if (serviceName && start && end) {
-        return callApmApi({
-          pathname: '/api/apm/services/{serviceName}/errors/distribution',
-          params: {
-            path: {
-              serviceName,
-            },
-            query: {
-              start,
-              end,
-              uiFilters: JSON.stringify(uiFilters),
-            },
+  const { data: errorDistributionData } = useFetcher(() => {
+    if (serviceName && start && end) {
+      return callApmApi({
+        pathname: '/api/apm/services/{serviceName}/errors/distribution',
+        params: {
+          path: {
+            serviceName,
           },
-        });
-      }
-    },
-    [serviceName, start, end, uiFilters]
-  );
+          query: {
+            start,
+            end,
+            uiFilters: JSON.stringify(uiFilters),
+          },
+        },
+      });
+    }
+  }, [serviceName, start, end, uiFilters]);
 
-  const { data: errorGroupListData } = useFetcher(
-    (callApmApi) => {
-      const normalizedSortDirection = sortDirection === 'asc' ? 'asc' : 'desc';
+  const { data: errorGroupListData } = useFetcher(() => {
+    const normalizedSortDirection = sortDirection === 'asc' ? 'asc' : 'desc';
 
-      if (serviceName && start && end) {
-        return callApmApi({
-          pathname: '/api/apm/services/{serviceName}/errors',
-          params: {
-            path: {
-              serviceName,
-            },
-            query: {
-              start,
-              end,
-              sortField,
-              sortDirection: normalizedSortDirection,
-              uiFilters: JSON.stringify(uiFilters),
-            },
+    if (serviceName && start && end) {
+      return callApmApi({
+        pathname: '/api/apm/services/{serviceName}/errors',
+        params: {
+          path: {
+            serviceName,
           },
-        });
-      }
-    },
-    [serviceName, start, end, sortField, sortDirection, uiFilters]
-  );
+          query: {
+            start,
+            end,
+            sortField,
+            sortDirection: normalizedSortDirection,
+            uiFilters: JSON.stringify(uiFilters),
+          },
+        },
+      });
+    }
+  }, [serviceName, start, end, sortField, sortDirection, uiFilters]);
 
   useTrackPageview({
     app: 'apm',
@@ -102,20 +99,27 @@ const ErrorGroupOverview: React.FC = () => {
           <LocalUIFilters {...localUIFiltersConfig} />
         </EuiFlexItem>
         <EuiFlexItem grow={7}>
-          <EuiFlexGroup>
-            <EuiFlexItem>
-              <EuiPanel>
-                <ErrorDistribution
-                  distribution={errorDistributionData}
-                  title={i18n.translate(
-                    'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
-                    {
-                      defaultMessage: 'Error occurrences',
-                    }
-                  )}
-                />
-              </EuiPanel>
-            </EuiFlexItem>
+          <EuiFlexGroup gutterSize="s">
+            <ChartsSyncContextProvider>
+              <EuiFlexItem>
+                <EuiPanel>
+                  <ErrorDistribution
+                    distribution={errorDistributionData}
+                    title={i18n.translate(
+                      'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
+                      {
+                        defaultMessage: 'Error occurrences',
+                      }
+                    )}
+                  />
+                </EuiPanel>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiPanel>
+                  <ErrorRateChart />
+                </EuiPanel>
+              </EuiFlexItem>
+            </ChartsSyncContextProvider>
           </EuiFlexGroup>
 
           <EuiSpacer size="s" />
diff --git a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/Legends.js b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/Legends.js
index bf6cf083e00ec..87ab81e738eb8 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/Legends.js
+++ b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/Legends.js
@@ -105,7 +105,9 @@ export default function Legends({
         return (
           <Legend
             key={i}
-            onClick={() => clickLegend(i)}
+            onClick={
+              serie.legendClickDisabled ? undefined : () => clickLegend(i)
+            }
             disabled={seriesEnabledState[i]}
             text={text}
             color={serie.color}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/index.js b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/index.js
index e1ffec3a8d97f..7e74961e57ea1 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/index.js
+++ b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/index.js
@@ -144,7 +144,7 @@ export class InnerCustomPlot extends PureComponent {
     const hasValidCoordinates = flatten(series.map((s) => s.data)).some((p) =>
       isValidCoordinateValue(p.y)
     );
-    const noHits = !hasValidCoordinates;
+    const noHits = this.props.noHits || !hasValidCoordinates;
 
     const plotValues = this.getPlotValues({
       visibleSeries,
@@ -234,6 +234,7 @@ InnerCustomPlot.propTypes = {
       firstSeen: PropTypes.number,
     })
   ),
+  noHits: PropTypes.bool,
 };
 
 InnerCustomPlot.defaultProps = {
@@ -241,6 +242,8 @@ InnerCustomPlot.defaultProps = {
   tickFormatX: undefined,
   tickFormatY: (y) => y,
   truncateLegends: false,
+  xAxisTickSizeOuter: 0,
+  noHits: false,
 };
 
 export default makeWidthFlexible(InnerCustomPlot);
diff --git a/x-pack/plugins/apm/public/components/shared/charts/ErrorRateChart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/ErrorRateChart/index.tsx
new file mode 100644
index 0000000000000..7aafa9e1fdcec
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/charts/ErrorRateChart/index.tsx
@@ -0,0 +1,100 @@
+/*
+ * 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 { EuiTitle } from '@elastic/eui';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { i18n } from '@kbn/i18n';
+import mean from 'lodash.mean';
+import React, { useCallback } from 'react';
+import { useChartsSync } from '../../../../hooks/useChartsSync';
+import { useFetcher } from '../../../../hooks/useFetcher';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { callApmApi } from '../../../../services/rest/createCallApmApi';
+import { unit } from '../../../../style/variables';
+import { asPercent } from '../../../../utils/formatters';
+// @ts-ignore
+import CustomPlot from '../CustomPlot';
+
+const tickFormatY = (y?: number) => {
+  return asPercent(y || 0, 1);
+};
+
+export const ErrorRateChart = () => {
+  const { urlParams, uiFilters } = useUrlParams();
+  const syncedChartsProps = useChartsSync();
+
+  const { serviceName, start, end, errorGroupId } = urlParams;
+  const { data: errorRateData } = useFetcher(() => {
+    if (serviceName && start && end) {
+      return callApmApi({
+        pathname: '/api/apm/services/{serviceName}/errors/rate',
+        params: {
+          path: {
+            serviceName,
+          },
+          query: {
+            start,
+            end,
+            uiFilters: JSON.stringify(uiFilters),
+            groupId: errorGroupId,
+          },
+        },
+      });
+    }
+  }, [serviceName, start, end, uiFilters, errorGroupId]);
+
+  const combinedOnHover = useCallback(
+    (hoverX: number) => {
+      return syncedChartsProps.onHover(hoverX);
+    },
+    [syncedChartsProps]
+  );
+
+  const errorRates = errorRateData?.errorRates || [];
+
+  return (
+    <>
+      <EuiTitle size="xs">
+        <span>
+          {i18n.translate('xpack.apm.errorRateChart.title', {
+            defaultMessage: 'Error Rate',
+          })}
+        </span>
+      </EuiTitle>
+      <CustomPlot
+        {...syncedChartsProps}
+        noHits={errorRateData?.noHits}
+        series={[
+          {
+            color: theme.euiColorVis7,
+            data: [],
+            legendValue: tickFormatY(mean(errorRates.map((rate) => rate.y))),
+            legendClickDisabled: true,
+            title: i18n.translate('xpack.apm.errorRateChart.avgLabel', {
+              defaultMessage: 'Avg.',
+            }),
+            type: 'linemark',
+            hideTooltipValue: true,
+          },
+          {
+            data: errorRates,
+            type: 'line',
+            color: theme.euiColorVis7,
+            hideLegend: true,
+            title: i18n.translate('xpack.apm.errorRateChart.rateLabel', {
+              defaultMessage: 'Rate',
+            }),
+          },
+        ]}
+        onHover={combinedOnHover}
+        tickFormatY={tickFormatY}
+        formatTooltipValue={({ y }: { y?: number }) =>
+          Number.isFinite(y) ? tickFormatY(y) : 'N/A'
+        }
+        height={unit * 10}
+      />
+    </>
+  );
+};
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap b/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap
index 1f935af7c8999..a31b9735628ab 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap
+++ b/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap
@@ -114,7 +114,7 @@ exports[`Histogram Initially should have default markup 1`] = `
                   x1={0}
                   x2={0}
                   y1={-0}
-                  y2={10}
+                  y2={0}
                 />
                 <text
                   className="rv-xy-plot__axis__tick__text"
@@ -125,7 +125,7 @@ exports[`Histogram Initially should have default markup 1`] = `
                     }
                   }
                   textAnchor="middle"
-                  transform="translate(0, 18)"
+                  transform="translate(0, 8)"
                 >
                   0 ms
                 </text>
@@ -149,7 +149,7 @@ exports[`Histogram Initially should have default markup 1`] = `
                   x1={0}
                   x2={0}
                   y1={-0}
-                  y2={10}
+                  y2={0}
                 />
                 <text
                   className="rv-xy-plot__axis__tick__text"
@@ -160,7 +160,7 @@ exports[`Histogram Initially should have default markup 1`] = `
                     }
                   }
                   textAnchor="middle"
-                  transform="translate(0, 18)"
+                  transform="translate(0, 8)"
                 >
                   500 ms
                 </text>
@@ -184,7 +184,7 @@ exports[`Histogram Initially should have default markup 1`] = `
                   x1={0}
                   x2={0}
                   y1={-0}
-                  y2={10}
+                  y2={0}
                 />
                 <text
                   className="rv-xy-plot__axis__tick__text"
@@ -195,7 +195,7 @@ exports[`Histogram Initially should have default markup 1`] = `
                     }
                   }
                   textAnchor="middle"
-                  transform="translate(0, 18)"
+                  transform="translate(0, 8)"
                 >
                   1,000 ms
                 </text>
@@ -219,7 +219,7 @@ exports[`Histogram Initially should have default markup 1`] = `
                   x1={0}
                   x2={0}
                   y1={-0}
-                  y2={10}
+                  y2={0}
                 />
                 <text
                   className="rv-xy-plot__axis__tick__text"
@@ -230,7 +230,7 @@ exports[`Histogram Initially should have default markup 1`] = `
                     }
                   }
                   textAnchor="middle"
-                  transform="translate(0, 18)"
+                  transform="translate(0, 8)"
                 >
                   1,500 ms
                 </text>
@@ -254,7 +254,7 @@ exports[`Histogram Initially should have default markup 1`] = `
                   x1={0}
                   x2={0}
                   y1={-0}
-                  y2={10}
+                  y2={0}
                 />
                 <text
                   className="rv-xy-plot__axis__tick__text"
@@ -265,7 +265,7 @@ exports[`Histogram Initially should have default markup 1`] = `
                     }
                   }
                   textAnchor="middle"
-                  transform="translate(0, 18)"
+                  transform="translate(0, 8)"
                 >
                   2,000 ms
                 </text>
@@ -289,7 +289,7 @@ exports[`Histogram Initially should have default markup 1`] = `
                   x1={0}
                   x2={0}
                   y1={-0}
-                  y2={10}
+                  y2={0}
                 />
                 <text
                   className="rv-xy-plot__axis__tick__text"
@@ -300,7 +300,7 @@ exports[`Histogram Initially should have default markup 1`] = `
                     }
                   }
                   textAnchor="middle"
-                  transform="translate(0, 18)"
+                  transform="translate(0, 8)"
                 >
                   2,500 ms
                 </text>
@@ -324,7 +324,7 @@ exports[`Histogram Initially should have default markup 1`] = `
                   x1={0}
                   x2={0}
                   y1={-0}
-                  y2={10}
+                  y2={0}
                 />
                 <text
                   className="rv-xy-plot__axis__tick__text"
@@ -335,7 +335,7 @@ exports[`Histogram Initially should have default markup 1`] = `
                     }
                   }
                   textAnchor="middle"
-                  transform="translate(0, 18)"
+                  transform="translate(0, 8)"
                 >
                   3,000 ms
                 </text>
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Histogram/index.js b/x-pack/plugins/apm/public/components/shared/charts/Histogram/index.js
index 4eca1a37c51bc..002ff19d0d1df 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Histogram/index.js
+++ b/x-pack/plugins/apm/public/components/shared/charts/Histogram/index.js
@@ -26,6 +26,10 @@ import Tooltip from '../Tooltip';
 import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { tint } from 'polished';
 import { getTimeTicksTZ, getDomainTZ } from '../helper/timezone';
+import Legends from '../CustomPlot/Legends';
+import StatusText from '../CustomPlot/StatusText';
+import { i18n } from '@kbn/i18n';
+import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue';
 
 const XY_HEIGHT = unit * 10;
 const XY_MARGIN = {
@@ -99,6 +103,7 @@ export class HistogramInner extends PureComponent {
       tooltipHeader,
       verticalLineHover,
       width: XY_WIDTH,
+      legends,
     } = this.props;
     const { hoveredBucket } = this.state;
     if (isEmpty(buckets) || XY_WIDTH === 0) {
@@ -139,102 +144,140 @@ export class HistogramInner extends PureComponent {
     const showVerticalLineHover = verticalLineHover(hoveredBucket);
     const showBackgroundHover = backgroundHover(hoveredBucket);
 
+    const hasValidCoordinates = buckets.some((bucket) =>
+      isValidCoordinateValue(bucket.y)
+    );
+    const noHits = this.props.noHits || !hasValidCoordinates;
+
+    const xyPlotProps = {
+      dontCheckIfEmpty: true,
+      xType: this.props.xType,
+      width: XY_WIDTH,
+      height: XY_HEIGHT,
+      margin: XY_MARGIN,
+      xDomain: xDomain,
+      yDomain: yDomain,
+    };
+
+    const xAxisProps = {
+      style: { strokeWidth: '1px' },
+      marginRight: 10,
+      tickSize: 0,
+      tickTotal: X_TICK_TOTAL,
+      tickFormat: formatX,
+      tickValues: xTickValues,
+    };
+
+    const emptyStateChart = (
+      <XYPlot {...xyPlotProps}>
+        <XAxis {...xAxisProps} />
+        <StatusText
+          marginLeft={30}
+          text={i18n.translate('xpack.apm.histogram.plot.noDataLabel', {
+            defaultMessage: 'No data within this time range.',
+          })}
+        />
+      </XYPlot>
+    );
+
     return (
       <div style={{ position: 'relative', height: XY_HEIGHT }}>
         <ChartsWrapper>
-          <XYPlot
-            xType={this.props.xType}
-            width={XY_WIDTH}
-            height={XY_HEIGHT}
-            margin={XY_MARGIN}
-            xDomain={xDomain}
-            yDomain={yDomain}
-          >
-            <HorizontalGridLines tickValues={yTickValues} />
-            <XAxis
-              style={{ strokeWidth: '1px' }}
-              marginRight={10}
-              tickSizeOuter={10}
-              tickSizeInner={0}
-              tickTotal={X_TICK_TOTAL}
-              tickFormat={formatX}
-              tickValues={xTickValues}
-            />
-            <YAxis
-              tickSize={0}
-              hideLine
-              tickValues={yTickValues}
-              tickFormat={formatYShort}
-            />
-
-            {showBackgroundHover && (
-              <SingleRect
-                x={x(hoveredBucket.x0)}
-                width={x(bucketSize) - x(0)}
-                style={{
-                  fill: theme.euiColorLightestShade,
-                }}
-              />
-            )}
-
-            {shouldShowTooltip && (
-              <Tooltip
-                style={{
-                  marginLeft: '1%',
-                  marginRight: '1%',
-                }}
-                header={tooltipHeader(hoveredBucket)}
-                footer={tooltipFooter(hoveredBucket)}
-                tooltipPoints={[{ value: formatYLong(hoveredBucket.y) }]}
-                x={hoveredBucket.xCenter}
-                y={yDomain[1] / 2}
-              />
-            )}
-
-            {selectedBucket && (
-              <SingleRect
-                x={x(selectedBucket.x0)}
-                width={x(bucketSize) - x(0)}
-                style={{
-                  fill: 'transparent',
-                  stroke: theme.euiColorVis1,
-                  rx: '0px',
-                  ry: '0px',
-                }}
-              />
-            )}
-
-            <VerticalRectSeries
-              colorType="literal"
-              data={chartData}
-              style={{
-                rx: '0px',
-                ry: '0px',
-              }}
-            />
-
-            {showVerticalLineHover && (
-              <VerticalGridLines tickValues={[hoveredBucket.x]} />
-            )}
-
-            <Voronoi
-              extent={[
-                [XY_MARGIN.left, XY_MARGIN.top],
-                [XY_WIDTH, XY_HEIGHT],
-              ]}
-              nodes={buckets.map((bucket) => {
-                return {
-                  ...bucket,
-                  xCenter: (bucket.x0 + bucket.x) / 2,
-                };
-              })}
-              onClick={this.onClick}
-              onHover={this.onHover}
-              onBlur={this.onBlur}
-              x={(d) => x(d.xCenter)}
-              y={() => 1}
-            />
-          </XYPlot>
+          {noHits ? (
+            <>{emptyStateChart}</>
+          ) : (
+            <>
+              <XYPlot {...xyPlotProps}>
+                <HorizontalGridLines tickValues={yTickValues} />
+                <XAxis {...xAxisProps} />
+                <YAxis
+                  tickSize={0}
+                  hideLine
+                  tickValues={yTickValues}
+                  tickFormat={formatYShort}
+                />
+
+                {showBackgroundHover && (
+                  <SingleRect
+                    x={x(hoveredBucket.x0)}
+                    width={x(bucketSize) - x(0)}
+                    style={{
+                      fill: theme.euiColorLightestShade,
+                    }}
+                  />
+                )}
+
+                {shouldShowTooltip && (
+                  <Tooltip
+                    style={{
+                      marginLeft: '1%',
+                      marginRight: '1%',
+                    }}
+                    header={tooltipHeader(hoveredBucket)}
+                    footer={tooltipFooter(hoveredBucket)}
+                    tooltipPoints={[{ value: formatYLong(hoveredBucket.y) }]}
+                    x={hoveredBucket.xCenter}
+                    y={yDomain[1] / 2}
+                  />
+                )}
+
+                {selectedBucket && (
+                  <SingleRect
+                    x={x(selectedBucket.x0)}
+                    width={x(bucketSize) - x(0)}
+                    style={{
+                      fill: 'transparent',
+                      stroke: theme.euiColorVis1,
+                      rx: '0px',
+                      ry: '0px',
+                    }}
+                  />
+                )}
+
+                <VerticalRectSeries
+                  colorType="literal"
+                  data={chartData}
+                  style={{
+                    rx: '0px',
+                    ry: '0px',
+                  }}
+                />
+
+                {showVerticalLineHover && hoveredBucket?.x && (
+                  <VerticalGridLines tickValues={[hoveredBucket.x]} />
+                )}
+
+                <Voronoi
+                  extent={[
+                    [XY_MARGIN.left, XY_MARGIN.top],
+                    [XY_WIDTH, XY_HEIGHT],
+                  ]}
+                  nodes={buckets.map((bucket) => {
+                    return {
+                      ...bucket,
+                      xCenter: (bucket.x0 + bucket.x) / 2,
+                    };
+                  })}
+                  onClick={this.onClick}
+                  onHover={this.onHover}
+                  onBlur={this.onBlur}
+                  x={(d) => x(d.xCenter)}
+                  y={() => 1}
+                />
+              </XYPlot>
+
+              {legends && (
+                <Legends
+                  series={legends}
+                  seriesEnabledState={[]}
+                  hiddenSeriesCount={0}
+                  clickLegend={() => {}}
+                  truncateLegends={false}
+                  noHits={noHits}
+                />
+              )}
+            </>
+          )}
         </ChartsWrapper>
       </div>
     );
@@ -255,6 +298,8 @@ HistogramInner.propTypes = {
   verticalLineHover: PropTypes.func,
   width: PropTypes.number.isRequired,
   xType: PropTypes.string,
+  legends: PropTypes.array,
+  noHits: PropTypes.bool,
 };
 
 HistogramInner.defaultProps = {
@@ -265,6 +310,7 @@ HistogramInner.defaultProps = {
   tooltipHeader: () => null,
   verticalLineHover: () => null,
   xType: 'linear',
+  noHits: false,
 };
 
 export default makeWidthFlexible(HistogramInner);
diff --git a/x-pack/plugins/apm/server/lib/errors/get_error_rate.ts b/x-pack/plugins/apm/server/lib/errors/get_error_rate.ts
new file mode 100644
index 0000000000000..d558e3942a42b
--- /dev/null
+++ b/x-pack/plugins/apm/server/lib/errors/get_error_rate.ts
@@ -0,0 +1,109 @@
+/*
+ * 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 {
+  ERROR_GROUP_ID,
+  PROCESSOR_EVENT,
+  SERVICE_NAME,
+} from '../../../common/elasticsearch_fieldnames';
+import { ProcessorEvent } from '../../../common/processor_event';
+import { getMetricsDateHistogramParams } from '../helpers/metrics';
+import { rangeFilter } from '../helpers/range_filter';
+import {
+  Setup,
+  SetupTimeRange,
+  SetupUIFilters,
+} from '../helpers/setup_request';
+
+export async function getErrorRate({
+  serviceName,
+  groupId,
+  setup,
+}: {
+  serviceName: string;
+  groupId?: string;
+  setup: Setup & SetupTimeRange & SetupUIFilters;
+}) {
+  const { start, end, uiFiltersES, client, indices } = setup;
+
+  const filter = [
+    { term: { [SERVICE_NAME]: serviceName } },
+    { range: rangeFilter(start, end) },
+    ...uiFiltersES,
+  ];
+
+  const aggs = {
+    response_times: {
+      date_histogram: getMetricsDateHistogramParams(start, end),
+    },
+  };
+
+  const getTransactionBucketAggregation = async () => {
+    const resp = await client.search({
+      index: indices['apm_oss.transactionIndices'],
+      body: {
+        size: 0,
+        query: {
+          bool: {
+            filter: [
+              ...filter,
+              { term: { [PROCESSOR_EVENT]: ProcessorEvent.transaction } },
+            ],
+          },
+        },
+        aggs,
+      },
+    });
+    return {
+      totalHits: resp.hits.total.value,
+      responseTimeBuckets: resp.aggregations?.response_times.buckets,
+    };
+  };
+  const getErrorBucketAggregation = async () => {
+    const groupIdFilter = groupId
+      ? [{ term: { [ERROR_GROUP_ID]: groupId } }]
+      : [];
+    const resp = await client.search({
+      index: indices['apm_oss.errorIndices'],
+      body: {
+        size: 0,
+        query: {
+          bool: {
+            filter: [
+              ...filter,
+              ...groupIdFilter,
+              { term: { [PROCESSOR_EVENT]: ProcessorEvent.error } },
+            ],
+          },
+        },
+        aggs,
+      },
+    });
+    return resp.aggregations?.response_times.buckets;
+  };
+
+  const [transactions, errorResponseTimeBuckets] = await Promise.all([
+    getTransactionBucketAggregation(),
+    getErrorBucketAggregation(),
+  ]);
+
+  const transactionCountByTimestamp: Record<number, number> = {};
+  if (transactions?.responseTimeBuckets) {
+    transactions.responseTimeBuckets.forEach((bucket) => {
+      transactionCountByTimestamp[bucket.key] = bucket.doc_count;
+    });
+  }
+
+  const errorRates = errorResponseTimeBuckets?.map((bucket) => {
+    const { key, doc_count: errorCount } = bucket;
+    const relativeRate = errorCount / transactionCountByTimestamp[key];
+    return { x: key, y: relativeRate };
+  });
+
+  return {
+    noHits: transactions?.totalHits === 0,
+    errorRates,
+  };
+}
diff --git a/x-pack/plugins/apm/server/routes/create_apm_api.ts b/x-pack/plugins/apm/server/routes/create_apm_api.ts
index 774f1f27435a2..bdfb49fa30828 100644
--- a/x-pack/plugins/apm/server/routes/create_apm_api.ts
+++ b/x-pack/plugins/apm/server/routes/create_apm_api.ts
@@ -13,6 +13,7 @@ import {
   errorDistributionRoute,
   errorGroupsRoute,
   errorsRoute,
+  errorRateRoute,
 } from './errors';
 import {
   serviceAgentNameRoute,
@@ -81,6 +82,7 @@ const createApmApi = () => {
     .add(errorDistributionRoute)
     .add(errorGroupsRoute)
     .add(errorsRoute)
+    .add(errorRateRoute)
 
     // Services
     .add(serviceAgentNameRoute)
diff --git a/x-pack/plugins/apm/server/routes/errors.ts b/x-pack/plugins/apm/server/routes/errors.ts
index 1615550027d3c..97314a9a61661 100644
--- a/x-pack/plugins/apm/server/routes/errors.ts
+++ b/x-pack/plugins/apm/server/routes/errors.ts
@@ -11,6 +11,7 @@ import { getErrorGroup } from '../lib/errors/get_error_group';
 import { getErrorGroups } from '../lib/errors/get_error_groups';
 import { setupRequest } from '../lib/helpers/setup_request';
 import { uiFiltersRt, rangeRt } from './default_api_types';
+import { getErrorRate } from '../lib/errors/get_error_rate';
 
 export const errorsRoute = createRoute(() => ({
   path: '/api/apm/services/{serviceName}/errors',
@@ -80,3 +81,26 @@ export const errorDistributionRoute = createRoute(() => ({
     return getErrorDistribution({ serviceName, groupId, setup });
   },
 }));
+
+export const errorRateRoute = createRoute(() => ({
+  path: '/api/apm/services/{serviceName}/errors/rate',
+  params: {
+    path: t.type({
+      serviceName: t.string,
+    }),
+    query: t.intersection([
+      t.partial({
+        groupId: t.string,
+      }),
+      uiFiltersRt,
+      rangeRt,
+    ]),
+  },
+  handler: async ({ context, request }) => {
+    const setup = await setupRequest(context, request);
+    const { params } = context;
+    const { serviceName } = params.path;
+    const { groupId } = params.query;
+    return getErrorRate({ serviceName, groupId, setup });
+  },
+}));

From 4f271c0cbb8d33f2982ff8c3312bf65434c84b14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Casper=20H=C3=BCbertz?= <casper@elastic.co>
Date: Thu, 18 Jun 2020 15:32:26 +0200
Subject: [PATCH 18/63] [APM] Change the unsaved changes text color (#69493)

Fixes dark mode issue where the text would render dark on a dark background.
---
 .../AgentConfigurationCreateEdit/SettingsPage/SettingsPage.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/SettingsPage/SettingsPage.tsx b/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/SettingsPage/SettingsPage.tsx
index bbf3921b383fd..e2609f893dfa0 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/SettingsPage/SettingsPage.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/SettingsPage/SettingsPage.tsx
@@ -223,7 +223,7 @@ export function SettingsPage({
               }}
             >
               <EuiHealth color="warning" />
-              <EuiText>
+              <EuiText color="ghost">
                 {i18n.translate('xpack.apm.unsavedChanges', {
                   defaultMessage:
                     '{unsavedChangesCount, plural, =0{0 unsaved changes} one {1 unsaved change} other {# unsaved changes}} ',

From f33192d35f9d491b17ca364b84d02865f8d1beeb Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Thu, 18 Jun 2020 15:35:22 +0200
Subject: [PATCH 19/63] [refactor] remove drilldown plugin, move components to
 uiActionsEnhanced (#69403)

* refactor: remove drilldown plugin by moving components to uiActionsEnhanced

* fix

* fix mistake in test

* fix i18n
---
 src/dev/storybook/aliases.ts                  |  1 -
 .../lib/panel/panel_header/panel_header.tsx   |  2 +-
 x-pack/.i18nrc.json                           |  1 -
 x-pack/plugins/dashboard_enhanced/kibana.json |  2 +-
 .../dashboard_enhanced/public/plugin.ts       |  3 -
 .../flyout_create_drilldown.test.tsx          |  6 +-
 .../flyout_create_drilldown.tsx               |  4 +-
 .../flyout_edit_drilldown.test.tsx            |  4 +-
 .../flyout_edit_drilldown.tsx                 |  4 +-
 x-pack/plugins/drilldowns/README.md           |  3 -
 x-pack/plugins/drilldowns/kibana.json         |  8 ---
 .../public/components/flyout_frame/i18n.ts    | 15 -----
 x-pack/plugins/drilldowns/public/index.ts     | 18 ------
 x-pack/plugins/drilldowns/public/mocks.ts     | 30 ----------
 x-pack/plugins/drilldowns/public/plugin.ts    | 48 ----------------
 .../translations/translations/ja-JP.json      | 42 +++++++-------
 .../translations/translations/zh-CN.json      | 42 +++++++-------
 ...nnected_flyout_manage_drilldowns.story.tsx | 29 ++++------
 ...onnected_flyout_manage_drilldowns.test.tsx | 34 +++++-------
 .../connected_flyout_manage_drilldowns.tsx    | 55 ++++++++-----------
 .../i18n.ts                                   | 31 ++++++-----
 .../index.ts                                  |  0
 .../test_data.ts                              |  6 +-
 .../drilldown_hello_bar.story.tsx             |  2 +-
 .../drilldown_hello_bar.tsx                   |  0
 .../components/drilldown_hello_bar/i18n.ts    |  6 +-
 .../components/drilldown_hello_bar/index.tsx  |  0
 .../flyout_drilldown_wizard.story.tsx         |  6 +-
 .../flyout_drilldown_wizard.tsx               |  2 +-
 .../flyout_drilldown_wizard/i18n.ts           | 10 ++--
 .../flyout_drilldown_wizard/index.ts          |  0
 .../flyout_frame/flyout_frame.story.tsx       |  2 +-
 .../flyout_frame/flyout_frame.test.tsx        |  2 +-
 .../components/flyout_frame/flyout_frame.tsx  |  0
 .../components/flyout_frame/i18n.ts           | 21 +++++++
 .../components/flyout_frame/index.tsx         |  0
 .../flyout_list_manage_drilldowns.story.tsx   |  0
 .../flyout_list_manage_drilldowns.tsx         |  0
 .../flyout_list_manage_drilldowns/i18n.ts     |  2 +-
 .../flyout_list_manage_drilldowns/index.ts    |  0
 .../form_drilldown_wizard.story.tsx           |  2 +-
 .../form_drilldown_wizard.test.tsx            |  0
 .../form_drilldown_wizard.tsx                 |  6 +-
 .../components/form_drilldown_wizard/i18n.ts  |  6 +-
 .../form_drilldown_wizard/index.tsx           |  0
 .../public/drilldowns/components/index.ts}    |  8 +--
 .../components/list_manage_drilldowns/i18n.ts | 21 ++++---
 .../list_manage_drilldowns/index.tsx          |  0
 .../list_manage_drilldowns.story.tsx          |  0
 .../list_manage_drilldowns.test.tsx           |  0
 .../list_manage_drilldowns.tsx                |  0
 .../public/drilldowns/index.ts                |  1 +
 .../ui_actions_enhanced/public/mocks.ts       |  1 +
 .../ui_actions_enhanced/public/plugin.ts      | 13 ++++-
 .../ui_actions_enhanced/scripts/storybook.js  |  5 +-
 55 files changed, 194 insertions(+), 310 deletions(-)
 delete mode 100644 x-pack/plugins/drilldowns/README.md
 delete mode 100644 x-pack/plugins/drilldowns/kibana.json
 delete mode 100644 x-pack/plugins/drilldowns/public/components/flyout_frame/i18n.ts
 delete mode 100644 x-pack/plugins/drilldowns/public/index.ts
 delete mode 100644 x-pack/plugins/drilldowns/public/mocks.ts
 delete mode 100644 x-pack/plugins/drilldowns/public/plugin.ts
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.story.tsx (62%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx (89%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx (86%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/connected_flyout_manage_drilldowns/i18n.ts (61%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/connected_flyout_manage_drilldowns/index.ts (100%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/connected_flyout_manage_drilldowns/test_data.ts (90%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/drilldown_hello_bar/drilldown_hello_bar.story.tsx (93%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/drilldown_hello_bar/drilldown_hello_bar.tsx (100%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/drilldown_hello_bar/i18n.ts (73%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/drilldown_hello_bar/index.tsx (100%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/flyout_drilldown_wizard/flyout_drilldown_wizard.story.tsx (90%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx (98%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/flyout_drilldown_wizard/i18n.ts (62%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/flyout_drilldown_wizard/index.ts (100%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/flyout_frame/flyout_frame.story.tsx (97%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/flyout_frame/flyout_frame.test.tsx (98%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/flyout_frame/flyout_frame.tsx (100%)
 create mode 100644 x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/i18n.ts
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/flyout_frame/index.tsx (100%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/flyout_list_manage_drilldowns/flyout_list_manage_drilldowns.story.tsx (100%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/flyout_list_manage_drilldowns/flyout_list_manage_drilldowns.tsx (100%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/flyout_list_manage_drilldowns/i18n.ts (79%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/flyout_list_manage_drilldowns/index.ts (100%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/form_drilldown_wizard/form_drilldown_wizard.story.tsx (94%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/form_drilldown_wizard/form_drilldown_wizard.test.tsx (100%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/form_drilldown_wizard/form_drilldown_wizard.tsx (94%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/form_drilldown_wizard/i18n.ts (68%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/form_drilldown_wizard/index.tsx (100%)
 rename x-pack/plugins/{drilldowns/scripts/storybook.js => ui_actions_enhanced/public/drilldowns/components/index.ts} (53%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/list_manage_drilldowns/i18n.ts (54%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/list_manage_drilldowns/index.tsx (100%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/list_manage_drilldowns/list_manage_drilldowns.story.tsx (100%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/list_manage_drilldowns/list_manage_drilldowns.test.tsx (100%)
 rename x-pack/plugins/{drilldowns/public => ui_actions_enhanced/public/drilldowns}/components/list_manage_drilldowns/list_manage_drilldowns.tsx (100%)

diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts
index 2f785896da8d5..85bfd4a7a4d26 100644
--- a/src/dev/storybook/aliases.ts
+++ b/src/dev/storybook/aliases.ts
@@ -22,7 +22,6 @@ export const storybookAliases = {
   canvas: 'x-pack/plugins/canvas/scripts/storybook_new.js',
   codeeditor: 'src/plugins/kibana_react/public/code_editor/scripts/storybook.ts',
   dashboard_enhanced: 'x-pack/plugins/dashboard_enhanced/scripts/storybook.js',
-  drilldowns: 'x-pack/plugins/drilldowns/scripts/storybook.js',
   embeddable: 'src/plugins/embeddable/scripts/storybook.js',
   infra: 'x-pack/legacy/plugins/infra/scripts/storybook.js',
   security_solution: 'x-pack/plugins/security_solution/scripts/storybook.js',
diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
index 8ba7be7880a7b..7b66f29cc2726 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
@@ -81,7 +81,7 @@ function renderNotifications(
 
       if (tooltip) {
         badge = (
-          <EuiToolTip position="top" delay="regular" content={tooltip}>
+          <EuiToolTip position="top" delay="regular" content={tooltip} key={notification.id}>
             {badge}
           </EuiToolTip>
         );
diff --git a/x-pack/.i18nrc.json b/x-pack/.i18nrc.json
index 21b2df3ba12f8..278968cb47231 100644
--- a/x-pack/.i18nrc.json
+++ b/x-pack/.i18nrc.json
@@ -13,7 +13,6 @@
     "xpack.crossClusterReplication": "plugins/cross_cluster_replication",
     "xpack.dashboardMode": "legacy/plugins/dashboard_mode",
     "xpack.data": "plugins/data_enhanced",
-    "xpack.drilldowns": "plugins/drilldowns",
     "xpack.embeddableEnhanced": "plugins/embeddable_enhanced",
     "xpack.endpoint": "plugins/endpoint",
     "xpack.features": "plugins/features",
diff --git a/x-pack/plugins/dashboard_enhanced/kibana.json b/x-pack/plugins/dashboard_enhanced/kibana.json
index 37211ea537179..3a95419d2f2fe 100644
--- a/x-pack/plugins/dashboard_enhanced/kibana.json
+++ b/x-pack/plugins/dashboard_enhanced/kibana.json
@@ -3,6 +3,6 @@
   "version": "kibana",
   "server": false,
   "ui": true,
-  "requiredPlugins": ["data", "uiActionsEnhanced", "drilldowns", "embeddable", "dashboard", "share"],
+  "requiredPlugins": ["data", "uiActionsEnhanced", "embeddable", "dashboard", "share"],
   "configPath": ["xpack", "dashboardEnhanced"]
 }
diff --git a/x-pack/plugins/dashboard_enhanced/public/plugin.ts b/x-pack/plugins/dashboard_enhanced/public/plugin.ts
index 413f5a7afe356..854a4964ffe15 100644
--- a/x-pack/plugins/dashboard_enhanced/public/plugin.ts
+++ b/x-pack/plugins/dashboard_enhanced/public/plugin.ts
@@ -10,12 +10,10 @@ import { EmbeddableSetup, EmbeddableStart } from '../../../../src/plugins/embedd
 import { DashboardDrilldownsService } from './services';
 import { DataPublicPluginStart } from '../../../../src/plugins/data/public';
 import { AdvancedUiActionsSetup, AdvancedUiActionsStart } from '../../ui_actions_enhanced/public';
-import { DrilldownsSetup, DrilldownsStart } from '../../drilldowns/public';
 import { DashboardStart } from '../../../../src/plugins/dashboard/public';
 
 export interface SetupDependencies {
   uiActionsEnhanced: AdvancedUiActionsSetup;
-  drilldowns: DrilldownsSetup;
   embeddable: EmbeddableSetup;
   share: SharePluginSetup;
 }
@@ -23,7 +21,6 @@ export interface SetupDependencies {
 export interface StartDependencies {
   uiActionsEnhanced: AdvancedUiActionsStart;
   data: DataPublicPluginStart;
-  drilldowns: DrilldownsStart;
   embeddable: EmbeddableStart;
   share: SharePluginStart;
   dashboard: DashboardStart;
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.test.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.test.tsx
index 5ec1b881317d6..712a46dc32e08 100644
--- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.test.tsx
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.test.tsx
@@ -9,13 +9,13 @@ import {
   OpenFlyoutAddDrilldownParams,
 } from './flyout_create_drilldown';
 import { coreMock } from '../../../../../../../../src/core/public/mocks';
-import { drilldownsPluginMock } from '../../../../../../drilldowns/public/mocks';
 import { ViewMode } from '../../../../../../../../src/plugins/embeddable/public';
 import { TriggerContextMapping } from '../../../../../../../../src/plugins/ui_actions/public';
 import { MockEmbeddable, enhanceEmbeddable } from '../test_helpers';
+import { uiActionsEnhancedPluginMock } from '../../../../../../ui_actions_enhanced/public/mocks';
 
 const overlays = coreMock.createStart().overlays;
-const drilldowns = drilldownsPluginMock.createStartContract();
+const uiActionsEnhanced = uiActionsEnhancedPluginMock.createStartContract();
 
 const actionParams: OpenFlyoutAddDrilldownParams = {
   start: () => ({
@@ -23,7 +23,7 @@ const actionParams: OpenFlyoutAddDrilldownParams = {
       overlays,
     } as any,
     plugins: {
-      drilldowns,
+      uiActionsEnhanced,
     },
     self: {},
   }),
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.tsx
index 326cd551c7f84..4804a700c6cff 100644
--- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.tsx
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.tsx
@@ -16,7 +16,7 @@ import { StartServicesGetter } from '../../../../../../../../src/plugins/kibana_
 export const OPEN_FLYOUT_ADD_DRILLDOWN = 'OPEN_FLYOUT_ADD_DRILLDOWN';
 
 export interface OpenFlyoutAddDrilldownParams {
-  start: StartServicesGetter<Pick<StartDependencies, 'drilldowns'>>;
+  start: StartServicesGetter<Pick<StartDependencies, 'uiActionsEnhanced'>>;
 }
 
 export class FlyoutCreateDrilldownAction implements ActionByType<typeof OPEN_FLYOUT_ADD_DRILLDOWN> {
@@ -62,7 +62,7 @@ export class FlyoutCreateDrilldownAction implements ActionByType<typeof OPEN_FLY
 
     const handle = core.overlays.openFlyout(
       toMountPoint(
-        <plugins.drilldowns.FlyoutManageDrilldowns
+        <plugins.uiActionsEnhanced.FlyoutManageDrilldowns
           onClose={() => handle.close()}
           viewMode={'create'}
           dynamicActionManager={embeddable.enhancements.dynamicActions}
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.test.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.test.tsx
index 309e6cbf53a3d..b9ae45c2853c3 100644
--- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.test.tsx
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.test.tsx
@@ -6,14 +6,12 @@
 
 import { FlyoutEditDrilldownAction, FlyoutEditDrilldownParams } from './flyout_edit_drilldown';
 import { coreMock } from '../../../../../../../../src/core/public/mocks';
-import { drilldownsPluginMock } from '../../../../../../drilldowns/public/mocks';
 import { ViewMode } from '../../../../../../../../src/plugins/embeddable/public';
 import { uiActionsEnhancedPluginMock } from '../../../../../../ui_actions_enhanced/public/mocks';
 import { EnhancedEmbeddable } from '../../../../../../embeddable_enhanced/public';
 import { MockEmbeddable, enhanceEmbeddable } from '../test_helpers';
 
 const overlays = coreMock.createStart().overlays;
-const drilldowns = drilldownsPluginMock.createStartContract();
 const uiActionsPlugin = uiActionsEnhancedPluginMock.createPlugin();
 const uiActions = uiActionsPlugin.doStart();
 
@@ -32,7 +30,7 @@ const actionParams: FlyoutEditDrilldownParams = {
       overlays,
     } as any,
     plugins: {
-      drilldowns,
+      uiActionsEnhanced: uiActions,
     },
     self: {},
   }),
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.tsx
index 5d2a90fdaff08..af1ae67454463 100644
--- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.tsx
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.tsx
@@ -20,7 +20,7 @@ import { StartServicesGetter } from '../../../../../../../../src/plugins/kibana_
 export const OPEN_FLYOUT_EDIT_DRILLDOWN = 'OPEN_FLYOUT_EDIT_DRILLDOWN';
 
 export interface FlyoutEditDrilldownParams {
-  start: StartServicesGetter<Pick<StartDependencies, 'drilldowns'>>;
+  start: StartServicesGetter<Pick<StartDependencies, 'uiActionsEnhanced'>>;
 }
 
 export class FlyoutEditDrilldownAction implements ActionByType<typeof OPEN_FLYOUT_EDIT_DRILLDOWN> {
@@ -58,7 +58,7 @@ export class FlyoutEditDrilldownAction implements ActionByType<typeof OPEN_FLYOU
 
     const handle = core.overlays.openFlyout(
       toMountPoint(
-        <plugins.drilldowns.FlyoutManageDrilldowns
+        <plugins.uiActionsEnhanced.FlyoutManageDrilldowns
           onClose={() => handle.close()}
           viewMode={'manage'}
           dynamicActionManager={embeddable.enhancements.dynamicActions}
diff --git a/x-pack/plugins/drilldowns/README.md b/x-pack/plugins/drilldowns/README.md
deleted file mode 100644
index 701b6082d4985..0000000000000
--- a/x-pack/plugins/drilldowns/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Drilldowns
-
-Provides functionality to navigate between Kibana apps with context information.
diff --git a/x-pack/plugins/drilldowns/kibana.json b/x-pack/plugins/drilldowns/kibana.json
deleted file mode 100644
index 1614f94b488fd..0000000000000
--- a/x-pack/plugins/drilldowns/kibana.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "id": "drilldowns",
-  "version": "kibana",
-  "server": false,
-  "ui": true,
-  "requiredPlugins": ["uiActions", "embeddable", "uiActionsEnhanced"],
-  "configPath": ["xpack", "drilldowns"]
-}
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_frame/i18n.ts b/x-pack/plugins/drilldowns/public/components/flyout_frame/i18n.ts
deleted file mode 100644
index 23af89ebf9bc7..0000000000000
--- a/x-pack/plugins/drilldowns/public/components/flyout_frame/i18n.ts
+++ /dev/null
@@ -1,15 +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';
-
-export const txtClose = i18n.translate('xpack.drilldowns.components.FlyoutFrame.CloseButtonLabel', {
-  defaultMessage: 'Close',
-});
-
-export const txtBack = i18n.translate('xpack.drilldowns.components.FlyoutFrame.BackButtonLabel', {
-  defaultMessage: 'Back',
-});
diff --git a/x-pack/plugins/drilldowns/public/index.ts b/x-pack/plugins/drilldowns/public/index.ts
deleted file mode 100644
index f976356822dce..0000000000000
--- a/x-pack/plugins/drilldowns/public/index.ts
+++ /dev/null
@@ -1,18 +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 { DrilldownsPlugin } from './plugin';
-
-export {
-  SetupContract as DrilldownsSetup,
-  SetupDependencies as DrilldownsSetupDependencies,
-  StartContract as DrilldownsStart,
-  StartDependencies as DrilldownsStartDependencies,
-} from './plugin';
-
-export function plugin() {
-  return new DrilldownsPlugin();
-}
diff --git a/x-pack/plugins/drilldowns/public/mocks.ts b/x-pack/plugins/drilldowns/public/mocks.ts
deleted file mode 100644
index 18816243a3572..0000000000000
--- a/x-pack/plugins/drilldowns/public/mocks.ts
+++ /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 { DrilldownsSetup, DrilldownsStart } from '.';
-
-export type Setup = jest.Mocked<DrilldownsSetup>;
-export type Start = jest.Mocked<DrilldownsStart>;
-
-const createSetupContract = (): Setup => {
-  const setupContract: Setup = {
-    registerDrilldown: jest.fn(),
-  };
-  return setupContract;
-};
-
-const createStartContract = (): Start => {
-  const startContract: Start = {
-    FlyoutManageDrilldowns: jest.fn(),
-  };
-
-  return startContract;
-};
-
-export const drilldownsPluginMock = {
-  createSetupContract,
-  createStartContract,
-};
diff --git a/x-pack/plugins/drilldowns/public/plugin.ts b/x-pack/plugins/drilldowns/public/plugin.ts
deleted file mode 100644
index 2805e2b747934..0000000000000
--- a/x-pack/plugins/drilldowns/public/plugin.ts
+++ /dev/null
@@ -1,48 +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 { CoreStart, CoreSetup, Plugin } from 'src/core/public';
-import { UiActionsSetup, UiActionsStart } from '../../../../src/plugins/ui_actions/public';
-import { AdvancedUiActionsSetup, AdvancedUiActionsStart } from '../../ui_actions_enhanced/public';
-import { createFlyoutManageDrilldowns } from './components/connected_flyout_manage_drilldowns';
-import { Storage } from '../../../../src/plugins/kibana_utils/public';
-
-export interface SetupDependencies {
-  uiActions: UiActionsSetup;
-  uiActionsEnhanced: AdvancedUiActionsSetup;
-}
-
-export interface StartDependencies {
-  uiActions: UiActionsStart;
-  uiActionsEnhanced: AdvancedUiActionsStart;
-}
-
-// eslint-disable-next-line
-export interface SetupContract {}
-
-export interface StartContract {
-  FlyoutManageDrilldowns: ReturnType<typeof createFlyoutManageDrilldowns>;
-}
-
-export class DrilldownsPlugin
-  implements Plugin<SetupContract, StartContract, SetupDependencies, StartDependencies> {
-  public setup(core: CoreSetup, plugins: SetupDependencies): SetupContract {
-    return {};
-  }
-
-  public start(core: CoreStart, plugins: StartDependencies): StartContract {
-    return {
-      FlyoutManageDrilldowns: createFlyoutManageDrilldowns({
-        uiActionsEnhanced: plugins.uiActionsEnhanced,
-        storage: new Storage(localStorage),
-        notifications: core.notifications,
-        docsLink: core.docLinks.links.dashboard.drilldowns,
-      }),
-    };
-  }
-
-  public stop() {}
-}
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 7b887867b43b8..37cdbf5c0d8a9 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -3970,6 +3970,27 @@
     "xpack.uiActionsEnhanced.customizeTimeRangeMenuItem.displayName": "時間範囲のカスタマイズ",
     "xpack.uiActionsEnhanced.components.DiscoverDrilldownConfig.chooseIndexPattern": "対象インデックスパターンを選択",
     "xpack.uiActionsEnhanced.drilldown.goToDiscover": "Discoverに移動（例）",
+    "xpack.uiActionsEnhanced.drilldowns.components.DrilldownHelloBar.helpText": "ドロップダウンを使用すると、パネルを操作するときに、新しい動作を定義できます。複数のオプションを追加するか、既定のフィルタリング動作を上書きできます。",
+    "xpack.uiActionsEnhanced.drilldowns.components.DrilldownHelloBar.hideHelpButtonLabel": "非表示",
+    "xpack.uiActionsEnhanced.drilldowns.components.DrilldownHelloBar.viewDocsLinkLabel": "ドキュメントを表示",
+    "xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.createDrilldownButtonLabel": "ドリルダウンを作成",
+    "xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.createDrilldownTitle": "ドリルダウンを作成",
+    "xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.deleteDrilldownButtonLabel": "ドリルダウンを削除",
+    "xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.editDrilldownButtonLabel": "保存",
+    "xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.editDrilldownTitle": "ドリルダウンを編集",
+    "xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedText": "ドリルダウンを削除しました。",
+    "xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedTitle": "ドリルダウンが削除されました",
+    "xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsCRUDErrorTitle": "ドリルダウンの保存エラー",
+    "xpack.uiActionsEnhanced.drilldowns.components.FlyoutFrame.BackButtonLabel": "戻る",
+    "xpack.uiActionsEnhanced.drilldowns.components.FlyoutFrame.CloseButtonLabel": "閉じる",
+    "xpack.uiActionsEnhanced.drilldowns.components.FlyoutListManageDrilldowns.manageDrilldownsTitle": "ドリルダウンを管理",
+    "xpack.uiActionsEnhanced.drilldowns.components.FormCreateDrilldown.drilldownAction": "アクション",
+    "xpack.uiActionsEnhanced.drilldowns.components.FormCreateDrilldown.nameOfDrilldown": "名前",
+    "xpack.uiActionsEnhanced.drilldowns.components.FormCreateDrilldown.untitledDrilldown": "無題のドリルダウン",
+    "xpack.uiActionsEnhanced.drilldowns.components.ListManageDrilldowns.createDrilldownButtonLabel": "新規作成...",
+    "xpack.uiActionsEnhanced.drilldowns.components.ListManageDrilldowns.deleteDrilldownsButtonLabel": "削除（{count}）",
+    "xpack.uiActionsEnhanced.drilldowns.components.ListManageDrilldowns.editDrilldownButtonLabel": "編集",
+    "xpack.uiActionsEnhanced.drilldowns.components.ListManageDrilldowns.selectThisDrilldownCheckboxLabel": "このドリルダウンを選択",
     "xpack.alerts.alertNavigationRegistry.get.missingNavigationError": "「{consumer}」内のアラートタイプ「{alertType}」のナビゲーションは登録されていません。",
     "xpack.alerts.alertNavigationRegistry.register.duplicateDefaultError": "「{consumer}」内のデフォルトナビゲーションは既に登録されています。",
     "xpack.alerts.alertNavigationRegistry.register.duplicateNavigationError": "「{consumer}」内のアラートタイプ「{alertType}」のナビゲーションは既に登録されています。",
@@ -6122,27 +6143,6 @@
     "xpack.data.kueryAutocomplete.orOperatorDescription.oneOrMoreArgumentsText": "1つ以上の引数",
     "xpack.data.query.queryBar.cancelLongQuery": "キャンセル",
     "xpack.data.query.queryBar.runBeyond": "タイムアウトを越えて実行",
-    "xpack.drilldowns.components.DrilldownHelloBar.helpText": "ドロップダウンを使用すると、パネルを操作するときに、新しい動作を定義できます。複数のオプションを追加するか、既定のフィルタリング動作を上書きできます。",
-    "xpack.drilldowns.components.DrilldownHelloBar.hideHelpButtonLabel": "非表示",
-    "xpack.drilldowns.components.DrilldownHelloBar.viewDocsLinkLabel": "ドキュメントを表示",
-    "xpack.drilldowns.components.flyoutDrilldownWizard.createDrilldownButtonLabel": "ドリルダウンを作成",
-    "xpack.drilldowns.components.flyoutDrilldownWizard.createDrilldownTitle": "ドリルダウンを作成",
-    "xpack.drilldowns.components.flyoutDrilldownWizard.deleteDrilldownButtonLabel": "ドリルダウンを削除",
-    "xpack.drilldowns.components.flyoutDrilldownWizard.editDrilldownButtonLabel": "保存",
-    "xpack.drilldowns.components.flyoutDrilldownWizard.editDrilldownTitle": "ドリルダウンを編集",
-    "xpack.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedText": "ドリルダウンを削除しました。",
-    "xpack.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedTitle": "ドリルダウンが削除されました",
-    "xpack.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsCRUDErrorTitle": "ドリルダウンの保存エラー",
-    "xpack.drilldowns.components.FlyoutFrame.BackButtonLabel": "戻る",
-    "xpack.drilldowns.components.FlyoutFrame.CloseButtonLabel": "閉じる",
-    "xpack.drilldowns.components.FlyoutListManageDrilldowns.manageDrilldownsTitle": "ドリルダウンを管理",
-    "xpack.drilldowns.components.FormCreateDrilldown.drilldownAction": "アクション",
-    "xpack.drilldowns.components.FormCreateDrilldown.nameOfDrilldown": "名前",
-    "xpack.drilldowns.components.FormCreateDrilldown.untitledDrilldown": "無題のドリルダウン",
-    "xpack.drilldowns.components.ListManageDrilldowns.createDrilldownButtonLabel": "新規作成...",
-    "xpack.drilldowns.components.ListManageDrilldowns.deleteDrilldownsButtonLabel": "削除（{count}）",
-    "xpack.drilldowns.components.ListManageDrilldowns.editDrilldownButtonLabel": "編集",
-    "xpack.drilldowns.components.ListManageDrilldowns.selectThisDrilldownCheckboxLabel": "このドリルダウンを選択",
     "xpack.features.advancedSettingsFeatureName": "高度な設定",
     "xpack.features.dashboardFeatureName": "ダッシュボード",
     "xpack.features.devToolsFeatureName": "開発ツール",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index e821c4fb22899..2dfa0d40b9a8a 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -3973,6 +3973,27 @@
     "xpack.uiActionsEnhanced.customizeTimeRangeMenuItem.displayName": "定制时间范围",
     "xpack.uiActionsEnhanced.components.DiscoverDrilldownConfig.chooseIndexPattern": "选择目标索引模式",
     "xpack.uiActionsEnhanced.drilldown.goToDiscover": "前往 Discover（示例）",
+    "xpack.uiActionsEnhanced.drilldowns.components.DrilldownHelloBar.helpText": "向下钻取可用于定义与面板交互时的新行为。可以添加多个选项或仅覆盖默认筛选行为。",
+    "xpack.uiActionsEnhanced.drilldowns.components.DrilldownHelloBar.hideHelpButtonLabel": "隐藏",
+    "xpack.uiActionsEnhanced.drilldowns.components.DrilldownHelloBar.viewDocsLinkLabel": "查看文档",
+    "xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.createDrilldownButtonLabel": "创建向下钻取",
+    "xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.createDrilldownTitle": "创建向下钻取",
+    "xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.deleteDrilldownButtonLabel": "删除向下钻取",
+    "xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.editDrilldownButtonLabel": "保存",
+    "xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.editDrilldownTitle": "编辑向下钻取",
+    "xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedText": "您已删除向下钻取。",
+    "xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedTitle": "向下钻取已删除",
+    "xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsCRUDErrorTitle": "保存向下钻取时出错",
+    "xpack.uiActionsEnhanced.drilldowns.components.FlyoutFrame.BackButtonLabel": "上一步",
+    "xpack.uiActionsEnhanced.drilldowns.components.FlyoutFrame.CloseButtonLabel": "关闭",
+    "xpack.uiActionsEnhanced.drilldowns.components.FlyoutListManageDrilldowns.manageDrilldownsTitle": "管理向下钻取",
+    "xpack.uiActionsEnhanced.drilldowns.components.FormCreateDrilldown.drilldownAction": "操作",
+    "xpack.uiActionsEnhanced.drilldowns.components.FormCreateDrilldown.nameOfDrilldown": "名称",
+    "xpack.uiActionsEnhanced.drilldowns.components.FormCreateDrilldown.untitledDrilldown": "未命名向下钻取",
+    "xpack.uiActionsEnhanced.drilldowns.components.ListManageDrilldowns.createDrilldownButtonLabel": "新建",
+    "xpack.uiActionsEnhanced.drilldowns.components.ListManageDrilldowns.deleteDrilldownsButtonLabel": "删除 ({count})",
+    "xpack.uiActionsEnhanced.drilldowns.components.ListManageDrilldowns.editDrilldownButtonLabel": "编辑",
+    "xpack.uiActionsEnhanced.drilldowns.components.ListManageDrilldowns.selectThisDrilldownCheckboxLabel": "选择此向下钻取",
     "xpack.alerts.alertNavigationRegistry.get.missingNavigationError": "在“{consumer}”内针对告警类型“{alertType}”的导航未注册。",
     "xpack.alerts.alertNavigationRegistry.register.duplicateDefaultError": "“{consumer}”内的默认导航已注册。",
     "xpack.alerts.alertNavigationRegistry.register.duplicateNavigationError": "在“{consumer}”内针对告警类型“{alertType}”的导航已注册。",
@@ -6125,27 +6146,6 @@
     "xpack.data.kueryAutocomplete.orOperatorDescription.oneOrMoreArgumentsText": "一个或多个参数",
     "xpack.data.query.queryBar.cancelLongQuery": "取消",
     "xpack.data.query.queryBar.runBeyond": "运行超时",
-    "xpack.drilldowns.components.DrilldownHelloBar.helpText": "向下钻取可用于定义与面板交互时的新行为。可以添加多个选项或仅覆盖默认筛选行为。",
-    "xpack.drilldowns.components.DrilldownHelloBar.hideHelpButtonLabel": "隐藏",
-    "xpack.drilldowns.components.DrilldownHelloBar.viewDocsLinkLabel": "查看文档",
-    "xpack.drilldowns.components.flyoutDrilldownWizard.createDrilldownButtonLabel": "创建向下钻取",
-    "xpack.drilldowns.components.flyoutDrilldownWizard.createDrilldownTitle": "创建向下钻取",
-    "xpack.drilldowns.components.flyoutDrilldownWizard.deleteDrilldownButtonLabel": "删除向下钻取",
-    "xpack.drilldowns.components.flyoutDrilldownWizard.editDrilldownButtonLabel": "保存",
-    "xpack.drilldowns.components.flyoutDrilldownWizard.editDrilldownTitle": "编辑向下钻取",
-    "xpack.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedText": "您已删除向下钻取。",
-    "xpack.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedTitle": "向下钻取已删除",
-    "xpack.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsCRUDErrorTitle": "保存向下钻取时出错",
-    "xpack.drilldowns.components.FlyoutFrame.BackButtonLabel": "上一步",
-    "xpack.drilldowns.components.FlyoutFrame.CloseButtonLabel": "关闭",
-    "xpack.drilldowns.components.FlyoutListManageDrilldowns.manageDrilldownsTitle": "管理向下钻取",
-    "xpack.drilldowns.components.FormCreateDrilldown.drilldownAction": "操作",
-    "xpack.drilldowns.components.FormCreateDrilldown.nameOfDrilldown": "名称",
-    "xpack.drilldowns.components.FormCreateDrilldown.untitledDrilldown": "未命名向下钻取",
-    "xpack.drilldowns.components.ListManageDrilldowns.createDrilldownButtonLabel": "新建",
-    "xpack.drilldowns.components.ListManageDrilldowns.deleteDrilldownsButtonLabel": "删除 ({count})",
-    "xpack.drilldowns.components.ListManageDrilldowns.editDrilldownButtonLabel": "编辑",
-    "xpack.drilldowns.components.ListManageDrilldowns.selectThisDrilldownCheckboxLabel": "选择此向下钻取",
     "xpack.features.advancedSettingsFeatureName": "高级设置",
     "xpack.features.dashboardFeatureName": "仪表板",
     "xpack.features.devToolsFeatureName": "开发工具",
diff --git a/x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.story.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.story.tsx
similarity index 62%
rename from x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.story.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.story.tsx
index 5fde4fc79e433..cd8452ff74ab4 100644
--- a/x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.story.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.story.tsx
@@ -12,28 +12,23 @@ import {
   dashboardFactory,
   urlFactory,
   // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-} from '../../../../ui_actions_enhanced/public/components/action_wizard/test_data';
-import { Storage } from '../../../../../../src/plugins/kibana_utils/public';
-import { StubBrowserStorage } from '../../../../../../src/test_utils/public/stub_browser_storage';
+} from '../../../components/action_wizard/test_data';
+import { Storage } from '../../../../../../../src/plugins/kibana_utils/public';
+import { StubBrowserStorage } from '../../../../../../../src/test_utils/public/stub_browser_storage';
 import { mockDynamicActionManager } from './test_data';
+import { ActionFactory } from '../../../dynamic_actions';
 
 const FlyoutManageDrilldowns = createFlyoutManageDrilldowns({
-  uiActionsEnhanced: {
-    getActionFactories() {
-      return [dashboardFactory, urlFactory];
+  actionFactories: [dashboardFactory as ActionFactory, urlFactory as ActionFactory],
+  storage: new Storage(new StubBrowserStorage()),
+  toastService: {
+    addError: (...args: any[]) => {
+      alert(JSON.stringify(args));
+    },
+    addSuccess: (...args: any[]) => {
+      alert(JSON.stringify(args));
     },
   } as any,
-  storage: new Storage(new StubBrowserStorage()),
-  notifications: {
-    toasts: {
-      addError: (...args: any[]) => {
-        alert(JSON.stringify(args));
-      },
-      addSuccess: (...args: any[]) => {
-        alert(JSON.stringify(args));
-      },
-    } as any,
-  },
 });
 
 storiesOf('components/FlyoutManageDrilldowns', module).add('default', () => (
diff --git a/x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx
similarity index 89%
rename from x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx
index 32cbec795d092..161caa9782f02 100644
--- a/x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx
@@ -8,29 +8,23 @@ import React from 'react';
 import { cleanup, fireEvent, render, wait } from '@testing-library/react/pure';
 import '@testing-library/jest-dom/extend-expect';
 import { createFlyoutManageDrilldowns } from './connected_flyout_manage_drilldowns';
-import {
-  dashboardFactory,
-  urlFactory,
-} from '../../../../ui_actions_enhanced/public/components/action_wizard/test_data';
-import { StubBrowserStorage } from '../../../../../../src/test_utils/public/stub_browser_storage';
-import { Storage } from '../../../../../../src/plugins/kibana_utils/public';
+import { dashboardFactory, urlFactory } from '../../../components/action_wizard/test_data';
+import { StubBrowserStorage } from '../../../../../../../src/test_utils/public/stub_browser_storage';
+import { Storage } from '../../../../../../../src/plugins/kibana_utils/public';
 import { mockDynamicActionManager } from './test_data';
 import { TEST_SUBJ_DRILLDOWN_ITEM } from '../list_manage_drilldowns';
 import { WELCOME_MESSAGE_TEST_SUBJ } from '../drilldown_hello_bar';
-import { coreMock } from '../../../../../../src/core/public/mocks';
+import { coreMock } from '../../../../../../../src/core/public/mocks';
 import { NotificationsStart } from 'kibana/public';
 import { toastDrilldownsCRUDError } from './i18n';
+import { ActionFactory } from '../../../dynamic_actions';
 
 const storage = new Storage(new StubBrowserStorage());
-const notifications = coreMock.createStart().notifications;
+const toasts = coreMock.createStart().notifications.toasts;
 const FlyoutManageDrilldowns = createFlyoutManageDrilldowns({
-  uiActionsEnhanced: {
-    getActionFactories() {
-      return [dashboardFactory, urlFactory];
-    },
-  } as any,
-  storage,
-  notifications,
+  actionFactories: [dashboardFactory as ActionFactory, urlFactory as ActionFactory],
+  storage: new Storage(new StubBrowserStorage()),
+  toastService: toasts,
 });
 
 // https://github.com/elastic/kibana/issues/59469
@@ -38,8 +32,8 @@ afterEach(cleanup);
 
 beforeEach(() => {
   storage.clear();
-  (notifications.toasts as jest.Mocked<NotificationsStart['toasts']>).addSuccess.mockClear();
-  (notifications.toasts as jest.Mocked<NotificationsStart['toasts']>).addError.mockClear();
+  (toasts as jest.Mocked<NotificationsStart['toasts']>).addSuccess.mockClear();
+  (toasts as jest.Mocked<NotificationsStart['toasts']>).addError.mockClear();
 });
 
 test('Allows to manage drilldowns', async () => {
@@ -163,7 +157,7 @@ test('Create only mode', async () => {
   });
   fireEvent.click(screen.getAllByText(/Create Drilldown/i)[1]);
 
-  await wait(() => expect(notifications.toasts.addSuccess).toBeCalled());
+  await wait(() => expect(toasts.addSuccess).toBeCalled());
   expect(onClose).toBeCalled();
   expect(await mockDynamicActionManager.state.get().events.length).toBe(1);
 });
@@ -194,7 +188,7 @@ test('After switching between action factories state is restored', async () => {
   expect(screen.getByLabelText(/name/i)).toHaveValue('test');
 
   fireEvent.click(screen.getAllByText(/Create Drilldown/i)[1]);
-  await wait(() => expect(notifications.toasts.addSuccess).toBeCalled());
+  await wait(() => expect(toasts.addSuccess).toBeCalled());
   expect(await (mockDynamicActionManager.state.get().events[0].action.config as any).url).toBe(
     'https://elastic.co'
   );
@@ -220,7 +214,7 @@ test("Error when can't save drilldown changes", async () => {
   });
   fireEvent.click(screen.getAllByText(/Create Drilldown/i)[1]);
   await wait(() =>
-    expect(notifications.toasts.addError).toBeCalledWith(error, { title: toastDrilldownsCRUDError })
+    expect(toasts.addError).toBeCalledWith(error, { title: toastDrilldownsCRUDError })
   );
 });
 
diff --git a/x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx
similarity index 86%
rename from x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx
index e05547741871e..fbc72d0470635 100644
--- a/x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx
@@ -5,24 +5,17 @@
  */
 
 import React, { useEffect, useState } from 'react';
+import { ToastsStart } from 'kibana/public';
 import useMountedState from 'react-use/lib/useMountedState';
-import {
-  UiActionsEnhancedActionFactory as ActionFactory,
-  AdvancedUiActionsStart,
-  UiActionsEnhancedDynamicActionManager as DynamicActionManager,
-  UiActionsEnhancedSerializedAction,
-  UiActionsEnhancedSerializedEvent,
-} from '../../../../ui_actions_enhanced/public';
-import { NotificationsStart } from '../../../../../../src/core/public';
 import { DrilldownWizardConfig, FlyoutDrilldownWizard } from '../flyout_drilldown_wizard';
 import { FlyoutListManageDrilldowns } from '../flyout_list_manage_drilldowns';
-import { IStorageWrapper } from '../../../../../../src/plugins/kibana_utils/public';
+import { IStorageWrapper } from '../../../../../../../src/plugins/kibana_utils/public';
 import {
   VALUE_CLICK_TRIGGER,
   SELECT_RANGE_TRIGGER,
   TriggerContextMapping,
-} from '../../../../../../src/plugins/ui_actions/public';
-import { useContainerState } from '../../../../../../src/plugins/kibana_utils/public';
+} from '../../../../../../../src/plugins/ui_actions/public';
+import { useContainerState } from '../../../../../../../src/plugins/kibana_utils/public';
 import { DrilldownListItem } from '../list_manage_drilldowns';
 import {
   toastDrilldownCreated,
@@ -31,6 +24,12 @@ import {
   toastDrilldownsCRUDError,
   toastDrilldownsDeleted,
 } from './i18n';
+import {
+  ActionFactory,
+  DynamicActionManager,
+  SerializedAction,
+  SerializedEvent,
+} from '../../../dynamic_actions';
 
 interface ConnectedFlyoutManageDrilldownsProps {
   dynamicActionManager: DynamicActionManager;
@@ -48,19 +47,16 @@ enum Routes {
 }
 
 export function createFlyoutManageDrilldowns({
-  uiActionsEnhanced,
+  actionFactories: allActionFactories,
   storage,
-  notifications,
+  toastService,
   docsLink,
 }: {
-  uiActionsEnhanced: AdvancedUiActionsStart;
+  actionFactories: ActionFactory[];
   storage: IStorageWrapper;
-  notifications: NotificationsStart;
+  toastService: ToastsStart;
   docsLink?: string;
 }) {
-  // fine to assume this is static,
-  // because all action factories should be registered in setup phase
-  const allActionFactories = uiActionsEnhanced.getActionFactories();
   const allActionFactoriesById = allActionFactories.reduce((acc, next) => {
     acc[next.id] = next;
     return acc;
@@ -98,7 +94,7 @@ export function createFlyoutManageDrilldowns({
       createDrilldown,
       editDrilldown,
       deleteDrilldown,
-    } = useDrilldownsStateManager(props.dynamicActionManager, notifications);
+    } = useDrilldownsStateManager(props.dynamicActionManager, toastService);
 
     /**
      * isCompatible promise is not yet resolved.
@@ -130,9 +126,7 @@ export function createFlyoutManageDrilldowns({
     /**
      * Maps drilldown to list item view model
      */
-    function mapToDrilldownToDrilldownListItem(
-      drilldown: UiActionsEnhancedSerializedEvent
-    ): DrilldownListItem {
+    function mapToDrilldownToDrilldownListItem(drilldown: SerializedEvent): DrilldownListItem {
       const actionFactory = allActionFactoriesById[drilldown.action.factoryId];
       return {
         id: drilldown.eventId,
@@ -260,10 +254,7 @@ function useWelcomeMessage(storage: IStorageWrapper): [boolean, () => void] {
   ];
 }
 
-function useDrilldownsStateManager(
-  actionManager: DynamicActionManager,
-  notifications: NotificationsStart
-) {
+function useDrilldownsStateManager(actionManager: DynamicActionManager, toastService: ToastsStart) {
   const { events: drilldowns } = useContainerState(actionManager.state);
   const [isLoading, setIsLoading] = useState(false);
   const isMounted = useMountedState();
@@ -273,7 +264,7 @@ function useDrilldownsStateManager(
     try {
       await op();
     } catch (e) {
-      notifications.toasts.addError(e, {
+      toastService.addError(e, {
         title: toastDrilldownsCRUDError,
       });
       if (!isMounted) return;
@@ -283,12 +274,12 @@ function useDrilldownsStateManager(
   }
 
   async function createDrilldown(
-    action: UiActionsEnhancedSerializedAction,
+    action: SerializedAction,
     selectedTriggers: Array<keyof TriggerContextMapping>
   ) {
     await run(async () => {
       await actionManager.createEvent(action, selectedTriggers);
-      notifications.toasts.addSuccess({
+      toastService.addSuccess({
         title: toastDrilldownCreated.title(action.name),
         text: toastDrilldownCreated.text,
       });
@@ -297,12 +288,12 @@ function useDrilldownsStateManager(
 
   async function editDrilldown(
     drilldownId: string,
-    action: UiActionsEnhancedSerializedAction,
+    action: SerializedAction,
     selectedTriggers: Array<keyof TriggerContextMapping>
   ) {
     await run(async () => {
       await actionManager.updateEvent(drilldownId, action, selectedTriggers);
-      notifications.toasts.addSuccess({
+      toastService.addSuccess({
         title: toastDrilldownEdited.title(action.name),
         text: toastDrilldownEdited.text,
       });
@@ -313,7 +304,7 @@ function useDrilldownsStateManager(
     await run(async () => {
       drilldownIds = Array.isArray(drilldownIds) ? drilldownIds : [drilldownIds];
       await actionManager.deleteEvents(drilldownIds);
-      notifications.toasts.addSuccess(
+      toastService.addSuccess(
         drilldownIds.length === 1
           ? {
               title: toastDrilldownDeleted.title,
diff --git a/x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/i18n.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/i18n.ts
similarity index 61%
rename from x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/i18n.ts
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/i18n.ts
index 851439eccbe7e..e75ee2634aa43 100644
--- a/x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/i18n.ts
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/i18n.ts
@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 export const toastDrilldownCreated = {
   title: (drilldownName: string) =>
     i18n.translate(
-      'xpack.drilldowns.components.flyoutDrilldownWizard.toast.drilldownCreatedTitle',
+      'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownCreatedTitle',
       {
         defaultMessage: 'Drilldown "{drilldownName}" created',
         values: {
@@ -18,7 +18,7 @@ export const toastDrilldownCreated = {
       }
     ),
   text: i18n.translate(
-    'xpack.drilldowns.components.flyoutDrilldownWizard.toast.drilldownCreatedText',
+    'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownCreatedText',
     {
       // TODO: remove `Save your dashboard before testing.` part
       // when drilldowns are used not only in dashboard
@@ -30,14 +30,17 @@ export const toastDrilldownCreated = {
 
 export const toastDrilldownEdited = {
   title: (drilldownName: string) =>
-    i18n.translate('xpack.drilldowns.components.flyoutDrilldownWizard.toast.drilldownEditedTitle', {
-      defaultMessage: 'Drilldown "{drilldownName}" updated',
-      values: {
-        drilldownName,
-      },
-    }),
+    i18n.translate(
+      'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownEditedTitle',
+      {
+        defaultMessage: 'Drilldown "{drilldownName}" updated',
+        values: {
+          drilldownName,
+        },
+      }
+    ),
   text: i18n.translate(
-    'xpack.drilldowns.components.flyoutDrilldownWizard.toast.drilldownEditedText',
+    'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownEditedText',
     {
       defaultMessage: 'Save your dashboard before testing.',
     }
@@ -46,13 +49,13 @@ export const toastDrilldownEdited = {
 
 export const toastDrilldownDeleted = {
   title: i18n.translate(
-    'xpack.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedTitle',
+    'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedTitle',
     {
       defaultMessage: 'Drilldown deleted',
     }
   ),
   text: i18n.translate(
-    'xpack.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedText',
+    'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedText',
     {
       defaultMessage: 'Save your dashboard before testing.',
     }
@@ -62,14 +65,14 @@ export const toastDrilldownDeleted = {
 export const toastDrilldownsDeleted = {
   title: (n: number) =>
     i18n.translate(
-      'xpack.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsDeletedTitle',
+      'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsDeletedTitle',
       {
         defaultMessage: '{n} drilldowns deleted',
         values: { n },
       }
     ),
   text: i18n.translate(
-    'xpack.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsDeletedText',
+    'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsDeletedText',
     {
       defaultMessage: 'Save your dashboard before testing.',
     }
@@ -77,7 +80,7 @@ export const toastDrilldownsDeleted = {
 };
 
 export const toastDrilldownsCRUDError = i18n.translate(
-  'xpack.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsCRUDErrorTitle',
+  'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsCRUDErrorTitle',
   {
     defaultMessage: 'Error saving drilldown',
     description: 'Title for generic error toast when persisting drilldown updates failed',
diff --git a/x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/index.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/index.ts
similarity index 100%
rename from x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/index.ts
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/index.ts
diff --git a/x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/test_data.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/test_data.ts
similarity index 90%
rename from x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/test_data.ts
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/test_data.ts
index d585fa0692e8c..58c36e36481b8 100644
--- a/x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/test_data.ts
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/test_data.ts
@@ -9,9 +9,9 @@ import {
   UiActionsEnhancedDynamicActionManager as DynamicActionManager,
   UiActionsEnhancedDynamicActionManagerState as DynamicActionManagerState,
   UiActionsEnhancedSerializedAction,
-} from '../../../../ui_actions_enhanced/public';
-import { TriggerContextMapping } from '../../../../../../src/plugins/ui_actions/public';
-import { createStateContainer } from '../../../../../../src/plugins/kibana_utils/common';
+} from '../../../index';
+import { TriggerContextMapping } from '../../../../../../../src/plugins/ui_actions/public';
+import { createStateContainer } from '../../../../../../../src/plugins/kibana_utils/common';
 
 class MockDynamicActionManager implements PublicMethodsOf<DynamicActionManager> {
   public readonly state = createStateContainer<DynamicActionManagerState>({
diff --git a/x-pack/plugins/drilldowns/public/components/drilldown_hello_bar/drilldown_hello_bar.story.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/drilldown_hello_bar/drilldown_hello_bar.story.tsx
similarity index 93%
rename from x-pack/plugins/drilldowns/public/components/drilldown_hello_bar/drilldown_hello_bar.story.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/drilldown_hello_bar/drilldown_hello_bar.story.tsx
index c4a4630397f1c..df168275fceb3 100644
--- a/x-pack/plugins/drilldowns/public/components/drilldown_hello_bar/drilldown_hello_bar.story.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/drilldown_hello_bar/drilldown_hello_bar.story.tsx
@@ -6,7 +6,7 @@
 
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
-import { DrilldownHelloBar } from '.';
+import { DrilldownHelloBar } from './index';
 
 const Demo = () => {
   const [show, setShow] = React.useState(true);
diff --git a/x-pack/plugins/drilldowns/public/components/drilldown_hello_bar/drilldown_hello_bar.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/drilldown_hello_bar/drilldown_hello_bar.tsx
similarity index 100%
rename from x-pack/plugins/drilldowns/public/components/drilldown_hello_bar/drilldown_hello_bar.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/drilldown_hello_bar/drilldown_hello_bar.tsx
diff --git a/x-pack/plugins/drilldowns/public/components/drilldown_hello_bar/i18n.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/drilldown_hello_bar/i18n.ts
similarity index 73%
rename from x-pack/plugins/drilldowns/public/components/drilldown_hello_bar/i18n.ts
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/drilldown_hello_bar/i18n.ts
index 622376c5b40ad..e857366690c45 100644
--- a/x-pack/plugins/drilldowns/public/components/drilldown_hello_bar/i18n.ts
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/drilldown_hello_bar/i18n.ts
@@ -7,7 +7,7 @@
 import { i18n } from '@kbn/i18n';
 
 export const txtHelpText = i18n.translate(
-  'xpack.drilldowns.components.DrilldownHelloBar.helpText',
+  'xpack.uiActionsEnhanced.drilldowns.components.DrilldownHelloBar.helpText',
   {
     defaultMessage:
       'Drilldowns enable you to define new behaviors for interacting with panels. You can add multiple actions and override the default filter.',
@@ -15,14 +15,14 @@ export const txtHelpText = i18n.translate(
 );
 
 export const txtViewDocsLinkLabel = i18n.translate(
-  'xpack.drilldowns.components.DrilldownHelloBar.viewDocsLinkLabel',
+  'xpack.uiActionsEnhanced.drilldowns.components.DrilldownHelloBar.viewDocsLinkLabel',
   {
     defaultMessage: 'View docs',
   }
 );
 
 export const txtHideHelpButtonLabel = i18n.translate(
-  'xpack.drilldowns.components.DrilldownHelloBar.hideHelpButtonLabel',
+  'xpack.uiActionsEnhanced.drilldowns.components.DrilldownHelloBar.hideHelpButtonLabel',
   {
     defaultMessage: 'Hide',
   }
diff --git a/x-pack/plugins/drilldowns/public/components/drilldown_hello_bar/index.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/drilldown_hello_bar/index.tsx
similarity index 100%
rename from x-pack/plugins/drilldowns/public/components/drilldown_hello_bar/index.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/drilldown_hello_bar/index.tsx
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.story.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/flyout_drilldown_wizard.story.tsx
similarity index 90%
rename from x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.story.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/flyout_drilldown_wizard.story.tsx
index be048bf920602..2069a83ab8ba0 100644
--- a/x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.story.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/flyout_drilldown_wizard.story.tsx
@@ -9,13 +9,13 @@
 import * as React from 'react';
 import { EuiFlyout } from '@elastic/eui';
 import { storiesOf } from '@storybook/react';
-import { FlyoutDrilldownWizard } from '.';
+import { FlyoutDrilldownWizard } from './index';
 import {
   dashboardFactory,
   urlFactory,
   // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-} from '../../../../ui_actions_enhanced/public/components/action_wizard/test_data';
-import { UiActionsEnhancedActionFactory as ActionFactory } from '../../../../ui_actions_enhanced/public/';
+} from '../../../components/action_wizard/test_data';
+import { ActionFactory } from '../../../dynamic_actions';
 
 storiesOf('components/FlyoutDrilldownWizard', module)
   .add('default', () => {
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx
similarity index 98%
rename from x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx
index 8994aac4123e1..58cf2501280c7 100644
--- a/x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx
@@ -16,7 +16,7 @@ import {
   txtEditDrilldownTitle,
 } from './i18n';
 import { DrilldownHelloBar } from '../drilldown_hello_bar';
-import { UiActionsEnhancedActionFactory as ActionFactory } from '../../../../ui_actions_enhanced/public';
+import { ActionFactory } from '../../../dynamic_actions';
 
 export interface DrilldownWizardConfig<ActionConfig extends object = object> {
   name: string;
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/i18n.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/i18n.ts
similarity index 62%
rename from x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/i18n.ts
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/i18n.ts
index a4a2754a444ab..86485dd7b8bbe 100644
--- a/x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/i18n.ts
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/i18n.ts
@@ -7,35 +7,35 @@
 import { i18n } from '@kbn/i18n';
 
 export const txtCreateDrilldownTitle = i18n.translate(
-  'xpack.drilldowns.components.flyoutDrilldownWizard.createDrilldownTitle',
+  'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.createDrilldownTitle',
   {
     defaultMessage: 'Create Drilldown',
   }
 );
 
 export const txtEditDrilldownTitle = i18n.translate(
-  'xpack.drilldowns.components.flyoutDrilldownWizard.editDrilldownTitle',
+  'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.editDrilldownTitle',
   {
     defaultMessage: 'Edit Drilldown',
   }
 );
 
 export const txtCreateDrilldownButtonLabel = i18n.translate(
-  'xpack.drilldowns.components.flyoutDrilldownWizard.createDrilldownButtonLabel',
+  'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.createDrilldownButtonLabel',
   {
     defaultMessage: 'Create drilldown',
   }
 );
 
 export const txtEditDrilldownButtonLabel = i18n.translate(
-  'xpack.drilldowns.components.flyoutDrilldownWizard.editDrilldownButtonLabel',
+  'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.editDrilldownButtonLabel',
   {
     defaultMessage: 'Save',
   }
 );
 
 export const txtDeleteDrilldownButtonLabel = i18n.translate(
-  'xpack.drilldowns.components.flyoutDrilldownWizard.deleteDrilldownButtonLabel',
+  'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.deleteDrilldownButtonLabel',
   {
     defaultMessage: 'Delete drilldown',
   }
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/index.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/index.ts
similarity index 100%
rename from x-pack/plugins/drilldowns/public/components/flyout_drilldown_wizard/index.ts
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/index.ts
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_frame/flyout_frame.story.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.story.tsx
similarity index 97%
rename from x-pack/plugins/drilldowns/public/components/flyout_frame/flyout_frame.story.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.story.tsx
index 7ef0bc5a8bee4..d47c34c4c7ec9 100644
--- a/x-pack/plugins/drilldowns/public/components/flyout_frame/flyout_frame.story.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.story.tsx
@@ -9,7 +9,7 @@
 import * as React from 'react';
 import { EuiFlyout, EuiButton } from '@elastic/eui';
 import { storiesOf } from '@storybook/react';
-import { FlyoutFrame } from '.';
+import { FlyoutFrame } from './index';
 
 storiesOf('components/FlyoutFrame', module)
   .add('default', () => {
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_frame/flyout_frame.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.test.tsx
similarity index 98%
rename from x-pack/plugins/drilldowns/public/components/flyout_frame/flyout_frame.test.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.test.tsx
index 0a3989487745f..cdbf36d81de33 100644
--- a/x-pack/plugins/drilldowns/public/components/flyout_frame/flyout_frame.test.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.test.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { render as renderTestingLibrary, fireEvent, cleanup } from '@testing-library/react/pure';
-import { FlyoutFrame } from '.';
+import { FlyoutFrame } from './index';
 
 afterEach(cleanup);
 
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_frame/flyout_frame.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.tsx
similarity index 100%
rename from x-pack/plugins/drilldowns/public/components/flyout_frame/flyout_frame.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.tsx
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/i18n.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/i18n.ts
new file mode 100644
index 0000000000000..cf0cd95e25c79
--- /dev/null
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/i18n.ts
@@ -0,0 +1,21 @@
+/*
+ * 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';
+
+export const txtClose = i18n.translate(
+  'xpack.uiActionsEnhanced.drilldowns.components.FlyoutFrame.CloseButtonLabel',
+  {
+    defaultMessage: 'Close',
+  }
+);
+
+export const txtBack = i18n.translate(
+  'xpack.uiActionsEnhanced.drilldowns.components.FlyoutFrame.BackButtonLabel',
+  {
+    defaultMessage: 'Back',
+  }
+);
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_frame/index.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/index.tsx
similarity index 100%
rename from x-pack/plugins/drilldowns/public/components/flyout_frame/index.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/index.tsx
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_list_manage_drilldowns/flyout_list_manage_drilldowns.story.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_list_manage_drilldowns/flyout_list_manage_drilldowns.story.tsx
similarity index 100%
rename from x-pack/plugins/drilldowns/public/components/flyout_list_manage_drilldowns/flyout_list_manage_drilldowns.story.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_list_manage_drilldowns/flyout_list_manage_drilldowns.story.tsx
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_list_manage_drilldowns/flyout_list_manage_drilldowns.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_list_manage_drilldowns/flyout_list_manage_drilldowns.tsx
similarity index 100%
rename from x-pack/plugins/drilldowns/public/components/flyout_list_manage_drilldowns/flyout_list_manage_drilldowns.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_list_manage_drilldowns/flyout_list_manage_drilldowns.tsx
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_list_manage_drilldowns/i18n.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_list_manage_drilldowns/i18n.ts
similarity index 79%
rename from x-pack/plugins/drilldowns/public/components/flyout_list_manage_drilldowns/i18n.ts
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_list_manage_drilldowns/i18n.ts
index 0dd4e37d4dddd..f3aba205c0471 100644
--- a/x-pack/plugins/drilldowns/public/components/flyout_list_manage_drilldowns/i18n.ts
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_list_manage_drilldowns/i18n.ts
@@ -7,7 +7,7 @@
 import { i18n } from '@kbn/i18n';
 
 export const txtManageDrilldowns = i18n.translate(
-  'xpack.drilldowns.components.FlyoutListManageDrilldowns.manageDrilldownsTitle',
+  'xpack.uiActionsEnhanced.drilldowns.components.FlyoutListManageDrilldowns.manageDrilldownsTitle',
   {
     defaultMessage: 'Manage Drilldowns',
   }
diff --git a/x-pack/plugins/drilldowns/public/components/flyout_list_manage_drilldowns/index.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_list_manage_drilldowns/index.ts
similarity index 100%
rename from x-pack/plugins/drilldowns/public/components/flyout_list_manage_drilldowns/index.ts
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_list_manage_drilldowns/index.ts
diff --git a/x-pack/plugins/drilldowns/public/components/form_drilldown_wizard/form_drilldown_wizard.story.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.story.tsx
similarity index 94%
rename from x-pack/plugins/drilldowns/public/components/form_drilldown_wizard/form_drilldown_wizard.story.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.story.tsx
index 2fc35eb6b5298..fe63b0835af9e 100644
--- a/x-pack/plugins/drilldowns/public/components/form_drilldown_wizard/form_drilldown_wizard.story.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.story.tsx
@@ -6,7 +6,7 @@
 
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
-import { FormDrilldownWizard } from '.';
+import { FormDrilldownWizard } from './index';
 
 const DemoEditName: React.FC = () => {
   const [name, setName] = React.useState('');
diff --git a/x-pack/plugins/drilldowns/public/components/form_drilldown_wizard/form_drilldown_wizard.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.test.tsx
similarity index 100%
rename from x-pack/plugins/drilldowns/public/components/form_drilldown_wizard/form_drilldown_wizard.test.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.test.tsx
diff --git a/x-pack/plugins/drilldowns/public/components/form_drilldown_wizard/form_drilldown_wizard.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.tsx
similarity index 94%
rename from x-pack/plugins/drilldowns/public/components/form_drilldown_wizard/form_drilldown_wizard.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.tsx
index 1813851d728db..622ed58e3625d 100644
--- a/x-pack/plugins/drilldowns/public/components/form_drilldown_wizard/form_drilldown_wizard.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.tsx
@@ -7,10 +7,8 @@
 import React from 'react';
 import { EuiFieldText, EuiForm, EuiFormRow, EuiSpacer } from '@elastic/eui';
 import { txtDrilldownAction, txtNameOfDrilldown, txtUntitledDrilldown } from './i18n';
-import {
-  UiActionsEnhancedActionFactory as ActionFactory,
-  ActionWizard,
-} from '../../../../ui_actions_enhanced/public';
+import { ActionFactory } from '../../../dynamic_actions';
+import { ActionWizard } from '../../../components/action_wizard';
 
 const noopFn = () => {};
 
diff --git a/x-pack/plugins/drilldowns/public/components/form_drilldown_wizard/i18n.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/i18n.ts
similarity index 68%
rename from x-pack/plugins/drilldowns/public/components/form_drilldown_wizard/i18n.ts
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/i18n.ts
index e9b19ab0afa97..9636b6e8a74e7 100644
--- a/x-pack/plugins/drilldowns/public/components/form_drilldown_wizard/i18n.ts
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/i18n.ts
@@ -7,21 +7,21 @@
 import { i18n } from '@kbn/i18n';
 
 export const txtNameOfDrilldown = i18n.translate(
-  'xpack.drilldowns.components.FormCreateDrilldown.nameOfDrilldown',
+  'xpack.uiActionsEnhanced.drilldowns.components.FormCreateDrilldown.nameOfDrilldown',
   {
     defaultMessage: 'Name',
   }
 );
 
 export const txtUntitledDrilldown = i18n.translate(
-  'xpack.drilldowns.components.FormCreateDrilldown.untitledDrilldown',
+  'xpack.uiActionsEnhanced.drilldowns.components.FormCreateDrilldown.untitledDrilldown',
   {
     defaultMessage: 'Untitled drilldown',
   }
 );
 
 export const txtDrilldownAction = i18n.translate(
-  'xpack.drilldowns.components.FormCreateDrilldown.drilldownAction',
+  'xpack.uiActionsEnhanced.drilldowns.components.FormCreateDrilldown.drilldownAction',
   {
     defaultMessage: 'Action',
   }
diff --git a/x-pack/plugins/drilldowns/public/components/form_drilldown_wizard/index.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/index.tsx
similarity index 100%
rename from x-pack/plugins/drilldowns/public/components/form_drilldown_wizard/index.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/index.tsx
diff --git a/x-pack/plugins/drilldowns/scripts/storybook.js b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/index.ts
similarity index 53%
rename from x-pack/plugins/drilldowns/scripts/storybook.js
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/index.ts
index 2bfd0eb1a8f19..a6bed0078bfd7 100644
--- a/x-pack/plugins/drilldowns/scripts/storybook.js
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/index.ts
@@ -4,10 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { join } from 'path';
-
-// eslint-disable-next-line
-require('@kbn/storybook').runStorybookCli({
-  name: 'drilldowns',
-  storyGlobs: [join(__dirname, '..', 'public', 'components', '**', '*.story.tsx')],
-});
+export { createFlyoutManageDrilldowns } from './connected_flyout_manage_drilldowns';
diff --git a/x-pack/plugins/drilldowns/public/components/list_manage_drilldowns/i18n.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/i18n.ts
similarity index 54%
rename from x-pack/plugins/drilldowns/public/components/list_manage_drilldowns/i18n.ts
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/i18n.ts
index fbc7c9dcfb4a1..65087b8523cb1 100644
--- a/x-pack/plugins/drilldowns/public/components/list_manage_drilldowns/i18n.ts
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/i18n.ts
@@ -7,29 +7,32 @@
 import { i18n } from '@kbn/i18n';
 
 export const txtCreateDrilldown = i18n.translate(
-  'xpack.drilldowns.components.ListManageDrilldowns.createDrilldownButtonLabel',
+  'xpack.uiActionsEnhanced.drilldowns.components.ListManageDrilldowns.createDrilldownButtonLabel',
   {
     defaultMessage: 'Create new',
   }
 );
 
 export const txtEditDrilldown = i18n.translate(
-  'xpack.drilldowns.components.ListManageDrilldowns.editDrilldownButtonLabel',
+  'xpack.uiActionsEnhanced.drilldowns.components.ListManageDrilldowns.editDrilldownButtonLabel',
   {
     defaultMessage: 'Edit',
   }
 );
 
 export const txtDeleteDrilldowns = (count: number) =>
-  i18n.translate('xpack.drilldowns.components.ListManageDrilldowns.deleteDrilldownsButtonLabel', {
-    defaultMessage: 'Delete ({count})',
-    values: {
-      count,
-    },
-  });
+  i18n.translate(
+    'xpack.uiActionsEnhanced.drilldowns.components.ListManageDrilldowns.deleteDrilldownsButtonLabel',
+    {
+      defaultMessage: 'Delete ({count})',
+      values: {
+        count,
+      },
+    }
+  );
 
 export const txtSelectDrilldown = i18n.translate(
-  'xpack.drilldowns.components.ListManageDrilldowns.selectThisDrilldownCheckboxLabel',
+  'xpack.uiActionsEnhanced.drilldowns.components.ListManageDrilldowns.selectThisDrilldownCheckboxLabel',
   {
     defaultMessage: 'Select this drilldown',
   }
diff --git a/x-pack/plugins/drilldowns/public/components/list_manage_drilldowns/index.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/index.tsx
similarity index 100%
rename from x-pack/plugins/drilldowns/public/components/list_manage_drilldowns/index.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/index.tsx
diff --git a/x-pack/plugins/drilldowns/public/components/list_manage_drilldowns/list_manage_drilldowns.story.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.story.tsx
similarity index 100%
rename from x-pack/plugins/drilldowns/public/components/list_manage_drilldowns/list_manage_drilldowns.story.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.story.tsx
diff --git a/x-pack/plugins/drilldowns/public/components/list_manage_drilldowns/list_manage_drilldowns.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.test.tsx
similarity index 100%
rename from x-pack/plugins/drilldowns/public/components/list_manage_drilldowns/list_manage_drilldowns.test.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.test.tsx
diff --git a/x-pack/plugins/drilldowns/public/components/list_manage_drilldowns/list_manage_drilldowns.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.tsx
similarity index 100%
rename from x-pack/plugins/drilldowns/public/components/list_manage_drilldowns/list_manage_drilldowns.tsx
rename to x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.tsx
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/index.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/index.ts
index 7f81a68c803eb..0d469e46fa9fd 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/index.ts
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/index.ts
@@ -5,3 +5,4 @@
  */
 
 export * from './drilldown_definition';
+export * from './components';
diff --git a/x-pack/plugins/ui_actions_enhanced/public/mocks.ts b/x-pack/plugins/ui_actions_enhanced/public/mocks.ts
index 65fde12755beb..196b8f2c1d5c7 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/mocks.ts
+++ b/x-pack/plugins/ui_actions_enhanced/public/mocks.ts
@@ -27,6 +27,7 @@ const createStartContract = (): Start => {
     ...uiActionsPluginMock.createStartContract(),
     getActionFactories: jest.fn(),
     getActionFactory: jest.fn(),
+    FlyoutManageDrilldowns: jest.fn(),
   };
 
   return startContract;
diff --git a/x-pack/plugins/ui_actions_enhanced/public/plugin.ts b/x-pack/plugins/ui_actions_enhanced/public/plugin.ts
index d79996d5ecc1b..04caef92f15a2 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/plugin.ts
+++ b/x-pack/plugins/ui_actions_enhanced/public/plugin.ts
@@ -24,7 +24,6 @@ import {
   CUSTOM_TIME_RANGE,
   TimeRangeActionContext,
 } from './custom_time_range_action';
-
 import {
   CustomTimeRangeBadge,
   CUSTOM_TIME_RANGE_BADGE,
@@ -32,6 +31,8 @@ import {
 } from './custom_time_range_badge';
 import { CommonlyUsedRange } from './types';
 import { UiActionsServiceEnhancements } from './services';
+import { createFlyoutManageDrilldowns } from './drilldowns';
+import { Storage } from '../../../../src/plugins/kibana_utils/public';
 
 interface SetupDependencies {
   embeddable: EmbeddableSetup; // Embeddable are needed because they register basic triggers/actions.
@@ -49,7 +50,9 @@ export interface SetupContract
 
 export interface StartContract
   extends UiActionsStart,
-    Pick<UiActionsServiceEnhancements, 'getActionFactory' | 'getActionFactories'> {}
+    Pick<UiActionsServiceEnhancements, 'getActionFactory' | 'getActionFactories'> {
+  FlyoutManageDrilldowns: ReturnType<typeof createFlyoutManageDrilldowns>;
+}
 
 declare module '../../../../src/plugins/ui_actions/public' {
   export interface ActionContextMapping {
@@ -94,6 +97,12 @@ export class AdvancedUiActionsPublicPlugin
     return {
       ...uiActions,
       ...this.enhancements,
+      FlyoutManageDrilldowns: createFlyoutManageDrilldowns({
+        actionFactories: this.enhancements.getActionFactories(),
+        storage: new Storage(window?.localStorage),
+        toastService: core.notifications.toasts,
+        docsLink: core.docLinks.links.dashboard.drilldowns,
+      }),
     };
   }
 
diff --git a/x-pack/plugins/ui_actions_enhanced/scripts/storybook.js b/x-pack/plugins/ui_actions_enhanced/scripts/storybook.js
index 2a192fc56469e..1e3ab0d96b81c 100644
--- a/x-pack/plugins/ui_actions_enhanced/scripts/storybook.js
+++ b/x-pack/plugins/ui_actions_enhanced/scripts/storybook.js
@@ -9,5 +9,8 @@ import { join } from 'path';
 // eslint-disable-next-line
 require('@kbn/storybook').runStorybookCli({
   name: 'ui_actions_enhanced',
-  storyGlobs: [join(__dirname, '..', 'public', 'components', '**', '*.story.tsx')],
+  storyGlobs: [
+    join(__dirname, '..', 'public', 'components', '**', '*.story.tsx'),
+    join(__dirname, '..', 'public', 'drilldowns', 'components', '**', '*.story.tsx'),
+  ],
 });

From 9e8448fc0604474eb4de73f5c899584fb3055bac Mon Sep 17 00:00:00 2001
From: Pierre Gayvallet <pierre.gayvallet@elastic.co>
Date: Thu, 18 Jun 2020 15:55:47 +0200
Subject: [PATCH 20/63] HttpService: duplicate some APIs from `setup` to
 `start` and clean mocks. (#69021)

* add apis to http start contract and clean mocks

* add apis to http start contract and clean mocks

* add `getStartContract` method

* fix new calls

* remove isTlsEnabled

* deprecates HttpServiceSetup.auth
---
 ...ibana-plugin-core-server.corestart.http.md | 13 +++
 .../kibana-plugin-core-server.corestart.md    |  1 +
 .../kibana-plugin-core-server.httpauth.get.md | 13 +++
 ...in-core-server.httpauth.isauthenticated.md | 13 +++
 .../kibana-plugin-core-server.httpauth.md     | 20 ++++
 ...lugin-core-server.httpservicesetup.auth.md | 12 ++-
 ...re-server.httpservicesetup.istlsenabled.md | 13 ---
 ...ana-plugin-core-server.httpservicesetup.md |  3 +-
 ...ugin-core-server.httpservicestart.auth.md} |  8 +-
 ...n-core-server.httpservicestart.basepath.md | 13 +++
 ...e-server.httpservicestart.getserverinfo.md | 13 +++
 ...ana-plugin-core-server.httpservicestart.md |  4 +-
 .../core/server/kibana-plugin-core-server.md  |  1 +
 .../capabilities/capabilities_service.test.ts |  6 +-
 .../elasticsearch_service.test.ts             |  2 +-
 src/core/server/http/http_server.test.ts      | 11 ---
 src/core/server/http/http_server.ts           |  2 -
 src/core/server/http/http_service.mock.ts     | 99 ++++++++++++++++---
 src/core/server/http/http_service.ts          | 24 +++--
 src/core/server/http/router/router.mock.ts    |  2 +-
 src/core/server/http/types.ts                 | 64 ++++++++----
 .../http_resources_service.test.ts            |  2 +-
 src/core/server/index.ts                      |  5 +-
 src/core/server/internal_types.ts             |  3 +-
 .../server/legacy/legacy_internals.test.ts    |  4 +-
 src/core/server/legacy/legacy_service.test.ts |  4 +-
 src/core/server/legacy/legacy_service.ts      |  6 +-
 .../server/metrics/metrics_service.test.ts    |  2 +-
 .../metrics/ops_metrics_collector.test.ts     |  2 +-
 src/core/server/mocks.ts                      | 23 +----
 src/core/server/plugins/plugin_context.ts     |  6 +-
 src/core/server/rendering/__mocks__/params.ts |  2 +-
 .../saved_objects_service.test.ts             |  2 +-
 src/core/server/server.api.md                 | 20 ++--
 src/core/server/server.ts                     |  3 +
 .../ui_settings/ui_settings_service.test.ts   |  2 +-
 .../routes/custom_elements/create.test.ts     |  9 +-
 .../routes/custom_elements/delete.test.ts     |  9 +-
 .../routes/custom_elements/find.test.ts       |  9 +-
 .../server/routes/custom_elements/get.test.ts |  9 +-
 .../routes/custom_elements/update.test.ts     |  9 +-
 .../server/routes/es_fields/es_fields.test.ts |  9 +-
 .../server/routes/shareables/download.test.ts |  9 +-
 .../server/routes/shareables/zip.test.ts      |  9 +-
 .../server/routes/workpad/create.test.ts      |  9 +-
 .../server/routes/workpad/delete.test.ts      |  9 +-
 .../canvas/server/routes/workpad/find.test.ts |  9 +-
 .../canvas/server/routes/workpad/get.test.ts  |  9 +-
 .../server/routes/workpad/update.test.ts      | 11 +--
 .../routes/api/__fixtures__/mock_router.ts    |  3 +-
 .../register_create_route.test.ts             |  4 +-
 .../register_delete_route.test.ts             |  4 +-
 .../register_fetch_route.test.ts              |  4 +-
 .../register_get_route.test.ts                |  4 +-
 .../register_pause_route.test.ts              |  4 +-
 .../register_resume_route.test.ts             |  4 +-
 .../register_update_route.test.ts             |  4 +-
 .../register_create_route.test.ts             |  4 +-
 .../register_fetch_route.test.ts              |  4 +-
 .../follower_index/register_get_route.test.ts |  4 +-
 .../register_pause_route.test.ts              |  4 +-
 .../register_resume_route.test.ts             |  4 +-
 .../register_unfollow_route.test.ts           |  4 +-
 .../component_templates/privileges.test.ts    | 11 +--
 x-pack/plugins/security/server/plugin.test.ts |  7 +-
 x-pack/plugins/security/server/plugin.ts      |  2 +-
 .../routes/api/external/copy_to_space.test.ts |  4 +-
 .../server/routes/api/external/delete.test.ts |  3 +-
 .../server/routes/api/external/get.test.ts    |  4 +-
 .../routes/api/external/get_all.test.ts       |  4 +-
 .../server/routes/api/external/post.test.ts   |  4 +-
 .../server/routes/api/external/put.test.ts    |  4 +-
 72 files changed, 376 insertions(+), 264 deletions(-)
 create mode 100644 docs/development/core/server/kibana-plugin-core-server.corestart.http.md
 create mode 100644 docs/development/core/server/kibana-plugin-core-server.httpauth.get.md
 create mode 100644 docs/development/core/server/kibana-plugin-core-server.httpauth.isauthenticated.md
 create mode 100644 docs/development/core/server/kibana-plugin-core-server.httpauth.md
 delete mode 100644 docs/development/core/server/kibana-plugin-core-server.httpservicesetup.istlsenabled.md
 rename docs/development/core/server/{kibana-plugin-core-server.httpservicestart.islistening.md => kibana-plugin-core-server.httpservicestart.auth.md} (50%)
 create mode 100644 docs/development/core/server/kibana-plugin-core-server.httpservicestart.basepath.md
 create mode 100644 docs/development/core/server/kibana-plugin-core-server.httpservicestart.getserverinfo.md

diff --git a/docs/development/core/server/kibana-plugin-core-server.corestart.http.md b/docs/development/core/server/kibana-plugin-core-server.corestart.http.md
new file mode 100644
index 0000000000000..d81049dfbd340
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-core-server.corestart.http.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-server](./kibana-plugin-core-server.md) &gt; [CoreStart](./kibana-plugin-core-server.corestart.md) &gt; [http](./kibana-plugin-core-server.corestart.http.md)
+
+## CoreStart.http property
+
+[HttpServiceStart](./kibana-plugin-core-server.httpservicestart.md)
+
+<b>Signature:</b>
+
+```typescript
+http: HttpServiceStart;
+```
diff --git a/docs/development/core/server/kibana-plugin-core-server.corestart.md b/docs/development/core/server/kibana-plugin-core-server.corestart.md
index c50e8924c9dd4..6a6bacf1eef40 100644
--- a/docs/development/core/server/kibana-plugin-core-server.corestart.md
+++ b/docs/development/core/server/kibana-plugin-core-server.corestart.md
@@ -18,6 +18,7 @@ export interface CoreStart
 |  --- | --- | --- |
 |  [capabilities](./kibana-plugin-core-server.corestart.capabilities.md) | <code>CapabilitiesStart</code> | [CapabilitiesStart](./kibana-plugin-core-server.capabilitiesstart.md) |
 |  [elasticsearch](./kibana-plugin-core-server.corestart.elasticsearch.md) | <code>ElasticsearchServiceStart</code> | [ElasticsearchServiceStart](./kibana-plugin-core-server.elasticsearchservicestart.md) |
+|  [http](./kibana-plugin-core-server.corestart.http.md) | <code>HttpServiceStart</code> | [HttpServiceStart](./kibana-plugin-core-server.httpservicestart.md) |
 |  [savedObjects](./kibana-plugin-core-server.corestart.savedobjects.md) | <code>SavedObjectsServiceStart</code> | [SavedObjectsServiceStart](./kibana-plugin-core-server.savedobjectsservicestart.md) |
 |  [uiSettings](./kibana-plugin-core-server.corestart.uisettings.md) | <code>UiSettingsServiceStart</code> | [UiSettingsServiceStart](./kibana-plugin-core-server.uisettingsservicestart.md) |
 
diff --git a/docs/development/core/server/kibana-plugin-core-server.httpauth.get.md b/docs/development/core/server/kibana-plugin-core-server.httpauth.get.md
new file mode 100644
index 0000000000000..4ea67cf895a27
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-core-server.httpauth.get.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-server](./kibana-plugin-core-server.md) &gt; [HttpAuth](./kibana-plugin-core-server.httpauth.md) &gt; [get](./kibana-plugin-core-server.httpauth.get.md)
+
+## HttpAuth.get property
+
+Gets authentication state for a request. Returned by `auth` interceptor. [GetAuthState](./kibana-plugin-core-server.getauthstate.md)
+
+<b>Signature:</b>
+
+```typescript
+get: GetAuthState;
+```
diff --git a/docs/development/core/server/kibana-plugin-core-server.httpauth.isauthenticated.md b/docs/development/core/server/kibana-plugin-core-server.httpauth.isauthenticated.md
new file mode 100644
index 0000000000000..54db6bce5f161
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-core-server.httpauth.isauthenticated.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-server](./kibana-plugin-core-server.md) &gt; [HttpAuth](./kibana-plugin-core-server.httpauth.md) &gt; [isAuthenticated](./kibana-plugin-core-server.httpauth.isauthenticated.md)
+
+## HttpAuth.isAuthenticated property
+
+Returns authentication status for a request. [IsAuthenticated](./kibana-plugin-core-server.isauthenticated.md)
+
+<b>Signature:</b>
+
+```typescript
+isAuthenticated: IsAuthenticated;
+```
diff --git a/docs/development/core/server/kibana-plugin-core-server.httpauth.md b/docs/development/core/server/kibana-plugin-core-server.httpauth.md
new file mode 100644
index 0000000000000..d9d77809570ab
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-core-server.httpauth.md
@@ -0,0 +1,20 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-server](./kibana-plugin-core-server.md) &gt; [HttpAuth](./kibana-plugin-core-server.httpauth.md)
+
+## HttpAuth interface
+
+
+<b>Signature:</b>
+
+```typescript
+export interface HttpAuth 
+```
+
+## Properties
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [get](./kibana-plugin-core-server.httpauth.get.md) | <code>GetAuthState</code> | Gets authentication state for a request. Returned by <code>auth</code> interceptor. [GetAuthState](./kibana-plugin-core-server.getauthstate.md) |
+|  [isAuthenticated](./kibana-plugin-core-server.httpauth.isauthenticated.md) | <code>IsAuthenticated</code> | Returns authentication status for a request. [IsAuthenticated](./kibana-plugin-core-server.isauthenticated.md) |
+
diff --git a/docs/development/core/server/kibana-plugin-core-server.httpservicesetup.auth.md b/docs/development/core/server/kibana-plugin-core-server.httpservicesetup.auth.md
index 6667779c1c7ae..da348a2282b1a 100644
--- a/docs/development/core/server/kibana-plugin-core-server.httpservicesetup.auth.md
+++ b/docs/development/core/server/kibana-plugin-core-server.httpservicesetup.auth.md
@@ -4,11 +4,15 @@
 
 ## HttpServiceSetup.auth property
 
+> Warning: This API is now obsolete.
+> 
+> use [the start contract](./kibana-plugin-core-server.httpservicestart.auth.md) instead.
+> 
+
+Auth status. See [HttpAuth](./kibana-plugin-core-server.httpauth.md)
+
 <b>Signature:</b>
 
 ```typescript
-auth: {
-        get: GetAuthState;
-        isAuthenticated: IsAuthenticated;
-    };
+auth: HttpAuth;
 ```
diff --git a/docs/development/core/server/kibana-plugin-core-server.httpservicesetup.istlsenabled.md b/docs/development/core/server/kibana-plugin-core-server.httpservicesetup.istlsenabled.md
deleted file mode 100644
index fa86da18393f5..0000000000000
--- a/docs/development/core/server/kibana-plugin-core-server.httpservicesetup.istlsenabled.md
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-core-server](./kibana-plugin-core-server.md) &gt; [HttpServiceSetup](./kibana-plugin-core-server.httpservicesetup.md) &gt; [isTlsEnabled](./kibana-plugin-core-server.httpservicesetup.istlsenabled.md)
-
-## HttpServiceSetup.isTlsEnabled property
-
-Flag showing whether a server was configured to use TLS connection.
-
-<b>Signature:</b>
-
-```typescript
-isTlsEnabled: boolean;
-```
diff --git a/docs/development/core/server/kibana-plugin-core-server.httpservicesetup.md b/docs/development/core/server/kibana-plugin-core-server.httpservicesetup.md
index 2dd832813afb8..b12983836d9e5 100644
--- a/docs/development/core/server/kibana-plugin-core-server.httpservicesetup.md
+++ b/docs/development/core/server/kibana-plugin-core-server.httpservicesetup.md
@@ -81,13 +81,12 @@ async (context, request, response) => {
 
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [auth](./kibana-plugin-core-server.httpservicesetup.auth.md) | <code>{</code><br/><code>        get: GetAuthState;</code><br/><code>        isAuthenticated: IsAuthenticated;</code><br/><code>    }</code> |  |
+|  [auth](./kibana-plugin-core-server.httpservicesetup.auth.md) | <code>HttpAuth</code> | Auth status. See [HttpAuth](./kibana-plugin-core-server.httpauth.md) |
 |  [basePath](./kibana-plugin-core-server.httpservicesetup.basepath.md) | <code>IBasePath</code> | Access or manipulate the Kibana base path See [IBasePath](./kibana-plugin-core-server.ibasepath.md)<!-- -->. |
 |  [createCookieSessionStorageFactory](./kibana-plugin-core-server.httpservicesetup.createcookiesessionstoragefactory.md) | <code>&lt;T&gt;(cookieOptions: SessionStorageCookieOptions&lt;T&gt;) =&gt; Promise&lt;SessionStorageFactory&lt;T&gt;&gt;</code> | Creates cookie based session storage factory [SessionStorageFactory](./kibana-plugin-core-server.sessionstoragefactory.md) |
 |  [createRouter](./kibana-plugin-core-server.httpservicesetup.createrouter.md) | <code>() =&gt; IRouter</code> | Provides ability to declare a handler function for a particular path and HTTP request method. |
 |  [csp](./kibana-plugin-core-server.httpservicesetup.csp.md) | <code>ICspConfig</code> | The CSP config used for Kibana. |
 |  [getServerInfo](./kibana-plugin-core-server.httpservicesetup.getserverinfo.md) | <code>() =&gt; HttpServerInfo</code> | Provides common [information](./kibana-plugin-core-server.httpserverinfo.md) about the running http server. |
-|  [isTlsEnabled](./kibana-plugin-core-server.httpservicesetup.istlsenabled.md) | <code>boolean</code> | Flag showing whether a server was configured to use TLS connection. |
 |  [registerAuth](./kibana-plugin-core-server.httpservicesetup.registerauth.md) | <code>(handler: AuthenticationHandler) =&gt; void</code> | To define custom authentication and/or authorization mechanism for incoming requests. |
 |  [registerOnPostAuth](./kibana-plugin-core-server.httpservicesetup.registeronpostauth.md) | <code>(handler: OnPostAuthHandler) =&gt; void</code> | To define custom logic to perform for incoming requests. |
 |  [registerOnPreAuth](./kibana-plugin-core-server.httpservicesetup.registeronpreauth.md) | <code>(handler: OnPreAuthHandler) =&gt; void</code> | To define custom logic to perform for incoming requests. |
diff --git a/docs/development/core/server/kibana-plugin-core-server.httpservicestart.islistening.md b/docs/development/core/server/kibana-plugin-core-server.httpservicestart.auth.md
similarity index 50%
rename from docs/development/core/server/kibana-plugin-core-server.httpservicestart.islistening.md
rename to docs/development/core/server/kibana-plugin-core-server.httpservicestart.auth.md
index bf2922c62c15f..f7dffee2e125c 100644
--- a/docs/development/core/server/kibana-plugin-core-server.httpservicestart.islistening.md
+++ b/docs/development/core/server/kibana-plugin-core-server.httpservicestart.auth.md
@@ -1,13 +1,13 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [kibana-plugin-core-server](./kibana-plugin-core-server.md) &gt; [HttpServiceStart](./kibana-plugin-core-server.httpservicestart.md) &gt; [isListening](./kibana-plugin-core-server.httpservicestart.islistening.md)
+[Home](./index.md) &gt; [kibana-plugin-core-server](./kibana-plugin-core-server.md) &gt; [HttpServiceStart](./kibana-plugin-core-server.httpservicestart.md) &gt; [auth](./kibana-plugin-core-server.httpservicestart.auth.md)
 
-## HttpServiceStart.isListening property
+## HttpServiceStart.auth property
 
-Indicates if http server is listening on a given port
+Auth status. See [HttpAuth](./kibana-plugin-core-server.httpauth.md)
 
 <b>Signature:</b>
 
 ```typescript
-isListening: (port: number) => boolean;
+auth: HttpAuth;
 ```
diff --git a/docs/development/core/server/kibana-plugin-core-server.httpservicestart.basepath.md b/docs/development/core/server/kibana-plugin-core-server.httpservicestart.basepath.md
new file mode 100644
index 0000000000000..e8b2a0fc2cbaa
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-core-server.httpservicestart.basepath.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-server](./kibana-plugin-core-server.md) &gt; [HttpServiceStart](./kibana-plugin-core-server.httpservicestart.md) &gt; [basePath](./kibana-plugin-core-server.httpservicestart.basepath.md)
+
+## HttpServiceStart.basePath property
+
+Access or manipulate the Kibana base path See [IBasePath](./kibana-plugin-core-server.ibasepath.md)<!-- -->.
+
+<b>Signature:</b>
+
+```typescript
+basePath: IBasePath;
+```
diff --git a/docs/development/core/server/kibana-plugin-core-server.httpservicestart.getserverinfo.md b/docs/development/core/server/kibana-plugin-core-server.httpservicestart.getserverinfo.md
new file mode 100644
index 0000000000000..a95c8da64fdb0
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-core-server.httpservicestart.getserverinfo.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-server](./kibana-plugin-core-server.md) &gt; [HttpServiceStart](./kibana-plugin-core-server.httpservicestart.md) &gt; [getServerInfo](./kibana-plugin-core-server.httpservicestart.getserverinfo.md)
+
+## HttpServiceStart.getServerInfo property
+
+Provides common [information](./kibana-plugin-core-server.httpserverinfo.md) about the running http server.
+
+<b>Signature:</b>
+
+```typescript
+getServerInfo: () => HttpServerInfo;
+```
diff --git a/docs/development/core/server/kibana-plugin-core-server.httpservicestart.md b/docs/development/core/server/kibana-plugin-core-server.httpservicestart.md
index 53239da516b25..bc99c1217f72b 100644
--- a/docs/development/core/server/kibana-plugin-core-server.httpservicestart.md
+++ b/docs/development/core/server/kibana-plugin-core-server.httpservicestart.md
@@ -15,5 +15,7 @@ export interface HttpServiceStart
 
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [isListening](./kibana-plugin-core-server.httpservicestart.islistening.md) | <code>(port: number) =&gt; boolean</code> | Indicates if http server is listening on a given port |
+|  [auth](./kibana-plugin-core-server.httpservicestart.auth.md) | <code>HttpAuth</code> | Auth status. See [HttpAuth](./kibana-plugin-core-server.httpauth.md) |
+|  [basePath](./kibana-plugin-core-server.httpservicestart.basepath.md) | <code>IBasePath</code> | Access or manipulate the Kibana base path See [IBasePath](./kibana-plugin-core-server.ibasepath.md)<!-- -->. |
+|  [getServerInfo](./kibana-plugin-core-server.httpservicestart.getserverinfo.md) | <code>() =&gt; HttpServerInfo</code> | Provides common [information](./kibana-plugin-core-server.httpserverinfo.md) about the running http server. |
 
diff --git a/docs/development/core/server/kibana-plugin-core-server.md b/docs/development/core/server/kibana-plugin-core-server.md
index a45bd3d44b28a..0f1bbbe7176e5 100644
--- a/docs/development/core/server/kibana-plugin-core-server.md
+++ b/docs/development/core/server/kibana-plugin-core-server.md
@@ -85,6 +85,7 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 |  [EnvironmentMode](./kibana-plugin-core-server.environmentmode.md) |  |
 |  [ErrorHttpResponseOptions](./kibana-plugin-core-server.errorhttpresponseoptions.md) | HTTP response parameters |
 |  [FakeRequest](./kibana-plugin-core-server.fakerequest.md) | Fake request object created manually by Kibana plugins. |
+|  [HttpAuth](./kibana-plugin-core-server.httpauth.md) |  |
 |  [HttpResources](./kibana-plugin-core-server.httpresources.md) | HttpResources service is responsible for serving static &amp; dynamic assets for Kibana application via HTTP. Provides API allowing plug-ins to respond with: - a pre-configured HTML page bootstrapping Kibana client app - custom HTML page - custom JS script file. |
 |  [HttpResourcesRenderOptions](./kibana-plugin-core-server.httpresourcesrenderoptions.md) | Allows to configure HTTP response parameters |
 |  [HttpResourcesServiceToolkit](./kibana-plugin-core-server.httpresourcesservicetoolkit.md) | Extended set of [KibanaResponseFactory](./kibana-plugin-core-server.kibanaresponsefactory.md) helpers used to respond with HTML or JS resource. |
diff --git a/src/core/server/capabilities/capabilities_service.test.ts b/src/core/server/capabilities/capabilities_service.test.ts
index 7d2e7391aa8d4..42dc1604281b8 100644
--- a/src/core/server/capabilities/capabilities_service.test.ts
+++ b/src/core/server/capabilities/capabilities_service.test.ts
@@ -17,19 +17,19 @@
  * under the License.
  */
 
-import { httpServiceMock, HttpServiceSetupMock } from '../http/http_service.mock';
+import { httpServiceMock, InternalHttpServiceSetupMock } from '../http/http_service.mock';
 import { mockRouter, RouterMock } from '../http/router/router.mock';
 import { CapabilitiesService, CapabilitiesSetup } from './capabilities_service';
 import { mockCoreContext } from '../core_context.mock';
 
 describe('CapabilitiesService', () => {
-  let http: HttpServiceSetupMock;
+  let http: InternalHttpServiceSetupMock;
   let service: CapabilitiesService;
   let setup: CapabilitiesSetup;
   let router: RouterMock;
 
   beforeEach(() => {
-    http = httpServiceMock.createSetupContract();
+    http = httpServiceMock.createInternalSetupContract();
     router = mockRouter.create();
     http.createRouter.mockReturnValue(router);
     service = new CapabilitiesService(mockCoreContext.create());
diff --git a/src/core/server/elasticsearch/elasticsearch_service.test.ts b/src/core/server/elasticsearch/elasticsearch_service.test.ts
index e7dab3807733a..8bf0df74186a9 100644
--- a/src/core/server/elasticsearch/elasticsearch_service.test.ts
+++ b/src/core/server/elasticsearch/elasticsearch_service.test.ts
@@ -39,7 +39,7 @@ const delay = async (durationMs: number) =>
 let elasticsearchService: ElasticsearchService;
 const configService = configServiceMock.create();
 const deps = {
-  http: httpServiceMock.createSetupContract(),
+  http: httpServiceMock.createInternalSetupContract(),
 };
 configService.atPath.mockReturnValue(
   new BehaviorSubject({
diff --git a/src/core/server/http/http_server.test.ts b/src/core/server/http/http_server.test.ts
index 1798c3a921da4..9a5deb9b45562 100644
--- a/src/core/server/http/http_server.test.ts
+++ b/src/core/server/http/http_server.test.ts
@@ -1046,17 +1046,6 @@ describe('setup contract', () => {
     });
   });
 
-  describe('#isTlsEnabled', () => {
-    it('returns "true" if TLS enabled', async () => {
-      const { isTlsEnabled } = await server.setup(configWithSSL);
-      expect(isTlsEnabled).toBe(true);
-    });
-    it('returns "false" if TLS not enabled', async () => {
-      const { isTlsEnabled } = await server.setup(config);
-      expect(isTlsEnabled).toBe(false);
-    });
-  });
-
   describe('#getServerInfo', () => {
     it('returns correct information', async () => {
       let { getServerInfo } = await server.setup(config);
diff --git a/src/core/server/http/http_server.ts b/src/core/server/http/http_server.ts
index 8089ee901fa65..d4615dd4744e5 100644
--- a/src/core/server/http/http_server.ts
+++ b/src/core/server/http/http_server.ts
@@ -53,7 +53,6 @@ export interface HttpServerSetup {
   registerOnPreAuth: HttpServiceSetup['registerOnPreAuth'];
   registerOnPostAuth: HttpServiceSetup['registerOnPostAuth'];
   registerOnPreResponse: HttpServiceSetup['registerOnPreResponse'];
-  isTlsEnabled: HttpServiceSetup['isTlsEnabled'];
   getAuthHeaders: GetAuthHeaders;
   auth: {
     get: GetAuthState;
@@ -133,7 +132,6 @@ export class HttpServer {
         port: config.port,
         protocol: this.server!.info.protocol,
       }),
-      isTlsEnabled: config.ssl.enabled,
       // Return server instance with the connection options so that we can properly
       // bridge core and the "legacy" Kibana internally. Once this bridge isn't
       // needed anymore we shouldn't return the instance from this method.
diff --git a/src/core/server/http/http_service.mock.ts b/src/core/server/http/http_service.mock.ts
index 0788a8f2af7a1..02ae6f5d95a87 100644
--- a/src/core/server/http/http_service.mock.ts
+++ b/src/core/server/http/http_service.mock.ts
@@ -19,9 +19,14 @@
 
 import { Server } from 'hapi';
 import { CspConfig } from '../csp';
-import { mockRouter } from './router/router.mock';
+import { mockRouter, RouterMock } from './router/router.mock';
 import { configMock } from '../config/config.mock';
-import { InternalHttpServiceSetup } from './types';
+import {
+  InternalHttpServiceSetup,
+  HttpServiceSetup,
+  HttpServiceStart,
+  InternalHttpServiceStart,
+} from './types';
 import { HttpService } from './http_service';
 import { AuthStatus } from './auth_state_storage';
 import { OnPreAuthToolkit } from './lifecycle/on_pre_auth';
@@ -32,7 +37,23 @@ import { OnPreResponseToolkit } from './lifecycle/on_pre_response';
 
 type BasePathMocked = jest.Mocked<InternalHttpServiceSetup['basePath']>;
 type AuthMocked = jest.Mocked<InternalHttpServiceSetup['auth']>;
-export type HttpServiceSetupMock = jest.Mocked<InternalHttpServiceSetup> & {
+
+export type HttpServiceSetupMock = jest.Mocked<
+  Omit<HttpServiceSetup, 'basePath' | 'createRouter'>
+> & {
+  basePath: BasePathMocked;
+  createRouter: jest.MockedFunction<() => RouterMock>;
+};
+export type InternalHttpServiceSetupMock = jest.Mocked<
+  Omit<InternalHttpServiceSetup, 'basePath' | 'createRouter'>
+> & {
+  basePath: BasePathMocked;
+  createRouter: jest.MockedFunction<(path: string) => RouterMock>;
+};
+export type HttpServiceStartMock = jest.Mocked<HttpServiceStart> & {
+  basePath: BasePathMocked;
+};
+export type InternalHttpServiceStartMock = jest.Mocked<InternalHttpServiceStart> & {
   basePath: BasePathMocked;
 };
 
@@ -54,8 +75,8 @@ const createAuthMock = () => {
   return mock;
 };
 
-const createSetupContractMock = () => {
-  const setupContract: HttpServiceSetupMock = {
+const createInternalSetupContractMock = () => {
+  const mock: InternalHttpServiceSetupMock = {
     // we can mock other hapi server methods when we need it
     server: ({
       name: 'http-server-test',
@@ -77,31 +98,78 @@ const createSetupContractMock = () => {
     csp: CspConfig.DEFAULT,
     auth: createAuthMock(),
     getAuthHeaders: jest.fn(),
-    isTlsEnabled: false,
     getServerInfo: jest.fn(),
   };
-  setupContract.createCookieSessionStorageFactory.mockResolvedValue(
-    sessionStorageMock.createFactory()
-  );
-  setupContract.createRouter.mockImplementation(() => mockRouter.create());
-  setupContract.getAuthHeaders.mockReturnValue({ authorization: 'authorization-header' });
-  setupContract.getServerInfo.mockReturnValue({
+  mock.createCookieSessionStorageFactory.mockResolvedValue(sessionStorageMock.createFactory());
+  mock.createRouter.mockImplementation(() => mockRouter.create());
+  mock.getAuthHeaders.mockReturnValue({ authorization: 'authorization-header' });
+  mock.getServerInfo.mockReturnValue({
     host: 'localhost',
     name: 'kibana',
     port: 80,
     protocol: 'http',
   });
-  return setupContract;
+  return mock;
+};
+
+const createSetupContractMock = () => {
+  const internalMock = createInternalSetupContractMock();
+
+  const mock: HttpServiceSetupMock = {
+    createCookieSessionStorageFactory: internalMock.createCookieSessionStorageFactory,
+    registerOnPreAuth: internalMock.registerOnPreAuth,
+    registerAuth: internalMock.registerAuth,
+    registerOnPostAuth: internalMock.registerOnPostAuth,
+    registerOnPreResponse: internalMock.registerOnPreResponse,
+    basePath: internalMock.basePath,
+    csp: CspConfig.DEFAULT,
+    createRouter: jest.fn(),
+    registerRouteHandlerContext: jest.fn(),
+    auth: {
+      get: internalMock.auth.get,
+      isAuthenticated: internalMock.auth.isAuthenticated,
+    },
+    getServerInfo: internalMock.getServerInfo,
+  };
+
+  mock.createRouter.mockImplementation(() => internalMock.createRouter(''));
+
+  return mock;
+};
+
+const createStartContractMock = () => {
+  const mock: HttpServiceStartMock = {
+    auth: createAuthMock(),
+    basePath: createBasePathMock(),
+    getServerInfo: jest.fn(),
+  };
+
+  return mock;
+};
+
+const createInternalStartContractMock = () => {
+  const mock: InternalHttpServiceStartMock = {
+    ...createStartContractMock(),
+    isListening: jest.fn(),
+  };
+
+  mock.isListening.mockReturnValue(true);
+
+  return mock;
 };
 
 type HttpServiceContract = PublicMethodsOf<HttpService>;
+
 const createHttpServiceMock = () => {
   const mocked: jest.Mocked<HttpServiceContract> = {
     setup: jest.fn(),
+    getStartContract: jest.fn(),
     start: jest.fn(),
     stop: jest.fn(),
   };
-  mocked.setup.mockResolvedValue(createSetupContractMock());
+  mocked.setup.mockResolvedValue(createInternalSetupContractMock());
+  mocked.getStartContract.mockReturnValue(createInternalStartContractMock());
+  mocked.start.mockResolvedValue(createInternalStartContractMock());
   return mocked;
 };
 
@@ -128,7 +196,10 @@ export const httpServiceMock = {
   create: createHttpServiceMock,
   createBasePath: createBasePathMock,
   createAuth: createAuthMock,
+  createInternalSetupContract: createInternalSetupContractMock,
   createSetupContract: createSetupContractMock,
+  createInternalStartContract: createInternalStartContractMock,
+  createStartContract: createStartContractMock,
   createOnPreAuthToolkit: createOnPreAuthToolkitMock,
   createOnPostAuthToolkit: createOnPostAuthToolkitMock,
   createOnPreResponseToolkit: createOnPreResponseToolkitMock,
diff --git a/src/core/server/http/http_service.ts b/src/core/server/http/http_service.ts
index ae9d53f9fd3db..c2fd653918171 100644
--- a/src/core/server/http/http_service.ts
+++ b/src/core/server/http/http_service.ts
@@ -22,6 +22,7 @@ import { first, map } from 'rxjs/operators';
 import { Server } from 'hapi';
 
 import { CoreService } from '../../types';
+import { pick } from '../../utils';
 import { Logger, LoggerFactory } from '../logging';
 import { ContextSetup } from '../context';
 import { Env } from '../config';
@@ -38,7 +39,7 @@ import {
   RequestHandlerContextContainer,
   RequestHandlerContextProvider,
   InternalHttpServiceSetup,
-  HttpServiceStart,
+  InternalHttpServiceStart,
 } from './types';
 
 import { RequestHandlerContext } from '../../server';
@@ -49,7 +50,8 @@ interface SetupDeps {
 }
 
 /** @internal */
-export class HttpService implements CoreService<InternalHttpServiceSetup, HttpServiceStart> {
+export class HttpService
+  implements CoreService<InternalHttpServiceSetup, InternalHttpServiceStart> {
   private readonly httpServer: HttpServer;
   private readonly httpsRedirectServer: HttpsRedirectServer;
   private readonly config$: Observable<HttpConfig>;
@@ -59,6 +61,7 @@ export class HttpService implements CoreService<InternalHttpServiceSetup, HttpSe
   private readonly log: Logger;
   private readonly env: Env;
   private notReadyServer?: Server;
+  private internalSetup?: InternalHttpServiceSetup;
   private requestHandlerContext?: RequestHandlerContextContainer;
 
   constructor(private readonly coreContext: CoreContext) {
@@ -97,7 +100,7 @@ export class HttpService implements CoreService<InternalHttpServiceSetup, HttpSe
 
     registerCoreHandlers(serverContract, config, this.env);
 
-    const contract: InternalHttpServiceSetup = {
+    this.internalSetup = {
       ...serverContract,
 
       createRouter: (path: string, pluginId: PluginOpaqueId = this.coreContext.coreId) => {
@@ -114,7 +117,16 @@ export class HttpService implements CoreService<InternalHttpServiceSetup, HttpSe
       ) => this.requestHandlerContext!.registerContext(pluginOpaqueId, contextName, provider),
     };
 
-    return contract;
+    return this.internalSetup;
+  }
+
+  // this method exists because we need the start contract to create the `CoreStart` used to start
+  // the `plugin` and `legacy` services.
+  public getStartContract(): InternalHttpServiceStart {
+    return {
+      ...pick(this.internalSetup!, ['auth', 'basePath', 'getServerInfo']),
+      isListening: () => this.httpServer.isListening(),
+    };
   }
 
   public async start() {
@@ -134,9 +146,7 @@ export class HttpService implements CoreService<InternalHttpServiceSetup, HttpSe
       await this.httpServer.start();
     }
 
-    return {
-      isListening: () => this.httpServer.isListening(),
-    };
+    return this.getStartContract();
   }
 
   /**
diff --git a/src/core/server/http/router/router.mock.ts b/src/core/server/http/router/router.mock.ts
index 651d1712100ee..f85f187164c92 100644
--- a/src/core/server/http/router/router.mock.ts
+++ b/src/core/server/http/router/router.mock.ts
@@ -19,7 +19,7 @@
 
 import { IRouter } from './router';
 
-export type RouterMock = DeeplyMockedKeys<IRouter>;
+export type RouterMock = jest.Mocked<IRouter>;
 
 function create({ routerPath = '' }: { routerPath?: string } = {}): RouterMock {
   return {
diff --git a/src/core/server/http/types.ts b/src/core/server/http/types.ts
index 77e0d6b61692d..7f2e70545d015 100644
--- a/src/core/server/http/types.ts
+++ b/src/core/server/http/types.ts
@@ -47,6 +47,22 @@ export type RequestHandlerContextProvider<
   TContextName extends keyof RequestHandlerContext
 > = IContextProvider<RequestHandler<any, any, any>, TContextName>;
 
+/**
+ * @public
+ */
+export interface HttpAuth {
+  /**
+   * Gets authentication state for a request. Returned by `auth` interceptor.
+   * {@link GetAuthState}
+   */
+  get: GetAuthState;
+  /**
+   * Returns authentication status for a request.
+   * {@link IsAuthenticated}
+   */
+  isAuthenticated: IsAuthenticated;
+}
+
 /**
  * Kibana HTTP Service provides own abstraction for work with HTTP stack.
  * Plugins don't have direct access to `hapi` server and its primitives anymore. Moreover,
@@ -185,28 +201,18 @@ export interface HttpServiceSetup {
    */
   basePath: IBasePath;
 
-  auth: {
-    /**
-     * Gets authentication state for a request. Returned by `auth` interceptor.
-     * {@link GetAuthState}
-     */
-    get: GetAuthState;
-    /**
-     * Returns authentication status for a request.
-     * {@link IsAuthenticated}
-     */
-    isAuthenticated: IsAuthenticated;
-  };
-
   /**
-   * The CSP config used for Kibana.
+   * Auth status.
+   * See {@link HttpAuth}
+   *
+   * @deprecated use {@link HttpServiceStart.auth | the start contract} instead.
    */
-  csp: ICspConfig;
+  auth: HttpAuth;
 
   /**
-   * Flag showing whether a server was configured to use TLS connection.
+   * The CSP config used for Kibana.
    */
-  isTlsEnabled: boolean;
+  csp: ICspConfig;
 
   /**
    * Provides ability to declare a handler function for a particular path and HTTP request method.
@@ -276,8 +282,28 @@ export interface InternalHttpServiceSetup
 
 /** @public */
 export interface HttpServiceStart {
-  /** Indicates if http server is listening on a given port */
-  isListening: (port: number) => boolean;
+  /**
+   * Access or manipulate the Kibana base path
+   * See {@link IBasePath}.
+   */
+  basePath: IBasePath;
+
+  /**
+   * Auth status.
+   * See {@link HttpAuth}
+   */
+  auth: HttpAuth;
+
+  /**
+   * Provides common {@link HttpServerInfo | information} about the running http server.
+   */
+  getServerInfo: () => HttpServerInfo;
+}
+
+/** @internal */
+export interface InternalHttpServiceStart extends HttpServiceStart {
+  /** Indicates if the http server is listening on the configured port */
+  isListening: () => boolean;
 }
 
 /** @public */
diff --git a/src/core/server/http_resources/http_resources_service.test.ts b/src/core/server/http_resources/http_resources_service.test.ts
index e6f129ba12d78..80afddc166570 100644
--- a/src/core/server/http_resources/http_resources_service.test.ts
+++ b/src/core/server/http_resources/http_resources_service.test.ts
@@ -37,7 +37,7 @@ describe('HttpResources service', () => {
   describe('#createRegistrar', () => {
     beforeEach(() => {
       setupDeps = {
-        http: httpServiceMock.createSetupContract(),
+        http: httpServiceMock.createInternalSetupContract(),
         rendering: renderingMock.createSetupContract(),
       };
       service = new HttpResourcesService(coreContext);
diff --git a/src/core/server/index.ts b/src/core/server/index.ts
index dccd58c24a7d0..0da7e5d66cf2a 100644
--- a/src/core/server/index.ts
+++ b/src/core/server/index.ts
@@ -46,7 +46,7 @@ import {
   ElasticsearchServiceStart,
 } from './elasticsearch';
 
-import { HttpServiceSetup } from './http';
+import { HttpServiceSetup, HttpServiceStart } from './http';
 import { HttpResources } from './http_resources';
 
 import { PluginsServiceSetup, PluginsServiceStart, PluginOpaqueId } from './plugins';
@@ -121,6 +121,7 @@ export {
   CustomHttpResponseOptions,
   GetAuthHeaders,
   GetAuthState,
+  HttpAuth,
   HttpResponseOptions,
   HttpResponsePayload,
   HttpServerInfo,
@@ -421,6 +422,8 @@ export interface CoreStart {
   capabilities: CapabilitiesStart;
   /** {@link ElasticsearchServiceStart} */
   elasticsearch: ElasticsearchServiceStart;
+  /** {@link HttpServiceStart} */
+  http: HttpServiceStart;
   /** {@link SavedObjectsServiceStart} */
   savedObjects: SavedObjectsServiceStart;
   /** {@link UiSettingsServiceStart} */
diff --git a/src/core/server/internal_types.ts b/src/core/server/internal_types.ts
index 09ec772a41756..f68ab633dcbe6 100644
--- a/src/core/server/internal_types.ts
+++ b/src/core/server/internal_types.ts
@@ -23,7 +23,7 @@ import { CapabilitiesSetup, CapabilitiesStart } from './capabilities';
 import { ConfigDeprecationProvider } from './config';
 import { ContextSetup } from './context';
 import { InternalElasticsearchServiceSetup, ElasticsearchServiceStart } from './elasticsearch';
-import { InternalHttpServiceSetup } from './http';
+import { InternalHttpServiceSetup, InternalHttpServiceStart } from './http';
 import {
   InternalSavedObjectsServiceSetup,
   InternalSavedObjectsServiceStart,
@@ -56,6 +56,7 @@ export interface InternalCoreSetup {
 export interface InternalCoreStart {
   capabilities: CapabilitiesStart;
   elasticsearch: ElasticsearchServiceStart;
+  http: InternalHttpServiceStart;
   savedObjects: InternalSavedObjectsServiceStart;
   uiSettings: InternalUiSettingsServiceStart;
 }
diff --git a/src/core/server/legacy/legacy_internals.test.ts b/src/core/server/legacy/legacy_internals.test.ts
index 2ae5e3a3fd1e8..67f2f433d4570 100644
--- a/src/core/server/legacy/legacy_internals.test.ts
+++ b/src/core/server/legacy/legacy_internals.test.ts
@@ -45,7 +45,7 @@ describe('LegacyInternals', () => {
     beforeEach(async () => {
       uiExports = findLegacyPluginSpecsMock().uiExports;
       config = configMock.create() as any;
-      server = httpServiceMock.createSetupContract().server;
+      server = httpServiceMock.createInternalSetupContract().server;
       legacyInternals = new LegacyInternals(uiExports, config, server);
     });
 
@@ -107,7 +107,7 @@ describe('LegacyInternals', () => {
     beforeEach(async () => {
       uiExports = findLegacyPluginSpecsMock().uiExports;
       config = configMock.create() as any;
-      server = httpServiceMock.createSetupContract().server;
+      server = httpServiceMock.createInternalSetupContract().server;
       legacyInternals = new LegacyInternals(uiExports, config, server);
     });
 
diff --git a/src/core/server/legacy/legacy_service.test.ts b/src/core/server/legacy/legacy_service.test.ts
index d9a0ac5e4ecff..fb9dc0776716a 100644
--- a/src/core/server/legacy/legacy_service.test.ts
+++ b/src/core/server/legacy/legacy_service.test.ts
@@ -85,7 +85,7 @@ beforeEach(() => {
       elasticsearch: { legacy: {} } as any,
       uiSettings: uiSettingsServiceMock.createSetupContract(),
       http: {
-        ...httpServiceMock.createSetupContract(),
+        ...httpServiceMock.createInternalSetupContract(),
         auth: {
           getAuthHeaders: () => undefined,
         } as any,
@@ -119,7 +119,7 @@ beforeEach(() => {
 
   startDeps = {
     core: {
-      ...coreMock.createStart(),
+      ...coreMock.createInternalStart(),
       savedObjects: savedObjectsServiceMock.createInternalStartContract(),
       plugins: { contracts: new Map() },
     },
diff --git a/src/core/server/legacy/legacy_service.ts b/src/core/server/legacy/legacy_service.ts
index 2ced8b4762406..cfc53b10d91f0 100644
--- a/src/core/server/legacy/legacy_service.ts
+++ b/src/core/server/legacy/legacy_service.ts
@@ -264,6 +264,11 @@ export class LegacyService implements CoreService {
     const coreStart: CoreStart = {
       capabilities: startDeps.core.capabilities,
       elasticsearch: startDeps.core.elasticsearch,
+      http: {
+        auth: startDeps.core.http.auth,
+        basePath: startDeps.core.http.basePath,
+        getServerInfo: startDeps.core.http.getServerInfo,
+      },
       savedObjects: {
         getScopedClient: startDeps.core.savedObjects.getScopedClient,
         createScopedRepository: startDeps.core.savedObjects.createScopedRepository,
@@ -302,7 +307,6 @@ export class LegacyService implements CoreService {
           isAuthenticated: setupDeps.core.http.auth.isAuthenticated,
         },
         csp: setupDeps.core.http.csp,
-        isTlsEnabled: setupDeps.core.http.isTlsEnabled,
         getServerInfo: setupDeps.core.http.getServerInfo,
       },
       metrics: {
diff --git a/src/core/server/metrics/metrics_service.test.ts b/src/core/server/metrics/metrics_service.test.ts
index 01a7429745cda..b3cc06ffca1d2 100644
--- a/src/core/server/metrics/metrics_service.test.ts
+++ b/src/core/server/metrics/metrics_service.test.ts
@@ -30,7 +30,7 @@ const testInterval = 100;
 const dummyMetrics = { metricA: 'value', metricB: 'otherValue' };
 
 describe('MetricsService', () => {
-  const httpMock = httpServiceMock.createSetupContract();
+  const httpMock = httpServiceMock.createInternalSetupContract();
   let metricsService: MetricsService;
 
   beforeEach(() => {
diff --git a/src/core/server/metrics/ops_metrics_collector.test.ts b/src/core/server/metrics/ops_metrics_collector.test.ts
index 559588db60a42..9e76895b14578 100644
--- a/src/core/server/metrics/ops_metrics_collector.test.ts
+++ b/src/core/server/metrics/ops_metrics_collector.test.ts
@@ -29,7 +29,7 @@ describe('OpsMetricsCollector', () => {
   let collector: OpsMetricsCollector;
 
   beforeEach(() => {
-    const hapiServer = httpServiceMock.createSetupContract().server;
+    const hapiServer = httpServiceMock.createInternalSetupContract().server;
     collector = new OpsMetricsCollector(hapiServer);
 
     mockOsCollector.collect.mockResolvedValue('osMetrics');
diff --git a/src/core/server/mocks.ts b/src/core/server/mocks.ts
index b6e9ffef6f3f1..f3ae5462f1631 100644
--- a/src/core/server/mocks.ts
+++ b/src/core/server/mocks.ts
@@ -19,7 +19,6 @@
 import { of } from 'rxjs';
 import { duration } from 'moment';
 import { PluginInitializerContext, CoreSetup, CoreStart, StartServicesAccessor } from '.';
-import { CspConfig } from './csp';
 import { loggingServiceMock } from './logging/logging_service.mock';
 import { elasticsearchServiceMock } from './elasticsearch/elasticsearch_service.mock';
 import { httpServiceMock } from './http/http_service.mock';
@@ -112,26 +111,10 @@ function createCoreSetupMock({
   pluginStartDeps?: object;
   pluginStartContract?: any;
 } = {}) {
-  const httpService = httpServiceMock.createSetupContract();
   const httpMock: jest.Mocked<CoreSetup['http']> = {
-    createCookieSessionStorageFactory: httpService.createCookieSessionStorageFactory,
-    registerOnPreAuth: httpService.registerOnPreAuth,
-    registerAuth: httpService.registerAuth,
-    registerOnPostAuth: httpService.registerOnPostAuth,
-    registerOnPreResponse: httpService.registerOnPreResponse,
-    basePath: httpService.basePath,
-    csp: CspConfig.DEFAULT,
-    isTlsEnabled: httpService.isTlsEnabled,
-    createRouter: jest.fn(),
-    registerRouteHandlerContext: jest.fn(),
-    auth: {
-      get: httpService.auth.get,
-      isAuthenticated: httpService.auth.isAuthenticated,
-    },
+    ...httpServiceMock.createSetupContract(),
     resources: httpResourcesMock.createRegistrar(),
-    getServerInfo: httpService.getServerInfo,
   };
-  httpMock.createRouter.mockImplementation(() => httpService.createRouter(''));
 
   const uiSettingsMock = {
     register: uiSettingsServiceMock.createSetupContract().register,
@@ -159,6 +142,7 @@ function createCoreStartMock() {
   const mock: MockedKeys<CoreStart> = {
     capabilities: capabilitiesServiceMock.createStartContract(),
     elasticsearch: elasticsearchServiceMock.createStart(),
+    http: httpServiceMock.createStartContract(),
     savedObjects: savedObjectsServiceMock.createStartContract(),
     uiSettings: uiSettingsServiceMock.createStartContract(),
   };
@@ -171,7 +155,7 @@ function createInternalCoreSetupMock() {
     capabilities: capabilitiesServiceMock.createSetupContract(),
     context: contextServiceMock.createSetupContract(),
     elasticsearch: elasticsearchServiceMock.createInternalSetup(),
-    http: httpServiceMock.createSetupContract(),
+    http: httpServiceMock.createInternalSetupContract(),
     metrics: metricsServiceMock.createInternalSetupContract(),
     savedObjects: savedObjectsServiceMock.createInternalSetupContract(),
     status: statusServiceMock.createInternalSetupContract(),
@@ -187,6 +171,7 @@ function createInternalCoreStartMock() {
   const startDeps: InternalCoreStart = {
     capabilities: capabilitiesServiceMock.createStartContract(),
     elasticsearch: elasticsearchServiceMock.createStart(),
+    http: httpServiceMock.createInternalStartContract(),
     savedObjects: savedObjectsServiceMock.createInternalStartContract(),
     uiSettings: uiSettingsServiceMock.createStartContract(),
   };
diff --git a/src/core/server/plugins/plugin_context.ts b/src/core/server/plugins/plugin_context.ts
index f0db3a25e313d..31e36db49223a 100644
--- a/src/core/server/plugins/plugin_context.ts
+++ b/src/core/server/plugins/plugin_context.ts
@@ -164,7 +164,6 @@ export function createPluginSetupContext<TPlugin, TPluginDependencies>(
       basePath: deps.http.basePath,
       auth: { get: deps.http.auth.get, isAuthenticated: deps.http.auth.isAuthenticated },
       csp: deps.http.csp,
-      isTlsEnabled: deps.http.isTlsEnabled,
       getServerInfo: deps.http.getServerInfo,
     },
     metrics: {
@@ -211,6 +210,11 @@ export function createPluginStartContext<TPlugin, TPluginDependencies>(
       resolveCapabilities: deps.capabilities.resolveCapabilities,
     },
     elasticsearch: deps.elasticsearch,
+    http: {
+      auth: deps.http.auth,
+      basePath: deps.http.basePath,
+      getServerInfo: deps.http.getServerInfo,
+    },
     savedObjects: {
       getScopedClient: deps.savedObjects.getScopedClient,
       createInternalRepository: deps.savedObjects.createInternalRepository,
diff --git a/src/core/server/rendering/__mocks__/params.ts b/src/core/server/rendering/__mocks__/params.ts
index 3e668b3f26ab5..ce2eea119d1bb 100644
--- a/src/core/server/rendering/__mocks__/params.ts
+++ b/src/core/server/rendering/__mocks__/params.ts
@@ -23,7 +23,7 @@ import { pluginServiceMock } from '../../plugins/plugins_service.mock';
 import { legacyServiceMock } from '../../legacy/legacy_service.mock';
 
 const context = mockCoreContext.create();
-const http = httpServiceMock.createSetupContract();
+const http = httpServiceMock.createInternalSetupContract();
 const uiPlugins = pluginServiceMock.createUiPlugins();
 const legacyPlugins = legacyServiceMock.createDiscoverPlugins();
 
diff --git a/src/core/server/saved_objects/saved_objects_service.test.ts b/src/core/server/saved_objects/saved_objects_service.test.ts
index 9fba2728003d2..e8b2cf0b583b1 100644
--- a/src/core/server/saved_objects/saved_objects_service.test.ts
+++ b/src/core/server/saved_objects/saved_objects_service.test.ts
@@ -61,7 +61,7 @@ describe('SavedObjectsService', () => {
   const createSetupDeps = () => {
     const elasticsearchMock = elasticsearchServiceMock.createInternalSetup();
     return {
-      http: httpServiceMock.createSetupContract(),
+      http: httpServiceMock.createInternalSetupContract(),
       elasticsearch: elasticsearchMock,
       legacyPlugins: legacyServiceMock.createDiscoverPlugins(),
     };
diff --git a/src/core/server/server.api.md b/src/core/server/server.api.md
index 833c8918a0860..9dc3ac9b94d96 100644
--- a/src/core/server/server.api.md
+++ b/src/core/server/server.api.md
@@ -657,6 +657,8 @@ export interface CoreStart {
     // (undocumented)
     elasticsearch: ElasticsearchServiceStart;
     // (undocumented)
+    http: HttpServiceStart;
+    // (undocumented)
     savedObjects: SavedObjectsServiceStart;
     // (undocumented)
     uiSettings: UiSettingsServiceStart;
@@ -905,6 +907,12 @@ export type Headers = {
     [header: string]: string | string[] | undefined;
 };
 
+// @public (undocumented)
+export interface HttpAuth {
+    get: GetAuthState;
+    isAuthenticated: IsAuthenticated;
+}
+
 // @public
 export interface HttpResources {
     register: <P, Q, B>(route: RouteConfig<P, Q, B, 'get'>, handler: HttpResourcesRequestHandler<P, Q, B>) => void;
@@ -948,17 +956,13 @@ export interface HttpServerInfo {
 
 // @public
 export interface HttpServiceSetup {
-    // (undocumented)
-    auth: {
-        get: GetAuthState;
-        isAuthenticated: IsAuthenticated;
-    };
+    // @deprecated
+    auth: HttpAuth;
     basePath: IBasePath;
     createCookieSessionStorageFactory: <T>(cookieOptions: SessionStorageCookieOptions<T>) => Promise<SessionStorageFactory<T>>;
     createRouter: () => IRouter;
     csp: ICspConfig;
     getServerInfo: () => HttpServerInfo;
-    isTlsEnabled: boolean;
     registerAuth: (handler: AuthenticationHandler) => void;
     registerOnPostAuth: (handler: OnPostAuthHandler) => void;
     registerOnPreAuth: (handler: OnPreAuthHandler) => void;
@@ -968,7 +972,9 @@ export interface HttpServiceSetup {
 
 // @public (undocumented)
 export interface HttpServiceStart {
-    isListening: (port: number) => boolean;
+    auth: HttpAuth;
+    basePath: IBasePath;
+    getServerInfo: () => HttpServerInfo;
 }
 
 // @public
diff --git a/src/core/server/server.ts b/src/core/server/server.ts
index 6ca580083648f..ae1a02cf71b88 100644
--- a/src/core/server/server.ts
+++ b/src/core/server/server.ts
@@ -202,10 +202,12 @@ export class Server {
     });
     const capabilitiesStart = this.capabilities.start();
     const uiSettingsStart = await this.uiSettings.start();
+    const httpStart = this.http.getStartContract();
 
     this.coreStart = {
       capabilities: capabilitiesStart,
       elasticsearch: elasticsearchStart,
+      http: httpStart,
       savedObjects: savedObjectsStart,
       uiSettings: uiSettingsStart,
     };
@@ -221,6 +223,7 @@ export class Server {
     });
 
     await this.http.start();
+
     await this.rendering.start({
       legacy: this.legacy,
     });
diff --git a/src/core/server/ui_settings/ui_settings_service.test.ts b/src/core/server/ui_settings/ui_settings_service.test.ts
index ebcb0cf1d762f..096ca347e6f4b 100644
--- a/src/core/server/ui_settings/ui_settings_service.test.ts
+++ b/src/core/server/ui_settings/ui_settings_service.test.ts
@@ -49,7 +49,7 @@ describe('uiSettings', () => {
   beforeEach(() => {
     const coreContext = mockCoreContext.create();
     coreContext.configService.atPath.mockReturnValue(new BehaviorSubject({ overrides }));
-    const httpSetup = httpServiceMock.createSetupContract();
+    const httpSetup = httpServiceMock.createInternalSetupContract();
     const savedObjectsSetup = savedObjectsServiceMock.createInternalSetupContract();
     setupDeps = { http: httpSetup, savedObjects: savedObjectsSetup };
     savedObjectsClient = savedObjectsClientMock.create();
diff --git a/x-pack/plugins/canvas/server/routes/custom_elements/create.test.ts b/x-pack/plugins/canvas/server/routes/custom_elements/create.test.ts
index c260d6ca8ac16..db0417434227c 100644
--- a/x-pack/plugins/canvas/server/routes/custom_elements/create.test.ts
+++ b/x-pack/plugins/canvas/server/routes/custom_elements/create.test.ts
@@ -13,12 +13,7 @@ import {
 } from 'src/core/server/mocks';
 import { CUSTOM_ELEMENT_TYPE } from '../../../common/lib/constants';
 import { initializeCreateCustomElementRoute } from './create';
-import {
-  IRouter,
-  kibanaResponseFactory,
-  RequestHandlerContext,
-  RequestHandler,
-} from 'src/core/server';
+import { kibanaResponseFactory, RequestHandlerContext, RequestHandler } from 'src/core/server';
 
 const mockRouteContext = ({
   core: {
@@ -43,7 +38,7 @@ describe('POST custom element', () => {
 
     const httpService = httpServiceMock.createSetupContract();
 
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
     initializeCreateCustomElementRoute({
       router,
       logger: loggingServiceMock.create().get(),
diff --git a/x-pack/plugins/canvas/server/routes/custom_elements/delete.test.ts b/x-pack/plugins/canvas/server/routes/custom_elements/delete.test.ts
index e70fae5d18eaf..98b26ec368ab1 100644
--- a/x-pack/plugins/canvas/server/routes/custom_elements/delete.test.ts
+++ b/x-pack/plugins/canvas/server/routes/custom_elements/delete.test.ts
@@ -6,12 +6,7 @@
 
 import { CUSTOM_ELEMENT_TYPE } from '../../../common/lib/constants';
 import { initializeDeleteCustomElementRoute } from './delete';
-import {
-  IRouter,
-  kibanaResponseFactory,
-  RequestHandlerContext,
-  RequestHandler,
-} from 'src/core/server';
+import { kibanaResponseFactory, RequestHandlerContext, RequestHandler } from 'src/core/server';
 import {
   savedObjectsClientMock,
   httpServiceMock,
@@ -32,7 +27,7 @@ describe('DELETE custom element', () => {
 
   beforeEach(() => {
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
     initializeDeleteCustomElementRoute({
       router,
       logger: loggingServiceMock.create().get(),
diff --git a/x-pack/plugins/canvas/server/routes/custom_elements/find.test.ts b/x-pack/plugins/canvas/server/routes/custom_elements/find.test.ts
index 6644d3b56c681..dead9ded8a14a 100644
--- a/x-pack/plugins/canvas/server/routes/custom_elements/find.test.ts
+++ b/x-pack/plugins/canvas/server/routes/custom_elements/find.test.ts
@@ -5,12 +5,7 @@
  */
 
 import { initializeFindCustomElementsRoute } from './find';
-import {
-  IRouter,
-  kibanaResponseFactory,
-  RequestHandlerContext,
-  RequestHandler,
-} from 'src/core/server';
+import { kibanaResponseFactory, RequestHandlerContext, RequestHandler } from 'src/core/server';
 import {
   savedObjectsClientMock,
   httpServiceMock,
@@ -31,7 +26,7 @@ describe('Find custom element', () => {
 
   beforeEach(() => {
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
     initializeFindCustomElementsRoute({
       router,
       logger: loggingServiceMock.create().get(),
diff --git a/x-pack/plugins/canvas/server/routes/custom_elements/get.test.ts b/x-pack/plugins/canvas/server/routes/custom_elements/get.test.ts
index 03ae6048801bf..09b620aeff9bb 100644
--- a/x-pack/plugins/canvas/server/routes/custom_elements/get.test.ts
+++ b/x-pack/plugins/canvas/server/routes/custom_elements/get.test.ts
@@ -6,12 +6,7 @@
 
 import { CUSTOM_ELEMENT_TYPE } from '../../../common/lib/constants';
 import { initializeGetCustomElementRoute } from './get';
-import {
-  IRouter,
-  kibanaResponseFactory,
-  RequestHandlerContext,
-  RequestHandler,
-} from 'src/core/server';
+import { kibanaResponseFactory, RequestHandlerContext, RequestHandler } from 'src/core/server';
 import {
   savedObjectsClientMock,
   httpServiceMock,
@@ -32,7 +27,7 @@ describe('GET custom element', () => {
 
   beforeEach(() => {
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
     initializeGetCustomElementRoute({
       router,
       logger: loggingServiceMock.create().get(),
diff --git a/x-pack/plugins/canvas/server/routes/custom_elements/update.test.ts b/x-pack/plugins/canvas/server/routes/custom_elements/update.test.ts
index e67e42c26cd2b..19477458bacb5 100644
--- a/x-pack/plugins/canvas/server/routes/custom_elements/update.test.ts
+++ b/x-pack/plugins/canvas/server/routes/custom_elements/update.test.ts
@@ -8,12 +8,7 @@ import sinon from 'sinon';
 import { CustomElement } from '../../../types';
 import { CUSTOM_ELEMENT_TYPE } from '../../../common/lib/constants';
 import { initializeUpdateCustomElementRoute } from './update';
-import {
-  IRouter,
-  kibanaResponseFactory,
-  RequestHandlerContext,
-  RequestHandler,
-} from 'src/core/server';
+import { kibanaResponseFactory, RequestHandlerContext, RequestHandler } from 'src/core/server';
 import {
   savedObjectsClientMock,
   httpServiceMock,
@@ -57,7 +52,7 @@ describe('PUT custom element', () => {
     clock = sinon.useFakeTimers(now);
 
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
     initializeUpdateCustomElementRoute({
       router,
       logger: loggingServiceMock.create().get(),
diff --git a/x-pack/plugins/canvas/server/routes/es_fields/es_fields.test.ts b/x-pack/plugins/canvas/server/routes/es_fields/es_fields.test.ts
index c3588957ff68e..93fdb4304acc6 100644
--- a/x-pack/plugins/canvas/server/routes/es_fields/es_fields.test.ts
+++ b/x-pack/plugins/canvas/server/routes/es_fields/es_fields.test.ts
@@ -5,12 +5,7 @@
  */
 
 import { initializeESFieldsRoute } from './es_fields';
-import {
-  IRouter,
-  kibanaResponseFactory,
-  RequestHandlerContext,
-  RequestHandler,
-} from 'src/core/server';
+import { kibanaResponseFactory, RequestHandlerContext, RequestHandler } from 'src/core/server';
 import {
   httpServiceMock,
   httpServerMock,
@@ -31,7 +26,7 @@ describe('Retrieve ES Fields', () => {
 
   beforeEach(() => {
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
     initializeESFieldsRoute({
       router,
       logger: loggingServiceMock.create().get(),
diff --git a/x-pack/plugins/canvas/server/routes/shareables/download.test.ts b/x-pack/plugins/canvas/server/routes/shareables/download.test.ts
index be4765217d7aa..75eeb46c890d5 100644
--- a/x-pack/plugins/canvas/server/routes/shareables/download.test.ts
+++ b/x-pack/plugins/canvas/server/routes/shareables/download.test.ts
@@ -7,12 +7,7 @@
 jest.mock('fs');
 
 import fs from 'fs';
-import {
-  IRouter,
-  kibanaResponseFactory,
-  RequestHandlerContext,
-  RequestHandler,
-} from 'src/core/server';
+import { kibanaResponseFactory, RequestHandlerContext, RequestHandler } from 'src/core/server';
 import { httpServiceMock, httpServerMock, loggingServiceMock } from 'src/core/server/mocks';
 import { initializeDownloadShareableWorkpadRoute } from './download';
 
@@ -25,7 +20,7 @@ describe('Download Canvas shareables runtime', () => {
 
   beforeEach(() => {
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
     initializeDownloadShareableWorkpadRoute({
       router,
       logger: loggingServiceMock.create().get(),
diff --git a/x-pack/plugins/canvas/server/routes/shareables/zip.test.ts b/x-pack/plugins/canvas/server/routes/shareables/zip.test.ts
index 63776f897a04c..5a2d122c2754b 100644
--- a/x-pack/plugins/canvas/server/routes/shareables/zip.test.ts
+++ b/x-pack/plugins/canvas/server/routes/shareables/zip.test.ts
@@ -7,12 +7,7 @@
 jest.mock('archiver');
 
 const archiver = require('archiver') as jest.Mock;
-import {
-  IRouter,
-  kibanaResponseFactory,
-  RequestHandlerContext,
-  RequestHandler,
-} from 'src/core/server';
+import { kibanaResponseFactory, RequestHandlerContext, RequestHandler } from 'src/core/server';
 import { httpServiceMock, httpServerMock, loggingServiceMock } from 'src/core/server/mocks';
 import { initializeZipShareableWorkpadRoute } from './zip';
 import { API_ROUTE_SHAREABLE_ZIP } from '../../../common/lib';
@@ -31,7 +26,7 @@ describe('Zips Canvas shareables runtime together with workpad', () => {
 
   beforeEach(() => {
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
     initializeZipShareableWorkpadRoute({
       router,
       logger: loggingServiceMock.create().get(),
diff --git a/x-pack/plugins/canvas/server/routes/workpad/create.test.ts b/x-pack/plugins/canvas/server/routes/workpad/create.test.ts
index 02b6376ece2ed..2ed63e7397108 100644
--- a/x-pack/plugins/canvas/server/routes/workpad/create.test.ts
+++ b/x-pack/plugins/canvas/server/routes/workpad/create.test.ts
@@ -13,12 +13,7 @@ import {
 } from 'src/core/server/mocks';
 import { CANVAS_TYPE } from '../../../common/lib/constants';
 import { initializeCreateWorkpadRoute } from './create';
-import {
-  IRouter,
-  kibanaResponseFactory,
-  RequestHandlerContext,
-  RequestHandler,
-} from 'src/core/server';
+import { kibanaResponseFactory, RequestHandlerContext, RequestHandler } from 'src/core/server';
 
 const mockRouteContext = ({
   core: {
@@ -43,7 +38,7 @@ describe('POST workpad', () => {
 
     const httpService = httpServiceMock.createSetupContract();
 
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
     initializeCreateWorkpadRoute({
       router,
       logger: loggingServiceMock.create().get(),
diff --git a/x-pack/plugins/canvas/server/routes/workpad/delete.test.ts b/x-pack/plugins/canvas/server/routes/workpad/delete.test.ts
index 57df4e7cffda6..712ff29400382 100644
--- a/x-pack/plugins/canvas/server/routes/workpad/delete.test.ts
+++ b/x-pack/plugins/canvas/server/routes/workpad/delete.test.ts
@@ -6,12 +6,7 @@
 
 import { CANVAS_TYPE } from '../../../common/lib/constants';
 import { initializeDeleteWorkpadRoute } from './delete';
-import {
-  IRouter,
-  kibanaResponseFactory,
-  RequestHandlerContext,
-  RequestHandler,
-} from 'src/core/server';
+import { kibanaResponseFactory, RequestHandlerContext, RequestHandler } from 'src/core/server';
 import {
   savedObjectsClientMock,
   httpServiceMock,
@@ -32,7 +27,7 @@ describe('DELETE workpad', () => {
 
   beforeEach(() => {
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
     initializeDeleteWorkpadRoute({
       router,
       logger: loggingServiceMock.create().get(),
diff --git a/x-pack/plugins/canvas/server/routes/workpad/find.test.ts b/x-pack/plugins/canvas/server/routes/workpad/find.test.ts
index 08de9b20e9818..e2dd8552379b7 100644
--- a/x-pack/plugins/canvas/server/routes/workpad/find.test.ts
+++ b/x-pack/plugins/canvas/server/routes/workpad/find.test.ts
@@ -5,12 +5,7 @@
  */
 
 import { initializeFindWorkpadsRoute } from './find';
-import {
-  IRouter,
-  kibanaResponseFactory,
-  RequestHandlerContext,
-  RequestHandler,
-} from 'src/core/server';
+import { kibanaResponseFactory, RequestHandlerContext, RequestHandler } from 'src/core/server';
 import {
   savedObjectsClientMock,
   httpServiceMock,
@@ -31,7 +26,7 @@ describe('Find workpad', () => {
 
   beforeEach(() => {
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
     initializeFindWorkpadsRoute({
       router,
       logger: loggingServiceMock.create().get(),
diff --git a/x-pack/plugins/canvas/server/routes/workpad/get.test.ts b/x-pack/plugins/canvas/server/routes/workpad/get.test.ts
index 6741f2b3fc9d6..9ecd9ceefed8d 100644
--- a/x-pack/plugins/canvas/server/routes/workpad/get.test.ts
+++ b/x-pack/plugins/canvas/server/routes/workpad/get.test.ts
@@ -6,12 +6,7 @@
 
 import { CANVAS_TYPE } from '../../../common/lib/constants';
 import { initializeGetWorkpadRoute } from './get';
-import {
-  IRouter,
-  kibanaResponseFactory,
-  RequestHandlerContext,
-  RequestHandler,
-} from 'src/core/server';
+import { kibanaResponseFactory, RequestHandlerContext, RequestHandler } from 'src/core/server';
 import {
   savedObjectsClientMock,
   httpServiceMock,
@@ -34,7 +29,7 @@ describe('GET workpad', () => {
 
   beforeEach(() => {
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
     initializeGetWorkpadRoute({
       router,
       logger: loggingServiceMock.create().get(),
diff --git a/x-pack/plugins/canvas/server/routes/workpad/update.test.ts b/x-pack/plugins/canvas/server/routes/workpad/update.test.ts
index a6b34e7165121..36ea984447d8a 100644
--- a/x-pack/plugins/canvas/server/routes/workpad/update.test.ts
+++ b/x-pack/plugins/canvas/server/routes/workpad/update.test.ts
@@ -7,12 +7,7 @@
 import sinon from 'sinon';
 import { CANVAS_TYPE } from '../../../common/lib/constants';
 import { initializeUpdateWorkpadRoute, initializeUpdateWorkpadAssetsRoute } from './update';
-import {
-  IRouter,
-  kibanaResponseFactory,
-  RequestHandlerContext,
-  RequestHandler,
-} from 'src/core/server';
+import { kibanaResponseFactory, RequestHandlerContext, RequestHandler } from 'src/core/server';
 import {
   savedObjectsClientMock,
   httpServiceMock,
@@ -44,7 +39,7 @@ describe('PUT workpad', () => {
     clock = sinon.useFakeTimers(now);
 
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
     initializeUpdateWorkpadRoute({
       router,
       logger: loggingServiceMock.create().get(),
@@ -158,7 +153,7 @@ describe('update assets', () => {
   beforeEach(() => {
     clock = sinon.useFakeTimers(now);
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
     initializeUpdateWorkpadAssetsRoute({
       router,
       logger: loggingServiceMock.create().get(),
diff --git a/x-pack/plugins/case/server/routes/api/__fixtures__/mock_router.ts b/x-pack/plugins/case/server/routes/api/__fixtures__/mock_router.ts
index eff91fff32c02..e00c1c111b41b 100644
--- a/x-pack/plugins/case/server/routes/api/__fixtures__/mock_router.ts
+++ b/x-pack/plugins/case/server/routes/api/__fixtures__/mock_router.ts
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { IRouter } from 'kibana/server';
 import { loggingServiceMock, httpServiceMock } from '../../../../../../../src/core/server/mocks';
 import { CaseService, CaseConfigureService } from '../../../services';
 import { authenticationMock } from '../__fixtures__';
@@ -16,7 +15,7 @@ export const createRoute = async (
   badAuth = false
 ) => {
   const httpService = httpServiceMock.createSetupContract();
-  const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+  const router = httpService.createRouter();
 
   const log = loggingServiceMock.create().get('case');
 
diff --git a/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_create_route.test.ts b/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_create_route.test.ts
index 0b5f04556596a..cf2349bc7023c 100644
--- a/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_create_route.test.ts
+++ b/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_create_route.test.ts
@@ -5,7 +5,7 @@
  */
 
 import { httpServiceMock, httpServerMock } from 'src/core/server/mocks';
-import { IRouter, kibanaResponseFactory, RequestHandler } from 'src/core/server';
+import { kibanaResponseFactory, RequestHandler } from 'src/core/server';
 
 import { isEsError } from '../../../shared_imports';
 import { formatEsError } from '../../../lib/format_es_error';
@@ -19,7 +19,7 @@ describe('[CCR API] Create auto-follow pattern', () => {
   let routeHandler: RequestHandler<any, any, any>;
 
   beforeEach(() => {
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     registerCreateRoute({
       router,
diff --git a/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_delete_route.test.ts b/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_delete_route.test.ts
index 7468c643a3aa6..b2a3b631333b4 100644
--- a/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_delete_route.test.ts
+++ b/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_delete_route.test.ts
@@ -5,7 +5,7 @@
  */
 
 import { httpServiceMock, httpServerMock } from 'src/core/server/mocks';
-import { IRouter, kibanaResponseFactory, RequestHandler } from 'src/core/server';
+import { kibanaResponseFactory, RequestHandler } from 'src/core/server';
 
 import { isEsError } from '../../../shared_imports';
 import { formatEsError } from '../../../lib/format_es_error';
@@ -19,7 +19,7 @@ describe('[CCR API] Delete auto-follow pattern(s)', () => {
   let routeHandler: RequestHandler<any, any, any>;
 
   beforeEach(() => {
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     registerDeleteRoute({
       router,
diff --git a/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_fetch_route.test.ts b/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_fetch_route.test.ts
index 1aa7112c75276..4f2417ec816f4 100644
--- a/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_fetch_route.test.ts
+++ b/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_fetch_route.test.ts
@@ -5,7 +5,7 @@
  */
 
 import { httpServiceMock, httpServerMock } from 'src/core/server/mocks';
-import { IRouter, kibanaResponseFactory, RequestHandler } from 'src/core/server';
+import { kibanaResponseFactory, RequestHandler } from 'src/core/server';
 
 import { isEsError } from '../../../shared_imports';
 import { formatEsError } from '../../../lib/format_es_error';
@@ -19,7 +19,7 @@ describe('[CCR API] Fetch all auto-follow patterns', () => {
   let routeHandler: RequestHandler<any, any, any>;
 
   beforeEach(() => {
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     registerFetchRoute({
       router,
diff --git a/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_get_route.test.ts b/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_get_route.test.ts
index 980128027c2f9..802aebd6412fe 100644
--- a/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_get_route.test.ts
+++ b/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_get_route.test.ts
@@ -5,7 +5,7 @@
  */
 
 import { httpServiceMock, httpServerMock } from 'src/core/server/mocks';
-import { IRouter, kibanaResponseFactory, RequestHandler } from 'src/core/server';
+import { kibanaResponseFactory, RequestHandler } from 'src/core/server';
 
 import { isEsError } from '../../../shared_imports';
 import { formatEsError } from '../../../lib/format_es_error';
@@ -19,7 +19,7 @@ describe('[CCR API] Get one auto-follow pattern', () => {
   let routeHandler: RequestHandler<any, any, any>;
 
   beforeEach(() => {
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     registerGetRoute({
       router,
diff --git a/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_pause_route.test.ts b/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_pause_route.test.ts
index 5b27c77ca86de..a92a9b5edb9b7 100644
--- a/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_pause_route.test.ts
+++ b/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_pause_route.test.ts
@@ -5,7 +5,7 @@
  */
 
 import { httpServiceMock, httpServerMock } from 'src/core/server/mocks';
-import { IRouter, kibanaResponseFactory, RequestHandler } from 'src/core/server';
+import { kibanaResponseFactory, RequestHandler } from 'src/core/server';
 
 import { isEsError } from '../../../shared_imports';
 import { formatEsError } from '../../../lib/format_es_error';
@@ -19,7 +19,7 @@ describe('[CCR API] Pause auto-follow pattern(s)', () => {
   let routeHandler: RequestHandler<any, any, any>;
 
   beforeEach(() => {
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     registerPauseRoute({
       router,
diff --git a/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_resume_route.test.ts b/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_resume_route.test.ts
index afea0f631fe48..4ee77b1b3deaa 100644
--- a/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_resume_route.test.ts
+++ b/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_resume_route.test.ts
@@ -5,7 +5,7 @@
  */
 
 import { httpServiceMock, httpServerMock } from 'src/core/server/mocks';
-import { IRouter, kibanaResponseFactory, RequestHandler } from 'src/core/server';
+import { kibanaResponseFactory, RequestHandler } from 'src/core/server';
 
 import { isEsError } from '../../../shared_imports';
 import { formatEsError } from '../../../lib/format_es_error';
@@ -19,7 +19,7 @@ describe('[CCR API] Resume auto-follow pattern(s)', () => {
   let routeHandler: RequestHandler<any, any, any>;
 
   beforeEach(() => {
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     registerResumeRoute({
       router,
diff --git a/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_update_route.test.ts b/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_update_route.test.ts
index bdce84f6404b1..711538e2a1ee0 100644
--- a/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_update_route.test.ts
+++ b/x-pack/plugins/cross_cluster_replication/server/routes/api/auto_follow_pattern/register_update_route.test.ts
@@ -5,7 +5,7 @@
  */
 
 import { httpServiceMock, httpServerMock } from 'src/core/server/mocks';
-import { IRouter, kibanaResponseFactory, RequestHandler } from 'src/core/server';
+import { kibanaResponseFactory, RequestHandler } from 'src/core/server';
 
 import { isEsError } from '../../../shared_imports';
 import { formatEsError } from '../../../lib/format_es_error';
@@ -19,7 +19,7 @@ describe('[CCR API] Update auto-follow pattern', () => {
   let routeHandler: RequestHandler<any, any, any>;
 
   beforeEach(() => {
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     registerUpdateRoute({
       router,
diff --git a/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_create_route.test.ts b/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_create_route.test.ts
index ccf7c469fe780..de21458c0a25f 100644
--- a/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_create_route.test.ts
+++ b/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_create_route.test.ts
@@ -5,7 +5,7 @@
  */
 
 import { httpServiceMock, httpServerMock } from 'src/core/server/mocks';
-import { IRouter, kibanaResponseFactory, RequestHandler } from 'src/core/server';
+import { kibanaResponseFactory, RequestHandler } from 'src/core/server';
 
 import { isEsError } from '../../../shared_imports';
 import { formatEsError } from '../../../lib/format_es_error';
@@ -19,7 +19,7 @@ describe('[CCR API] Create follower index', () => {
   let routeHandler: RequestHandler<any, any, any>;
 
   beforeEach(() => {
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     registerCreateRoute({
       router,
diff --git a/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_fetch_route.test.ts b/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_fetch_route.test.ts
index e1ec28a7c90b1..ec52f1e431e38 100644
--- a/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_fetch_route.test.ts
+++ b/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_fetch_route.test.ts
@@ -5,7 +5,7 @@
  */
 
 import { httpServiceMock, httpServerMock } from 'src/core/server/mocks';
-import { IRouter, kibanaResponseFactory, RequestHandler } from 'src/core/server';
+import { kibanaResponseFactory, RequestHandler } from 'src/core/server';
 
 import { isEsError } from '../../../shared_imports';
 import { formatEsError } from '../../../lib/format_es_error';
@@ -19,7 +19,7 @@ describe('[CCR API] Fetch all follower indices', () => {
   let routeHandler: RequestHandler<any, any, any>;
 
   beforeEach(() => {
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     registerFetchRoute({
       router,
diff --git a/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_get_route.test.ts b/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_get_route.test.ts
index 99c871d5d4f2d..a0feeb2b1e5bc 100644
--- a/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_get_route.test.ts
+++ b/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_get_route.test.ts
@@ -5,7 +5,7 @@
  */
 
 import { httpServiceMock, httpServerMock } from 'src/core/server/mocks';
-import { IRouter, kibanaResponseFactory, RequestHandler } from 'src/core/server';
+import { kibanaResponseFactory, RequestHandler } from 'src/core/server';
 
 import { isEsError } from '../../../shared_imports';
 import { formatEsError } from '../../../lib/format_es_error';
@@ -19,7 +19,7 @@ describe('[CCR API] Get one follower index', () => {
   let routeHandler: RequestHandler<any, any, any>;
 
   beforeEach(() => {
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     registerGetRoute({
       router,
diff --git a/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_pause_route.test.ts b/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_pause_route.test.ts
index 3d28d36ac6182..dcbec8703622e 100644
--- a/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_pause_route.test.ts
+++ b/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_pause_route.test.ts
@@ -5,7 +5,7 @@
  */
 
 import { httpServiceMock, httpServerMock } from 'src/core/server/mocks';
-import { IRouter, kibanaResponseFactory, RequestHandler } from 'src/core/server';
+import { kibanaResponseFactory, RequestHandler } from 'src/core/server';
 
 import { isEsError } from '../../../shared_imports';
 import { formatEsError } from '../../../lib/format_es_error';
@@ -19,7 +19,7 @@ describe('[CCR API] Pause follower index/indices', () => {
   let routeHandler: RequestHandler<any, any, any>;
 
   beforeEach(() => {
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     registerPauseRoute({
       router,
diff --git a/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_resume_route.test.ts b/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_resume_route.test.ts
index 09975b262dca8..30d25c3bc4d03 100644
--- a/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_resume_route.test.ts
+++ b/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_resume_route.test.ts
@@ -5,7 +5,7 @@
  */
 
 import { httpServiceMock, httpServerMock } from 'src/core/server/mocks';
-import { IRouter, kibanaResponseFactory, RequestHandler } from 'src/core/server';
+import { kibanaResponseFactory, RequestHandler } from 'src/core/server';
 
 import { isEsError } from '../../../shared_imports';
 import { formatEsError } from '../../../lib/format_es_error';
@@ -19,7 +19,7 @@ describe('[CCR API] Resume follower index/indices', () => {
   let routeHandler: RequestHandler<any, any, any>;
 
   beforeEach(() => {
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     registerResumeRoute({
       router,
diff --git a/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_unfollow_route.test.ts b/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_unfollow_route.test.ts
index 5f0d148bfcae9..a56eb8178b478 100644
--- a/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_unfollow_route.test.ts
+++ b/x-pack/plugins/cross_cluster_replication/server/routes/api/follower_index/register_unfollow_route.test.ts
@@ -5,7 +5,7 @@
  */
 
 import { httpServiceMock, httpServerMock } from 'src/core/server/mocks';
-import { IRouter, kibanaResponseFactory, RequestHandler } from 'src/core/server';
+import { kibanaResponseFactory, RequestHandler } from 'src/core/server';
 
 import { isEsError } from '../../../shared_imports';
 import { formatEsError } from '../../../lib/format_es_error';
@@ -19,7 +19,7 @@ describe('[CCR API] Unfollow follower index/indices', () => {
   let routeHandler: RequestHandler<any, any, any>;
 
   beforeEach(() => {
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     registerUnfollowRoute({
       router,
diff --git a/x-pack/plugins/index_management/server/routes/api/component_templates/privileges.test.ts b/x-pack/plugins/index_management/server/routes/api/component_templates/privileges.test.ts
index b34ffe3e0baf5..060a423350ada 100644
--- a/x-pack/plugins/index_management/server/routes/api/component_templates/privileges.test.ts
+++ b/x-pack/plugins/index_management/server/routes/api/component_templates/privileges.test.ts
@@ -4,12 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { httpServerMock, httpServiceMock } from 'src/core/server/mocks';
-import {
-  kibanaResponseFactory,
-  RequestHandlerContext,
-  RequestHandler,
-  IRouter,
-} from 'src/core/server';
+import { kibanaResponseFactory, RequestHandlerContext, RequestHandler } from 'src/core/server';
 
 import { License } from '../../../services/license';
 import { IndexDataEnricher } from '../../../services/index_data_enricher';
@@ -46,7 +41,7 @@ describe('GET privileges', () => {
   let routeHandler: RequestHandler<any, any, any>;
 
   beforeEach(() => {
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     registerPrivilegesRoute({
       router,
@@ -115,7 +110,7 @@ describe('GET privileges', () => {
 
   describe('With security disabled', () => {
     beforeEach(() => {
-      const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+      const router = httpService.createRouter();
 
       registerPrivilegesRoute({
         router,
diff --git a/x-pack/plugins/security/server/plugin.test.ts b/x-pack/plugins/security/server/plugin.test.ts
index e01c608e5f306..627d1408673be 100644
--- a/x-pack/plugins/security/server/plugin.test.ts
+++ b/x-pack/plugins/security/server/plugin.test.ts
@@ -36,7 +36,12 @@ describe('Security Plugin', () => {
     );
 
     mockCoreSetup = coreMock.createSetup();
-    mockCoreSetup.http.isTlsEnabled = true;
+    mockCoreSetup.http.getServerInfo.mockReturnValue({
+      host: 'localhost',
+      name: 'kibana',
+      port: 80,
+      protocol: 'https',
+    });
 
     mockClusterClient = elasticsearchServiceMock.createCustomClusterClient();
     mockCoreSetup.elasticsearch.legacy.createClient.mockReturnValue(mockClusterClient);
diff --git a/x-pack/plugins/security/server/plugin.ts b/x-pack/plugins/security/server/plugin.ts
index c8f47aaae7b5d..a14617c8489cc 100644
--- a/x-pack/plugins/security/server/plugin.ts
+++ b/x-pack/plugins/security/server/plugin.ts
@@ -118,7 +118,7 @@ export class Plugin {
       this.initializerContext.config.create<TypeOf<typeof ConfigSchema>>().pipe(
         map((rawConfig) =>
           createConfig(rawConfig, this.initializerContext.logger.get('config'), {
-            isTLSEnabled: core.http.isTlsEnabled,
+            isTLSEnabled: core.http.getServerInfo().protocol === 'https',
           })
         )
       ),
diff --git a/x-pack/plugins/spaces/server/routes/api/external/copy_to_space.test.ts b/x-pack/plugins/spaces/server/routes/api/external/copy_to_space.test.ts
index 09fc990e9935c..53f5a219dda5b 100644
--- a/x-pack/plugins/spaces/server/routes/api/external/copy_to_space.test.ts
+++ b/x-pack/plugins/spaces/server/routes/api/external/copy_to_space.test.ts
@@ -14,7 +14,7 @@ import {
   createResolveSavedObjectsImportErrorsMock,
   createMockSavedObjectsService,
 } from '../__fixtures__';
-import { CoreSetup, IRouter, kibanaResponseFactory, RouteValidatorConfig } from 'src/core/server';
+import { CoreSetup, kibanaResponseFactory, RouteValidatorConfig } from 'src/core/server';
 import {
   loggingServiceMock,
   httpServiceMock,
@@ -54,7 +54,7 @@ describe('copy to space', () => {
 
   const setup = async () => {
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     const savedObjectsRepositoryMock = createMockSavedObjectsRepository(spacesSavedObjects);
 
diff --git a/x-pack/plugins/spaces/server/routes/api/external/delete.test.ts b/x-pack/plugins/spaces/server/routes/api/external/delete.test.ts
index 774b794d77e29..f31ef657642e7 100644
--- a/x-pack/plugins/spaces/server/routes/api/external/delete.test.ts
+++ b/x-pack/plugins/spaces/server/routes/api/external/delete.test.ts
@@ -13,7 +13,6 @@ import {
 } from '../__fixtures__';
 import {
   CoreSetup,
-  IRouter,
   kibanaResponseFactory,
   RouteValidatorConfig,
   SavedObjectsErrorHelpers,
@@ -37,7 +36,7 @@ describe('Spaces Public API', () => {
 
   const setup = async () => {
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     const savedObjectsRepositoryMock = createMockSavedObjectsRepository(spacesSavedObjects);
 
diff --git a/x-pack/plugins/spaces/server/routes/api/external/get.test.ts b/x-pack/plugins/spaces/server/routes/api/external/get.test.ts
index 19f9b81baa0b0..55e153cf47f5b 100644
--- a/x-pack/plugins/spaces/server/routes/api/external/get.test.ts
+++ b/x-pack/plugins/spaces/server/routes/api/external/get.test.ts
@@ -11,7 +11,7 @@ import {
   mockRouteContext,
 } from '../__fixtures__';
 import { initGetSpaceApi } from './get';
-import { CoreSetup, IRouter, kibanaResponseFactory } from 'src/core/server';
+import { CoreSetup, kibanaResponseFactory } from 'src/core/server';
 import {
   loggingServiceMock,
   httpServiceMock,
@@ -30,7 +30,7 @@ describe('GET space', () => {
 
   const setup = async () => {
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     const coreStart = coreMock.createStart();
 
diff --git a/x-pack/plugins/spaces/server/routes/api/external/get_all.test.ts b/x-pack/plugins/spaces/server/routes/api/external/get_all.test.ts
index 380cc9dbe5abf..aabd4900c5469 100644
--- a/x-pack/plugins/spaces/server/routes/api/external/get_all.test.ts
+++ b/x-pack/plugins/spaces/server/routes/api/external/get_all.test.ts
@@ -10,7 +10,7 @@ import {
   mockRouteContext,
   mockRouteContextWithInvalidLicense,
 } from '../__fixtures__';
-import { CoreSetup, kibanaResponseFactory, IRouter } from 'src/core/server';
+import { CoreSetup, kibanaResponseFactory } from 'src/core/server';
 import {
   loggingServiceMock,
   httpServiceMock,
@@ -30,7 +30,7 @@ describe('GET /spaces/space', () => {
 
   const setup = async () => {
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     const coreStart = coreMock.createStart();
 
diff --git a/x-pack/plugins/spaces/server/routes/api/external/post.test.ts b/x-pack/plugins/spaces/server/routes/api/external/post.test.ts
index ca3afc04b9798..5e09308f07d31 100644
--- a/x-pack/plugins/spaces/server/routes/api/external/post.test.ts
+++ b/x-pack/plugins/spaces/server/routes/api/external/post.test.ts
@@ -10,7 +10,7 @@ import {
   mockRouteContext,
   mockRouteContextWithInvalidLicense,
 } from '../__fixtures__';
-import { CoreSetup, kibanaResponseFactory, IRouter, RouteValidatorConfig } from 'src/core/server';
+import { CoreSetup, kibanaResponseFactory, RouteValidatorConfig } from 'src/core/server';
 import {
   loggingServiceMock,
   httpServerMock,
@@ -30,7 +30,7 @@ describe('Spaces Public API', () => {
 
   const setup = async () => {
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     const coreStart = coreMock.createStart();
 
diff --git a/x-pack/plugins/spaces/server/routes/api/external/put.test.ts b/x-pack/plugins/spaces/server/routes/api/external/put.test.ts
index 62444fd3e4dfd..7b068d3784043 100644
--- a/x-pack/plugins/spaces/server/routes/api/external/put.test.ts
+++ b/x-pack/plugins/spaces/server/routes/api/external/put.test.ts
@@ -11,7 +11,7 @@ import {
   mockRouteContext,
   mockRouteContextWithInvalidLicense,
 } from '../__fixtures__';
-import { CoreSetup, IRouter, kibanaResponseFactory, RouteValidatorConfig } from 'src/core/server';
+import { CoreSetup, kibanaResponseFactory, RouteValidatorConfig } from 'src/core/server';
 import {
   loggingServiceMock,
   httpServiceMock,
@@ -31,7 +31,7 @@ describe('PUT /api/spaces/space', () => {
 
   const setup = async () => {
     const httpService = httpServiceMock.createSetupContract();
-    const router = httpService.createRouter('') as jest.Mocked<IRouter>;
+    const router = httpService.createRouter();
 
     const coreStart = coreMock.createStart();
 

From e552a96121112f37f970ef4395d67eaf3a27c7b0 Mon Sep 17 00:00:00 2001
From: Frank Hassanabad <frank.hassanabad@elastic.co>
Date: Thu, 18 Jun 2020 08:16:39 -0600
Subject: [PATCH 21/63] [SIEM] Fixes REST formatter bugs from io-ts migration

## Summary

Fixes io-ts formatter bugs for REST and validation by:

* First trying to get the correct key from the io-ts context. If no keys are found, then it will fall back on trying to get the first name from the context.
* If the key is a value and an object then this will do a `JSON.stringify()` on the value object
* This fixes a few places where `formatError` was not being used within the code base resulting in `[object Object]` within the validations to show up.

### Checklist

- [x] [Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios
---
 .../schemas/types/default_comments_array.ts   |  8 ++--
 .../schemas/types/default_entries_array.ts    |  4 +-
 .../common/schemas/types/default_namespace.ts |  4 +-
 .../add_prepackged_rules_schema.test.ts       | 39 ++++++++++--------
 .../request/create_rules_bulk_schema.test.ts  |  3 +-
 .../request/create_rules_schema.test.ts       | 39 ++++++++++--------
 .../request/export_rules_schema.test.ts       | 12 +++---
 .../request/import_rules_schema.test.ts       | 41 ++++++++++---------
 .../request/patch_rules_bulk_schema.test.ts   |  3 +-
 .../request/patch_rules_schema.test.ts        |  3 +-
 .../request/update_rules_bulk_schema.test.ts  |  3 +-
 .../request/update_rules_schema.test.ts       | 39 ++++++++++--------
 .../types/deafult_boolean_true.test.ts        |  4 +-
 .../schemas/types/deafult_from_string.test.ts |  4 +-
 .../types/default_actions_array.test.ts       |  4 +-
 .../schemas/types/default_actions_array.ts    |  3 +-
 .../types/default_boolean_false.test.ts       |  4 +-
 .../schemas/types/default_boolean_false.ts    |  4 +-
 .../schemas/types/default_boolean_true.ts     |  3 +-
 .../types/default_empty_string.test.ts        |  4 +-
 .../schemas/types/default_empty_string.ts     |  3 +-
 .../types/default_export_file_name.test.ts    |  4 +-
 .../schemas/types/default_export_file_name.ts |  4 +-
 .../schemas/types/default_from_string.ts      |  4 +-
 .../types/default_interval_string.test.ts     |  4 +-
 .../schemas/types/default_interval_string.ts  |  3 +-
 .../types/default_language_string.test.ts     |  4 +-
 .../schemas/types/default_language_string.ts  |  4 +-
 .../types/default_max_signals_number.test.ts  | 12 ++++--
 .../types/default_max_signals_number.ts       |  4 +-
 .../schemas/types/default_page.test.ts        | 16 ++++++--
 .../schemas/types/default_page.ts             |  6 +--
 .../schemas/types/default_per_page.test.ts    | 16 ++++++--
 .../schemas/types/default_per_page.ts         |  6 +--
 .../types/default_string_array.test.ts        |  4 +-
 .../schemas/types/default_string_array.ts     |  4 +-
 .../default_string_boolean_false.test.ts      | 12 ++++--
 .../types/default_string_boolean_false.ts     |  4 +-
 .../types/default_threat_array.test.ts        |  4 +-
 .../schemas/types/default_threat_array.ts     |  3 +-
 .../types/default_throttle_null.test.ts       |  4 +-
 .../schemas/types/default_throttle_null.ts    |  4 +-
 .../schemas/types/default_to_string.test.ts   |  4 +-
 .../schemas/types/default_to_string.ts        |  5 ++-
 .../schemas/types/default_uuid.test.ts        |  2 +-
 .../schemas/types/default_uuid.ts             |  4 +-
 .../types/default_version_number.test.ts      | 12 ++++--
 .../schemas/types/default_version_number.ts   |  3 +-
 .../schemas/types/iso_date_string.test.ts     |  8 ++--
 .../schemas/types/lists_default_array.test.ts |  4 +-
 .../schemas/types/lists_default_array.ts      |  4 +-
 .../schemas/types/non_empty_string.test.ts    | 12 ++++--
 .../schemas/types/only_false_allowed.test.ts  |  8 +++-
 ...positive_integer_greater_than_zero.test.ts | 12 ++++--
 .../schemas/types/postive_integer.test.ts     |  8 +++-
 .../types/references_default_array.test.ts    |  4 +-
 .../schemas/types/references_default_array.ts |  4 +-
 .../schemas/types/risk_score.test.ts          |  8 ++--
 .../schemas/types/uuid.test.ts                |  4 +-
 .../common/format_errors.test.ts              | 41 +++++++++++++++++++
 .../security_solution/common/format_errors.ts | 10 ++++-
 .../routes/rules/import_rules_route.test.ts   |  6 +--
 .../create_rules_stream_from_ndjson.test.ts   |  3 +-
 .../rules/create_rules_stream_from_ndjson.ts  |  3 +-
 .../rules/get_prepackaged_rules.test.ts       |  6 +--
 .../rules/get_prepackaged_rules.ts            |  9 ++--
 .../read_stream/create_stream_from_ndjson.ts  |  3 +-
 67 files changed, 343 insertions(+), 201 deletions(-)

diff --git a/x-pack/plugins/lists/common/schemas/types/default_comments_array.ts b/x-pack/plugins/lists/common/schemas/types/default_comments_array.ts
index a80bb968561f0..e824d481b3618 100644
--- a/x-pack/plugins/lists/common/schemas/types/default_comments_array.ts
+++ b/x-pack/plugins/lists/common/schemas/types/default_comments_array.ts
@@ -27,8 +27,8 @@ export const DefaultCommentsArray: DefaultCommentsArrayC = new t.Type<
 >(
   'DefaultCommentsArray',
   t.array(comment).is,
-  (input): Either<t.Errors, CommentsArray> =>
-    input == null ? t.success([]) : t.array(comment).decode(input),
+  (input, context): Either<t.Errors, CommentsArray> =>
+    input == null ? t.success([]) : t.array(comment).validate(input, context),
   t.identity
 );
 
@@ -43,7 +43,7 @@ export const DefaultCommentsPartialArray: DefaultCommentsPartialArrayC = new t.T
 >(
   'DefaultCommentsPartialArray',
   t.array(commentPartial).is,
-  (input): Either<t.Errors, CommentsPartialArray> =>
-    input == null ? t.success([]) : t.array(commentPartial).decode(input),
+  (input, context): Either<t.Errors, CommentsPartialArray> =>
+    input == null ? t.success([]) : t.array(commentPartial).validate(input, context),
   t.identity
 );
diff --git a/x-pack/plugins/lists/common/schemas/types/default_entries_array.ts b/x-pack/plugins/lists/common/schemas/types/default_entries_array.ts
index 43698665bb371..82487f04804f1 100644
--- a/x-pack/plugins/lists/common/schemas/types/default_entries_array.ts
+++ b/x-pack/plugins/lists/common/schemas/types/default_entries_array.ts
@@ -22,7 +22,7 @@ export const DefaultEntryArray: DefaultEntriesArrayC = new t.Type<
 >(
   'DefaultEntryArray',
   t.array(entries).is,
-  (input): Either<t.Errors, EntriesArray> =>
-    input == null ? t.success([]) : t.array(entries).decode(input),
+  (input, context): Either<t.Errors, EntriesArray> =>
+    input == null ? t.success([]) : t.array(entries).validate(input, context),
   t.identity
 );
diff --git a/x-pack/plugins/lists/common/schemas/types/default_namespace.ts b/x-pack/plugins/lists/common/schemas/types/default_namespace.ts
index ebe2cd60cf6c8..c98cb8d2bba72 100644
--- a/x-pack/plugins/lists/common/schemas/types/default_namespace.ts
+++ b/x-pack/plugins/lists/common/schemas/types/default_namespace.ts
@@ -24,7 +24,7 @@ export const DefaultNamespace: DefaultNamespaceC = new t.Type<
 >(
   'DefaultNamespace',
   namespaceType.is,
-  (input): Either<t.Errors, NamespaceType> =>
-    input == null ? t.success('single') : namespaceType.decode(input),
+  (input, context): Either<t.Errors, NamespaceType> =>
+    input == null ? t.success('single') : namespaceType.validate(input, context),
   t.identity
 );
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/add_prepackged_rules_schema.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/add_prepackged_rules_schema.test.ts
index 5d170f5a78645..f946b3ad3b39b 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/add_prepackged_rules_schema.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/add_prepackged_rules_schema.test.ts
@@ -625,7 +625,7 @@ describe('add prepackaged rules schema', () => {
     const decoded = addPrepackagedRulesSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to "references"']);
     expect(message.schema).toEqual({});
   });
 
@@ -776,7 +776,9 @@ describe('add prepackaged rules schema', () => {
     const decoded = addPrepackagedRulesSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "-1" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "-1" supplied to "max_signals"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -789,7 +791,7 @@ describe('add prepackaged rules schema', () => {
     const decoded = addPrepackagedRulesSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "0" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "0" supplied to "max_signals"']);
     expect(message.schema).toEqual({});
   });
 
@@ -837,9 +839,9 @@ describe('add prepackaged rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "0" supplied to ""',
-      'Invalid value "1" supplied to ""',
-      'Invalid value "2" supplied to ""',
+      'Invalid value "0" supplied to "tags"',
+      'Invalid value "1" supplied to "tags"',
+      'Invalid value "2" supplied to "tags"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -871,7 +873,7 @@ describe('add prepackaged rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "framework"',
+      'Invalid value "undefined" supplied to "threat,framework"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -899,7 +901,7 @@ describe('add prepackaged rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "tactic"',
+      'Invalid value "undefined" supplied to "threat,tactic"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -925,7 +927,7 @@ describe('add prepackaged rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "technique"',
+      'Invalid value "undefined" supplied to "threat,technique"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -959,8 +961,8 @@ describe('add prepackaged rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "5" supplied to ""',
-      'Invalid value "4" supplied to ""',
+      'Invalid value "5" supplied to "false_positives"',
+      'Invalid value "4" supplied to "false_positives"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1184,7 +1186,7 @@ describe('add prepackaged rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "group"',
+      'Invalid value "undefined" supplied to "actions,group"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1198,7 +1200,9 @@ describe('add prepackaged rules schema', () => {
     const decoded = addPrepackagedRulesSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "undefined" supplied to "id"']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "actions,id"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -1212,7 +1216,7 @@ describe('add prepackaged rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "action_type_id"',
+      'Invalid value "undefined" supplied to "actions,action_type_id"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1227,7 +1231,7 @@ describe('add prepackaged rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "params"',
+      'Invalid value "undefined" supplied to "actions,params"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1249,7 +1253,7 @@ describe('add prepackaged rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "action_type_id"',
+      'Invalid value "undefined" supplied to "actions,action_type_id"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1323,8 +1327,7 @@ describe('add prepackaged rules schema', () => {
       const checked = exactCheck(payload, decoded);
       const message = pipe(checked, foldLeftRight);
       expect(getPaths(left(message.errors))).toEqual([
-        // TODO: Fix/Change the formatErrors to be better able to handle objects
-        'Invalid value "[object Object]" supplied to "note"',
+        'Invalid value "{"somethingHere":"something else"}" supplied to "note"',
       ]);
       expect(message.schema).toEqual({});
     });
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/create_rules_bulk_schema.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/create_rules_bulk_schema.test.ts
index e79dde41752a3..00854f1ed5526 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/create_rules_bulk_schema.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/create_rules_bulk_schema.test.ts
@@ -250,9 +250,8 @@ describe('create_rules_bulk_schema', () => {
     const decoded = createRulesBulkSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const output = foldLeftRight(checked);
-    // TODO: We should change the formatter used to better print objects
     expect(formatErrors(output.errors)).toEqual([
-      'Invalid value "[object Object]" supplied to "note"',
+      'Invalid value "{"something":"some object"}" supplied to "note"',
     ]);
     expect(output.schema).toEqual({});
   });
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/create_rules_schema.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/create_rules_schema.test.ts
index d672d38028902..a126b833ba461 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/create_rules_schema.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/create_rules_schema.test.ts
@@ -614,7 +614,7 @@ describe('create rules schema', () => {
     const decoded = createRulesSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to "references"']);
     expect(message.schema).toEqual({});
   });
 
@@ -721,7 +721,9 @@ describe('create rules schema', () => {
     const decoded = createRulesSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "-1" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "-1" supplied to "max_signals"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -734,7 +736,7 @@ describe('create rules schema', () => {
     const decoded = createRulesSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "0" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "0" supplied to "max_signals"']);
     expect(message.schema).toEqual({});
   });
 
@@ -782,9 +784,9 @@ describe('create rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "0" supplied to ""',
-      'Invalid value "1" supplied to ""',
-      'Invalid value "2" supplied to ""',
+      'Invalid value "0" supplied to "tags"',
+      'Invalid value "1" supplied to "tags"',
+      'Invalid value "2" supplied to "tags"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -816,7 +818,7 @@ describe('create rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "framework"',
+      'Invalid value "undefined" supplied to "threat,framework"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -844,7 +846,7 @@ describe('create rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "tactic"',
+      'Invalid value "undefined" supplied to "threat,tactic"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -870,7 +872,7 @@ describe('create rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "technique"',
+      'Invalid value "undefined" supplied to "threat,technique"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -902,8 +904,8 @@ describe('create rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "5" supplied to ""',
-      'Invalid value "4" supplied to ""',
+      'Invalid value "5" supplied to "false_positives"',
+      'Invalid value "4" supplied to "false_positives"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1081,7 +1083,7 @@ describe('create rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "group"',
+      'Invalid value "undefined" supplied to "actions,group"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1095,7 +1097,9 @@ describe('create rules schema', () => {
     const decoded = createRulesSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "undefined" supplied to "id"']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "actions,id"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -1109,7 +1113,7 @@ describe('create rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "action_type_id"',
+      'Invalid value "undefined" supplied to "actions,action_type_id"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1124,7 +1128,7 @@ describe('create rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "params"',
+      'Invalid value "undefined" supplied to "actions,params"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1146,7 +1150,7 @@ describe('create rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "action_type_id"',
+      'Invalid value "undefined" supplied to "actions,action_type_id"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1198,8 +1202,7 @@ describe('create rules schema', () => {
       const checked = exactCheck(payload, decoded);
       const message = pipe(checked, foldLeftRight);
       expect(getPaths(left(message.errors))).toEqual([
-        // TODO: Fix/Change the formatErrors to be better able to handle objects
-        'Invalid value "[object Object]" supplied to "note"',
+        'Invalid value "{"somethingHere":"something else"}" supplied to "note"',
       ]);
       expect(message.schema).toEqual({});
     });
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/export_rules_schema.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/export_rules_schema.test.ts
index 3e9799a5ad2f9..935b4b33081fa 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/export_rules_schema.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/export_rules_schema.test.ts
@@ -34,10 +34,9 @@ describe('create rules schema', () => {
       const decoded = exportRulesSchema.decode(payload);
       const checked = exactCheck(payload, decoded);
       const message = pipe(checked, foldLeftRight);
-      // TODO: Change formatter to display a better value than [object Object]
       expect(getPaths(left(message.errors))).toEqual([
         'Invalid value "undefined" supplied to "objects"',
-        'Invalid value "[object Object]" supplied to ""',
+        'Invalid value "{}" supplied to "({| objects: Array<{| rule_id: string |}> |} | null)"',
       ]);
       expect(message.schema).toEqual(payload);
     });
@@ -70,10 +69,9 @@ describe('create rules schema', () => {
       const decoded = exportRulesSchema.decode(payload);
       const checked = exactCheck(payload, decoded);
       const message = pipe(checked, foldLeftRight);
-      // TODO: Change formatter to display a better value than [object Object]
       expect(getPaths(left(message.errors))).toEqual([
         'Invalid value "undefined" supplied to "objects,rule_id"',
-        'Invalid value "[object Object]" supplied to ""',
+        'Invalid value "{"objects":[{"id":"4a7ff83d-3055-4bb2-ba68-587b9c6c15a4"}]}" supplied to "({| objects: Array<{| rule_id: string |}> |} | null)"',
       ]);
       expect(message.schema).toEqual({});
     });
@@ -120,7 +118,9 @@ describe('create rules schema', () => {
       const decoded = exportRulesQuerySchema.decode(payload);
       const checked = exactCheck(payload, decoded);
       const message = pipe(checked, foldLeftRight);
-      expect(getPaths(left(message.errors))).toEqual(['Invalid value "10" supplied to ""']);
+      expect(getPaths(left(message.errors))).toEqual([
+        'Invalid value "10" supplied to "file_name"',
+      ]);
       expect(message.schema).toEqual({});
     });
 
@@ -151,7 +151,7 @@ describe('create rules schema', () => {
       const checked = exactCheck(payload, decoded);
       const message = pipe(checked, foldLeftRight);
       expect(getPaths(left(message.errors))).toEqual([
-        'Invalid value "invalid string" supplied to ""',
+        'Invalid value "invalid string" supplied to "exclude_export_details"',
       ]);
       expect(message.schema).toEqual({});
     });
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/import_rules_schema.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/import_rules_schema.test.ts
index be2c3e046fe91..9fe3e95a20621 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/import_rules_schema.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/import_rules_schema.test.ts
@@ -625,7 +625,7 @@ describe('import rules schema', () => {
     const decoded = importRulesSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to "references"']);
     expect(message.schema).toEqual({});
   });
 
@@ -773,7 +773,9 @@ describe('import rules schema', () => {
     const decoded = importRulesSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "-1" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "-1" supplied to "max_signals"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -786,7 +788,7 @@ describe('import rules schema', () => {
     const decoded = importRulesSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "0" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "0" supplied to "max_signals"']);
     expect(message.schema).toEqual({});
   });
 
@@ -834,9 +836,9 @@ describe('import rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "0" supplied to ""',
-      'Invalid value "1" supplied to ""',
-      'Invalid value "2" supplied to ""',
+      'Invalid value "0" supplied to "tags"',
+      'Invalid value "1" supplied to "tags"',
+      'Invalid value "2" supplied to "tags"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -868,7 +870,7 @@ describe('import rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "framework"',
+      'Invalid value "undefined" supplied to "threat,framework"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -896,7 +898,7 @@ describe('import rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "tactic"',
+      'Invalid value "undefined" supplied to "threat,tactic"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -922,7 +924,7 @@ describe('import rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "technique"',
+      'Invalid value "undefined" supplied to "threat,technique"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -954,8 +956,8 @@ describe('import rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "5" supplied to ""',
-      'Invalid value "4" supplied to ""',
+      'Invalid value "5" supplied to "false_positives"',
+      'Invalid value "4" supplied to "false_positives"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1254,7 +1256,7 @@ describe('import rules schema', () => {
       const checked = exactCheck(payload, decoded);
       const message = pipe(checked, foldLeftRight);
       expect(getPaths(left(message.errors))).toEqual([
-        'Invalid value "invalid-string" supplied to ""',
+        'Invalid value "invalid-string" supplied to "overwrite"',
       ]);
       expect(message.schema).toEqual({});
     });
@@ -1377,7 +1379,7 @@ describe('import rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "group"',
+      'Invalid value "undefined" supplied to "actions,group"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1391,7 +1393,9 @@ describe('import rules schema', () => {
     const decoded = importRulesSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "undefined" supplied to "id"']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "actions,id"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -1405,7 +1409,7 @@ describe('import rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "action_type_id"',
+      'Invalid value "undefined" supplied to "actions,action_type_id"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1420,7 +1424,7 @@ describe('import rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "params"',
+      'Invalid value "undefined" supplied to "actions,params"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1442,7 +1446,7 @@ describe('import rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "action_type_id"',
+      'Invalid value "undefined" supplied to "actions,action_type_id"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1513,8 +1517,7 @@ describe('import rules schema', () => {
       const checked = exactCheck(payload, decoded);
       const message = pipe(checked, foldLeftRight);
       expect(getPaths(left(message.errors))).toEqual([
-        // TODO: Fix/Change the formatErrors to be better able to handle objects
-        'Invalid value "[object Object]" supplied to "note"',
+        'Invalid value "{"somethingHere":"something else"}" supplied to "note"',
       ]);
       expect(message.schema).toEqual({});
     });
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/patch_rules_bulk_schema.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/patch_rules_bulk_schema.test.ts
index 7b86c02e5c475..a03bb2db0fd4b 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/patch_rules_bulk_schema.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/patch_rules_bulk_schema.test.ts
@@ -92,9 +92,8 @@ describe('patch_rules_bulk_schema', () => {
     const decoded = patchRulesBulkSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const output = foldLeftRight(checked);
-    // TODO: Fix the formatter to give something better than [object Object]
     expect(formatErrors(output.errors)).toEqual([
-      'Invalid value "[object Object]" supplied to "note"',
+      'Invalid value "{"someprop":"some value here"}" supplied to "note"',
     ]);
     expect(output.schema).toEqual({});
   });
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/patch_rules_schema.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/patch_rules_schema.test.ts
index 921e07a29609c..55363ffb18307 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/patch_rules_schema.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/patch_rules_schema.test.ts
@@ -1065,9 +1065,8 @@ describe('patch_rules_schema', () => {
       const decoded = patchRulesSchema.decode(payload);
       const checked = exactCheck(payload, decoded);
       const message = pipe(checked, foldLeftRight);
-      // TODO: Change the formatter to output something more readable than [object Object]
       expect(getPaths(left(message.errors))).toEqual([
-        'Invalid value "[object Object]" supplied to "note"',
+        'Invalid value "{"someProperty":"something else here"}" supplied to "note"',
       ]);
       expect(message.schema).toEqual({});
     });
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/update_rules_bulk_schema.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/update_rules_bulk_schema.test.ts
index edc652ce3b3f4..4cb38889045fc 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/update_rules_bulk_schema.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/update_rules_bulk_schema.test.ts
@@ -246,9 +246,8 @@ describe('update_rules_bulk_schema', () => {
     const decoded = updateRulesBulkSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const output = foldLeftRight(checked);
-    // TODO: We should change the formatter used to better print objects
     expect(formatErrors(output.errors)).toEqual([
-      'Invalid value "[object Object]" supplied to "note"',
+      'Invalid value "{"something":"some object"}" supplied to "note"',
     ]);
     expect(output.schema).toEqual({});
   });
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/update_rules_schema.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/update_rules_schema.test.ts
index e60522e1964f4..1ff38f1351f59 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/request/update_rules_schema.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/request/update_rules_schema.test.ts
@@ -608,7 +608,7 @@ describe('update rules schema', () => {
     const decoded = updateRulesSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to "references"']);
     expect(message.schema).toEqual({});
   });
 
@@ -756,7 +756,9 @@ describe('update rules schema', () => {
     const decoded = updateRulesSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "-1" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "-1" supplied to "max_signals"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -769,7 +771,7 @@ describe('update rules schema', () => {
     const decoded = updateRulesSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "0" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "0" supplied to "max_signals"']);
     expect(message.schema).toEqual({});
   });
 
@@ -817,9 +819,9 @@ describe('update rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "0" supplied to ""',
-      'Invalid value "1" supplied to ""',
-      'Invalid value "2" supplied to ""',
+      'Invalid value "0" supplied to "tags"',
+      'Invalid value "1" supplied to "tags"',
+      'Invalid value "2" supplied to "tags"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -851,7 +853,7 @@ describe('update rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "framework"',
+      'Invalid value "undefined" supplied to "threat,framework"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -879,7 +881,7 @@ describe('update rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "tactic"',
+      'Invalid value "undefined" supplied to "threat,tactic"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -905,7 +907,7 @@ describe('update rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "technique"',
+      'Invalid value "undefined" supplied to "threat,technique"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -937,8 +939,8 @@ describe('update rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "5" supplied to ""',
-      'Invalid value "4" supplied to ""',
+      'Invalid value "5" supplied to "false_positives"',
+      'Invalid value "4" supplied to "false_positives"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1173,7 +1175,7 @@ describe('update rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "group"',
+      'Invalid value "undefined" supplied to "actions,group"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1187,7 +1189,9 @@ describe('update rules schema', () => {
     const decoded = updateRulesSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "undefined" supplied to "id"']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "actions,id"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -1201,7 +1205,7 @@ describe('update rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "action_type_id"',
+      'Invalid value "undefined" supplied to "actions,action_type_id"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1216,7 +1220,7 @@ describe('update rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "params"',
+      'Invalid value "undefined" supplied to "actions,params"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1238,7 +1242,7 @@ describe('update rules schema', () => {
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "undefined" supplied to "action_type_id"',
+      'Invalid value "undefined" supplied to "actions,action_type_id"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -1323,8 +1327,7 @@ describe('update rules schema', () => {
       const checked = exactCheck(payload, decoded);
       const message = pipe(checked, foldLeftRight);
       expect(getPaths(left(message.errors))).toEqual([
-        // TODO: Fix/Change the formatErrors to be better able to handle objects
-        'Invalid value "[object Object]" supplied to "note"',
+        'Invalid value "{"somethingHere":"something else"}" supplied to "note"',
       ]);
       expect(message.schema).toEqual({});
     });
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/deafult_boolean_true.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/deafult_boolean_true.test.ts
index a2deaf626624f..1f111515d391a 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/deafult_boolean_true.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/deafult_boolean_true.test.ts
@@ -33,7 +33,9 @@ describe('default_boolean_true', () => {
     const decoded = DefaultBooleanTrue.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "DefaultBooleanTrue"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/deafult_from_string.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/deafult_from_string.test.ts
index d68d447ca4454..3862fcb95b91d 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/deafult_from_string.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/deafult_from_string.test.ts
@@ -24,7 +24,9 @@ describe('default_from_string', () => {
     const decoded = DefaultFromString.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "DefaultFromString"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_actions_array.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_actions_array.test.ts
index 645eade71916f..ac22d36a062cb 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_actions_array.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_actions_array.test.ts
@@ -39,7 +39,9 @@ describe('default_actions_array', () => {
     const decoded = DefaultActionsArray.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "DefaultActionsArray"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_actions_array.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_actions_array.ts
index ce3eb7fa7da83..c69ae591f5ddc 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_actions_array.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_actions_array.ts
@@ -15,7 +15,8 @@ import { actions, Actions } from '../common/schemas';
 export const DefaultActionsArray = new t.Type<Actions, Actions, unknown>(
   'DefaultActionsArray',
   actions.is,
-  (input): Either<t.Errors, Actions> => (input == null ? t.success([]) : actions.decode(input)),
+  (input, context): Either<t.Errors, Actions> =>
+    input == null ? t.success([]) : actions.validate(input, context),
   t.identity
 );
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_boolean_false.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_boolean_false.test.ts
index 1697928b17e0c..954a0f3651048 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_boolean_false.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_boolean_false.test.ts
@@ -33,7 +33,9 @@ describe('default_boolean_false', () => {
     const decoded = DefaultBooleanFalse.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "DefaultBooleanFalse"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_boolean_false.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_boolean_false.ts
index 624b9802f680c..0cab6525779a6 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_boolean_false.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_boolean_false.ts
@@ -14,8 +14,8 @@ import { Either } from 'fp-ts/lib/Either';
 export const DefaultBooleanFalse = new t.Type<boolean, boolean, unknown>(
   'DefaultBooleanFalse',
   t.boolean.is,
-  (input): Either<t.Errors, boolean> =>
-    input == null ? t.success(false) : t.boolean.decode(input),
+  (input, context): Either<t.Errors, boolean> =>
+    input == null ? t.success(false) : t.boolean.validate(input, context),
   t.identity
 );
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_boolean_true.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_boolean_true.ts
index 58c912a0a8650..6997652b72636 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_boolean_true.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_boolean_true.ts
@@ -14,7 +14,8 @@ import { Either } from 'fp-ts/lib/Either';
 export const DefaultBooleanTrue = new t.Type<boolean, boolean, unknown>(
   'DefaultBooleanTrue',
   t.boolean.is,
-  (input): Either<t.Errors, boolean> => (input == null ? t.success(true) : t.boolean.decode(input)),
+  (input, context): Either<t.Errors, boolean> =>
+    input == null ? t.success(true) : t.boolean.validate(input, context),
   t.identity
 );
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_empty_string.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_empty_string.test.ts
index 386d4c55905cd..4c59ae44fb8d8 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_empty_string.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_empty_string.test.ts
@@ -24,7 +24,9 @@ describe('default_empty_string', () => {
     const decoded = DefaultEmptyString.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "DefaultEmptyString"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_empty_string.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_empty_string.ts
index 6216d0c1111b0..a1103c4aa8d0e 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_empty_string.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_empty_string.ts
@@ -14,7 +14,8 @@ import { Either } from 'fp-ts/lib/Either';
 export const DefaultEmptyString = new t.Type<string, string, unknown>(
   'DefaultEmptyString',
   t.string.is,
-  (input): Either<t.Errors, string> => (input == null ? t.success('') : t.string.decode(input)),
+  (input, context): Either<t.Errors, string> =>
+    input == null ? t.success('') : t.string.validate(input, context),
   t.identity
 );
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_export_file_name.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_export_file_name.test.ts
index 328cd738d7de0..70aa9501a3080 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_export_file_name.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_export_file_name.test.ts
@@ -24,7 +24,9 @@ describe('default_export_file_name', () => {
     const decoded = DefaultExportFileName.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "DefaultExportFileName"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_export_file_name.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_export_file_name.ts
index 41dfdee1e0da0..4c7f663e7f46d 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_export_file_name.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_export_file_name.ts
@@ -14,8 +14,8 @@ import { Either } from 'fp-ts/lib/Either';
 export const DefaultExportFileName = new t.Type<string, string, unknown>(
   'DefaultExportFileName',
   t.string.is,
-  (input): Either<t.Errors, string> =>
-    input == null ? t.success('export.ndjson') : t.string.decode(input),
+  (input, context): Either<t.Errors, string> =>
+    input == null ? t.success('export.ndjson') : t.string.validate(input, context),
   t.identity
 );
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_from_string.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_from_string.ts
index 4217532de954e..b6b432858eb92 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_from_string.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_from_string.ts
@@ -14,8 +14,8 @@ import { Either } from 'fp-ts/lib/Either';
 export const DefaultFromString = new t.Type<string, string, unknown>(
   'DefaultFromString',
   t.string.is,
-  (input): Either<t.Errors, string> =>
-    input == null ? t.success('now-6m') : t.string.decode(input),
+  (input, context): Either<t.Errors, string> =>
+    input == null ? t.success('now-6m') : t.string.validate(input, context),
   t.identity
 );
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_interval_string.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_interval_string.test.ts
index 9720178a4ae9b..c7cda54a54b04 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_interval_string.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_interval_string.test.ts
@@ -24,7 +24,9 @@ describe('default_interval_string', () => {
     const decoded = DefaultIntervalString.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "DefaultIntervalString"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_interval_string.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_interval_string.ts
index 579e7591fdb03..9492374ffe91e 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_interval_string.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_interval_string.ts
@@ -14,7 +14,8 @@ import { Either } from 'fp-ts/lib/Either';
 export const DefaultIntervalString = new t.Type<string, string, unknown>(
   'DefaultIntervalString',
   t.string.is,
-  (input): Either<t.Errors, string> => (input == null ? t.success('5m') : t.string.decode(input)),
+  (input, context): Either<t.Errors, string> =>
+    input == null ? t.success('5m') : t.string.validate(input, context),
   t.identity
 );
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_language_string.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_language_string.test.ts
index e3da8dbd280ab..e210bcf7d881f 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_language_string.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_language_string.test.ts
@@ -25,7 +25,9 @@ describe('default_language_string', () => {
     const decoded = DefaultLanguageString.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "DefaultLanguageString"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_language_string.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_language_string.ts
index 248e15d56dfd7..1e05a46d7273c 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_language_string.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_language_string.ts
@@ -15,8 +15,8 @@ import { language } from '../common/schemas';
 export const DefaultLanguageString = new t.Type<string, string, unknown>(
   'DefaultLanguageString',
   t.string.is,
-  (input): Either<t.Errors, string> =>
-    input == null ? t.success('kuery') : language.decode(input),
+  (input, context): Either<t.Errors, string> =>
+    input == null ? t.success('kuery') : language.validate(input, context),
   t.identity
 );
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_max_signals_number.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_max_signals_number.test.ts
index a6f137c3f2113..33ac02ee1bf53 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_max_signals_number.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_max_signals_number.test.ts
@@ -25,7 +25,9 @@ describe('default_from_string', () => {
     const decoded = DefaultMaxSignalsNumber.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "DefaultMaxSignals"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -34,7 +36,9 @@ describe('default_from_string', () => {
     const decoded = DefaultMaxSignalsNumber.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "0" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "0" supplied to "DefaultMaxSignals"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -43,7 +47,9 @@ describe('default_from_string', () => {
     const decoded = DefaultMaxSignalsNumber.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "-1" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "-1" supplied to "DefaultMaxSignals"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_max_signals_number.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_max_signals_number.ts
index 6f0c32c5466f3..d3c48b5522f57 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_max_signals_number.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_max_signals_number.ts
@@ -23,8 +23,8 @@ export const DefaultMaxSignalsNumber: DefaultMaxSignalsNumberC = new t.Type<
 >(
   'DefaultMaxSignals',
   t.number.is,
-  (input): Either<t.Errors, number> => {
-    return input == null ? t.success(DEFAULT_MAX_SIGNALS) : max_signals.decode(input);
+  (input, context): Either<t.Errors, number> => {
+    return input == null ? t.success(DEFAULT_MAX_SIGNALS) : max_signals.validate(input, context);
   },
   t.identity
 );
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_page.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_page.test.ts
index 1d1d43667c710..dd90813646319 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_page.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_page.test.ts
@@ -33,7 +33,9 @@ describe('default_page', () => {
     const decoded = DefaultPage.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "NaN" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "NaN" supplied to "DefaultPerPage"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -42,7 +44,9 @@ describe('default_page', () => {
     const decoded = DefaultPage.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "NaN" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "NaN" supplied to "DefaultPerPage"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -51,7 +55,9 @@ describe('default_page', () => {
     const decoded = DefaultPage.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "0" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "0" supplied to "DefaultPerPage"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -60,7 +66,9 @@ describe('default_page', () => {
     const decoded = DefaultPage.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "-1" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "-1" supplied to "DefaultPerPage"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_page.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_page.ts
index 95e3b42f3e138..96e01d381e34b 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_page.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_page.ts
@@ -17,13 +17,13 @@ import { PositiveIntegerGreaterThanZero } from './positive_integer_greater_than_
 export const DefaultPage = new t.Type<number, number, unknown>(
   'DefaultPerPage',
   t.number.is,
-  (input): Either<t.Errors, number> => {
+  (input, context): Either<t.Errors, number> => {
     if (input == null) {
       return t.success(1);
     } else if (typeof input === 'string') {
-      return PositiveIntegerGreaterThanZero.decode(parseInt(input, 10));
+      return PositiveIntegerGreaterThanZero.validate(parseInt(input, 10), context);
     } else {
-      return PositiveIntegerGreaterThanZero.decode(input);
+      return PositiveIntegerGreaterThanZero.validate(input, context);
     }
   },
   t.identity
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_per_page.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_per_page.test.ts
index 3ecbae6ed43f5..2115d6d3b52ef 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_per_page.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_per_page.test.ts
@@ -33,7 +33,9 @@ describe('default_per_page', () => {
     const decoded = DefaultPerPage.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "NaN" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "NaN" supplied to "DefaultPerPage"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -42,7 +44,9 @@ describe('default_per_page', () => {
     const decoded = DefaultPerPage.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "NaN" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "NaN" supplied to "DefaultPerPage"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -51,7 +55,9 @@ describe('default_per_page', () => {
     const decoded = DefaultPerPage.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "0" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "0" supplied to "DefaultPerPage"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -60,7 +66,9 @@ describe('default_per_page', () => {
     const decoded = DefaultPerPage.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "-1" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "-1" supplied to "DefaultPerPage"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_per_page.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_per_page.ts
index f96f280f6af11..b78de8b35cede 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_per_page.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_per_page.ts
@@ -17,13 +17,13 @@ import { PositiveIntegerGreaterThanZero } from './positive_integer_greater_than_
 export const DefaultPerPage = new t.Type<number, number, unknown>(
   'DefaultPerPage',
   t.number.is,
-  (input): Either<t.Errors, number> => {
+  (input, context): Either<t.Errors, number> => {
     if (input == null) {
       return t.success(20);
     } else if (typeof input === 'string') {
-      return PositiveIntegerGreaterThanZero.decode(parseInt(input, 10));
+      return PositiveIntegerGreaterThanZero.validate(parseInt(input, 10), context);
     } else {
-      return PositiveIntegerGreaterThanZero.decode(input);
+      return PositiveIntegerGreaterThanZero.validate(input, context);
     }
   },
   t.identity
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_string_array.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_string_array.test.ts
index 83142c8d65777..6d352f3ffc4ba 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_string_array.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_string_array.test.ts
@@ -33,7 +33,9 @@ describe('default_string_array', () => {
     const decoded = DefaultStringArray.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "DefaultStringArray"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_string_array.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_string_array.ts
index 1f043cfd1b8e5..a8c53c230acd9 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_string_array.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_string_array.ts
@@ -14,8 +14,8 @@ import { Either } from 'fp-ts/lib/Either';
 export const DefaultStringArray = new t.Type<string[], string[], unknown>(
   'DefaultStringArray',
   t.array(t.string).is,
-  (input): Either<t.Errors, string[]> =>
-    input == null ? t.success([]) : t.array(t.string).decode(input),
+  (input, context): Either<t.Errors, string[]> =>
+    input == null ? t.success([]) : t.array(t.string).validate(input, context),
   t.identity
 );
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_string_boolean_false.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_string_boolean_false.test.ts
index 1941a642e8baf..dcb264d77b14b 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_string_boolean_false.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_string_boolean_false.test.ts
@@ -33,7 +33,9 @@ describe('default_string_boolean_false', () => {
     const decoded = DefaultStringBooleanFalse.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "DefaultStringBooleanFalse"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -78,7 +80,9 @@ describe('default_string_boolean_false', () => {
     const decoded = DefaultStringBooleanFalse.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "junk" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "junk" supplied to "DefaultStringBooleanFalse"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -87,7 +91,9 @@ describe('default_string_boolean_false', () => {
     const decoded = DefaultStringBooleanFalse.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "" supplied to "DefaultStringBooleanFalse"',
+    ]);
     expect(message.schema).toEqual({});
   });
 });
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_string_boolean_false.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_string_boolean_false.ts
index 48a40d4b9ceec..aa070c171d7ea 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_string_boolean_false.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_string_boolean_false.ts
@@ -15,7 +15,7 @@ import { Either } from 'fp-ts/lib/Either';
 export const DefaultStringBooleanFalse = new t.Type<boolean, boolean, unknown>(
   'DefaultStringBooleanFalse',
   t.boolean.is,
-  (input): Either<t.Errors, boolean> => {
+  (input, context): Either<t.Errors, boolean> => {
     if (input == null) {
       return t.success(false);
     } else if (typeof input === 'string' && input.toLowerCase() === 'true') {
@@ -23,7 +23,7 @@ export const DefaultStringBooleanFalse = new t.Type<boolean, boolean, unknown>(
     } else if (typeof input === 'string' && input.toLowerCase() === 'false') {
       return t.success(false);
     } else {
-      return t.boolean.decode(input);
+      return t.boolean.validate(input, context);
     }
   },
   t.identity
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_threat_array.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_threat_array.test.ts
index 9819da0b8d463..42193128cccfa 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_threat_array.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_threat_array.test.ts
@@ -47,7 +47,9 @@ describe('default_threat_null', () => {
     const decoded = DefaultThreatArray.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "DefaultThreatArray"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_threat_array.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_threat_array.ts
index da0611e24bc7e..5499a3c1e3064 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_threat_array.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_threat_array.ts
@@ -15,7 +15,8 @@ import { Threat, threat } from '../common/schemas';
 export const DefaultThreatArray = new t.Type<Threat, Threat, unknown>(
   'DefaultThreatArray',
   threat.is,
-  (input): Either<t.Errors, Threat> => (input == null ? t.success([]) : threat.decode(input)),
+  (input, context): Either<t.Errors, Threat> =>
+    input == null ? t.success([]) : threat.validate(input, context),
   t.identity
 );
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_throttle_null.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_throttle_null.test.ts
index 304fd65647c3c..5b08de40e0aa2 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_throttle_null.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_throttle_null.test.ts
@@ -25,7 +25,9 @@ describe('default_throttle_null', () => {
     const decoded = DefaultThrottleNull.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "DefaultThreatNull"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_throttle_null.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_throttle_null.ts
index fd31594323f4d..b76a35c0265a0 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_throttle_null.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_throttle_null.ts
@@ -15,8 +15,8 @@ import { ThrottleOrNull, throttle } from '../common/schemas';
 export const DefaultThrottleNull = new t.Type<ThrottleOrNull, ThrottleOrNull, unknown>(
   'DefaultThreatNull',
   throttle.is,
-  (input): Either<t.Errors, ThrottleOrNull> =>
-    input == null ? t.success(null) : throttle.decode(input),
+  (input, context): Either<t.Errors, ThrottleOrNull> =>
+    input == null ? t.success(null) : throttle.validate(input, context),
   t.identity
 );
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_to_string.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_to_string.test.ts
index 3e22d57cedf99..96c298c805ccb 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_to_string.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_to_string.test.ts
@@ -24,7 +24,9 @@ describe('default_to_string', () => {
     const decoded = DefaultToString.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "DefaultToString"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_to_string.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_to_string.ts
index 163bcf8c4e5b2..158eedc121c53 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_to_string.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_to_string.ts
@@ -12,9 +12,10 @@ import { Either } from 'fp-ts/lib/Either';
  *   - If null or undefined, then a default of the string "now" will be used
  */
 export const DefaultToString = new t.Type<string, string, unknown>(
-  'DefaultFromString',
+  'DefaultToString',
   t.string.is,
-  (input): Either<t.Errors, string> => (input == null ? t.success('now') : t.string.decode(input)),
+  (input, context): Either<t.Errors, string> =>
+    input == null ? t.success('now') : t.string.validate(input, context),
   t.identity
 );
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_uuid.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_uuid.test.ts
index 7dab8869d5d87..4bfeed479d582 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_uuid.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_uuid.test.ts
@@ -24,7 +24,7 @@ describe('default_uuid', () => {
     const decoded = DefaultUuid.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to "DefaultUuid"']);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_uuid.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_uuid.ts
index b0c328a93ff03..74e32e083cc44 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_uuid.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_uuid.ts
@@ -18,8 +18,8 @@ import { NonEmptyString } from './non_empty_string';
 export const DefaultUuid = new t.Type<string, string, unknown>(
   'DefaultUuid',
   t.string.is,
-  (input): Either<t.Errors, string> =>
-    input == null ? t.success(uuid.v4()) : NonEmptyString.decode(input),
+  (input, context): Either<t.Errors, string> =>
+    input == null ? t.success(uuid.v4()) : NonEmptyString.validate(input, context),
   t.identity
 );
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_version_number.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_version_number.test.ts
index 65697d8830b66..6d701b94a9c4d 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_version_number.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_version_number.test.ts
@@ -24,7 +24,9 @@ describe('default_version_number', () => {
     const decoded = DefaultVersionNumber.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "0" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "0" supplied to "DefaultVersionNumber"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -33,7 +35,9 @@ describe('default_version_number', () => {
     const decoded = DefaultVersionNumber.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "-1" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "-1" supplied to "DefaultVersionNumber"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -42,7 +46,9 @@ describe('default_version_number', () => {
     const decoded = DefaultVersionNumber.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "DefaultVersionNumber"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_version_number.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_version_number.ts
index 4a310329660df..832c942291c32 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_version_number.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/default_version_number.ts
@@ -15,7 +15,8 @@ import { version, Version } from '../common/schemas';
 export const DefaultVersionNumber = new t.Type<Version, Version, unknown>(
   'DefaultVersionNumber',
   version.is,
-  (input): Either<t.Errors, Version> => (input == null ? t.success(1) : version.decode(input)),
+  (input, context): Either<t.Errors, Version> =>
+    input == null ? t.success(1) : version.validate(input, context),
   t.identity
 );
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/iso_date_string.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/iso_date_string.test.ts
index e8bce3f38f4b3..ca9244419b286 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/iso_date_string.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/iso_date_string.test.ts
@@ -25,7 +25,7 @@ describe('ios_date_string', () => {
     const message = pipe(decoded, foldLeftRight);
 
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "1582677283067" supplied to ""',
+      'Invalid value "1582677283067" supplied to "IsoDateString"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -35,7 +35,9 @@ describe('ios_date_string', () => {
     const decoded = IsoDateString.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "2000" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "2000" supplied to "IsoDateString"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -45,7 +47,7 @@ describe('ios_date_string', () => {
     const message = pipe(decoded, foldLeftRight);
 
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "Wed, 26 Feb 2020 00:36:20 GMT" supplied to ""',
+      'Invalid value "Wed, 26 Feb 2020 00:36:20 GMT" supplied to "IsoDateString"',
     ]);
     expect(message.schema).toEqual({});
   });
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/lists_default_array.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/lists_default_array.test.ts
index 31e0a8e5c2c73..9eb55c22756fa 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/lists_default_array.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/lists_default_array.test.ts
@@ -173,8 +173,8 @@ describe('lists_default_array', () => {
     const message = pipe(decoded, foldLeftRight);
 
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "5" supplied to ""',
-      'Invalid value "5" supplied to ""',
+      'Invalid value "5" supplied to "listsWithDefaultArray"',
+      'Invalid value "5" supplied to "listsWithDefaultArray"',
     ]);
     expect(message.schema).toEqual({});
   });
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/lists_default_array.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/lists_default_array.ts
index 8cdd865469112..7fe98cdc300ef 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/lists_default_array.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/lists_default_array.ts
@@ -24,8 +24,8 @@ export type ListOperator = t.TypeOf<typeof listOperator>;
 export const ListsDefaultArray = new t.Type<List[], List[], unknown>(
   'listsWithDefaultArray',
   t.array(listAnd).is,
-  (input): Either<t.Errors, List[]> =>
-    input == null ? t.success([]) : t.array(listAnd).decode(input),
+  (input, context): Either<t.Errors, List[]> =>
+    input == null ? t.success([]) : t.array(listAnd).validate(input, context),
   t.identity
 );
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/non_empty_string.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/non_empty_string.test.ts
index 0a88b87421e70..0c12aa78cd247 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/non_empty_string.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/non_empty_string.test.ts
@@ -24,7 +24,9 @@ describe('non_empty_string', () => {
     const decoded = NonEmptyString.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "NonEmptyString"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -33,7 +35,9 @@ describe('non_empty_string', () => {
     const decoded = NonEmptyString.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "" supplied to "NonEmptyString"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -42,7 +46,9 @@ describe('non_empty_string', () => {
     const decoded = NonEmptyString.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "  " supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "  " supplied to "NonEmptyString"',
+    ]);
     expect(message.schema).toEqual({});
   });
 });
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/only_false_allowed.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/only_false_allowed.test.ts
index 01183e59378bd..a11fec1f064b1 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/only_false_allowed.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/only_false_allowed.test.ts
@@ -24,7 +24,9 @@ describe('only_false_allowed', () => {
     const decoded = OnlyFalseAllowed.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "true" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "true" supplied to "DefaultBooleanTrue"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -33,7 +35,9 @@ describe('only_false_allowed', () => {
     const decoded = OnlyFalseAllowed.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "DefaultBooleanTrue"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/positive_integer_greater_than_zero.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/positive_integer_greater_than_zero.test.ts
index 821eb066a6531..b67825b271216 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/positive_integer_greater_than_zero.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/positive_integer_greater_than_zero.test.ts
@@ -24,7 +24,9 @@ describe('positive_integer_greater_than_zero', () => {
     const decoded = PositiveIntegerGreaterThanZero.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "0" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "0" supplied to "PositiveIntegerGreaterThanZero"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -33,7 +35,9 @@ describe('positive_integer_greater_than_zero', () => {
     const decoded = PositiveIntegerGreaterThanZero.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "-1" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "-1" supplied to "PositiveIntegerGreaterThanZero"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -42,7 +46,9 @@ describe('positive_integer_greater_than_zero', () => {
     const decoded = PositiveIntegerGreaterThanZero.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "some string" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "some string" supplied to "PositiveIntegerGreaterThanZero"',
+    ]);
     expect(message.schema).toEqual({});
   });
 });
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/postive_integer.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/postive_integer.test.ts
index ea00ecf5efe0d..7324f5ffda062 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/postive_integer.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/postive_integer.test.ts
@@ -33,7 +33,9 @@ describe('positive_integer_greater_than_zero', () => {
     const decoded = PositiveInteger.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "-1" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "-1" supplied to "PositiveInteger"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -42,7 +44,9 @@ describe('positive_integer_greater_than_zero', () => {
     const decoded = PositiveInteger.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "some string" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "some string" supplied to "PositiveInteger"',
+    ]);
     expect(message.schema).toEqual({});
   });
 });
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/references_default_array.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/references_default_array.test.ts
index 83142c8d65777..6d352f3ffc4ba 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/references_default_array.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/references_default_array.test.ts
@@ -33,7 +33,9 @@ describe('default_string_array', () => {
     const decoded = DefaultStringArray.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "5" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "5" supplied to "DefaultStringArray"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/references_default_array.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/references_default_array.ts
index b809181ce8c32..f246a26bdf4cb 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/references_default_array.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/references_default_array.ts
@@ -14,8 +14,8 @@ import { Either } from 'fp-ts/lib/Either';
 export const ReferencesDefaultArray = new t.Type<string[], string[], unknown>(
   'referencesWithDefaultArray',
   t.array(t.string).is,
-  (input): Either<t.Errors, string[]> =>
-    input == null ? t.success([]) : t.array(t.string).decode(input),
+  (input, context): Either<t.Errors, string[]> =>
+    input == null ? t.success([]) : t.array(t.string).validate(input, context),
   t.identity
 );
 
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/risk_score.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/risk_score.test.ts
index cf849f28a0963..c8bf3cbecdaaf 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/risk_score.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/risk_score.test.ts
@@ -33,7 +33,7 @@ describe('risk_score', () => {
     const decoded = RiskScore.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "-1" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "-1" supplied to "RiskScore"']);
     expect(message.schema).toEqual({});
   });
 
@@ -42,7 +42,9 @@ describe('risk_score', () => {
     const decoded = RiskScore.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "some string" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "some string" supplied to "RiskScore"',
+    ]);
     expect(message.schema).toEqual({});
   });
 
@@ -51,7 +53,7 @@ describe('risk_score', () => {
     const decoded = RiskScore.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "101" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "101" supplied to "RiskScore"']);
     expect(message.schema).toEqual({});
   });
 });
diff --git a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/uuid.test.ts b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/uuid.test.ts
index d3a68a7575487..2bfaa3603d6a7 100644
--- a/x-pack/plugins/security_solution/common/detection_engine/schemas/types/uuid.test.ts
+++ b/x-pack/plugins/security_solution/common/detection_engine/schemas/types/uuid.test.ts
@@ -25,7 +25,7 @@ describe('uuid', () => {
     const message = pipe(decoded, foldLeftRight);
 
     expect(getPaths(left(message.errors))).toEqual([
-      'Invalid value "4656dc92-5832-11ea-8e2d" supplied to ""',
+      'Invalid value "4656dc92-5832-11ea-8e2d" supplied to "UUID"',
     ]);
     expect(message.schema).toEqual({});
   });
@@ -35,7 +35,7 @@ describe('uuid', () => {
     const decoded = UUID.decode(payload);
     const message = pipe(decoded, foldLeftRight);
 
-    expect(getPaths(left(message.errors))).toEqual(['Invalid value "" supplied to ""']);
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "" supplied to "UUID"']);
     expect(message.schema).toEqual({});
   });
 });
diff --git a/x-pack/plugins/security_solution/common/format_errors.test.ts b/x-pack/plugins/security_solution/common/format_errors.test.ts
index f9dd9e76a1d9c..c8cd72b72816b 100644
--- a/x-pack/plugins/security_solution/common/format_errors.test.ts
+++ b/x-pack/plugins/security_solution/common/format_errors.test.ts
@@ -127,4 +127,45 @@ describe('utils', () => {
       'Invalid value "Some existing error 1" supplied to "some string key 2"',
     ]);
   });
+
+  test('will use a name context if it cannot find a keyContext', () => {
+    const context: t.Context = ([
+      { key: '' },
+      { key: '', type: { name: 'someName' } },
+    ] as unknown) as t.Context;
+    const validationError1: t.ValidationError = {
+      value: 'Some existing error 1',
+      context,
+    };
+    const errors: t.Errors = [validationError1];
+    const output = formatErrors(errors);
+    expect(output).toEqual(['Invalid value "Some existing error 1" supplied to "someName"']);
+  });
+
+  test('will return an empty string if name does not exist but type does', () => {
+    const context: t.Context = ([{ key: '' }, { key: '', type: {} }] as unknown) as t.Context;
+    const validationError1: t.ValidationError = {
+      value: 'Some existing error 1',
+      context,
+    };
+    const errors: t.Errors = [validationError1];
+    const output = formatErrors(errors);
+    expect(output).toEqual(['Invalid value "Some existing error 1" supplied to ""']);
+  });
+
+  test('will stringify an error value', () => {
+    const context: t.Context = ([
+      { key: '' },
+      { key: 'some string key 2' },
+    ] as unknown) as t.Context;
+    const validationError1: t.ValidationError = {
+      value: { foo: 'some error' },
+      context,
+    };
+    const errors: t.Errors = [validationError1];
+    const output = formatErrors(errors);
+    expect(output).toEqual([
+      'Invalid value "{"foo":"some error"}" supplied to "some string key 2"',
+    ]);
+  });
 });
diff --git a/x-pack/plugins/security_solution/common/format_errors.ts b/x-pack/plugins/security_solution/common/format_errors.ts
index d712979f9eff3..ba963f34f2983 100644
--- a/x-pack/plugins/security_solution/common/format_errors.ts
+++ b/x-pack/plugins/security_solution/common/format_errors.ts
@@ -5,19 +5,25 @@
  */
 
 import * as t from 'io-ts';
+import { isObject } from 'lodash/fp';
 
 export const formatErrors = (errors: t.Errors): string[] => {
   return errors.map((error) => {
     if (error.message != null) {
       return error.message;
     } else {
-      const mappedContext = error.context
+      const keyContext = error.context
         .filter(
           (entry) => entry.key != null && !Number.isInteger(+entry.key) && entry.key.trim() !== ''
         )
         .map((entry) => entry.key)
         .join(',');
-      return `Invalid value "${error.value}" supplied to "${mappedContext}"`;
+
+      const nameContext = error.context.find((entry) => entry.type?.name?.length > 0);
+      const suppliedValue =
+        keyContext !== '' ? keyContext : nameContext != null ? nameContext.type.name : '';
+      const value = isObject(error.value) ? JSON.stringify(error.value) : error.value;
+      return `Invalid value "${value}" supplied to "${suppliedValue}"`;
     }
   });
 };
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/import_rules_route.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/import_rules_route.test.ts
index 84148231431a1..a1cf9ccc45f38 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/import_rules_route.test.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/import_rules_route.test.ts
@@ -254,16 +254,14 @@ describe('import_rules_route', () => {
         errors: [
           {
             error: {
-              // TODO: Change the formatter to do better than output [object Object]
-              message: '[object Object]',
+              message: 'Invalid value "undefined" supplied to "rule_id"',
               status_code: 400,
             },
             rule_id: '(unknown id)',
           },
           {
             error: {
-              // TODO: Change the formatter to do better than output [object Object]
-              message: '[object Object]',
+              message: 'Invalid value "undefined" supplied to "rule_id"',
               status_code: 400,
             },
             rule_id: '(unknown id)',
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/create_rules_stream_from_ndjson.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/create_rules_stream_from_ndjson.test.ts
index 73d3c65774b3d..c4d7df61061bd 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/create_rules_stream_from_ndjson.test.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/create_rules_stream_from_ndjson.test.ts
@@ -365,9 +365,8 @@ describe('create_rules_stream_from_ndjson', () => {
         references: [],
         version: 1,
       });
-      // TODO: Change the formatter to output something better than [object Object]
       expect(resultOrError[1].message).toEqual(
-        '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]'
+        'Invalid value "undefined" supplied to "description",Invalid value "undefined" supplied to "risk_score",Invalid value "undefined" supplied to "name",Invalid value "undefined" supplied to "severity",Invalid value "undefined" supplied to "type",Invalid value "undefined" supplied to "rule_id"'
       );
       expect(resultOrError[2]).toEqual({
         actions: [],
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/create_rules_stream_from_ndjson.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/create_rules_stream_from_ndjson.ts
index 932a4ef9eed92..d7723232ca921 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/create_rules_stream_from_ndjson.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/create_rules_stream_from_ndjson.ts
@@ -7,6 +7,7 @@ import { Transform } from 'stream';
 import * as t from 'io-ts';
 import { pipe } from 'fp-ts/lib/pipeable';
 import { fold } from 'fp-ts/lib/Either';
+import { formatErrors } from '../../../../common/format_errors';
 import { importRuleValidateTypeDependents } from '../../../../common/detection_engine/schemas/request/import_rules_type_dependents';
 import { exactCheck } from '../../../../common/exact_check';
 import {
@@ -32,7 +33,7 @@ export const validateRules = (): Transform => {
       const decoded = importRulesSchema.decode(obj);
       const checked = exactCheck(obj, decoded);
       const onLeft = (errors: t.Errors): BadRequestError | ImportRulesSchemaDecoded => {
-        return new BadRequestError(errors.join());
+        return new BadRequestError(formatErrors(errors).join());
       };
       const onRight = (schema: ImportRulesSchema): BadRequestError | ImportRulesSchemaDecoded => {
         const validationErrors = importRuleValidateTypeDependents(schema);
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/get_prepackaged_rules.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/get_prepackaged_rules.test.ts
index 597a74f6efbbd..ed1a239facf79 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/get_prepackaged_rules.test.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/get_prepackaged_rules.test.ts
@@ -33,16 +33,14 @@ describe('get_existing_prepackaged_rules', () => {
   });
 
   test('should throw an exception if a pre-packaged rule is not valid', () => {
-    // TODO: Improve the error formatter around [object Object]
     expect(() => getPrepackagedRules([{ not_valid_made_up_key: true }])).toThrow(
-      'name: "(rule name unknown)", rule_id: "(rule rule_id unknown)" within the folder rules/prepackaged_rules is not a valid detection engine rule. Expect the system to not work with pre-packaged rules until this rule is fixed or the file is removed. Error is: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object], Full rule contents are:\n{\n  "not_valid_made_up_key": true\n}'
+      'name: "(rule name unknown)", rule_id: "(rule rule_id unknown)" within the folder rules/prepackaged_rules is not a valid detection engine rule. Expect the system to not work with pre-packaged rules until this rule is fixed or the file is removed. Error is: Invalid value "undefined" supplied to "description",Invalid value "undefined" supplied to "risk_score",Invalid value "undefined" supplied to "name",Invalid value "undefined" supplied to "severity",Invalid value "undefined" supplied to "type",Invalid value "undefined" supplied to "rule_id",Invalid value "undefined" supplied to "version", Full rule contents are:\n{\n  "not_valid_made_up_key": true\n}'
     );
   });
 
   test('should throw an exception with a message having rule_id and name in it', () => {
-    // TODO: Improve the error formatter around [object Object]
     expect(() => getPrepackagedRules([{ name: 'rule name', rule_id: 'id-123' }])).toThrow(
-      'name: "rule name", rule_id: "id-123" within the folder rules/prepackaged_rules is not a valid detection engine rule. Expect the system to not work with pre-packaged rules until this rule is fixed or the file is removed. Error is: [object Object],[object Object],[object Object],[object Object],[object Object], Full rule contents are:\n{\n  "name": "rule name",\n  "rule_id": "id-123"\n}'
+      'name: "rule name", rule_id: "id-123" within the folder rules/prepackaged_rules is not a valid detection engine rule. Expect the system to not work with pre-packaged rules until this rule is fixed or the file is removed. Error is: Invalid value "undefined" supplied to "description",Invalid value "undefined" supplied to "risk_score",Invalid value "undefined" supplied to "severity",Invalid value "undefined" supplied to "type",Invalid value "undefined" supplied to "version", Full rule contents are:\n{\n  "name": "rule name",\n  "rule_id": "id-123"\n}'
     );
   });
 });
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/get_prepackaged_rules.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/get_prepackaged_rules.ts
index d2af93c329636..354f8b90fae23 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/get_prepackaged_rules.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/get_prepackaged_rules.ts
@@ -7,6 +7,7 @@
 import * as t from 'io-ts';
 import { fold } from 'fp-ts/lib/Either';
 import { pipe } from 'fp-ts/lib/pipeable';
+import { formatErrors } from '../../../../common/format_errors';
 import { exactCheck } from '../../../../common/exact_check';
 import {
   addPrepackagedRulesSchema,
@@ -35,11 +36,9 @@ export const validateAllPrepackagedRules = (
         `name: "${ruleName}", rule_id: "${ruleId}" within the folder rules/prepackaged_rules ` +
           `is not a valid detection engine rule. Expect the system ` +
           `to not work with pre-packaged rules until this rule is fixed ` +
-          `or the file is removed. Error is: ${errors.join()}, Full rule contents are:\n${JSON.stringify(
-            rule,
-            null,
-            2
-          )}`
+          `or the file is removed. Error is: ${formatErrors(
+            errors
+          ).join()}, Full rule contents are:\n${JSON.stringify(rule, null, 2)}`
       );
     };
 
diff --git a/x-pack/plugins/security_solution/server/utils/read_stream/create_stream_from_ndjson.ts b/x-pack/plugins/security_solution/server/utils/read_stream/create_stream_from_ndjson.ts
index f455ac0696e4e..0eb021bfe2a83 100644
--- a/x-pack/plugins/security_solution/server/utils/read_stream/create_stream_from_ndjson.ts
+++ b/x-pack/plugins/security_solution/server/utils/read_stream/create_stream_from_ndjson.ts
@@ -8,6 +8,7 @@ import { has, isString } from 'lodash/fp';
 import { pipe } from 'fp-ts/lib/pipeable';
 import { fold } from 'fp-ts/lib/Either';
 import * as t from 'io-ts';
+import { formatErrors } from '../../../common/format_errors';
 import { importRuleValidateTypeDependents } from '../../../common/detection_engine/schemas/request/import_rules_type_dependents';
 import {
   ImportRulesSchemaDecoded,
@@ -47,7 +48,7 @@ export const validateRules = (): Transform => {
       const decoded = importRulesSchema.decode(obj);
       const checked = exactCheck(obj, decoded);
       const onLeft = (errors: t.Errors): BadRequestError | ImportRulesSchemaDecoded => {
-        return new BadRequestError(errors.join());
+        return new BadRequestError(formatErrors(errors).join());
       };
       const onRight = (schema: ImportRulesSchema): BadRequestError | ImportRulesSchemaDecoded => {
         const validationErrors = importRuleValidateTypeDependents(schema);

From 72111702e95214594d5d56bc856e1d5c78e6d802 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Thu, 18 Jun 2020 17:13:28 +0200
Subject: [PATCH 22/63] [RUM Dashboard] Initial Version (#68778)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Casper Hübertz <casper@formgeist.com>
---
 .../elasticsearch_fieldnames.test.ts.snap     |  24 +++
 .../apm/common/elasticsearch_fieldnames.ts    |   6 +
 .../plugins/apm/common/projections/errors.ts  |   2 +-
 .../plugins/apm/common/projections/metrics.ts |   2 +-
 .../apm/common/projections/rum_overview.ts    |  46 +++++
 .../apm/common/projections/services.ts        |   2 +-
 .../apm/common/projections/transactions.ts    |   2 +-
 .../plugins/apm/common/projections/typings.ts |   1 +
 .../helpers => common/utils}/range_filter.ts  |   0
 .../apm/e2e/cypress/integration/helpers.ts    |  20 +-
 .../cypress/integration/rum_dashboard.feature |   7 +
 .../apm/e2e/cypress/integration/snapshots.js  |  23 ++-
 .../support/step_definitions/rum_dashboard.ts |  43 ++++
 x-pack/plugins/apm/e2e/ingest-data/replay.js  |   6 +-
 x-pack/plugins/apm/e2e/run-e2e.sh             |   2 +-
 x-pack/plugins/apm/e2e/yarn.lock              |   8 +-
 .../plugins/apm/public/application/index.tsx  |   3 +-
 .../apm/public/components/app/Home/index.tsx  |  24 ++-
 .../app/Main/route_config/index.tsx           |   9 +
 .../app/Main/route_config/route_names.tsx     |   1 +
 .../app/RumDashboard/ChartWrapper/index.tsx   |  63 ++++++
 .../app/RumDashboard/ClientMetrics/index.tsx  |  82 ++++++++
 .../PercentileAnnotations.tsx                 |  60 ++++++
 .../PageLoadDistribution/index.tsx            | 144 +++++++++++++
 .../app/RumDashboard/PageViewsTrend/index.tsx | 111 ++++++++++
 .../app/RumDashboard/RumDashboard.tsx         |  65 ++++++
 .../components/app/RumDashboard/index.tsx     |  40 ++++
 .../app/RumDashboard/translations.ts          |  73 +++++++
 .../app/ServiceDetails/ServiceDetailTabs.tsx  |  16 ++
 .../components/shared/KueryBar/index.tsx      |   4 +-
 .../shared/Links/apm/RumOverviewLink.tsx      |  31 +++
 .../lib/errors/distribution/get_buckets.ts    |   2 +-
 .../apm/server/lib/errors/get_error_group.ts  |   2 +-
 .../__snapshots__/queries.test.ts.snap        | 194 ++++++++++++++++++
 .../lib/rum_client/get_client_metrics.ts      |  61 ++++++
 .../rum_client/get_page_load_distribution.ts  | 140 +++++++++++++
 .../lib/rum_client/get_page_view_trends.ts    |  57 +++++
 .../apm/server/lib/rum_client/queries.test.ts |  52 +++++
 .../get_service_map_service_node_info.ts      |   2 +-
 .../lib/service_map/get_trace_sample_ids.ts   |   2 +-
 .../get_derived_service_annotations.ts        |   2 +-
 .../lib/services/get_service_agent_name.ts    |   2 +-
 .../services/get_service_transaction_types.ts |   2 +-
 .../apm/server/lib/traces/get_trace_items.ts  |   2 +-
 .../avg_duration_by_browser/fetcher.ts        |   2 +-
 .../avg_duration_by_country/index.ts          |   2 +-
 .../lib/transactions/breakdown/index.ts       |   2 +-
 .../charts/get_timeseries_data/fetcher.ts     |   2 +-
 .../distribution/get_buckets/fetcher.ts       |   2 +-
 .../lib/transactions/get_transaction/index.ts |   2 +-
 .../server/lib/ui_filters/get_environments.ts |   2 +-
 .../lib/ui_filters/local_ui_filters/config.ts |  35 ++++
 .../apm/server/routes/create_apm_api.ts       |  14 +-
 .../plugins/apm/server/routes/rum_client.ts   |  57 +++++
 .../plugins/apm/server/routes/ui_filters.ts   |  11 +
 .../apm/typings/elasticsearch/aggregations.ts |  26 +++
 .../translations/translations/ja-JP.json      |   1 -
 .../translations/translations/zh-CN.json      |   1 -
 58 files changed, 1552 insertions(+), 47 deletions(-)
 create mode 100644 x-pack/plugins/apm/common/projections/rum_overview.ts
 rename x-pack/plugins/apm/{server/lib/helpers => common/utils}/range_filter.ts (100%)
 create mode 100644 x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature
 create mode 100644 x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum_dashboard.ts
 create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx
 create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
 create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
 create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
 create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
 create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
 create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
 create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
 create mode 100644 x-pack/plugins/apm/public/components/shared/Links/apm/RumOverviewLink.tsx
 create mode 100644 x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap
 create mode 100644 x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts
 create mode 100644 x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts
 create mode 100644 x-pack/plugins/apm/server/lib/rum_client/get_page_view_trends.ts
 create mode 100644 x-pack/plugins/apm/server/lib/rum_client/queries.test.ts
 create mode 100644 x-pack/plugins/apm/server/routes/rum_client.ts

diff --git a/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap b/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap
index 54dd4704edfc0..f3dc7abcf8239 100644
--- a/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap
+++ b/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap
@@ -4,6 +4,8 @@ exports[`Error AGENT_NAME 1`] = `"java"`;
 
 exports[`Error AGENT_VERSION 1`] = `"agent version"`;
 
+exports[`Error CLIENT_GEO 1`] = `undefined`;
+
 exports[`Error CLIENT_GEO_COUNTRY_ISO_CODE 1`] = `undefined`;
 
 exports[`Error CONTAINER_ID 1`] = `undefined`;
@@ -122,18 +124,26 @@ exports[`Error TRANSACTION_SAMPLED 1`] = `undefined`;
 
 exports[`Error TRANSACTION_TYPE 1`] = `"request"`;
 
+exports[`Error TRANSACTION_URL 1`] = `undefined`;
+
 exports[`Error URL_FULL 1`] = `undefined`;
 
+exports[`Error USER_AGENT_DEVICE 1`] = `undefined`;
+
 exports[`Error USER_AGENT_NAME 1`] = `undefined`;
 
 exports[`Error USER_AGENT_ORIGINAL 1`] = `undefined`;
 
+exports[`Error USER_AGENT_OS 1`] = `undefined`;
+
 exports[`Error USER_ID 1`] = `undefined`;
 
 exports[`Span AGENT_NAME 1`] = `"java"`;
 
 exports[`Span AGENT_VERSION 1`] = `"agent version"`;
 
+exports[`Span CLIENT_GEO 1`] = `undefined`;
+
 exports[`Span CLIENT_GEO_COUNTRY_ISO_CODE 1`] = `undefined`;
 
 exports[`Span CONTAINER_ID 1`] = `undefined`;
@@ -252,18 +262,26 @@ exports[`Span TRANSACTION_SAMPLED 1`] = `undefined`;
 
 exports[`Span TRANSACTION_TYPE 1`] = `undefined`;
 
+exports[`Span TRANSACTION_URL 1`] = `undefined`;
+
 exports[`Span URL_FULL 1`] = `undefined`;
 
+exports[`Span USER_AGENT_DEVICE 1`] = `undefined`;
+
 exports[`Span USER_AGENT_NAME 1`] = `undefined`;
 
 exports[`Span USER_AGENT_ORIGINAL 1`] = `undefined`;
 
+exports[`Span USER_AGENT_OS 1`] = `undefined`;
+
 exports[`Span USER_ID 1`] = `undefined`;
 
 exports[`Transaction AGENT_NAME 1`] = `"java"`;
 
 exports[`Transaction AGENT_VERSION 1`] = `"agent version"`;
 
+exports[`Transaction CLIENT_GEO 1`] = `undefined`;
+
 exports[`Transaction CLIENT_GEO_COUNTRY_ISO_CODE 1`] = `undefined`;
 
 exports[`Transaction CONTAINER_ID 1`] = `"container1234567890abcdef"`;
@@ -382,10 +400,16 @@ exports[`Transaction TRANSACTION_SAMPLED 1`] = `true`;
 
 exports[`Transaction TRANSACTION_TYPE 1`] = `"transaction type"`;
 
+exports[`Transaction TRANSACTION_URL 1`] = `undefined`;
+
 exports[`Transaction URL_FULL 1`] = `"http://www.elastic.co"`;
 
+exports[`Transaction USER_AGENT_DEVICE 1`] = `undefined`;
+
 exports[`Transaction USER_AGENT_NAME 1`] = `"Other"`;
 
 exports[`Transaction USER_AGENT_ORIGINAL 1`] = `"test original"`;
 
+exports[`Transaction USER_AGENT_OS 1`] = `undefined`;
+
 exports[`Transaction USER_ID 1`] = `"1337"`;
diff --git a/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts b/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts
index d5c3f91eb9247..7537dba7f8411 100644
--- a/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts
+++ b/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts
@@ -87,3 +87,9 @@ export const CONTAINER_ID = 'container.id';
 export const POD_NAME = 'kubernetes.pod.name';
 
 export const CLIENT_GEO_COUNTRY_ISO_CODE = 'client.geo.country_iso_code';
+
+// RUM Labels
+export const TRANSACTION_URL = 'transaction.page.url';
+export const CLIENT_GEO = 'client.geo';
+export const USER_AGENT_DEVICE = 'user_agent.device.name';
+export const USER_AGENT_OS = 'user_agent.os.name';
diff --git a/x-pack/plugins/apm/common/projections/errors.ts b/x-pack/plugins/apm/common/projections/errors.ts
index bd397afae2243..390a8a0968102 100644
--- a/x-pack/plugins/apm/common/projections/errors.ts
+++ b/x-pack/plugins/apm/common/projections/errors.ts
@@ -16,7 +16,7 @@ import {
   ERROR_GROUP_ID,
 } from '../elasticsearch_fieldnames';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { rangeFilter } from '../../server/lib/helpers/range_filter';
+import { rangeFilter } from '../utils/range_filter';
 
 export function getErrorGroupsProjection({
   setup,
diff --git a/x-pack/plugins/apm/common/projections/metrics.ts b/x-pack/plugins/apm/common/projections/metrics.ts
index b05ec5f2ba876..45998bfe82e96 100644
--- a/x-pack/plugins/apm/common/projections/metrics.ts
+++ b/x-pack/plugins/apm/common/projections/metrics.ts
@@ -16,7 +16,7 @@ import {
   SERVICE_NODE_NAME,
 } from '../elasticsearch_fieldnames';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { rangeFilter } from '../../server/lib/helpers/range_filter';
+import { rangeFilter } from '../utils/range_filter';
 import { SERVICE_NODE_NAME_MISSING } from '../service_nodes';
 
 function getServiceNodeNameFilters(serviceNodeName?: string) {
diff --git a/x-pack/plugins/apm/common/projections/rum_overview.ts b/x-pack/plugins/apm/common/projections/rum_overview.ts
new file mode 100644
index 0000000000000..b1218546d09ff
--- /dev/null
+++ b/x-pack/plugins/apm/common/projections/rum_overview.ts
@@ -0,0 +1,46 @@
+/*
+ * 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 {
+  Setup,
+  SetupTimeRange,
+  SetupUIFilters,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../server/lib/helpers/setup_request';
+import { PROCESSOR_EVENT, TRANSACTION_TYPE } from '../elasticsearch_fieldnames';
+import { rangeFilter } from '../utils/range_filter';
+
+export function getRumOverviewProjection({
+  setup,
+}: {
+  setup: Setup & SetupTimeRange & SetupUIFilters;
+}) {
+  const { start, end, uiFiltersES, indices } = setup;
+
+  const bool = {
+    filter: [
+      { range: rangeFilter(start, end) },
+      { term: { [PROCESSOR_EVENT]: 'transaction' } },
+      { term: { [TRANSACTION_TYPE]: 'page-load' } },
+      {
+        // Adding this filter to cater for some inconsistent rum data
+        exists: {
+          field: 'transaction.marks.navigationTiming.fetchStart',
+        },
+      },
+      ...uiFiltersES,
+    ],
+  };
+
+  return {
+    index: indices['apm_oss.transactionIndices'],
+    body: {
+      query: {
+        bool,
+      },
+    },
+  };
+}
diff --git a/x-pack/plugins/apm/common/projections/services.ts b/x-pack/plugins/apm/common/projections/services.ts
index bcfc27d720ba9..80a3471e9c30d 100644
--- a/x-pack/plugins/apm/common/projections/services.ts
+++ b/x-pack/plugins/apm/common/projections/services.ts
@@ -12,7 +12,7 @@ import {
 } from '../../server/lib/helpers/setup_request';
 import { SERVICE_NAME, PROCESSOR_EVENT } from '../elasticsearch_fieldnames';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { rangeFilter } from '../../server/lib/helpers/range_filter';
+import { rangeFilter } from '../utils/range_filter';
 
 export function getServicesProjection({
   setup,
diff --git a/x-pack/plugins/apm/common/projections/transactions.ts b/x-pack/plugins/apm/common/projections/transactions.ts
index 99d5a04c1e722..b6cd73ca9aaad 100644
--- a/x-pack/plugins/apm/common/projections/transactions.ts
+++ b/x-pack/plugins/apm/common/projections/transactions.ts
@@ -17,7 +17,7 @@ import {
   TRANSACTION_NAME,
 } from '../elasticsearch_fieldnames';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { rangeFilter } from '../../server/lib/helpers/range_filter';
+import { rangeFilter } from '../utils/range_filter';
 
 export function getTransactionsProjection({
   setup,
diff --git a/x-pack/plugins/apm/common/projections/typings.ts b/x-pack/plugins/apm/common/projections/typings.ts
index 3361770336dde..693795b09e1d0 100644
--- a/x-pack/plugins/apm/common/projections/typings.ts
+++ b/x-pack/plugins/apm/common/projections/typings.ts
@@ -29,4 +29,5 @@ export enum PROJECTION {
   METRICS = 'metrics',
   ERROR_GROUPS = 'errorGroups',
   SERVICE_NODES = 'serviceNodes',
+  RUM_OVERVIEW = 'rumOverview',
 }
diff --git a/x-pack/plugins/apm/server/lib/helpers/range_filter.ts b/x-pack/plugins/apm/common/utils/range_filter.ts
similarity index 100%
rename from x-pack/plugins/apm/server/lib/helpers/range_filter.ts
rename to x-pack/plugins/apm/common/utils/range_filter.ts
diff --git a/x-pack/plugins/apm/e2e/cypress/integration/helpers.ts b/x-pack/plugins/apm/e2e/cypress/integration/helpers.ts
index 90d5c9eda632d..689b88390810f 100644
--- a/x-pack/plugins/apm/e2e/cypress/integration/helpers.ts
+++ b/x-pack/plugins/apm/e2e/cypress/integration/helpers.ts
@@ -6,20 +6,30 @@
 
 /* eslint-disable import/no-extraneous-dependencies */
 
-const RANGE_FROM = '2020-03-04T12:30:00.000Z';
-const RANGE_TO = '2020-03-04T13:00:00.000Z';
+const RANGE_FROM = '2020-06-01T14:59:32.686Z';
+const RANGE_TO = '2020-06-16T16:59:36.219Z';
+
 const BASE_URL = Cypress.config().baseUrl;
 
 /** The default time in ms to wait for a Cypress command to complete */
 export const DEFAULT_TIMEOUT = 60 * 1000;
 
-export function loginAndWaitForPage(url: string) {
+export function loginAndWaitForPage(
+  url: string,
+  dateRange?: { to: string; from: string }
+) {
   const username = Cypress.env('elasticsearch_username');
   const password = Cypress.env('elasticsearch_password');
 
   cy.log(`Authenticating via ${username} / ${password}`);
-
-  const fullUrl = `${BASE_URL}${url}?rangeFrom=${RANGE_FROM}&rangeTo=${RANGE_TO}`;
+  let rangeFrom = RANGE_FROM;
+  let rangeTo = RANGE_TO;
+  if (dateRange) {
+    rangeFrom = dateRange.from;
+    rangeTo = dateRange.to;
+  }
+
+  const fullUrl = `${BASE_URL}${url}?rangeFrom=${rangeFrom}&rangeTo=${rangeTo}`;
   cy.visit(fullUrl, { auth: { username, password } });
 
   cy.viewport('macbook-15');
diff --git a/x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature b/x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature
new file mode 100644
index 0000000000000..eabfaf096731b
--- /dev/null
+++ b/x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature
@@ -0,0 +1,7 @@
+Feature: RUM Dashboard
+
+  Scenario: Client metrics
+    Given a user browses the APM UI application for RUM Data
+    When the user inspects the real user monitoring tab
+    Then should redirect to rum dashboard
+      And should have correct client metrics
diff --git a/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js b/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js
index d4c8ba4910850..dd96a57ef8c45 100644
--- a/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js
+++ b/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js
@@ -1,10 +1,17 @@
 module.exports = {
-  APM: {
-    'Transaction duration charts': {
-      '1': '350 ms',
-      '2': '175 ms',
-      '3': '0 ms',
-    },
+  "__version": "4.5.0",
+  "APM": {
+    "Transaction duration charts": {
+      "1": "55 ms",
+      "2": "28 ms",
+      "3": "0 ms"
+    }
   },
-  __version: '4.5.0',
-};
+  "RUM Dashboard": {
+    "Client metrics": {
+      "1": "62",
+      "2": "0.07 sec",
+      "3": "0.01 sec"
+    }
+  }
+}
diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum_dashboard.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum_dashboard.ts
new file mode 100644
index 0000000000000..38eadbf513032
--- /dev/null
+++ b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum_dashboard.ts
@@ -0,0 +1,43 @@
+/*
+ * 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 { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { loginAndWaitForPage } from '../../integration/helpers';
+
+/** The default time in ms to wait for a Cypress command to complete */
+export const DEFAULT_TIMEOUT = 60 * 1000;
+
+Given(`a user browses the APM UI application for RUM Data`, () => {
+  // open service overview page
+  const RANGE_FROM = 'now-24h';
+  const RANGE_TO = 'now';
+  loginAndWaitForPage(`/app/apm#/services`, { from: RANGE_FROM, to: RANGE_TO });
+});
+
+When(`the user inspects the real user monitoring tab`, () => {
+  // click rum tab
+  cy.get(':contains(Real User Monitoring)', { timeout: DEFAULT_TIMEOUT })
+    .last()
+    .click({ force: true });
+});
+
+Then(`should redirect to rum dashboard`, () => {
+  cy.url().should('contain', `/app/apm#/rum-overview`);
+});
+
+Then(`should have correct client metrics`, () => {
+  const clientMetrics = '[data-cy=client-metrics] .euiStat__title';
+
+  // wait for all loading to finish
+  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  cy.get('.euiStat__title-isLoading').should('not.be.visible');
+
+  cy.get(clientMetrics).eq(2).invoke('text').snapshot();
+
+  cy.get(clientMetrics).eq(1).invoke('text').snapshot();
+
+  cy.get(clientMetrics).eq(0).invoke('text').snapshot();
+});
diff --git a/x-pack/plugins/apm/e2e/ingest-data/replay.js b/x-pack/plugins/apm/e2e/ingest-data/replay.js
index ae3f62894afc0..3478039f39b50 100644
--- a/x-pack/plugins/apm/e2e/ingest-data/replay.js
+++ b/x-pack/plugins/apm/e2e/ingest-data/replay.js
@@ -99,7 +99,11 @@ async function init() {
     .split('\n')
     .filter((item) => item)
     .map((item) => JSON.parse(item))
-    .filter((item) => item.url === '/intake/v2/events');
+    .filter((item) => {
+      return (
+        item.url === '/intake/v2/events' || item.url === '/intake/v2/rum/events'
+      );
+    });
 
   spinner.start();
   requestProgress.total = items.length;
diff --git a/x-pack/plugins/apm/e2e/run-e2e.sh b/x-pack/plugins/apm/e2e/run-e2e.sh
index aa7c0e21425ad..43cc74a197f42 100755
--- a/x-pack/plugins/apm/e2e/run-e2e.sh
+++ b/x-pack/plugins/apm/e2e/run-e2e.sh
@@ -109,7 +109,7 @@ echo "${bold}Static mock data (logs: ${E2E_DIR}${TMP_DIR}/ingest-data.log)${norm
 # Download static data if not already done
 if [ ! -e "${TMP_DIR}/events.json" ]; then
     echo 'Downloading events.json...'
-    curl --silent https://storage.googleapis.com/apm-ui-e2e-static-data/events.json --output ${TMP_DIR}/events.json
+    curl --silent https://storage.googleapis.com/apm-ui-e2e-static-data/2020-06-12.json --output ${TMP_DIR}/events.json
 fi
 
 # echo "Deleting existing indices (apm* and .apm*)"
diff --git a/x-pack/plugins/apm/e2e/yarn.lock b/x-pack/plugins/apm/e2e/yarn.lock
index a6729c56ecb09..975154d71b85d 100644
--- a/x-pack/plugins/apm/e2e/yarn.lock
+++ b/x-pack/plugins/apm/e2e/yarn.lock
@@ -5561,10 +5561,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@3.9.2:
-  version "3.9.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.2.tgz#64e9c8e9be6ea583c54607677dd4680a1cf35db9"
-  integrity sha512-q2ktq4n/uLuNNShyayit+DTobV2ApPEo/6so68JaD5ojvc/6GClBipedB9zNWYxRSAlZXAe405Rlijzl6qDiSw==
+typescript@3.9.5:
+  version "3.9.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.5.tgz#586f0dba300cde8be52dd1ac4f7e1009c1b13f36"
+  integrity sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==
 
 umd@^3.0.0:
   version "3.0.3"
diff --git a/x-pack/plugins/apm/public/application/index.tsx b/x-pack/plugins/apm/public/application/index.tsx
index 56c427e67ad4c..8800b2fd492bf 100644
--- a/x-pack/plugins/apm/public/application/index.tsx
+++ b/x-pack/plugins/apm/public/application/index.tsx
@@ -23,7 +23,7 @@ import {
   KibanaContextProvider,
   useUiSetting$,
 } from '../../../../../src/plugins/kibana_react/public';
-import { px, unit, units } from '../style/variables';
+import { px, units } from '../style/variables';
 import { UpdateBreadcrumbs } from '../components/app/Main/UpdateBreadcrumbs';
 import { APMIndicesPermission } from '../components/app/APMIndicesPermission';
 import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange';
@@ -33,7 +33,6 @@ import { ConfigSchema } from '..';
 import 'react-vis/dist/style.css';
 
 const MainContainer = styled.div`
-  min-width: ${px(unit * 50)};
   padding: ${px(units.plus)};
   height: 100%;
 `;
diff --git a/x-pack/plugins/apm/public/components/app/Home/index.tsx b/x-pack/plugins/apm/public/components/app/Home/index.tsx
index 74cbc00b17889..c325a72375359 100644
--- a/x-pack/plugins/apm/public/components/app/Home/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Home/index.tsx
@@ -25,6 +25,9 @@ import { SetupInstructionsLink } from '../../shared/Links/SetupInstructionsLink'
 import { ServiceMap } from '../ServiceMap';
 import { ServiceOverview } from '../ServiceOverview';
 import { TraceOverview } from '../TraceOverview';
+import { RumOverview } from '../RumDashboard';
+import { RumOverviewLink } from '../../shared/Links/apm/RumOverviewLink';
+import { EndUserExperienceLabel } from '../RumDashboard/translations';
 
 function getHomeTabs({
   serviceMapEnabled = true,
@@ -70,14 +73,27 @@ function getHomeTabs({
     });
   }
 
+  homeTabs.push({
+    link: (
+      <RumOverviewLink>
+        {i18n.translate('xpack.apm.home.rumTabLabel', {
+          defaultMessage: 'Real User Monitoring',
+        })}
+      </RumOverviewLink>
+    ),
+    render: () => <RumOverview />,
+    name: 'rum-overview',
+  });
+
   return homeTabs;
 }
+
 const SETTINGS_LINK_LABEL = i18n.translate('xpack.apm.settingsLinkLabel', {
   defaultMessage: 'Settings',
 });
 
 interface Props {
-  tab: 'traces' | 'services' | 'service-map';
+  tab: 'traces' | 'services' | 'service-map' | 'rum-overview';
 }
 
 export function Home({ tab }: Props) {
@@ -93,7 +109,11 @@ export function Home({ tab }: Props) {
         <EuiFlexGroup alignItems="center">
           <EuiFlexItem grow={false}>
             <EuiTitle size="l">
-              <h1>APM</h1>
+              <h1>
+                {selectedTab.name === 'rum-overview'
+                  ? EndUserExperienceLabel
+                  : 'APM'}
+              </h1>
             </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
diff --git a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx
index 577af75e92d9e..295f343b411a9 100644
--- a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx
@@ -250,4 +250,13 @@ export const routes: BreadcrumbRoute[] = [
     }),
     name: RouteName.CUSTOMIZE_UI,
   },
+  {
+    exact: true,
+    path: '/rum-overview',
+    component: () => <Home tab="rum-overview" />,
+    breadcrumb: i18n.translate('xpack.apm.home.rumOverview.title', {
+      defaultMessage: 'Real User Monitoring',
+    }),
+    name: RouteName.RUM_OVERVIEW,
+  },
 ];
diff --git a/x-pack/plugins/apm/public/components/app/Main/route_config/route_names.tsx b/x-pack/plugins/apm/public/components/app/Main/route_config/route_names.tsx
index 167de1a37f427..4965aa9db8760 100644
--- a/x-pack/plugins/apm/public/components/app/Main/route_config/route_names.tsx
+++ b/x-pack/plugins/apm/public/components/app/Main/route_config/route_names.tsx
@@ -26,4 +26,5 @@ export enum RouteName {
   SERVICE_NODES = 'nodes',
   LINK_TO_TRACE = 'link_to_trace',
   CUSTOMIZE_UI = 'customize_ui',
+  RUM_OVERVIEW = 'rum_overview',
 }
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx
new file mode 100644
index 0000000000000..a3cfbb28abee2
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx
@@ -0,0 +1,63 @@
+/*
+ * 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, HTMLAttributes } from 'react';
+import {
+  EuiErrorBoundary,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingChart,
+} from '@elastic/eui';
+
+interface Props {
+  /**
+   * Height for the chart
+   */
+  height?: string;
+  /**
+   * if chart data source is still loading
+   */
+  loading?: boolean;
+  /**
+   * aria-label for accessibility
+   */
+  'aria-label'?: string;
+}
+
+export const ChartWrapper: FC<Props> = ({
+  loading = false,
+  height = '100%',
+  children,
+  ...rest
+}) => {
+  const opacity = loading === true ? 0.3 : 1;
+
+  return (
+    <EuiErrorBoundary>
+      <div
+        style={{
+          height,
+          opacity,
+          transition: 'opacity 0.2s',
+        }}
+        {...(rest as HTMLAttributes<HTMLDivElement>)}
+      >
+        {children}
+      </div>
+      {loading === true && (
+        <EuiFlexGroup
+          justifyContent="spaceAround"
+          alignItems="center"
+          style={{ height, marginTop: `-${height}`, marginBottom: 0 }}
+        >
+          <EuiFlexItem grow={false}>
+            <EuiLoadingChart size="xl" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
+    </EuiErrorBoundary>
+  );
+};
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
new file mode 100644
index 0000000000000..8c0a7c6a91f67
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
@@ -0,0 +1,82 @@
+/*
+ * 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.
+ */
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import { EuiFlexGroup, EuiFlexItem, EuiStat } from '@elastic/eui';
+import { useFetcher } from '../../../../hooks/useFetcher';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { BackEndLabel, FrontEndLabel, PageViewsLabel } from '../translations';
+
+export const formatBigValue = (val?: number | null, fixed?: number): string => {
+  if (val && val >= 1000) {
+    const result = val / 1000;
+    if (fixed) {
+      return result.toFixed(fixed) + 'k';
+    }
+    return result + 'k';
+  }
+  return val + '';
+};
+
+const ClFlexGroup = styled(EuiFlexGroup)`
+  flex-direction: row;
+  @media only screen and (max-width: 768px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+`;
+
+export const ClientMetrics = () => {
+  const { urlParams, uiFilters } = useUrlParams();
+
+  const { start, end } = urlParams;
+
+  const { data, status } = useFetcher(
+    (callApmApi) => {
+      if (start && end) {
+        return callApmApi({
+          pathname: '/api/apm/rum/client-metrics',
+          params: {
+            query: { start, end, uiFilters: JSON.stringify(uiFilters) },
+          },
+        });
+      }
+    },
+    [start, end, uiFilters]
+  );
+
+  const STAT_STYLE = { width: '240px' };
+
+  return (
+    <ClFlexGroup responsive={false}>
+      <EuiFlexItem grow={false} style={STAT_STYLE}>
+        <EuiStat
+          titleSize="s"
+          title={(data?.backEnd?.value?.toFixed(2) ?? '-') + ' sec'}
+          description={BackEndLabel}
+          isLoading={status !== 'success'}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false} style={STAT_STYLE}>
+        <EuiStat
+          titleSize="s"
+          title={(data?.frontEnd?.value?.toFixed(2) ?? '-') + ' sec'}
+          description={FrontEndLabel}
+          isLoading={status !== 'success'}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false} style={STAT_STYLE}>
+        <EuiStat
+          titleSize="s"
+          title={formatBigValue(data?.pageViews?.value, 2) ?? '-'}
+          description={PageViewsLabel}
+          isLoading={status !== 'success'}
+        />
+      </EuiFlexItem>
+    </ClFlexGroup>
+  );
+};
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
new file mode 100644
index 0000000000000..9c89b8bc161b7
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
@@ -0,0 +1,60 @@
+/*
+ * 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 * as React from 'react';
+import {
+  AnnotationDomainTypes,
+  LineAnnotation,
+  LineAnnotationDatum,
+  LineAnnotationStyle,
+} from '@elastic/charts';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import styled from 'styled-components';
+
+interface Props {
+  percentiles?: Record<string, number>;
+}
+
+function generateAnnotationData(
+  values?: Record<string, number>
+): LineAnnotationDatum[] {
+  return Object.entries(values ?? {}).map((value, index) => ({
+    dataValue: value[1],
+    details: `${(+value[0]).toFixed(0)}`,
+  }));
+}
+
+const PercentileMarker = styled.span`
+  position: relative;
+  bottom: 140px;
+`;
+
+export const PercentileAnnotations = ({ percentiles }: Props) => {
+  const dataValues = generateAnnotationData(percentiles) ?? [];
+
+  const style: Partial<LineAnnotationStyle> = {
+    line: {
+      strokeWidth: 1,
+      stroke: euiLightVars.euiColorSecondary,
+      opacity: 1,
+    },
+  };
+
+  return (
+    <>
+      {dataValues.map((annotation, index) => (
+        <LineAnnotation
+          id={index + 'annotation_' + annotation.dataValue}
+          key={index + 'percentile_' + annotation.dataValue}
+          domainType={AnnotationDomainTypes.XDomain}
+          dataValues={[annotation]}
+          style={style}
+          marker={<PercentileMarker>{annotation.details}th</PercentileMarker>}
+        />
+      ))}
+    </>
+  );
+};
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
new file mode 100644
index 0000000000000..c7a0b64f6a8b8
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
@@ -0,0 +1,144 @@
+/*
+ * 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 } from 'react';
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
+import {
+  Axis,
+  Chart,
+  ScaleType,
+  LineSeries,
+  CurveType,
+  BrushEndListener,
+  Settings,
+  TooltipValueFormatter,
+  TooltipValue,
+} from '@elastic/charts';
+import { Position } from '@elastic/charts/dist/utils/commons';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { useFetcher } from '../../../../hooks/useFetcher';
+import { ChartWrapper } from '../ChartWrapper';
+import { PercentileAnnotations } from './PercentileAnnotations';
+import {
+  PageLoadDistLabel,
+  PageLoadTimeLabel,
+  PercPageLoadedLabel,
+  ResetZoomLabel,
+} from '../translations';
+
+export const PageLoadDistribution = () => {
+  const { urlParams, uiFilters } = useUrlParams();
+
+  const { start, end } = urlParams;
+
+  const [percentileRange, setPercentileRange] = useState<{
+    min: string | null;
+    max: string | null;
+  }>({
+    min: null,
+    max: null,
+  });
+
+  const { data, status } = useFetcher(
+    (callApmApi) => {
+      if (start && end) {
+        return callApmApi({
+          pathname: '/api/apm/rum-client/page-load-distribution',
+          params: {
+            query: {
+              start,
+              end,
+              uiFilters: JSON.stringify(uiFilters),
+              ...(percentileRange.min && percentileRange.max
+                ? {
+                    minPercentile: percentileRange.min,
+                    maxPercentile: percentileRange.max,
+                  }
+                : {}),
+            },
+          },
+        });
+      }
+    },
+    [end, start, uiFilters, percentileRange.min, percentileRange.max]
+  );
+
+  const onBrushEnd: BrushEndListener = ({ x }) => {
+    if (!x) {
+      return;
+    }
+    const [minX, maxX] = x;
+    setPercentileRange({ min: String(minX), max: String(maxX) });
+  };
+
+  const headerFormatter: TooltipValueFormatter = (tooltip: TooltipValue) => {
+    return (
+      <div>
+        <p>{tooltip.value} seconds</p>
+      </div>
+    );
+  };
+
+  const tooltipProps = {
+    headerFormatter,
+  };
+
+  return (
+    <div>
+      <EuiFlexGroup responsive={false}>
+        <EuiFlexItem>
+          <EuiTitle size="xs">
+            <h3>{PageLoadDistLabel}</h3>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            iconType="inspect"
+            size="s"
+            onClick={() => {
+              setPercentileRange({ min: null, max: null });
+            }}
+            fill={percentileRange.min !== null && percentileRange.max !== null}
+          >
+            {ResetZoomLabel}
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="m" />
+      <ChartWrapper loading={status !== 'success'} height="200px">
+        <Chart className="story-chart">
+          <Settings onBrushEnd={onBrushEnd} tooltip={tooltipProps} />
+          <PercentileAnnotations percentiles={data?.percentiles} />
+          <Axis
+            id="bottom"
+            title={PageLoadTimeLabel}
+            position={Position.Bottom}
+          />
+          <Axis
+            id="left"
+            title={PercPageLoadedLabel}
+            position={Position.Left}
+            tickFormat={(d) => Number(d).toFixed(1) + ' %'}
+          />
+          <LineSeries
+            id={'PagesPercentage'}
+            name={PercPageLoadedLabel}
+            xScaleType={ScaleType.Linear}
+            yScaleType={ScaleType.Linear}
+            data={data?.pageLoadDistribution ?? []}
+            curve={CurveType.CURVE_NATURAL}
+          />
+        </Chart>
+      </ChartWrapper>
+    </div>
+  );
+};
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
new file mode 100644
index 0000000000000..cc41bd4352947
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
@@ -0,0 +1,111 @@
+/*
+ * 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 * as React from 'react';
+import { EuiTitle } from '@elastic/eui';
+import {
+  Axis,
+  BarSeries,
+  BrushEndListener,
+  Chart,
+  niceTimeFormatByDay,
+  ScaleType,
+  Settings,
+  timeFormatter,
+} from '@elastic/charts';
+import moment from 'moment';
+import { Position } from '@elastic/charts/dist/utils/commons';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { useFetcher } from '../../../../hooks/useFetcher';
+import { ChartWrapper } from '../ChartWrapper';
+import { DateTimeLabel, PageViewsLabel } from '../translations';
+import { history } from '../../../../utils/history';
+import { fromQuery, toQuery } from '../../../shared/Links/url_helpers';
+import { formatBigValue } from '../ClientMetrics';
+
+export const PageViewsTrend = () => {
+  const { urlParams, uiFilters } = useUrlParams();
+
+  const { start, end } = urlParams;
+
+  const { data, status } = useFetcher(
+    (callApmApi) => {
+      if (start && end) {
+        return callApmApi({
+          pathname: '/api/apm/rum-client/page-view-trends',
+          params: {
+            query: {
+              start,
+              end,
+              uiFilters: JSON.stringify(uiFilters),
+            },
+          },
+        });
+      }
+    },
+    [end, start, uiFilters]
+  );
+  const formatter = timeFormatter(niceTimeFormatByDay(2));
+
+  const onBrushEnd: BrushEndListener = ({ x }) => {
+    if (!x) {
+      return;
+    }
+    const [minX, maxX] = x;
+
+    const rangeFrom = moment(minX).toISOString();
+    const rangeTo = moment(maxX).toISOString();
+
+    history.push({
+      ...history.location,
+      search: fromQuery({
+        ...toQuery(history.location.search),
+        rangeFrom,
+        rangeTo,
+      }),
+    });
+  };
+
+  return (
+    <div>
+      <EuiTitle size="xs">
+        <h3>{PageViewsLabel}</h3>
+      </EuiTitle>
+      <ChartWrapper loading={status !== 'success'} height="200px">
+        <Chart>
+          <Settings
+            showLegend={false}
+            showLegendExtra
+            legendPosition={Position.Bottom}
+            onBrushEnd={onBrushEnd}
+          />
+          <Axis
+            id="date_time"
+            position={Position.Bottom}
+            title={DateTimeLabel}
+            tickFormat={formatter}
+          />
+          <Axis
+            id="page_views"
+            title={PageViewsLabel}
+            position={Position.Left}
+            tickFormat={(d) => formatBigValue(Number(d))}
+          />
+          <BarSeries
+            id={PageViewsLabel}
+            color={[euiLightVars.euiColorLightShade]}
+            xScaleType={ScaleType.Linear}
+            yScaleType={ScaleType.Linear}
+            xAccessor="x"
+            yAccessors={['y']}
+            data={data ?? []}
+          />
+        </Chart>
+      </ChartWrapper>
+    </div>
+  );
+};
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
new file mode 100644
index 0000000000000..e3fa7374afb38
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
@@ -0,0 +1,65 @@
+/*
+ * 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,
+  EuiTitle,
+  EuiSpacer,
+  EuiPanel,
+} from '@elastic/eui';
+import React from 'react';
+import { ClientMetrics } from './ClientMetrics';
+import { PageViewsTrend } from './PageViewsTrend';
+import { PageLoadDistribution } from './PageLoadDistribution';
+import { getWhatIsGoingOnLabel } from './translations';
+import { useUrlParams } from '../../../hooks/useUrlParams';
+
+export function RumDashboard() {
+  const { urlParams } = useUrlParams();
+
+  const { environment } = urlParams;
+
+  let environmentLabel = environment || 'all environments';
+
+  if (environment === 'ENVIRONMENT_NOT_DEFINED') {
+    environmentLabel = 'undefined environment';
+  }
+
+  return (
+    <>
+      <EuiTitle>
+        <h2>{getWhatIsGoingOnLabel(environmentLabel)}</h2>
+      </EuiTitle>
+      <EuiSpacer />
+      <EuiFlexGroup direction="column" gutterSize="s">
+        <EuiFlexItem>
+          <EuiPanel>
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem grow={1} data-cy={`client-metrics`}>
+                <EuiTitle size="xs">
+                  <h3>Page load times</h3>
+                </EuiTitle>
+                <EuiSpacer size="s" />
+                <ClientMetrics />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPanel>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiPanel>
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem grow={3}>
+                <PageLoadDistribution />
+                <PageViewsTrend />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPanel>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
new file mode 100644
index 0000000000000..8f21065b0dab0
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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, EuiSpacer } from '@elastic/eui';
+import React, { useMemo } from 'react';
+import { useTrackPageview } from '../../../../../observability/public';
+import { LocalUIFilters } from '../../shared/LocalUIFilters';
+import { PROJECTION } from '../../../../common/projections/typings';
+import { RumDashboard } from './RumDashboard';
+
+export function RumOverview() {
+  useTrackPageview({ app: 'apm', path: 'rum_overview' });
+  useTrackPageview({ app: 'apm', path: 'rum_overview', delay: 15000 });
+
+  const localUIFiltersConfig = useMemo(() => {
+    const config: React.ComponentProps<typeof LocalUIFilters> = {
+      filterNames: ['transactionUrl', 'location', 'device', 'os', 'browser'],
+      projection: PROJECTION.RUM_OVERVIEW,
+    };
+
+    return config;
+  }, []);
+
+  return (
+    <>
+      <EuiSpacer />
+      <EuiFlexGroup>
+        <EuiFlexItem grow={1}>
+          <LocalUIFilters {...localUIFiltersConfig} showCount={true} />
+        </EuiFlexItem>
+        <EuiFlexItem grow={7}>
+          <RumDashboard />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
new file mode 100644
index 0000000000000..c2aed41a55c7d
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
@@ -0,0 +1,73 @@
+/*
+ * 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';
+
+export const EndUserExperienceLabel = i18n.translate(
+  'xpack.apm.rum.dashboard.title',
+  {
+    defaultMessage: 'End User Experience',
+  }
+);
+
+export const getWhatIsGoingOnLabel = (environmentVal: string) =>
+  i18n.translate('xpack.apm.rum.dashboard.environment.title', {
+    defaultMessage: `What's going on in {environmentVal}?`,
+    values: { environmentVal },
+  });
+
+export const BackEndLabel = i18n.translate('xpack.apm.rum.dashboard.backend', {
+  defaultMessage: 'Backend',
+});
+
+export const FrontEndLabel = i18n.translate(
+  'xpack.apm.rum.dashboard.frontend',
+  {
+    defaultMessage: 'Frontend',
+  }
+);
+
+export const PageViewsLabel = i18n.translate(
+  'xpack.apm.rum.dashboard.pageViews',
+  {
+    defaultMessage: 'Page views',
+  }
+);
+
+export const DateTimeLabel = i18n.translate(
+  'xpack.apm.rum.dashboard.dateTime.label',
+  {
+    defaultMessage: 'Date / Time',
+  }
+);
+
+export const PercPageLoadedLabel = i18n.translate(
+  'xpack.apm.rum.dashboard.pagesLoaded.label',
+  {
+    defaultMessage: 'Pages loaded',
+  }
+);
+
+export const PageLoadTimeLabel = i18n.translate(
+  'xpack.apm.rum.dashboard.pageLoadTime.label',
+  {
+    defaultMessage: 'Page load time (seconds)',
+  }
+);
+
+export const PageLoadDistLabel = i18n.translate(
+  'xpack.apm.rum.dashboard.pageLoadDistribution.label',
+  {
+    defaultMessage: 'Page load distribution',
+  }
+);
+
+export const ResetZoomLabel = i18n.translate(
+  'xpack.apm.rum.dashboard.resetZoom.label',
+  {
+    defaultMessage: 'Reset zoom',
+  }
+);
diff --git a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx
index 2f35e329720de..81bdbdad805d6 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx
@@ -22,6 +22,8 @@ import { ServiceMap } from '../ServiceMap';
 import { ServiceMetrics } from '../ServiceMetrics';
 import { ServiceNodeOverview } from '../ServiceNodeOverview';
 import { TransactionOverview } from '../TransactionOverview';
+import { RumOverviewLink } from '../../shared/Links/apm/RumOverviewLink';
+import { RumOverview } from '../RumDashboard';
 
 interface Props {
   tab: 'transactions' | 'errors' | 'metrics' | 'nodes' | 'service-map';
@@ -110,6 +112,20 @@ export function ServiceDetailTabs({ tab }: Props) {
     tabs.push(serviceMapTab);
   }
 
+  if (isRumAgentName(agentName)) {
+    tabs.push({
+      link: (
+        <RumOverviewLink>
+          {i18n.translate('xpack.apm.home.rumTabLabel', {
+            defaultMessage: 'Real User Monitoring',
+          })}
+        </RumOverviewLink>
+      ),
+      render: () => <RumOverview />,
+      name: 'rum-overview',
+    });
+  }
+
   const selectedTab = tabs.find((serviceTab) => serviceTab.name === tab);
 
   return (
diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx b/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx
index d01deb8160858..eab685a4c1ab4 100644
--- a/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx
@@ -76,10 +76,10 @@ export function KueryBar() {
   });
 
   // The bar should be disabled when viewing the service map
-  const disabled = /\/service-map$/.test(location.pathname);
+  const disabled = /\/(service-map|rum-overview)$/.test(location.pathname);
   const disabledPlaceholder = i18n.translate(
     'xpack.apm.kueryBar.disabledPlaceholder',
-    { defaultMessage: 'Search is not available for service map' }
+    { defaultMessage: 'Search is not available here' }
   );
 
   async function onChange(inputValue: string, selectionStart: number) {
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/RumOverviewLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/RumOverviewLink.tsx
new file mode 100644
index 0000000000000..abca9817bd69d
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/RumOverviewLink.tsx
@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+/*
+ * 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 { APMLink, APMLinkExtendProps } from './APMLink';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { pickKeys } from '../../../../../common/utils/pick_keys';
+
+const RumOverviewLink = (props: APMLinkExtendProps) => {
+  const { urlParams } = useUrlParams();
+
+  const persistedFilters = pickKeys(
+    urlParams,
+    'transactionResult',
+    'host',
+    'containerId',
+    'podName'
+  );
+
+  return <APMLink path="/rum-overview" query={persistedFilters} {...props} />;
+};
+
+export { RumOverviewLink };
diff --git a/x-pack/plugins/apm/server/lib/errors/distribution/get_buckets.ts b/x-pack/plugins/apm/server/lib/errors/distribution/get_buckets.ts
index 7d96c490fcd70..db36ad1ede91c 100644
--- a/x-pack/plugins/apm/server/lib/errors/distribution/get_buckets.ts
+++ b/x-pack/plugins/apm/server/lib/errors/distribution/get_buckets.ts
@@ -10,7 +10,7 @@ import {
   PROCESSOR_EVENT,
   SERVICE_NAME,
 } from '../../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../../helpers/range_filter';
+import { rangeFilter } from '../../../../common/utils/range_filter';
 import {
   Setup,
   SetupTimeRange,
diff --git a/x-pack/plugins/apm/server/lib/errors/get_error_group.ts b/x-pack/plugins/apm/server/lib/errors/get_error_group.ts
index b157abd0b7e76..3d20f84ccfbc2 100644
--- a/x-pack/plugins/apm/server/lib/errors/get_error_group.ts
+++ b/x-pack/plugins/apm/server/lib/errors/get_error_group.ts
@@ -12,7 +12,7 @@ import {
 } from '../../../common/elasticsearch_fieldnames';
 import { PromiseReturnType } from '../../../typings/common';
 import { APMError } from '../../../typings/es_schemas/ui/apm_error';
-import { rangeFilter } from '../helpers/range_filter';
+import { rangeFilter } from '../../../common/utils/range_filter';
 import {
   Setup,
   SetupTimeRange,
diff --git a/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap b/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap
new file mode 100644
index 0000000000000..7d8f31aaeca7f
--- /dev/null
+++ b/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap
@@ -0,0 +1,194 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rum client dashboard queries fetches client metrics 1`] = `
+Object {
+  "body": Object {
+    "aggs": Object {
+      "backEnd": Object {
+        "avg": Object {
+          "field": "transaction.marks.agent.timeToFirstByte",
+          "missing": 0,
+        },
+      },
+      "domInteractive": Object {
+        "avg": Object {
+          "field": "transaction.marks.agent.domInteractive",
+          "missing": 0,
+        },
+      },
+      "pageViews": Object {
+        "value_count": Object {
+          "field": "transaction.type",
+        },
+      },
+    },
+    "query": Object {
+      "bool": Object {
+        "filter": Array [
+          Object {
+            "range": Object {
+              "@timestamp": Object {
+                "format": "epoch_millis",
+                "gte": 1528113600000,
+                "lte": 1528977600000,
+              },
+            },
+          },
+          Object {
+            "term": Object {
+              "processor.event": "transaction",
+            },
+          },
+          Object {
+            "term": Object {
+              "transaction.type": "page-load",
+            },
+          },
+          Object {
+            "exists": Object {
+              "field": "transaction.marks.navigationTiming.fetchStart",
+            },
+          },
+          Object {
+            "term": Object {
+              "my.custom.ui.filter": "foo-bar",
+            },
+          },
+        ],
+      },
+    },
+    "size": 0,
+  },
+  "index": "myIndex",
+}
+`;
+
+exports[`rum client dashboard queries fetches page load distribution 1`] = `
+Object {
+  "body": Object {
+    "aggs": Object {
+      "durationMinMax": Object {
+        "min": Object {
+          "field": "transaction.duration.us",
+          "missing": 0,
+        },
+      },
+      "durationPercentiles": Object {
+        "percentiles": Object {
+          "field": "transaction.duration.us",
+          "percents": Array [
+            50,
+            75,
+            90,
+            95,
+            99,
+          ],
+          "script": Object {
+            "lang": "painless",
+            "params": Object {
+              "timeUnit": 1000,
+            },
+            "source": "doc['transaction.duration.us'].value / params.timeUnit",
+          },
+        },
+      },
+    },
+    "query": Object {
+      "bool": Object {
+        "filter": Array [
+          Object {
+            "range": Object {
+              "@timestamp": Object {
+                "format": "epoch_millis",
+                "gte": 1528113600000,
+                "lte": 1528977600000,
+              },
+            },
+          },
+          Object {
+            "term": Object {
+              "processor.event": "transaction",
+            },
+          },
+          Object {
+            "term": Object {
+              "transaction.type": "page-load",
+            },
+          },
+          Object {
+            "exists": Object {
+              "field": "transaction.marks.navigationTiming.fetchStart",
+            },
+          },
+          Object {
+            "term": Object {
+              "my.custom.ui.filter": "foo-bar",
+            },
+          },
+        ],
+      },
+    },
+    "size": 0,
+  },
+  "index": "myIndex",
+}
+`;
+
+exports[`rum client dashboard queries fetches page view trends 1`] = `
+Object {
+  "body": Object {
+    "aggs": Object {
+      "pageViews": Object {
+        "aggs": Object {
+          "trans_count": Object {
+            "value_count": Object {
+              "field": "transaction.type",
+            },
+          },
+        },
+        "auto_date_histogram": Object {
+          "buckets": 50,
+          "field": "@timestamp",
+        },
+      },
+    },
+    "query": Object {
+      "bool": Object {
+        "filter": Array [
+          Object {
+            "range": Object {
+              "@timestamp": Object {
+                "format": "epoch_millis",
+                "gte": 1528113600000,
+                "lte": 1528977600000,
+              },
+            },
+          },
+          Object {
+            "term": Object {
+              "processor.event": "transaction",
+            },
+          },
+          Object {
+            "term": Object {
+              "transaction.type": "page-load",
+            },
+          },
+          Object {
+            "exists": Object {
+              "field": "transaction.marks.navigationTiming.fetchStart",
+            },
+          },
+          Object {
+            "term": Object {
+              "my.custom.ui.filter": "foo-bar",
+            },
+          },
+        ],
+      },
+    },
+    "size": 0,
+  },
+  "index": "myIndex",
+}
+`;
diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts b/x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts
new file mode 100644
index 0000000000000..8b3f733fc402a
--- /dev/null
+++ b/x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts
@@ -0,0 +1,61 @@
+/*
+ * 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 { getRumOverviewProjection } from '../../../common/projections/rum_overview';
+import { mergeProjection } from '../../../common/projections/util/merge_projection';
+import {
+  Setup,
+  SetupTimeRange,
+  SetupUIFilters,
+} from '../helpers/setup_request';
+
+export async function getClientMetrics({
+  setup,
+}: {
+  setup: Setup & SetupTimeRange & SetupUIFilters;
+}) {
+  const projection = getRumOverviewProjection({
+    setup,
+  });
+
+  const params = mergeProjection(projection, {
+    body: {
+      size: 0,
+      query: {
+        bool: projection.body.query.bool,
+      },
+      aggs: {
+        pageViews: { value_count: { field: 'transaction.type' } },
+        backEnd: {
+          avg: {
+            field: 'transaction.marks.agent.timeToFirstByte',
+            missing: 0,
+          },
+        },
+        domInteractive: {
+          avg: {
+            field: 'transaction.marks.agent.domInteractive',
+            missing: 0,
+          },
+        },
+      },
+    },
+  });
+
+  const { client } = setup;
+
+  const response = await client.search(params);
+  const { backEnd, domInteractive, pageViews } = response.aggregations!;
+
+  // Divide by 1000 to convert ms into seconds
+  return {
+    pageViews,
+    backEnd: { value: (backEnd.value || 0) / 1000 },
+    frontEnd: {
+      value: ((domInteractive.value || 0) - (backEnd.value || 0)) / 1000,
+    },
+  };
+}
diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts b/x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts
new file mode 100644
index 0000000000000..3c563946e4052
--- /dev/null
+++ b/x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts
@@ -0,0 +1,140 @@
+/*
+ * 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 { getRumOverviewProjection } from '../../../common/projections/rum_overview';
+import { mergeProjection } from '../../../common/projections/util/merge_projection';
+import {
+  Setup,
+  SetupTimeRange,
+  SetupUIFilters,
+} from '../helpers/setup_request';
+
+export async function getPageLoadDistribution({
+  setup,
+  minPercentile,
+  maxPercentile,
+}: {
+  setup: Setup & SetupTimeRange & SetupUIFilters;
+  minPercentile?: string;
+  maxPercentile?: string;
+}) {
+  const projection = getRumOverviewProjection({
+    setup,
+  });
+
+  const params = mergeProjection(projection, {
+    body: {
+      size: 0,
+      query: {
+        bool: projection.body.query.bool,
+      },
+      aggs: {
+        durationMinMax: {
+          min: {
+            field: 'transaction.duration.us',
+            missing: 0,
+          },
+        },
+        durationPercentiles: {
+          percentiles: {
+            field: 'transaction.duration.us',
+            percents: [50, 75, 90, 95, 99],
+            script: {
+              lang: 'painless',
+              source: "doc['transaction.duration.us'].value / params.timeUnit",
+              params: {
+                timeUnit: 1000,
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+
+  const { client } = setup;
+
+  const {
+    aggregations,
+    hits: { total },
+  } = await client.search(params);
+
+  if (total.value === 0) {
+    return null;
+  }
+
+  const minDuration = (aggregations?.durationMinMax.value ?? 0) / 1000;
+
+  const minPerc = minPercentile ? +minPercentile : minDuration;
+
+  const maxPercentileQuery =
+    aggregations?.durationPercentiles.values['99.0'] ?? 100;
+
+  const maxPerc = maxPercentile ? +maxPercentile : maxPercentileQuery;
+
+  const pageDist = await getPercentilesDistribution(setup, minPerc, maxPerc);
+  return {
+    pageLoadDistribution: pageDist,
+    percentiles: aggregations?.durationPercentiles.values,
+  };
+}
+
+const getPercentilesDistribution = async (
+  setup: Setup & SetupTimeRange & SetupUIFilters,
+  minPercentiles: number,
+  maxPercentile: number
+) => {
+  const stepValue = (maxPercentile - minPercentiles) / 50;
+  const stepValues = [];
+  for (let i = 1; i < 50; i++) {
+    stepValues.push((stepValue * i + minPercentiles).toFixed(2));
+  }
+
+  const projection = getRumOverviewProjection({
+    setup,
+  });
+
+  const params = mergeProjection(projection, {
+    body: {
+      size: 0,
+      query: {
+        bool: projection.body.query.bool,
+      },
+      aggs: {
+        loadDistribution: {
+          percentile_ranks: {
+            field: 'transaction.duration.us',
+            values: stepValues,
+            keyed: false,
+            script: {
+              lang: 'painless',
+              source: "doc['transaction.duration.us'].value / params.timeUnit",
+              params: {
+                timeUnit: 1000,
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+
+  const { client } = setup;
+
+  const { aggregations } = await client.search(params);
+
+  const pageDist = (aggregations?.loadDistribution.values ?? []) as Array<{
+    key: number;
+    value: number;
+  }>;
+
+  return pageDist.map(({ key, value }, index: number, arr) => {
+    return {
+      x: key,
+      y: index === 0 ? value : value - arr[index - 1].value,
+    };
+  });
+};
diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_page_view_trends.ts b/x-pack/plugins/apm/server/lib/rum_client/get_page_view_trends.ts
new file mode 100644
index 0000000000000..126605206d299
--- /dev/null
+++ b/x-pack/plugins/apm/server/lib/rum_client/get_page_view_trends.ts
@@ -0,0 +1,57 @@
+/*
+ * 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 { getRumOverviewProjection } from '../../../common/projections/rum_overview';
+import { mergeProjection } from '../../../common/projections/util/merge_projection';
+import {
+  Setup,
+  SetupTimeRange,
+  SetupUIFilters,
+} from '../helpers/setup_request';
+
+export async function getPageViewTrends({
+  setup,
+}: {
+  setup: Setup & SetupTimeRange & SetupUIFilters;
+}) {
+  const projection = getRumOverviewProjection({
+    setup,
+  });
+
+  const params = mergeProjection(projection, {
+    body: {
+      size: 0,
+      query: {
+        bool: projection.body.query.bool,
+      },
+      aggs: {
+        pageViews: {
+          auto_date_histogram: {
+            field: '@timestamp',
+            buckets: 50,
+          },
+          aggs: {
+            trans_count: {
+              value_count: {
+                field: 'transaction.type',
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+
+  const { client } = setup;
+
+  const response = await client.search(params);
+
+  const result = response.aggregations?.pageViews.buckets ?? [];
+  return result.map(({ key, trans_count }) => ({
+    x: key,
+    y: trans_count.value,
+  }));
+}
diff --git a/x-pack/plugins/apm/server/lib/rum_client/queries.test.ts b/x-pack/plugins/apm/server/lib/rum_client/queries.test.ts
new file mode 100644
index 0000000000000..5f5a48eced746
--- /dev/null
+++ b/x-pack/plugins/apm/server/lib/rum_client/queries.test.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 {
+  SearchParamsMock,
+  inspectSearchParams,
+} from '../../../public/utils/testHelpers';
+import { getClientMetrics } from './get_client_metrics';
+import { getPageViewTrends } from './get_page_view_trends';
+import { getPageLoadDistribution } from './get_page_load_distribution';
+
+describe('rum client dashboard queries', () => {
+  let mock: SearchParamsMock;
+
+  afterEach(() => {
+    mock.teardown();
+  });
+
+  it('fetches client metrics', async () => {
+    mock = await inspectSearchParams((setup) =>
+      getClientMetrics({
+        setup,
+      })
+    );
+
+    expect(mock.params).toMatchSnapshot();
+  });
+
+  it('fetches page view trends', async () => {
+    mock = await inspectSearchParams((setup) =>
+      getPageViewTrends({
+        setup,
+      })
+    );
+
+    expect(mock.params).toMatchSnapshot();
+  });
+
+  it('fetches page load distribution', async () => {
+    mock = await inspectSearchParams((setup) =>
+      getPageLoadDistribution({
+        setup,
+        minPercentile: '0',
+        maxPercentile: '99',
+      })
+    );
+    expect(mock.params).toMatchSnapshot();
+  });
+});
diff --git a/x-pack/plugins/apm/server/lib/service_map/get_service_map_service_node_info.ts b/x-pack/plugins/apm/server/lib/service_map/get_service_map_service_node_info.ts
index d069e93397611..e521efa687388 100644
--- a/x-pack/plugins/apm/server/lib/service_map/get_service_map_service_node_info.ts
+++ b/x-pack/plugins/apm/server/lib/service_map/get_service_map_service_node_info.ts
@@ -6,7 +6,7 @@
 
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
 import { ESFilter } from '../../../typings/elasticsearch';
-import { rangeFilter } from '../helpers/range_filter';
+import { rangeFilter } from '../../../common/utils/range_filter';
 import {
   PROCESSOR_EVENT,
   SERVICE_ENVIRONMENT,
diff --git a/x-pack/plugins/apm/server/lib/service_map/get_trace_sample_ids.ts b/x-pack/plugins/apm/server/lib/service_map/get_trace_sample_ids.ts
index 6eba84f2205a1..11c3a00f32980 100644
--- a/x-pack/plugins/apm/server/lib/service_map/get_trace_sample_ids.ts
+++ b/x-pack/plugins/apm/server/lib/service_map/get_trace_sample_ids.ts
@@ -5,7 +5,7 @@
  */
 import { uniq, take, sortBy } from 'lodash';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
-import { rangeFilter } from '../helpers/range_filter';
+import { rangeFilter } from '../../../common/utils/range_filter';
 import { ESFilter } from '../../../typings/elasticsearch';
 import {
   PROCESSOR_EVENT,
diff --git a/x-pack/plugins/apm/server/lib/services/annotations/get_derived_service_annotations.ts b/x-pack/plugins/apm/server/lib/services/annotations/get_derived_service_annotations.ts
index 9829c5cb25182..6da5d195cf194 100644
--- a/x-pack/plugins/apm/server/lib/services/annotations/get_derived_service_annotations.ts
+++ b/x-pack/plugins/apm/server/lib/services/annotations/get_derived_service_annotations.ts
@@ -7,7 +7,7 @@ import { isNumber } from 'lodash';
 import { Annotation, AnnotationType } from '../../../../common/annotations';
 import { SetupTimeRange, Setup } from '../../helpers/setup_request';
 import { ESFilter } from '../../../../typings/elasticsearch';
-import { rangeFilter } from '../../helpers/range_filter';
+import { rangeFilter } from '../../../../common/utils/range_filter';
 import {
   PROCESSOR_EVENT,
   SERVICE_NAME,
diff --git a/x-pack/plugins/apm/server/lib/services/get_service_agent_name.ts b/x-pack/plugins/apm/server/lib/services/get_service_agent_name.ts
index 0b016828d5f00..8d75d746c7fca 100644
--- a/x-pack/plugins/apm/server/lib/services/get_service_agent_name.ts
+++ b/x-pack/plugins/apm/server/lib/services/get_service_agent_name.ts
@@ -8,7 +8,7 @@ import {
   AGENT_NAME,
   SERVICE_NAME,
 } from '../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../helpers/range_filter';
+import { rangeFilter } from '../../../common/utils/range_filter';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
 
 export async function getServiceAgentName(
diff --git a/x-pack/plugins/apm/server/lib/services/get_service_transaction_types.ts b/x-pack/plugins/apm/server/lib/services/get_service_transaction_types.ts
index 963dea4d8322c..d88be4055dc21 100644
--- a/x-pack/plugins/apm/server/lib/services/get_service_transaction_types.ts
+++ b/x-pack/plugins/apm/server/lib/services/get_service_transaction_types.ts
@@ -8,7 +8,7 @@ import {
   SERVICE_NAME,
   TRANSACTION_TYPE,
 } from '../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../helpers/range_filter';
+import { rangeFilter } from '../../../common/utils/range_filter';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
 
 export async function getServiceTransactionTypes(
diff --git a/x-pack/plugins/apm/server/lib/traces/get_trace_items.ts b/x-pack/plugins/apm/server/lib/traces/get_trace_items.ts
index e96b323958fd7..f9374558dfeeb 100644
--- a/x-pack/plugins/apm/server/lib/traces/get_trace_items.ts
+++ b/x-pack/plugins/apm/server/lib/traces/get_trace_items.ts
@@ -16,7 +16,7 @@ import {
 import { Span } from '../../../typings/es_schemas/ui/span';
 import { Transaction } from '../../../typings/es_schemas/ui/transaction';
 import { APMError } from '../../../typings/es_schemas/ui/apm_error';
-import { rangeFilter } from '../helpers/range_filter';
+import { rangeFilter } from '../../../common/utils/range_filter';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
 import { PromiseValueType } from '../../../typings/common';
 
diff --git a/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_browser/fetcher.ts b/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_browser/fetcher.ts
index 90dd41cb9b0c8..e3d688b694380 100644
--- a/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_browser/fetcher.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_browser/fetcher.ts
@@ -13,7 +13,7 @@ import {
   USER_AGENT_NAME,
   TRANSACTION_DURATION,
 } from '../../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../../helpers/range_filter';
+import { rangeFilter } from '../../../../common/utils/range_filter';
 import { getBucketSize } from '../../helpers/get_bucket_size';
 import { Options } from '.';
 import { TRANSACTION_PAGE_LOAD } from '../../../../common/transaction_types';
diff --git a/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_country/index.ts b/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_country/index.ts
index cc23055e34672..ea6213f64ee36 100644
--- a/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_country/index.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_country/index.ts
@@ -17,7 +17,7 @@ import {
   SetupTimeRange,
   SetupUIFilters,
 } from '../../helpers/setup_request';
-import { rangeFilter } from '../../helpers/range_filter';
+import { rangeFilter } from '../../../../common/utils/range_filter';
 import { TRANSACTION_PAGE_LOAD } from '../../../../common/transaction_types';
 
 export async function getTransactionAvgDurationByCountry({
diff --git a/x-pack/plugins/apm/server/lib/transactions/breakdown/index.ts b/x-pack/plugins/apm/server/lib/transactions/breakdown/index.ts
index 713423f8953d5..5af8b9f78cec1 100644
--- a/x-pack/plugins/apm/server/lib/transactions/breakdown/index.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/breakdown/index.ts
@@ -20,7 +20,7 @@ import {
   SetupTimeRange,
   SetupUIFilters,
 } from '../../helpers/setup_request';
-import { rangeFilter } from '../../helpers/range_filter';
+import { rangeFilter } from '../../../../common/utils/range_filter';
 import { getMetricsDateHistogramParams } from '../../helpers/metrics';
 import { MAX_KPIS } from './constants';
 import { getVizColorForIndex } from '../../../../common/viz_colors';
diff --git a/x-pack/plugins/apm/server/lib/transactions/charts/get_timeseries_data/fetcher.ts b/x-pack/plugins/apm/server/lib/transactions/charts/get_timeseries_data/fetcher.ts
index 71c40010a2a3f..8e19af926ce02 100644
--- a/x-pack/plugins/apm/server/lib/transactions/charts/get_timeseries_data/fetcher.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/charts/get_timeseries_data/fetcher.ts
@@ -15,7 +15,7 @@ import {
 } from '../../../../../common/elasticsearch_fieldnames';
 import { PromiseReturnType } from '../../../../../../observability/typings/common';
 import { getBucketSize } from '../../../helpers/get_bucket_size';
-import { rangeFilter } from '../../../helpers/range_filter';
+import { rangeFilter } from '../../../../../common/utils/range_filter';
 import {
   Setup,
   SetupTimeRange,
diff --git a/x-pack/plugins/apm/server/lib/transactions/distribution/get_buckets/fetcher.ts b/x-pack/plugins/apm/server/lib/transactions/distribution/get_buckets/fetcher.ts
index 920552d1c1aeb..3f8bf635712be 100644
--- a/x-pack/plugins/apm/server/lib/transactions/distribution/get_buckets/fetcher.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/distribution/get_buckets/fetcher.ts
@@ -15,7 +15,7 @@ import {
   TRANSACTION_SAMPLED,
   TRANSACTION_TYPE,
 } from '../../../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../../../helpers/range_filter';
+import { rangeFilter } from '../../../../../common/utils/range_filter';
 import {
   Setup,
   SetupTimeRange,
diff --git a/x-pack/plugins/apm/server/lib/transactions/get_transaction/index.ts b/x-pack/plugins/apm/server/lib/transactions/get_transaction/index.ts
index 60dc16b6a546c..a7de93a3bf650 100644
--- a/x-pack/plugins/apm/server/lib/transactions/get_transaction/index.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/get_transaction/index.ts
@@ -10,7 +10,7 @@ import {
   TRANSACTION_ID,
 } from '../../../../common/elasticsearch_fieldnames';
 import { Transaction } from '../../../../typings/es_schemas/ui/transaction';
-import { rangeFilter } from '../../helpers/range_filter';
+import { rangeFilter } from '../../../../common/utils/range_filter';
 import {
   Setup,
   SetupTimeRange,
diff --git a/x-pack/plugins/apm/server/lib/ui_filters/get_environments.ts b/x-pack/plugins/apm/server/lib/ui_filters/get_environments.ts
index ccbe7a19d2f82..3fca30634be6a 100644
--- a/x-pack/plugins/apm/server/lib/ui_filters/get_environments.ts
+++ b/x-pack/plugins/apm/server/lib/ui_filters/get_environments.ts
@@ -9,7 +9,7 @@ import {
   SERVICE_ENVIRONMENT,
   SERVICE_NAME,
 } from '../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../helpers/range_filter';
+import { rangeFilter } from '../../../common/utils/range_filter';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
 import { ENVIRONMENT_NOT_DEFINED } from '../../../common/environment_filter_values';
 import { ESFilter } from '../../../typings/elasticsearch';
diff --git a/x-pack/plugins/apm/server/lib/ui_filters/local_ui_filters/config.ts b/x-pack/plugins/apm/server/lib/ui_filters/local_ui_filters/config.ts
index 8f35664c2599c..25a559cb07a3d 100644
--- a/x-pack/plugins/apm/server/lib/ui_filters/local_ui_filters/config.ts
+++ b/x-pack/plugins/apm/server/lib/ui_filters/local_ui_filters/config.ts
@@ -11,6 +11,11 @@ import {
   HOST_NAME,
   TRANSACTION_RESULT,
   SERVICE_VERSION,
+  TRANSACTION_URL,
+  USER_AGENT_NAME,
+  USER_AGENT_DEVICE,
+  CLIENT_GEO,
+  USER_AGENT_OS,
 } from '../../../../common/elasticsearch_fieldnames';
 
 const filtersByName = {
@@ -50,6 +55,36 @@ const filtersByName = {
     }),
     fieldName: SERVICE_VERSION,
   },
+  transactionUrl: {
+    title: i18n.translate('xpack.apm.localFilters.titles.transactionUrl', {
+      defaultMessage: 'Url',
+    }),
+    fieldName: TRANSACTION_URL,
+  },
+  browser: {
+    title: i18n.translate('xpack.apm.localFilters.titles.browser', {
+      defaultMessage: 'Browser',
+    }),
+    fieldName: USER_AGENT_NAME,
+  },
+  device: {
+    title: i18n.translate('xpack.apm.localFilters.titles.device', {
+      defaultMessage: 'Device',
+    }),
+    fieldName: USER_AGENT_DEVICE,
+  },
+  location: {
+    title: i18n.translate('xpack.apm.localFilters.titles.location', {
+      defaultMessage: 'Location',
+    }),
+    fieldName: CLIENT_GEO,
+  },
+  os: {
+    title: i18n.translate('xpack.apm.localFilters.titles.os', {
+      defaultMessage: 'OS',
+    }),
+    fieldName: USER_AGENT_OS,
+  },
 };
 
 export type LocalUIFilterName = keyof typeof filtersByName;
diff --git a/x-pack/plugins/apm/server/routes/create_apm_api.ts b/x-pack/plugins/apm/server/routes/create_apm_api.ts
index bdfb49fa30828..a34690aff43b4 100644
--- a/x-pack/plugins/apm/server/routes/create_apm_api.ts
+++ b/x-pack/plugins/apm/server/routes/create_apm_api.ts
@@ -59,6 +59,7 @@ import {
   transactionsLocalFiltersRoute,
   serviceNodesLocalFiltersRoute,
   uiFiltersEnvironmentsRoute,
+  rumOverviewLocalFiltersRoute,
 } from './ui_filters';
 import { createApi } from './create_api';
 import { serviceMapRoute, serviceMapServiceNodeRoute } from './service_map';
@@ -70,6 +71,11 @@ import {
   listCustomLinksRoute,
   customLinkTransactionRoute,
 } from './settings/custom_link';
+import {
+  rumClientMetricsRoute,
+  rumPageViewsTrendRoute,
+  rumPageLoadDistributionRoute,
+} from './rum_client';
 
 const createApmApi = () => {
   const api = createApi()
@@ -148,7 +154,13 @@ const createApmApi = () => {
     .add(updateCustomLinkRoute)
     .add(deleteCustomLinkRoute)
     .add(listCustomLinksRoute)
-    .add(customLinkTransactionRoute);
+    .add(customLinkTransactionRoute)
+
+    // Rum Overview
+    .add(rumOverviewLocalFiltersRoute)
+    .add(rumPageViewsTrendRoute)
+    .add(rumPageLoadDistributionRoute)
+    .add(rumClientMetricsRoute);
 
   return api;
 };
diff --git a/x-pack/plugins/apm/server/routes/rum_client.ts b/x-pack/plugins/apm/server/routes/rum_client.ts
new file mode 100644
index 0000000000000..9b5f6529b1783
--- /dev/null
+++ b/x-pack/plugins/apm/server/routes/rum_client.ts
@@ -0,0 +1,57 @@
+/*
+ * 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 * as t from 'io-ts';
+import { createRoute } from './create_route';
+import { setupRequest } from '../lib/helpers/setup_request';
+import { getClientMetrics } from '../lib/rum_client/get_client_metrics';
+import { rangeRt, uiFiltersRt } from './default_api_types';
+import { getPageViewTrends } from '../lib/rum_client/get_page_view_trends';
+import { getPageLoadDistribution } from '../lib/rum_client/get_page_load_distribution';
+
+export const percentileRangeRt = t.partial({
+  minPercentile: t.string,
+  maxPercentile: t.string,
+});
+
+export const rumClientMetricsRoute = createRoute(() => ({
+  path: '/api/apm/rum/client-metrics',
+  params: {
+    query: t.intersection([uiFiltersRt, rangeRt]),
+  },
+  handler: async ({ context, request }) => {
+    const setup = await setupRequest(context, request);
+
+    return getClientMetrics({ setup });
+  },
+}));
+
+export const rumPageLoadDistributionRoute = createRoute(() => ({
+  path: '/api/apm/rum-client/page-load-distribution',
+  params: {
+    query: t.intersection([uiFiltersRt, rangeRt, percentileRangeRt]),
+  },
+  handler: async ({ context, request }) => {
+    const setup = await setupRequest(context, request);
+
+    const {
+      query: { minPercentile, maxPercentile },
+    } = context.params;
+
+    return getPageLoadDistribution({ setup, minPercentile, maxPercentile });
+  },
+}));
+
+export const rumPageViewsTrendRoute = createRoute(() => ({
+  path: '/api/apm/rum-client/page-view-trends',
+  params: {
+    query: t.intersection([uiFiltersRt, rangeRt]),
+  },
+  handler: async ({ context, request }) => {
+    const setup = await setupRequest(context, request);
+    return getPageViewTrends({ setup });
+  },
+}));
diff --git a/x-pack/plugins/apm/server/routes/ui_filters.ts b/x-pack/plugins/apm/server/routes/ui_filters.ts
index 8f4ef94b86ac5..280645d4de8d0 100644
--- a/x-pack/plugins/apm/server/routes/ui_filters.ts
+++ b/x-pack/plugins/apm/server/routes/ui_filters.ts
@@ -29,6 +29,7 @@ import { createRoute } from './create_route';
 import { uiFiltersRt, rangeRt } from './default_api_types';
 import { jsonRt } from '../../common/runtime_types/json_rt';
 import { getServiceNodesProjection } from '../../common/projections/service_nodes';
+import { getRumOverviewProjection } from '../../common/projections/rum_overview';
 
 export const uiFiltersEnvironmentsRoute = createRoute(() => ({
   path: '/api/apm/ui_filters/environments',
@@ -221,6 +222,16 @@ export const serviceNodesLocalFiltersRoute = createLocalFiltersRoute({
   }),
 });
 
+export const rumOverviewLocalFiltersRoute = createLocalFiltersRoute({
+  path: '/api/apm/ui_filters/local_filters/rumOverview',
+  getProjection: ({ setup }) => {
+    return getRumOverviewProjection({
+      setup,
+    });
+  },
+  queryRt: t.type({}),
+});
+
 type BaseQueryType = typeof localUiBaseQueryRt;
 
 type GetProjection<
diff --git a/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts b/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts
index 0739e8e6120bf..6ee26caa4ef7c 100644
--- a/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts
+++ b/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts
@@ -137,6 +137,15 @@ export interface AggregationOptionsByType {
     >;
     keyed?: boolean;
   };
+  auto_date_histogram: {
+    field: string;
+    buckets: number;
+  };
+  percentile_ranks: {
+    field: string;
+    values: string[];
+    keyed?: boolean;
+  };
 }
 
 type AggregationType = keyof AggregationOptionsByType;
@@ -301,6 +310,23 @@ interface AggregationResponsePart<
       ? Record<string, DateRangeBucket>
       : { buckets: DateRangeBucket[] };
   };
+  auto_date_histogram: {
+    buckets: Array<
+      {
+        doc_count: number;
+        key: number;
+        key_as_string: string;
+      } & BucketSubAggregationResponse<
+        TAggregationOptionsMap['aggs'],
+        TDocument
+      >
+    >;
+    interval: string;
+  };
+
+  percentile_ranks: {
+    values: Record<string, number> | Array<{ key: number; value: number }>;
+  };
 }
 
 // Type for debugging purposes. If you see an error in AggregationResponseMap
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 37cdbf5c0d8a9..d119ddb5a1a1f 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -4229,7 +4229,6 @@
     "xpack.apm.jvmsTable.noJvmsLabel": "JVM が見つかりませんでした",
     "xpack.apm.jvmsTable.nonHeapMemoryColumnLabel": "非ヒープ領域の平均",
     "xpack.apm.jvmsTable.threadCountColumnLabel": "最大スレッド数",
-    "xpack.apm.kueryBar.disabledPlaceholder": "サービスマップの検索は利用できません",
     "xpack.apm.kueryBar.placeholder": "検索 {event, select,\n            transaction {トランザクション}\n            metric {メトリック}\n            error {エラー}\n             other {その他}\n          } (E.g. {queryExample})",
     "xpack.apm.license.betaBadge": "ベータ",
     "xpack.apm.license.betaTooltipMessage": "現在、この機能はベータです。不具合を見つけた場合やご意見がある場合、サポートに問い合わせるか、またはディスカッションフォーラムにご報告ください。",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 2dfa0d40b9a8a..240baa3fe7744 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -4232,7 +4232,6 @@
     "xpack.apm.jvmsTable.noJvmsLabel": "未找到任何 JVM",
     "xpack.apm.jvmsTable.nonHeapMemoryColumnLabel": "非堆内存平均值",
     "xpack.apm.jvmsTable.threadCountColumnLabel": "线程计数最大值",
-    "xpack.apm.kueryBar.disabledPlaceholder": "搜索不适用于服务地图",
     "xpack.apm.kueryBar.placeholder": "搜索{event, select,\n            transaction {事务}\n            metric {指标}\n            error {错误}\n            other {事务、错误和指标}\n          }（例如 {queryExample}）",
     "xpack.apm.license.betaBadge": "公测版",
     "xpack.apm.license.betaTooltipMessage": "此功能当前为公测版。如果遇到任何错误或有任何反馈，请报告问题或访问我们的论坛。",

From 90f61abd3f067e4e5fc74f4d30b407f462a82821 Mon Sep 17 00:00:00 2001
From: Daniil Suleiman <31325372+sulemanof@users.noreply.github.com>
Date: Thu, 18 Jun 2020 18:27:46 +0300
Subject: [PATCH 23/63] Fix home page loading if telemetry plugin disabled
 (#69394)

* Fix home page loading

* Fix jest test, update telemetry mocks
---
 .../__snapshots__/welcome.test.tsx.snap       |  3 --
 .../application/components/welcome.test.tsx   | 35 +++++--------------
 .../public/application/components/welcome.tsx |  7 ++--
 src/plugins/telemetry/public/mocks.ts         | 23 +++++++++---
 src/plugins/telemetry/public/plugin.ts        |  7 ++++
 5 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap b/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap
index 1c67f332a12ab..bdf1f075967cb 100644
--- a/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap
+++ b/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap
@@ -125,7 +125,6 @@ exports[`should render a Welcome screen with the telemetry disclaimer 1`] = `
               values={Object {}}
             />
             <EuiLink
-              href="https://www.elastic.co/legal/privacy-statement"
               rel="noopener"
               target="_blank"
             >
@@ -224,7 +223,6 @@ exports[`should render a Welcome screen with the telemetry disclaimer when optIn
               values={Object {}}
             />
             <EuiLink
-              href="https://www.elastic.co/legal/privacy-statement"
               rel="noopener"
               target="_blank"
             >
@@ -323,7 +321,6 @@ exports[`should render a Welcome screen with the telemetry disclaimer when optIn
               values={Object {}}
             />
             <EuiLink
-              href="https://www.elastic.co/legal/privacy-statement"
               rel="noopener"
               target="_blank"
             >
diff --git a/src/plugins/home/public/application/components/welcome.test.tsx b/src/plugins/home/public/application/components/welcome.test.tsx
index 1332e03ffdc81..701fab3af7539 100644
--- a/src/plugins/home/public/application/components/welcome.test.tsx
+++ b/src/plugins/home/public/application/components/welcome.test.tsx
@@ -30,56 +30,39 @@ jest.mock('../kibana_services', () => ({
 }));
 
 test('should render a Welcome screen with the telemetry disclaimer', () => {
-  const telemetry = telemetryPluginMock.createSetupContract();
-  const component = shallow(
-    // @ts-ignore
-    <Welcome urlBasePath="/" onSkip={() => {}} telemetry={telemetry} />
-  );
+  const telemetry = telemetryPluginMock.createStartContract();
+  const component = shallow(<Welcome urlBasePath="/" onSkip={() => {}} telemetry={telemetry} />);
 
   expect(component).toMatchSnapshot();
 });
 
 test('should render a Welcome screen with the telemetry disclaimer when optIn is true', () => {
-  const telemetry = telemetryPluginMock.createSetupContract();
+  const telemetry = telemetryPluginMock.createStartContract();
   telemetry.telemetryService.getIsOptedIn = jest.fn().mockReturnValue(true);
-  const component = shallow(
-    // @ts-ignore
-    <Welcome urlBasePath="/" onSkip={() => {}} telemetry={telemetry} />
-  );
+  const component = shallow(<Welcome urlBasePath="/" onSkip={() => {}} telemetry={telemetry} />);
 
   expect(component).toMatchSnapshot();
 });
 
 test('should render a Welcome screen with the telemetry disclaimer when optIn is false', () => {
-  const telemetry = telemetryPluginMock.createSetupContract();
+  const telemetry = telemetryPluginMock.createStartContract();
   telemetry.telemetryService.getIsOptedIn = jest.fn().mockReturnValue(false);
-  const component = shallow(
-    // @ts-ignore
-    <Welcome urlBasePath="/" onSkip={() => {}} telemetry={telemetry} />
-  );
+  const component = shallow(<Welcome urlBasePath="/" onSkip={() => {}} telemetry={telemetry} />);
 
   expect(component).toMatchSnapshot();
 });
 
 test('should render a Welcome screen with no telemetry disclaimer', () => {
-  // @ts-ignore
-  const component = shallow(
-    // @ts-ignore
-    <Welcome urlBasePath="/" onSkip={() => {}} telemetry={null} />
-  );
+  const component = shallow(<Welcome urlBasePath="/" onSkip={() => {}} />);
 
   expect(component).toMatchSnapshot();
 });
 
 test('fires opt-in seen when mounted', () => {
-  const telemetry = telemetryPluginMock.createSetupContract();
+  const telemetry = telemetryPluginMock.createStartContract();
   const mockSetOptedInNoticeSeen = jest.fn();
-  // @ts-ignore
   telemetry.telemetryNotifications.setOptedInNoticeSeen = mockSetOptedInNoticeSeen;
-  shallow(
-    // @ts-ignore
-    <Welcome urlBasePath="/" onSkip={() => {}} telemetry={telemetry} />
-  );
+  shallow(<Welcome urlBasePath="/" onSkip={() => {}} telemetry={telemetry} />);
 
   expect(mockSetOptedInNoticeSeen).toHaveBeenCalled();
 });
diff --git a/src/plugins/home/public/application/components/welcome.tsx b/src/plugins/home/public/application/components/welcome.tsx
index d4dcaca317806..f82bd024b80b8 100644
--- a/src/plugins/home/public/application/components/welcome.tsx
+++ b/src/plugins/home/public/application/components/welcome.tsx
@@ -38,7 +38,6 @@ import { METRIC_TYPE } from '@kbn/analytics';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { getServices } from '../kibana_services';
 import { TelemetryPluginStart } from '../../../../telemetry/public';
-import { PRIVACY_STATEMENT_URL } from '../../../../telemetry/common/constants';
 
 import { SampleDataCard } from './sample_data';
 interface Props {
@@ -162,7 +161,11 @@ export class Welcome extends React.Component<Props> {
                         id="home.dataManagementDisclaimerPrivacy"
                         defaultMessage="To learn about how usage data helps us manage and improve our products and services, see our "
                       />
-                      <EuiLink href={PRIVACY_STATEMENT_URL} target="_blank" rel="noopener">
+                      <EuiLink
+                        href={telemetry.telemetryConstants.getPrivacyStatementUrl()}
+                        target="_blank"
+                        rel="noopener"
+                      >
                         <FormattedMessage
                           id="home.dataManagementDisclaimerPrivacyLink"
                           defaultMessage="Privacy Statement."
diff --git a/src/plugins/telemetry/public/mocks.ts b/src/plugins/telemetry/public/mocks.ts
index 9ec4a3ae86cc7..dd7e5a4cc4ce3 100644
--- a/src/plugins/telemetry/public/mocks.ts
+++ b/src/plugins/telemetry/public/mocks.ts
@@ -25,7 +25,7 @@ import { httpServiceMock } from '../../../core/public/http/http_service.mock';
 import { notificationServiceMock } from '../../../core/public/notifications/notifications_service.mock';
 import { TelemetryService } from './services/telemetry_service';
 import { TelemetryNotifications } from './services/telemetry_notifications/telemetry_notifications';
-import { TelemetryPluginStart, TelemetryPluginConfig } from './plugin';
+import { TelemetryPluginStart, TelemetryPluginSetup, TelemetryPluginConfig } from './plugin';
 
 // The following is to be able to access private methods
 /* eslint-disable dot-notation */
@@ -77,20 +77,35 @@ export function mockTelemetryNotifications({
   });
 }
 
-export type Setup = jest.Mocked<TelemetryPluginStart>;
+export type Setup = jest.Mocked<TelemetryPluginSetup>;
+export type Start = jest.Mocked<TelemetryPluginStart>;
 
 export const telemetryPluginMock = {
   createSetupContract,
+  createStartContract,
 };
 
 function createSetupContract(): Setup {
   const telemetryService = mockTelemetryService();
-  const telemetryNotifications = mockTelemetryNotifications({ telemetryService });
 
   const setupContract: Setup = {
     telemetryService,
-    telemetryNotifications,
   };
 
   return setupContract;
 }
+
+function createStartContract(): Start {
+  const telemetryService = mockTelemetryService();
+  const telemetryNotifications = mockTelemetryNotifications({ telemetryService });
+
+  const startContract: Start = {
+    telemetryService,
+    telemetryNotifications,
+    telemetryConstants: {
+      getPrivacyStatementUrl: jest.fn(),
+    },
+  };
+
+  return startContract;
+}
diff --git a/src/plugins/telemetry/public/plugin.ts b/src/plugins/telemetry/public/plugin.ts
index a363953978d79..3846e7cb96a19 100644
--- a/src/plugins/telemetry/public/plugin.ts
+++ b/src/plugins/telemetry/public/plugin.ts
@@ -38,6 +38,7 @@ import {
   getTelemetrySendUsageFrom,
 } from '../common/telemetry_config';
 import { getNotifyUserAboutOptInDefault } from '../common/telemetry_config/get_telemetry_notify_user_about_optin_default';
+import { PRIVACY_STATEMENT_URL } from '../common/constants';
 
 export interface TelemetryPluginSetup {
   telemetryService: TelemetryService;
@@ -46,6 +47,9 @@ export interface TelemetryPluginSetup {
 export interface TelemetryPluginStart {
   telemetryService: TelemetryService;
   telemetryNotifications: TelemetryNotifications;
+  telemetryConstants: {
+    getPrivacyStatementUrl: () => string;
+  };
 }
 
 export interface TelemetryPluginConfig {
@@ -115,6 +119,9 @@ export class TelemetryPlugin implements Plugin<TelemetryPluginSetup, TelemetryPl
     return {
       telemetryService: this.telemetryService,
       telemetryNotifications: this.telemetryNotifications,
+      telemetryConstants: {
+        getPrivacyStatementUrl: () => PRIVACY_STATEMENT_URL,
+      },
     };
   }
 

From a383468163a65fa5104393b0a09caa3917a8c430 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Thu, 18 Jun 2020 11:28:49 -0400
Subject: [PATCH 24/63] [Maps] Remove bounds param (#69396)

---
 .../maps/common/map_saved_object_type.ts      |  4 -
 .../common/migrations/remove_bounds.test.ts   | 38 ++++++++
 .../maps/common/migrations/remove_bounds.ts   | 19 ++++
 .../maps/common/migrations/scaling_type.ts    |  3 +-
 .../public/angular/services/saved_gis_map.js  |  9 --
 .../sample_map_saved_objects.json             | 87 +------------------
 .../plugins/maps/server/saved_objects/map.ts  |  1 -
 .../maps/server/saved_objects/migrations.js   |  9 ++
 .../api_integration/apis/maps/migrations.js   |  2 +-
 9 files changed, 72 insertions(+), 100 deletions(-)
 create mode 100644 x-pack/plugins/maps/common/migrations/remove_bounds.test.ts
 create mode 100644 x-pack/plugins/maps/common/migrations/remove_bounds.ts

diff --git a/x-pack/plugins/maps/common/map_saved_object_type.ts b/x-pack/plugins/maps/common/map_saved_object_type.ts
index e5b4876186fd8..e195d9e4538f0 100644
--- a/x-pack/plugins/maps/common/map_saved_object_type.ts
+++ b/x-pack/plugins/maps/common/map_saved_object_type.ts
@@ -13,10 +13,6 @@ export type MapSavedObjectAttributes = {
   mapStateJSON?: string;
   layerListJSON?: string;
   uiStateJSON?: string;
-  bounds?: {
-    type?: string;
-    coordinates?: [];
-  };
 };
 
 export type MapSavedObject = SavedObject<MapSavedObjectAttributes>;
diff --git a/x-pack/plugins/maps/common/migrations/remove_bounds.test.ts b/x-pack/plugins/maps/common/migrations/remove_bounds.test.ts
new file mode 100644
index 0000000000000..ac1ffd0d8c890
--- /dev/null
+++ b/x-pack/plugins/maps/common/migrations/remove_bounds.test.ts
@@ -0,0 +1,38 @@
+/*
+ * 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 { removeBoundsFromSavedObject } from './remove_bounds';
+
+describe('removeBoundsFromSavedObject', () => {
+  test('Remove when present', () => {
+    const attributes = {
+      title: 'my map',
+      bounds: {
+        type: 'polygon',
+        coordinates: [
+          [
+            [0, 0],
+            [1, 0],
+            [0, 1],
+            [0, 0],
+          ],
+        ],
+      },
+    };
+    expect(removeBoundsFromSavedObject({ attributes })).toEqual({
+      title: 'my map',
+    });
+  });
+
+  test('No-op when absent', () => {
+    const attributes = {
+      title: 'my map',
+    };
+    expect(removeBoundsFromSavedObject({ attributes })).toEqual({
+      title: 'my map',
+    });
+  });
+});
diff --git a/x-pack/plugins/maps/common/migrations/remove_bounds.ts b/x-pack/plugins/maps/common/migrations/remove_bounds.ts
new file mode 100644
index 0000000000000..05c8d965c2ace
--- /dev/null
+++ b/x-pack/plugins/maps/common/migrations/remove_bounds.ts
@@ -0,0 +1,19 @@
+/*
+ * 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 { MapSavedObjectAttributes } from '../map_saved_object_type';
+
+export function removeBoundsFromSavedObject({
+  attributes,
+}: {
+  attributes: MapSavedObjectAttributes;
+}): MapSavedObjectAttributes {
+  const newAttributes = { ...attributes };
+  // @ts-expect-error
+  // This removes an unused parameter from pre 7.8=< saved objects
+  delete newAttributes.bounds;
+  return { ...newAttributes };
+}
diff --git a/x-pack/plugins/maps/common/migrations/scaling_type.ts b/x-pack/plugins/maps/common/migrations/scaling_type.ts
index 98a06a764f4ec..d77ca03ea50b6 100644
--- a/x-pack/plugins/maps/common/migrations/scaling_type.ts
+++ b/x-pack/plugins/maps/common/migrations/scaling_type.ts
@@ -30,7 +30,8 @@ export function migrateUseTopHitsToScalingType({
       sourceDescriptor.scalingType = _.get(layerDescriptor, 'sourceDescriptor.useTopHits', false)
         ? SCALING_TYPES.TOP_HITS
         : SCALING_TYPES.LIMIT;
-      // @ts-ignore useTopHits no longer in type definition but that does not mean its not in live data
+      // @ts-expect-error
+      // useTopHits no longer in type definition but that does not mean its not in live data
       // hence the entire point of this method
       delete sourceDescriptor.useTopHits;
     }
diff --git a/x-pack/plugins/maps/public/angular/services/saved_gis_map.js b/x-pack/plugins/maps/public/angular/services/saved_gis_map.js
index ddb58b610f5f1..a0beaa768888a 100644
--- a/x-pack/plugins/maps/public/angular/services/saved_gis_map.js
+++ b/x-pack/plugins/maps/public/angular/services/saved_gis_map.js
@@ -11,16 +11,12 @@ import {
   getMapZoom,
   getMapCenter,
   getLayerListRaw,
-  getMapExtent,
   getRefreshConfig,
   getQuery,
   getFilters,
   getMapSettings,
 } from '../../selectors/map_selectors';
 import { getIsLayerTOCOpen, getOpenTOCDetails } from '../../selectors/ui_selectors';
-
-import { formatEnvelopeAsPolygon } from '../../elasticsearch_geo_utils';
-
 import { copyPersistentState } from '../../reducers/util';
 import { extractReferences, injectReferences } from '../../../common/migrations/references';
 import { MAP_SAVED_OBJECT_TYPE } from '../../../common/constants';
@@ -38,9 +34,6 @@ export function createSavedGisMapClass(services) {
       mapStateJSON: 'text',
       layerListJSON: 'text',
       uiStateJSON: 'text',
-      bounds: {
-        type: 'object',
-      },
     };
     static fieldOrder = ['title', 'description'];
     static searchSource = false;
@@ -106,8 +99,6 @@ export function createSavedGisMapClass(services) {
         isLayerTOCOpen: getIsLayerTOCOpen(state),
         openTOCDetails: getOpenTOCDetails(state),
       });
-
-      this.bounds = formatEnvelopeAsPolygon(getMapExtent(state));
     }
   }
   return SavedGisMap;
diff --git a/x-pack/plugins/maps/server/maps_telemetry/test_resources/sample_map_saved_objects.json b/x-pack/plugins/maps/server/maps_telemetry/test_resources/sample_map_saved_objects.json
index 5bfe8ae38cac9..017f9e69ffe46 100644
--- a/x-pack/plugins/maps/server/maps_telemetry/test_resources/sample_map_saved_objects.json
+++ b/x-pack/plugins/maps/server/maps_telemetry/test_resources/sample_map_saved_objects.json
@@ -7,34 +7,7 @@
       "description": "",
       "mapStateJSON": "{\"zoom\":4.82,\"center\":{\"lon\":11.41545,\"lat\":42.0865},\"timeFilters\":{\"from\":\"now-15w\",\"to\":\"now\"},\"refreshConfig\":{\"isPaused\":false,\"interval\":0},\"query\":{\"language\":\"lucene\",\"query\":\"\"}}",
       "layerListJSON": "[{\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"id\":\"csq5v\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"alpha\":0.65,\"visible\":true,\"style\":{\"type\":\"TILE\",\"properties\":{}},\"type\":\"TILE\"},{\"sourceDescriptor\":{\"type\":\"EMS_FILE\",\"id\":\"italy_provinces\"},\"id\":\"0oye8\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"alpha\":0.75,\"visible\":true,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#0c1f70\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}}}},\"type\":\"VECTOR\"},{\"sourceDescriptor\":{\"type\":\"ES_GEO_GRID\",\"id\":\"053fe296-f5ae-4cb0-9e73-a5752cb9ba74\",\"indexPatternId\":\"d3d7af60-4c81-11e8-b3d7-01146121b73d\",\"geoField\":\"DestLocation\",\"requestType\":\"point\",\"resolution\":\"COARSE\"},\"id\":\"1gx22\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"alpha\":0.75,\"visible\":true,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"Count\",\"name\":\"doc_count\",\"origin\":\"source\"},\"color\":\"Greens\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"Count\",\"name\":\"doc_count\",\"origin\":\"source\"},\"minSize\":4,\"maxSize\":32}}}},\"type\":\"VECTOR\"}]",
-      "uiStateJSON": "{}",
-      "bounds": {
-        "type": "polygon",
-        "coordinates": [
-          [
-            [
-              -5.29778,
-              51.54155
-            ],
-            [
-              -5.29778,
-              30.98066
-            ],
-            [
-              28.12868,
-              30.98066
-            ],
-            [
-              28.12868,
-              51.54155
-            ],
-            [
-              -5.29778,
-              51.54155
-            ]
-          ]
-        ]
-      }
+      "uiStateJSON": "{}"
     },
     "references": [
     ],
@@ -49,34 +22,7 @@
       "description": "",
       "mapStateJSON": "{\"zoom\":3.43,\"center\":{\"lon\":-16.30411,\"lat\":42.88411},\"timeFilters\":{\"from\":\"now-15w\",\"to\":\"now\"},\"refreshConfig\":{\"isPaused\":false,\"interval\":0},\"query\":{\"query\":\"\",\"language\":\"lucene\"}}",
       "layerListJSON": "[{\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"id\":\"csq5v\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"alpha\":0.65,\"visible\":true,\"style\":{\"type\":\"TILE\",\"properties\":{}},\"type\":\"TILE\"},{\"sourceDescriptor\":{\"type\":\"EMS_FILE\",\"id\":\"france_departments\"},\"id\":\"65xbw\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"alpha\":0.25,\"visible\":true,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#19c1e6\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}}}},\"type\":\"VECTOR\"},{\"sourceDescriptor\":{\"id\":\"240125db-e612-4001-b853-50107e55d984\",\"type\":\"ES_SEARCH\",\"indexPatternId\":\"ff959d40-b880-11e8-a6d9-e546fe2bba5f\",\"geoField\":\"geoip.location\",\"limit\":2048,\"filterByMapBounds\":true,\"tooltipProperties\":[]},\"id\":\"mdae9\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"alpha\":0.75,\"visible\":true,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#1ce619\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}}}},\"type\":\"VECTOR\"}]",
-      "uiStateJSON": "{}",
-      "bounds": {
-        "type": "polygon",
-        "coordinates": [
-          [
-            [
-              -59.97005,
-              63.9123
-            ],
-            [
-              -59.97005,
-              11.25616
-            ],
-            [
-              27.36184,
-              11.25616
-            ],
-            [
-              27.36184,
-              63.9123
-            ],
-            [
-              -59.97005,
-              63.9123
-            ]
-          ]
-        ]
-      }
+      "uiStateJSON": "{}"
     },
     "references": [
     ],
@@ -91,34 +37,7 @@
       "description": "",
       "mapStateJSON": "{\"zoom\":2.12,\"center\":{\"lon\":-88.67592,\"lat\":34.23257},\"timeFilters\":{\"from\":\"now-15m\",\"to\":\"now\",\"mode\":\"quick\"},\"refreshConfig\":{\"isPaused\":false,\"interval\":0},\"query\":{\"query\":\"\",\"language\":\"lucene\"}}",
       "layerListJSON": "[{\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"id\":\"csq5v\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"alpha\":0.65,\"visible\":true,\"style\":{\"type\":\"TILE\",\"properties\":{}},\"type\":\"TILE\"},{\"sourceDescriptor\":{\"type\":\"EMS_FILE\",\"id\":\"canada_provinces\"},\"id\":\"kt086\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"alpha\":0.75,\"visible\":true,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#60895e\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}}}},\"type\":\"VECTOR\"}]",
-      "uiStateJSON": "{}",
-      "bounds": {
-        "type": "polygon",
-        "coordinates": [
-          [
-            [
-              163.37506,
-              77.35215
-            ],
-            [
-              163.37506,
-              -46.80667
-            ],
-            [
-              19.2731,
-              -46.80667
-            ],
-            [
-              19.2731,
-              77.35215
-            ],
-            [
-              163.37506,
-              77.35215
-            ]
-          ]
-        ]
-      }
+      "uiStateJSON": "{}"
     },
     "references": [
     ],
diff --git a/x-pack/plugins/maps/server/saved_objects/map.ts b/x-pack/plugins/maps/server/saved_objects/map.ts
index 05f76c060ca94..0fcadc5a97203 100644
--- a/x-pack/plugins/maps/server/saved_objects/map.ts
+++ b/x-pack/plugins/maps/server/saved_objects/map.ts
@@ -17,7 +17,6 @@ export const mapSavedObjects: SavedObjectsType = {
       description: { type: 'text' },
       title: { type: 'text' },
       version: { type: 'integer' },
-      bounds: { type: 'geo_shape' },
       mapStateJSON: { type: 'text' },
       layerListJSON: { type: 'text' },
       uiStateJSON: { type: 'text' },
diff --git a/x-pack/plugins/maps/server/saved_objects/migrations.js b/x-pack/plugins/maps/server/saved_objects/migrations.js
index 5f9576740db29..5db21bb110dbb 100644
--- a/x-pack/plugins/maps/server/saved_objects/migrations.js
+++ b/x-pack/plugins/maps/server/saved_objects/migrations.js
@@ -12,6 +12,7 @@ import { addFieldMetaOptions } from '../../common/migrations/add_field_meta_opti
 import { migrateSymbolStyleDescriptor } from '../../common/migrations/migrate_symbol_style_descriptor';
 import { migrateUseTopHitsToScalingType } from '../../common/migrations/scaling_type';
 import { migrateJoinAggKey } from '../../common/migrations/join_agg_key';
+import { removeBoundsFromSavedObject } from '../../common/migrations/remove_bounds';
 
 export const migrations = {
   map: {
@@ -61,6 +62,14 @@ export const migrations = {
     '7.8.0': (doc) => {
       const attributes = migrateJoinAggKey(doc);
 
+      return {
+        ...doc,
+        attributes,
+      };
+    },
+    '7.9.0': (doc) => {
+      const attributes = removeBoundsFromSavedObject(doc);
+
       return {
         ...doc,
         attributes,
diff --git a/x-pack/test/api_integration/apis/maps/migrations.js b/x-pack/test/api_integration/apis/maps/migrations.js
index 3569d044b5fed..a9ecaac09db9a 100644
--- a/x-pack/test/api_integration/apis/maps/migrations.js
+++ b/x-pack/test/api_integration/apis/maps/migrations.js
@@ -41,7 +41,7 @@ export default function ({ getService }) {
           type: 'index-pattern',
         },
       ]);
-      expect(resp.body.migrationVersion).to.eql({ map: '7.8.0' });
+      expect(resp.body.migrationVersion).to.eql({ map: '7.9.0' });
       expect(resp.body.attributes.layerListJSON.includes('indexPatternRefName')).to.be(true);
     });
   });

From 338ae00384caeda65f13d43f3f93911b498ff0ae Mon Sep 17 00:00:00 2001
From: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Date: Thu, 18 Jun 2020 11:37:14 -0400
Subject: [PATCH 25/63] [IngestManager] fix endpoint setup in api integration
 tests (#69503)

---
 .../test/api_integration/services/ingest_manager.ts   | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/x-pack/test/api_integration/services/ingest_manager.ts b/x-pack/test/api_integration/services/ingest_manager.ts
index bcba36cef42b7..96b1b97a68dc9 100644
--- a/x-pack/test/api_integration/services/ingest_manager.ts
+++ b/x-pack/test/api_integration/services/ingest_manager.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { FtrProviderContext } from '../ftr_provider_context';
-import { setupRouteService, fleetSetupRouteService } from '../../../plugins/ingest_manager/common';
+import { fleetSetupRouteService } from '../../../plugins/ingest_manager/common';
 
 export function IngestManagerProvider({ getService }: FtrProviderContext) {
   const supertest = getService('supertest');
@@ -12,14 +12,11 @@ export function IngestManagerProvider({ getService }: FtrProviderContext) {
     async setup() {
       const headers = { accept: 'application/json', 'kbn-xsrf': 'some-xsrf-token' };
 
-      const { body } = await supertest
-        .get(fleetSetupRouteService.getFleetSetupPath())
+      await supertest
+        .post(fleetSetupRouteService.postFleetSetupPath())
         .set(headers)
+        .send({ forceRecreate: true })
         .expect(200);
-
-      if (!body.isInitialized) {
-        await supertest.post(setupRouteService.getSetupPath()).set(headers).expect(200);
-      }
     },
   };
 }

From af5874d9d700fe33c9f7c4e7f7610a1e15fdfd2b Mon Sep 17 00:00:00 2001
From: Nathan L Smith <nathan.smith@elastic.co>
Date: Thu, 18 Jun 2020 10:53:27 -0500
Subject: [PATCH 26/63] [APM] Service map download in debug mode (#69350)

* [APM] Service map download in debug mode

Add a download button when debug mode is enabled that downloads JSON of
the map.

Add an upload button to the Storybook.
---
 .../components/app/ServiceMap/Controls.tsx    | 71 +++++++++++++-
 .../CytoscapeExampleData.stories.tsx          | 97 ++++++++++++++-----
 2 files changed, 140 insertions(+), 28 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Controls.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Controls.tsx
index 2199349952d8d..8775cebc0af55 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/Controls.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Controls.tsx
@@ -56,18 +56,64 @@ function doZoom(cy: cytoscape.Core | undefined, increment: number) {
   }
 }
 
+function useDebugDownloadUrl(cy?: cytoscape.Core) {
+  const [downloadUrl, setDownloadUrl] = useState<string | undefined>(undefined);
+  const debug = sessionStorage.getItem('apm_debug') === 'true';
+
+  // Handle elements changes to update the download URL
+  useEffect(() => {
+    const elementsHandler: cytoscape.EventHandler = (event) => {
+      // @ts-ignore The `true` argument to `cy.json` is to flatten the elements
+      // (instead of having them broken into nodes/edges.) DefinitelyTyped has
+      // this wrong.
+      const elementsJson = event.cy.json(true)?.elements.map((element) => ({
+        data: element.data,
+      }));
+      setDownloadUrl(
+        elementsJson.length > 0 && debug
+          ? `data:application/json;charset=utf-8,${encodeURIComponent(
+              JSON.stringify({ elements: elementsJson }, null, '  ')
+            )}`
+          : undefined
+      );
+    };
+
+    if (cy) {
+      cy.on('add remove', elementsHandler);
+    }
+
+    return () => {
+      if (cy) {
+        cy.off('add remove', undefined, elementsHandler);
+      }
+    };
+  }, [cy, debug]);
+
+  return downloadUrl;
+}
+
 export function Controls() {
   const cy = useContext(CytoscapeContext);
   const { urlParams } = useUrlParams();
   const currentSearch = urlParams.kuery ?? '';
   const [zoom, setZoom] = useState((cy && cy.zoom()) || 1);
+  const downloadUrl = useDebugDownloadUrl(cy);
 
+  // Handle zoom events
   useEffect(() => {
+    const zoomHandler: cytoscape.EventHandler = (event) => {
+      setZoom(event.cy.zoom());
+    };
+
     if (cy) {
-      cy.on('zoom', (event) => {
-        setZoom(event.cy.zoom());
-      });
+      cy.on('zoom', zoomHandler);
     }
+
+    return () => {
+      if (cy) {
+        cy.off('zoom', undefined, zoomHandler);
+      }
+    };
   }, [cy]);
 
   function center() {
@@ -102,6 +148,9 @@ export function Controls() {
   const centerLabel = i18n.translate('xpack.apm.serviceMap.center', {
     defaultMessage: 'Center',
   });
+  const downloadLabel = i18n.translate('xpack.apm.serviceMap.download', {
+    defaultMessage: 'Download',
+  });
   const viewFullMapLabel = i18n.translate('xpack.apm.serviceMap.viewFullMap', {
     defaultMessage: 'View full service map',
   });
@@ -165,6 +214,22 @@ export function Controls() {
           </EuiToolTip>
         </Panel>
       )}
+      {downloadUrl && (
+        <Panel hasShadow={true} paddingSize="none">
+          <EuiToolTip
+            anchorClassName="eui-displayInline"
+            content={downloadLabel}
+          >
+            <Button
+              aria-label={downloadLabel}
+              color="text"
+              download="service-map.json"
+              href={downloadUrl}
+              iconType="download"
+            />
+          </EuiToolTip>
+        </Panel>
+      )}
     </ControlsContainer>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx
index 33b3fab28f9ac..3aced1b33dcac 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx
@@ -9,9 +9,12 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButton,
+  EuiForm,
   EuiFieldNumber,
   EuiToolTip,
   EuiCodeEditor,
+  EuiSpacer,
+  EuiFilePicker,
 } from '@elastic/eui';
 import { storiesOf } from '@storybook/react';
 import React, { useState, useEffect } from 'react';
@@ -99,12 +102,14 @@ storiesOf(STORYBOOK_PATH, module).add(
     const [json, setJson] = useState<string>(
       getSessionJson() || JSON.stringify(exampleResponseTodo, null, 2)
     );
+    const [error, setError] = useState<string | undefined>();
+
     const [elements, setElements] = useState<any[]>([]);
     useEffect(() => {
       try {
         setElements(JSON.parse(json).elements);
-      } catch (error) {
-        console.log(error);
+      } catch (e) {
+        setError(e.message);
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -112,34 +117,76 @@ storiesOf(STORYBOOK_PATH, module).add(
     return (
       <div>
         <Cytoscape elements={elements} height={600} width={1340} />
+        <EuiForm isInvalid={error !== undefined} error={error}>
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiCodeEditor
+                mode="json"
+                theme="github"
+                width="100%"
+                value={json}
+                setOptions={{ fontSize: '12px' }}
+                onChange={(value) => {
+                  setJson(value);
+                }}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiFlexGroup direction="column">
+                <EuiFilePicker
+                  display={'large'}
+                  fullWidth={true}
+                  style={{ height: '100%' }}
+                  initialPromptText="Upload a JSON file"
+                  onChange={(event) => {
+                    const item = event?.item(0);
 
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <EuiButton
-              onClick={() => {
-                setElements(JSON.parse(json).elements);
-                setSessionJson(json);
-              }}
-            >
-              Render JSON
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiCodeEditor
-          mode="json"
-          theme="github"
-          width="100%"
-          value={json}
-          setOptions={{ fontSize: '12px' }}
-          onChange={(value) => {
-            setJson(value);
-          }}
-        />
+                    if (item) {
+                      const f = new FileReader();
+                      f.onload = (onloadEvent) => {
+                        const result = onloadEvent?.target?.result;
+                        if (typeof result === 'string') {
+                          setJson(result);
+                        }
+                      };
+                      f.readAsText(item);
+                    }
+                  }}
+                />
+                <EuiSpacer />
+                <EuiButton
+                  onClick={() => {
+                    try {
+                      setElements(JSON.parse(json).elements);
+                      setSessionJson(json);
+                      setError(undefined);
+                    } catch (e) {
+                      setError(e.message);
+                    }
+                  }}
+                >
+                  Render JSON
+                </EuiButton>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiForm>
       </div>
     );
   },
   {
-    info: { propTables: false, source: false },
+    info: {
+      propTables: false,
+      source: false,
+      text: `
+      Enter JSON map data into the text box or upload a file and click "Render JSON" to see the results. You can enable a download button on the service map by putting
+
+      \`\`\`
+      sessionStorage.setItem('apm_debug', 'true')
+      \`\`\`
+
+      into the JavaScript console and reloading the page.`,
+    },
   }
 );
 

From cf1d5e0260bfa2e19be7efc6feaf55c918299bee Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Thu, 18 Jun 2020 12:00:14 -0400
Subject: [PATCH 27/63] Embed documentation on input and output state (#69443)

* Embed documentation on input and output state

* json -> js

* Add section on how id is used by custom time range badge action to determine isCompatible
---
 src/plugins/embeddable/docs/README.md         |   3 +-
 .../docs/containers_and_inherited_state.md    |   2 +-
 .../embeddable/docs/input_and_output_state.md | 282 ++++++++++++++++++
 3 files changed, 285 insertions(+), 2 deletions(-)
 create mode 100644 src/plugins/embeddable/docs/input_and_output_state.md

diff --git a/src/plugins/embeddable/docs/README.md b/src/plugins/embeddable/docs/README.md
index 1b6c7be13b1d4..ce5e76d54a046 100644
--- a/src/plugins/embeddable/docs/README.md
+++ b/src/plugins/embeddable/docs/README.md
@@ -2,4 +2,5 @@
 
 ## Reference
 
-- [Embeddable containers and inherited input state](./containers_and_inherited_state.md)
+- [Input and output state](./input_and_output_state.md)
+- [Common mistakes with embeddable containers and inherited input state](./containers_and_inherited_state.md)
diff --git a/src/plugins/embeddable/docs/containers_and_inherited_state.md b/src/plugins/embeddable/docs/containers_and_inherited_state.md
index c950bef96002a..35e399f89c131 100644
--- a/src/plugins/embeddable/docs/containers_and_inherited_state.md
+++ b/src/plugins/embeddable/docs/containers_and_inherited_state.md
@@ -1,4 +1,4 @@
-## Embeddable containers and inherited input state
+## Common mistakes with embeddable containers and inherited input state
 
 `updateInput` is typed as `updateInput(input: Partial<EmbeddableInput>)`. Notice it's _partial_. This is to support the use case of inherited state when an embeddable is inside a container.
 
diff --git a/src/plugins/embeddable/docs/input_and_output_state.md b/src/plugins/embeddable/docs/input_and_output_state.md
new file mode 100644
index 0000000000000..810dc72664f96
--- /dev/null
+++ b/src/plugins/embeddable/docs/input_and_output_state.md
@@ -0,0 +1,282 @@
+## Input and output state
+
+### What's the difference?
+
+Input vs Output State
+
+| Input          | Output |
+| -----------     | ----------- |
+| Public, on the IEmbeddable interface. `embeddable.updateInput(changedInput)`   | Protected inside the Embeddable class. `this.updateOutput(changedOutput)`      |
+|  Serializable representation of the embeddable  | Does not need to be serializable                 |
+|  Can be updated throughout the lifecycle of an Embeddable  | Often derived from input state        |
+
+Non-real examples to showcase the difference:
+
+| Input          | Output      |
+| -----------    | ----------- |
+| savedObjectId  |     savedObjectAttributes  |
+| esQueryRequest |     esQueryResponse        |
+|   props        |     renderComplete         |
+
+### Types of input state
+
+#### Inherited input state
+
+The only reason we have different types of input state is to support embeddable containers, and children embeddables _inheriting_ state from the container. 
+For example, when the dashboard time range changes, so does
+the time range of all children embeddables. Dashboard passes down time range as _inherited_ input state. From the viewpoint of the child Embeddable,
+time range is just input state. It doesn't care where it gets this data from.  
+
+
+For example, imagine a container with this input:
+
+```js
+{
+  gridData: {...},
+  timeRange: 'now-15m to now',
+
+  // Every embeddable container has a panels mapping. It's how the base container class manages common changes like children being
+  // added, removed or edited.
+  panels: {
+    ['1']: {
+      // `type` is used to grab the right embeddable factory. Every PanelState must specify one.
+      type: 'clock',
+
+      // `explicitInput` is combined with `inheritedInput` to create `childInput`, and is use like:
+      // `embeddableFactories.get(type).create(childInput)`.
+      explicitInput: {
+
+        // All explicitInput is required to have an id. This is used as a way for the
+        // embeddable to know where it exists in the panels array if it's living in a container.
+        // Note, this is NOT THE SAVED OBJECT ID! Even though it's sometimes used to store the saved object id. 
+        id: '1',
+      }
+    }
+  }
+}
+```
+
+That could result in the following input being passed to a child:
+
+```js
+{
+  timeRange: 'now-15m to now',
+  id: '1',
+}
+```
+
+Notice that `gridData` is not passed down, but `timeRange` is. What ends up as _inherited_ state, that is passed down to a child, is up to the specific
+implementation of a container and
+determined by the abstract function `Container.getInheritedInput()`
+
+#### Overridding inherited input
+
+We wanted to support _overriding_ this inherited state, to support the "Per panel time range" feature. The _inherited_ `timeRange` input can be
+overridden by the _explicit_ `timeRange` input.
+
+Take this example dashboard container input:
+
+```js
+{
+  gridData: {...},
+  timeRange: 'now-15m to now',
+  panels: {
+    ['1']: {
+      type: 'clock',
+      explicitInput: {
+        timeRange: 'now-30m to now',
+        id: '1',
+      }
+    },
+    ['2']: {
+      type: 'clock',
+      explicitInput: {
+        id: '2',
+      }
+    },
+}
+```
+
+The first child embeddable will get passed input state:
+
+```js
+{
+  timeRange: 'now-30m to now',
+  id: '1',
+}
+```
+
+This override wouldn't affect other children, so the second child would receive:
+
+```js
+{
+  timeRange: 'now-15m to now',
+  id: '2',
+}
+```
+
+#### EmbeddableInput.id and some technical debt
+
+Above I said:
+
+> From the viewpoint of the child Embeddable,
+> time range is just input state. It doesn't care where it gets this data from.  
+
+and this is mostly true, however, the primary reason EmbeddableInput.id exists is to support the
+case where the custom time range badge action needs to look up a child's explicit input on the
+parent. It does this to determine whether or not to show the badge.  The logic is something like:
+
+```ts
+  // If there is no explicit input defined on the parent then this embeddable inherits the
+  // time range from whatever the time range of the parent is.
+  return parent.getInput().panels[embeddable.id].explicitInput.timeRange === undefined;
+```
+
+It doesn't just compare the timeRange input on the parent (`embeddable.parent?.getInput().timeRange` )because even if they happen to match,
+we still want the badge showing to indicate the time range is "locked" on this particular panel. 
+
+Note that `parent` can be retrieved from either `embeddabble.parent` or `embeddable.getRoot()`.  The
+`getRoot` variety will walk up to find the root parent, even though we have no tested or used
+nested containers, it is theoretically possible.
+
+This EmbeddableInput.id parameter is marked as required on the `EmbeddableInput` interface, even though it's only used
+when an embeddable is inside a parent. There is also no
+typescript safety to ensure the id matches the panel id in the parents json:
+
+```js
+    ['2']: {
+      type: 'clock',
+      explicitInput: {
+        id: '3', // No! Should be 2!
+      }
+    },
+```
+
+It should probably be something that the parent passes down to the child specifically, based on the panel mapping key,
+and renamed to something like `panelKeyInParent`.
+
+Note that this has nothing to do with a saved object id, even though in dashboard app, the saved object happens to be
+used as the dashboard container id.  Another reason this should probably not be required for embeddables not 
+inside containers.
+
+#### A container can pass down any information to the children
+
+It doesn't have to be part of it's own input. It's possible for a container input like:
+
+
+```js
+{
+  timeRange: 'now-15m to now',
+  panels: {
+    ['1']: {
+      type: 'clock',
+      explicitInput: {
+        timeRange: 'now-30m to now',
+        id: '1',
+      }
+    }
+}
+```
+
+to pass down this input:
+
+```js
+{
+  timeRange: 'now-30m to now',
+  id: '1',
+  zed: 'bar', // <-- Where did this come from??
+}
+```
+
+I don't have a realistic use case for this, just noting it's possible in any containers implementation of `getInheritedInput`. Note this is still considered
+inherited input because it's coming from the container.
+
+#### Explicit input stored on behalf of the container
+
+It's possible for a container to store explicit input state on behalf of an embeddable, without knowing what that state is. For example, a container could
+have input state like:
+
+```js
+{
+  timeRange: 'now-15m to now',
+  panels: {
+    ['1']: {
+      type: 'clock',
+      explicitInput: {
+        display: 'analog',
+        id: '1',
+      }
+    }
+}
+```
+
+And what gets passed to the child is:
+
+```js
+{
+  timeRange: 'now-15m to now',
+  id: '1',
+  display: 'analog'
+}
+```
+
+even if a container has no idea about this `clock` embeddable implementation, nor this `explicitInput.display` field.
+
+There are two ways for this kind of state to end up in `panels[id].explicitInput`. 
+
+1. `ClockEmbeddableFactory.getExplicitInput` returns it. 
+2. `ClockEmbeddableFactory.getDefaultInput` returns it. (This function is largely unused. We may be able to get rid of it.)
+3. Someone called `embeddable.updateInput({ display: 'analog' })`, when the embeddable is a child in a container. 
+
+#### Containers can pass down too much information
+
+Lets say our container state is:
+
+```js
+{
+  timeRange: 'now-15m to now',
+  panels: {
+    ['1']: {
+      type: 'helloWorld',
+      explicitInput: {
+        id: '1',
+      }
+    }
+}
+```
+
+What gets passed to the child is:
+
+```js
+{
+  timeRange: 'now-15m to now',
+  id: '1',
+}
+```
+
+It doesn't matter if the embeddable does not require, nor use, `timeRange`. The container passes down inherited input state to every child. 
+This could present problems with trying to figure out which embeddables support
+different types of actions. For example, it'd be great if "Customize time range" action only showed up on embeddables that actually did something
+with the `timeRange`. You can't check at runtime whether `input.timeRange === undefined` to do so though, because it will be passed in by the container
+regardless.
+
+
+#### Tech debt warnings
+
+`EmbeddableFactory.getExplicitInput` was intended as a way for an embeddable to retrieve input state it needs, that will not  
+be provided by a container. However, an embeddable won't know where it will be rendered, so how will the factory know which 
+required data to ask from the user and which will be inherited from the container? I believe `getDefaultInput` was meant to solve this.
+`getDefaultInput` would provide default values, only if the container didn't supply them through inheritance.  Explicit input would
+always provide these values, and would always be stored in a containers `panel[id].explicitInput`, even if the container _did_ provide
+them.
+
+There are no real life examples showcasing this, it may not even be really needed by current use cases. Containers were built as an abstraction, with
+the thinking being that it would support any type of rendering of child embeddables - whether in a "snap to grid" style like dashboard,
+or in a free form layout like canvas.
+
+The only real implementation of a container in production code at the time this is written is Dashboard however, with no plans to migrate
+Canvas over to use it (this was the original impetus for an abstraction). The container code is quite complicated with child management, 
+so it makes creating a new container very easy, as you can see in the developer examples of containers. But, it's possible this layer was
+ an over abstraction without a real prod use case (I can say that because I wrote it, I'm only insulting myself!) :).
+
+Be sure to read [Common mistakes with embeddable containers and inherited input state](./containers_and_inherited_state.md) next!
\ No newline at end of file

From 03a24fbb67154c519ef45a476bce6186b9508d1d Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Thu, 18 Jun 2020 09:13:26 -0700
Subject: [PATCH 28/63] Revert "[RUM Dashboard] Initial Version (#68778)"

This reverts commit 72111702e95214594d5d56bc856e1d5c78e6d802.
---
 .../elasticsearch_fieldnames.test.ts.snap     |  24 ---
 .../apm/common/elasticsearch_fieldnames.ts    |   6 -
 .../plugins/apm/common/projections/errors.ts  |   2 +-
 .../plugins/apm/common/projections/metrics.ts |   2 +-
 .../apm/common/projections/rum_overview.ts    |  46 -----
 .../apm/common/projections/services.ts        |   2 +-
 .../apm/common/projections/transactions.ts    |   2 +-
 .../plugins/apm/common/projections/typings.ts |   1 -
 .../apm/e2e/cypress/integration/helpers.ts    |  20 +-
 .../cypress/integration/rum_dashboard.feature |   7 -
 .../apm/e2e/cypress/integration/snapshots.js  |  23 +--
 .../support/step_definitions/rum_dashboard.ts |  43 ----
 x-pack/plugins/apm/e2e/ingest-data/replay.js  |   6 +-
 x-pack/plugins/apm/e2e/run-e2e.sh             |   2 +-
 x-pack/plugins/apm/e2e/yarn.lock              |   8 +-
 .../plugins/apm/public/application/index.tsx  |   3 +-
 .../apm/public/components/app/Home/index.tsx  |  24 +--
 .../app/Main/route_config/index.tsx           |   9 -
 .../app/Main/route_config/route_names.tsx     |   1 -
 .../app/RumDashboard/ChartWrapper/index.tsx   |  63 ------
 .../app/RumDashboard/ClientMetrics/index.tsx  |  82 --------
 .../PercentileAnnotations.tsx                 |  60 ------
 .../PageLoadDistribution/index.tsx            | 144 -------------
 .../app/RumDashboard/PageViewsTrend/index.tsx | 111 ----------
 .../app/RumDashboard/RumDashboard.tsx         |  65 ------
 .../components/app/RumDashboard/index.tsx     |  40 ----
 .../app/RumDashboard/translations.ts          |  73 -------
 .../app/ServiceDetails/ServiceDetailTabs.tsx  |  16 --
 .../components/shared/KueryBar/index.tsx      |   4 +-
 .../shared/Links/apm/RumOverviewLink.tsx      |  31 ---
 .../lib/errors/distribution/get_buckets.ts    |   2 +-
 .../apm/server/lib/errors/get_error_group.ts  |   2 +-
 .../lib/helpers}/range_filter.ts              |   0
 .../__snapshots__/queries.test.ts.snap        | 194 ------------------
 .../lib/rum_client/get_client_metrics.ts      |  61 ------
 .../rum_client/get_page_load_distribution.ts  | 140 -------------
 .../lib/rum_client/get_page_view_trends.ts    |  57 -----
 .../apm/server/lib/rum_client/queries.test.ts |  52 -----
 .../get_service_map_service_node_info.ts      |   2 +-
 .../lib/service_map/get_trace_sample_ids.ts   |   2 +-
 .../get_derived_service_annotations.ts        |   2 +-
 .../lib/services/get_service_agent_name.ts    |   2 +-
 .../services/get_service_transaction_types.ts |   2 +-
 .../apm/server/lib/traces/get_trace_items.ts  |   2 +-
 .../avg_duration_by_browser/fetcher.ts        |   2 +-
 .../avg_duration_by_country/index.ts          |   2 +-
 .../lib/transactions/breakdown/index.ts       |   2 +-
 .../charts/get_timeseries_data/fetcher.ts     |   2 +-
 .../distribution/get_buckets/fetcher.ts       |   2 +-
 .../lib/transactions/get_transaction/index.ts |   2 +-
 .../server/lib/ui_filters/get_environments.ts |   2 +-
 .../lib/ui_filters/local_ui_filters/config.ts |  35 ----
 .../apm/server/routes/create_apm_api.ts       |  14 +-
 .../plugins/apm/server/routes/rum_client.ts   |  57 -----
 .../plugins/apm/server/routes/ui_filters.ts   |  11 -
 .../apm/typings/elasticsearch/aggregations.ts |  26 ---
 .../translations/translations/ja-JP.json      |   1 +
 .../translations/translations/zh-CN.json      |   1 +
 58 files changed, 47 insertions(+), 1552 deletions(-)
 delete mode 100644 x-pack/plugins/apm/common/projections/rum_overview.ts
 delete mode 100644 x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature
 delete mode 100644 x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum_dashboard.ts
 delete mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx
 delete mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
 delete mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
 delete mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
 delete mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
 delete mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
 delete mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
 delete mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
 delete mode 100644 x-pack/plugins/apm/public/components/shared/Links/apm/RumOverviewLink.tsx
 rename x-pack/plugins/apm/{common/utils => server/lib/helpers}/range_filter.ts (100%)
 delete mode 100644 x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap
 delete mode 100644 x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts
 delete mode 100644 x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts
 delete mode 100644 x-pack/plugins/apm/server/lib/rum_client/get_page_view_trends.ts
 delete mode 100644 x-pack/plugins/apm/server/lib/rum_client/queries.test.ts
 delete mode 100644 x-pack/plugins/apm/server/routes/rum_client.ts

diff --git a/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap b/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap
index f3dc7abcf8239..54dd4704edfc0 100644
--- a/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap
+++ b/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap
@@ -4,8 +4,6 @@ exports[`Error AGENT_NAME 1`] = `"java"`;
 
 exports[`Error AGENT_VERSION 1`] = `"agent version"`;
 
-exports[`Error CLIENT_GEO 1`] = `undefined`;
-
 exports[`Error CLIENT_GEO_COUNTRY_ISO_CODE 1`] = `undefined`;
 
 exports[`Error CONTAINER_ID 1`] = `undefined`;
@@ -124,26 +122,18 @@ exports[`Error TRANSACTION_SAMPLED 1`] = `undefined`;
 
 exports[`Error TRANSACTION_TYPE 1`] = `"request"`;
 
-exports[`Error TRANSACTION_URL 1`] = `undefined`;
-
 exports[`Error URL_FULL 1`] = `undefined`;
 
-exports[`Error USER_AGENT_DEVICE 1`] = `undefined`;
-
 exports[`Error USER_AGENT_NAME 1`] = `undefined`;
 
 exports[`Error USER_AGENT_ORIGINAL 1`] = `undefined`;
 
-exports[`Error USER_AGENT_OS 1`] = `undefined`;
-
 exports[`Error USER_ID 1`] = `undefined`;
 
 exports[`Span AGENT_NAME 1`] = `"java"`;
 
 exports[`Span AGENT_VERSION 1`] = `"agent version"`;
 
-exports[`Span CLIENT_GEO 1`] = `undefined`;
-
 exports[`Span CLIENT_GEO_COUNTRY_ISO_CODE 1`] = `undefined`;
 
 exports[`Span CONTAINER_ID 1`] = `undefined`;
@@ -262,26 +252,18 @@ exports[`Span TRANSACTION_SAMPLED 1`] = `undefined`;
 
 exports[`Span TRANSACTION_TYPE 1`] = `undefined`;
 
-exports[`Span TRANSACTION_URL 1`] = `undefined`;
-
 exports[`Span URL_FULL 1`] = `undefined`;
 
-exports[`Span USER_AGENT_DEVICE 1`] = `undefined`;
-
 exports[`Span USER_AGENT_NAME 1`] = `undefined`;
 
 exports[`Span USER_AGENT_ORIGINAL 1`] = `undefined`;
 
-exports[`Span USER_AGENT_OS 1`] = `undefined`;
-
 exports[`Span USER_ID 1`] = `undefined`;
 
 exports[`Transaction AGENT_NAME 1`] = `"java"`;
 
 exports[`Transaction AGENT_VERSION 1`] = `"agent version"`;
 
-exports[`Transaction CLIENT_GEO 1`] = `undefined`;
-
 exports[`Transaction CLIENT_GEO_COUNTRY_ISO_CODE 1`] = `undefined`;
 
 exports[`Transaction CONTAINER_ID 1`] = `"container1234567890abcdef"`;
@@ -400,16 +382,10 @@ exports[`Transaction TRANSACTION_SAMPLED 1`] = `true`;
 
 exports[`Transaction TRANSACTION_TYPE 1`] = `"transaction type"`;
 
-exports[`Transaction TRANSACTION_URL 1`] = `undefined`;
-
 exports[`Transaction URL_FULL 1`] = `"http://www.elastic.co"`;
 
-exports[`Transaction USER_AGENT_DEVICE 1`] = `undefined`;
-
 exports[`Transaction USER_AGENT_NAME 1`] = `"Other"`;
 
 exports[`Transaction USER_AGENT_ORIGINAL 1`] = `"test original"`;
 
-exports[`Transaction USER_AGENT_OS 1`] = `undefined`;
-
 exports[`Transaction USER_ID 1`] = `"1337"`;
diff --git a/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts b/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts
index 7537dba7f8411..d5c3f91eb9247 100644
--- a/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts
+++ b/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts
@@ -87,9 +87,3 @@ export const CONTAINER_ID = 'container.id';
 export const POD_NAME = 'kubernetes.pod.name';
 
 export const CLIENT_GEO_COUNTRY_ISO_CODE = 'client.geo.country_iso_code';
-
-// RUM Labels
-export const TRANSACTION_URL = 'transaction.page.url';
-export const CLIENT_GEO = 'client.geo';
-export const USER_AGENT_DEVICE = 'user_agent.device.name';
-export const USER_AGENT_OS = 'user_agent.os.name';
diff --git a/x-pack/plugins/apm/common/projections/errors.ts b/x-pack/plugins/apm/common/projections/errors.ts
index 390a8a0968102..bd397afae2243 100644
--- a/x-pack/plugins/apm/common/projections/errors.ts
+++ b/x-pack/plugins/apm/common/projections/errors.ts
@@ -16,7 +16,7 @@ import {
   ERROR_GROUP_ID,
 } from '../elasticsearch_fieldnames';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { rangeFilter } from '../utils/range_filter';
+import { rangeFilter } from '../../server/lib/helpers/range_filter';
 
 export function getErrorGroupsProjection({
   setup,
diff --git a/x-pack/plugins/apm/common/projections/metrics.ts b/x-pack/plugins/apm/common/projections/metrics.ts
index 45998bfe82e96..b05ec5f2ba876 100644
--- a/x-pack/plugins/apm/common/projections/metrics.ts
+++ b/x-pack/plugins/apm/common/projections/metrics.ts
@@ -16,7 +16,7 @@ import {
   SERVICE_NODE_NAME,
 } from '../elasticsearch_fieldnames';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { rangeFilter } from '../utils/range_filter';
+import { rangeFilter } from '../../server/lib/helpers/range_filter';
 import { SERVICE_NODE_NAME_MISSING } from '../service_nodes';
 
 function getServiceNodeNameFilters(serviceNodeName?: string) {
diff --git a/x-pack/plugins/apm/common/projections/rum_overview.ts b/x-pack/plugins/apm/common/projections/rum_overview.ts
deleted file mode 100644
index b1218546d09ff..0000000000000
--- a/x-pack/plugins/apm/common/projections/rum_overview.ts
+++ /dev/null
@@ -1,46 +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 {
-  Setup,
-  SetupTimeRange,
-  SetupUIFilters,
-  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-} from '../../server/lib/helpers/setup_request';
-import { PROCESSOR_EVENT, TRANSACTION_TYPE } from '../elasticsearch_fieldnames';
-import { rangeFilter } from '../utils/range_filter';
-
-export function getRumOverviewProjection({
-  setup,
-}: {
-  setup: Setup & SetupTimeRange & SetupUIFilters;
-}) {
-  const { start, end, uiFiltersES, indices } = setup;
-
-  const bool = {
-    filter: [
-      { range: rangeFilter(start, end) },
-      { term: { [PROCESSOR_EVENT]: 'transaction' } },
-      { term: { [TRANSACTION_TYPE]: 'page-load' } },
-      {
-        // Adding this filter to cater for some inconsistent rum data
-        exists: {
-          field: 'transaction.marks.navigationTiming.fetchStart',
-        },
-      },
-      ...uiFiltersES,
-    ],
-  };
-
-  return {
-    index: indices['apm_oss.transactionIndices'],
-    body: {
-      query: {
-        bool,
-      },
-    },
-  };
-}
diff --git a/x-pack/plugins/apm/common/projections/services.ts b/x-pack/plugins/apm/common/projections/services.ts
index 80a3471e9c30d..bcfc27d720ba9 100644
--- a/x-pack/plugins/apm/common/projections/services.ts
+++ b/x-pack/plugins/apm/common/projections/services.ts
@@ -12,7 +12,7 @@ import {
 } from '../../server/lib/helpers/setup_request';
 import { SERVICE_NAME, PROCESSOR_EVENT } from '../elasticsearch_fieldnames';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { rangeFilter } from '../utils/range_filter';
+import { rangeFilter } from '../../server/lib/helpers/range_filter';
 
 export function getServicesProjection({
   setup,
diff --git a/x-pack/plugins/apm/common/projections/transactions.ts b/x-pack/plugins/apm/common/projections/transactions.ts
index b6cd73ca9aaad..99d5a04c1e722 100644
--- a/x-pack/plugins/apm/common/projections/transactions.ts
+++ b/x-pack/plugins/apm/common/projections/transactions.ts
@@ -17,7 +17,7 @@ import {
   TRANSACTION_NAME,
 } from '../elasticsearch_fieldnames';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { rangeFilter } from '../utils/range_filter';
+import { rangeFilter } from '../../server/lib/helpers/range_filter';
 
 export function getTransactionsProjection({
   setup,
diff --git a/x-pack/plugins/apm/common/projections/typings.ts b/x-pack/plugins/apm/common/projections/typings.ts
index 693795b09e1d0..3361770336dde 100644
--- a/x-pack/plugins/apm/common/projections/typings.ts
+++ b/x-pack/plugins/apm/common/projections/typings.ts
@@ -29,5 +29,4 @@ export enum PROJECTION {
   METRICS = 'metrics',
   ERROR_GROUPS = 'errorGroups',
   SERVICE_NODES = 'serviceNodes',
-  RUM_OVERVIEW = 'rumOverview',
 }
diff --git a/x-pack/plugins/apm/e2e/cypress/integration/helpers.ts b/x-pack/plugins/apm/e2e/cypress/integration/helpers.ts
index 689b88390810f..90d5c9eda632d 100644
--- a/x-pack/plugins/apm/e2e/cypress/integration/helpers.ts
+++ b/x-pack/plugins/apm/e2e/cypress/integration/helpers.ts
@@ -6,30 +6,20 @@
 
 /* eslint-disable import/no-extraneous-dependencies */
 
-const RANGE_FROM = '2020-06-01T14:59:32.686Z';
-const RANGE_TO = '2020-06-16T16:59:36.219Z';
-
+const RANGE_FROM = '2020-03-04T12:30:00.000Z';
+const RANGE_TO = '2020-03-04T13:00:00.000Z';
 const BASE_URL = Cypress.config().baseUrl;
 
 /** The default time in ms to wait for a Cypress command to complete */
 export const DEFAULT_TIMEOUT = 60 * 1000;
 
-export function loginAndWaitForPage(
-  url: string,
-  dateRange?: { to: string; from: string }
-) {
+export function loginAndWaitForPage(url: string) {
   const username = Cypress.env('elasticsearch_username');
   const password = Cypress.env('elasticsearch_password');
 
   cy.log(`Authenticating via ${username} / ${password}`);
-  let rangeFrom = RANGE_FROM;
-  let rangeTo = RANGE_TO;
-  if (dateRange) {
-    rangeFrom = dateRange.from;
-    rangeTo = dateRange.to;
-  }
-
-  const fullUrl = `${BASE_URL}${url}?rangeFrom=${rangeFrom}&rangeTo=${rangeTo}`;
+
+  const fullUrl = `${BASE_URL}${url}?rangeFrom=${RANGE_FROM}&rangeTo=${RANGE_TO}`;
   cy.visit(fullUrl, { auth: { username, password } });
 
   cy.viewport('macbook-15');
diff --git a/x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature b/x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature
deleted file mode 100644
index eabfaf096731b..0000000000000
--- a/x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature
+++ /dev/null
@@ -1,7 +0,0 @@
-Feature: RUM Dashboard
-
-  Scenario: Client metrics
-    Given a user browses the APM UI application for RUM Data
-    When the user inspects the real user monitoring tab
-    Then should redirect to rum dashboard
-      And should have correct client metrics
diff --git a/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js b/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js
index dd96a57ef8c45..d4c8ba4910850 100644
--- a/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js
+++ b/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js
@@ -1,17 +1,10 @@
 module.exports = {
-  "__version": "4.5.0",
-  "APM": {
-    "Transaction duration charts": {
-      "1": "55 ms",
-      "2": "28 ms",
-      "3": "0 ms"
-    }
+  APM: {
+    'Transaction duration charts': {
+      '1': '350 ms',
+      '2': '175 ms',
+      '3': '0 ms',
+    },
   },
-  "RUM Dashboard": {
-    "Client metrics": {
-      "1": "62",
-      "2": "0.07 sec",
-      "3": "0.01 sec"
-    }
-  }
-}
+  __version: '4.5.0',
+};
diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum_dashboard.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum_dashboard.ts
deleted file mode 100644
index 38eadbf513032..0000000000000
--- a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum_dashboard.ts
+++ /dev/null
@@ -1,43 +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 { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
-import { loginAndWaitForPage } from '../../integration/helpers';
-
-/** The default time in ms to wait for a Cypress command to complete */
-export const DEFAULT_TIMEOUT = 60 * 1000;
-
-Given(`a user browses the APM UI application for RUM Data`, () => {
-  // open service overview page
-  const RANGE_FROM = 'now-24h';
-  const RANGE_TO = 'now';
-  loginAndWaitForPage(`/app/apm#/services`, { from: RANGE_FROM, to: RANGE_TO });
-});
-
-When(`the user inspects the real user monitoring tab`, () => {
-  // click rum tab
-  cy.get(':contains(Real User Monitoring)', { timeout: DEFAULT_TIMEOUT })
-    .last()
-    .click({ force: true });
-});
-
-Then(`should redirect to rum dashboard`, () => {
-  cy.url().should('contain', `/app/apm#/rum-overview`);
-});
-
-Then(`should have correct client metrics`, () => {
-  const clientMetrics = '[data-cy=client-metrics] .euiStat__title';
-
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
-  cy.get('.euiStat__title-isLoading').should('not.be.visible');
-
-  cy.get(clientMetrics).eq(2).invoke('text').snapshot();
-
-  cy.get(clientMetrics).eq(1).invoke('text').snapshot();
-
-  cy.get(clientMetrics).eq(0).invoke('text').snapshot();
-});
diff --git a/x-pack/plugins/apm/e2e/ingest-data/replay.js b/x-pack/plugins/apm/e2e/ingest-data/replay.js
index 3478039f39b50..ae3f62894afc0 100644
--- a/x-pack/plugins/apm/e2e/ingest-data/replay.js
+++ b/x-pack/plugins/apm/e2e/ingest-data/replay.js
@@ -99,11 +99,7 @@ async function init() {
     .split('\n')
     .filter((item) => item)
     .map((item) => JSON.parse(item))
-    .filter((item) => {
-      return (
-        item.url === '/intake/v2/events' || item.url === '/intake/v2/rum/events'
-      );
-    });
+    .filter((item) => item.url === '/intake/v2/events');
 
   spinner.start();
   requestProgress.total = items.length;
diff --git a/x-pack/plugins/apm/e2e/run-e2e.sh b/x-pack/plugins/apm/e2e/run-e2e.sh
index 43cc74a197f42..aa7c0e21425ad 100755
--- a/x-pack/plugins/apm/e2e/run-e2e.sh
+++ b/x-pack/plugins/apm/e2e/run-e2e.sh
@@ -109,7 +109,7 @@ echo "${bold}Static mock data (logs: ${E2E_DIR}${TMP_DIR}/ingest-data.log)${norm
 # Download static data if not already done
 if [ ! -e "${TMP_DIR}/events.json" ]; then
     echo 'Downloading events.json...'
-    curl --silent https://storage.googleapis.com/apm-ui-e2e-static-data/2020-06-12.json --output ${TMP_DIR}/events.json
+    curl --silent https://storage.googleapis.com/apm-ui-e2e-static-data/events.json --output ${TMP_DIR}/events.json
 fi
 
 # echo "Deleting existing indices (apm* and .apm*)"
diff --git a/x-pack/plugins/apm/e2e/yarn.lock b/x-pack/plugins/apm/e2e/yarn.lock
index 975154d71b85d..a6729c56ecb09 100644
--- a/x-pack/plugins/apm/e2e/yarn.lock
+++ b/x-pack/plugins/apm/e2e/yarn.lock
@@ -5561,10 +5561,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@3.9.5:
-  version "3.9.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.5.tgz#586f0dba300cde8be52dd1ac4f7e1009c1b13f36"
-  integrity sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==
+typescript@3.9.2:
+  version "3.9.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.2.tgz#64e9c8e9be6ea583c54607677dd4680a1cf35db9"
+  integrity sha512-q2ktq4n/uLuNNShyayit+DTobV2ApPEo/6so68JaD5ojvc/6GClBipedB9zNWYxRSAlZXAe405Rlijzl6qDiSw==
 
 umd@^3.0.0:
   version "3.0.3"
diff --git a/x-pack/plugins/apm/public/application/index.tsx b/x-pack/plugins/apm/public/application/index.tsx
index 8800b2fd492bf..56c427e67ad4c 100644
--- a/x-pack/plugins/apm/public/application/index.tsx
+++ b/x-pack/plugins/apm/public/application/index.tsx
@@ -23,7 +23,7 @@ import {
   KibanaContextProvider,
   useUiSetting$,
 } from '../../../../../src/plugins/kibana_react/public';
-import { px, units } from '../style/variables';
+import { px, unit, units } from '../style/variables';
 import { UpdateBreadcrumbs } from '../components/app/Main/UpdateBreadcrumbs';
 import { APMIndicesPermission } from '../components/app/APMIndicesPermission';
 import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange';
@@ -33,6 +33,7 @@ import { ConfigSchema } from '..';
 import 'react-vis/dist/style.css';
 
 const MainContainer = styled.div`
+  min-width: ${px(unit * 50)};
   padding: ${px(units.plus)};
   height: 100%;
 `;
diff --git a/x-pack/plugins/apm/public/components/app/Home/index.tsx b/x-pack/plugins/apm/public/components/app/Home/index.tsx
index c325a72375359..74cbc00b17889 100644
--- a/x-pack/plugins/apm/public/components/app/Home/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Home/index.tsx
@@ -25,9 +25,6 @@ import { SetupInstructionsLink } from '../../shared/Links/SetupInstructionsLink'
 import { ServiceMap } from '../ServiceMap';
 import { ServiceOverview } from '../ServiceOverview';
 import { TraceOverview } from '../TraceOverview';
-import { RumOverview } from '../RumDashboard';
-import { RumOverviewLink } from '../../shared/Links/apm/RumOverviewLink';
-import { EndUserExperienceLabel } from '../RumDashboard/translations';
 
 function getHomeTabs({
   serviceMapEnabled = true,
@@ -73,27 +70,14 @@ function getHomeTabs({
     });
   }
 
-  homeTabs.push({
-    link: (
-      <RumOverviewLink>
-        {i18n.translate('xpack.apm.home.rumTabLabel', {
-          defaultMessage: 'Real User Monitoring',
-        })}
-      </RumOverviewLink>
-    ),
-    render: () => <RumOverview />,
-    name: 'rum-overview',
-  });
-
   return homeTabs;
 }
-
 const SETTINGS_LINK_LABEL = i18n.translate('xpack.apm.settingsLinkLabel', {
   defaultMessage: 'Settings',
 });
 
 interface Props {
-  tab: 'traces' | 'services' | 'service-map' | 'rum-overview';
+  tab: 'traces' | 'services' | 'service-map';
 }
 
 export function Home({ tab }: Props) {
@@ -109,11 +93,7 @@ export function Home({ tab }: Props) {
         <EuiFlexGroup alignItems="center">
           <EuiFlexItem grow={false}>
             <EuiTitle size="l">
-              <h1>
-                {selectedTab.name === 'rum-overview'
-                  ? EndUserExperienceLabel
-                  : 'APM'}
-              </h1>
+              <h1>APM</h1>
             </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
diff --git a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx
index 295f343b411a9..577af75e92d9e 100644
--- a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx
@@ -250,13 +250,4 @@ export const routes: BreadcrumbRoute[] = [
     }),
     name: RouteName.CUSTOMIZE_UI,
   },
-  {
-    exact: true,
-    path: '/rum-overview',
-    component: () => <Home tab="rum-overview" />,
-    breadcrumb: i18n.translate('xpack.apm.home.rumOverview.title', {
-      defaultMessage: 'Real User Monitoring',
-    }),
-    name: RouteName.RUM_OVERVIEW,
-  },
 ];
diff --git a/x-pack/plugins/apm/public/components/app/Main/route_config/route_names.tsx b/x-pack/plugins/apm/public/components/app/Main/route_config/route_names.tsx
index 4965aa9db8760..167de1a37f427 100644
--- a/x-pack/plugins/apm/public/components/app/Main/route_config/route_names.tsx
+++ b/x-pack/plugins/apm/public/components/app/Main/route_config/route_names.tsx
@@ -26,5 +26,4 @@ export enum RouteName {
   SERVICE_NODES = 'nodes',
   LINK_TO_TRACE = 'link_to_trace',
   CUSTOMIZE_UI = 'customize_ui',
-  RUM_OVERVIEW = 'rum_overview',
 }
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx
deleted file mode 100644
index a3cfbb28abee2..0000000000000
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx
+++ /dev/null
@@ -1,63 +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, { FC, HTMLAttributes } from 'react';
-import {
-  EuiErrorBoundary,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiLoadingChart,
-} from '@elastic/eui';
-
-interface Props {
-  /**
-   * Height for the chart
-   */
-  height?: string;
-  /**
-   * if chart data source is still loading
-   */
-  loading?: boolean;
-  /**
-   * aria-label for accessibility
-   */
-  'aria-label'?: string;
-}
-
-export const ChartWrapper: FC<Props> = ({
-  loading = false,
-  height = '100%',
-  children,
-  ...rest
-}) => {
-  const opacity = loading === true ? 0.3 : 1;
-
-  return (
-    <EuiErrorBoundary>
-      <div
-        style={{
-          height,
-          opacity,
-          transition: 'opacity 0.2s',
-        }}
-        {...(rest as HTMLAttributes<HTMLDivElement>)}
-      >
-        {children}
-      </div>
-      {loading === true && (
-        <EuiFlexGroup
-          justifyContent="spaceAround"
-          alignItems="center"
-          style={{ height, marginTop: `-${height}`, marginBottom: 0 }}
-        >
-          <EuiFlexItem grow={false}>
-            <EuiLoadingChart size="xl" />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      )}
-    </EuiErrorBoundary>
-  );
-};
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
deleted file mode 100644
index 8c0a7c6a91f67..0000000000000
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
+++ /dev/null
@@ -1,82 +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.
- */
-// @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import { EuiFlexGroup, EuiFlexItem, EuiStat } from '@elastic/eui';
-import { useFetcher } from '../../../../hooks/useFetcher';
-import { useUrlParams } from '../../../../hooks/useUrlParams';
-import { BackEndLabel, FrontEndLabel, PageViewsLabel } from '../translations';
-
-export const formatBigValue = (val?: number | null, fixed?: number): string => {
-  if (val && val >= 1000) {
-    const result = val / 1000;
-    if (fixed) {
-      return result.toFixed(fixed) + 'k';
-    }
-    return result + 'k';
-  }
-  return val + '';
-};
-
-const ClFlexGroup = styled(EuiFlexGroup)`
-  flex-direction: row;
-  @media only screen and (max-width: 768px) {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-`;
-
-export const ClientMetrics = () => {
-  const { urlParams, uiFilters } = useUrlParams();
-
-  const { start, end } = urlParams;
-
-  const { data, status } = useFetcher(
-    (callApmApi) => {
-      if (start && end) {
-        return callApmApi({
-          pathname: '/api/apm/rum/client-metrics',
-          params: {
-            query: { start, end, uiFilters: JSON.stringify(uiFilters) },
-          },
-        });
-      }
-    },
-    [start, end, uiFilters]
-  );
-
-  const STAT_STYLE = { width: '240px' };
-
-  return (
-    <ClFlexGroup responsive={false}>
-      <EuiFlexItem grow={false} style={STAT_STYLE}>
-        <EuiStat
-          titleSize="s"
-          title={(data?.backEnd?.value?.toFixed(2) ?? '-') + ' sec'}
-          description={BackEndLabel}
-          isLoading={status !== 'success'}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false} style={STAT_STYLE}>
-        <EuiStat
-          titleSize="s"
-          title={(data?.frontEnd?.value?.toFixed(2) ?? '-') + ' sec'}
-          description={FrontEndLabel}
-          isLoading={status !== 'success'}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false} style={STAT_STYLE}>
-        <EuiStat
-          titleSize="s"
-          title={formatBigValue(data?.pageViews?.value, 2) ?? '-'}
-          description={PageViewsLabel}
-          isLoading={status !== 'success'}
-        />
-      </EuiFlexItem>
-    </ClFlexGroup>
-  );
-};
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
deleted file mode 100644
index 9c89b8bc161b7..0000000000000
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
+++ /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 * as React from 'react';
-import {
-  AnnotationDomainTypes,
-  LineAnnotation,
-  LineAnnotationDatum,
-  LineAnnotationStyle,
-} from '@elastic/charts';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
-import styled from 'styled-components';
-
-interface Props {
-  percentiles?: Record<string, number>;
-}
-
-function generateAnnotationData(
-  values?: Record<string, number>
-): LineAnnotationDatum[] {
-  return Object.entries(values ?? {}).map((value, index) => ({
-    dataValue: value[1],
-    details: `${(+value[0]).toFixed(0)}`,
-  }));
-}
-
-const PercentileMarker = styled.span`
-  position: relative;
-  bottom: 140px;
-`;
-
-export const PercentileAnnotations = ({ percentiles }: Props) => {
-  const dataValues = generateAnnotationData(percentiles) ?? [];
-
-  const style: Partial<LineAnnotationStyle> = {
-    line: {
-      strokeWidth: 1,
-      stroke: euiLightVars.euiColorSecondary,
-      opacity: 1,
-    },
-  };
-
-  return (
-    <>
-      {dataValues.map((annotation, index) => (
-        <LineAnnotation
-          id={index + 'annotation_' + annotation.dataValue}
-          key={index + 'percentile_' + annotation.dataValue}
-          domainType={AnnotationDomainTypes.XDomain}
-          dataValues={[annotation]}
-          style={style}
-          marker={<PercentileMarker>{annotation.details}th</PercentileMarker>}
-        />
-      ))}
-    </>
-  );
-};
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
deleted file mode 100644
index c7a0b64f6a8b8..0000000000000
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
+++ /dev/null
@@ -1,144 +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, { useState } from 'react';
-import {
-  EuiButton,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiTitle,
-} from '@elastic/eui';
-import {
-  Axis,
-  Chart,
-  ScaleType,
-  LineSeries,
-  CurveType,
-  BrushEndListener,
-  Settings,
-  TooltipValueFormatter,
-  TooltipValue,
-} from '@elastic/charts';
-import { Position } from '@elastic/charts/dist/utils/commons';
-import { useUrlParams } from '../../../../hooks/useUrlParams';
-import { useFetcher } from '../../../../hooks/useFetcher';
-import { ChartWrapper } from '../ChartWrapper';
-import { PercentileAnnotations } from './PercentileAnnotations';
-import {
-  PageLoadDistLabel,
-  PageLoadTimeLabel,
-  PercPageLoadedLabel,
-  ResetZoomLabel,
-} from '../translations';
-
-export const PageLoadDistribution = () => {
-  const { urlParams, uiFilters } = useUrlParams();
-
-  const { start, end } = urlParams;
-
-  const [percentileRange, setPercentileRange] = useState<{
-    min: string | null;
-    max: string | null;
-  }>({
-    min: null,
-    max: null,
-  });
-
-  const { data, status } = useFetcher(
-    (callApmApi) => {
-      if (start && end) {
-        return callApmApi({
-          pathname: '/api/apm/rum-client/page-load-distribution',
-          params: {
-            query: {
-              start,
-              end,
-              uiFilters: JSON.stringify(uiFilters),
-              ...(percentileRange.min && percentileRange.max
-                ? {
-                    minPercentile: percentileRange.min,
-                    maxPercentile: percentileRange.max,
-                  }
-                : {}),
-            },
-          },
-        });
-      }
-    },
-    [end, start, uiFilters, percentileRange.min, percentileRange.max]
-  );
-
-  const onBrushEnd: BrushEndListener = ({ x }) => {
-    if (!x) {
-      return;
-    }
-    const [minX, maxX] = x;
-    setPercentileRange({ min: String(minX), max: String(maxX) });
-  };
-
-  const headerFormatter: TooltipValueFormatter = (tooltip: TooltipValue) => {
-    return (
-      <div>
-        <p>{tooltip.value} seconds</p>
-      </div>
-    );
-  };
-
-  const tooltipProps = {
-    headerFormatter,
-  };
-
-  return (
-    <div>
-      <EuiFlexGroup responsive={false}>
-        <EuiFlexItem>
-          <EuiTitle size="xs">
-            <h3>{PageLoadDistLabel}</h3>
-          </EuiTitle>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButton
-            iconType="inspect"
-            size="s"
-            onClick={() => {
-              setPercentileRange({ min: null, max: null });
-            }}
-            fill={percentileRange.min !== null && percentileRange.max !== null}
-          >
-            {ResetZoomLabel}
-          </EuiButton>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer size="m" />
-      <ChartWrapper loading={status !== 'success'} height="200px">
-        <Chart className="story-chart">
-          <Settings onBrushEnd={onBrushEnd} tooltip={tooltipProps} />
-          <PercentileAnnotations percentiles={data?.percentiles} />
-          <Axis
-            id="bottom"
-            title={PageLoadTimeLabel}
-            position={Position.Bottom}
-          />
-          <Axis
-            id="left"
-            title={PercPageLoadedLabel}
-            position={Position.Left}
-            tickFormat={(d) => Number(d).toFixed(1) + ' %'}
-          />
-          <LineSeries
-            id={'PagesPercentage'}
-            name={PercPageLoadedLabel}
-            xScaleType={ScaleType.Linear}
-            yScaleType={ScaleType.Linear}
-            data={data?.pageLoadDistribution ?? []}
-            curve={CurveType.CURVE_NATURAL}
-          />
-        </Chart>
-      </ChartWrapper>
-    </div>
-  );
-};
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
deleted file mode 100644
index cc41bd4352947..0000000000000
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
+++ /dev/null
@@ -1,111 +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 * as React from 'react';
-import { EuiTitle } from '@elastic/eui';
-import {
-  Axis,
-  BarSeries,
-  BrushEndListener,
-  Chart,
-  niceTimeFormatByDay,
-  ScaleType,
-  Settings,
-  timeFormatter,
-} from '@elastic/charts';
-import moment from 'moment';
-import { Position } from '@elastic/charts/dist/utils/commons';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
-import { useUrlParams } from '../../../../hooks/useUrlParams';
-import { useFetcher } from '../../../../hooks/useFetcher';
-import { ChartWrapper } from '../ChartWrapper';
-import { DateTimeLabel, PageViewsLabel } from '../translations';
-import { history } from '../../../../utils/history';
-import { fromQuery, toQuery } from '../../../shared/Links/url_helpers';
-import { formatBigValue } from '../ClientMetrics';
-
-export const PageViewsTrend = () => {
-  const { urlParams, uiFilters } = useUrlParams();
-
-  const { start, end } = urlParams;
-
-  const { data, status } = useFetcher(
-    (callApmApi) => {
-      if (start && end) {
-        return callApmApi({
-          pathname: '/api/apm/rum-client/page-view-trends',
-          params: {
-            query: {
-              start,
-              end,
-              uiFilters: JSON.stringify(uiFilters),
-            },
-          },
-        });
-      }
-    },
-    [end, start, uiFilters]
-  );
-  const formatter = timeFormatter(niceTimeFormatByDay(2));
-
-  const onBrushEnd: BrushEndListener = ({ x }) => {
-    if (!x) {
-      return;
-    }
-    const [minX, maxX] = x;
-
-    const rangeFrom = moment(minX).toISOString();
-    const rangeTo = moment(maxX).toISOString();
-
-    history.push({
-      ...history.location,
-      search: fromQuery({
-        ...toQuery(history.location.search),
-        rangeFrom,
-        rangeTo,
-      }),
-    });
-  };
-
-  return (
-    <div>
-      <EuiTitle size="xs">
-        <h3>{PageViewsLabel}</h3>
-      </EuiTitle>
-      <ChartWrapper loading={status !== 'success'} height="200px">
-        <Chart>
-          <Settings
-            showLegend={false}
-            showLegendExtra
-            legendPosition={Position.Bottom}
-            onBrushEnd={onBrushEnd}
-          />
-          <Axis
-            id="date_time"
-            position={Position.Bottom}
-            title={DateTimeLabel}
-            tickFormat={formatter}
-          />
-          <Axis
-            id="page_views"
-            title={PageViewsLabel}
-            position={Position.Left}
-            tickFormat={(d) => formatBigValue(Number(d))}
-          />
-          <BarSeries
-            id={PageViewsLabel}
-            color={[euiLightVars.euiColorLightShade]}
-            xScaleType={ScaleType.Linear}
-            yScaleType={ScaleType.Linear}
-            xAccessor="x"
-            yAccessors={['y']}
-            data={data ?? []}
-          />
-        </Chart>
-      </ChartWrapper>
-    </div>
-  );
-};
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
deleted file mode 100644
index e3fa7374afb38..0000000000000
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
+++ /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 {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiTitle,
-  EuiSpacer,
-  EuiPanel,
-} from '@elastic/eui';
-import React from 'react';
-import { ClientMetrics } from './ClientMetrics';
-import { PageViewsTrend } from './PageViewsTrend';
-import { PageLoadDistribution } from './PageLoadDistribution';
-import { getWhatIsGoingOnLabel } from './translations';
-import { useUrlParams } from '../../../hooks/useUrlParams';
-
-export function RumDashboard() {
-  const { urlParams } = useUrlParams();
-
-  const { environment } = urlParams;
-
-  let environmentLabel = environment || 'all environments';
-
-  if (environment === 'ENVIRONMENT_NOT_DEFINED') {
-    environmentLabel = 'undefined environment';
-  }
-
-  return (
-    <>
-      <EuiTitle>
-        <h2>{getWhatIsGoingOnLabel(environmentLabel)}</h2>
-      </EuiTitle>
-      <EuiSpacer />
-      <EuiFlexGroup direction="column" gutterSize="s">
-        <EuiFlexItem>
-          <EuiPanel>
-            <EuiFlexGroup justifyContent="spaceBetween">
-              <EuiFlexItem grow={1} data-cy={`client-metrics`}>
-                <EuiTitle size="xs">
-                  <h3>Page load times</h3>
-                </EuiTitle>
-                <EuiSpacer size="s" />
-                <ClientMetrics />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiPanel>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiPanel>
-            <EuiFlexGroup justifyContent="spaceBetween">
-              <EuiFlexItem grow={3}>
-                <PageLoadDistribution />
-                <PageViewsTrend />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiPanel>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </>
-  );
-}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
deleted file mode 100644
index 8f21065b0dab0..0000000000000
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
+++ /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 { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
-import React, { useMemo } from 'react';
-import { useTrackPageview } from '../../../../../observability/public';
-import { LocalUIFilters } from '../../shared/LocalUIFilters';
-import { PROJECTION } from '../../../../common/projections/typings';
-import { RumDashboard } from './RumDashboard';
-
-export function RumOverview() {
-  useTrackPageview({ app: 'apm', path: 'rum_overview' });
-  useTrackPageview({ app: 'apm', path: 'rum_overview', delay: 15000 });
-
-  const localUIFiltersConfig = useMemo(() => {
-    const config: React.ComponentProps<typeof LocalUIFilters> = {
-      filterNames: ['transactionUrl', 'location', 'device', 'os', 'browser'],
-      projection: PROJECTION.RUM_OVERVIEW,
-    };
-
-    return config;
-  }, []);
-
-  return (
-    <>
-      <EuiSpacer />
-      <EuiFlexGroup>
-        <EuiFlexItem grow={1}>
-          <LocalUIFilters {...localUIFiltersConfig} showCount={true} />
-        </EuiFlexItem>
-        <EuiFlexItem grow={7}>
-          <RumDashboard />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </>
-  );
-}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
deleted file mode 100644
index c2aed41a55c7d..0000000000000
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
+++ /dev/null
@@ -1,73 +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';
-
-export const EndUserExperienceLabel = i18n.translate(
-  'xpack.apm.rum.dashboard.title',
-  {
-    defaultMessage: 'End User Experience',
-  }
-);
-
-export const getWhatIsGoingOnLabel = (environmentVal: string) =>
-  i18n.translate('xpack.apm.rum.dashboard.environment.title', {
-    defaultMessage: `What's going on in {environmentVal}?`,
-    values: { environmentVal },
-  });
-
-export const BackEndLabel = i18n.translate('xpack.apm.rum.dashboard.backend', {
-  defaultMessage: 'Backend',
-});
-
-export const FrontEndLabel = i18n.translate(
-  'xpack.apm.rum.dashboard.frontend',
-  {
-    defaultMessage: 'Frontend',
-  }
-);
-
-export const PageViewsLabel = i18n.translate(
-  'xpack.apm.rum.dashboard.pageViews',
-  {
-    defaultMessage: 'Page views',
-  }
-);
-
-export const DateTimeLabel = i18n.translate(
-  'xpack.apm.rum.dashboard.dateTime.label',
-  {
-    defaultMessage: 'Date / Time',
-  }
-);
-
-export const PercPageLoadedLabel = i18n.translate(
-  'xpack.apm.rum.dashboard.pagesLoaded.label',
-  {
-    defaultMessage: 'Pages loaded',
-  }
-);
-
-export const PageLoadTimeLabel = i18n.translate(
-  'xpack.apm.rum.dashboard.pageLoadTime.label',
-  {
-    defaultMessage: 'Page load time (seconds)',
-  }
-);
-
-export const PageLoadDistLabel = i18n.translate(
-  'xpack.apm.rum.dashboard.pageLoadDistribution.label',
-  {
-    defaultMessage: 'Page load distribution',
-  }
-);
-
-export const ResetZoomLabel = i18n.translate(
-  'xpack.apm.rum.dashboard.resetZoom.label',
-  {
-    defaultMessage: 'Reset zoom',
-  }
-);
diff --git a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx
index 81bdbdad805d6..2f35e329720de 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx
@@ -22,8 +22,6 @@ import { ServiceMap } from '../ServiceMap';
 import { ServiceMetrics } from '../ServiceMetrics';
 import { ServiceNodeOverview } from '../ServiceNodeOverview';
 import { TransactionOverview } from '../TransactionOverview';
-import { RumOverviewLink } from '../../shared/Links/apm/RumOverviewLink';
-import { RumOverview } from '../RumDashboard';
 
 interface Props {
   tab: 'transactions' | 'errors' | 'metrics' | 'nodes' | 'service-map';
@@ -112,20 +110,6 @@ export function ServiceDetailTabs({ tab }: Props) {
     tabs.push(serviceMapTab);
   }
 
-  if (isRumAgentName(agentName)) {
-    tabs.push({
-      link: (
-        <RumOverviewLink>
-          {i18n.translate('xpack.apm.home.rumTabLabel', {
-            defaultMessage: 'Real User Monitoring',
-          })}
-        </RumOverviewLink>
-      ),
-      render: () => <RumOverview />,
-      name: 'rum-overview',
-    });
-  }
-
   const selectedTab = tabs.find((serviceTab) => serviceTab.name === tab);
 
   return (
diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx b/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx
index eab685a4c1ab4..d01deb8160858 100644
--- a/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx
@@ -76,10 +76,10 @@ export function KueryBar() {
   });
 
   // The bar should be disabled when viewing the service map
-  const disabled = /\/(service-map|rum-overview)$/.test(location.pathname);
+  const disabled = /\/service-map$/.test(location.pathname);
   const disabledPlaceholder = i18n.translate(
     'xpack.apm.kueryBar.disabledPlaceholder',
-    { defaultMessage: 'Search is not available here' }
+    { defaultMessage: 'Search is not available for service map' }
   );
 
   async function onChange(inputValue: string, selectionStart: number) {
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/RumOverviewLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/RumOverviewLink.tsx
deleted file mode 100644
index abca9817bd69d..0000000000000
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/RumOverviewLink.tsx
+++ /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.
- */
-
-/*
- * 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 { APMLink, APMLinkExtendProps } from './APMLink';
-import { useUrlParams } from '../../../../hooks/useUrlParams';
-import { pickKeys } from '../../../../../common/utils/pick_keys';
-
-const RumOverviewLink = (props: APMLinkExtendProps) => {
-  const { urlParams } = useUrlParams();
-
-  const persistedFilters = pickKeys(
-    urlParams,
-    'transactionResult',
-    'host',
-    'containerId',
-    'podName'
-  );
-
-  return <APMLink path="/rum-overview" query={persistedFilters} {...props} />;
-};
-
-export { RumOverviewLink };
diff --git a/x-pack/plugins/apm/server/lib/errors/distribution/get_buckets.ts b/x-pack/plugins/apm/server/lib/errors/distribution/get_buckets.ts
index db36ad1ede91c..7d96c490fcd70 100644
--- a/x-pack/plugins/apm/server/lib/errors/distribution/get_buckets.ts
+++ b/x-pack/plugins/apm/server/lib/errors/distribution/get_buckets.ts
@@ -10,7 +10,7 @@ import {
   PROCESSOR_EVENT,
   SERVICE_NAME,
 } from '../../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../../../../common/utils/range_filter';
+import { rangeFilter } from '../../helpers/range_filter';
 import {
   Setup,
   SetupTimeRange,
diff --git a/x-pack/plugins/apm/server/lib/errors/get_error_group.ts b/x-pack/plugins/apm/server/lib/errors/get_error_group.ts
index 3d20f84ccfbc2..b157abd0b7e76 100644
--- a/x-pack/plugins/apm/server/lib/errors/get_error_group.ts
+++ b/x-pack/plugins/apm/server/lib/errors/get_error_group.ts
@@ -12,7 +12,7 @@ import {
 } from '../../../common/elasticsearch_fieldnames';
 import { PromiseReturnType } from '../../../typings/common';
 import { APMError } from '../../../typings/es_schemas/ui/apm_error';
-import { rangeFilter } from '../../../common/utils/range_filter';
+import { rangeFilter } from '../helpers/range_filter';
 import {
   Setup,
   SetupTimeRange,
diff --git a/x-pack/plugins/apm/common/utils/range_filter.ts b/x-pack/plugins/apm/server/lib/helpers/range_filter.ts
similarity index 100%
rename from x-pack/plugins/apm/common/utils/range_filter.ts
rename to x-pack/plugins/apm/server/lib/helpers/range_filter.ts
diff --git a/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap b/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap
deleted file mode 100644
index 7d8f31aaeca7f..0000000000000
--- a/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap
+++ /dev/null
@@ -1,194 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`rum client dashboard queries fetches client metrics 1`] = `
-Object {
-  "body": Object {
-    "aggs": Object {
-      "backEnd": Object {
-        "avg": Object {
-          "field": "transaction.marks.agent.timeToFirstByte",
-          "missing": 0,
-        },
-      },
-      "domInteractive": Object {
-        "avg": Object {
-          "field": "transaction.marks.agent.domInteractive",
-          "missing": 0,
-        },
-      },
-      "pageViews": Object {
-        "value_count": Object {
-          "field": "transaction.type",
-        },
-      },
-    },
-    "query": Object {
-      "bool": Object {
-        "filter": Array [
-          Object {
-            "range": Object {
-              "@timestamp": Object {
-                "format": "epoch_millis",
-                "gte": 1528113600000,
-                "lte": 1528977600000,
-              },
-            },
-          },
-          Object {
-            "term": Object {
-              "processor.event": "transaction",
-            },
-          },
-          Object {
-            "term": Object {
-              "transaction.type": "page-load",
-            },
-          },
-          Object {
-            "exists": Object {
-              "field": "transaction.marks.navigationTiming.fetchStart",
-            },
-          },
-          Object {
-            "term": Object {
-              "my.custom.ui.filter": "foo-bar",
-            },
-          },
-        ],
-      },
-    },
-    "size": 0,
-  },
-  "index": "myIndex",
-}
-`;
-
-exports[`rum client dashboard queries fetches page load distribution 1`] = `
-Object {
-  "body": Object {
-    "aggs": Object {
-      "durationMinMax": Object {
-        "min": Object {
-          "field": "transaction.duration.us",
-          "missing": 0,
-        },
-      },
-      "durationPercentiles": Object {
-        "percentiles": Object {
-          "field": "transaction.duration.us",
-          "percents": Array [
-            50,
-            75,
-            90,
-            95,
-            99,
-          ],
-          "script": Object {
-            "lang": "painless",
-            "params": Object {
-              "timeUnit": 1000,
-            },
-            "source": "doc['transaction.duration.us'].value / params.timeUnit",
-          },
-        },
-      },
-    },
-    "query": Object {
-      "bool": Object {
-        "filter": Array [
-          Object {
-            "range": Object {
-              "@timestamp": Object {
-                "format": "epoch_millis",
-                "gte": 1528113600000,
-                "lte": 1528977600000,
-              },
-            },
-          },
-          Object {
-            "term": Object {
-              "processor.event": "transaction",
-            },
-          },
-          Object {
-            "term": Object {
-              "transaction.type": "page-load",
-            },
-          },
-          Object {
-            "exists": Object {
-              "field": "transaction.marks.navigationTiming.fetchStart",
-            },
-          },
-          Object {
-            "term": Object {
-              "my.custom.ui.filter": "foo-bar",
-            },
-          },
-        ],
-      },
-    },
-    "size": 0,
-  },
-  "index": "myIndex",
-}
-`;
-
-exports[`rum client dashboard queries fetches page view trends 1`] = `
-Object {
-  "body": Object {
-    "aggs": Object {
-      "pageViews": Object {
-        "aggs": Object {
-          "trans_count": Object {
-            "value_count": Object {
-              "field": "transaction.type",
-            },
-          },
-        },
-        "auto_date_histogram": Object {
-          "buckets": 50,
-          "field": "@timestamp",
-        },
-      },
-    },
-    "query": Object {
-      "bool": Object {
-        "filter": Array [
-          Object {
-            "range": Object {
-              "@timestamp": Object {
-                "format": "epoch_millis",
-                "gte": 1528113600000,
-                "lte": 1528977600000,
-              },
-            },
-          },
-          Object {
-            "term": Object {
-              "processor.event": "transaction",
-            },
-          },
-          Object {
-            "term": Object {
-              "transaction.type": "page-load",
-            },
-          },
-          Object {
-            "exists": Object {
-              "field": "transaction.marks.navigationTiming.fetchStart",
-            },
-          },
-          Object {
-            "term": Object {
-              "my.custom.ui.filter": "foo-bar",
-            },
-          },
-        ],
-      },
-    },
-    "size": 0,
-  },
-  "index": "myIndex",
-}
-`;
diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts b/x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts
deleted file mode 100644
index 8b3f733fc402a..0000000000000
--- a/x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts
+++ /dev/null
@@ -1,61 +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 { getRumOverviewProjection } from '../../../common/projections/rum_overview';
-import { mergeProjection } from '../../../common/projections/util/merge_projection';
-import {
-  Setup,
-  SetupTimeRange,
-  SetupUIFilters,
-} from '../helpers/setup_request';
-
-export async function getClientMetrics({
-  setup,
-}: {
-  setup: Setup & SetupTimeRange & SetupUIFilters;
-}) {
-  const projection = getRumOverviewProjection({
-    setup,
-  });
-
-  const params = mergeProjection(projection, {
-    body: {
-      size: 0,
-      query: {
-        bool: projection.body.query.bool,
-      },
-      aggs: {
-        pageViews: { value_count: { field: 'transaction.type' } },
-        backEnd: {
-          avg: {
-            field: 'transaction.marks.agent.timeToFirstByte',
-            missing: 0,
-          },
-        },
-        domInteractive: {
-          avg: {
-            field: 'transaction.marks.agent.domInteractive',
-            missing: 0,
-          },
-        },
-      },
-    },
-  });
-
-  const { client } = setup;
-
-  const response = await client.search(params);
-  const { backEnd, domInteractive, pageViews } = response.aggregations!;
-
-  // Divide by 1000 to convert ms into seconds
-  return {
-    pageViews,
-    backEnd: { value: (backEnd.value || 0) / 1000 },
-    frontEnd: {
-      value: ((domInteractive.value || 0) - (backEnd.value || 0)) / 1000,
-    },
-  };
-}
diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts b/x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts
deleted file mode 100644
index 3c563946e4052..0000000000000
--- a/x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts
+++ /dev/null
@@ -1,140 +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 { getRumOverviewProjection } from '../../../common/projections/rum_overview';
-import { mergeProjection } from '../../../common/projections/util/merge_projection';
-import {
-  Setup,
-  SetupTimeRange,
-  SetupUIFilters,
-} from '../helpers/setup_request';
-
-export async function getPageLoadDistribution({
-  setup,
-  minPercentile,
-  maxPercentile,
-}: {
-  setup: Setup & SetupTimeRange & SetupUIFilters;
-  minPercentile?: string;
-  maxPercentile?: string;
-}) {
-  const projection = getRumOverviewProjection({
-    setup,
-  });
-
-  const params = mergeProjection(projection, {
-    body: {
-      size: 0,
-      query: {
-        bool: projection.body.query.bool,
-      },
-      aggs: {
-        durationMinMax: {
-          min: {
-            field: 'transaction.duration.us',
-            missing: 0,
-          },
-        },
-        durationPercentiles: {
-          percentiles: {
-            field: 'transaction.duration.us',
-            percents: [50, 75, 90, 95, 99],
-            script: {
-              lang: 'painless',
-              source: "doc['transaction.duration.us'].value / params.timeUnit",
-              params: {
-                timeUnit: 1000,
-              },
-            },
-          },
-        },
-      },
-    },
-  });
-
-  const { client } = setup;
-
-  const {
-    aggregations,
-    hits: { total },
-  } = await client.search(params);
-
-  if (total.value === 0) {
-    return null;
-  }
-
-  const minDuration = (aggregations?.durationMinMax.value ?? 0) / 1000;
-
-  const minPerc = minPercentile ? +minPercentile : minDuration;
-
-  const maxPercentileQuery =
-    aggregations?.durationPercentiles.values['99.0'] ?? 100;
-
-  const maxPerc = maxPercentile ? +maxPercentile : maxPercentileQuery;
-
-  const pageDist = await getPercentilesDistribution(setup, minPerc, maxPerc);
-  return {
-    pageLoadDistribution: pageDist,
-    percentiles: aggregations?.durationPercentiles.values,
-  };
-}
-
-const getPercentilesDistribution = async (
-  setup: Setup & SetupTimeRange & SetupUIFilters,
-  minPercentiles: number,
-  maxPercentile: number
-) => {
-  const stepValue = (maxPercentile - minPercentiles) / 50;
-  const stepValues = [];
-  for (let i = 1; i < 50; i++) {
-    stepValues.push((stepValue * i + minPercentiles).toFixed(2));
-  }
-
-  const projection = getRumOverviewProjection({
-    setup,
-  });
-
-  const params = mergeProjection(projection, {
-    body: {
-      size: 0,
-      query: {
-        bool: projection.body.query.bool,
-      },
-      aggs: {
-        loadDistribution: {
-          percentile_ranks: {
-            field: 'transaction.duration.us',
-            values: stepValues,
-            keyed: false,
-            script: {
-              lang: 'painless',
-              source: "doc['transaction.duration.us'].value / params.timeUnit",
-              params: {
-                timeUnit: 1000,
-              },
-            },
-          },
-        },
-      },
-    },
-  });
-
-  const { client } = setup;
-
-  const { aggregations } = await client.search(params);
-
-  const pageDist = (aggregations?.loadDistribution.values ?? []) as Array<{
-    key: number;
-    value: number;
-  }>;
-
-  return pageDist.map(({ key, value }, index: number, arr) => {
-    return {
-      x: key,
-      y: index === 0 ? value : value - arr[index - 1].value,
-    };
-  });
-};
diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_page_view_trends.ts b/x-pack/plugins/apm/server/lib/rum_client/get_page_view_trends.ts
deleted file mode 100644
index 126605206d299..0000000000000
--- a/x-pack/plugins/apm/server/lib/rum_client/get_page_view_trends.ts
+++ /dev/null
@@ -1,57 +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 { getRumOverviewProjection } from '../../../common/projections/rum_overview';
-import { mergeProjection } from '../../../common/projections/util/merge_projection';
-import {
-  Setup,
-  SetupTimeRange,
-  SetupUIFilters,
-} from '../helpers/setup_request';
-
-export async function getPageViewTrends({
-  setup,
-}: {
-  setup: Setup & SetupTimeRange & SetupUIFilters;
-}) {
-  const projection = getRumOverviewProjection({
-    setup,
-  });
-
-  const params = mergeProjection(projection, {
-    body: {
-      size: 0,
-      query: {
-        bool: projection.body.query.bool,
-      },
-      aggs: {
-        pageViews: {
-          auto_date_histogram: {
-            field: '@timestamp',
-            buckets: 50,
-          },
-          aggs: {
-            trans_count: {
-              value_count: {
-                field: 'transaction.type',
-              },
-            },
-          },
-        },
-      },
-    },
-  });
-
-  const { client } = setup;
-
-  const response = await client.search(params);
-
-  const result = response.aggregations?.pageViews.buckets ?? [];
-  return result.map(({ key, trans_count }) => ({
-    x: key,
-    y: trans_count.value,
-  }));
-}
diff --git a/x-pack/plugins/apm/server/lib/rum_client/queries.test.ts b/x-pack/plugins/apm/server/lib/rum_client/queries.test.ts
deleted file mode 100644
index 5f5a48eced746..0000000000000
--- a/x-pack/plugins/apm/server/lib/rum_client/queries.test.ts
+++ /dev/null
@@ -1,52 +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 {
-  SearchParamsMock,
-  inspectSearchParams,
-} from '../../../public/utils/testHelpers';
-import { getClientMetrics } from './get_client_metrics';
-import { getPageViewTrends } from './get_page_view_trends';
-import { getPageLoadDistribution } from './get_page_load_distribution';
-
-describe('rum client dashboard queries', () => {
-  let mock: SearchParamsMock;
-
-  afterEach(() => {
-    mock.teardown();
-  });
-
-  it('fetches client metrics', async () => {
-    mock = await inspectSearchParams((setup) =>
-      getClientMetrics({
-        setup,
-      })
-    );
-
-    expect(mock.params).toMatchSnapshot();
-  });
-
-  it('fetches page view trends', async () => {
-    mock = await inspectSearchParams((setup) =>
-      getPageViewTrends({
-        setup,
-      })
-    );
-
-    expect(mock.params).toMatchSnapshot();
-  });
-
-  it('fetches page load distribution', async () => {
-    mock = await inspectSearchParams((setup) =>
-      getPageLoadDistribution({
-        setup,
-        minPercentile: '0',
-        maxPercentile: '99',
-      })
-    );
-    expect(mock.params).toMatchSnapshot();
-  });
-});
diff --git a/x-pack/plugins/apm/server/lib/service_map/get_service_map_service_node_info.ts b/x-pack/plugins/apm/server/lib/service_map/get_service_map_service_node_info.ts
index e521efa687388..d069e93397611 100644
--- a/x-pack/plugins/apm/server/lib/service_map/get_service_map_service_node_info.ts
+++ b/x-pack/plugins/apm/server/lib/service_map/get_service_map_service_node_info.ts
@@ -6,7 +6,7 @@
 
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
 import { ESFilter } from '../../../typings/elasticsearch';
-import { rangeFilter } from '../../../common/utils/range_filter';
+import { rangeFilter } from '../helpers/range_filter';
 import {
   PROCESSOR_EVENT,
   SERVICE_ENVIRONMENT,
diff --git a/x-pack/plugins/apm/server/lib/service_map/get_trace_sample_ids.ts b/x-pack/plugins/apm/server/lib/service_map/get_trace_sample_ids.ts
index 11c3a00f32980..6eba84f2205a1 100644
--- a/x-pack/plugins/apm/server/lib/service_map/get_trace_sample_ids.ts
+++ b/x-pack/plugins/apm/server/lib/service_map/get_trace_sample_ids.ts
@@ -5,7 +5,7 @@
  */
 import { uniq, take, sortBy } from 'lodash';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
-import { rangeFilter } from '../../../common/utils/range_filter';
+import { rangeFilter } from '../helpers/range_filter';
 import { ESFilter } from '../../../typings/elasticsearch';
 import {
   PROCESSOR_EVENT,
diff --git a/x-pack/plugins/apm/server/lib/services/annotations/get_derived_service_annotations.ts b/x-pack/plugins/apm/server/lib/services/annotations/get_derived_service_annotations.ts
index 6da5d195cf194..9829c5cb25182 100644
--- a/x-pack/plugins/apm/server/lib/services/annotations/get_derived_service_annotations.ts
+++ b/x-pack/plugins/apm/server/lib/services/annotations/get_derived_service_annotations.ts
@@ -7,7 +7,7 @@ import { isNumber } from 'lodash';
 import { Annotation, AnnotationType } from '../../../../common/annotations';
 import { SetupTimeRange, Setup } from '../../helpers/setup_request';
 import { ESFilter } from '../../../../typings/elasticsearch';
-import { rangeFilter } from '../../../../common/utils/range_filter';
+import { rangeFilter } from '../../helpers/range_filter';
 import {
   PROCESSOR_EVENT,
   SERVICE_NAME,
diff --git a/x-pack/plugins/apm/server/lib/services/get_service_agent_name.ts b/x-pack/plugins/apm/server/lib/services/get_service_agent_name.ts
index 8d75d746c7fca..0b016828d5f00 100644
--- a/x-pack/plugins/apm/server/lib/services/get_service_agent_name.ts
+++ b/x-pack/plugins/apm/server/lib/services/get_service_agent_name.ts
@@ -8,7 +8,7 @@ import {
   AGENT_NAME,
   SERVICE_NAME,
 } from '../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../../../common/utils/range_filter';
+import { rangeFilter } from '../helpers/range_filter';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
 
 export async function getServiceAgentName(
diff --git a/x-pack/plugins/apm/server/lib/services/get_service_transaction_types.ts b/x-pack/plugins/apm/server/lib/services/get_service_transaction_types.ts
index d88be4055dc21..963dea4d8322c 100644
--- a/x-pack/plugins/apm/server/lib/services/get_service_transaction_types.ts
+++ b/x-pack/plugins/apm/server/lib/services/get_service_transaction_types.ts
@@ -8,7 +8,7 @@ import {
   SERVICE_NAME,
   TRANSACTION_TYPE,
 } from '../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../../../common/utils/range_filter';
+import { rangeFilter } from '../helpers/range_filter';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
 
 export async function getServiceTransactionTypes(
diff --git a/x-pack/plugins/apm/server/lib/traces/get_trace_items.ts b/x-pack/plugins/apm/server/lib/traces/get_trace_items.ts
index f9374558dfeeb..e96b323958fd7 100644
--- a/x-pack/plugins/apm/server/lib/traces/get_trace_items.ts
+++ b/x-pack/plugins/apm/server/lib/traces/get_trace_items.ts
@@ -16,7 +16,7 @@ import {
 import { Span } from '../../../typings/es_schemas/ui/span';
 import { Transaction } from '../../../typings/es_schemas/ui/transaction';
 import { APMError } from '../../../typings/es_schemas/ui/apm_error';
-import { rangeFilter } from '../../../common/utils/range_filter';
+import { rangeFilter } from '../helpers/range_filter';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
 import { PromiseValueType } from '../../../typings/common';
 
diff --git a/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_browser/fetcher.ts b/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_browser/fetcher.ts
index e3d688b694380..90dd41cb9b0c8 100644
--- a/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_browser/fetcher.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_browser/fetcher.ts
@@ -13,7 +13,7 @@ import {
   USER_AGENT_NAME,
   TRANSACTION_DURATION,
 } from '../../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../../../../common/utils/range_filter';
+import { rangeFilter } from '../../helpers/range_filter';
 import { getBucketSize } from '../../helpers/get_bucket_size';
 import { Options } from '.';
 import { TRANSACTION_PAGE_LOAD } from '../../../../common/transaction_types';
diff --git a/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_country/index.ts b/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_country/index.ts
index ea6213f64ee36..cc23055e34672 100644
--- a/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_country/index.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_country/index.ts
@@ -17,7 +17,7 @@ import {
   SetupTimeRange,
   SetupUIFilters,
 } from '../../helpers/setup_request';
-import { rangeFilter } from '../../../../common/utils/range_filter';
+import { rangeFilter } from '../../helpers/range_filter';
 import { TRANSACTION_PAGE_LOAD } from '../../../../common/transaction_types';
 
 export async function getTransactionAvgDurationByCountry({
diff --git a/x-pack/plugins/apm/server/lib/transactions/breakdown/index.ts b/x-pack/plugins/apm/server/lib/transactions/breakdown/index.ts
index 5af8b9f78cec1..713423f8953d5 100644
--- a/x-pack/plugins/apm/server/lib/transactions/breakdown/index.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/breakdown/index.ts
@@ -20,7 +20,7 @@ import {
   SetupTimeRange,
   SetupUIFilters,
 } from '../../helpers/setup_request';
-import { rangeFilter } from '../../../../common/utils/range_filter';
+import { rangeFilter } from '../../helpers/range_filter';
 import { getMetricsDateHistogramParams } from '../../helpers/metrics';
 import { MAX_KPIS } from './constants';
 import { getVizColorForIndex } from '../../../../common/viz_colors';
diff --git a/x-pack/plugins/apm/server/lib/transactions/charts/get_timeseries_data/fetcher.ts b/x-pack/plugins/apm/server/lib/transactions/charts/get_timeseries_data/fetcher.ts
index 8e19af926ce02..71c40010a2a3f 100644
--- a/x-pack/plugins/apm/server/lib/transactions/charts/get_timeseries_data/fetcher.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/charts/get_timeseries_data/fetcher.ts
@@ -15,7 +15,7 @@ import {
 } from '../../../../../common/elasticsearch_fieldnames';
 import { PromiseReturnType } from '../../../../../../observability/typings/common';
 import { getBucketSize } from '../../../helpers/get_bucket_size';
-import { rangeFilter } from '../../../../../common/utils/range_filter';
+import { rangeFilter } from '../../../helpers/range_filter';
 import {
   Setup,
   SetupTimeRange,
diff --git a/x-pack/plugins/apm/server/lib/transactions/distribution/get_buckets/fetcher.ts b/x-pack/plugins/apm/server/lib/transactions/distribution/get_buckets/fetcher.ts
index 3f8bf635712be..920552d1c1aeb 100644
--- a/x-pack/plugins/apm/server/lib/transactions/distribution/get_buckets/fetcher.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/distribution/get_buckets/fetcher.ts
@@ -15,7 +15,7 @@ import {
   TRANSACTION_SAMPLED,
   TRANSACTION_TYPE,
 } from '../../../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../../../../../common/utils/range_filter';
+import { rangeFilter } from '../../../helpers/range_filter';
 import {
   Setup,
   SetupTimeRange,
diff --git a/x-pack/plugins/apm/server/lib/transactions/get_transaction/index.ts b/x-pack/plugins/apm/server/lib/transactions/get_transaction/index.ts
index a7de93a3bf650..60dc16b6a546c 100644
--- a/x-pack/plugins/apm/server/lib/transactions/get_transaction/index.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/get_transaction/index.ts
@@ -10,7 +10,7 @@ import {
   TRANSACTION_ID,
 } from '../../../../common/elasticsearch_fieldnames';
 import { Transaction } from '../../../../typings/es_schemas/ui/transaction';
-import { rangeFilter } from '../../../../common/utils/range_filter';
+import { rangeFilter } from '../../helpers/range_filter';
 import {
   Setup,
   SetupTimeRange,
diff --git a/x-pack/plugins/apm/server/lib/ui_filters/get_environments.ts b/x-pack/plugins/apm/server/lib/ui_filters/get_environments.ts
index 3fca30634be6a..ccbe7a19d2f82 100644
--- a/x-pack/plugins/apm/server/lib/ui_filters/get_environments.ts
+++ b/x-pack/plugins/apm/server/lib/ui_filters/get_environments.ts
@@ -9,7 +9,7 @@ import {
   SERVICE_ENVIRONMENT,
   SERVICE_NAME,
 } from '../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../../../common/utils/range_filter';
+import { rangeFilter } from '../helpers/range_filter';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
 import { ENVIRONMENT_NOT_DEFINED } from '../../../common/environment_filter_values';
 import { ESFilter } from '../../../typings/elasticsearch';
diff --git a/x-pack/plugins/apm/server/lib/ui_filters/local_ui_filters/config.ts b/x-pack/plugins/apm/server/lib/ui_filters/local_ui_filters/config.ts
index 25a559cb07a3d..8f35664c2599c 100644
--- a/x-pack/plugins/apm/server/lib/ui_filters/local_ui_filters/config.ts
+++ b/x-pack/plugins/apm/server/lib/ui_filters/local_ui_filters/config.ts
@@ -11,11 +11,6 @@ import {
   HOST_NAME,
   TRANSACTION_RESULT,
   SERVICE_VERSION,
-  TRANSACTION_URL,
-  USER_AGENT_NAME,
-  USER_AGENT_DEVICE,
-  CLIENT_GEO,
-  USER_AGENT_OS,
 } from '../../../../common/elasticsearch_fieldnames';
 
 const filtersByName = {
@@ -55,36 +50,6 @@ const filtersByName = {
     }),
     fieldName: SERVICE_VERSION,
   },
-  transactionUrl: {
-    title: i18n.translate('xpack.apm.localFilters.titles.transactionUrl', {
-      defaultMessage: 'Url',
-    }),
-    fieldName: TRANSACTION_URL,
-  },
-  browser: {
-    title: i18n.translate('xpack.apm.localFilters.titles.browser', {
-      defaultMessage: 'Browser',
-    }),
-    fieldName: USER_AGENT_NAME,
-  },
-  device: {
-    title: i18n.translate('xpack.apm.localFilters.titles.device', {
-      defaultMessage: 'Device',
-    }),
-    fieldName: USER_AGENT_DEVICE,
-  },
-  location: {
-    title: i18n.translate('xpack.apm.localFilters.titles.location', {
-      defaultMessage: 'Location',
-    }),
-    fieldName: CLIENT_GEO,
-  },
-  os: {
-    title: i18n.translate('xpack.apm.localFilters.titles.os', {
-      defaultMessage: 'OS',
-    }),
-    fieldName: USER_AGENT_OS,
-  },
 };
 
 export type LocalUIFilterName = keyof typeof filtersByName;
diff --git a/x-pack/plugins/apm/server/routes/create_apm_api.ts b/x-pack/plugins/apm/server/routes/create_apm_api.ts
index a34690aff43b4..bdfb49fa30828 100644
--- a/x-pack/plugins/apm/server/routes/create_apm_api.ts
+++ b/x-pack/plugins/apm/server/routes/create_apm_api.ts
@@ -59,7 +59,6 @@ import {
   transactionsLocalFiltersRoute,
   serviceNodesLocalFiltersRoute,
   uiFiltersEnvironmentsRoute,
-  rumOverviewLocalFiltersRoute,
 } from './ui_filters';
 import { createApi } from './create_api';
 import { serviceMapRoute, serviceMapServiceNodeRoute } from './service_map';
@@ -71,11 +70,6 @@ import {
   listCustomLinksRoute,
   customLinkTransactionRoute,
 } from './settings/custom_link';
-import {
-  rumClientMetricsRoute,
-  rumPageViewsTrendRoute,
-  rumPageLoadDistributionRoute,
-} from './rum_client';
 
 const createApmApi = () => {
   const api = createApi()
@@ -154,13 +148,7 @@ const createApmApi = () => {
     .add(updateCustomLinkRoute)
     .add(deleteCustomLinkRoute)
     .add(listCustomLinksRoute)
-    .add(customLinkTransactionRoute)
-
-    // Rum Overview
-    .add(rumOverviewLocalFiltersRoute)
-    .add(rumPageViewsTrendRoute)
-    .add(rumPageLoadDistributionRoute)
-    .add(rumClientMetricsRoute);
+    .add(customLinkTransactionRoute);
 
   return api;
 };
diff --git a/x-pack/plugins/apm/server/routes/rum_client.ts b/x-pack/plugins/apm/server/routes/rum_client.ts
deleted file mode 100644
index 9b5f6529b1783..0000000000000
--- a/x-pack/plugins/apm/server/routes/rum_client.ts
+++ /dev/null
@@ -1,57 +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 * as t from 'io-ts';
-import { createRoute } from './create_route';
-import { setupRequest } from '../lib/helpers/setup_request';
-import { getClientMetrics } from '../lib/rum_client/get_client_metrics';
-import { rangeRt, uiFiltersRt } from './default_api_types';
-import { getPageViewTrends } from '../lib/rum_client/get_page_view_trends';
-import { getPageLoadDistribution } from '../lib/rum_client/get_page_load_distribution';
-
-export const percentileRangeRt = t.partial({
-  minPercentile: t.string,
-  maxPercentile: t.string,
-});
-
-export const rumClientMetricsRoute = createRoute(() => ({
-  path: '/api/apm/rum/client-metrics',
-  params: {
-    query: t.intersection([uiFiltersRt, rangeRt]),
-  },
-  handler: async ({ context, request }) => {
-    const setup = await setupRequest(context, request);
-
-    return getClientMetrics({ setup });
-  },
-}));
-
-export const rumPageLoadDistributionRoute = createRoute(() => ({
-  path: '/api/apm/rum-client/page-load-distribution',
-  params: {
-    query: t.intersection([uiFiltersRt, rangeRt, percentileRangeRt]),
-  },
-  handler: async ({ context, request }) => {
-    const setup = await setupRequest(context, request);
-
-    const {
-      query: { minPercentile, maxPercentile },
-    } = context.params;
-
-    return getPageLoadDistribution({ setup, minPercentile, maxPercentile });
-  },
-}));
-
-export const rumPageViewsTrendRoute = createRoute(() => ({
-  path: '/api/apm/rum-client/page-view-trends',
-  params: {
-    query: t.intersection([uiFiltersRt, rangeRt]),
-  },
-  handler: async ({ context, request }) => {
-    const setup = await setupRequest(context, request);
-    return getPageViewTrends({ setup });
-  },
-}));
diff --git a/x-pack/plugins/apm/server/routes/ui_filters.ts b/x-pack/plugins/apm/server/routes/ui_filters.ts
index 280645d4de8d0..8f4ef94b86ac5 100644
--- a/x-pack/plugins/apm/server/routes/ui_filters.ts
+++ b/x-pack/plugins/apm/server/routes/ui_filters.ts
@@ -29,7 +29,6 @@ import { createRoute } from './create_route';
 import { uiFiltersRt, rangeRt } from './default_api_types';
 import { jsonRt } from '../../common/runtime_types/json_rt';
 import { getServiceNodesProjection } from '../../common/projections/service_nodes';
-import { getRumOverviewProjection } from '../../common/projections/rum_overview';
 
 export const uiFiltersEnvironmentsRoute = createRoute(() => ({
   path: '/api/apm/ui_filters/environments',
@@ -222,16 +221,6 @@ export const serviceNodesLocalFiltersRoute = createLocalFiltersRoute({
   }),
 });
 
-export const rumOverviewLocalFiltersRoute = createLocalFiltersRoute({
-  path: '/api/apm/ui_filters/local_filters/rumOverview',
-  getProjection: ({ setup }) => {
-    return getRumOverviewProjection({
-      setup,
-    });
-  },
-  queryRt: t.type({}),
-});
-
 type BaseQueryType = typeof localUiBaseQueryRt;
 
 type GetProjection<
diff --git a/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts b/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts
index 6ee26caa4ef7c..0739e8e6120bf 100644
--- a/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts
+++ b/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts
@@ -137,15 +137,6 @@ export interface AggregationOptionsByType {
     >;
     keyed?: boolean;
   };
-  auto_date_histogram: {
-    field: string;
-    buckets: number;
-  };
-  percentile_ranks: {
-    field: string;
-    values: string[];
-    keyed?: boolean;
-  };
 }
 
 type AggregationType = keyof AggregationOptionsByType;
@@ -310,23 +301,6 @@ interface AggregationResponsePart<
       ? Record<string, DateRangeBucket>
       : { buckets: DateRangeBucket[] };
   };
-  auto_date_histogram: {
-    buckets: Array<
-      {
-        doc_count: number;
-        key: number;
-        key_as_string: string;
-      } & BucketSubAggregationResponse<
-        TAggregationOptionsMap['aggs'],
-        TDocument
-      >
-    >;
-    interval: string;
-  };
-
-  percentile_ranks: {
-    values: Record<string, number> | Array<{ key: number; value: number }>;
-  };
 }
 
 // Type for debugging purposes. If you see an error in AggregationResponseMap
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index d119ddb5a1a1f..37cdbf5c0d8a9 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -4229,6 +4229,7 @@
     "xpack.apm.jvmsTable.noJvmsLabel": "JVM が見つかりませんでした",
     "xpack.apm.jvmsTable.nonHeapMemoryColumnLabel": "非ヒープ領域の平均",
     "xpack.apm.jvmsTable.threadCountColumnLabel": "最大スレッド数",
+    "xpack.apm.kueryBar.disabledPlaceholder": "サービスマップの検索は利用できません",
     "xpack.apm.kueryBar.placeholder": "検索 {event, select,\n            transaction {トランザクション}\n            metric {メトリック}\n            error {エラー}\n             other {その他}\n          } (E.g. {queryExample})",
     "xpack.apm.license.betaBadge": "ベータ",
     "xpack.apm.license.betaTooltipMessage": "現在、この機能はベータです。不具合を見つけた場合やご意見がある場合、サポートに問い合わせるか、またはディスカッションフォーラムにご報告ください。",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 240baa3fe7744..2dfa0d40b9a8a 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -4232,6 +4232,7 @@
     "xpack.apm.jvmsTable.noJvmsLabel": "未找到任何 JVM",
     "xpack.apm.jvmsTable.nonHeapMemoryColumnLabel": "非堆内存平均值",
     "xpack.apm.jvmsTable.threadCountColumnLabel": "线程计数最大值",
+    "xpack.apm.kueryBar.disabledPlaceholder": "搜索不适用于服务地图",
     "xpack.apm.kueryBar.placeholder": "搜索{event, select,\n            transaction {事务}\n            metric {指标}\n            error {错误}\n            other {事务、错误和指标}\n          }（例如 {queryExample}）",
     "xpack.apm.license.betaBadge": "公测版",
     "xpack.apm.license.betaTooltipMessage": "此功能当前为公测版。如果遇到任何错误或有任何反馈，请报告问题或访问我们的论坛。",

From acdae1595d1836c6cffe2de393a705a4a3d8bc1b Mon Sep 17 00:00:00 2001
From: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Date: Thu, 18 Jun 2020 12:15:13 -0400
Subject: [PATCH 29/63] =?UTF-8?q?[Ingest=20Manager]=20Fleet=20require=20en?=
 =?UTF-8?q?crypted=20saved=20object=20encryption=20key=20=E2=80=A6=20(#694?=
 =?UTF-8?q?08)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/types/rest_spec/fleet_setup.ts     |  7 ++++-
 .../sections/fleet/setup_page/index.tsx       |  7 +++--
 .../plugins/ingest_manager/server/plugin.ts   | 30 ++++++++++++++-----
 .../server/routes/setup/handlers.ts           |  6 ++++
 .../server/services/agents/acks.test.ts       |  2 +-
 .../server/services/app_context.ts            | 17 +++++++++--
 6 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/ingest_manager/common/types/rest_spec/fleet_setup.ts b/x-pack/plugins/ingest_manager/common/types/rest_spec/fleet_setup.ts
index ae4cb4e3fce49..50f275bd59137 100644
--- a/x-pack/plugins/ingest_manager/common/types/rest_spec/fleet_setup.ts
+++ b/x-pack/plugins/ingest_manager/common/types/rest_spec/fleet_setup.ts
@@ -10,5 +10,10 @@ export interface CreateFleetSetupResponse {
 
 export interface GetFleetStatusResponse {
   isReady: boolean;
-  missing_requirements: Array<'tls_required' | 'api_keys' | 'fleet_admin_user'>;
+  missing_requirements: Array<
+    | 'tls_required'
+    | 'api_keys'
+    | 'fleet_admin_user'
+    | 'encrypted_saved_object_encryption_key_required'
+  >;
 }
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/setup_page/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/setup_page/index.tsx
index ffab5866f3b6f..e9c9ce0c513d2 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/setup_page/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/setup_page/index.tsx
@@ -39,7 +39,9 @@ export const SetupPage: React.FunctionComponent<{
   };
 
   const content =
-    missingRequirements.includes('tls_required') || missingRequirements.includes('api_keys') ? (
+    missingRequirements.includes('tls_required') ||
+    missingRequirements.includes('api_keys') ||
+    missingRequirements.includes('encrypted_saved_object_encryption_key_required') ? (
       <>
         <EuiSpacer size="m" />
         <EuiIcon type="lock" color="subdued" size="xl" />
@@ -53,12 +55,13 @@ export const SetupPage: React.FunctionComponent<{
           </h2>
         </EuiTitle>
         <EuiSpacer size="xl" />
-        <EuiText color="subdued">
+        <EuiText color="subdued" textAlign={'left'}>
           <FormattedMessage
             id="xpack.ingestManager.setupPage.missingRequirementsDescription"
             defaultMessage="To use Fleet, you must enable the following features:
           {space}- Enable Elasticsearch API keys.
           {space}- Enable TLS to secure the communication between Agents and Kibana.
+          {space}- Set the encryption key for encrypted saved objects.
           "
             values={{
               space: <EuiSpacer size="m" />,
diff --git a/x-pack/plugins/ingest_manager/server/plugin.ts b/x-pack/plugins/ingest_manager/server/plugin.ts
index cd44b61974b03..0d53092a0a8ff 100644
--- a/x-pack/plugins/ingest_manager/server/plugin.ts
+++ b/x-pack/plugins/ingest_manager/server/plugin.ts
@@ -67,7 +67,8 @@ export interface IngestManagerSetupDeps {
 export type IngestManagerStartDeps = object;
 
 export interface IngestManagerAppContext {
-  encryptedSavedObjects: EncryptedSavedObjectsPluginStart;
+  encryptedSavedObjectsStart: EncryptedSavedObjectsPluginStart;
+  encryptedSavedObjectsSetup?: EncryptedSavedObjectsPluginSetup;
   security?: SecurityPluginSetup;
   config$?: Observable<IngestManagerConfigType>;
   savedObjects: SavedObjectsServiceStart;
@@ -115,6 +116,7 @@ export class IngestManagerPlugin
   private isProductionMode: boolean;
   private kibanaVersion: string;
   private httpSetup: HttpServiceSetup | undefined;
+  private encryptedSavedObjectsSetup: EncryptedSavedObjectsPluginSetup | undefined;
 
   constructor(private readonly initializerContext: PluginInitializerContext) {
     this.config$ = this.initializerContext.config.create<IngestManagerConfigType>();
@@ -129,6 +131,7 @@ export class IngestManagerPlugin
     if (deps.security) {
       this.security = deps.security;
     }
+    this.encryptedSavedObjectsSetup = deps.encryptedSavedObjects;
     this.cloud = deps.cloud;
 
     registerSavedObjects(core.savedObjects);
@@ -187,12 +190,22 @@ export class IngestManagerPlugin
       }
 
       if (config.fleet.enabled) {
-        registerAgentRoutes(router);
-        registerEnrollmentApiKeyRoutes(router);
-        registerInstallScriptRoutes({
-          router,
-          basePath: core.http.basePath,
-        });
+        const isESOUsingEphemeralEncryptionKey =
+          deps.encryptedSavedObjects.usingEphemeralEncryptionKey;
+        if (isESOUsingEphemeralEncryptionKey) {
+          if (this.logger) {
+            this.logger.warn(
+              'Fleet APIs are disabled due to the Encrypted Saved Objects plugin using an ephemeral encryption key. Please set xpack.encryptedSavedObjects.encryptionKey in kibana.yml.'
+            );
+          }
+        } else {
+          registerAgentRoutes(router);
+          registerEnrollmentApiKeyRoutes(router);
+          registerInstallScriptRoutes({
+            router,
+            basePath: core.http.basePath,
+          });
+        }
       }
     }
   }
@@ -204,7 +217,8 @@ export class IngestManagerPlugin
     }
   ) {
     appContextService.start({
-      encryptedSavedObjects: plugins.encryptedSavedObjects,
+      encryptedSavedObjectsStart: plugins.encryptedSavedObjects,
+      encryptedSavedObjectsSetup: this.encryptedSavedObjectsSetup,
       security: this.security,
       config$: this.config$,
       savedObjects: core.savedObjects,
diff --git a/x-pack/plugins/ingest_manager/server/routes/setup/handlers.ts b/x-pack/plugins/ingest_manager/server/routes/setup/handlers.ts
index 30eb6c0ae8caa..9808343417390 100644
--- a/x-pack/plugins/ingest_manager/server/routes/setup/handlers.ts
+++ b/x-pack/plugins/ingest_manager/server/routes/setup/handlers.ts
@@ -20,6 +20,8 @@ export const getFleetStatusHandler: RequestHandler = async (context, request, re
     const isProductionMode = appContextService.getIsProductionMode();
     const isCloud = appContextService.getCloud()?.isCloudEnabled ?? false;
     const isTLSCheckDisabled = appContextService.getConfig()?.fleet?.tlsCheckDisabled ?? false;
+    const isUsingEphemeralEncryptionKey = appContextService.getEncryptedSavedObjectsSetup()
+      .usingEphemeralEncryptionKey;
 
     const missingRequirements: GetFleetStatusResponse['missing_requirements'] = [];
     if (!isAdminUserSetup) {
@@ -32,6 +34,10 @@ export const getFleetStatusHandler: RequestHandler = async (context, request, re
       missingRequirements.push('tls_required');
     }
 
+    if (isUsingEphemeralEncryptionKey) {
+      missingRequirements.push('encrypted_saved_object_encryption_key_required');
+    }
+
     const body: GetFleetStatusResponse = {
       isReady: missingRequirements.length === 0,
       missing_requirements: missingRequirements,
diff --git a/x-pack/plugins/ingest_manager/server/services/agents/acks.test.ts b/x-pack/plugins/ingest_manager/server/services/agents/acks.test.ts
index 0d22529fdb031..efdcbdb5c36bb 100644
--- a/x-pack/plugins/ingest_manager/server/services/agents/acks.test.ts
+++ b/x-pack/plugins/ingest_manager/server/services/agents/acks.test.ts
@@ -24,7 +24,7 @@ describe('test agent acks services', () => {
     const mockSavedObjectsClient = savedObjectsClientMock.create();
     const mockStartEncryptedSOPlugin = encryptedSavedObjectsMock.createStart();
     appContextService.start(({
-      encryptedSavedObjects: mockStartEncryptedSOPlugin,
+      encryptedSavedObjectsStart: mockStartEncryptedSOPlugin,
     } as unknown) as IngestManagerAppContext);
 
     const [
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 9e6220b6958f1..81a16caa8ce9e 100644
--- a/x-pack/plugins/ingest_manager/server/services/app_context.ts
+++ b/x-pack/plugins/ingest_manager/server/services/app_context.ts
@@ -6,7 +6,10 @@
 import { BehaviorSubject, Observable } from 'rxjs';
 import { first } from 'rxjs/operators';
 import { SavedObjectsServiceStart, HttpServiceSetup, Logger } from 'src/core/server';
-import { EncryptedSavedObjectsClient } from '../../../encrypted_saved_objects/server';
+import {
+  EncryptedSavedObjectsClient,
+  EncryptedSavedObjectsPluginSetup,
+} from '../../../encrypted_saved_objects/server';
 import { SecurityPluginSetup } from '../../../security/server';
 import { IngestManagerConfigType } from '../../common';
 import { IngestManagerAppContext } from '../plugin';
@@ -14,6 +17,7 @@ import { CloudSetup } from '../../../cloud/server';
 
 class AppContextService {
   private encryptedSavedObjects: EncryptedSavedObjectsClient | undefined;
+  private encryptedSavedObjectsSetup: EncryptedSavedObjectsPluginSetup | undefined;
   private security: SecurityPluginSetup | undefined;
   private config$?: Observable<IngestManagerConfigType>;
   private configSubject$?: BehaviorSubject<IngestManagerConfigType>;
@@ -25,7 +29,8 @@ class AppContextService {
   private httpSetup?: HttpServiceSetup;
 
   public async start(appContext: IngestManagerAppContext) {
-    this.encryptedSavedObjects = appContext.encryptedSavedObjects?.getClient();
+    this.encryptedSavedObjects = appContext.encryptedSavedObjectsStart?.getClient();
+    this.encryptedSavedObjectsSetup = appContext.encryptedSavedObjectsSetup;
     this.security = appContext.security;
     this.savedObjects = appContext.savedObjects;
     this.isProductionMode = appContext.isProductionMode;
@@ -95,6 +100,14 @@ class AppContextService {
     return this.httpSetup;
   }
 
+  public getEncryptedSavedObjectsSetup() {
+    if (!this.encryptedSavedObjectsSetup) {
+      throw new Error('encryptedSavedObjectsSetup is not set');
+    }
+
+    return this.encryptedSavedObjectsSetup;
+  }
+
   public getKibanaVersion() {
     if (!this.kibanaVersion) {
       throw new Error('Kibana version is not set.');

From c58f4d54a1a87a71699ec824a819ad23eba61e21 Mon Sep 17 00:00:00 2001
From: Joel Griffith <joel.griffith@elastic.co>
Date: Thu, 18 Jun 2020 09:26:05 -0700
Subject: [PATCH 30/63] [rfc][skip-ci][reporting] Rendering API RFC (#64372)

* WIP working on reporting rfc round 2

* First draft is complete
---
 rfcs/text/0011_reporting_as_an_api.md | 284 ++++++++++++++++++++++++++
 1 file changed, 284 insertions(+)
 create mode 100644 rfcs/text/0011_reporting_as_an_api.md

diff --git a/rfcs/text/0011_reporting_as_an_api.md b/rfcs/text/0011_reporting_as_an_api.md
new file mode 100644
index 0000000000000..8975d51dbd909
--- /dev/null
+++ b/rfcs/text/0011_reporting_as_an_api.md
@@ -0,0 +1,284 @@
+- Start Date: 2020-04-23
+- RFC PR: (leave this empty)
+- Kibana Issue: (leave this empty)
+
+# Summary
+
+The reporting plugin is migrating to a purely REST API interface, deprecating page-level integrations such as Dashboard and Discover.
+
+# Basic example
+
+Currently, reporting does expose an API for Dashboard exports as seen below.
+
+```sh
+# Massively truncated URL
+curl -x POST http://localhost:5601/api/reporting/generate/printablePdf?jobParams=%28browserTimezone%3AAmerica%2FLos_Angeles%2Clayout...
+```
+
+Going forth, reporting would only offer a JSON-based REST API, deprecating older ad-hoc solutions:
+
+```sh
+curl -x POST http://localhost:5601/api/reporting/pdf
+{
+  “baseUrl”: “/my/kibana/page/route?foo=bar&reporting=true”,
+  "waitUntil": {
+    "event": “complete”,
+  },
+  “viewport”: {
+    “width”: 1920,
+    “height”: 1080,
+    "scale": 1
+  },
+  "mediaType": "screen"
+}
+```
+
+A simple JSON response is returned, with an identifier to query for status.
+
+```json
+{
+  "id": "123"
+}
+```
+
+Further information can be found via GET call with the job's ID:
+
+```sh
+curl http://localhost:5601/api/reporting/123/status
+```
+
+# Motivation
+
+The reporting functionality that currently exists in Kibana was originally purpose-built for the Discover, Dashboard and Canvas applications. Because of this, reportings underlying technologies and infrastructure are hard to improve upon and make generally available for pages across Kibana. Currently, the team has to:
+
+- Build and maintain our own Chromium binary for the 3 main operating systems we support.
+- Fix and help troubleshoot issues encountered by our users and their complex deployment topologies.
+- Ensure successful operation in smaller-sized cloud deployments.
+- Help other teams get their applications “reportable”.
+- Continue to adapt changes in Discover and Dashboard so that they can be reportable (WebGL for instance).
+
+In order to ensure the reporting works in a secure manner, we also maintain complex logic that ensures nothing goes wrong during report generation. These include:
+
+- Home-rolled security role checks.
+- A custom-built network firewall via puppeteer to ensure chromium can’t be hijacked for nefarious purposes.
+- Network request interception to apply authorization contexts.
+- Configuration checks for both Elasticsearch and Kibana, to ensure the user's configuration is valid and workable.
+- CSV formula injection checks, encodings, and other challenges.
+
+It's important that there be a barrier between *how* reporting works, as well as *how* an application in Kibana is rendered. As of today no such barrier exists.
+
+While we understand that many of these requirements are similar across teams, however, in order to better serve the application teams that depend on reporting the time has come to rethink reportings role inside of Kibana, and how we can scale it across our product suite.
+
+# Detailed design
+
+## REST API
+
+Though we plan to support additional functionality longer-term (for instance a client-api or support for scheduling), the initial product will solely be a REST API involving a 4 part life-cycle:
+
+1. Starting a new job.
+2. Querying a job's status.
+3. Downloading the job's results.
+4. Deleting a job
+
+Reporting will return a list of HTTP codes to indicate acceptance or rejection of any HTTP interaction:
+
+**Possible HTTP responses**
+
+`200`: Job is accepted and is queued for execution
+
+`204`: OK response, but no message returned (used in DELETE calls)
+
+`400`: There was a malformation of the request, and consumers should review the returned message
+
+`403`: The user is not allowed to create a job
+
+`404`: Job wasn't found
+
+`401`: The request isn't properly authorized
+
+### 1. Starting a new job
+
+The primary export type in this phase will be a PDF binary (retrieved in Step 3). Registering can be as complex as below:
+
+```sh
+curl -x POST http://kibana-host:kibana-port/api/reporting/pdf
+[{
+  “baseUrl”: “/my/kibana/page/route?page=1&reporting=true”,
+  "waitUntil": {
+    "event": “complete”,
+  },
+  “viewport”: {
+    “width”: 1920,
+    “height”: 1080,
+    "scale": 2
+  },
+  "mediaType": "screen",
+  "timeout": 30000,
+}, {
+  “baseUrl”: “/my/kibana/page/route?page=2&reporting=true”,
+  "waitUntil": {
+    "event": “complete”,
+  },
+  “viewport”: {
+    “width”: 1920,
+    “height”: 1080,
+    "scale": 2
+  },
+  "mediaType": "screen",
+  "timeout": 30000,
+}]
+```
+
+In the above example, a consumer posts an array of URLs to be exported. When doing so, the assumption here is that the pages relate to each other in some fashion (workpad's in Canvas, for instance), and thus can be optimized by using the page and browser objects. It should be noted that even though we're given a collection of pages to export that *they'll be rendered in series and not parallel*.
+
+`baseUrl: string`: The URL of the page you wish to export, relative to Kibana's default path. For instance, if canvas wanted to export a page at `http://localhost:5601/app/canvas#/workpad/workpad-e08b9bdb-ec14-4339-94c4-063bddfd610e/page/1`, the `baseUrl` would be `/app/canvas#/workpad/workpad-e08b9bdb-ec14-4339-94c4-063bddfd610e/page/1`. This is done to prevent our chromium process from being "hijacked" to navigate elsewhere. You're free to do whatever you'd like for the URL, including any query-string parameters or other variables in order to properly render you page for reporting. For instance, you'll notice the `reporting=true` param listed above.
+
+`waitUntil: { event: string; selector: string }`: An object, specifying a custom `DOM` event to "listen" for in our chromium process, or the presence of a DOM selector. Either options are valid, however we won't allow for both options to be set. For instance, if a page inserts a `<div class="loaded">` in its markup, then the appropriate payload would be:
+
+```json
+"waitUntil": {
+  "selector": "div.loaded",
+},
+```
+
+`viewport: { width: number; height: number; scale: number }`: Viewport will allow consumers the ability to make rigid dimensions of the browser, such that the formatting of their pages sized appropriately. Scale, in this context, refers roughly to pixel density if there's a need for a higher resolution. A page that needs high-resolution PDF, could set this by:
+
+```json
+“viewport”: {
+  “width”: 1920,
+  “height”: 1080,
+  "scale": 2
+},
+```
+
+`mediaType: "screen" | "print"`: It's often the case that pages would like to use print media-queries, and this allows for opting-in or out of that behavior. For example, if a page wishes to utilize its print media queries, a payload with:
+
+```json
+"mediaType": "print"
+```
+
+`timeout: number`: When present, this allows for consumers to override the default reporting timeout. This is useful if a job is known to take much longer to process, or supporting our users without requiring them to restart their Kibana servers for a simple configuration change. Value here is milliseconds.
+
+```json
+"timeout": 60000
+```
+
+**Full job creation example:**
+
+```curl
+curl -x POST http://localhost:5601/api/reporting/pdf
+[{
+  “baseUrl”: “/my/kibana/page/route?page=1&reporting=true”,
+  "waitUntil": {
+    "event": “complete”,
+  },
+  “viewport”: {
+    “width”: 1920,
+    “height”: 1080,
+    "scale": 2
+  },
+  "mediaType": "screen",
+  "timeout": 30000,
+}, {
+  “baseUrl”: “/my/kibana/page/route?page=2&reporting=true”,
+  "waitUntil": {
+    "event": “complete”,
+  },
+  “viewport”: {
+    “width”: 1920,
+    “height”: 1080,
+    "scale": 2
+  },
+  "mediaType": "screen",
+  "timeout": 30000,
+}]
+
+# Response (note the single ID of the response)
+# 200 Content-Type application/json
+{
+  "id": "123"
+}
+```
+
+### 2. Querying and altering a job's status.
+
+Once created, a user can simply issue simple GET call to see the status of the job.
+
+**Get a job's status:**
+
+```curl
+curl -x GET http://localhost:5601/api/reporting/123/status
+
+# Response
+# 200 Content-Type application/json
+# We might provide other meta-data here as well when required
+{
+  "status": "pending",
+  "elapsedTime": 12345
+}
+```
+
+Possible types for `status` here are: `pending`, `running`, `complete`, `complete-warnings`, `failed`, or `timedout`. We can add more detail here if needed, such as the current URL being operated or whatever other information is valuable to consumers.
+
+### 4. Deleting a job
+
+A DELETE call will remove the report. If a report is in pending/running state, this will attempt to terminate the running job. Once a report is complete, the call to delete will permanently (hard delete) remove the job's output in ElasticSearch.
+
+When successfully deleted, reporting will simply respond with a `204` HTTP code, indicating success.
+
+```curl
+curl -x DELETE http://localhost:5601/api/reporting/123
+
+# Response (no body, 204 indicates success)
+# 204 Content-Type text/plain;charset=UTF-8
+```
+
+# Drawbacks
+
+Due to the new nature of this RFC, there are definitely drawbacks to this approach short-term. These short-term drawbacks become miniscule longer-term, since the work being done here frees both reporting and downstream teams to operate in parallel.
+
+- Initial work to build this pipeline will freeze some current efforts (scheduled reports, etc).
+- Doesn't solve complex architectural issues experienced by our customers.
+- Requires work to migrate our existing apps (Canvas, dashboard, visualizations).
+- Doesn't offer any performance characteristics over our current implementation.
+
+Though there's some acute pain felt here shorter term, they pale in comparison to building custom ad-hoc solutions for each application inside of Kibana.
+
+# Alternatives
+
+Going through the process of developing this current RFC, we did entertain a few other strategies:
+
+## No changes in how we operate
+
+This strategy doesn't scale beyond the current two team members since we field many support issues that are application-specific, and not reporting specific. This keeps our trajectory where it currently is, short term, but hamstrings us longer term. Unfortunately, for teams to have the best experience with regards to reporting, they'll need to have ownership on the rendering aspects of their pages.
+
+## A new plugin
+
+We debated offering a new plugin, or having apps consume this type of service as a plugin, but ultimately it was too much overhead for the nature of what we're offering. More information on the prior RFC is here: https://github.com/elastic/kibana/pull/59084.
+
+## Each page builds its own pipeline
+
+This would allow teams to operate how they best see fit, but would come with a host of issues:
+
+- Each team would need to ramp up on how we handle chromium and all of its sharp edges.
+- Potential for many requests to be in flight at once, causing exhaustion of resources.
+- Mixed experience across different apps, and varying degrees of success.
+- No central management of a users general reports.
+
+# Adoption strategy
+
+After work on the service is complete in its initial phase, we'll begin to migrate the Dashboard app over to the new service. This will give a clear example of:
+
+- Moving a complex page over to this service.
+- Where the divisions of labor reside (who does what).
+- How to embed rendering-specific logic into your pages.
+
+Since reporting only exists on a few select pages, there won't be need for a massive migration effort. Instead, folks wanting to move over to the new rendering service can simply take a look at how Dashboard handles their exporting.
+
+In short, the adoption strategy is fairly minimal due to the lack of pages being reported on.
+
+# Unresolved questions
+
+- How to troubleshoot complex customer environments?
+- When do we do this work?
+- Nuances in the API, are we missing other critical information?

From 5e8d824a6447df397911b0aaa22142ebb266ed4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Loix?= <sabee77@gmail.com>
Date: Thu, 18 Jun 2020 18:28:12 +0200
Subject: [PATCH 31/63] [Index template] Refactor index template wizard
 (#69037)

Co-authored-by: Alison Goryachev <alisonmllr20@gmail.com>
---
 .../public/forms/form_wizard/README.md        |  45 ++
 .../public/forms/form_wizard/form_wizard.tsx  | 139 ++++++
 .../forms/form_wizard/form_wizard_context.tsx | 173 ++++++++
 .../forms/form_wizard/form_wizard_nav.tsx     | 105 +++++
 .../forms/form_wizard/form_wizard_step.tsx    |  39 ++
 .../public/forms/form_wizard/index.ts         |  32 ++
 .../es_ui_shared/public/forms/index.ts        |  22 +
 .../public/forms/multi_content/README.md      | 157 +++++++
 .../public/forms/multi_content/index.ts       |  29 ++
 .../multi_content/multi_content_context.tsx   |  79 ++++
 .../forms/multi_content/use_multi_content.ts  | 215 ++++++++++
 .../multi_content/with_multi_content.tsx      |  40 ++
 src/plugins/es_ui_shared/public/index.ts      |   8 +
 .../configuration_form/configuration_form.tsx |   2 +-
 .../fields/create_field/create_field.tsx      |   2 +-
 .../edit_field/edit_field_container.tsx       |   2 +-
 .../document_fields/fields_tree_editor.tsx    |  11 +-
 .../templates_form/templates_form.tsx         |   2 +-
 .../components/mappings_editor/index.ts       |   2 +
 .../index_settings_context.tsx                |   2 +-
 .../mappings_editor/lib/utils.test.ts         |  56 +--
 .../components/mappings_editor/lib/utils.ts   |  19 -
 .../mappings_editor/mappings_state.tsx        |  44 +-
 .../components/mappings_editor/reducer.ts     |  25 +-
 .../components/template_form/steps/index.ts   |  10 +-
 .../template_form/steps/step_aliases.tsx      | 206 ++++-----
 .../steps/step_aliases_container.tsx          |  16 +
 .../template_form/steps/step_logistics.tsx    | 183 ++++----
 .../steps/step_logistics_container.tsx        |  22 +
 .../template_form/steps/step_mappings.tsx     | 170 ++++----
 .../steps/step_mappings_container.tsx         |  22 +
 .../template_form/steps/step_review.tsx       | 401 +++++++++---------
 .../steps/step_review_container.tsx           |  26 ++
 .../template_form/steps/step_settings.tsx     | 192 ++++-----
 .../steps/step_settings_container.tsx         |  16 +
 .../template_form/steps/use_json_step.ts      |  48 +--
 .../template_form/template_form.tsx           | 381 +++++++----------
 .../template_form/template_steps.tsx          |  51 ---
 .../components/template_form/types.ts         |  24 --
 .../index_management/public/shared_imports.ts |   1 +
 .../translations/translations/ja-JP.json      |   3 -
 .../translations/translations/zh-CN.json      |   3 -
 42 files changed, 1988 insertions(+), 1037 deletions(-)
 create mode 100644 src/plugins/es_ui_shared/public/forms/form_wizard/README.md
 create mode 100644 src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard.tsx
 create mode 100644 src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_context.tsx
 create mode 100644 src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_nav.tsx
 create mode 100644 src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_step.tsx
 create mode 100644 src/plugins/es_ui_shared/public/forms/form_wizard/index.ts
 create mode 100644 src/plugins/es_ui_shared/public/forms/index.ts
 create mode 100644 src/plugins/es_ui_shared/public/forms/multi_content/README.md
 create mode 100644 src/plugins/es_ui_shared/public/forms/multi_content/index.ts
 create mode 100644 src/plugins/es_ui_shared/public/forms/multi_content/multi_content_context.tsx
 create mode 100644 src/plugins/es_ui_shared/public/forms/multi_content/use_multi_content.ts
 create mode 100644 src/plugins/es_ui_shared/public/forms/multi_content/with_multi_content.tsx
 create mode 100644 x-pack/plugins/index_management/public/application/components/template_form/steps/step_aliases_container.tsx
 create mode 100644 x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics_container.tsx
 create mode 100644 x-pack/plugins/index_management/public/application/components/template_form/steps/step_mappings_container.tsx
 create mode 100644 x-pack/plugins/index_management/public/application/components/template_form/steps/step_review_container.tsx
 create mode 100644 x-pack/plugins/index_management/public/application/components/template_form/steps/step_settings_container.tsx
 delete mode 100644 x-pack/plugins/index_management/public/application/components/template_form/template_steps.tsx
 delete mode 100644 x-pack/plugins/index_management/public/application/components/template_form/types.ts

diff --git a/src/plugins/es_ui_shared/public/forms/form_wizard/README.md b/src/plugins/es_ui_shared/public/forms/form_wizard/README.md
new file mode 100644
index 0000000000000..56c792b89049b
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/forms/form_wizard/README.md
@@ -0,0 +1,45 @@
+# FormWizard
+
+The `<FormWizard />` and `<FormWizardStep />` components lets us declare form wizard in a declarative way. It works hand in hand with the `MultiContent` explained above to make building form wizards a breeze. 😊 
+
+It takes care of enabling, disabling the `<EuiStepsHorizontal />` steps as well as the "Back" and "Next" button.
+
+Let's see it through an example
+
+```js
+const MyForm = () => {
+  return (
+    <FormWizard<MyMultiContent>
+      defaultValue={wizardDefaultValue} // The MultiContent default value as explained above
+      onSave={onSaveTemplate} // A handler that will receive the multi-content data
+      isEditing={isEditing} // A boolean that will indicate if all steps are already "completed" and thus valid or if we need to complete them in order
+      isSaving={isSaving} // A boolean to show a "Saving..." text on the button on the last step
+      apiError={apiError} // Any API error to display on top of wizard
+      texts={i18nTexts} // i18n translations for the nav button.
+    >
+      <FormWizarStep id="contentOne" lable="Label for the step">
+        <div>
+          Here you can put anything... but you probably want to put a Container from the
+          MultiContent example above.
+        </div>
+      </FormWizarStep>
+
+      <FormWizarStep id="contentTwo" lable="Label for the step" isRequired>
+        <div>
+          Here you can put anything... but you probably want to put a Container from the
+          MultiContent example above.
+        </div>
+      </FormWizarStep>
+
+      <FormWizarStep id="contentThree" lable="Label for the step">
+        <div>
+          Here you can put anything... but you probably want to put a Container from the
+          MultiContent example above.
+        </div>
+      </FormWizarStep>
+    </FormWizard>
+  );
+};
+```
+
+That's all we need to build a multi-step form wizard, making sure the data is cached when switching steps.
\ No newline at end of file
diff --git a/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard.tsx b/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard.tsx
new file mode 100644
index 0000000000000..cdb332e9e9130
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard.tsx
@@ -0,0 +1,139 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { EuiStepsHorizontal, EuiSpacer } from '@elastic/eui';
+
+import {
+  FormWizardProvider,
+  FormWizardConsumer,
+  Props as ProviderProps,
+} from './form_wizard_context';
+import { FormWizardNav, NavTexts } from './form_wizard_nav';
+
+interface Props<T extends object> extends ProviderProps<T> {
+  isSaving?: boolean;
+  apiError: JSX.Element | null;
+  texts?: Partial<NavTexts>;
+}
+
+export function FormWizard<T extends object = { [key: string]: any }>({
+  texts,
+  defaultActiveStep,
+  defaultValue,
+  apiError,
+  isEditing,
+  isSaving,
+  onSave,
+  onChange,
+  children,
+}: Props<T>) {
+  return (
+    <FormWizardProvider<T>
+      defaultValue={defaultValue}
+      isEditing={isEditing}
+      onSave={onSave}
+      onChange={onChange}
+      defaultActiveStep={defaultActiveStep}
+    >
+      <FormWizardConsumer>
+        {({ activeStepIndex, lastStep, steps, isCurrentStepValid, navigateToStep }) => {
+          const stepsRequiredArray = Object.values(steps).map(
+            (step) => Boolean(step.isRequired) && step.isComplete === false
+          );
+
+          const getIsStepDisabled = (stepIndex: number) => {
+            // Disable all steps when the current step is invalid
+            if (stepIndex !== activeStepIndex && isCurrentStepValid === false) {
+              return true;
+            }
+
+            let isDisabled = false;
+
+            if (stepIndex > activeStepIndex + 1) {
+              /**
+               * Rule explained:
+               * - all the previous steps are always enabled (we can go back anytime)
+               * - the next step is also always enabled (it acts as the "Next" button)
+               * - for the rest, the step is disabled if any of the previous step (_greater_ than the current
+               * active step), is marked as isRequired **AND** has not been completed.
+               */
+              isDisabled = stepsRequiredArray.reduce((acc, isRequired, i) => {
+                if (acc === true || i <= activeStepIndex || i >= stepIndex) {
+                  return acc;
+                }
+                return Boolean(isRequired);
+              }, false);
+            }
+
+            return isDisabled;
+          };
+
+          const euiSteps = Object.values(steps).map(({ index, label }) => {
+            return {
+              title: label,
+              isComplete: activeStepIndex > index,
+              isSelected: activeStepIndex === index,
+              disabled: getIsStepDisabled(index),
+              onClick: () => navigateToStep(index),
+            };
+          });
+
+          const onBack = () => {
+            const prevStep = activeStepIndex - 1;
+            navigateToStep(prevStep);
+          };
+
+          const onNext = () => {
+            const nextStep = activeStepIndex + 1;
+            navigateToStep(nextStep);
+          };
+
+          return (
+            <>
+              {/* Horizontal Steps indicator */}
+              <EuiStepsHorizontal steps={euiSteps} />
+
+              <EuiSpacer size="l" />
+
+              {/* Any possible API error when saving/updating */}
+              {apiError}
+
+              {/* Active step content */}
+              {children}
+
+              <EuiSpacer size="l" />
+
+              {/* Button navigation */}
+              <FormWizardNav
+                activeStepIndex={activeStepIndex}
+                lastStep={lastStep}
+                isStepValid={isCurrentStepValid}
+                isSaving={isSaving}
+                onBack={onBack}
+                onNext={onNext}
+                texts={texts}
+              />
+            </>
+          );
+        }}
+      </FormWizardConsumer>
+    </FormWizardProvider>
+  );
+}
diff --git a/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_context.tsx b/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_context.tsx
new file mode 100644
index 0000000000000..5667220881df2
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_context.tsx
@@ -0,0 +1,173 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState, createContext, useContext, useCallback } from 'react';
+
+import { WithMultiContent, useMultiContentContext, HookProps } from '../multi_content';
+
+export interface Props<T extends object> {
+  onSave: (data: T) => void | Promise<void>;
+  children: JSX.Element | JSX.Element[];
+  isEditing?: boolean;
+  defaultActiveStep?: number;
+  defaultValue?: HookProps<T>['defaultValue'];
+  onChange?: HookProps<T>['onChange'];
+}
+
+interface State {
+  activeStepIndex: number;
+  steps: Steps;
+}
+
+export interface Step {
+  id: string;
+  index: number;
+  label: string;
+  isRequired: boolean;
+  isComplete: boolean;
+}
+
+export interface Steps {
+  [stepId: string]: Step;
+}
+
+export interface Context<Id extends string = any> extends State {
+  activeStepId: Id;
+  lastStep: number;
+  isCurrentStepValid: boolean | undefined;
+  navigateToStep: (stepId: number | Id) => void;
+  addStep: (id: Id, label: string, isRequired?: boolean) => void;
+}
+
+const formWizardContext = createContext<Context>({} as Context);
+
+export const FormWizardProvider = WithMultiContent<Props<any>>(function FormWizardProvider<
+  T extends object = { [key: string]: any }
+>({ children, defaultActiveStep = 0, isEditing, onSave }: Props<T>) {
+  const { getData, validate, validation } = useMultiContentContext<T>();
+
+  const [state, setState] = useState<State>({
+    activeStepIndex: defaultActiveStep,
+    steps: {},
+  });
+
+  const activeStepId = state.steps[state.activeStepIndex]?.id;
+  const lastStep = Object.keys(state.steps).length - 1;
+  const isCurrentStepValid = validation.contents[activeStepId as keyof T];
+
+  const addStep = useCallback(
+    (id: string, label: string, isRequired = false) => {
+      setState((prev) => {
+        const index = Object.keys(prev.steps).length;
+
+        return {
+          ...prev,
+          steps: {
+            ...prev.steps,
+            [index]: { id, index, label, isRequired, isComplete: isEditing ?? false },
+          },
+        };
+      });
+    },
+    [isEditing]
+  );
+
+  /**
+   * Get the step index from a step id.
+   */
+  const getStepIndex = useCallback(
+    (stepId: number | string) => {
+      if (typeof stepId === 'number') {
+        return stepId;
+      }
+
+      // We provided a string stepId, we need to find the corresponding index
+      const targetStep: Step | undefined = Object.values(state.steps).find(
+        (_step) => _step.id === stepId
+      );
+      if (!targetStep) {
+        throw new Error(`Can't navigate to step "${stepId}" as there are no step with that ID.`);
+      }
+      return targetStep.index;
+    },
+    [state.steps]
+  );
+
+  const navigateToStep = useCallback(
+    async (stepId: number | string) => {
+      // Before navigating away we validate the active content in the DOM
+      const isValid = await validate();
+
+      // If step is not valid do not go any further
+      if (!isValid) {
+        return;
+      }
+
+      const nextStepIndex = getStepIndex(stepId);
+
+      if (nextStepIndex > lastStep) {
+        // We are on the last step, save the data and don't go any further
+        onSave(getData() as T);
+        return;
+      }
+
+      // Update the active step
+      setState((prev) => {
+        const currentStep = prev.steps[prev.activeStepIndex];
+
+        const nextState = {
+          ...prev,
+          activeStepIndex: nextStepIndex,
+        };
+
+        if (nextStepIndex > prev.activeStepIndex && !currentStep.isComplete) {
+          // Mark the current step as completed
+          nextState.steps[prev.activeStepIndex] = {
+            ...currentStep,
+            isComplete: true,
+          };
+        }
+
+        return nextState;
+      });
+    },
+    [getStepIndex, validate, onSave, getData]
+  );
+
+  const value: Context = {
+    ...state,
+    activeStepId,
+    lastStep,
+    isCurrentStepValid,
+    addStep,
+    navigateToStep,
+  };
+
+  return <formWizardContext.Provider value={value}>{children}</formWizardContext.Provider>;
+});
+
+export const FormWizardConsumer = formWizardContext.Consumer;
+
+export function useFormWizardContext<T extends string = any>() {
+  const ctx = useContext(formWizardContext);
+  if (ctx === undefined) {
+    throw new Error('useFormWizardContext() must be called within a <FormWizardProvider />');
+  }
+  return ctx as Context<T>;
+}
diff --git a/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_nav.tsx b/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_nav.tsx
new file mode 100644
index 0000000000000..3e0e9cf897b5d
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_nav.tsx
@@ -0,0 +1,105 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+interface Props {
+  activeStepIndex: number;
+  lastStep: number;
+  onBack: () => void;
+  onNext: () => void;
+  isSaving?: boolean;
+  isStepValid?: boolean;
+  texts?: Partial<NavTexts>;
+}
+
+export interface NavTexts {
+  back: string | JSX.Element;
+  next: string | JSX.Element;
+  save: string | JSX.Element;
+  saving: string | JSX.Element;
+}
+
+const DEFAULT_TEXTS = {
+  back: i18n.translate('esUi.formWizard.backButtonLabel', { defaultMessage: 'Back' }),
+  next: i18n.translate('esUi.formWizard.nextButtonLabel', { defaultMessage: 'Next' }),
+  save: i18n.translate('esUi.formWizard.saveButtonLabel', { defaultMessage: 'Save' }),
+  saving: i18n.translate('esUi.formWizard.savingButtonLabel', { defaultMessage: 'Saving...' }),
+};
+
+export const FormWizardNav = ({
+  activeStepIndex,
+  lastStep,
+  isStepValid,
+  isSaving,
+  onBack,
+  onNext,
+  texts,
+}: Props) => {
+  const isLastStep = activeStepIndex === lastStep;
+  const labels = {
+    ...DEFAULT_TEXTS,
+    ...texts,
+  };
+
+  const nextButtonLabel = isLastStep
+    ? Boolean(isSaving)
+      ? labels.saving
+      : labels.save
+    : labels.next;
+
+  return (
+    <EuiFlexGroup justifyContent="spaceBetween">
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup>
+          {/* Back button */}
+          {activeStepIndex > 0 ? (
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                iconType="arrowLeft"
+                onClick={onBack}
+                data-test-subj="backButton"
+                disabled={isStepValid === false}
+              >
+                {labels.back}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          ) : null}
+
+          {/* Next button */}
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              fill
+              iconType={isLastStep ? 'check' : 'arrowRight'}
+              onClick={onNext}
+              iconSide={isLastStep ? 'left' : 'right'}
+              disabled={isStepValid === false}
+              data-test-subj="nextButton"
+              isLoading={isSaving}
+            >
+              {nextButtonLabel}
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_step.tsx b/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_step.tsx
new file mode 100644
index 0000000000000..c073c188a6ad6
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_step.tsx
@@ -0,0 +1,39 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect } from 'react';
+
+import { useFormWizardContext } from './form_wizard_context';
+
+interface Props {
+  id: string;
+  label: string;
+  children: JSX.Element;
+  isRequired?: boolean;
+}
+
+export const FormWizardStep = ({ id, label, isRequired, children }: Props) => {
+  const { activeStepId, addStep } = useFormWizardContext();
+
+  useEffect(() => {
+    addStep(id, label, isRequired);
+  }, [id, label, isRequired, addStep]);
+
+  return activeStepId === id ? children : null;
+};
diff --git a/src/plugins/es_ui_shared/public/forms/form_wizard/index.ts b/src/plugins/es_ui_shared/public/forms/form_wizard/index.ts
new file mode 100644
index 0000000000000..b1cb11735a110
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/forms/form_wizard/index.ts
@@ -0,0 +1,32 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { FormWizard } from './form_wizard';
+
+export { FormWizardStep } from './form_wizard_step';
+
+export {
+  FormWizardProvider,
+  FormWizardConsumer,
+  useFormWizardContext,
+  Step,
+  Steps,
+} from './form_wizard_context';
+
+export { FormWizardNav, NavTexts } from './form_wizard_nav';
diff --git a/src/plugins/es_ui_shared/public/forms/index.ts b/src/plugins/es_ui_shared/public/forms/index.ts
new file mode 100644
index 0000000000000..96140c9b46185
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/forms/index.ts
@@ -0,0 +1,22 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './form_wizard';
+
+export * from './multi_content';
diff --git a/src/plugins/es_ui_shared/public/forms/multi_content/README.md b/src/plugins/es_ui_shared/public/forms/multi_content/README.md
new file mode 100644
index 0000000000000..08c37c20b5bf6
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/forms/multi_content/README.md
@@ -0,0 +1,157 @@
+# MultiContent
+
+## The problem
+
+Building resource creations/edition flows in the UI, that have multiple contents that need to be merged together at the end of the flow and at the same time keeping a reference of each content state, is not trivial. Indeed, when we switch tab or we go to the next step, the old step data needs to be saved somewhere.
+
+The first thing that comes to mind is: "Ok, I'll lift the state up" and make each step "content" a controlled component (when its value changes, it sends it to the global state and then it receives it back as prop). This works well up to a certain point. What happens if the internal state that the step content works with, is not the same as the outputted state?
+
+Something like this:
+
+```js
+// StepOne internal state, flat map of fields
+const internalState: {
+  fields: {
+    ate426jn: { name: 'hello', value: 'world', parent: 'rwtsdg3' },
+    rwtsdg3: { name: 'myObject', type: 'object' },
+  }
+}
+
+// Outputed data
+
+const output = {
+  stepOne: {
+    myObject: {
+      hello: 'world'
+    }
+  }
+}
+```
+
+We need some sort of serializer to go from the internal state to the output object. If we lift the state up this means that the global state needs to be aware of the intrinsic of the content, leaking implementation details.
+This also means that the content **can't be a reusable component** as it depends on an external state to do part of its work (think: the mappings editor).
+
+This is where `MultiContent` comes into play. It lets us declare `content` objects and automatically saves a snapshot of their content when the component unmounts (which occurs when switching a tab for example). If we navigate back to the tab, the tab content gets its `defaultValue` from that cache state.
+
+Let see it through a concrete example
+
+```js
+// my_comp_wrapper.tsx
+
+// Always good to have an interface for our contents
+interface MyMultiContent {
+  contentOne: { myField: string };
+  contentTwo: { anotherField: string };
+  contentThree: { yetAnotherField: boolean };
+}
+
+// Each content data will be a slice of the multi-content defaultValue
+const defaultValue: MyMultiContent = {
+  contentOne: {
+    myField: 'value',
+  },
+  contentTwo: {
+    anotherField: 'value',
+  },
+  contentThree: {
+    yetAnotherField: true,
+  },
+};
+```
+
+```js
+// my_comp.tsx
+
+/**
+ * We wrap our component with the HOC that will provide the <MultiContentProvider /> and let us use the "useMultiContentContext()" hook
+ * 
+ * MyComponent connects to the multi-content context and renders each step
+ * content without worrying about their internal state.
+ */
+const MyComponent = WithMultiContent(() => {
+  const { validation, getData, validate } = useMultiContentContext<MyMultiContent>();
+
+  const totalSteps = 3;
+  const [currentStep, setCurrentStep] = useState(0);
+
+  const renderContent = () => {
+    switch (currentStep) {
+      case 0:
+        return <ContentOneContainer />;
+      case 1:
+        return <ContentTwoContainer />;
+      case 2:
+        return <ContentThreeContainer />;
+    }
+  };
+
+  const onNext = () => {
+    // Validate the multi content
+    const isValid = await validate();
+
+    if (!isValid) {
+      return;
+    }
+
+    if (currentStep < totalSteps - 1) {
+      // Navigate to the next content
+      setCurrentStep((curentStep += 1));
+    } else {
+      // On last step we need to save so we read the multi-content data
+      console.log('About to save:', getData());
+    }
+  };
+
+  return (
+    <>
+      {renderContent()}
+
+      {/* Each content validity is accessible from the `validation.contents` object */}
+      <EuiButton onClick={onNext} disabled={validation.contents[currentStep] === false}>
+        Next
+      </EuiButton>
+    </>
+  );
+});
+```
+
+```js
+// content_one_container.tsx
+
+// From the good old days of Redux, it is a good practice to separate the connection to the multi-content
+// from the UI that is rendered.
+const ContentOneContainer = () => {
+
+  // Declare a new content and get its default Value + a handler to update the content in the multi-content
+  // This will update the "contentOne" slice of the multi-content.
+  const { defaultValue, updateContent } = useContent<MyMultiContent>('contentOne');
+
+  return <ContentOne defaultValue={defaultValue} onChange={updateContent} />
+};
+```
+
+```js
+// content_one.tsx
+
+const ContentOne = ({ defaultValue, onChange }) => {
+  // Use the defaultValue as a starting point for the internal state
+  const [internalStateValue, setInternalStateValue] = useState(defaultValue.myField);
+
+  useEffect(() => {
+    // Update the multi content state for this content
+    onChange({
+      isValid: true, // because in this example it is always valid
+      validate: async () => true,
+      getData: () => ({
+        myField: internalStateValue,
+      }),
+    });
+  }, [internalStateValue]);
+
+  return (
+    <input value={internalStateValue} onChange={(e) => setInternalStateValue(e.target.value)} />
+  );
+}
+```
+
+And just like that, `<ContentOne />` is a reusable component that gets a `defaultValue` object and an `onChange` handler to communicate any internal state changes. He is responsible to provide a `getData()` handler as part of the `onChange` that will do any necessary serialization and sanitization, and the outside world does not need to know about it.
\ No newline at end of file
diff --git a/src/plugins/es_ui_shared/public/forms/multi_content/index.ts b/src/plugins/es_ui_shared/public/forms/multi_content/index.ts
new file mode 100644
index 0000000000000..a7df0e386d173
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/forms/multi_content/index.ts
@@ -0,0 +1,29 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {
+  MultiContentProvider,
+  MultiContentConsumer,
+  useMultiContentContext,
+  useContent,
+} from './multi_content_context';
+
+export { useMultiContent, HookProps, Content, MultiContent } from './use_multi_content';
+
+export { WithMultiContent } from './with_multi_content';
diff --git a/src/plugins/es_ui_shared/public/forms/multi_content/multi_content_context.tsx b/src/plugins/es_ui_shared/public/forms/multi_content/multi_content_context.tsx
new file mode 100644
index 0000000000000..5fbe3d2bbbdd4
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/forms/multi_content/multi_content_context.tsx
@@ -0,0 +1,79 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useEffect, useCallback, createContext, useContext } from 'react';
+
+import { useMultiContent, HookProps, Content, MultiContent } from './use_multi_content';
+
+const multiContentContext = createContext<MultiContent<any>>({} as MultiContent<any>);
+
+interface Props<T extends object> extends HookProps<T> {
+  children: JSX.Element | JSX.Element[];
+}
+
+export function MultiContentProvider<T extends object = { [key: string]: any }>({
+  defaultValue,
+  onChange,
+  children,
+}: Props<T>) {
+  const multiContent = useMultiContent<T>({ defaultValue, onChange });
+
+  return (
+    <multiContentContext.Provider value={multiContent}>{children}</multiContentContext.Provider>
+  );
+}
+
+export const MultiContentConsumer = multiContentContext.Consumer;
+
+export function useMultiContentContext<T extends object = { [key: string]: any }>() {
+  const ctx = useContext(multiContentContext);
+  if (Object.keys(ctx).length === 0) {
+    throw new Error('useMultiContentContext must be used within a <MultiContentProvider />');
+  }
+  return ctx as MultiContent<T>;
+}
+
+/**
+ * Hook to declare a new content and get its defaultValue and a handler to update its content
+ *
+ * @param contentId The content id to be added to the "contents" map
+ */
+export function useContent<T extends object = { [key: string]: any }>(contentId: keyof T) {
+  const { updateContentAt, saveSnapshotAndRemoveContent, getData } = useMultiContentContext<T>();
+
+  const updateContent = useCallback(
+    (content: Content) => {
+      updateContentAt(contentId, content);
+    },
+    [contentId, updateContentAt]
+  );
+
+  useEffect(() => {
+    return () => {
+      // On unmount: save a snapshot of the data and remove content from our contents map
+      saveSnapshotAndRemoveContent(contentId);
+    };
+  }, [contentId, saveSnapshotAndRemoveContent]);
+
+  return {
+    defaultValue: getData()[contentId]!,
+    updateContent,
+    getData,
+  };
+}
diff --git a/src/plugins/es_ui_shared/public/forms/multi_content/use_multi_content.ts b/src/plugins/es_ui_shared/public/forms/multi_content/use_multi_content.ts
new file mode 100644
index 0000000000000..0a2c7bb651959
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/forms/multi_content/use_multi_content.ts
@@ -0,0 +1,215 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useState, useCallback, useRef } from 'react';
+
+export interface Content<T = any> {
+  isValid: boolean | undefined;
+  validate(): Promise<boolean>;
+  getData(): T;
+}
+
+type Contents<T> = {
+  [K in keyof T]: Content;
+};
+
+interface Validation<T extends object> {
+  isValid: boolean | undefined;
+  contents: {
+    [K in keyof T]: boolean | undefined;
+  };
+}
+
+export interface HookProps<T extends object> {
+  defaultValue?: T;
+  onChange?: (output: Content<T>) => void;
+}
+
+export interface MultiContent<T extends object> {
+  updateContentAt: (id: keyof T, content: Content) => void;
+  saveSnapshotAndRemoveContent: (id: keyof T) => void;
+  getData: () => T;
+  validate: () => Promise<boolean>;
+  validation: Validation<T>;
+}
+
+export function useMultiContent<T extends object>({
+  defaultValue,
+  onChange,
+}: HookProps<T>): MultiContent<T> {
+  /**
+   * Each content validity is kept in this state. When updating a content with "updateContentAt()", we
+   * update the state validity and trigger a re-render.
+   */
+  const [validation, setValidation] = useState<Validation<T>>({
+    isValid: true,
+    contents: {},
+  } as Validation<T>);
+
+  /**
+   * The updated data where a content current data is merged when it unmounts
+   */
+  const [stateData, setStateData] = useState<T>(defaultValue ?? ({} as T));
+
+  /**
+   * A map object of all the active content(s) present in the DOM. In a multi step
+   * form wizard, there is only 1 content at the time in the DOM, but in long vertical
+   * flow content, multiple content could be present.
+   * When a content unmounts it will remove itself from this map.
+   */
+  const contents = useRef<Contents<T>>({} as Contents<T>);
+
+  const updateContentDataAt = useCallback(function (updatedData: { [key in keyof T]?: any }) {
+    setStateData((prev) => ({
+      ...prev,
+      ...updatedData,
+    }));
+  }, []);
+
+  /**
+   * Read the multi content data.
+   */
+  const getData = useCallback((): T => {
+    /**
+     * If there is one or more active content(s) in the DOM, and it is valid,
+     * we read its data and merge it into our stateData before returning it.
+     */
+    const activeContentData: Partial<T> = {};
+
+    for (const [id, _content] of Object.entries(contents.current)) {
+      if (validation.contents[id as keyof T]) {
+        const contentData = (_content as Content).getData();
+
+        // Replace the getData() handler with the cached value
+        (_content as Content).getData = () => contentData;
+
+        activeContentData[id as keyof T] = contentData;
+      }
+    }
+
+    return {
+      ...stateData,
+      ...activeContentData,
+    };
+  }, [stateData, validation]);
+
+  const updateContentValidity = useCallback(
+    (updatedData: { [key in keyof T]?: boolean | undefined }): boolean | undefined => {
+      let allContentValidity: boolean | undefined;
+
+      setValidation((prev) => {
+        if (
+          Object.entries(updatedData).every(
+            ([contentId, isValid]) => prev.contents[contentId as keyof T] === isValid
+          )
+        ) {
+          // No change in validation, nothing to update
+          allContentValidity = prev.isValid;
+          return prev;
+        }
+
+        const nextContentsValidityState = {
+          ...prev.contents,
+          ...updatedData,
+        };
+
+        allContentValidity = Object.values(nextContentsValidityState).some(
+          (_isValid) => _isValid === undefined
+        )
+          ? undefined
+          : Object.values(nextContentsValidityState).every(Boolean);
+
+        return {
+          isValid: allContentValidity,
+          contents: nextContentsValidityState,
+        };
+      });
+
+      return allContentValidity;
+    },
+    []
+  );
+
+  /**
+   * Validate the multi-content active content(s) in the DOM
+   */
+  const validate = useCallback(async () => {
+    const updatedValidation = {} as { [key in keyof T]?: boolean | undefined };
+
+    for (const [id, _content] of Object.entries(contents.current)) {
+      const isValid = await (_content as Content).validate();
+      (_content as Content).validate = async () => isValid;
+      updatedValidation[id as keyof T] = isValid;
+    }
+
+    return Boolean(updateContentValidity(updatedValidation));
+  }, [updateContentValidity]);
+
+  /**
+   * Update a content. It replaces the content in our "contents" map and update
+   * the state validation object.
+   */
+  const updateContentAt = useCallback(
+    function (contentId: keyof T, content: Content) {
+      contents.current[contentId] = content;
+
+      const updatedValidity = { [contentId]: content.isValid } as {
+        [key in keyof T]: boolean | undefined;
+      };
+      const isValid = updateContentValidity(updatedValidity);
+
+      if (onChange !== undefined) {
+        onChange({
+          isValid,
+          validate,
+          getData,
+        });
+      }
+    },
+    [updateContentValidity, onChange]
+  );
+
+  /**
+   * When a content unmounts we want to save its current data state so we will be able
+   * to provide it as "defaultValue" the next time the component is mounted.
+   */
+  const saveSnapshotAndRemoveContent = useCallback(
+    function (contentId: keyof T) {
+      if (contents.current[contentId]) {
+        // Merge the data in our stateData
+        const updatedData = {
+          [contentId]: contents.current[contentId].getData(),
+        } as { [key in keyof T]?: any };
+        updateContentDataAt(updatedData);
+
+        // Remove the content from our map
+        delete contents.current[contentId];
+      }
+    },
+    [updateContentDataAt]
+  );
+
+  return {
+    getData,
+    validate,
+    validation,
+    updateContentAt,
+    saveSnapshotAndRemoveContent,
+  };
+}
diff --git a/src/plugins/es_ui_shared/public/forms/multi_content/with_multi_content.tsx b/src/plugins/es_ui_shared/public/forms/multi_content/with_multi_content.tsx
new file mode 100644
index 0000000000000..e69ce4c6fa145
--- /dev/null
+++ b/src/plugins/es_ui_shared/public/forms/multi_content/with_multi_content.tsx
@@ -0,0 +1,40 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+
+import { MultiContentProvider } from './multi_content_context';
+import { HookProps } from './use_multi_content';
+
+/**
+ * HOC to wrap a component with the MultiContentProvider
+ *
+ * @param Component The component to wrap with the MultiContentProvider
+ */
+export function WithMultiContent<
+  P extends object = { [key: string]: any } // The Props for the wrapped component
+>(Component: React.FunctionComponent<P & HookProps<any>>) {
+  return function <T extends object = { [key: string]: any }>(props: P & HookProps<T>) {
+    const { defaultValue, onChange, ...rest } = props;
+    return (
+      <MultiContentProvider<T> defaultValue={defaultValue} onChange={onChange}>
+        <Component {...(rest as P)} />
+      </MultiContentProvider>
+    );
+  };
+}
diff --git a/src/plugins/es_ui_shared/public/index.ts b/src/plugins/es_ui_shared/public/index.ts
index 4ab791289dd88..28baa3d8372f0 100644
--- a/src/plugins/es_ui_shared/public/index.ts
+++ b/src/plugins/es_ui_shared/public/index.ts
@@ -17,6 +17,12 @@
  * under the License.
  */
 
+/**
+ * Create a namespace for Forms
+ * In the future, each top level folder should be exported like that to avoid naming collision
+ */
+import * as Forms from './forms';
+
 export { JsonEditor, OnJsonEditorUpdateHandler } from './components/json_editor';
 
 export { SectionLoading } from './components/section_loading';
@@ -63,6 +69,8 @@ export {
   useAuthorizationContext,
 } from './authorization';
 
+export { Forms };
+
 /** dummy plugin, we just want esUiShared to have its own bundle */
 export function plugin() {
   return new (class EsUiSharedPlugin {
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form.tsx
index 19eec0f0a9f9d..bc4fa67e4658f 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form.tsx
@@ -113,7 +113,7 @@ export const ConfigurationForm = React.memo(({ value }: Props) => {
     });
 
     return subscription.unsubscribe;
-  }, [form, dispatch]);
+  }, [dispatch]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     if (isMounted.current === undefined) {
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx
index 230e6615bc4a4..62eb920f8865d 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx
@@ -56,7 +56,7 @@ export const CreateField = React.memo(function CreateFieldComponent({
     });
 
     return subscription.unsubscribe;
-  }, [form, dispatch]);
+  }, [dispatch]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const cancel = () => {
     dispatch({ type: 'documentField.changeStatus', value: 'idle' });
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_container.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_container.tsx
index 534c891a6f394..d543e49d23be9 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_container.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_container.tsx
@@ -32,7 +32,7 @@ export const EditFieldContainer = React.memo(({ field, allFields }: Props) => {
     });
 
     return subscription.unsubscribe;
-  }, [form, dispatch]);
+  }, [dispatch]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const exitEdit = useCallback(() => {
     dispatch({ type: 'documentField.changeStatus', value: 'idle' });
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields_tree_editor.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields_tree_editor.tsx
index cb0016e967c42..9d9df38ef4e25 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields_tree_editor.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields_tree_editor.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useEffect, useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { EuiButtonEmpty, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
@@ -25,15 +25,6 @@ export const DocumentFieldsTreeEditor = () => {
     dispatch({ type: 'documentField.createField' });
   }, [dispatch]);
 
-  useEffect(() => {
-    /**
-     * If there aren't any fields yet, we display the create field form
-     */
-    if (status === 'idle' && fields.length === 0) {
-      addField();
-    }
-  }, [addField, fields, status]);
-
   const renderCreateField = () => {
     // The "fieldToAddFieldTo" is undefined when adding to the top level "properties" object.
     const isCreateFieldFormVisible = status === 'creatingField' && fieldToAddFieldTo === undefined;
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form.tsx
index e6b7eeb12b4c8..80937e7da1192 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form.tsx
@@ -69,7 +69,7 @@ export const TemplatesForm = React.memo(({ value }: Props) => {
       });
     });
     return subscription.unsubscribe;
-  }, [form, dispatch]);
+  }, [dispatch]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     if (isMounted.current === undefined) {
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/index.ts
index 58db8af3f7c5c..29cfaf99c6559 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/index.ts
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/index.ts
@@ -11,3 +11,5 @@ export * from './mappings_editor';
 export * from './components/load_mappings';
 
 export { OnUpdateHandler, Types } from './mappings_state';
+
+export { IndexSettings } from './types';
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/index_settings_context.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/index_settings_context.tsx
index 04e0980513b6a..9e3637f970293 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/index_settings_context.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/index_settings_context.tsx
@@ -13,7 +13,7 @@ interface Props {
   children: React.ReactNode;
 }
 
-export const IndexSettingsProvider = ({ indexSettings, children }: Props) => (
+export const IndexSettingsProvider = ({ indexSettings = {}, children }: Props) => (
   <IndexSettingsContext.Provider value={indexSettings}>{children}</IndexSettingsContext.Provider>
 );
 
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.test.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.test.ts
index 4b610ff0b401d..bc495b05e07b7 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.test.ts
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.test.ts
@@ -6,63 +6,9 @@
 
 jest.mock('../constants', () => ({ MAIN_DATA_TYPE_DEFINITION: {} }));
 
-import { isStateValid, stripUndefinedValues } from './utils';
+import { stripUndefinedValues } from './utils';
 
 describe('utils', () => {
-  describe('isStateValid()', () => {
-    let components: any;
-    it('handles base case', () => {
-      components = {
-        fieldsJsonEditor: { isValid: undefined },
-        configuration: { isValid: undefined },
-        fieldForm: undefined,
-      };
-      expect(isStateValid(components)).toBe(undefined);
-    });
-
-    it('handles combinations of true, false and undefined', () => {
-      components = {
-        fieldsJsonEditor: { isValid: false },
-        configuration: { isValid: true },
-        fieldForm: undefined,
-      };
-
-      expect(isStateValid(components)).toBe(false);
-
-      components = {
-        fieldsJsonEditor: { isValid: false },
-        configuration: { isValid: undefined },
-        fieldForm: undefined,
-      };
-
-      expect(isStateValid(components)).toBe(undefined);
-
-      components = {
-        fieldsJsonEditor: { isValid: true },
-        configuration: { isValid: undefined },
-        fieldForm: undefined,
-      };
-
-      expect(isStateValid(components)).toBe(undefined);
-
-      components = {
-        fieldsJsonEditor: { isValid: true },
-        configuration: { isValid: false },
-        fieldForm: undefined,
-      };
-
-      expect(isStateValid(components)).toBe(false);
-
-      components = {
-        fieldsJsonEditor: { isValid: false },
-        configuration: { isValid: true },
-        fieldForm: { isValid: true },
-      };
-
-      expect(isStateValid(components)).toBe(false);
-    });
-  });
-
   describe('stripUndefinedValues()', () => {
     test('should remove all undefined value recursively', () => {
       const myDate = new Date();
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.ts
index 14f5858cb95d9..9fa4a7981c047 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.ts
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.ts
@@ -30,7 +30,6 @@ import {
   MAIN_DATA_TYPE_DEFINITION,
 } from '../constants';
 
-import { State } from '../reducer';
 import { FieldConfig } from '../shared_imports';
 import { TreeItem } from '../components/tree';
 
@@ -517,24 +516,6 @@ export const shouldDeleteChildFieldsAfterTypeChange = (
 export const canUseMappingsEditor = (maxNestedDepth: number) =>
   maxNestedDepth < MAX_DEPTH_DEFAULT_EDITOR;
 
-const stateWithValidity: Array<keyof State> = ['configuration', 'fieldsJsonEditor', 'fieldForm'];
-
-export const isStateValid = (state: State): boolean | undefined =>
-  Object.entries(state)
-    .filter(([key]) => stateWithValidity.includes(key as keyof State))
-    .reduce((isValid, { 1: value }) => {
-      if (value === undefined) {
-        return isValid;
-      }
-
-      // If one section validity of the state is "undefined", the mappings validity is also "undefined"
-      if (isValid === undefined || value.isValid === undefined) {
-        return undefined;
-      }
-
-      return isValid && value.isValid;
-    }, true as undefined | boolean);
-
 /**
  * This helper removes all the keys on an object with an "undefined" value.
  * To avoid sending updates from the mappings editor with this type of object:
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/mappings_state.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/mappings_state.tsx
index 029b154761ea4..fb4bfae974000 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/mappings_state.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/mappings_state.tsx
@@ -8,7 +8,6 @@ import React, { useReducer, useEffect, createContext, useContext, useMemo, useRe
 
 import {
   reducer,
-  addFieldToState,
   MappingsConfiguration,
   MappingsFields,
   MappingsTemplates,
@@ -32,7 +31,7 @@ export interface Types {
 
 export interface OnUpdateHandlerArg {
   isValid?: boolean;
-  getData: (isValid: boolean) => Mappings;
+  getData: () => Mappings;
   validate: () => Promise<boolean>;
 }
 
@@ -57,7 +56,7 @@ export const MappingsState = React.memo(({ children, onChange, value }: Props) =
   const parsedFieldsDefaultValue = useMemo(() => normalize(value.fields), [value.fields]);
 
   const initialState: State = {
-    isValid: undefined,
+    isValid: true,
     configuration: {
       defaultValue: value.configuration,
       data: {
@@ -76,7 +75,7 @@ export const MappingsState = React.memo(({ children, onChange, value }: Props) =
     },
     fields: parsedFieldsDefaultValue,
     documentFields: {
-      status: 'idle',
+      status: parsedFieldsDefaultValue.rootLevelFields.length === 0 ? 'creatingField' : 'idle',
       editor: 'default',
     },
     fieldsJsonEditor: {
@@ -105,32 +104,15 @@ export const MappingsState = React.memo(({ children, onChange, value }: Props) =
 
     onChange({
       // Output a mappings object from the user's input.
-      getData: (isValid: boolean) => {
-        let nextState = state;
-
-        if (
-          state.fieldForm &&
-          state.documentFields.status === 'creatingField' &&
-          isValid &&
-          !bypassFieldFormValidation
-        ) {
-          // If the form field is valid and we are creating a new field that has some data
-          // we automatically add the field to our state.
-          const fieldFormData = state.fieldForm.data.format() as Field;
-          if (Object.keys(fieldFormData).length !== 0) {
-            nextState = addFieldToState(fieldFormData, state);
-            dispatch({ type: 'field.add', value: fieldFormData });
-          }
-        }
-
+      getData: () => {
         // Pull the mappings properties from the current editor
         const fields =
-          nextState.documentFields.editor === 'json'
-            ? nextState.fieldsJsonEditor.format()
-            : deNormalize(nextState.fields);
+          state.documentFields.editor === 'json'
+            ? state.fieldsJsonEditor.format()
+            : deNormalize(state.fields);
 
-        const configurationData = nextState.configuration.data.format();
-        const templatesData = nextState.templates.data.format();
+        const configurationData = state.configuration.data.format();
+        const templatesData = state.templates.data.format();
 
         return {
           ...stripUndefinedValues({
@@ -163,9 +145,11 @@ export const MappingsState = React.memo(({ children, onChange, value }: Props) =
           promisesToValidate.push(state.fieldForm.validate());
         }
 
-        return Promise.all(promisesToValidate).then(
-          (validationArray) => validationArray.every(Boolean) && state.fieldsJsonEditor.isValid
-        );
+        return Promise.all(promisesToValidate).then((validationArray) => {
+          const isValid = validationArray.every(Boolean) && state.fieldsJsonEditor.isValid;
+          dispatch({ type: 'validity:update', value: isValid });
+          return isValid;
+        });
       },
       isValid: state.isValid,
     });
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/reducer.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/reducer.ts
index e0311fc86a3b0..27f8b12493008 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/reducer.ts
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/reducer.ts
@@ -11,7 +11,6 @@ import {
   shouldDeleteChildFieldsAfterTypeChange,
   getAllChildFields,
   getMaxNestedDepth,
-  isStateValid,
   normalize,
   updateFieldsPathAfterFieldNameChange,
   searchFields,
@@ -106,7 +105,8 @@ export type Action =
   | { type: 'documentField.changeStatus'; value: DocumentFieldsStatus }
   | { type: 'documentField.changeEditor'; value: FieldsEditor }
   | { type: 'fieldsJsonEditor.update'; value: { json: { [key: string]: any }; isValid: boolean } }
-  | { type: 'search:update'; value: string };
+  | { type: 'search:update'; value: string }
+  | { type: 'validity:update'; value: boolean };
 
 export type Dispatch = (action: Action) => void;
 
@@ -164,7 +164,7 @@ export const addFieldToState = (field: Field, state: State): State => {
 
   return {
     ...state,
-    isValid: isStateValid(state),
+    isValid: true,
     fields: updatedFields,
   };
 };
@@ -293,8 +293,7 @@ export const reducer = (state: State, action: Action): State => {
         configuration: { ...state.configuration, ...action.value },
       };
 
-      const isValid = isStateValid(nextState);
-      nextState.isValid = isValid;
+      nextState.isValid = action.value.isValid;
       return nextState;
     }
     case 'configuration.save': {
@@ -317,8 +316,7 @@ export const reducer = (state: State, action: Action): State => {
         templates: { ...state.templates, ...action.value },
       };
 
-      const isValid = isStateValid(nextState);
-      nextState.isValid = isValid;
+      nextState.isValid = action.value.isValid;
 
       return nextState;
     }
@@ -342,8 +340,7 @@ export const reducer = (state: State, action: Action): State => {
         fieldForm: action.value,
       };
 
-      const isValid = isStateValid(nextState);
-      nextState.isValid = isValid;
+      nextState.isValid = action.value.isValid;
 
       return nextState;
     }
@@ -529,7 +526,7 @@ export const reducer = (state: State, action: Action): State => {
 
       return {
         ...state,
-        isValid: isStateValid(state),
+        isValid: true,
         fieldForm: undefined,
         fields: updatedFields,
         documentFields: {
@@ -577,7 +574,7 @@ export const reducer = (state: State, action: Action): State => {
         },
       };
 
-      nextState.isValid = isStateValid(nextState);
+      nextState.isValid = action.value.isValid;
 
       return nextState;
     }
@@ -590,6 +587,12 @@ export const reducer = (state: State, action: Action): State => {
         },
       };
     }
+    case 'validity:update': {
+      return {
+        ...state,
+        isValid: action.value,
+      };
+    }
     default:
       throw new Error(`Action "${action!.type}" not recognized.`);
   }
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts b/x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts
index b78087ece94b9..95d1222ad2cc9 100644
--- a/x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { StepLogistics } from './step_logistics';
-export { StepAliases } from './step_aliases';
-export { StepMappings } from './step_mappings';
-export { StepSettings } from './step_settings';
-export { StepReview } from './step_review';
+export { StepLogisticsContainer } from './step_logistics_container';
+export { StepAliasesContainer } from './step_aliases_container';
+export { StepMappingsContainer } from './step_mappings_container';
+export { StepSettingsContainer } from './step_settings_container';
+export { StepReviewContainer } from './step_review_container';
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_aliases.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_aliases.tsx
index 50a32787c7a04..e18846a69b847 100644
--- a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_aliases.tsx
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_aliases.tsx
@@ -18,119 +18,119 @@ import {
   EuiCode,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+
+import { Forms } from '../../../../shared_imports';
 import { documentationService } from '../../../services/documentation';
-import { StepProps } from '../types';
 import { useJsonStep } from './use_json_step';
 
-export const StepAliases: React.FunctionComponent<StepProps> = ({
-  template,
-  setDataGetter,
-  onStepValidityChange,
-}) => {
-  const { content, setContent, error } = useJsonStep({
-    prop: 'aliases',
-    defaultValue: template?.template.aliases,
-    setDataGetter,
-    onStepValidityChange,
-  });
+interface Props {
+  defaultValue: { [key: string]: any };
+  onChange: (content: Forms.Content) => void;
+}
 
-  return (
-    <div data-test-subj="stepAliases">
-      <EuiFlexGroup justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
-          <EuiTitle>
-            <h2 data-test-subj="stepTitle">
-              <FormattedMessage
-                id="xpack.idxMgmt.templateForm.stepAliases.stepTitle"
-                defaultMessage="Aliases (optional)"
-              />
-            </h2>
-          </EuiTitle>
+export const StepAliases: React.FunctionComponent<Props> = React.memo(
+  ({ defaultValue, onChange }) => {
+    const { jsonContent, setJsonContent, error } = useJsonStep({
+      defaultValue,
+      onChange,
+    });
 
-          <EuiSpacer size="s" />
+    return (
+      <div data-test-subj="stepAliases">
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiTitle>
+              <h2 data-test-subj="stepTitle">
+                <FormattedMessage
+                  id="xpack.idxMgmt.templateForm.stepAliases.stepTitle"
+                  defaultMessage="Aliases (optional)"
+                />
+              </h2>
+            </EuiTitle>
 
-          <EuiText>
-            <p>
+            <EuiSpacer size="s" />
+
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  id="xpack.idxMgmt.templateForm.stepAliases.aliasesDescription"
+                  defaultMessage="Set up aliases to associate with your indices."
+                />
+              </p>
+            </EuiText>
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              size="s"
+              flush="right"
+              href={documentationService.getTemplatesDocumentationLink()}
+              target="_blank"
+              iconType="help"
+            >
               <FormattedMessage
-                id="xpack.idxMgmt.templateForm.stepAliases.aliasesDescription"
-                defaultMessage="Set up aliases to associate with your indices."
+                id="xpack.idxMgmt.templateForm.stepAliases.docsButtonLabel"
+                defaultMessage="Index Templates docs"
               />
-            </p>
-          </EuiText>
-        </EuiFlexItem>
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        <EuiSpacer size="l" />
 
-        <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
-            size="s"
-            flush="right"
-            href={documentationService.getTemplatesDocumentationLink()}
-            target="_blank"
-            iconType="help"
-          >
+        {/* Aliases code editor */}
+        <EuiFormRow
+          label={
             <FormattedMessage
-              id="xpack.idxMgmt.templateForm.stepAliases.docsButtonLabel"
-              defaultMessage="Index Templates docs"
+              id="xpack.idxMgmt.templateForm.stepAliases.fieldAliasesLabel"
+              defaultMessage="Aliases"
             />
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
-      <EuiSpacer size="l" />
-
-      {/* Aliases code editor */}
-      <EuiFormRow
-        label={
-          <FormattedMessage
-            id="xpack.idxMgmt.templateForm.stepAliases.fieldAliasesLabel"
-            defaultMessage="Aliases"
-          />
-        }
-        helpText={
-          <FormattedMessage
-            id="xpack.idxMgmt.templateForm.stepAliases.aliasesEditorHelpText"
-            defaultMessage="Use JSON format: {code}"
-            values={{
-              code: (
-                <EuiCode>
-                  {JSON.stringify({
-                    my_alias: {},
-                  })}
-                </EuiCode>
-              ),
+          }
+          helpText={
+            <FormattedMessage
+              id="xpack.idxMgmt.templateForm.stepAliases.aliasesEditorHelpText"
+              defaultMessage="Use JSON format: {code}"
+              values={{
+                code: (
+                  <EuiCode>
+                    {JSON.stringify({
+                      my_alias: {},
+                    })}
+                  </EuiCode>
+                ),
+              }}
+            />
+          }
+          isInvalid={Boolean(error)}
+          error={error}
+          fullWidth
+        >
+          <EuiCodeEditor
+            mode="json"
+            theme="textmate"
+            width="100%"
+            height="500px"
+            setOptions={{
+              showLineNumbers: false,
+              tabSize: 2,
+            }}
+            editorProps={{
+              $blockScrolling: Infinity,
             }}
+            showGutter={false}
+            minLines={6}
+            aria-label={i18n.translate(
+              'xpack.idxMgmt.templateForm.stepAliases.fieldAliasesAriaLabel',
+              {
+                defaultMessage: 'Aliases code editor',
+              }
+            )}
+            value={jsonContent}
+            onChange={setJsonContent}
+            data-test-subj="aliasesEditor"
           />
-        }
-        isInvalid={Boolean(error)}
-        error={error}
-        fullWidth
-      >
-        <EuiCodeEditor
-          mode="json"
-          theme="textmate"
-          width="100%"
-          height="500px"
-          setOptions={{
-            showLineNumbers: false,
-            tabSize: 2,
-          }}
-          editorProps={{
-            $blockScrolling: Infinity,
-          }}
-          showGutter={false}
-          minLines={6}
-          aria-label={i18n.translate(
-            'xpack.idxMgmt.templateForm.stepAliases.fieldAliasesAriaLabel',
-            {
-              defaultMessage: 'Aliases code editor',
-            }
-          )}
-          value={content}
-          onChange={(updated: string) => {
-            setContent(updated);
-          }}
-          data-test-subj="aliasesEditor"
-        />
-      </EuiFormRow>
-    </div>
-  );
-};
+        </EuiFormRow>
+      </div>
+    );
+  }
+);
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_aliases_container.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_aliases_container.tsx
new file mode 100644
index 0000000000000..634887436f816
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_aliases_container.tsx
@@ -0,0 +1,16 @@
+/*
+ * 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 { Forms } from '../../../../shared_imports';
+import { WizardContent } from '../template_form';
+import { StepAliases } from './step_aliases';
+
+export const StepAliasesContainer = () => {
+  const { defaultValue, updateContent } = Forms.useContent<WizardContent>('aliases');
+
+  return <StepAliases defaultValue={defaultValue} onChange={updateContent} />;
+};
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx
index 2f6e055b5d0c6..d011b4b06546a 100644
--- a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx
@@ -8,9 +8,8 @@ import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiButtonEmpty, EuiSpacer } from '
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
-import { useForm, Form, getUseField, getFormRow, Field } from '../../../../shared_imports';
+import { useForm, Form, getUseField, getFormRow, Field, Forms } from '../../../../shared_imports';
 import { documentationService } from '../../../services/documentation';
-import { StepProps } from '../types';
 import { schemas, nameConfig, nameConfigWithoutValidations } from '../template_form_schemas';
 
 // Create or Form components with partial props that are common to all instances
@@ -59,96 +58,102 @@ const fieldsMeta = {
   },
 };
 
-export const StepLogistics: React.FunctionComponent<StepProps> = ({
-  template,
-  isEditing,
-  setDataGetter,
-  onStepValidityChange,
-}) => {
-  const { form } = useForm({
-    schema: schemas.logistics,
-    defaultValue: template,
-    options: { stripEmptyFields: false },
-  });
+interface Props {
+  defaultValue: { [key: string]: any };
+  onChange: (content: Forms.Content) => void;
+  isEditing?: boolean;
+}
 
-  useEffect(() => {
-    onStepValidityChange(form.isValid);
-  }, [form.isValid, onStepValidityChange]);
+export const StepLogistics: React.FunctionComponent<Props> = React.memo(
+  ({ defaultValue, isEditing, onChange }) => {
+    const { form } = useForm({
+      schema: schemas.logistics,
+      defaultValue,
+      options: { stripEmptyFields: false },
+    });
 
-  useEffect(() => {
-    setDataGetter(form.submit);
-  }, [form.submit, setDataGetter]);
+    useEffect(() => {
+      const validate = async () => {
+        return (await form.submit()).isValid;
+      };
+      onChange({
+        isValid: form.isValid,
+        validate,
+        getData: form.getFormData,
+      });
+    }, [form.isValid, onChange]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const { name, indexPatterns, order, version } = fieldsMeta;
+    const { name, indexPatterns, order, version } = fieldsMeta;
 
-  return (
-    <Form form={form} data-test-subj="stepLogistics">
-      <EuiFlexGroup justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
-          <EuiTitle>
-            <h2>
+    return (
+      <Form form={form} data-test-subj="stepLogistics">
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiTitle>
+              <h2>
+                <FormattedMessage
+                  id="xpack.idxMgmt.templateForm.stepLogistics.stepTitle"
+                  defaultMessage="Logistics"
+                />
+              </h2>
+            </EuiTitle>
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              size="s"
+              flush="right"
+              href={documentationService.getTemplatesDocumentationLink()}
+              target="_blank"
+              iconType="help"
+            >
               <FormattedMessage
-                id="xpack.idxMgmt.templateForm.stepLogistics.stepTitle"
-                defaultMessage="Logistics"
+                id="xpack.idxMgmt.templateForm.stepLogistics.docsButtonLabel"
+                defaultMessage="Index Templates docs"
               />
-            </h2>
-          </EuiTitle>
-        </EuiFlexItem>
-
-        <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
-            size="s"
-            flush="right"
-            href={documentationService.getTemplatesDocumentationLink()}
-            target="_blank"
-            iconType="help"
-          >
-            <FormattedMessage
-              id="xpack.idxMgmt.templateForm.stepLogistics.docsButtonLabel"
-              defaultMessage="Index Templates docs"
-            />
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer size="l" />
-      {/* Name */}
-      <FormRow title={name.title} description={name.description}>
-        <UseField
-          path="name"
-          componentProps={{
-            ['data-test-subj']: name.testSubject,
-            euiFieldProps: { disabled: isEditing },
-          }}
-          config={isEditing ? nameConfigWithoutValidations : nameConfig}
-        />
-      </FormRow>
-      {/* Index patterns */}
-      <FormRow title={indexPatterns.title} description={indexPatterns.description}>
-        <UseField
-          path="indexPatterns"
-          componentProps={{
-            ['data-test-subj']: indexPatterns.testSubject,
-          }}
-        />
-      </FormRow>
-      {/* Order */}
-      <FormRow title={order.title} description={order.description}>
-        <UseField
-          path="order"
-          componentProps={{
-            ['data-test-subj']: order.testSubject,
-          }}
-        />
-      </FormRow>
-      {/* Version */}
-      <FormRow title={version.title} description={version.description}>
-        <UseField
-          path="version"
-          componentProps={{
-            ['data-test-subj']: version.testSubject,
-          }}
-        />
-      </FormRow>
-    </Form>
-  );
-};
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="l" />
+        {/* Name */}
+        <FormRow title={name.title} description={name.description}>
+          <UseField
+            path="name"
+            componentProps={{
+              ['data-test-subj']: name.testSubject,
+              euiFieldProps: { disabled: isEditing },
+            }}
+            config={isEditing ? nameConfigWithoutValidations : nameConfig}
+          />
+        </FormRow>
+        {/* Index patterns */}
+        <FormRow title={indexPatterns.title} description={indexPatterns.description}>
+          <UseField
+            path="indexPatterns"
+            componentProps={{
+              ['data-test-subj']: indexPatterns.testSubject,
+            }}
+          />
+        </FormRow>
+        {/* Order */}
+        <FormRow title={order.title} description={order.description}>
+          <UseField
+            path="order"
+            componentProps={{
+              ['data-test-subj']: order.testSubject,
+            }}
+          />
+        </FormRow>
+        {/* Version */}
+        <FormRow title={version.title} description={version.description}>
+          <UseField
+            path="version"
+            componentProps={{
+              ['data-test-subj']: version.testSubject,
+            }}
+          />
+        </FormRow>
+      </Form>
+    );
+  }
+);
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics_container.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics_container.tsx
new file mode 100644
index 0000000000000..867ecff799858
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics_container.tsx
@@ -0,0 +1,22 @@
+/*
+ * 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 { Forms } from '../../../../shared_imports';
+import { WizardContent } from '../template_form';
+import { StepLogistics } from './step_logistics';
+
+interface Props {
+  isEditing?: boolean;
+}
+
+export const StepLogisticsContainer = ({ isEditing = false }: Props) => {
+  const { defaultValue, updateContent } = Forms.useContent<WizardContent>('logistics');
+
+  return (
+    <StepLogistics defaultValue={defaultValue} onChange={updateContent} isEditing={isEditing} />
+  );
+};
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_mappings.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_mappings.tsx
index d74dd435ecdae..800cb519a9393 100644
--- a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_mappings.tsx
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_mappings.tsx
@@ -14,99 +14,103 @@ import {
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
-import { documentationService } from '../../../services/documentation';
-import { StepProps, DataGetterFunc } from '../types';
-import { MappingsEditor, OnUpdateHandler, LoadMappingsFromJsonButton } from '../../mappings_editor';
-
-export const StepMappings: React.FunctionComponent<StepProps> = ({
-  template,
-  setDataGetter,
-  onStepValidityChange,
-}) => {
-  const [mappings, setMappings] = useState(template?.template.mappings);
-
-  const onMappingsEditorUpdate = useCallback<OnUpdateHandler>(
-    ({ isValid, getData, validate }) => {
-      onStepValidityChange(isValid);
 
-      const dataGetterFunc: DataGetterFunc = async () => {
-        const isMappingsValid = isValid === undefined ? await validate() : isValid;
-        const data = getData(isMappingsValid);
-        return {
-          isValid: isMappingsValid,
-          data: { mappings: data },
-          path: 'template',
-        };
-      };
+import { Forms } from '../../../../shared_imports';
+import { documentationService } from '../../../services/documentation';
+import {
+  MappingsEditor,
+  OnUpdateHandler,
+  LoadMappingsFromJsonButton,
+  IndexSettings,
+} from '../../mappings_editor';
 
-      setDataGetter(dataGetterFunc);
-    },
-    [setDataGetter, onStepValidityChange]
-  );
+interface Props {
+  defaultValue: { [key: string]: any };
+  onChange: (content: Forms.Content) => void;
+  indexSettings?: IndexSettings;
+}
 
-  const onJsonLoaded = (json: { [key: string]: any }): void => {
-    setMappings(json);
-  };
+export const StepMappings: React.FunctionComponent<Props> = React.memo(
+  ({ defaultValue, onChange, indexSettings }) => {
+    const [mappings, setMappings] = useState(defaultValue);
 
-  return (
-    <div data-test-subj="stepMappings">
-      <EuiFlexGroup justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
-          <EuiTitle>
-            <h2 data-test-subj="stepTitle">
-              <FormattedMessage
-                id="xpack.idxMgmt.templateForm.stepMappings.stepTitle"
-                defaultMessage="Mappings (optional)"
-              />
-            </h2>
-          </EuiTitle>
+    const onMappingsEditorUpdate = useCallback<OnUpdateHandler>(
+      ({ isValid, getData, validate }) => {
+        onChange({
+          isValid,
+          async validate() {
+            return isValid === undefined ? await validate() : isValid;
+          },
+          getData,
+        });
+      },
+      [onChange]
+    );
 
-          <EuiSpacer size="s" />
+    const onJsonLoaded = (json: { [key: string]: any }): void => {
+      setMappings(json);
+    };
 
-          <EuiText>
-            <p>
-              <FormattedMessage
-                id="xpack.idxMgmt.templateForm.stepMappings.mappingsDescription"
-                defaultMessage="Define how to store and index documents."
-              />
-            </p>
-          </EuiText>
-        </EuiFlexItem>
+    return (
+      <div data-test-subj="stepMappings">
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiTitle>
+              <h2 data-test-subj="stepTitle">
+                <FormattedMessage
+                  id="xpack.idxMgmt.templateForm.stepMappings.stepTitle"
+                  defaultMessage="Mappings (optional)"
+                />
+              </h2>
+            </EuiTitle>
 
-        <EuiFlexItem grow={false}>
-          <EuiFlexGroup gutterSize="s">
-            <EuiFlexItem grow={false}>
-              <LoadMappingsFromJsonButton onJson={onJsonLoaded} />
-            </EuiFlexItem>
+            <EuiSpacer size="s" />
 
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                size="s"
-                flush="right"
-                href={documentationService.getMappingDocumentationLink()}
-                target="_blank"
-                iconType="help"
-              >
+            <EuiText>
+              <p>
                 <FormattedMessage
-                  id="xpack.idxMgmt.templateForm.stepMappings.docsButtonLabel"
-                  defaultMessage="Mapping docs"
+                  id="xpack.idxMgmt.templateForm.stepMappings.mappingsDescription"
+                  defaultMessage="Define how to store and index documents."
                 />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+              </p>
+            </EuiText>
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup gutterSize="s">
+              <EuiFlexItem grow={false}>
+                <LoadMappingsFromJsonButton onJson={onJsonLoaded} />
+              </EuiFlexItem>
+
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  size="s"
+                  flush="right"
+                  href={documentationService.getMappingDocumentationLink()}
+                  target="_blank"
+                  iconType="help"
+                >
+                  <FormattedMessage
+                    id="xpack.idxMgmt.templateForm.stepMappings.docsButtonLabel"
+                    defaultMessage="Mapping docs"
+                  />
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
 
-      <EuiSpacer size="s" />
+        <EuiSpacer size="s" />
 
-      {/* Mappings code editor */}
-      <MappingsEditor
-        value={mappings}
-        onChange={onMappingsEditorUpdate}
-        indexSettings={template?.template.settings}
-      />
+        {/* Mappings editor */}
+        <MappingsEditor
+          value={mappings}
+          onChange={onMappingsEditorUpdate}
+          indexSettings={indexSettings}
+        />
 
-      <EuiSpacer size="m" />
-    </div>
-  );
-};
+        <EuiSpacer size="m" />
+      </div>
+    );
+  }
+);
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_mappings_container.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_mappings_container.tsx
new file mode 100644
index 0000000000000..545aec9851592
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_mappings_container.tsx
@@ -0,0 +1,22 @@
+/*
+ * 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 { Forms } from '../../../../shared_imports';
+import { WizardContent } from '../template_form';
+import { StepMappings } from './step_mappings';
+
+export const StepMappingsContainer = () => {
+  const { defaultValue, updateContent, getData } = Forms.useContent<WizardContent>('mappings');
+
+  return (
+    <StepMappings
+      defaultValue={defaultValue}
+      onChange={updateContent}
+      indexSettings={getData().settings}
+    />
+  );
+};
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx
index 387887239aaf0..7f301b0a9c282 100644
--- a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx
@@ -27,7 +27,7 @@ import {
   serializeTemplate,
 } from '../../../../../common/lib/template_serialization';
 import { TemplateDeserialized, getTemplateParameter } from '../../../../../common';
-import { StepProps } from '../types';
+import { WizardSection } from '../template_form';
 
 const { stripEmptyFields } = serializers;
 
@@ -54,221 +54,228 @@ const getDescriptionText = (data: any) => {
   );
 };
 
-export const StepReview: React.FunctionComponent<StepProps> = ({ template, updateCurrentStep }) => {
-  const {
-    name,
-    indexPatterns,
-    version,
-    order,
-    _kbnMeta: { isLegacy },
-  } = template!;
+interface Props {
+  template: TemplateDeserialized;
+  navigateToStep: (stepId: WizardSection) => void;
+}
 
-  const serializedTemplate = isLegacy
-    ? serializeLegacyTemplate(
-        stripEmptyFields(template!, {
-          types: ['string'],
-        }) as TemplateDeserialized
-      )
-    : serializeTemplate(
-        stripEmptyFields(template!, {
-          types: ['string'],
-        }) as TemplateDeserialized
-      );
+export const StepReview: React.FunctionComponent<Props> = React.memo(
+  ({ template, navigateToStep }) => {
+    const {
+      name,
+      indexPatterns,
+      version,
+      order,
+      _kbnMeta: { isLegacy },
+    } = template!;
 
-  const serializedMappings = getTemplateParameter(serializedTemplate, 'mappings');
-  const serializedSettings = getTemplateParameter(serializedTemplate, 'settings');
-  const serializedAliases = getTemplateParameter(serializedTemplate, 'aliases');
+    const serializedTemplate = isLegacy
+      ? serializeLegacyTemplate(
+          stripEmptyFields(template!, {
+            types: ['string'],
+          }) as TemplateDeserialized
+        )
+      : serializeTemplate(
+          stripEmptyFields(template!, {
+            types: ['string'],
+          }) as TemplateDeserialized
+        );
 
-  const numIndexPatterns = indexPatterns!.length;
+    const serializedMappings = getTemplateParameter(serializedTemplate, 'mappings');
+    const serializedSettings = getTemplateParameter(serializedTemplate, 'settings');
+    const serializedAliases = getTemplateParameter(serializedTemplate, 'aliases');
 
-  const hasWildCardIndexPattern = Boolean(indexPatterns!.find((pattern) => pattern === '*'));
+    const numIndexPatterns = indexPatterns!.length;
 
-  const SummaryTab = () => (
-    <div data-test-subj="summaryTab">
-      <EuiSpacer size="m" />
+    const hasWildCardIndexPattern = Boolean(indexPatterns!.find((pattern) => pattern === '*'));
 
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <EuiDescriptionList textStyle="reverse">
-            <EuiDescriptionListTitle>
-              <FormattedMessage
-                id="xpack.idxMgmt.templateForm.stepReview.summaryTab.indexPatternsLabel"
-                defaultMessage="Index {numIndexPatterns, plural, one {pattern} other {patterns}}"
-                values={{ numIndexPatterns }}
-              />
-            </EuiDescriptionListTitle>
-            <EuiDescriptionListDescription>
-              {numIndexPatterns > 1 ? (
-                <EuiText>
-                  <ul>
-                    {indexPatterns!.map((indexName: string, i: number) => {
-                      return (
-                        <li key={`${indexName}-${i}`}>
-                          <EuiTitle size="xs">
-                            <span>{indexName}</span>
-                          </EuiTitle>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </EuiText>
-              ) : (
-                indexPatterns!.toString()
-              )}
-            </EuiDescriptionListDescription>
+    const SummaryTab = () => (
+      <div data-test-subj="summaryTab">
+        <EuiSpacer size="m" />
 
-            <EuiDescriptionListTitle>
-              <FormattedMessage
-                id="xpack.idxMgmt.templateForm.stepReview.summaryTab.orderLabel"
-                defaultMessage="Order"
-              />
-            </EuiDescriptionListTitle>
-            <EuiDescriptionListDescription>
-              {order ? order : <NoneDescriptionText />}
-            </EuiDescriptionListDescription>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiDescriptionList textStyle="reverse">
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.idxMgmt.templateForm.stepReview.summaryTab.indexPatternsLabel"
+                  defaultMessage="Index {numIndexPatterns, plural, one {pattern} other {patterns}}"
+                  values={{ numIndexPatterns }}
+                />
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                {numIndexPatterns > 1 ? (
+                  <EuiText>
+                    <ul>
+                      {indexPatterns!.map((indexName: string, i: number) => {
+                        return (
+                          <li key={`${indexName}-${i}`}>
+                            <EuiTitle size="xs">
+                              <span>{indexName}</span>
+                            </EuiTitle>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </EuiText>
+                ) : (
+                  indexPatterns!.toString()
+                )}
+              </EuiDescriptionListDescription>
 
-            <EuiDescriptionListTitle>
-              <FormattedMessage
-                id="xpack.idxMgmt.templateForm.stepReview.summaryTab.versionLabel"
-                defaultMessage="Version"
-              />
-            </EuiDescriptionListTitle>
-            <EuiDescriptionListDescription>
-              {version ? version : <NoneDescriptionText />}
-            </EuiDescriptionListDescription>
-          </EuiDescriptionList>
-        </EuiFlexItem>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.idxMgmt.templateForm.stepReview.summaryTab.orderLabel"
+                  defaultMessage="Order"
+                />
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                {order ? order : <NoneDescriptionText />}
+              </EuiDescriptionListDescription>
 
-        <EuiFlexItem>
-          <EuiDescriptionList textStyle="reverse">
-            <EuiDescriptionListTitle>
-              <FormattedMessage
-                id="xpack.idxMgmt.templateForm.stepReview.summaryTab.settingsLabel"
-                defaultMessage="Index settings"
-              />
-            </EuiDescriptionListTitle>
-            <EuiDescriptionListDescription>
-              {getDescriptionText(serializedSettings)}
-            </EuiDescriptionListDescription>
-            <EuiDescriptionListTitle>
-              <FormattedMessage
-                id="xpack.idxMgmt.templateForm.stepReview.summaryTab.mappingLabel"
-                defaultMessage="Mappings"
-              />
-            </EuiDescriptionListTitle>
-            <EuiDescriptionListDescription>
-              {getDescriptionText(serializedMappings)}
-            </EuiDescriptionListDescription>
-            <EuiDescriptionListTitle>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.idxMgmt.templateForm.stepReview.summaryTab.versionLabel"
+                  defaultMessage="Version"
+                />
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                {version ? version : <NoneDescriptionText />}
+              </EuiDescriptionListDescription>
+            </EuiDescriptionList>
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <EuiDescriptionList textStyle="reverse">
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.idxMgmt.templateForm.stepReview.summaryTab.settingsLabel"
+                  defaultMessage="Index settings"
+                />
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                {getDescriptionText(serializedSettings)}
+              </EuiDescriptionListDescription>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.idxMgmt.templateForm.stepReview.summaryTab.mappingLabel"
+                  defaultMessage="Mappings"
+                />
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                {getDescriptionText(serializedMappings)}
+              </EuiDescriptionListDescription>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.idxMgmt.templateForm.stepReview.summaryTab.aliasesLabel"
+                  defaultMessage="Aliases"
+                />
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                {getDescriptionText(serializedAliases)}
+              </EuiDescriptionListDescription>
+            </EuiDescriptionList>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </div>
+    );
+
+    const RequestTab = () => {
+      const endpoint = `PUT _template/${name || '<templateName>'}`;
+      const templateString = JSON.stringify(serializedTemplate, null, 2);
+      const request = `${endpoint}\n${templateString}`;
+
+      // Beyond a certain point, highlighting the syntax will bog down performance to unacceptable
+      // levels. This way we prevent that happening for very large requests.
+      const language = request.length < 60000 ? 'json' : undefined;
+
+      return (
+        <div data-test-subj="requestTab">
+          <EuiSpacer size="m" />
+
+          <EuiText>
+            <p>
               <FormattedMessage
-                id="xpack.idxMgmt.templateForm.stepReview.summaryTab.aliasesLabel"
-                defaultMessage="Aliases"
+                id="xpack.idxMgmt.templateForm.stepReview.requestTab.descriptionText"
+                defaultMessage="This request will create the following index template."
               />
-            </EuiDescriptionListTitle>
-            <EuiDescriptionListDescription>
-              {getDescriptionText(serializedAliases)}
-            </EuiDescriptionListDescription>
-          </EuiDescriptionList>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
-  );
+            </p>
+          </EuiText>
 
-  const RequestTab = () => {
-    const endpoint = `PUT _template/${name || '<templateName>'}`;
-    const templateString = JSON.stringify(serializedTemplate, null, 2);
-    const request = `${endpoint}\n${templateString}`;
+          <EuiSpacer size="m" />
 
-    // Beyond a certain point, highlighting the syntax will bog down performance to unacceptable
-    // levels. This way we prevent that happening for very large requests.
-    const language = request.length < 60000 ? 'json' : undefined;
+          <EuiCodeBlock language={language} isCopyable>
+            {request}
+          </EuiCodeBlock>
+        </div>
+      );
+    };
 
     return (
-      <div data-test-subj="requestTab">
-        <EuiSpacer size="m" />
-
-        <EuiText>
-          <p>
+      <div data-test-subj="stepSummary">
+        <EuiTitle>
+          <h2 data-test-subj="stepTitle">
             <FormattedMessage
-              id="xpack.idxMgmt.templateForm.stepReview.requestTab.descriptionText"
-              defaultMessage="This request will create the following index template."
+              id="xpack.idxMgmt.templateForm.stepReview.stepTitle"
+              defaultMessage="Review details for '{templateName}'"
+              values={{ templateName: name }}
             />
-          </p>
-        </EuiText>
+          </h2>
+        </EuiTitle>
 
-        <EuiSpacer size="m" />
-
-        <EuiCodeBlock language={language} isCopyable>
-          {request}
-        </EuiCodeBlock>
-      </div>
-    );
-  };
+        <EuiSpacer size="l" />
 
-  return (
-    <div data-test-subj="stepSummary">
-      <EuiTitle>
-        <h2 data-test-subj="stepTitle">
-          <FormattedMessage
-            id="xpack.idxMgmt.templateForm.stepReview.stepTitle"
-            defaultMessage="Review details for '{templateName}'"
-            values={{ templateName: name }}
-          />
-        </h2>
-      </EuiTitle>
-
-      <EuiSpacer size="l" />
-
-      {hasWildCardIndexPattern ? (
-        <Fragment>
-          <EuiCallOut
-            title={
-              <FormattedMessage
-                id="xpack.idxMgmt.templateForm.stepReview.summaryTab.indexPatternsWarningTitle"
-                defaultMessage="This template uses a wildcard (*) as an index pattern."
-              />
-            }
-            color="warning"
-            iconType="help"
-            data-test-subj="indexPatternsWarning"
-          >
-            <p data-test-subj="indexPatternsWarningDescription">
-              <FormattedMessage
-                id="xpack.idxMgmt.templateForm.stepReview.summaryTab.indexPatternsWarningDescription"
-                defaultMessage="All new indices that you create will use this template."
-              />{' '}
-              {/* Edit link navigates back to step 1 (logistics) */}
-              <EuiLink onClick={updateCurrentStep.bind(null, 1)}>
+        {hasWildCardIndexPattern ? (
+          <Fragment>
+            <EuiCallOut
+              title={
                 <FormattedMessage
-                  id="xpack.idxMgmt.templateForm.stepReview.summaryTab.indexPatternsWarningLinkText"
-                  defaultMessage="Edit index patterns."
+                  id="xpack.idxMgmt.templateForm.stepReview.summaryTab.indexPatternsWarningTitle"
+                  defaultMessage="This template uses a wildcard (*) as an index pattern."
                 />
-              </EuiLink>
-            </p>
-          </EuiCallOut>
-          <EuiSpacer size="m" />
-        </Fragment>
-      ) : null}
+              }
+              color="warning"
+              iconType="help"
+              data-test-subj="indexPatternsWarning"
+            >
+              <p data-test-subj="indexPatternsWarningDescription">
+                <FormattedMessage
+                  id="xpack.idxMgmt.templateForm.stepReview.summaryTab.indexPatternsWarningDescription"
+                  defaultMessage="All new indices that you create will use this template."
+                />{' '}
+                {/* Edit link navigates back to step 1 (logistics) */}
+                <EuiLink onClick={navigateToStep.bind(null, 'logistics')}>
+                  <FormattedMessage
+                    id="xpack.idxMgmt.templateForm.stepReview.summaryTab.indexPatternsWarningLinkText"
+                    defaultMessage="Edit index patterns."
+                  />
+                </EuiLink>
+              </p>
+            </EuiCallOut>
+            <EuiSpacer size="m" />
+          </Fragment>
+        ) : null}
 
-      <EuiTabbedContent
-        data-test-subj="summaryTabContent"
-        tabs={[
-          {
-            id: 'summary',
-            name: i18n.translate('xpack.idxMgmt.templateForm.stepReview.summaryTabTitle', {
-              defaultMessage: 'Summary',
-            }),
-            content: <SummaryTab />,
-          },
-          {
-            id: 'request',
-            name: i18n.translate('xpack.idxMgmt.templateForm.stepReview.requestTabTitle', {
-              defaultMessage: 'Request',
-            }),
-            content: <RequestTab />,
-          },
-        ]}
-      />
-    </div>
-  );
-};
+        <EuiTabbedContent
+          data-test-subj="summaryTabContent"
+          tabs={[
+            {
+              id: 'summary',
+              name: i18n.translate('xpack.idxMgmt.templateForm.stepReview.summaryTabTitle', {
+                defaultMessage: 'Summary',
+              }),
+              content: <SummaryTab />,
+            },
+            {
+              id: 'request',
+              name: i18n.translate('xpack.idxMgmt.templateForm.stepReview.requestTabTitle', {
+                defaultMessage: 'Request',
+              }),
+              content: <RequestTab />,
+            },
+          ]}
+        />
+      </div>
+    );
+  }
+);
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review_container.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review_container.tsx
new file mode 100644
index 0000000000000..cafa8660b1150
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review_container.tsx
@@ -0,0 +1,26 @@
+/*
+ * 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 { TemplateDeserialized } from '../../../../../common';
+import { Forms } from '../../../../shared_imports';
+import { WizardContent, WizardSection } from '../template_form';
+import { StepReview } from './step_review';
+
+interface Props {
+  getTemplateData: (wizardContent: WizardContent) => TemplateDeserialized;
+}
+
+export const StepReviewContainer = React.memo(({ getTemplateData }: Props) => {
+  const { navigateToStep } = Forms.useFormWizardContext<WizardSection>();
+  const { getData } = Forms.useMultiContentContext<WizardContent>();
+
+  const wizardContent = getData();
+  // Build the final template object, providing the wizard content data
+  const template = getTemplateData(wizardContent);
+
+  return <StepReview template={template} navigateToStep={navigateToStep} />;
+});
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_settings.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_settings.tsx
index 7c1ee6388a618..4325852d68aaa 100644
--- a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_settings.tsx
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_settings.tsx
@@ -18,111 +18,113 @@ import {
   EuiCode,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+
+import { Forms } from '../../../../shared_imports';
 import { documentationService } from '../../../services/documentation';
-import { StepProps } from '../types';
 import { useJsonStep } from './use_json_step';
 
-export const StepSettings: React.FunctionComponent<StepProps> = ({
-  template,
-  setDataGetter,
-  onStepValidityChange,
-}) => {
-  const { content, setContent, error } = useJsonStep({
-    prop: 'settings',
-    defaultValue: template?.template.settings,
-    setDataGetter,
-    onStepValidityChange,
-  });
+interface Props {
+  defaultValue: { [key: string]: any };
+  onChange: (content: Forms.Content) => void;
+}
 
-  return (
-    <div data-test-subj="stepSettings">
-      <EuiFlexGroup justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
-          <EuiTitle>
-            <h2 data-test-subj="stepTitle">
-              <FormattedMessage
-                id="xpack.idxMgmt.templateForm.stepSettings.stepTitle"
-                defaultMessage="Index settings (optional)"
-              />
-            </h2>
-          </EuiTitle>
+export const StepSettings: React.FunctionComponent<Props> = React.memo(
+  ({ defaultValue, onChange }) => {
+    const { jsonContent, setJsonContent, error } = useJsonStep({
+      defaultValue,
+      onChange,
+    });
 
-          <EuiSpacer size="s" />
+    return (
+      <div data-test-subj="stepSettings">
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiTitle>
+              <h2 data-test-subj="stepTitle">
+                <FormattedMessage
+                  id="xpack.idxMgmt.templateForm.stepSettings.stepTitle"
+                  defaultMessage="Index settings (optional)"
+                />
+              </h2>
+            </EuiTitle>
 
-          <EuiText>
-            <p>
+            <EuiSpacer size="s" />
+
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  id="xpack.idxMgmt.templateForm.stepSettings.settingsDescription"
+                  defaultMessage="Define the behavior of your indices."
+                />
+              </p>
+            </EuiText>
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              size="s"
+              flush="right"
+              href={documentationService.getSettingsDocumentationLink()}
+              target="_blank"
+              iconType="help"
+            >
               <FormattedMessage
-                id="xpack.idxMgmt.templateForm.stepSettings.settingsDescription"
-                defaultMessage="Define the behavior of your indices."
+                id="xpack.idxMgmt.templateForm.stepSettings.docsButtonLabel"
+                defaultMessage="Index settings docs"
               />
-            </p>
-          </EuiText>
-        </EuiFlexItem>
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        <EuiSpacer size="l" />
 
-        <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
-            size="s"
-            flush="right"
-            href={documentationService.getSettingsDocumentationLink()}
-            target="_blank"
-            iconType="help"
-          >
+        {/* Settings code editor */}
+        <EuiFormRow
+          label={
             <FormattedMessage
-              id="xpack.idxMgmt.templateForm.stepSettings.docsButtonLabel"
-              defaultMessage="Index settings docs"
+              id="xpack.idxMgmt.templateForm.stepSettings.fieldIndexSettingsLabel"
+              defaultMessage="Index settings"
             />
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
-      <EuiSpacer size="l" />
-
-      {/* Settings code editor */}
-      <EuiFormRow
-        label={
-          <FormattedMessage
-            id="xpack.idxMgmt.templateForm.stepSettings.fieldIndexSettingsLabel"
-            defaultMessage="Index settings"
-          />
-        }
-        helpText={
-          <FormattedMessage
-            id="xpack.idxMgmt.templateForm.stepSettings.settingsEditorHelpText"
-            defaultMessage="Use JSON format: {code}"
-            values={{
-              code: <EuiCode>{JSON.stringify({ number_of_replicas: 1 })}</EuiCode>,
+          }
+          helpText={
+            <FormattedMessage
+              id="xpack.idxMgmt.templateForm.stepSettings.settingsEditorHelpText"
+              defaultMessage="Use JSON format: {code}"
+              values={{
+                code: <EuiCode>{JSON.stringify({ number_of_replicas: 1 })}</EuiCode>,
+              }}
+            />
+          }
+          isInvalid={Boolean(error)}
+          error={error}
+          fullWidth
+        >
+          <EuiCodeEditor
+            mode="json"
+            theme="textmate"
+            width="100%"
+            height="500px"
+            setOptions={{
+              showLineNumbers: false,
+              tabSize: 2,
+            }}
+            editorProps={{
+              $blockScrolling: Infinity,
             }}
+            showGutter={false}
+            minLines={6}
+            aria-label={i18n.translate(
+              'xpack.idxMgmt.templateForm.stepSettings.fieldIndexSettingsAriaLabel',
+              {
+                defaultMessage: 'Index settings editor',
+              }
+            )}
+            value={jsonContent}
+            onChange={setJsonContent}
+            data-test-subj="settingsEditor"
           />
-        }
-        isInvalid={Boolean(error)}
-        error={error}
-        fullWidth
-      >
-        <EuiCodeEditor
-          mode="json"
-          theme="textmate"
-          width="100%"
-          height="500px"
-          setOptions={{
-            showLineNumbers: false,
-            tabSize: 2,
-          }}
-          editorProps={{
-            $blockScrolling: Infinity,
-          }}
-          showGutter={false}
-          minLines={6}
-          aria-label={i18n.translate(
-            'xpack.idxMgmt.templateForm.stepSettings.fieldIndexSettingsAriaLabel',
-            {
-              defaultMessage: 'Index settings editor',
-            }
-          )}
-          value={content}
-          onChange={(updated: string) => setContent(updated)}
-          data-test-subj="settingsEditor"
-        />
-      </EuiFormRow>
-    </div>
-  );
-};
+        </EuiFormRow>
+      </div>
+    );
+  }
+);
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_settings_container.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_settings_container.tsx
new file mode 100644
index 0000000000000..4d7de644a1442
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_settings_container.tsx
@@ -0,0 +1,16 @@
+/*
+ * 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 { Forms } from '../../../../shared_imports';
+import { WizardContent } from '../template_form';
+import { StepSettings } from './step_settings';
+
+export const StepSettingsContainer = React.memo(() => {
+  const { defaultValue, updateContent } = Forms.useContent<WizardContent>('settings');
+
+  return <StepSettings defaultValue={defaultValue} onChange={updateContent} />;
+});
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/use_json_step.ts b/x-pack/plugins/index_management/public/application/components/template_form/steps/use_json_step.ts
index 25dbe784db3a1..4c1b36e3abba5 100644
--- a/x-pack/plugins/index_management/public/application/components/template_form/steps/use_json_step.ts
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/use_json_step.ts
@@ -7,31 +7,23 @@
 import { useEffect, useState, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 
-import { isJSON } from '../../../../shared_imports';
-import { StepProps, DataGetterFunc } from '../types';
+import { isJSON, Forms } from '../../../../shared_imports';
 
 interface Parameters {
-  prop: 'settings' | 'mappings' | 'aliases';
-  setDataGetter: StepProps['setDataGetter'];
-  onStepValidityChange: StepProps['onStepValidityChange'];
+  onChange: (content: Forms.Content) => void;
   defaultValue?: object;
 }
 
 const stringifyJson = (json: any) =>
   Object.keys(json).length ? JSON.stringify(json, null, 2) : '{\n\n}';
 
-export const useJsonStep = ({
-  prop,
-  defaultValue = {},
-  setDataGetter,
-  onStepValidityChange,
-}: Parameters) => {
-  const [content, setContent] = useState<string>(stringifyJson(defaultValue));
+export const useJsonStep = ({ defaultValue, onChange }: Parameters) => {
+  const [jsonContent, setJsonContent] = useState<string>(stringifyJson(defaultValue ?? {}));
   const [error, setError] = useState<string | null>(null);
 
   const validateContent = useCallback(() => {
     // We allow empty string as it will be converted to "{}""
-    const isValid = content.trim() === '' ? true : isJSON(content);
+    const isValid = jsonContent.trim() === '' ? true : isJSON(jsonContent);
     if (!isValid) {
       setError(
         i18n.translate('xpack.idxMgmt.validators.string.invalidJSONError', {
@@ -42,26 +34,28 @@ export const useJsonStep = ({
       setError(null);
     }
     return isValid;
-  }, [content]);
+  }, [jsonContent]);
 
-  const dataGetter = useCallback<DataGetterFunc>(() => {
+  useEffect(() => {
     const isValid = validateContent();
-    const value = isValid && content.trim() !== '' ? JSON.parse(content) : {};
-    // If no key has been added to the JSON object, we strip it out so an empty object is not sent in the request
-    const data = { [prop]: Object.keys(value).length > 0 ? value : undefined };
+    const getData = () => {
+      const value = isValid && jsonContent.trim() !== '' ? JSON.parse(jsonContent) : {};
+      // If no key has been added to the JSON object, we strip it out so an empty object is not sent in the request
+      return Object.keys(value).length > 0 ? value : undefined;
+    };
 
-    return Promise.resolve({ isValid, data, path: 'template' });
-  }, [content, validateContent, prop]);
+    const content = {
+      isValid,
+      validate: async () => isValid,
+      getData,
+    };
 
-  useEffect(() => {
-    const isValid = validateContent();
-    onStepValidityChange(isValid);
-    setDataGetter(dataGetter);
-  }, [content, dataGetter, onStepValidityChange, setDataGetter, validateContent]);
+    onChange(content);
+  }, [jsonContent, onChange, validateContent]);
 
   return {
-    content,
-    setContent,
+    jsonContent,
+    setJsonContent,
     error,
   };
 };
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx b/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx
index 52e26e6d3e895..9e6d49faac563 100644
--- a/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx
+++ b/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx
@@ -3,25 +3,24 @@
  * 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, useState, useRef, useCallback } from 'react';
+import React, { useCallback } from 'react';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiForm,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
 
-import { serializers } from '../../../shared_imports';
 import { TemplateDeserialized, CREATE_LEGACY_TEMPLATE_BY_DEFAULT } from '../../../../common';
-import { TemplateSteps } from './template_steps';
-import { StepAliases, StepLogistics, StepMappings, StepSettings, StepReview } from './steps';
-import { StepProps, DataGetterFunc } from './types';
+import { serializers, Forms } from '../../../shared_imports';
 import { SectionError } from '../section_error';
+import {
+  StepLogisticsContainer,
+  StepSettingsContainer,
+  StepMappingsContainer,
+  StepAliasesContainer,
+  StepReviewContainer,
+} from './steps';
 
 const { stripEmptyFields } = serializers;
+const { FormWizard, FormWizardStep } = Forms;
 
 interface Props {
   onSave: (template: TemplateDeserialized) => void;
@@ -32,244 +31,172 @@ interface Props {
   isEditing?: boolean;
 }
 
-interface ValidationState {
-  [key: number]: { isValid: boolean | undefined };
+export interface WizardContent {
+  logistics: Omit<TemplateDeserialized, '_kbnMeta' | 'template'>;
+  settings: TemplateDeserialized['template']['settings'];
+  mappings: TemplateDeserialized['template']['mappings'];
+  aliases: TemplateDeserialized['template']['aliases'];
 }
 
-const defaultValidation = { isValid: true };
+export type WizardSection = keyof WizardContent | 'review';
 
-const stepComponentMap: { [key: number]: React.FunctionComponent<StepProps> } = {
-  1: StepLogistics,
-  2: StepSettings,
-  3: StepMappings,
-  4: StepAliases,
-  5: StepReview,
+const wizardSections: { [id: string]: { id: WizardSection; label: string } } = {
+  logistics: {
+    id: 'logistics',
+    label: i18n.translate('xpack.idxMgmt.templateForm.steps.logisticsStepName', {
+      defaultMessage: 'Logistics',
+    }),
+  },
+  settings: {
+    id: 'settings',
+    label: i18n.translate('xpack.idxMgmt.templateForm.steps.settingsStepName', {
+      defaultMessage: 'Index settings',
+    }),
+  },
+  mappings: {
+    id: 'mappings',
+    label: i18n.translate('xpack.idxMgmt.templateForm.steps.mappingsStepName', {
+      defaultMessage: 'Mappings',
+    }),
+  },
+  aliases: {
+    id: 'aliases',
+    label: i18n.translate('xpack.idxMgmt.templateForm.steps.aliasesStepName', {
+      defaultMessage: 'Aliases',
+    }),
+  },
+  review: {
+    id: 'review',
+    label: i18n.translate('xpack.idxMgmt.templateForm.steps.summaryStepName', {
+      defaultMessage: 'Review template',
+    }),
+  },
 };
 
-export const TemplateForm: React.FunctionComponent<Props> = ({
+export const TemplateForm = ({
   defaultValue = {
     name: '',
     indexPatterns: [],
-    template: {},
+    template: {
+      settings: {},
+      mappings: {},
+      aliases: {},
+    },
     _kbnMeta: {
       isManaged: false,
       isLegacy: CREATE_LEGACY_TEMPLATE_BY_DEFAULT,
     },
   },
-  onSave,
+  isEditing,
   isSaving,
   saveError,
   clearSaveError,
-  isEditing,
-}) => {
-  const [currentStep, setCurrentStep] = useState<number>(1);
-  const [validation, setValidation] = useState<ValidationState>({
-    1: defaultValidation,
-    2: defaultValidation,
-    3: defaultValidation,
-    4: defaultValidation,
-    5: defaultValidation,
-  });
-
-  const template = useRef<TemplateDeserialized>(defaultValue);
-  const stepsDataGetters = useRef<Record<number, DataGetterFunc>>({});
-
-  const lastStep = Object.keys(stepComponentMap).length;
-  const CurrentStepComponent = stepComponentMap[currentStep];
-  const isStepValid = validation[currentStep].isValid;
-
-  const setStepDataGetter = useCallback(
-    (stepDataGetter: DataGetterFunc) => {
-      stepsDataGetters.current[currentStep] = stepDataGetter;
-    },
-    [currentStep]
-  );
-
-  const onStepValidityChange = useCallback(
-    (isValid: boolean | undefined) => {
-      setValidation((prev) => ({
-        ...prev,
-        [currentStep]: {
-          isValid,
-          errors: {},
-        },
-      }));
-    },
-    [currentStep]
-  );
-
-  const validateAndGetDataFromCurrentStep = async () => {
-    const validateAndGetStepData = stepsDataGetters.current[currentStep];
-
-    if (!validateAndGetStepData) {
-      throw new Error(`No data getter has been set for step "${currentStep}"`);
-    }
-
-    const { isValid, data, path } = await validateAndGetStepData();
-
-    if (isValid) {
-      // Update the template object with the current step data
-      if (path) {
-        // We only update a "slice" of the template
-        const sliceToUpdate = template.current[path as keyof TemplateDeserialized];
-
-        if (sliceToUpdate === null || typeof sliceToUpdate !== 'object') {
-          return { isValid, data };
-        }
-
-        template.current = {
-          ...template.current,
-          [path]: { ...sliceToUpdate, ...data },
-        };
-      } else {
-        template.current = { ...template.current, ...data };
-      }
-    }
-
-    return { isValid, data };
-  };
-
-  const updateCurrentStep = async (nextStep: number) => {
-    // All steps needs validation, except for the last step
-    const shouldValidate = currentStep !== lastStep;
-
-    if (shouldValidate) {
-      const isValid =
-        isStepValid === false ? false : (await validateAndGetDataFromCurrentStep()).isValid;
-
-      // If step is invalid do not let user proceed
-      if (!isValid) {
-        return;
-      }
-    }
-
-    setCurrentStep(nextStep);
-    clearSaveError();
-  };
-
-  const onBack = () => {
-    const prevStep = currentStep - 1;
-    updateCurrentStep(prevStep);
-  };
-
-  const onNext = () => {
-    const nextStep = currentStep + 1;
-    updateCurrentStep(nextStep);
+  onSave,
+}: Props) => {
+  const {
+    template: { settings, mappings, aliases },
+    _kbnMeta,
+    ...logistics
+  } = defaultValue;
+
+  const wizardDefaultValue: WizardContent = {
+    logistics,
+    settings,
+    mappings,
+    aliases,
   };
 
-  const saveButtonLabel = isEditing ? (
-    <FormattedMessage
-      id="xpack.idxMgmt.templateForm.saveButtonLabel"
-      defaultMessage="Save template"
-    />
-  ) : (
-    <FormattedMessage
-      id="xpack.idxMgmt.templateForm.createButtonLabel"
-      defaultMessage="Create template"
-    />
-  );
-
-  return (
-    <Fragment>
-      <TemplateSteps
-        currentStep={currentStep}
-        updateCurrentStep={updateCurrentStep}
-        isCurrentStepValid={isStepValid}
+  const i18nTexts = {
+    save: isEditing ? (
+      <FormattedMessage
+        id="xpack.idxMgmt.templateForm.saveButtonLabel"
+        defaultMessage="Save template"
       />
+    ) : (
+      <FormattedMessage
+        id="xpack.idxMgmt.templateForm.createButtonLabel"
+        defaultMessage="Create template"
+      />
+    ),
+  };
 
-      <EuiSpacer size="l" />
-
-      {saveError ? (
-        <Fragment>
-          <SectionError
-            title={
-              <FormattedMessage
-                id="xpack.idxMgmt.templateForm.saveTemplateError"
-                defaultMessage="Unable to create template"
-              />
-            }
-            error={saveError}
-            data-test-subj="saveTemplateError"
+  const apiError = saveError ? (
+    <>
+      <SectionError
+        title={
+          <FormattedMessage
+            id="xpack.idxMgmt.templateForm.saveTemplateError"
+            defaultMessage="Unable to create template"
           />
-          <EuiSpacer size="m" />
-        </Fragment>
-      ) : null}
-
-      <EuiForm data-test-subj="templateForm">
-        <CurrentStepComponent
-          key={currentStep}
-          template={template.current}
-          setDataGetter={setStepDataGetter}
-          updateCurrentStep={updateCurrentStep}
-          onStepValidityChange={onStepValidityChange}
-          isEditing={isEditing}
-        />
-        <EuiSpacer size="l" />
+        }
+        error={saveError}
+        data-test-subj="saveTemplateError"
+      />
+      <EuiSpacer size="m" />
+    </>
+  ) : null;
+
+  const buildTemplateObject = (initialTemplate: TemplateDeserialized) => (
+    wizardData: WizardContent
+  ): TemplateDeserialized => ({
+    ...initialTemplate,
+    ...wizardData.logistics,
+    template: {
+      settings: wizardData.settings,
+      mappings: wizardData.mappings,
+      aliases: wizardData.aliases,
+    },
+  });
 
-        <EuiFlexGroup justifyContent="spaceBetween">
-          <EuiFlexItem grow={false}>
-            <EuiFlexGroup>
-              {currentStep > 1 ? (
-                <EuiFlexItem grow={false}>
-                  <EuiButtonEmpty iconType="arrowLeft" onClick={onBack} data-test-subj="backButton">
-                    <FormattedMessage
-                      id="xpack.idxMgmt.templateForm.backButtonLabel"
-                      defaultMessage="Back"
-                    />
-                  </EuiButtonEmpty>
-                </EuiFlexItem>
-              ) : null}
+  const onSaveTemplate = useCallback(
+    async (wizardData: WizardContent) => {
+      const template = buildTemplateObject(defaultValue)(wizardData);
 
-              {currentStep < lastStep ? (
-                <EuiFlexItem grow={false}>
-                  <EuiButton
-                    fill
-                    iconType="arrowRight"
-                    onClick={onNext}
-                    iconSide="right"
-                    disabled={isStepValid === false}
-                    data-test-subj="nextButton"
-                  >
-                    <FormattedMessage
-                      id="xpack.idxMgmt.templateForm.nextButtonLabel"
-                      defaultMessage="Next"
-                    />
-                  </EuiButton>
-                </EuiFlexItem>
-              ) : null}
+      // We need to strip empty string, otherwise if the "order" or "version"
+      // are not set, they will be empty string and ES expect a number for those parameters.
+      onSave(
+        stripEmptyFields(template, {
+          types: ['string'],
+        }) as TemplateDeserialized
+      );
 
-              {currentStep === lastStep ? (
-                <EuiFlexItem grow={false}>
-                  <EuiButton
-                    fill
-                    color="secondary"
-                    iconType="check"
-                    onClick={onSave.bind(
-                      null,
-                      stripEmptyFields(template.current!, {
-                        types: ['string'],
-                      }) as TemplateDeserialized
-                    )}
-                    data-test-subj="submitButton"
-                    isLoading={isSaving}
-                  >
-                    {isSaving ? (
-                      <FormattedMessage
-                        id="xpack.idxMgmt.templateForm.savingButtonLabel"
-                        defaultMessage="Saving..."
-                      />
-                    ) : (
-                      saveButtonLabel
-                    )}
-                  </EuiButton>
-                </EuiFlexItem>
-              ) : null}
-            </EuiFlexGroup>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiForm>
+      clearSaveError();
+    },
+    [defaultValue, onSave, clearSaveError]
+  );
 
-      <EuiSpacer size="m" />
-    </Fragment>
+  return (
+    <FormWizard<WizardContent>
+      defaultValue={wizardDefaultValue}
+      onSave={onSaveTemplate}
+      isEditing={isEditing}
+      isSaving={isSaving}
+      apiError={apiError}
+      texts={i18nTexts}
+    >
+      <FormWizardStep
+        id={wizardSections.logistics.id}
+        label={wizardSections.logistics.label}
+        isRequired
+      >
+        <StepLogisticsContainer isEditing={isEditing} />
+      </FormWizardStep>
+
+      <FormWizardStep id={wizardSections.settings.id} label={wizardSections.settings.label}>
+        <StepSettingsContainer />
+      </FormWizardStep>
+
+      <FormWizardStep id={wizardSections.mappings.id} label={wizardSections.mappings.label}>
+        <StepMappingsContainer />
+      </FormWizardStep>
+
+      <FormWizardStep id={wizardSections.aliases.id} label={wizardSections.aliases.label}>
+        <StepAliasesContainer />
+      </FormWizardStep>
+
+      <FormWizardStep id={wizardSections.review.id} label={wizardSections.review.label}>
+        <StepReviewContainer getTemplateData={buildTemplateObject(defaultValue)} />
+      </FormWizardStep>
+    </FormWizard>
   );
 };
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/template_steps.tsx b/x-pack/plugins/index_management/public/application/components/template_form/template_steps.tsx
deleted file mode 100644
index 7a31c74c1a9c2..0000000000000
--- a/x-pack/plugins/index_management/public/application/components/template_form/template_steps.tsx
+++ /dev/null
@@ -1,51 +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 { EuiStepsHorizontal } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-
-interface Props {
-  currentStep: number;
-  updateCurrentStep: (step: number, maxCompletedStep: number) => void;
-  isCurrentStepValid: boolean | undefined;
-}
-
-const stepNamesMap: { [key: number]: string } = {
-  1: i18n.translate('xpack.idxMgmt.templateForm.steps.logisticsStepName', {
-    defaultMessage: 'Logistics',
-  }),
-  2: i18n.translate('xpack.idxMgmt.templateForm.steps.settingsStepName', {
-    defaultMessage: 'Index settings',
-  }),
-  3: i18n.translate('xpack.idxMgmt.templateForm.steps.mappingsStepName', {
-    defaultMessage: 'Mappings',
-  }),
-  4: i18n.translate('xpack.idxMgmt.templateForm.steps.aliasesStepName', {
-    defaultMessage: 'Aliases',
-  }),
-  5: i18n.translate('xpack.idxMgmt.templateForm.steps.summaryStepName', {
-    defaultMessage: 'Review template',
-  }),
-};
-
-export const TemplateSteps: React.FunctionComponent<Props> = ({
-  currentStep,
-  updateCurrentStep,
-  isCurrentStepValid,
-}) => {
-  const steps = [1, 2, 3, 4, 5].map((step) => {
-    return {
-      title: stepNamesMap[step],
-      isComplete: currentStep > step,
-      isSelected: currentStep === step,
-      disabled: step !== currentStep && isCurrentStepValid === false,
-      onClick: () => updateCurrentStep(step, step - 1),
-    };
-  });
-
-  return <EuiStepsHorizontal steps={steps} />;
-};
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/types.ts b/x-pack/plugins/index_management/public/application/components/template_form/types.ts
deleted file mode 100644
index 5db53e91ed261..0000000000000
--- a/x-pack/plugins/index_management/public/application/components/template_form/types.ts
+++ /dev/null
@@ -1,24 +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 { TemplateDeserialized } from '../../../../common';
-
-export interface StepProps {
-  template?: TemplateDeserialized;
-  setDataGetter: (dataGetter: DataGetterFunc) => void;
-  updateCurrentStep: (step: number) => void;
-  onStepValidityChange: (isValid: boolean | undefined) => void;
-  isEditing?: boolean;
-}
-
-export type DataGetterFunc = () => Promise<{
-  /** Is the step data valid or not */
-  isValid: boolean;
-  /** The current step data (can be invalid) */
-  data: any;
-  /** Optional "slice" of the complete object the step is updating  */
-  path?: string;
-}>;
diff --git a/x-pack/plugins/index_management/public/shared_imports.ts b/x-pack/plugins/index_management/public/shared_imports.ts
index afd5a5cf650e1..69cd07ba6dba0 100644
--- a/x-pack/plugins/index_management/public/shared_imports.ts
+++ b/x-pack/plugins/index_management/public/shared_imports.ts
@@ -10,6 +10,7 @@ export {
   UseRequestConfig,
   sendRequest,
   useRequest,
+  Forms,
 } from '../../../../src/plugins/es_ui_shared/public/';
 
 export {
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 37cdbf5c0d8a9..5ba2541cbb050 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -7080,12 +7080,9 @@
     "xpack.idxMgmt.templateEdit.managedTemplateWarningTitle": "マネジドテンプレートの編集は許可されていません。",
     "xpack.idxMgmt.templateEdit.systemTemplateWarningDescription": "システムテンプレートは内部オペレーションに不可欠です。",
     "xpack.idxMgmt.templateEdit.systemTemplateWarningTitle": "システムテンプレートを編集することで、Kibana に重大な障害が生じる可能性があります",
-    "xpack.idxMgmt.templateForm.backButtonLabel": "戻る",
     "xpack.idxMgmt.templateForm.createButtonLabel": "テンプレートを作成",
-    "xpack.idxMgmt.templateForm.nextButtonLabel": "次へ",
     "xpack.idxMgmt.templateForm.saveButtonLabel": "テンプレートを保存",
     "xpack.idxMgmt.templateForm.saveTemplateError": "テンプレートを作成できません",
-    "xpack.idxMgmt.templateForm.savingButtonLabel": "保存中…",
     "xpack.idxMgmt.templateForm.stepAliases.aliasesDescription": "エイリアスをセットアップして、インデックスに関連付けてください。",
     "xpack.idxMgmt.templateForm.stepAliases.aliasesEditorHelpText": "JSON フォーマットを使用: {code}",
     "xpack.idxMgmt.templateForm.stepAliases.docsButtonLabel": "インデックステンプレートドキュメント",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 2dfa0d40b9a8a..cddc9b6d38ad5 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -7084,12 +7084,9 @@
     "xpack.idxMgmt.templateEdit.managedTemplateWarningTitle": "不允许编辑托管模板",
     "xpack.idxMgmt.templateEdit.systemTemplateWarningDescription": "系统模板对内部操作至关重要。",
     "xpack.idxMgmt.templateEdit.systemTemplateWarningTitle": "编辑系统模板会使 Kibana 无法运行",
-    "xpack.idxMgmt.templateForm.backButtonLabel": "上一步",
     "xpack.idxMgmt.templateForm.createButtonLabel": "创建模板",
-    "xpack.idxMgmt.templateForm.nextButtonLabel": "下一步",
     "xpack.idxMgmt.templateForm.saveButtonLabel": "保存模板",
     "xpack.idxMgmt.templateForm.saveTemplateError": "无法创建模板",
-    "xpack.idxMgmt.templateForm.savingButtonLabel": "正在保存……",
     "xpack.idxMgmt.templateForm.stepAliases.aliasesDescription": "设置要与索引关联的别名。",
     "xpack.idxMgmt.templateForm.stepAliases.aliasesEditorHelpText": "使用 JSON 格式：{code}",
     "xpack.idxMgmt.templateForm.stepAliases.docsButtonLabel": "索引模板文档",

From 38a88e1019ca8345aa3ce62fe0cd111b55946710 Mon Sep 17 00:00:00 2001
From: Kerry Gallagher <k.gallagher.05@gmail.com>
Date: Thu, 18 Jun 2020 17:32:30 +0100
Subject: [PATCH 32/63] Amend export used for default (#69158)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../components/alerting/logs/expression_editor/editor.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/infra/public/components/alerting/logs/expression_editor/editor.tsx b/x-pack/plugins/infra/public/components/alerting/logs/expression_editor/editor.tsx
index a3a48d477425b..9e4e78ca392fd 100644
--- a/x-pack/plugins/infra/public/components/alerting/logs/expression_editor/editor.tsx
+++ b/x-pack/plugins/infra/public/components/alerting/logs/expression_editor/editor.tsx
@@ -239,4 +239,4 @@ export const Editor: React.FC<Props> = (props) => {
 
 // required for dynamic import
 // eslint-disable-next-line import/no-default-export
-export default Editor;
+export default ExpressionEditor;

From 2544daf21b9fb4cfcdef92c62d312ef4c1df9353 Mon Sep 17 00:00:00 2001
From: Yara Tercero <yctercero@users.noreply.github.com>
Date: Thu, 18 Jun 2020 12:47:24 -0400
Subject: [PATCH 33/63] [SIEM][Exceptions] - Updates exception structure and
 corresponding UI types (#69120)

### Summary

This PR is meant to update the `ExceptionListItemSchema.entries` structure to align with the most recent conversations regarding the need for a more explicit depiction of `nested` fields. To summarize:

- Adds schema validation for requests and responses within `lists/public/exceptions/api.ts`. It was super helpful in catching existing bugs. Anyone that uses the api will run through this validation. If the client tries to send up a malformed request, the request will not be made and an error returned. If the request is successful, but somehow the response is malformed, an error is returned. There may be some UX things to figure out about how to best communicate these errors to the user, or if surfacing the raw error is fine.
- Updates `entries` structure in lists plugin api
- Updates hooks and tests within `lists/public` that make reference to new structure
- Updates and adds unit tests for updated schemas
- Removes unused temporary types in `security_solution/public/common/components/exceptions/` to now reference updated schema
- Updates UI tests
- Updates `lists/server/scripts`
---
 x-pack/plugins/lists/common/constants.mock.ts |  22 +-
 .../common/schemas/common/schemas.test.ts     |  63 +++
 .../lists/common/schemas/common/schemas.ts    |  18 +
 .../create_exception_list_item_schema.test.ts |  33 +-
 .../create_exception_list_schema.mock.ts      |   6 +-
 .../create_exception_list_schema.test.ts      |  17 +-
 .../delete_exception_list_item_schema.mock.ts |  14 +
 .../delete_exception_list_item_schema.test.ts |  61 +++
 .../delete_exception_list_schema.mock.ts      |  14 +
 .../delete_exception_list_schema.test.ts      |  61 +++
 .../read_exception_list_item_schema.mock.ts   |  15 +
 .../read_exception_list_item_schema.test.ts   | 129 ++++++
 .../read_exception_list_item_schema.ts        |  12 +-
 .../read_exception_list_schema.mock.ts        |  15 +
 .../read_exception_list_schema.test.ts        | 126 ++++++
 .../request/read_exception_list_schema.ts     |  12 +-
 .../update_exception_list_schema.mock.ts      |  21 +
 .../update_exception_list_schema.test.ts      | 147 ++++++
 .../exception_list_item_schema.mock.ts        |  16 +-
 .../response/exception_list_schema.test.ts    | 191 ++++++++
 .../found_exception_list_item_schema.test.ts  | 151 +++++++
 .../found_exception_list_schema.test.ts       | 148 +++++++
 .../common/schemas/types/comments.mock.ts     |  22 +
 .../types/default_entries_array.test.ts       |  98 ++++
 .../schemas/types/default_entries_array.ts    |   8 +-
 .../common/schemas/types/entries.mock.ts      |  66 +++
 .../common/schemas/types/entries.test.ts      | 353 +++++++++++++++
 .../lists/common/schemas/types/entries.ts     |  60 ++-
 .../lists/public/exceptions/__mocks__/api.ts  |  71 ---
 .../lists/public/exceptions/api.test.ts       | 419 ++++++++++++++++--
 x-pack/plugins/lists/public/exceptions/api.ts | 345 +++++++++++---
 .../hooks/persist_exception_item.test.tsx     |  34 +-
 .../hooks/persist_exception_item.tsx          |  25 +-
 .../hooks/persist_exception_list.test.tsx     |  34 +-
 .../hooks/persist_exception_list.tsx          |  11 +-
 .../public/exceptions/hooks/use_api.test.tsx  |   2 -
 .../hooks/use_exception_list.test.tsx         |  67 ++-
 .../exceptions/hooks/use_exception_list.tsx   |   4 +-
 .../plugins/lists/public/exceptions/mock.ts   |  42 --
 .../plugins/lists/public/exceptions/types.ts  |  41 +-
 x-pack/plugins/lists/public/index.tsx         |   8 +-
 .../server/saved_objects/exception_list.ts    |  32 +-
 .../new/exception_list_item.json              |   9 +-
 .../new/exception_list_item_agnostic.json     |  22 +-
 .../new/exception_list_item_auto_id.json      |  22 +-
 ...exception_list_item_detection_auto_id.json |  30 +-
 .../updates/simple_update_agnostic.json       |   3 +-
 .../updates/simple_update_item.json           |   3 +-
 .../components/exceptions/exceptions.mock.ts  |  14 +
 .../components/exceptions/helpers.test.tsx    | 247 ++++-------
 .../common/components/exceptions/helpers.tsx  |  64 ++-
 .../common/components/exceptions/mocks.ts     | 108 -----
 .../common/components/exceptions/operators.ts |  35 +-
 .../common/components/exceptions/types.ts     |  72 +--
 .../exception_item/exception_details.test.tsx |  53 +--
 .../exception_item/exception_details.tsx      |   3 +-
 .../exception_item/exception_entries.test.tsx |   2 +-
 .../exception_item/exception_entries.tsx      |  10 +-
 .../viewer/exception_item/index.stories.tsx   |  25 +-
 .../viewer/exception_item/index.test.tsx      |  21 +-
 .../viewer/exception_item/index.tsx           |  10 +-
 .../viewer/exceptions_viewer_item.test.tsx    |  16 +-
 .../viewer/exceptions_viewer_items.tsx        |   9 +-
 .../exceptions/viewer/index.test.tsx          |   4 +-
 .../components/exceptions/viewer/index.tsx    |  18 +-
 .../components/exceptions/viewer/reducer.ts   |  15 +-
 .../public/lists_plugin_deps.ts               |  14 +-
 67 files changed, 3047 insertions(+), 816 deletions(-)
 create mode 100644 x-pack/plugins/lists/common/schemas/common/schemas.test.ts
 create mode 100644 x-pack/plugins/lists/common/schemas/request/delete_exception_list_item_schema.mock.ts
 create mode 100644 x-pack/plugins/lists/common/schemas/request/delete_exception_list_item_schema.test.ts
 create mode 100644 x-pack/plugins/lists/common/schemas/request/delete_exception_list_schema.mock.ts
 create mode 100644 x-pack/plugins/lists/common/schemas/request/delete_exception_list_schema.test.ts
 create mode 100644 x-pack/plugins/lists/common/schemas/request/read_exception_list_item_schema.mock.ts
 create mode 100644 x-pack/plugins/lists/common/schemas/request/read_exception_list_item_schema.test.ts
 create mode 100644 x-pack/plugins/lists/common/schemas/request/read_exception_list_schema.mock.ts
 create mode 100644 x-pack/plugins/lists/common/schemas/request/read_exception_list_schema.test.ts
 create mode 100644 x-pack/plugins/lists/common/schemas/request/update_exception_list_schema.mock.ts
 create mode 100644 x-pack/plugins/lists/common/schemas/request/update_exception_list_schema.test.ts
 create mode 100644 x-pack/plugins/lists/common/schemas/response/exception_list_schema.test.ts
 create mode 100644 x-pack/plugins/lists/common/schemas/response/found_exception_list_item_schema.test.ts
 create mode 100644 x-pack/plugins/lists/common/schemas/response/found_exception_list_schema.test.ts
 create mode 100644 x-pack/plugins/lists/common/schemas/types/comments.mock.ts
 create mode 100644 x-pack/plugins/lists/common/schemas/types/default_entries_array.test.ts
 create mode 100644 x-pack/plugins/lists/common/schemas/types/entries.mock.ts
 create mode 100644 x-pack/plugins/lists/common/schemas/types/entries.test.ts
 delete mode 100644 x-pack/plugins/lists/public/exceptions/__mocks__/api.ts
 delete mode 100644 x-pack/plugins/lists/public/exceptions/mock.ts
 create mode 100644 x-pack/plugins/security_solution/public/common/components/exceptions/exceptions.mock.ts
 delete mode 100644 x-pack/plugins/security_solution/public/common/components/exceptions/mocks.ts

diff --git a/x-pack/plugins/lists/common/constants.mock.ts b/x-pack/plugins/lists/common/constants.mock.ts
index 0df0aeff593db..24cfe440bd7d8 100644
--- a/x-pack/plugins/lists/common/constants.mock.ts
+++ b/x-pack/plugins/lists/common/constants.mock.ts
@@ -3,6 +3,8 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { EntriesArray } from './schemas/types';
+
 export const DATE_NOW = '2020-04-20T15:25:31.830Z';
 export const USER = 'some user';
 export const LIST_INDEX = '.lists';
@@ -32,9 +34,25 @@ export const NAMESPACE_TYPE = 'single';
 
 // Exception List specific
 export const ID = 'uuid_here';
+export const ITEM_ID = 'some-list-item-id';
 export const ENDPOINT_TYPE = 'endpoint';
-export const ENTRIES = [
-  { field: 'some.field', match: 'some value', match_any: undefined, operator: 'included' },
+export const FIELD = 'host.name';
+export const OPERATOR = 'included';
+export const ENTRY_VALUE = 'some host name';
+export const MATCH = 'match';
+export const MATCH_ANY = 'match_any';
+export const LIST = 'list';
+export const EXISTS = 'exists';
+export const NESTED = 'nested';
+export const ENTRIES: EntriesArray = [
+  {
+    entries: [
+      { field: 'some.not.nested.field', operator: 'included', type: 'match', value: 'some value' },
+    ],
+    field: 'some.field',
+    type: 'nested',
+  },
+  { field: 'some.not.nested.field', operator: 'included', type: 'match', value: 'some value' },
 ];
 export const ITEM_TYPE = 'simple';
 export const _TAGS = [];
diff --git a/x-pack/plugins/lists/common/schemas/common/schemas.test.ts b/x-pack/plugins/lists/common/schemas/common/schemas.test.ts
new file mode 100644
index 0000000000000..eed5be39b7a03
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/common/schemas.test.ts
@@ -0,0 +1,63 @@
+/*
+ * 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 { pipe } from 'fp-ts/lib/pipeable';
+import { left } from 'fp-ts/lib/Either';
+
+import { foldLeftRight, getPaths } from '../../siem_common_deps';
+
+import { operator_type as operatorType } from './schemas';
+
+describe('Common schemas', () => {
+  describe('operatorType', () => {
+    test('it should validate for "match"', () => {
+      const payload = 'match';
+      const decoded = operatorType.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(payload);
+    });
+
+    test('it should validate for "match_any"', () => {
+      const payload = 'match_any';
+      const decoded = operatorType.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(payload);
+    });
+
+    test('it should validate for "list"', () => {
+      const payload = 'list';
+      const decoded = operatorType.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(payload);
+    });
+
+    test('it should validate for "exists"', () => {
+      const payload = 'exists';
+      const decoded = operatorType.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(payload);
+    });
+
+    test('it should contain 4 keys', () => {
+      // Might seem like a weird test, but its meant to
+      // ensure that if operatorType is updated, you
+      // also update the OperatorTypeEnum, a workaround
+      // for io-ts not yet supporting enums
+      // https://github.com/gcanti/io-ts/issues/67
+      const keys = Object.keys(operatorType.keys);
+
+      expect(keys.length).toEqual(4);
+    });
+  });
+});
diff --git a/x-pack/plugins/lists/common/schemas/common/schemas.ts b/x-pack/plugins/lists/common/schemas/common/schemas.ts
index 3d1f537a9ca41..fea8a219bc774 100644
--- a/x-pack/plugins/lists/common/schemas/common/schemas.ts
+++ b/x-pack/plugins/lists/common/schemas/common/schemas.ts
@@ -127,3 +127,21 @@ export type CursorOrUndefined = t.TypeOf<typeof cursorOrUndefined>;
 
 export const namespace_type = DefaultNamespace;
 export type NamespaceType = t.TypeOf<typeof namespace_type>;
+
+export const operator = t.keyof({ excluded: null, included: null });
+export type Operator = t.TypeOf<typeof operator>;
+
+export const operator_type = t.keyof({
+  exists: null,
+  list: null,
+  match: null,
+  match_any: null,
+});
+export type OperatorType = t.TypeOf<typeof operator_type>;
+export enum OperatorTypeEnum {
+  NESTED = 'nested',
+  MATCH = 'match',
+  MATCH_ANY = 'match_any',
+  EXISTS = 'exists',
+  LIST = 'list',
+}
diff --git a/x-pack/plugins/lists/common/schemas/request/create_exception_list_item_schema.test.ts b/x-pack/plugins/lists/common/schemas/request/create_exception_list_item_schema.test.ts
index 61437b1f04ce3..ccafe70406ecb 100644
--- a/x-pack/plugins/lists/common/schemas/request/create_exception_list_item_schema.test.ts
+++ b/x-pack/plugins/lists/common/schemas/request/create_exception_list_item_schema.test.ts
@@ -15,16 +15,15 @@ import {
 } from './create_exception_list_item_schema';
 import { getCreateExceptionListItemSchemaMock } from './create_exception_list_item_schema.mock';
 
-describe('create_exception_list_schema', () => {
-  test('it should validate a typical exception list item request', () => {
+describe('create_exception_list_item_schema', () => {
+  test('it should validate a typical exception list item request not counting the auto generated uuid', () => {
     const payload = getCreateExceptionListItemSchemaMock();
-    const outputPayload = getCreateExceptionListItemSchemaMock();
     const decoded = createExceptionListItemSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    outputPayload.item_id = (message.schema as CreateExceptionListItemSchema).item_id;
+    delete (message.schema as CreateExceptionListItemSchema).item_id;
     expect(getPaths(left(message.errors))).toEqual([]);
-    expect(message.schema).toEqual(outputPayload);
+    expect(message.schema).toEqual(payload);
   });
 
   test('it should not accept an undefined for "description"', () => {
@@ -75,20 +74,20 @@ describe('create_exception_list_schema', () => {
     expect(message.schema).toEqual({});
   });
 
-  test('it should accept an undefined for "meta" but strip it out', () => {
+  test('it should accept an undefined for "meta" but strip it out and generate a correct body not counting the auto generated uuid', () => {
     const payload = getCreateExceptionListItemSchemaMock();
     const outputPayload = getCreateExceptionListItemSchemaMock();
     delete payload.meta;
+    delete outputPayload.meta;
     const decoded = createExceptionListItemSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-    delete outputPayload.meta;
-    outputPayload.item_id = (message.schema as CreateExceptionListItemSchema).item_id;
+    delete (message.schema as CreateExceptionListItemSchema).item_id;
     expect(getPaths(left(message.errors))).toEqual([]);
     expect(message.schema).toEqual(outputPayload);
   });
 
-  test('it should accept an undefined for "comments" but return an array', () => {
+  test('it should accept an undefined for "comments" but return an array and generate a correct body not counting the auto generated uuid', () => {
     const inputPayload = getCreateExceptionListItemSchemaMock();
     const outputPayload = getCreateExceptionListItemSchemaMock();
     delete inputPayload.comments;
@@ -96,7 +95,7 @@ describe('create_exception_list_schema', () => {
     const decoded = createExceptionListItemSchema.decode(inputPayload);
     const checked = exactCheck(inputPayload, decoded);
     const message = pipe(checked, foldLeftRight);
-    outputPayload.item_id = (message.schema as CreateExceptionListItemSchema).item_id;
+    delete (message.schema as CreateExceptionListItemSchema).item_id;
     expect(getPaths(left(message.errors))).toEqual([]);
     expect(message.schema).toEqual(outputPayload);
   });
@@ -109,12 +108,12 @@ describe('create_exception_list_schema', () => {
     const decoded = createExceptionListItemSchema.decode(inputPayload);
     const checked = exactCheck(inputPayload, decoded);
     const message = pipe(checked, foldLeftRight);
-    outputPayload.item_id = (message.schema as CreateExceptionListItemSchema).item_id;
+    delete (message.schema as CreateExceptionListItemSchema).item_id;
     expect(getPaths(left(message.errors))).toEqual([]);
     expect(message.schema).toEqual(outputPayload);
   });
 
-  test('it should accept an undefined for "namespace_type" but return enum "single"', () => {
+  test('it should accept an undefined for "namespace_type" but return enum "single" and generate a correct body not counting the auto generated uuid', () => {
     const inputPayload = getCreateExceptionListItemSchemaMock();
     const outputPayload = getCreateExceptionListItemSchemaMock();
     delete inputPayload.namespace_type;
@@ -122,12 +121,12 @@ describe('create_exception_list_schema', () => {
     const decoded = createExceptionListItemSchema.decode(inputPayload);
     const checked = exactCheck(inputPayload, decoded);
     const message = pipe(checked, foldLeftRight);
-    outputPayload.item_id = (message.schema as CreateExceptionListItemSchema).item_id;
+    delete (message.schema as CreateExceptionListItemSchema).item_id;
     expect(getPaths(left(message.errors))).toEqual([]);
     expect(message.schema).toEqual(outputPayload);
   });
 
-  test('it should accept an undefined for "tags" but return an array', () => {
+  test('it should accept an undefined for "tags" but return an array and generate a correct body not counting the auto generated uuid', () => {
     const inputPayload = getCreateExceptionListItemSchemaMock();
     const outputPayload = getCreateExceptionListItemSchemaMock();
     delete inputPayload.tags;
@@ -135,12 +134,12 @@ describe('create_exception_list_schema', () => {
     const decoded = createExceptionListItemSchema.decode(inputPayload);
     const checked = exactCheck(inputPayload, decoded);
     const message = pipe(checked, foldLeftRight);
-    outputPayload.item_id = (message.schema as CreateExceptionListItemSchema).item_id;
+    delete (message.schema as CreateExceptionListItemSchema).item_id;
     expect(getPaths(left(message.errors))).toEqual([]);
     expect(message.schema).toEqual(outputPayload);
   });
 
-  test('it should accept an undefined for "_tags" but return an array', () => {
+  test('it should accept an undefined for "_tags" but return an array and generate a correct body not counting the auto generated uuid', () => {
     const inputPayload = getCreateExceptionListItemSchemaMock();
     const outputPayload = getCreateExceptionListItemSchemaMock();
     delete inputPayload._tags;
@@ -148,7 +147,7 @@ describe('create_exception_list_schema', () => {
     const decoded = createExceptionListItemSchema.decode(inputPayload);
     const checked = exactCheck(inputPayload, decoded);
     const message = pipe(checked, foldLeftRight);
-    outputPayload.item_id = (message.schema as CreateExceptionListItemSchema).item_id;
+    delete (message.schema as CreateExceptionListItemSchema).item_id;
     expect(getPaths(left(message.errors))).toEqual([]);
     expect(message.schema).toEqual(outputPayload);
   });
diff --git a/x-pack/plugins/lists/common/schemas/request/create_exception_list_schema.mock.ts b/x-pack/plugins/lists/common/schemas/request/create_exception_list_schema.mock.ts
index f0b98cb96f743..22a56f7d42b70 100644
--- a/x-pack/plugins/lists/common/schemas/request/create_exception_list_schema.mock.ts
+++ b/x-pack/plugins/lists/common/schemas/request/create_exception_list_schema.mock.ts
@@ -4,17 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { DESCRIPTION, LIST_ID, META, NAME, NAMESPACE_TYPE, TYPE } from '../../constants.mock';
+import { DESCRIPTION, ENDPOINT_TYPE, META, NAME, NAMESPACE_TYPE } from '../../constants.mock';
 
 import { CreateExceptionListSchema } from './create_exception_list_schema';
 
 export const getCreateExceptionListSchemaMock = (): CreateExceptionListSchema => ({
   _tags: [],
   description: DESCRIPTION,
-  list_id: LIST_ID,
+  list_id: undefined,
   meta: META,
   name: NAME,
   namespace_type: NAMESPACE_TYPE,
   tags: [],
-  type: TYPE,
+  type: ENDPOINT_TYPE,
 });
diff --git a/x-pack/plugins/lists/common/schemas/request/create_exception_list_schema.test.ts b/x-pack/plugins/lists/common/schemas/request/create_exception_list_schema.test.ts
index f19c50c6b42ae..21270f526900b 100644
--- a/x-pack/plugins/lists/common/schemas/request/create_exception_list_schema.test.ts
+++ b/x-pack/plugins/lists/common/schemas/request/create_exception_list_schema.test.ts
@@ -16,27 +16,28 @@ import {
 import { getCreateExceptionListSchemaMock } from './create_exception_list_schema.mock';
 
 describe('create_exception_list_schema', () => {
-  test('it should validate a typical exception lists request', () => {
+  test('it should validate a typical exception lists request and generate a correct body not counting the uuid', () => {
     const payload = getCreateExceptionListSchemaMock();
     const decoded = createExceptionListSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
-
+    delete (message.schema as CreateExceptionListSchema).list_id;
     expect(getPaths(left(message.errors))).toEqual([]);
     expect(message.schema).toEqual(payload);
   });
 
-  test('it should accept an undefined for meta', () => {
+  test('it should accept an undefined for "meta" and generate a correct body not counting the uuid', () => {
     const payload = getCreateExceptionListSchemaMock();
     delete payload.meta;
     const decoded = createExceptionListSchema.decode(payload);
     const checked = exactCheck(payload, decoded);
     const message = pipe(checked, foldLeftRight);
+    delete (message.schema as CreateExceptionListSchema).list_id;
     expect(getPaths(left(message.errors))).toEqual([]);
     expect(message.schema).toEqual(payload);
   });
 
-  test('it should accept an undefined for tags but return an array', () => {
+  test('it should accept an undefined for "tags" but return an array and generate a correct body not counting the uuid', () => {
     const inputPayload = getCreateExceptionListSchemaMock();
     const outputPayload = getCreateExceptionListSchemaMock();
     delete inputPayload.tags;
@@ -44,11 +45,12 @@ describe('create_exception_list_schema', () => {
     const decoded = createExceptionListSchema.decode(inputPayload);
     const checked = exactCheck(inputPayload, decoded);
     const message = pipe(checked, foldLeftRight);
+    delete (message.schema as CreateExceptionListSchema).list_id;
     expect(getPaths(left(message.errors))).toEqual([]);
     expect(message.schema).toEqual(outputPayload);
   });
 
-  test('it should accept an undefined for _tags but return an array', () => {
+  test('it should accept an undefined for "_tags" but return an array and generate a correct body not counting the uuid', () => {
     const inputPayload = getCreateExceptionListSchemaMock();
     const outputPayload = getCreateExceptionListSchemaMock();
     delete inputPayload._tags;
@@ -56,11 +58,12 @@ describe('create_exception_list_schema', () => {
     const decoded = createExceptionListSchema.decode(inputPayload);
     const checked = exactCheck(inputPayload, decoded);
     const message = pipe(checked, foldLeftRight);
+    delete (message.schema as CreateExceptionListSchema).list_id;
     expect(getPaths(left(message.errors))).toEqual([]);
     expect(message.schema).toEqual(outputPayload);
   });
 
-  test('it should accept an undefined for list_id and auto generate a uuid', () => {
+  test('it should accept an undefined for "list_id" and auto generate a uuid', () => {
     const inputPayload = getCreateExceptionListSchemaMock();
     delete inputPayload.list_id;
     const decoded = createExceptionListSchema.decode(inputPayload);
@@ -72,7 +75,7 @@ describe('create_exception_list_schema', () => {
     );
   });
 
-  test('it should accept an undefined for list_id and generate a correct body not counting the uuid', () => {
+  test('it should accept an undefined for "list_id" and generate a correct body not counting the uuid', () => {
     const inputPayload = getCreateExceptionListSchemaMock();
     delete inputPayload.list_id;
     const decoded = createExceptionListSchema.decode(inputPayload);
diff --git a/x-pack/plugins/lists/common/schemas/request/delete_exception_list_item_schema.mock.ts b/x-pack/plugins/lists/common/schemas/request/delete_exception_list_item_schema.mock.ts
new file mode 100644
index 0000000000000..d2d13f58af689
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/request/delete_exception_list_item_schema.mock.ts
@@ -0,0 +1,14 @@
+/*
+ * 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 { ID, NAMESPACE_TYPE } from '../../constants.mock';
+
+import { DeleteExceptionListItemSchema } from './delete_exception_list_item_schema';
+
+export const getDeleteExceptionListItemSchemaMock = (): DeleteExceptionListItemSchema => ({
+  id: ID,
+  namespace_type: NAMESPACE_TYPE,
+});
diff --git a/x-pack/plugins/lists/common/schemas/request/delete_exception_list_item_schema.test.ts b/x-pack/plugins/lists/common/schemas/request/delete_exception_list_item_schema.test.ts
new file mode 100644
index 0000000000000..4b42f79a89329
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/request/delete_exception_list_item_schema.test.ts
@@ -0,0 +1,61 @@
+/*
+ * 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 { left } from 'fp-ts/lib/Either';
+import { pipe } from 'fp-ts/lib/pipeable';
+
+import { exactCheck, foldLeftRight, getPaths } from '../../siem_common_deps';
+
+import {
+  DeleteExceptionListItemSchema,
+  deleteExceptionListItemSchema,
+} from './delete_exception_list_item_schema';
+import { getDeleteExceptionListItemSchemaMock } from './delete_exception_list_item_schema.mock';
+
+describe('delete_exception_list_item_schema', () => {
+  test('it should validate a typical exception list item request', () => {
+    const payload = getDeleteExceptionListItemSchemaMock();
+    const decoded = deleteExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  // TODO It does allow an id of undefined, is this wanted behavior?
+  test.skip('it should NOT accept an undefined for an "id"', () => {
+    const payload = getDeleteExceptionListItemSchemaMock();
+    delete payload.id;
+    const decoded = deleteExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "undefined" supplied to "id"']);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should accept an undefined for "namespace_type" but default to "single"', () => {
+    const payload = getDeleteExceptionListItemSchemaMock();
+    delete payload.namespace_type;
+    const decoded = deleteExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(getDeleteExceptionListItemSchemaMock());
+  });
+
+  test('it should not allow an extra key to be sent in', () => {
+    const payload: DeleteExceptionListItemSchema & {
+      extraKey?: string;
+    } = getDeleteExceptionListItemSchemaMock();
+    payload.extraKey = 'some new value';
+    const decoded = deleteExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual(['invalid keys "extraKey"']);
+    expect(message.schema).toEqual({});
+  });
+});
diff --git a/x-pack/plugins/lists/common/schemas/request/delete_exception_list_schema.mock.ts b/x-pack/plugins/lists/common/schemas/request/delete_exception_list_schema.mock.ts
new file mode 100644
index 0000000000000..6a8fefdce0925
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/request/delete_exception_list_schema.mock.ts
@@ -0,0 +1,14 @@
+/*
+ * 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 { ID, NAMESPACE_TYPE } from '../../constants.mock';
+
+import { DeleteExceptionListSchema } from './delete_exception_list_schema';
+
+export const getDeleteExceptionListSchemaMock = (): DeleteExceptionListSchema => ({
+  id: ID,
+  namespace_type: NAMESPACE_TYPE,
+});
diff --git a/x-pack/plugins/lists/common/schemas/request/delete_exception_list_schema.test.ts b/x-pack/plugins/lists/common/schemas/request/delete_exception_list_schema.test.ts
new file mode 100644
index 0000000000000..d925de8013c13
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/request/delete_exception_list_schema.test.ts
@@ -0,0 +1,61 @@
+/*
+ * 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 { left } from 'fp-ts/lib/Either';
+import { pipe } from 'fp-ts/lib/pipeable';
+
+import { exactCheck, foldLeftRight, getPaths } from '../../siem_common_deps';
+
+import {
+  DeleteExceptionListSchema,
+  deleteExceptionListSchema,
+} from './delete_exception_list_schema';
+import { getDeleteExceptionListSchemaMock } from './delete_exception_list_schema.mock';
+
+describe('delete_exception_list_schema', () => {
+  test('it should validate a typical exception list request', () => {
+    const payload = getDeleteExceptionListSchemaMock();
+    const decoded = deleteExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  // TODO It does allow an id of undefined, is this wanted behavior?
+  test.skip('it should NOT accept an undefined for an id', () => {
+    const payload = getDeleteExceptionListSchemaMock();
+    delete payload.id;
+    const decoded = deleteExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "undefined" supplied to "id"']);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should accept an undefined for "namespace_type" but default to "single"', () => {
+    const payload = getDeleteExceptionListSchemaMock();
+    delete payload.namespace_type;
+    const decoded = deleteExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(getDeleteExceptionListSchemaMock());
+  });
+
+  test('it should not allow an extra key to be sent in', () => {
+    const payload: DeleteExceptionListSchema & {
+      extraKey?: string;
+    } = getDeleteExceptionListSchemaMock();
+    payload.extraKey = 'some new value';
+    const decoded = deleteExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual(['invalid keys "extraKey"']);
+    expect(message.schema).toEqual({});
+  });
+});
diff --git a/x-pack/plugins/lists/common/schemas/request/read_exception_list_item_schema.mock.ts b/x-pack/plugins/lists/common/schemas/request/read_exception_list_item_schema.mock.ts
new file mode 100644
index 0000000000000..71c8a4d8c8161
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/request/read_exception_list_item_schema.mock.ts
@@ -0,0 +1,15 @@
+/*
+ * 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 { ID, ITEM_ID, NAMESPACE_TYPE } from '../../constants.mock';
+
+import { ReadExceptionListItemSchema } from './read_exception_list_item_schema';
+
+export const getReadExceptionListItemSchemaMock = (): ReadExceptionListItemSchema => ({
+  id: ID,
+  item_id: ITEM_ID,
+  namespace_type: NAMESPACE_TYPE,
+});
diff --git a/x-pack/plugins/lists/common/schemas/request/read_exception_list_item_schema.test.ts b/x-pack/plugins/lists/common/schemas/request/read_exception_list_item_schema.test.ts
new file mode 100644
index 0000000000000..86c80a527be0d
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/request/read_exception_list_item_schema.test.ts
@@ -0,0 +1,129 @@
+/*
+ * 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 { left } from 'fp-ts/lib/Either';
+import { pipe } from 'fp-ts/lib/pipeable';
+
+import { exactCheck, foldLeftRight, getPaths } from '../../siem_common_deps';
+
+import { getReadExceptionListItemSchemaMock } from './read_exception_list_item_schema.mock';
+import {
+  ReadExceptionListItemSchema,
+  readExceptionListItemSchema,
+} from './read_exception_list_item_schema';
+
+describe('read_exception_list_item_schema', () => {
+  test('it should validate a typical exception list request', () => {
+    const payload = getReadExceptionListItemSchemaMock();
+    const decoded = readExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  test('it should accept an undefined for "id"', () => {
+    const payload = getReadExceptionListItemSchemaMock();
+    delete payload.id;
+    const decoded = readExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  test('it should accept an undefined for "item_id"', () => {
+    const payload = getReadExceptionListItemSchemaMock();
+    delete payload.item_id;
+    const decoded = readExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  test('it should accept an undefined for "namespace_type" but default to "single"', () => {
+    const payload = getReadExceptionListItemSchemaMock();
+    delete payload.namespace_type;
+    const decoded = readExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(getReadExceptionListItemSchemaMock());
+  });
+
+  test('it should accept an undefined for "id", "item_id", "namespace_type" but default "namespace_type" to "single"', () => {
+    const payload = getReadExceptionListItemSchemaMock();
+    delete payload.id;
+    delete payload.namespace_type;
+    delete payload.item_id;
+    const output = getReadExceptionListItemSchemaMock();
+    delete output.id;
+    delete output.item_id;
+    const decoded = readExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(output);
+  });
+
+  test('it should accept an undefined for "id", "item_id"', () => {
+    const payload = getReadExceptionListItemSchemaMock();
+    delete payload.id;
+    delete payload.item_id;
+    const decoded = readExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  test('it should accept an undefined for "id", "namespace_type" but default "namespace_type" to "single"', () => {
+    const payload = getReadExceptionListItemSchemaMock();
+    delete payload.id;
+    delete payload.namespace_type;
+    const output = getReadExceptionListItemSchemaMock();
+    delete output.id;
+    const decoded = readExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(output);
+  });
+
+  test('it should accept an undefined for "item_id", "namespace_type" but default "namespace_type" to "single"', () => {
+    const payload = getReadExceptionListItemSchemaMock();
+    delete payload.namespace_type;
+    delete payload.item_id;
+    const output = getReadExceptionListItemSchemaMock();
+    delete output.item_id;
+    const decoded = readExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(output);
+  });
+
+  test('it should not allow an extra key to be sent in', () => {
+    const payload: ReadExceptionListItemSchema & {
+      extraKey?: string;
+    } = getReadExceptionListItemSchemaMock();
+    payload.extraKey = 'some new value';
+    const decoded = readExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual(['invalid keys "extraKey"']);
+    expect(message.schema).toEqual({});
+  });
+});
diff --git a/x-pack/plugins/lists/common/schemas/request/read_exception_list_item_schema.ts b/x-pack/plugins/lists/common/schemas/request/read_exception_list_item_schema.ts
index fded35dfd1cc9..93a372ba383b0 100644
--- a/x-pack/plugins/lists/common/schemas/request/read_exception_list_item_schema.ts
+++ b/x-pack/plugins/lists/common/schemas/request/read_exception_list_item_schema.ts
@@ -11,11 +11,13 @@ import * as t from 'io-ts';
 import { NamespaceType, id, item_id, namespace_type } from '../common/schemas';
 import { RequiredKeepUndefined } from '../../types';
 
-export const readExceptionListItemSchema = t.partial({
-  id,
-  item_id,
-  namespace_type, // defaults to 'single' if not set during decode
-});
+export const readExceptionListItemSchema = t.exact(
+  t.partial({
+    id,
+    item_id,
+    namespace_type, // defaults to 'single' if not set during decode
+  })
+);
 
 export type ReadExceptionListItemSchemaPartial = t.TypeOf<typeof readExceptionListItemSchema>;
 
diff --git a/x-pack/plugins/lists/common/schemas/request/read_exception_list_schema.mock.ts b/x-pack/plugins/lists/common/schemas/request/read_exception_list_schema.mock.ts
new file mode 100644
index 0000000000000..863ccdc2fb085
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/request/read_exception_list_schema.mock.ts
@@ -0,0 +1,15 @@
+/*
+ * 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 { ID, LIST_ID, NAMESPACE_TYPE } from '../../constants.mock';
+
+import { ReadExceptionListSchema } from './read_exception_list_schema';
+
+export const getReadExceptionListSchemaMock = (): ReadExceptionListSchema => ({
+  id: ID,
+  list_id: LIST_ID,
+  namespace_type: NAMESPACE_TYPE,
+});
diff --git a/x-pack/plugins/lists/common/schemas/request/read_exception_list_schema.test.ts b/x-pack/plugins/lists/common/schemas/request/read_exception_list_schema.test.ts
new file mode 100644
index 0000000000000..86cebc3cd3f8e
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/request/read_exception_list_schema.test.ts
@@ -0,0 +1,126 @@
+/*
+ * 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 { left } from 'fp-ts/lib/Either';
+import { pipe } from 'fp-ts/lib/pipeable';
+
+import { exactCheck, foldLeftRight, getPaths } from '../../siem_common_deps';
+
+import { getReadExceptionListSchemaMock } from './read_exception_list_schema.mock';
+import { ReadExceptionListSchema, readExceptionListSchema } from './read_exception_list_schema';
+
+describe('read_exception_list_schema', () => {
+  test('it should validate a typical exception list request', () => {
+    const payload = getReadExceptionListSchemaMock();
+    const decoded = readExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  test('it should accept an undefined for "id"', () => {
+    const payload = getReadExceptionListSchemaMock();
+    delete payload.id;
+    const decoded = readExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  test('it should accept an undefined for "list_id"', () => {
+    const payload = getReadExceptionListSchemaMock();
+    delete payload.list_id;
+    const decoded = readExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  test('it should accept an undefined for "namespace_type" but default to "single"', () => {
+    const payload = getReadExceptionListSchemaMock();
+    delete payload.namespace_type;
+    const decoded = readExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(getReadExceptionListSchemaMock());
+  });
+
+  test('it should accept an undefined for "id", "list_id", "namespace_type" but default "namespace_type" to "single"', () => {
+    const payload = getReadExceptionListSchemaMock();
+    delete payload.id;
+    delete payload.namespace_type;
+    delete payload.list_id;
+    const output = getReadExceptionListSchemaMock();
+    delete output.id;
+    delete output.list_id;
+    const decoded = readExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(output);
+  });
+
+  test('it should accept an undefined for "id", "list_id"', () => {
+    const payload = getReadExceptionListSchemaMock();
+    delete payload.id;
+    delete payload.list_id;
+    const decoded = readExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  test('it should accept an undefined for "id", "namespace_type" but default "namespace_type" to "single"', () => {
+    const payload = getReadExceptionListSchemaMock();
+    delete payload.id;
+    delete payload.namespace_type;
+    const output = getReadExceptionListSchemaMock();
+    delete output.id;
+    const decoded = readExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(output);
+  });
+
+  test('it should accept an undefined for "list_id", "namespace_type" but default "namespace_type" to "single"', () => {
+    const payload = getReadExceptionListSchemaMock();
+    delete payload.namespace_type;
+    delete payload.list_id;
+    const output = getReadExceptionListSchemaMock();
+    delete output.list_id;
+    const decoded = readExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(output);
+  });
+
+  test('it should not allow an extra key to be sent in', () => {
+    const payload: ReadExceptionListSchema & {
+      extraKey?: string;
+    } = getReadExceptionListSchemaMock();
+    payload.extraKey = 'some new value';
+    const decoded = readExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual(['invalid keys "extraKey"']);
+    expect(message.schema).toEqual({});
+  });
+});
diff --git a/x-pack/plugins/lists/common/schemas/request/read_exception_list_schema.ts b/x-pack/plugins/lists/common/schemas/request/read_exception_list_schema.ts
index 6b623ea8c0b9b..3947c88bf4c9c 100644
--- a/x-pack/plugins/lists/common/schemas/request/read_exception_list_schema.ts
+++ b/x-pack/plugins/lists/common/schemas/request/read_exception_list_schema.ts
@@ -11,11 +11,13 @@ import * as t from 'io-ts';
 import { NamespaceType, id, list_id, namespace_type } from '../common/schemas';
 import { RequiredKeepUndefined } from '../../types';
 
-export const readExceptionListSchema = t.partial({
-  id,
-  list_id,
-  namespace_type, // defaults to 'single' if not set during decode
-});
+export const readExceptionListSchema = t.exact(
+  t.partial({
+    id,
+    list_id,
+    namespace_type, // defaults to 'single' if not set during decode
+  })
+);
 
 export type ReadExceptionListSchemaPartial = t.TypeOf<typeof readExceptionListSchema>;
 
diff --git a/x-pack/plugins/lists/common/schemas/request/update_exception_list_schema.mock.ts b/x-pack/plugins/lists/common/schemas/request/update_exception_list_schema.mock.ts
new file mode 100644
index 0000000000000..48a8baf9aea16
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/request/update_exception_list_schema.mock.ts
@@ -0,0 +1,21 @@
+/*
+ * 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 { DESCRIPTION, ID, LIST_ID, META, NAME, NAMESPACE_TYPE, _TAGS } from '../../constants.mock';
+
+import { UpdateExceptionListSchema } from './update_exception_list_schema';
+
+export const getUpdateExceptionListSchemaMock = (): UpdateExceptionListSchema => ({
+  _tags: _TAGS,
+  description: DESCRIPTION,
+  id: ID,
+  list_id: LIST_ID,
+  meta: META,
+  name: NAME,
+  namespace_type: NAMESPACE_TYPE,
+  tags: ['malware'],
+  type: 'endpoint',
+});
diff --git a/x-pack/plugins/lists/common/schemas/request/update_exception_list_schema.test.ts b/x-pack/plugins/lists/common/schemas/request/update_exception_list_schema.test.ts
new file mode 100644
index 0000000000000..71cb9786b8185
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/request/update_exception_list_schema.test.ts
@@ -0,0 +1,147 @@
+/*
+ * 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 { left } from 'fp-ts/lib/Either';
+import { pipe } from 'fp-ts/lib/pipeable';
+
+import { exactCheck, foldLeftRight, getPaths } from '../../siem_common_deps';
+
+import {
+  UpdateExceptionListSchema,
+  updateExceptionListSchema,
+} from './update_exception_list_schema';
+import { getUpdateExceptionListSchemaMock } from './update_exception_list_schema.mock';
+
+describe('update_exception_list_schema', () => {
+  test('it should validate a typical exception list request', () => {
+    const payload = getUpdateExceptionListSchemaMock();
+    const decoded = updateExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  test('it should not accept an undefined for "description"', () => {
+    const payload = getUpdateExceptionListSchemaMock();
+    delete payload.description;
+    const decoded = updateExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "description"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should not accept an undefined for "name"', () => {
+    const payload = getUpdateExceptionListSchemaMock();
+    delete payload.name;
+    const decoded = updateExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "name"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should not accept an undefined for "type"', () => {
+    const payload = getUpdateExceptionListSchemaMock();
+    delete payload.type;
+    const decoded = updateExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "type"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should accept an undefined for "meta" but strip it out', () => {
+    const payload = getUpdateExceptionListSchemaMock();
+    const outputPayload = getUpdateExceptionListSchemaMock();
+    delete payload.meta;
+    const decoded = updateExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    delete outputPayload.meta;
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(outputPayload);
+  });
+
+  test('it should accept an undefined for "namespace_type" but return enum "single"', () => {
+    const inputPayload = getUpdateExceptionListSchemaMock();
+    const outputPayload = getUpdateExceptionListSchemaMock();
+    delete inputPayload.namespace_type;
+    outputPayload.namespace_type = 'single';
+    const decoded = updateExceptionListSchema.decode(inputPayload);
+    const checked = exactCheck(inputPayload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(outputPayload);
+  });
+
+  test('it should accept an undefined for "tags" but return an array', () => {
+    const inputPayload = getUpdateExceptionListSchemaMock();
+    const outputPayload = getUpdateExceptionListSchemaMock();
+    delete inputPayload.tags;
+    outputPayload.tags = [];
+    const decoded = updateExceptionListSchema.decode(inputPayload);
+    const checked = exactCheck(inputPayload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(outputPayload);
+  });
+
+  test('it should accept an undefined for "_tags" but return an array', () => {
+    const inputPayload = getUpdateExceptionListSchemaMock();
+    const outputPayload = getUpdateExceptionListSchemaMock();
+    delete inputPayload._tags;
+    outputPayload._tags = [];
+    const decoded = updateExceptionListSchema.decode(inputPayload);
+    const checked = exactCheck(inputPayload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(outputPayload);
+  });
+
+  // TODO: Is it expected behavior for it not to auto-generate a uui or throw
+  // error if list_id is not passed in?
+  test.skip('it should accept an undefined for "list_id" and auto generate a uuid', () => {
+    const inputPayload = getUpdateExceptionListSchemaMock();
+    delete inputPayload.list_id;
+    const decoded = updateExceptionListSchema.decode(inputPayload);
+    const checked = exactCheck(inputPayload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect((message.schema as UpdateExceptionListSchema).list_id).toMatch(
+      /^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i
+    );
+  });
+
+  test('it should accept an undefined for "list_id" and generate a correct body not counting the uuid', () => {
+    const inputPayload = getUpdateExceptionListSchemaMock();
+    delete inputPayload.list_id;
+    const decoded = updateExceptionListSchema.decode(inputPayload);
+    const checked = exactCheck(inputPayload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    delete (message.schema as UpdateExceptionListSchema).list_id;
+    expect(message.schema).toEqual(inputPayload);
+  });
+
+  test('it should not allow an extra key to be sent in', () => {
+    const payload: UpdateExceptionListSchema & {
+      extraKey?: string;
+    } = getUpdateExceptionListSchemaMock();
+    payload.extraKey = 'some new value';
+    const decoded = updateExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual(['invalid keys "extraKey"']);
+    expect(message.schema).toEqual({});
+  });
+});
diff --git a/x-pack/plugins/lists/common/schemas/response/exception_list_item_schema.mock.ts b/x-pack/plugins/lists/common/schemas/response/exception_list_item_schema.mock.ts
index 663bfc7038330..f7a6af98c8f0e 100644
--- a/x-pack/plugins/lists/common/schemas/response/exception_list_item_schema.mock.ts
+++ b/x-pack/plugins/lists/common/schemas/response/exception_list_item_schema.mock.ts
@@ -3,6 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { ENTRIES } from '../../constants.mock';
 
 import { ExceptionListItemSchema } from './exception_list_item_schema';
 
@@ -12,20 +13,7 @@ export const getExceptionListItemSchemaMock = (): ExceptionListItemSchema => ({
   created_at: '2020-04-23T00:19:13.289Z',
   created_by: 'user_name',
   description: 'This is a sample endpoint type exception',
-  entries: [
-    {
-      field: 'actingProcess.file.signer',
-      match: 'Elastic, N.V.',
-      match_any: undefined,
-      operator: 'included',
-    },
-    {
-      field: 'event.category',
-      match: undefined,
-      match_any: ['process', 'malware'],
-      operator: 'included',
-    },
-  ],
+  entries: ENTRIES,
   id: '1',
   item_id: 'endpoint_list_item',
   list_id: 'endpoint_list',
diff --git a/x-pack/plugins/lists/common/schemas/response/exception_list_schema.test.ts b/x-pack/plugins/lists/common/schemas/response/exception_list_schema.test.ts
new file mode 100644
index 0000000000000..99b3b778388ea
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/response/exception_list_schema.test.ts
@@ -0,0 +1,191 @@
+/*
+ * 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 { left } from 'fp-ts/lib/Either';
+import { pipe } from 'fp-ts/lib/pipeable';
+
+import { exactCheck, foldLeftRight, getPaths } from '../../siem_common_deps';
+
+import { getExceptionListSchemaMock } from './exception_list_schema.mock';
+import { ExceptionListSchema, exceptionListSchema } from './exception_list_schema';
+
+describe('exception_list_schema', () => {
+  test('it should validate a typical exception list response', () => {
+    const payload = getExceptionListSchemaMock();
+    const decoded = exceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  test('it should NOT accept an undefined for "id"', () => {
+    const payload = getExceptionListSchemaMock();
+    delete payload.id;
+    const decoded = exceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "undefined" supplied to "id"']);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept an undefined for "list_id"', () => {
+    const payload = getExceptionListSchemaMock();
+    delete payload.list_id;
+    const decoded = exceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "list_id"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept an undefined for "name"', () => {
+    const payload = getExceptionListSchemaMock();
+    delete payload.name;
+    const decoded = exceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "name"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  // TODO: Should this throw an error? "namespace_type" gets auto-populated
+  // with default "single", is that desired behavior?
+  test.skip('it should NOT accept an undefined for "namespace_type"', () => {
+    const payload = getExceptionListSchemaMock();
+    delete payload.namespace_type;
+    const decoded = exceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "namespace_type"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept an undefined for "description"', () => {
+    const payload = getExceptionListSchemaMock();
+    delete payload.description;
+    const decoded = exceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "description"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should accept an undefined for "meta"', () => {
+    const payload = getExceptionListSchemaMock();
+    delete payload.meta;
+    const decoded = exceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  test('it should NOT accept an undefined for "created_at"', () => {
+    const payload = getExceptionListSchemaMock();
+    delete payload.created_at;
+    const decoded = exceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "created_at"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept an undefined for "created_by"', () => {
+    const payload = getExceptionListSchemaMock();
+    delete payload.created_by;
+    const decoded = exceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "created_by"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept an undefined for "tie_breaker_id"', () => {
+    const payload = getExceptionListSchemaMock();
+    delete payload.tie_breaker_id;
+    const decoded = exceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "tie_breaker_id"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept an undefined for "type"', () => {
+    const payload = getExceptionListSchemaMock();
+    delete payload.type;
+    const decoded = exceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "type"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept an undefined for "updated_at"', () => {
+    const payload = getExceptionListSchemaMock();
+    delete payload.updated_at;
+    const decoded = exceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "updated_at"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept an undefined for "updated_by"', () => {
+    const payload = getExceptionListSchemaMock();
+    delete payload.updated_by;
+    const decoded = exceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "updated_by"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should not allow an extra key to be sent in', () => {
+    const payload: ExceptionListSchema & {
+      extraKey?: string;
+    } = getExceptionListSchemaMock();
+    payload.extraKey = 'some new value';
+    const decoded = exceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual(['invalid keys "extraKey"']);
+    expect(message.schema).toEqual({});
+  });
+});
diff --git a/x-pack/plugins/lists/common/schemas/response/found_exception_list_item_schema.test.ts b/x-pack/plugins/lists/common/schemas/response/found_exception_list_item_schema.test.ts
new file mode 100644
index 0000000000000..70fcf9a86122c
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/response/found_exception_list_item_schema.test.ts
@@ -0,0 +1,151 @@
+/*
+ * 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 { left } from 'fp-ts/lib/Either';
+import { pipe } from 'fp-ts/lib/pipeable';
+
+import { exactCheck, foldLeftRight, getPaths } from '../../siem_common_deps';
+
+import { getExceptionListItemSchemaMock } from './exception_list_item_schema.mock';
+import { getFoundExceptionListItemSchemaMock } from './found_exception_list_item_schema.mock';
+import {
+  FoundExceptionListItemSchema,
+  foundExceptionListItemSchema,
+} from './found_exception_list_item_schema';
+import { ExceptionListItemSchema } from './exception_list_item_schema';
+
+describe('found_exception_list_item_schema', () => {
+  test('it should validate a typical exception list response', () => {
+    const payload = getFoundExceptionListItemSchemaMock();
+    const decoded = foundExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  test('it should NOT accept a malformed exception list item within "data"', () => {
+    const item: Omit<ExceptionListItemSchema, 'entries'> & {
+      entries?: string;
+    } = { ...getExceptionListItemSchemaMock(), entries: 'I should be an array' };
+    const payload: Omit<FoundExceptionListItemSchema, 'data'> & {
+      data?: Array<
+        Omit<ExceptionListItemSchema, 'entries'> & {
+          entries?: string;
+        }
+      >;
+    } = { ...getFoundExceptionListItemSchemaMock(), data: [item] };
+    const decoded = foundExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "I should be an array" supplied to "data,entries"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept a string for "page"', () => {
+    const payload: Omit<FoundExceptionListItemSchema, 'page'> & {
+      page?: string;
+    } = { ...getFoundExceptionListItemSchemaMock(), page: '1' };
+    const decoded = foundExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "1" supplied to "page"']);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept a string for "per_page"', () => {
+    const payload: Omit<FoundExceptionListItemSchema, 'per_page'> & {
+      per_page?: string;
+    } = { ...getFoundExceptionListItemSchemaMock(), per_page: '20' };
+    const decoded = foundExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "20" supplied to "per_page"']);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept a string for "total"', () => {
+    const payload: Omit<FoundExceptionListItemSchema, 'total'> & {
+      total?: string;
+    } = { ...getFoundExceptionListItemSchemaMock(), total: '1' };
+    const decoded = foundExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "1" supplied to "total"']);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept an undefined for "page"', () => {
+    const payload = getFoundExceptionListItemSchemaMock();
+    delete payload.page;
+    const decoded = foundExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "page"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept an undefined for "per_page"', () => {
+    const payload = getFoundExceptionListItemSchemaMock();
+    delete payload.per_page;
+    const decoded = foundExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "per_page"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept an undefined for "total"', () => {
+    const payload = getFoundExceptionListItemSchemaMock();
+    delete payload.total;
+    const decoded = foundExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "total"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept an undefined for "data"', () => {
+    const payload = getFoundExceptionListItemSchemaMock();
+    delete payload.data;
+    const decoded = foundExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "data"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should not allow an extra key to be sent in', () => {
+    const payload: FoundExceptionListItemSchema & {
+      extraKey?: string;
+    } = getFoundExceptionListItemSchemaMock();
+    payload.extraKey = 'some new value';
+    const decoded = foundExceptionListItemSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual(['invalid keys "extraKey"']);
+    expect(message.schema).toEqual({});
+  });
+});
diff --git a/x-pack/plugins/lists/common/schemas/response/found_exception_list_schema.test.ts b/x-pack/plugins/lists/common/schemas/response/found_exception_list_schema.test.ts
new file mode 100644
index 0000000000000..a96ee07c4613b
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/response/found_exception_list_schema.test.ts
@@ -0,0 +1,148 @@
+/*
+ * 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 { left } from 'fp-ts/lib/Either';
+import { pipe } from 'fp-ts/lib/pipeable';
+
+import { exactCheck, foldLeftRight, getPaths } from '../../siem_common_deps';
+
+import { getExceptionListSchemaMock } from './exception_list_schema.mock';
+import { getFoundExceptionListSchemaMock } from './found_exception_list_schema.mock';
+import { FoundExceptionListSchema, foundExceptionListSchema } from './found_exception_list_schema';
+import { ExceptionListSchema } from './exception_list_schema';
+
+describe('exception_list_schema', () => {
+  test('it should validate a typical exception list response', () => {
+    const payload = getFoundExceptionListSchemaMock();
+    const decoded = foundExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  test('it should NOT accept a malformed exception list item within "data"', () => {
+    const item: Omit<ExceptionListSchema, 'entries'> & {
+      entries?: string[];
+    } = { ...getExceptionListSchemaMock(), entries: ['I should not be here'] };
+    const payload: Omit<FoundExceptionListSchema, 'data'> & {
+      data?: Array<
+        Omit<ExceptionListSchema, 'entries'> & {
+          entries?: string[];
+        }
+      >;
+    } = { ...getFoundExceptionListSchemaMock(), data: [item] };
+    const decoded = foundExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'invalid keys "entries,["I should not be here"]"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept a string for "page"', () => {
+    const payload: Omit<FoundExceptionListSchema, 'page'> & {
+      page?: string;
+    } = { ...getFoundExceptionListSchemaMock(), page: '1' };
+    const decoded = foundExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "1" supplied to "page"']);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept a string for "per_page"', () => {
+    const payload: Omit<FoundExceptionListSchema, 'per_page'> & {
+      per_page?: string;
+    } = { ...getFoundExceptionListSchemaMock(), per_page: '20' };
+    const decoded = foundExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "20" supplied to "per_page"']);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept a string for "total"', () => {
+    const payload: Omit<FoundExceptionListSchema, 'total'> & {
+      total?: string;
+    } = { ...getFoundExceptionListSchemaMock(), total: '1' };
+    const decoded = foundExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual(['Invalid value "1" supplied to "total"']);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept an undefined for "page"', () => {
+    const payload = getFoundExceptionListSchemaMock();
+    delete payload.page;
+    const decoded = foundExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "page"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept an undefined for "per_page"', () => {
+    const payload = getFoundExceptionListSchemaMock();
+    delete payload.per_page;
+    const decoded = foundExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "per_page"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept an undefined for "total"', () => {
+    const payload = getFoundExceptionListSchemaMock();
+    delete payload.total;
+    const decoded = foundExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "total"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT accept an undefined for "data"', () => {
+    const payload = getFoundExceptionListSchemaMock();
+    delete payload.data;
+    const decoded = foundExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      'Invalid value "undefined" supplied to "data"',
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should not allow an extra key to be sent in', () => {
+    const payload: FoundExceptionListSchema & {
+      extraKey?: string;
+    } = getFoundExceptionListSchemaMock();
+    payload.extraKey = 'some new value';
+    const decoded = foundExceptionListSchema.decode(payload);
+    const checked = exactCheck(payload, decoded);
+    const message = pipe(checked, foldLeftRight);
+    expect(getPaths(left(message.errors))).toEqual(['invalid keys "extraKey"']);
+    expect(message.schema).toEqual({});
+  });
+});
diff --git a/x-pack/plugins/lists/common/schemas/types/comments.mock.ts b/x-pack/plugins/lists/common/schemas/types/comments.mock.ts
new file mode 100644
index 0000000000000..ee58fafe074c7
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/types/comments.mock.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 { DATE_NOW, USER } from '../../constants.mock';
+
+import { CommentsArray } from './comments';
+
+export const getCommentsMock = (): CommentsArray => [
+  {
+    comment: 'some comment',
+    created_at: DATE_NOW,
+    created_by: USER,
+  },
+  {
+    comment: 'some other comment',
+    created_at: DATE_NOW,
+    created_by: 'lily',
+  },
+];
diff --git a/x-pack/plugins/lists/common/schemas/types/default_entries_array.test.ts b/x-pack/plugins/lists/common/schemas/types/default_entries_array.test.ts
new file mode 100644
index 0000000000000..9e615528ba775
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/types/default_entries_array.test.ts
@@ -0,0 +1,98 @@
+/*
+ * 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 { pipe } from 'fp-ts/lib/pipeable';
+import { left } from 'fp-ts/lib/Either';
+
+import { foldLeftRight, getPaths } from '../../siem_common_deps';
+
+import { DefaultEntryArray } from './default_entries_array';
+import { EntriesArray } from './entries';
+import { getEntriesArrayMock, getEntryMatchMock, getEntryNestedMock } from './entries.mock';
+
+// NOTE: This may seem weird, but when validating schemas that use a union
+// it checks against every item in that union. Since entries consist of 5
+// different entry types, it returns 5 of these. To make more readable,
+// extracted here.
+const returnedSchemaError = `"Array<({| field: string, operator: "excluded" | "included", type: "match", value: string |} | {| field: string, operator: "excluded" | "included", type: "match_any", value: DefaultStringArray |} | {| field: string, operator: "excluded" | "included", type: "list", value: DefaultStringArray |} | {| field: string, operator: "excluded" | "included", type: "exists" |} | {| entries: Array<({| field: string, operator: "excluded" | "included", type: "match", value: string |} | {| field: string, operator: "excluded" | "included", type: "match_any", value: DefaultStringArray |} | {| field: string, operator: "excluded" | "included", type: "list", value: DefaultStringArray |} | {| field: string, operator: "excluded" | "included", type: "exists" |})>, field: string, type: "nested" |})>"`;
+
+describe('default_entries_array', () => {
+  test('it should validate an empty array', () => {
+    const payload: EntriesArray = [];
+    const decoded = DefaultEntryArray.decode(payload);
+    const message = pipe(decoded, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  test('it should validate an array of regular and nested entries', () => {
+    const payload: EntriesArray = getEntriesArrayMock();
+    const decoded = DefaultEntryArray.decode(payload);
+    const message = pipe(decoded, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  test('it should validate an array of nested entries', () => {
+    const payload: EntriesArray = [{ ...getEntryNestedMock() }];
+    const decoded = DefaultEntryArray.decode(payload);
+    const message = pipe(decoded, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  test('it should validate an array of non nested entries', () => {
+    const payload: EntriesArray = [{ ...getEntryMatchMock() }];
+    const decoded = DefaultEntryArray.decode(payload);
+    const message = pipe(decoded, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual(payload);
+  });
+
+  test('it should NOT validate an array of numbers', () => {
+    const payload = [1];
+    const decoded = DefaultEntryArray.decode(payload);
+    const message = pipe(decoded, foldLeftRight);
+
+    // TODO: Known weird error formatting that is on our list to address
+    expect(getPaths(left(message.errors))).toEqual([
+      `Invalid value "1" supplied to ${returnedSchemaError}`,
+      `Invalid value "1" supplied to ${returnedSchemaError}`,
+      `Invalid value "1" supplied to ${returnedSchemaError}`,
+      `Invalid value "1" supplied to ${returnedSchemaError}`,
+      `Invalid value "1" supplied to ${returnedSchemaError}`,
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should NOT validate an array of strings', () => {
+    const payload = ['some string'];
+    const decoded = DefaultEntryArray.decode(payload);
+    const message = pipe(decoded, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([
+      `Invalid value "some string" supplied to ${returnedSchemaError}`,
+      `Invalid value "some string" supplied to ${returnedSchemaError}`,
+      `Invalid value "some string" supplied to ${returnedSchemaError}`,
+      `Invalid value "some string" supplied to ${returnedSchemaError}`,
+      `Invalid value "some string" supplied to ${returnedSchemaError}`,
+    ]);
+    expect(message.schema).toEqual({});
+  });
+
+  test('it should return a default array entry', () => {
+    const payload = null;
+    const decoded = DefaultEntryArray.decode(payload);
+    const message = pipe(decoded, foldLeftRight);
+
+    expect(getPaths(left(message.errors))).toEqual([]);
+    expect(message.schema).toEqual([]);
+  });
+});
diff --git a/x-pack/plugins/lists/common/schemas/types/default_entries_array.ts b/x-pack/plugins/lists/common/schemas/types/default_entries_array.ts
index 82487f04804f1..da67fb286affa 100644
--- a/x-pack/plugins/lists/common/schemas/types/default_entries_array.ts
+++ b/x-pack/plugins/lists/common/schemas/types/default_entries_array.ts
@@ -7,7 +7,7 @@
 import * as t from 'io-ts';
 import { Either } from 'fp-ts/lib/Either';
 
-import { EntriesArray, entries } from './entries';
+import { EntriesArray, entriesArray } from './entries';
 
 export type DefaultEntriesArrayC = t.Type<EntriesArray, EntriesArray, unknown>;
 
@@ -21,8 +21,8 @@ export const DefaultEntryArray: DefaultEntriesArrayC = new t.Type<
   unknown
 >(
   'DefaultEntryArray',
-  t.array(entries).is,
-  (input, context): Either<t.Errors, EntriesArray> =>
-    input == null ? t.success([]) : t.array(entries).validate(input, context),
+  entriesArray.is,
+  (input): Either<t.Errors, EntriesArray> =>
+    input == null ? t.success([]) : entriesArray.decode(input),
   t.identity
 );
diff --git a/x-pack/plugins/lists/common/schemas/types/entries.mock.ts b/x-pack/plugins/lists/common/schemas/types/entries.mock.ts
new file mode 100644
index 0000000000000..1926cb09db119
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/types/entries.mock.ts
@@ -0,0 +1,66 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  ENTRY_VALUE,
+  EXISTS,
+  FIELD,
+  LIST,
+  MATCH,
+  MATCH_ANY,
+  NESTED,
+  OPERATOR,
+} from '../../constants.mock';
+
+import {
+  EntriesArray,
+  EntryExists,
+  EntryList,
+  EntryMatch,
+  EntryMatchAny,
+  EntryNested,
+} from './entries';
+
+export const getEntryMatchMock = (): EntryMatch => ({
+  field: FIELD,
+  operator: OPERATOR,
+  type: MATCH,
+  value: ENTRY_VALUE,
+});
+
+export const getEntryMatchAnyMock = (): EntryMatchAny => ({
+  field: FIELD,
+  operator: OPERATOR,
+  type: MATCH_ANY,
+  value: [ENTRY_VALUE],
+});
+
+export const getEntryListMock = (): EntryList => ({
+  field: FIELD,
+  operator: OPERATOR,
+  type: LIST,
+  value: [ENTRY_VALUE],
+});
+
+export const getEntryExistsMock = (): EntryExists => ({
+  field: FIELD,
+  operator: OPERATOR,
+  type: EXISTS,
+});
+
+export const getEntryNestedMock = (): EntryNested => ({
+  entries: [getEntryMatchMock(), getEntryExistsMock()],
+  field: FIELD,
+  type: NESTED,
+});
+
+export const getEntriesArrayMock = (): EntriesArray => [
+  getEntryMatchMock(),
+  getEntryMatchAnyMock(),
+  getEntryListMock(),
+  getEntryExistsMock(),
+  getEntryNestedMock(),
+];
diff --git a/x-pack/plugins/lists/common/schemas/types/entries.test.ts b/x-pack/plugins/lists/common/schemas/types/entries.test.ts
new file mode 100644
index 0000000000000..a13d4c0347e45
--- /dev/null
+++ b/x-pack/plugins/lists/common/schemas/types/entries.test.ts
@@ -0,0 +1,353 @@
+/*
+ * 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 { pipe } from 'fp-ts/lib/pipeable';
+import { left } from 'fp-ts/lib/Either';
+
+import { foldLeftRight, getPaths } from '../../siem_common_deps';
+
+import {
+  getEntryExistsMock,
+  getEntryListMock,
+  getEntryMatchAnyMock,
+  getEntryMatchMock,
+  getEntryNestedMock,
+} from './entries.mock';
+import {
+  EntryExists,
+  EntryList,
+  EntryMatch,
+  EntryMatchAny,
+  EntryNested,
+  entriesExists,
+  entriesList,
+  entriesMatch,
+  entriesMatchAny,
+  entriesNested,
+} from './entries';
+
+describe('Entries', () => {
+  describe('entriesMatch', () => {
+    test('it should validate an entry', () => {
+      const payload = getEntryMatchMock();
+      const decoded = entriesMatch.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(payload);
+    });
+
+    test('it should validate when operator is "included"', () => {
+      const payload = getEntryMatchMock();
+      const decoded = entriesMatch.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(payload);
+    });
+
+    test('it should validate when "operator" is "excluded"', () => {
+      const payload = getEntryMatchMock();
+      payload.operator = 'excluded';
+      const decoded = entriesMatch.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(payload);
+    });
+
+    test('it should not validate when "value" is not string', () => {
+      const payload: Omit<EntryMatch, 'value'> & { value: string[] } = {
+        ...getEntryMatchMock(),
+        value: ['some value'],
+      };
+      const decoded = entriesMatch.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([
+        'Invalid value "["some value"]" supplied to "value"',
+      ]);
+      expect(message.schema).toEqual({});
+    });
+
+    test('it should not validate when "type" is not "match"', () => {
+      const payload: Omit<EntryMatch, 'type'> & { type: string } = {
+        ...getEntryMatchMock(),
+        type: 'match_any',
+      };
+      const decoded = entriesMatch.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([
+        'Invalid value "match_any" supplied to "type"',
+      ]);
+      expect(message.schema).toEqual({});
+    });
+
+    test('it should strip out extra keys', () => {
+      const payload: EntryMatch & {
+        extraKey?: string;
+      } = getEntryMatchMock();
+      payload.extraKey = 'some value';
+      const decoded = entriesMatch.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(getEntryMatchMock());
+    });
+  });
+
+  describe('entriesMatchAny', () => {
+    test('it should validate an entry', () => {
+      const payload = getEntryMatchAnyMock();
+      const decoded = entriesMatchAny.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(payload);
+    });
+
+    test('it should validate when operator is "included"', () => {
+      const payload = getEntryMatchAnyMock();
+      const decoded = entriesMatchAny.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(payload);
+    });
+
+    test('it should validate when operator is "excluded"', () => {
+      const payload = getEntryMatchAnyMock();
+      payload.operator = 'excluded';
+      const decoded = entriesMatchAny.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(payload);
+    });
+
+    test('it should not validate when value is not string array', () => {
+      const payload: Omit<EntryMatchAny, 'value'> & { value: string } = {
+        ...getEntryMatchAnyMock(),
+        value: 'some string',
+      };
+      const decoded = entriesMatchAny.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([
+        'Invalid value "some string" supplied to "value"',
+      ]);
+      expect(message.schema).toEqual({});
+    });
+
+    test('it should not validate when "type" is not "match_any"', () => {
+      const payload: Omit<EntryMatchAny, 'type'> & { type: string } = {
+        ...getEntryMatchAnyMock(),
+        type: 'match',
+      };
+      const decoded = entriesMatchAny.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual(['Invalid value "match" supplied to "type"']);
+      expect(message.schema).toEqual({});
+    });
+
+    test('it should strip out extra keys', () => {
+      const payload: EntryMatchAny & {
+        extraKey?: string;
+      } = getEntryMatchAnyMock();
+      payload.extraKey = 'some extra key';
+      const decoded = entriesMatchAny.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(getEntryMatchAnyMock());
+    });
+  });
+
+  describe('entriesExists', () => {
+    test('it should validate an entry', () => {
+      const payload = getEntryExistsMock();
+      const decoded = entriesExists.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(payload);
+    });
+
+    test('it should validate when "operator" is "included"', () => {
+      const payload = getEntryExistsMock();
+      const decoded = entriesExists.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(payload);
+    });
+
+    test('it should validate when "operator" is "excluded"', () => {
+      const payload = getEntryExistsMock();
+      payload.operator = 'excluded';
+      const decoded = entriesExists.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(payload);
+    });
+
+    test('it should strip out extra keys', () => {
+      const payload: EntryExists & {
+        extraKey?: string;
+      } = getEntryExistsMock();
+      payload.extraKey = 'some extra key';
+      const decoded = entriesExists.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(getEntryExistsMock());
+    });
+
+    test('it should not validate when "type" is not "exists"', () => {
+      const payload: Omit<EntryExists, 'type'> & { type: string } = {
+        ...getEntryExistsMock(),
+        type: 'match',
+      };
+      const decoded = entriesExists.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual(['Invalid value "match" supplied to "type"']);
+      expect(message.schema).toEqual({});
+    });
+  });
+
+  describe('entriesList', () => {
+    test('it should validate an entry', () => {
+      const payload = getEntryListMock();
+      const decoded = entriesList.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(payload);
+    });
+
+    test('it should validate when operator is "included"', () => {
+      const payload = getEntryListMock();
+      const decoded = entriesList.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(payload);
+    });
+
+    test('it should validate when "operator" is "excluded"', () => {
+      const payload = getEntryListMock();
+      payload.operator = 'excluded';
+      const decoded = entriesList.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(payload);
+    });
+
+    test('it should not validate when "value" is not string array', () => {
+      const payload: Omit<EntryList, 'value'> & { value: string } = {
+        ...getEntryListMock(),
+        value: 'someListId',
+      };
+      const decoded = entriesList.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([
+        'Invalid value "someListId" supplied to "value"',
+      ]);
+      expect(message.schema).toEqual({});
+    });
+
+    test('it should not validate when "type" is not "lists"', () => {
+      const payload: Omit<EntryList, 'type'> & { type: 'match_any' } = {
+        ...getEntryListMock(),
+        type: 'match_any',
+      };
+      const decoded = entriesList.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([
+        'Invalid value "match_any" supplied to "type"',
+      ]);
+      expect(message.schema).toEqual({});
+    });
+
+    test('it should strip out extra keys', () => {
+      const payload: EntryList & {
+        extraKey?: string;
+      } = getEntryListMock();
+      payload.extraKey = 'some extra key';
+      const decoded = entriesList.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(getEntryListMock());
+    });
+  });
+
+  describe('entriesNested', () => {
+    test('it should validate a nested entry', () => {
+      const payload = getEntryNestedMock();
+      const decoded = entriesNested.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(payload);
+    });
+
+    test('it should NOT validate when "type" is not "nested"', () => {
+      const payload: Omit<EntryNested, 'type'> & { type: 'match' } = {
+        ...getEntryNestedMock(),
+        type: 'match',
+      };
+      const decoded = entriesNested.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual(['Invalid value "match" supplied to "type"']);
+      expect(message.schema).toEqual({});
+    });
+
+    test('it should NOT validate when "field" is not a string', () => {
+      const payload: Omit<EntryNested, 'field'> & {
+        field: number;
+      } = { ...getEntryNestedMock(), field: 1 };
+      const decoded = entriesNested.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual(['Invalid value "1" supplied to "field"']);
+      expect(message.schema).toEqual({});
+    });
+
+    test('it should NOT validate when "entries" is not a an array', () => {
+      const payload: Omit<EntryNested, 'entries'> & {
+        entries: string;
+      } = { ...getEntryNestedMock(), entries: 'im a string' };
+      const decoded = entriesNested.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([
+        'Invalid value "im a string" supplied to "entries"',
+      ]);
+      expect(message.schema).toEqual({});
+    });
+
+    test('it should strip out extra keys', () => {
+      const payload: EntryNested & {
+        extraKey?: string;
+      } = getEntryNestedMock();
+      payload.extraKey = 'some extra key';
+      const decoded = entriesNested.decode(payload);
+      const message = pipe(decoded, foldLeftRight);
+
+      expect(getPaths(left(message.errors))).toEqual([]);
+      expect(message.schema).toEqual(getEntryNestedMock());
+    });
+  });
+});
diff --git a/x-pack/plugins/lists/common/schemas/types/entries.ts b/x-pack/plugins/lists/common/schemas/types/entries.ts
index 750e04e2f39e5..e3625dbe08334 100644
--- a/x-pack/plugins/lists/common/schemas/types/entries.ts
+++ b/x-pack/plugins/lists/common/schemas/types/entries.ts
@@ -3,19 +3,67 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+
+/* eslint-disable @typescript-eslint/camelcase */
+
 import * as t from 'io-ts';
 
-export const entries = t.exact(
+import { operator } from '../common/schemas';
+import { DefaultStringArray } from '../../siem_common_deps';
+
+export const entriesMatch = t.exact(
+  t.type({
+    field: t.string,
+    operator,
+    type: t.keyof({ match: null }),
+    value: t.string,
+  })
+);
+export type EntryMatch = t.TypeOf<typeof entriesMatch>;
+
+export const entriesMatchAny = t.exact(
+  t.type({
+    field: t.string,
+    operator,
+    type: t.keyof({ match_any: null }),
+    value: DefaultStringArray,
+  })
+);
+export type EntryMatchAny = t.TypeOf<typeof entriesMatchAny>;
+
+export const entriesList = t.exact(
+  t.type({
+    field: t.string,
+    operator,
+    type: t.keyof({ list: null }),
+    value: DefaultStringArray,
+  })
+);
+export type EntryList = t.TypeOf<typeof entriesList>;
+
+export const entriesExists = t.exact(
   t.type({
     field: t.string,
-    match: t.union([t.string, t.undefined]),
-    match_any: t.union([t.array(t.string), t.undefined]),
-    operator: t.string, // TODO: Use a key of with all possible values
+    operator,
+    type: t.keyof({ exists: null }),
   })
 );
+export type EntryExists = t.TypeOf<typeof entriesExists>;
 
-export const entriesArray = t.array(entries);
+export const entriesNested = t.exact(
+  t.type({
+    entries: t.array(t.union([entriesMatch, entriesMatchAny, entriesList, entriesExists])),
+    field: t.string,
+    type: t.keyof({ nested: null }),
+  })
+);
+export type EntryNested = t.TypeOf<typeof entriesNested>;
+
+export const entry = t.union([entriesMatch, entriesMatchAny, entriesList, entriesExists]);
+export type Entry = t.TypeOf<typeof entry>;
+export const entriesArray = t.array(
+  t.union([entriesMatch, entriesMatchAny, entriesList, entriesExists, entriesNested])
+);
 export type EntriesArray = t.TypeOf<typeof entriesArray>;
-export type Entries = t.TypeOf<typeof entries>;
 export const entriesArrayOrUndefined = t.union([entriesArray, t.undefined]);
 export type EntriesArrayOrUndefined = t.TypeOf<typeof entriesArrayOrUndefined>;
diff --git a/x-pack/plugins/lists/public/exceptions/__mocks__/api.ts b/x-pack/plugins/lists/public/exceptions/__mocks__/api.ts
deleted file mode 100644
index 9651be0d04e8c..0000000000000
--- a/x-pack/plugins/lists/public/exceptions/__mocks__/api.ts
+++ /dev/null
@@ -1,71 +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 { getExceptionListItemSchemaMock } from '../../../common/schemas/response/exception_list_item_schema.mock';
-import { getExceptionListSchemaMock } from '../../../common/schemas/response/exception_list_schema.mock';
-import {
-  ExceptionListItemSchema,
-  ExceptionListSchema,
-  FoundExceptionListItemSchema,
-} from '../../../common/schemas';
-import {
-  AddExceptionListItemProps,
-  AddExceptionListProps,
-  ApiCallByIdProps,
-  ApiCallByListIdProps,
-} from '../types';
-
-/* eslint-disable @typescript-eslint/no-unused-vars */
-export const addExceptionList = async ({
-  http,
-  list,
-  signal,
-}: AddExceptionListProps): Promise<ExceptionListSchema> =>
-  Promise.resolve(getExceptionListSchemaMock());
-
-export const addExceptionListItem = async ({
-  http,
-  listItem,
-  signal,
-}: AddExceptionListItemProps): Promise<ExceptionListItemSchema> =>
-  Promise.resolve(getExceptionListItemSchemaMock());
-
-export const fetchExceptionListById = async ({
-  http,
-  id,
-  signal,
-}: ApiCallByIdProps): Promise<ExceptionListSchema> => Promise.resolve(getExceptionListSchemaMock());
-
-export const fetchExceptionListItemsByListId = async ({
-  filterOptions,
-  http,
-  listId,
-  pagination,
-  signal,
-}: ApiCallByListIdProps): Promise<FoundExceptionListItemSchema> =>
-  Promise.resolve({ data: [getExceptionListItemSchemaMock()], page: 1, per_page: 20, total: 1 });
-
-export const fetchExceptionListItemById = async ({
-  http,
-  id,
-  signal,
-}: ApiCallByIdProps): Promise<ExceptionListItemSchema> =>
-  Promise.resolve(getExceptionListItemSchemaMock());
-
-export const deleteExceptionListById = async ({
-  http,
-  id,
-  namespaceType,
-  signal,
-}: ApiCallByIdProps): Promise<ExceptionListSchema> => Promise.resolve(getExceptionListSchemaMock());
-
-export const deleteExceptionListItemById = async ({
-  http,
-  id,
-  namespaceType,
-  signal,
-}: ApiCallByIdProps): Promise<ExceptionListItemSchema> =>
-  Promise.resolve(getExceptionListItemSchemaMock());
diff --git a/x-pack/plugins/lists/public/exceptions/api.test.ts b/x-pack/plugins/lists/public/exceptions/api.test.ts
index 66c92e0823d62..72a689650ea2d 100644
--- a/x-pack/plugins/lists/public/exceptions/api.test.ts
+++ b/x-pack/plugins/lists/public/exceptions/api.test.ts
@@ -8,6 +8,15 @@ import { getExceptionListSchemaMock } from '../../common/schemas/response/except
 import { getExceptionListItemSchemaMock } from '../../common/schemas/response/exception_list_item_schema.mock';
 import { getCreateExceptionListSchemaMock } from '../../common/schemas/request/create_exception_list_schema.mock';
 import { getCreateExceptionListItemSchemaMock } from '../../common/schemas/request/create_exception_list_item_schema.mock';
+import { getFoundExceptionListItemSchemaMock } from '../../common/schemas/response/found_exception_list_item_schema.mock';
+import { getUpdateExceptionListItemSchemaMock } from '../../common/schemas/request/update_exception_list_item_schema.mock';
+import { getUpdateExceptionListSchemaMock } from '../../common/schemas/request/update_exception_list_schema.mock';
+import {
+  CreateExceptionListItemSchema,
+  CreateExceptionListSchema,
+  ExceptionListItemSchema,
+  ExceptionListSchema,
+} from '../../common/schemas';
 
 import {
   addExceptionList,
@@ -17,7 +26,10 @@ import {
   fetchExceptionListById,
   fetchExceptionListItemById,
   fetchExceptionListItemsByListId,
+  updateExceptionList,
+  updateExceptionListItem,
 } from './api';
+import { ApiCallByIdProps, ApiCallByListIdProps } from './types';
 
 const abortCtrl = new AbortController();
 
@@ -44,37 +56,60 @@ describe('Exceptions Lists API', () => {
       fetchMock.mockResolvedValue(getExceptionListSchemaMock());
     });
 
-    test('it uses POST when "list.id" does not exist', async () => {
+    test('it invokes "addExceptionList" with expected url and body values', async () => {
       const payload = getCreateExceptionListSchemaMock();
-      const exceptionResponse = await addExceptionList({
+      await addExceptionList({
         http: mockKibanaHttpService(),
         list: payload,
         signal: abortCtrl.signal,
       });
-
+      // TODO Would like to just use getExceptionListSchemaMock() here, but
+      // validation returns object in different order, making the strings not match
       expect(fetchMock).toHaveBeenCalledWith('/api/exception_lists', {
         body: JSON.stringify(payload),
         method: 'POST',
         signal: abortCtrl.signal,
       });
-      expect(exceptionResponse).toEqual(getExceptionListSchemaMock());
     });
 
-    test('it uses PUT when "list.id" exists', async () => {
-      const payload = getExceptionListSchemaMock();
+    test('it returns expected exception list on success', async () => {
+      const payload = getCreateExceptionListSchemaMock();
       const exceptionResponse = await addExceptionList({
         http: mockKibanaHttpService(),
-        list: getExceptionListSchemaMock(),
-        signal: abortCtrl.signal,
-      });
-
-      expect(fetchMock).toHaveBeenCalledWith('/api/exception_lists', {
-        body: JSON.stringify(payload),
-        method: 'PUT',
+        list: payload,
         signal: abortCtrl.signal,
       });
       expect(exceptionResponse).toEqual(getExceptionListSchemaMock());
     });
+
+    test('it returns error and does not make request if request payload fails decode', async () => {
+      const payload: Omit<CreateExceptionListSchema, 'description'> & {
+        description?: string[];
+      } = { ...getCreateExceptionListSchemaMock(), description: ['123'] };
+
+      await expect(
+        addExceptionList({
+          http: mockKibanaHttpService(),
+          list: (payload as unknown) as ExceptionListSchema,
+          signal: abortCtrl.signal,
+        })
+      ).rejects.toEqual('Invalid value "["123"]" supplied to "description"');
+    });
+
+    test('it returns error if response payload fails decode', async () => {
+      const payload = getCreateExceptionListSchemaMock();
+      const badPayload = getExceptionListSchemaMock();
+      delete badPayload.id;
+      fetchMock.mockResolvedValue(badPayload);
+
+      await expect(
+        addExceptionList({
+          http: mockKibanaHttpService(),
+          list: payload,
+          signal: abortCtrl.signal,
+        })
+      ).rejects.toEqual('Invalid value "undefined" supplied to "id"');
+    });
   });
 
   describe('#addExceptionListItem', () => {
@@ -83,37 +118,182 @@ describe('Exceptions Lists API', () => {
       fetchMock.mockResolvedValue(getExceptionListItemSchemaMock());
     });
 
-    test('it uses POST when "listItem.id" does not exist', async () => {
+    test('it invokes "addExceptionListItem" with expected url and body values', async () => {
       const payload = getCreateExceptionListItemSchemaMock();
-      const exceptionResponse = await addExceptionListItem({
+      await addExceptionListItem({
         http: mockKibanaHttpService(),
         listItem: payload,
         signal: abortCtrl.signal,
       });
-
+      // TODO Would like to just use getExceptionListSchemaMock() here, but
+      // validation returns object in different order, making the strings not match
       expect(fetchMock).toHaveBeenCalledWith('/api/exception_lists/items', {
         body: JSON.stringify(payload),
         method: 'POST',
         signal: abortCtrl.signal,
       });
-      expect(exceptionResponse).toEqual(getExceptionListItemSchemaMock());
     });
 
-    test('check parameter url, body when "listItem.id" exists', async () => {
-      const payload = getExceptionListItemSchemaMock();
+    test('it returns expected exception list on success', async () => {
+      const payload = getCreateExceptionListItemSchemaMock();
       const exceptionResponse = await addExceptionListItem({
         http: mockKibanaHttpService(),
-        listItem: getExceptionListItemSchemaMock(),
+        listItem: payload,
         signal: abortCtrl.signal,
       });
+      expect(exceptionResponse).toEqual(getExceptionListItemSchemaMock());
+    });
 
-      expect(fetchMock).toHaveBeenCalledWith('/api/exception_lists/items', {
+    test('it returns error and does not make request if request payload fails decode', async () => {
+      const payload: Omit<CreateExceptionListItemSchema, 'description'> & {
+        description?: string[];
+      } = { ...getCreateExceptionListItemSchemaMock(), description: ['123'] };
+
+      await expect(
+        addExceptionListItem({
+          http: mockKibanaHttpService(),
+          listItem: (payload as unknown) as ExceptionListItemSchema,
+          signal: abortCtrl.signal,
+        })
+      ).rejects.toEqual('Invalid value "["123"]" supplied to "description"');
+    });
+
+    test('it returns error if response payload fails decode', async () => {
+      const payload = getCreateExceptionListItemSchemaMock();
+      const badPayload = getExceptionListItemSchemaMock();
+      delete badPayload.id;
+      fetchMock.mockResolvedValue(badPayload);
+
+      await expect(
+        addExceptionListItem({
+          http: mockKibanaHttpService(),
+          listItem: payload,
+          signal: abortCtrl.signal,
+        })
+      ).rejects.toEqual('Invalid value "undefined" supplied to "id"');
+    });
+  });
+
+  describe('#updateExceptionList', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(getExceptionListSchemaMock());
+    });
+
+    test('it invokes "updateExceptionList" with expected url and body values', async () => {
+      const payload = getUpdateExceptionListSchemaMock();
+      await updateExceptionList({
+        http: mockKibanaHttpService(),
+        list: payload,
+        signal: abortCtrl.signal,
+      });
+      // TODO Would like to just use getExceptionListSchemaMock() here, but
+      // validation returns object in different order, making the strings not match
+      expect(fetchMock).toHaveBeenCalledWith('/api/exception_lists', {
+        body: JSON.stringify(payload),
+        method: 'PUT',
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('it returns expected exception list on success', async () => {
+      const payload = getUpdateExceptionListSchemaMock();
+      const exceptionResponse = await updateExceptionList({
+        http: mockKibanaHttpService(),
+        list: payload,
+        signal: abortCtrl.signal,
+      });
+      expect(exceptionResponse).toEqual(getExceptionListSchemaMock());
+    });
+
+    test('it returns error and does not make request if request payload fails decode', async () => {
+      const payload = getUpdateExceptionListSchemaMock();
+      delete payload.description;
+
+      await expect(
+        updateExceptionList({
+          http: mockKibanaHttpService(),
+          list: payload,
+          signal: abortCtrl.signal,
+        })
+      ).rejects.toEqual('Invalid value "undefined" supplied to "description"');
+    });
+
+    test('it returns error if response payload fails decode', async () => {
+      const payload = getUpdateExceptionListSchemaMock();
+      const badPayload = getExceptionListSchemaMock();
+      delete badPayload.id;
+      fetchMock.mockResolvedValue(badPayload);
+
+      await expect(
+        updateExceptionList({
+          http: mockKibanaHttpService(),
+          list: payload,
+          signal: abortCtrl.signal,
+        })
+      ).rejects.toEqual('Invalid value "undefined" supplied to "id"');
+    });
+  });
+
+  describe('#updateExceptionListItem', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(getExceptionListItemSchemaMock());
+    });
+
+    test('it invokes "updateExceptionListItem" with expected url and body values', async () => {
+      const payload = getUpdateExceptionListItemSchemaMock();
+      await updateExceptionListItem({
+        http: mockKibanaHttpService(),
+        listItem: payload,
+        signal: abortCtrl.signal,
+      });
+      // TODO Would like to just use getExceptionListSchemaMock() here, but
+      // validation returns object in different order, making the strings not match
+      expect(fetchMock).toHaveBeenCalledWith('/api/exception_lists', {
         body: JSON.stringify(payload),
         method: 'PUT',
         signal: abortCtrl.signal,
       });
+    });
+
+    test('it returns expected exception list on success', async () => {
+      const payload = getUpdateExceptionListItemSchemaMock();
+      const exceptionResponse = await updateExceptionListItem({
+        http: mockKibanaHttpService(),
+        listItem: payload,
+        signal: abortCtrl.signal,
+      });
       expect(exceptionResponse).toEqual(getExceptionListItemSchemaMock());
     });
+
+    test('it returns error and does not make request if request payload fails decode', async () => {
+      const payload = getUpdateExceptionListItemSchemaMock();
+      delete payload.description;
+
+      await expect(
+        updateExceptionListItem({
+          http: mockKibanaHttpService(),
+          listItem: payload,
+          signal: abortCtrl.signal,
+        })
+      ).rejects.toEqual('Invalid value "undefined" supplied to "description"');
+    });
+
+    test('it returns error if response payload fails decode', async () => {
+      const payload = getUpdateExceptionListItemSchemaMock();
+      const badPayload = getExceptionListItemSchemaMock();
+      delete badPayload.id;
+      fetchMock.mockResolvedValue(badPayload);
+
+      await expect(
+        updateExceptionListItem({
+          http: mockKibanaHttpService(),
+          listItem: payload,
+          signal: abortCtrl.signal,
+        })
+      ).rejects.toEqual('Invalid value "undefined" supplied to "id"');
+    });
   });
 
   describe('#fetchExceptionListById', () => {
@@ -148,12 +328,39 @@ describe('Exceptions Lists API', () => {
       });
       expect(exceptionResponse).toEqual(getExceptionListSchemaMock());
     });
+
+    test('it returns error and does not make request if request payload fails decode', async () => {
+      const payload = ({
+        http: mockKibanaHttpService(),
+        id: 1,
+        namespaceType: 'single',
+        signal: abortCtrl.signal,
+      } as unknown) as ApiCallByIdProps & { id: number };
+      await expect(fetchExceptionListById(payload)).rejects.toEqual(
+        'Invalid value "1" supplied to "id"'
+      );
+    });
+
+    test('it returns error if response payload fails decode', async () => {
+      const badPayload = getExceptionListItemSchemaMock();
+      delete badPayload.id;
+      fetchMock.mockResolvedValue(badPayload);
+
+      await expect(
+        fetchExceptionListById({
+          http: mockKibanaHttpService(),
+          id: '1',
+          namespaceType: 'single',
+          signal: abortCtrl.signal,
+        })
+      ).rejects.toEqual('Invalid value "undefined" supplied to "id"');
+    });
   });
 
   describe('#fetchExceptionListItemsByListId', () => {
     beforeEach(() => {
       fetchMock.mockClear();
-      fetchMock.mockResolvedValue([getExceptionListItemSchemaMock()]);
+      fetchMock.mockResolvedValue(getFoundExceptionListItemSchemaMock());
     });
 
     test('it invokes "fetchExceptionListItemsByListId" with expected url and body values', async () => {
@@ -161,6 +368,10 @@ describe('Exceptions Lists API', () => {
         http: mockKibanaHttpService(),
         listId: 'myList',
         namespaceType: 'single',
+        pagination: {
+          page: 1,
+          perPage: 20,
+        },
         signal: abortCtrl.signal,
       });
 
@@ -169,8 +380,8 @@ describe('Exceptions Lists API', () => {
         query: {
           list_id: 'myList',
           namespace_type: 'single',
-          page: 1,
-          per_page: 20,
+          page: '1',
+          per_page: '20',
         },
         signal: abortCtrl.signal,
       });
@@ -185,6 +396,10 @@ describe('Exceptions Lists API', () => {
         http: mockKibanaHttpService(),
         listId: 'myList',
         namespaceType: 'single',
+        pagination: {
+          page: 1,
+          perPage: 20,
+        },
         signal: abortCtrl.signal,
       });
 
@@ -194,8 +409,8 @@ describe('Exceptions Lists API', () => {
           filter: 'exception-list.attributes.entries.field:hello world*',
           list_id: 'myList',
           namespace_type: 'single',
-          page: 1,
-          per_page: 20,
+          page: '1',
+          per_page: '20',
         },
         signal: abortCtrl.signal,
       });
@@ -210,6 +425,10 @@ describe('Exceptions Lists API', () => {
         http: mockKibanaHttpService(),
         listId: 'myList',
         namespaceType: 'agnostic',
+        pagination: {
+          page: 1,
+          perPage: 20,
+        },
         signal: abortCtrl.signal,
       });
 
@@ -219,8 +438,8 @@ describe('Exceptions Lists API', () => {
           filter: 'exception-list-agnostic.attributes.entries.field:hello world*',
           list_id: 'myList',
           namespace_type: 'agnostic',
-          page: 1,
-          per_page: 20,
+          page: '1',
+          per_page: '20',
         },
         signal: abortCtrl.signal,
       });
@@ -235,6 +454,10 @@ describe('Exceptions Lists API', () => {
         http: mockKibanaHttpService(),
         listId: 'myList',
         namespaceType: 'agnostic',
+        pagination: {
+          page: 1,
+          perPage: 20,
+        },
         signal: abortCtrl.signal,
       });
 
@@ -244,8 +467,8 @@ describe('Exceptions Lists API', () => {
           filter: 'exception-list-agnostic.attributes.tags:malware',
           list_id: 'myList',
           namespace_type: 'agnostic',
-          page: 1,
-          per_page: 20,
+          page: '1',
+          per_page: '20',
         },
         signal: abortCtrl.signal,
       });
@@ -260,6 +483,10 @@ describe('Exceptions Lists API', () => {
         http: mockKibanaHttpService(),
         listId: 'myList',
         namespaceType: 'agnostic',
+        pagination: {
+          page: 1,
+          perPage: 20,
+        },
         signal: abortCtrl.signal,
       });
 
@@ -270,8 +497,8 @@ describe('Exceptions Lists API', () => {
             'exception-list-agnostic.attributes.entries.field:host.name* AND exception-list-agnostic.attributes.tags:malware',
           list_id: 'myList',
           namespace_type: 'agnostic',
-          page: 1,
-          per_page: 20,
+          page: '1',
+          per_page: '20',
         },
         signal: abortCtrl.signal,
       });
@@ -282,16 +509,57 @@ describe('Exceptions Lists API', () => {
         http: mockKibanaHttpService(),
         listId: 'endpoint_list',
         namespaceType: 'single',
+        pagination: {
+          page: 1,
+          perPage: 20,
+        },
         signal: abortCtrl.signal,
       });
-      expect(exceptionResponse).toEqual([getExceptionListItemSchemaMock()]);
+      expect(exceptionResponse).toEqual(getFoundExceptionListItemSchemaMock());
+    });
+
+    test('it returns error and does not make request if request payload fails decode', async () => {
+      const payload = ({
+        http: mockKibanaHttpService(),
+        listId: '1',
+        namespaceType: 'not a namespace type',
+        pagination: {
+          page: 1,
+          perPage: 20,
+        },
+        signal: abortCtrl.signal,
+      } as unknown) as ApiCallByListIdProps & { listId: number };
+      await expect(fetchExceptionListItemsByListId(payload)).rejects.toEqual(
+        'Invalid value "not a namespace type" supplied to "namespace_type"'
+      );
+    });
+
+    test('it returns error if response payload fails decode', async () => {
+      const badPayload = getExceptionListItemSchemaMock();
+      delete badPayload.id;
+      fetchMock.mockResolvedValue(badPayload);
+
+      await expect(
+        fetchExceptionListItemsByListId({
+          http: mockKibanaHttpService(),
+          listId: 'myList',
+          namespaceType: 'single',
+          pagination: {
+            page: 1,
+            perPage: 20,
+          },
+          signal: abortCtrl.signal,
+        })
+      ).rejects.toEqual(
+        'Invalid value "undefined" supplied to "data",Invalid value "undefined" supplied to "page",Invalid value "undefined" supplied to "per_page",Invalid value "undefined" supplied to "total"'
+      );
     });
   });
 
   describe('#fetchExceptionListItemById', () => {
     beforeEach(() => {
       fetchMock.mockClear();
-      fetchMock.mockResolvedValue([getExceptionListItemSchemaMock()]);
+      fetchMock.mockResolvedValue(getExceptionListItemSchemaMock());
     });
 
     test('it invokes "fetchExceptionListItemById" with expected url and body values', async () => {
@@ -318,7 +586,34 @@ describe('Exceptions Lists API', () => {
         namespaceType: 'single',
         signal: abortCtrl.signal,
       });
-      expect(exceptionResponse).toEqual([getExceptionListItemSchemaMock()]);
+      expect(exceptionResponse).toEqual(getExceptionListItemSchemaMock());
+    });
+
+    test('it returns error and does not make request if request payload fails decode', async () => {
+      const payload = ({
+        http: mockKibanaHttpService(),
+        id: '1',
+        namespaceType: 'not a namespace type',
+        signal: abortCtrl.signal,
+      } as unknown) as ApiCallByIdProps & { namespaceType: string };
+      await expect(fetchExceptionListItemById(payload)).rejects.toEqual(
+        'Invalid value "not a namespace type" supplied to "namespace_type"'
+      );
+    });
+
+    test('it returns error if response payload fails decode', async () => {
+      const badPayload = getExceptionListItemSchemaMock();
+      delete badPayload.id;
+      fetchMock.mockResolvedValue(badPayload);
+
+      await expect(
+        fetchExceptionListItemById({
+          http: mockKibanaHttpService(),
+          id: '1',
+          namespaceType: 'single',
+          signal: abortCtrl.signal,
+        })
+      ).rejects.toEqual('Invalid value "undefined" supplied to "id"');
     });
   });
 
@@ -354,6 +649,33 @@ describe('Exceptions Lists API', () => {
       });
       expect(exceptionResponse).toEqual(getExceptionListSchemaMock());
     });
+
+    test('it returns error and does not make request if request payload fails decode', async () => {
+      const payload = ({
+        http: mockKibanaHttpService(),
+        id: 1,
+        namespaceType: 'single',
+        signal: abortCtrl.signal,
+      } as unknown) as ApiCallByIdProps & { id: number };
+      await expect(deleteExceptionListById(payload)).rejects.toEqual(
+        'Invalid value "1" supplied to "id"'
+      );
+    });
+
+    test('it returns error if response payload fails decode', async () => {
+      const badPayload = getExceptionListSchemaMock();
+      delete badPayload.id;
+      fetchMock.mockResolvedValue(badPayload);
+
+      await expect(
+        deleteExceptionListById({
+          http: mockKibanaHttpService(),
+          id: '1',
+          namespaceType: 'single',
+          signal: abortCtrl.signal,
+        })
+      ).rejects.toEqual('Invalid value "undefined" supplied to "id"');
+    });
   });
 
   describe('#deleteExceptionListItemById', () => {
@@ -388,5 +710,32 @@ describe('Exceptions Lists API', () => {
       });
       expect(exceptionResponse).toEqual(getExceptionListItemSchemaMock());
     });
+
+    test('it returns error and does not make request if request payload fails decode', async () => {
+      const payload = ({
+        http: mockKibanaHttpService(),
+        id: 1,
+        namespaceType: 'single',
+        signal: abortCtrl.signal,
+      } as unknown) as ApiCallByIdProps & { id: number };
+      await expect(deleteExceptionListItemById(payload)).rejects.toEqual(
+        'Invalid value "1" supplied to "id"'
+      );
+    });
+
+    test('it returns error if response payload fails decode', async () => {
+      const badPayload = getExceptionListItemSchemaMock();
+      delete badPayload.id;
+      fetchMock.mockResolvedValue(badPayload);
+
+      await expect(
+        deleteExceptionListItemById({
+          http: mockKibanaHttpService(),
+          id: '1',
+          namespaceType: 'single',
+          signal: abortCtrl.signal,
+        })
+      ).rejects.toEqual('Invalid value "undefined" supplied to "id"');
+    });
   });
 });
diff --git a/x-pack/plugins/lists/public/exceptions/api.ts b/x-pack/plugins/lists/public/exceptions/api.ts
index 6968ba5f50e72..2ab7695d8c17c 100644
--- a/x-pack/plugins/lists/public/exceptions/api.ts
+++ b/x-pack/plugins/lists/public/exceptions/api.ts
@@ -3,7 +3,6 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
 import {
   EXCEPTION_LIST_ITEM_URL,
   EXCEPTION_LIST_NAMESPACE,
@@ -14,17 +13,32 @@ import {
   ExceptionListItemSchema,
   ExceptionListSchema,
   FoundExceptionListItemSchema,
+  createExceptionListItemSchema,
+  createExceptionListSchema,
+  deleteExceptionListItemSchema,
+  deleteExceptionListSchema,
+  exceptionListItemSchema,
+  exceptionListSchema,
+  findExceptionListItemSchema,
+  foundExceptionListItemSchema,
+  readExceptionListItemSchema,
+  readExceptionListSchema,
+  updateExceptionListItemSchema,
+  updateExceptionListSchema,
 } from '../../common/schemas';
+import { validate } from '../../common/siem_common_deps';
 
 import {
   AddExceptionListItemProps,
   AddExceptionListProps,
   ApiCallByIdProps,
   ApiCallByListIdProps,
+  UpdateExceptionListItemProps,
+  UpdateExceptionListProps,
 } from './types';
 
 /**
- * Add provided ExceptionList
+ * Add new ExceptionList
  *
  * @param http Kibana http service
  * @param list exception list to add
@@ -32,22 +46,39 @@ import {
  *
  * @throws An error if response is not OK
  *
- * Uses type assertion (list as ExceptionListSchema)
- * per suggestion in Typescript union docs
  */
 export const addExceptionList = async ({
   http,
   list,
   signal,
-}: AddExceptionListProps): Promise<ExceptionListSchema> =>
-  http.fetch<ExceptionListSchema>(EXCEPTION_LIST_URL, {
-    body: JSON.stringify(list),
-    method: (list as ExceptionListSchema).id != null ? 'PUT' : 'POST',
-    signal,
-  });
+}: AddExceptionListProps): Promise<ExceptionListSchema> => {
+  const [validatedRequest, errorsRequest] = validate(list, createExceptionListSchema);
+
+  if (validatedRequest != null) {
+    try {
+      const response = await http.fetch<ExceptionListItemSchema>(EXCEPTION_LIST_URL, {
+        body: JSON.stringify(list),
+        method: 'POST',
+        signal,
+      });
+
+      const [validatedResponse, errorsResponse] = validate(response, exceptionListSchema);
+
+      if (errorsResponse != null || validatedResponse == null) {
+        return Promise.reject(errorsResponse);
+      } else {
+        return Promise.resolve(validatedResponse);
+      }
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  } else {
+    return Promise.reject(errorsRequest);
+  }
+};
 
 /**
- * Add provided ExceptionListItem
+ * Add new ExceptionListItem
  *
  * @param http Kibana http service
  * @param listItem exception list item to add
@@ -55,19 +86,116 @@ export const addExceptionList = async ({
  *
  * @throws An error if response is not OK
  *
- * Uses type assertion (listItem as ExceptionListItemSchema)
- * per suggestion in Typescript union docs
  */
 export const addExceptionListItem = async ({
   http,
   listItem,
   signal,
-}: AddExceptionListItemProps): Promise<ExceptionListItemSchema> =>
-  http.fetch<ExceptionListItemSchema>(`${EXCEPTION_LIST_ITEM_URL}`, {
-    body: JSON.stringify(listItem),
-    method: (listItem as ExceptionListItemSchema).id != null ? 'PUT' : 'POST',
-    signal,
-  });
+}: AddExceptionListItemProps): Promise<ExceptionListItemSchema> => {
+  const [validatedRequest, errorsRequest] = validate(listItem, createExceptionListItemSchema);
+
+  if (validatedRequest != null) {
+    try {
+      const response = await http.fetch<ExceptionListItemSchema>(EXCEPTION_LIST_ITEM_URL, {
+        body: JSON.stringify(listItem),
+        method: 'POST',
+        signal,
+      });
+
+      const [validatedResponse, errorsResponse] = validate(response, exceptionListItemSchema);
+
+      if (errorsResponse != null || validatedResponse == null) {
+        return Promise.reject(errorsResponse);
+      } else {
+        return Promise.resolve(validatedResponse);
+      }
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  } else {
+    return Promise.reject(errorsRequest);
+  }
+};
+
+/**
+ * Update existing ExceptionList
+ *
+ * @param http Kibana http service
+ * @param list exception list to add
+ * @param signal to cancel request
+ *
+ * @throws An error if response is not OK
+ *
+ */
+export const updateExceptionList = async ({
+  http,
+  list,
+  signal,
+}: UpdateExceptionListProps): Promise<ExceptionListSchema> => {
+  const [validatedRequest, errorsRequest] = validate(list, updateExceptionListSchema);
+
+  if (validatedRequest != null) {
+    try {
+      const response = await http.fetch<ExceptionListSchema>(EXCEPTION_LIST_URL, {
+        body: JSON.stringify(list),
+        method: 'PUT',
+        signal,
+      });
+
+      const [validatedResponse, errorsResponse] = validate(response, exceptionListSchema);
+
+      if (errorsResponse != null || validatedResponse == null) {
+        return Promise.reject(errorsResponse);
+      } else {
+        return Promise.resolve(validatedResponse);
+      }
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  } else {
+    return Promise.reject(errorsRequest);
+  }
+};
+
+/**
+ * Update existing ExceptionListItem
+ *
+ * @param http Kibana http service
+ * @param listItem exception list item to add
+ * @param signal to cancel request
+ *
+ * @throws An error if response is not OK
+ *
+ */
+export const updateExceptionListItem = async ({
+  http,
+  listItem,
+  signal,
+}: UpdateExceptionListItemProps): Promise<ExceptionListItemSchema> => {
+  const [validatedRequest, errorsRequest] = validate(listItem, updateExceptionListItemSchema);
+
+  if (validatedRequest != null) {
+    try {
+      const response = await http.fetch<ExceptionListItemSchema>(EXCEPTION_LIST_URL, {
+        body: JSON.stringify(listItem),
+        method: 'PUT',
+        signal,
+      });
+
+      const [validatedResponse, errorsResponse] = validate(response, exceptionListItemSchema);
+
+      if (errorsResponse != null || validatedResponse == null) {
+        return Promise.reject(errorsResponse);
+      } else {
+        return Promise.resolve(validatedResponse);
+      }
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  } else {
+    return Promise.reject(errorsRequest);
+  }
+};
 
 /**
  * Fetch an ExceptionList by providing a ExceptionList ID
@@ -84,12 +212,34 @@ export const fetchExceptionListById = async ({
   id,
   namespaceType,
   signal,
-}: ApiCallByIdProps): Promise<ExceptionListSchema> =>
-  http.fetch<ExceptionListSchema>(`${EXCEPTION_LIST_URL}`, {
-    method: 'GET',
-    query: { id, namespace_type: namespaceType },
-    signal,
-  });
+}: ApiCallByIdProps): Promise<ExceptionListSchema> => {
+  const [validatedRequest, errorsRequest] = validate(
+    { id, namespace_type: namespaceType },
+    readExceptionListSchema
+  );
+
+  if (validatedRequest != null) {
+    try {
+      const response = await http.fetch<ExceptionListSchema>(EXCEPTION_LIST_URL, {
+        method: 'GET',
+        query: { id, namespace_type: namespaceType },
+        signal,
+      });
+
+      const [validatedResponse, errorsResponse] = validate(response, exceptionListSchema);
+
+      if (errorsResponse != null || validatedResponse == null) {
+        return Promise.reject(errorsResponse);
+      } else {
+        return Promise.resolve(validatedResponse);
+      }
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  } else {
+    return Promise.reject(errorsRequest);
+  }
+};
 
 /**
  * Fetch an ExceptionList's ExceptionItems by providing a ExceptionList list_id
@@ -111,11 +261,7 @@ export const fetchExceptionListItemsByListId = async ({
     filter: '',
     tags: [],
   },
-  pagination = {
-    page: 1,
-    perPage: 20,
-    total: 0,
-  },
+  pagination,
   signal,
 }: ApiCallByListIdProps): Promise<FoundExceptionListItemSchema> => {
   const namespace =
@@ -124,22 +270,44 @@ export const fetchExceptionListItemsByListId = async ({
     ...(filterOptions.filter.length
       ? [`${namespace}.attributes.entries.field:${filterOptions.filter}*`]
       : []),
-    ...(filterOptions.tags?.map((t) => `${namespace}.attributes.tags:${t}`) ?? []),
+    ...(filterOptions.tags.length
+      ? filterOptions.tags.map((t) => `${namespace}.attributes.tags:${t}`)
+      : []),
   ];
 
   const query = {
     list_id: listId,
     namespace_type: namespaceType,
-    page: pagination.page,
-    per_page: pagination.perPage,
+    page: pagination.page ? `${pagination.page}` : '1',
+    per_page: pagination.perPage ? `${pagination.perPage}` : '20',
     ...(filters.length ? { filter: filters.join(' AND ') } : {}),
   };
+  const [validatedRequest, errorsRequest] = validate(query, findExceptionListItemSchema);
+
+  if (validatedRequest != null) {
+    try {
+      const response = await http.fetch<FoundExceptionListItemSchema>(
+        `${EXCEPTION_LIST_ITEM_URL}/_find`,
+        {
+          method: 'GET',
+          query,
+          signal,
+        }
+      );
+
+      const [validatedResponse, errorsResponse] = validate(response, foundExceptionListItemSchema);
 
-  return http.fetch<FoundExceptionListItemSchema>(`${EXCEPTION_LIST_ITEM_URL}/_find`, {
-    method: 'GET',
-    query,
-    signal,
-  });
+      if (errorsResponse != null || validatedResponse == null) {
+        return Promise.reject(errorsResponse);
+      } else {
+        return Promise.resolve(validatedResponse);
+      }
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  } else {
+    return Promise.reject(errorsRequest);
+  }
 };
 
 /**
@@ -157,12 +325,33 @@ export const fetchExceptionListItemById = async ({
   id,
   namespaceType,
   signal,
-}: ApiCallByIdProps): Promise<ExceptionListItemSchema> =>
-  http.fetch<ExceptionListItemSchema>(`${EXCEPTION_LIST_ITEM_URL}`, {
-    method: 'GET',
-    query: { id, namespace_type: namespaceType },
-    signal,
-  });
+}: ApiCallByIdProps): Promise<ExceptionListItemSchema> => {
+  const [validatedRequest, errorsRequest] = validate(
+    { id, namespace_type: namespaceType },
+    readExceptionListItemSchema
+  );
+
+  if (validatedRequest != null) {
+    try {
+      const response = await http.fetch<ExceptionListItemSchema>(EXCEPTION_LIST_ITEM_URL, {
+        method: 'GET',
+        query: { id, namespace_type: namespaceType },
+        signal,
+      });
+      const [validatedResponse, errorsResponse] = validate(response, exceptionListItemSchema);
+
+      if (errorsResponse != null || validatedResponse == null) {
+        return Promise.reject(errorsResponse);
+      } else {
+        return Promise.resolve(validatedResponse);
+      }
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  } else {
+    return Promise.reject(errorsRequest);
+  }
+};
 
 /**
  * Delete an ExceptionList by providing a ExceptionList ID
@@ -179,12 +368,34 @@ export const deleteExceptionListById = async ({
   id,
   namespaceType,
   signal,
-}: ApiCallByIdProps): Promise<ExceptionListSchema> =>
-  http.fetch<ExceptionListSchema>(`${EXCEPTION_LIST_URL}`, {
-    method: 'DELETE',
-    query: { id, namespace_type: namespaceType },
-    signal,
-  });
+}: ApiCallByIdProps): Promise<ExceptionListSchema> => {
+  const [validatedRequest, errorsRequest] = validate(
+    { id, namespace_type: namespaceType },
+    deleteExceptionListSchema
+  );
+
+  if (validatedRequest != null) {
+    try {
+      const response = await http.fetch<ExceptionListSchema>(EXCEPTION_LIST_URL, {
+        method: 'DELETE',
+        query: { id, namespace_type: namespaceType },
+        signal,
+      });
+
+      const [validatedResponse, errorsResponse] = validate(response, exceptionListSchema);
+
+      if (errorsResponse != null || validatedResponse == null) {
+        return Promise.reject(errorsResponse);
+      } else {
+        return Promise.resolve(validatedResponse);
+      }
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  } else {
+    return Promise.reject(errorsRequest);
+  }
+};
 
 /**
  * Delete an ExceptionListItem by providing a ExceptionListItem ID
@@ -201,9 +412,31 @@ export const deleteExceptionListItemById = async ({
   id,
   namespaceType,
   signal,
-}: ApiCallByIdProps): Promise<ExceptionListItemSchema> =>
-  http.fetch<ExceptionListItemSchema>(`${EXCEPTION_LIST_ITEM_URL}`, {
-    method: 'DELETE',
-    query: { id, namespace_type: namespaceType },
-    signal,
-  });
+}: ApiCallByIdProps): Promise<ExceptionListItemSchema> => {
+  const [validatedRequest, errorsRequest] = validate(
+    { id, namespace_type: namespaceType },
+    deleteExceptionListItemSchema
+  );
+
+  if (validatedRequest != null) {
+    try {
+      const response = await http.fetch<ExceptionListItemSchema>(EXCEPTION_LIST_ITEM_URL, {
+        method: 'DELETE',
+        query: { id, namespace_type: namespaceType },
+        signal,
+      });
+
+      const [validatedResponse, errorsResponse] = validate(response, exceptionListItemSchema);
+
+      if (errorsResponse != null || validatedResponse == null) {
+        return Promise.reject(errorsResponse);
+      } else {
+        return Promise.resolve(validatedResponse);
+      }
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  } else {
+    return Promise.reject(errorsRequest);
+  }
+};
diff --git a/x-pack/plugins/lists/public/exceptions/hooks/persist_exception_item.test.tsx b/x-pack/plugins/lists/public/exceptions/hooks/persist_exception_item.test.tsx
index 1db18168b11fe..ebee2cbace9cc 100644
--- a/x-pack/plugins/lists/public/exceptions/hooks/persist_exception_item.test.tsx
+++ b/x-pack/plugins/lists/public/exceptions/hooks/persist_exception_item.test.tsx
@@ -7,19 +7,24 @@
 import { act, renderHook } from '@testing-library/react-hooks';
 
 import * as api from '../api';
+import { getCreateExceptionListItemSchemaMock } from '../../../common/schemas/request/create_exception_list_item_schema.mock';
+import { getUpdateExceptionListItemSchemaMock } from '../../../common/schemas/request/update_exception_list_item_schema.mock';
 import { getExceptionListItemSchemaMock } from '../../../common/schemas/response/exception_list_item_schema.mock';
 import { createKibanaCoreStartMock } from '../../common/mocks/kibana_core';
 import { PersistHookProps } from '../types';
 
 import { ReturnPersistExceptionItem, usePersistExceptionItem } from './persist_exception_item';
 
-jest.mock('../api');
-
 const mockKibanaHttpService = createKibanaCoreStartMock().http;
 
 describe('usePersistExceptionItem', () => {
   const onError = jest.fn();
 
+  beforeEach(() => {
+    jest.spyOn(api, 'addExceptionListItem').mockResolvedValue(getExceptionListItemSchemaMock());
+    jest.spyOn(api, 'updateExceptionListItem').mockResolvedValue(getExceptionListItemSchemaMock());
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -40,7 +45,7 @@ describe('usePersistExceptionItem', () => {
       >(() => usePersistExceptionItem({ http: mockKibanaHttpService, onError }));
 
       await waitForNextUpdate();
-      result.current[1](getExceptionListItemSchemaMock());
+      result.current[1](getCreateExceptionListItemSchemaMock());
       rerender();
 
       expect(result.current).toEqual([{ isLoading: true, isSaved: false }, result.current[1]]);
@@ -55,10 +60,29 @@ describe('usePersistExceptionItem', () => {
       >(() => usePersistExceptionItem({ http: mockKibanaHttpService, onError }));
 
       await waitForNextUpdate();
-      result.current[1](getExceptionListItemSchemaMock());
+      result.current[1](getCreateExceptionListItemSchemaMock());
+      await waitForNextUpdate();
+
+      expect(result.current).toEqual([{ isLoading: false, isSaved: true }, result.current[1]]);
+    });
+  });
+
+  test('it invokes "updateExceptionListItem" when payload has "id"', async () => {
+    const addExceptionItem = jest.spyOn(api, 'addExceptionListItem');
+    const updateExceptionItem = jest.spyOn(api, 'updateExceptionListItem');
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook<
+        PersistHookProps,
+        ReturnPersistExceptionItem
+      >(() => usePersistExceptionItem({ http: mockKibanaHttpService, onError }));
+
+      await waitForNextUpdate();
+      result.current[1](getUpdateExceptionListItemSchemaMock());
       await waitForNextUpdate();
 
       expect(result.current).toEqual([{ isLoading: false, isSaved: true }, result.current[1]]);
+      expect(addExceptionItem).not.toHaveBeenCalled();
+      expect(updateExceptionItem).toHaveBeenCalled();
     });
   });
 
@@ -73,7 +97,7 @@ describe('usePersistExceptionItem', () => {
       >(() => usePersistExceptionItem({ http: mockKibanaHttpService, onError }));
 
       await waitForNextUpdate();
-      result.current[1](getExceptionListItemSchemaMock());
+      result.current[1](getCreateExceptionListItemSchemaMock());
       await waitForNextUpdate();
 
       expect(result.current).toEqual([{ isLoading: false, isSaved: false }, result.current[1]]);
diff --git a/x-pack/plugins/lists/public/exceptions/hooks/persist_exception_item.tsx b/x-pack/plugins/lists/public/exceptions/hooks/persist_exception_item.tsx
index d9fe3a82ac177..b6a333f1232e0 100644
--- a/x-pack/plugins/lists/public/exceptions/hooks/persist_exception_item.tsx
+++ b/x-pack/plugins/lists/public/exceptions/hooks/persist_exception_item.tsx
@@ -3,10 +3,10 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
 import { Dispatch, useEffect, useState } from 'react';
 
-import { addExceptionListItem as persistExceptionItem } from '../api';
+import { UpdateExceptionListItemSchema } from '../../../common/schemas';
+import { addExceptionListItem, updateExceptionListItem } from '../api';
 import { AddExceptionListItem, PersistHookProps } from '../types';
 
 interface PersistReturnExceptionItem {
@@ -33,6 +33,8 @@ export const usePersistExceptionItem = ({
   const [exceptionListItem, setExceptionItem] = useState<AddExceptionListItem | null>(null);
   const [isSaved, setIsSaved] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const isUpdateExceptionItem = (item: unknown): item is UpdateExceptionListItemSchema =>
+    Boolean(item && (item as UpdateExceptionListItemSchema).id != null);
 
   useEffect(() => {
     let isSubscribed = true;
@@ -43,11 +45,20 @@ export const usePersistExceptionItem = ({
       if (exceptionListItem != null) {
         try {
           setIsLoading(true);
-          await persistExceptionItem({
-            http,
-            listItem: exceptionListItem,
-            signal: abortCtrl.signal,
-          });
+          if (isUpdateExceptionItem(exceptionListItem)) {
+            await updateExceptionListItem({
+              http,
+              listItem: exceptionListItem,
+              signal: abortCtrl.signal,
+            });
+          } else {
+            await addExceptionListItem({
+              http,
+              listItem: exceptionListItem,
+              signal: abortCtrl.signal,
+            });
+          }
+
           if (isSubscribed) {
             setIsSaved(true);
           }
diff --git a/x-pack/plugins/lists/public/exceptions/hooks/persist_exception_list.test.tsx b/x-pack/plugins/lists/public/exceptions/hooks/persist_exception_list.test.tsx
index 80d6e27043c99..0541f893e2797 100644
--- a/x-pack/plugins/lists/public/exceptions/hooks/persist_exception_list.test.tsx
+++ b/x-pack/plugins/lists/public/exceptions/hooks/persist_exception_list.test.tsx
@@ -7,19 +7,24 @@
 import { act, renderHook } from '@testing-library/react-hooks';
 
 import * as api from '../api';
+import { getCreateExceptionListSchemaMock } from '../../../common/schemas/request/create_exception_list_schema.mock';
+import { getUpdateExceptionListSchemaMock } from '../../../common/schemas/request/update_exception_list_schema.mock';
 import { getExceptionListSchemaMock } from '../../../common/schemas/response/exception_list_schema.mock';
 import { createKibanaCoreStartMock } from '../../common/mocks/kibana_core';
 import { PersistHookProps } from '../types';
 
 import { ReturnPersistExceptionList, usePersistExceptionList } from './persist_exception_list';
 
-jest.mock('../api');
-
 const mockKibanaHttpService = createKibanaCoreStartMock().http;
 
 describe('usePersistExceptionList', () => {
   const onError = jest.fn();
 
+  beforeEach(() => {
+    jest.spyOn(api, 'addExceptionList').mockResolvedValue(getExceptionListSchemaMock());
+    jest.spyOn(api, 'updateExceptionList').mockResolvedValue(getExceptionListSchemaMock());
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -39,7 +44,7 @@ describe('usePersistExceptionList', () => {
         ReturnPersistExceptionList
       >(() => usePersistExceptionList({ http: mockKibanaHttpService, onError }));
       await waitForNextUpdate();
-      result.current[1](getExceptionListSchemaMock());
+      result.current[1](getCreateExceptionListSchemaMock());
       rerender();
 
       expect(result.current).toEqual([{ isLoading: true, isSaved: false }, result.current[1]]);
@@ -53,10 +58,29 @@ describe('usePersistExceptionList', () => {
         ReturnPersistExceptionList
       >(() => usePersistExceptionList({ http: mockKibanaHttpService, onError }));
       await waitForNextUpdate();
-      result.current[1](getExceptionListSchemaMock());
+      result.current[1](getCreateExceptionListSchemaMock());
+      await waitForNextUpdate();
+
+      expect(result.current).toEqual([{ isLoading: false, isSaved: true }, result.current[1]]);
+    });
+  });
+
+  test('it invokes "updateExceptionList" when payload has "id"', async () => {
+    const addException = jest.spyOn(api, 'addExceptionList');
+    const updateException = jest.spyOn(api, 'updateExceptionList');
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook<
+        PersistHookProps,
+        ReturnPersistExceptionList
+      >(() => usePersistExceptionList({ http: mockKibanaHttpService, onError }));
+
+      await waitForNextUpdate();
+      result.current[1](getUpdateExceptionListSchemaMock());
       await waitForNextUpdate();
 
       expect(result.current).toEqual([{ isLoading: false, isSaved: true }, result.current[1]]);
+      expect(addException).not.toHaveBeenCalled();
+      expect(updateException).toHaveBeenCalled();
     });
   });
 
@@ -70,7 +94,7 @@ describe('usePersistExceptionList', () => {
         ReturnPersistExceptionList
       >(() => usePersistExceptionList({ http: mockKibanaHttpService, onError }));
       await waitForNextUpdate();
-      result.current[1](getExceptionListSchemaMock());
+      result.current[1](getCreateExceptionListSchemaMock());
       await waitForNextUpdate();
 
       expect(result.current).toEqual([{ isLoading: false, isSaved: false }, result.current[1]]);
diff --git a/x-pack/plugins/lists/public/exceptions/hooks/persist_exception_list.tsx b/x-pack/plugins/lists/public/exceptions/hooks/persist_exception_list.tsx
index 5848a17145194..9a82d538fcd79 100644
--- a/x-pack/plugins/lists/public/exceptions/hooks/persist_exception_list.tsx
+++ b/x-pack/plugins/lists/public/exceptions/hooks/persist_exception_list.tsx
@@ -6,7 +6,8 @@
 
 import { Dispatch, useEffect, useState } from 'react';
 
-import { addExceptionList as persistExceptionList } from '../api';
+import { UpdateExceptionListSchema } from '../../../common/schemas';
+import { addExceptionList, updateExceptionList } from '../api';
 import { AddExceptionList, PersistHookProps } from '../types';
 
 interface PersistReturnExceptionList {
@@ -33,6 +34,8 @@ export const usePersistExceptionList = ({
   const [exceptionList, setExceptionList] = useState<AddExceptionList | null>(null);
   const [isSaved, setIsSaved] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const isUpdateExceptionList = (item: unknown): item is UpdateExceptionListSchema =>
+    Boolean(item && (item as UpdateExceptionListSchema).id != null);
 
   useEffect(() => {
     let isSubscribed = true;
@@ -43,7 +46,11 @@ export const usePersistExceptionList = ({
       if (exceptionList != null) {
         try {
           setIsLoading(true);
-          await persistExceptionList({ http, list: exceptionList, signal: abortCtrl.signal });
+          if (isUpdateExceptionList(exceptionList)) {
+            await updateExceptionList({ http, list: exceptionList, signal: abortCtrl.signal });
+          } else {
+            await addExceptionList({ http, list: exceptionList, signal: abortCtrl.signal });
+          }
           if (isSubscribed) {
             setIsSaved(true);
           }
diff --git a/x-pack/plugins/lists/public/exceptions/hooks/use_api.test.tsx b/x-pack/plugins/lists/public/exceptions/hooks/use_api.test.tsx
index edf65839c07cf..1e0f7e58a0f4c 100644
--- a/x-pack/plugins/lists/public/exceptions/hooks/use_api.test.tsx
+++ b/x-pack/plugins/lists/public/exceptions/hooks/use_api.test.tsx
@@ -15,8 +15,6 @@ import { ApiCallByIdProps } from '../types';
 
 import { ExceptionsApi, useApi } from './use_api';
 
-jest.mock('../api');
-
 const mockKibanaHttpService = createKibanaCoreStartMock().http;
 
 describe('useApi', () => {
diff --git a/x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.test.tsx b/x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.test.tsx
index eeb3ac63ee318..ae93ad75781c7 100644
--- a/x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.test.tsx
+++ b/x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.test.tsx
@@ -9,19 +9,24 @@ import { act, renderHook } from '@testing-library/react-hooks';
 import * as api from '../api';
 import { createKibanaCoreStartMock } from '../../common/mocks/kibana_core';
 import { getExceptionListSchemaMock } from '../../../common/schemas/response/exception_list_schema.mock';
-import { getExceptionListItemSchemaMock } from '../../../common/schemas/response/exception_list_item_schema.mock';
+import { getFoundExceptionListItemSchemaMock } from '../../../common/schemas/response/found_exception_list_item_schema.mock';
 import { ExceptionListItemSchema } from '../../../common/schemas';
 import { ExceptionList, UseExceptionListProps, UseExceptionListSuccess } from '../types';
 
 import { ReturnExceptionListAndItems, useExceptionList } from './use_exception_list';
 
-jest.mock('../api');
-
 const mockKibanaHttpService = createKibanaCoreStartMock().http;
 
 describe('useExceptionList', () => {
   const onErrorMock = jest.fn();
 
+  beforeEach(() => {
+    jest.spyOn(api, 'fetchExceptionListById').mockResolvedValue(getExceptionListSchemaMock());
+    jest
+      .spyOn(api, 'fetchExceptionListItemsByListId')
+      .mockResolvedValue(getFoundExceptionListItemSchemaMock());
+  });
+
   afterEach(() => {
     onErrorMock.mockClear();
     jest.clearAllMocks();
@@ -34,9 +39,15 @@ describe('useExceptionList', () => {
         ReturnExceptionListAndItems
       >(() =>
         useExceptionList({
+          filterOptions: { filter: '', tags: [] },
           http: mockKibanaHttpService,
           lists: [{ id: 'myListId', namespaceType: 'single' }],
           onError: onErrorMock,
+          pagination: {
+            page: 1,
+            perPage: 20,
+            total: 0,
+          },
         })
       );
       await waitForNextUpdate();
@@ -63,10 +74,16 @@ describe('useExceptionList', () => {
         ReturnExceptionListAndItems
       >(() =>
         useExceptionList({
+          filterOptions: { filter: '', tags: [] },
           http: mockKibanaHttpService,
           lists: [{ id: 'myListId', namespaceType: 'single' }],
           onError: onErrorMock,
           onSuccess: onSuccessMock,
+          pagination: {
+            page: 1,
+            perPage: 20,
+            total: 0,
+          },
         })
       );
       await waitForNextUpdate();
@@ -76,14 +93,12 @@ describe('useExceptionList', () => {
         { ...getExceptionListSchemaMock(), totalItems: 1 },
       ];
 
-      const expectedListItemsResult: ExceptionListItemSchema[] = [
-        { ...getExceptionListItemSchemaMock() },
-      ];
-
+      const expectedListItemsResult: ExceptionListItemSchema[] = getFoundExceptionListItemSchemaMock()
+        .data;
       const expectedResult: UseExceptionListSuccess = {
         exceptions: expectedListItemsResult,
         lists: expectedListResult,
-        pagination: { page: 1, perPage: 20, total: 1 },
+        pagination: { page: 1, perPage: 1, total: 1 },
       };
 
       expect(result.current).toEqual([
@@ -92,7 +107,7 @@ describe('useExceptionList', () => {
         expectedListItemsResult,
         {
           page: 1,
-          perPage: 20,
+          perPage: 1,
           total: 1,
         },
         result.current[4],
@@ -104,6 +119,7 @@ describe('useExceptionList', () => {
   test('fetch a new exception list and its items', async () => {
     const spyOnfetchExceptionListById = jest.spyOn(api, 'fetchExceptionListById');
     const spyOnfetchExceptionListItemsByListId = jest.spyOn(api, 'fetchExceptionListItemsByListId');
+    const onSuccessMock = jest.fn();
     await act(async () => {
       const { rerender, waitForNextUpdate } = renderHook<
         UseExceptionListProps,
@@ -113,18 +129,31 @@ describe('useExceptionList', () => {
           useExceptionList({ filterOptions, http, lists, onError, onSuccess, pagination }),
         {
           initialProps: {
+            filterOptions: { filter: '', tags: [] },
             http: mockKibanaHttpService,
             lists: [{ id: 'myListId', namespaceType: 'single' }],
             onError: onErrorMock,
-            onSuccess: jest.fn(),
+            onSuccess: onSuccessMock,
+            pagination: {
+              page: 1,
+              perPage: 20,
+              total: 0,
+            },
           },
         }
       );
       await waitForNextUpdate();
       rerender({
+        filterOptions: { filter: '', tags: [] },
         http: mockKibanaHttpService,
         lists: [{ id: 'newListId', namespaceType: 'single' }],
         onError: onErrorMock,
+        onSuccess: onSuccessMock,
+        pagination: {
+          page: 1,
+          perPage: 20,
+          total: 0,
+        },
       });
       await waitForNextUpdate();
 
@@ -142,9 +171,15 @@ describe('useExceptionList', () => {
         ReturnExceptionListAndItems
       >(() =>
         useExceptionList({
+          filterOptions: { filter: '', tags: [] },
           http: mockKibanaHttpService,
           lists: [{ id: 'myListId', namespaceType: 'single' }],
           onError: onErrorMock,
+          pagination: {
+            page: 1,
+            perPage: 20,
+            total: 0,
+          },
         })
       );
       await waitForNextUpdate();
@@ -173,9 +208,15 @@ describe('useExceptionList', () => {
       const { waitForNextUpdate } = renderHook<UseExceptionListProps, ReturnExceptionListAndItems>(
         () =>
           useExceptionList({
+            filterOptions: { filter: '', tags: [] },
             http: mockKibanaHttpService,
             lists: [{ id: 'myListId', namespaceType: 'single' }],
             onError: onErrorMock,
+            pagination: {
+              page: 1,
+              perPage: 20,
+              total: 0,
+            },
           })
       );
       await waitForNextUpdate();
@@ -195,9 +236,15 @@ describe('useExceptionList', () => {
       const { waitForNextUpdate } = renderHook<UseExceptionListProps, ReturnExceptionListAndItems>(
         () =>
           useExceptionList({
+            filterOptions: { filter: '', tags: [] },
             http: mockKibanaHttpService,
             lists: [{ id: 'myListId', namespaceType: 'single' }],
             onError: onErrorMock,
+            pagination: {
+              page: 1,
+              perPage: 20,
+              total: 0,
+            },
           })
       );
       await waitForNextUpdate();
diff --git a/x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.tsx b/x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.tsx
index 9595cb7b7558e..f0e3c3c28ad79 100644
--- a/x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.tsx
+++ b/x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.tsx
@@ -137,7 +137,9 @@ export const useExceptionList = ({
                 perPage: 20,
                 total: 0,
               });
-              onError(error);
+              if (onError != null) {
+                onError(error);
+              }
             }
           }
         };
diff --git a/x-pack/plugins/lists/public/exceptions/mock.ts b/x-pack/plugins/lists/public/exceptions/mock.ts
deleted file mode 100644
index fd06dac65c6fb..0000000000000
--- a/x-pack/plugins/lists/public/exceptions/mock.ts
+++ /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 {
-  CreateExceptionListItemSchemaPartial,
-  CreateExceptionListSchemaPartial,
-} from '../../common/schemas';
-
-export const mockNewExceptionList: CreateExceptionListSchemaPartial = {
-  _tags: ['endpoint', 'process', 'malware', 'os:linux'],
-  description: 'This is a sample endpoint type exception',
-  list_id: 'endpoint_list',
-  name: 'Sample Endpoint Exception List',
-  tags: ['user added string for a tag', 'malware'],
-  type: 'endpoint',
-};
-
-export const mockNewExceptionItem: CreateExceptionListItemSchemaPartial = {
-  _tags: ['endpoint', 'process', 'malware', 'os:linux'],
-  description: 'This is a sample endpoint type exception',
-  entries: [
-    {
-      field: 'actingProcess.file.signer',
-      match: 'Elastic, N.V.',
-      match_any: undefined,
-      operator: 'included',
-    },
-    {
-      field: 'event.category',
-      match: undefined,
-      match_any: ['process', 'malware'],
-      operator: 'included',
-    },
-  ],
-  item_id: 'endpoint_list_item',
-  list_id: 'endpoint_list',
-  name: 'Sample Endpoint Exception List',
-  tags: ['user added string for a tag', 'malware'],
-  type: 'simple',
-};
diff --git a/x-pack/plugins/lists/public/exceptions/types.ts b/x-pack/plugins/lists/public/exceptions/types.ts
index 013788cddc076..658d2dbad0666 100644
--- a/x-pack/plugins/lists/public/exceptions/types.ts
+++ b/x-pack/plugins/lists/public/exceptions/types.ts
@@ -5,11 +5,16 @@
  */
 
 import {
-  CreateExceptionListItemSchemaPartial,
-  CreateExceptionListSchemaPartial,
+  CreateExceptionListItemSchema,
+  CreateExceptionListSchema,
   ExceptionListItemSchema,
   ExceptionListSchema,
   NamespaceType,
+  Page,
+  PerPage,
+  TotalOrUndefined,
+  UpdateExceptionListItemSchema,
+  UpdateExceptionListSchema,
 } from '../../common/schemas';
 import { HttpStart } from '../../../../../src/core/public';
 
@@ -19,14 +24,14 @@ export interface FilterExceptionsOptions {
 }
 
 export interface Pagination {
-  page: number;
-  perPage: number;
-  total: number;
+  page: Page;
+  perPage: PerPage;
+  total: TotalOrUndefined;
 }
 
-export type AddExceptionList = ExceptionListSchema | CreateExceptionListSchemaPartial;
+export type AddExceptionList = UpdateExceptionListSchema | CreateExceptionListSchema;
 
-export type AddExceptionListItem = CreateExceptionListItemSchemaPartial | ExceptionListItemSchema;
+export type AddExceptionListItem = CreateExceptionListItemSchema | UpdateExceptionListItemSchema;
 
 export interface PersistHookProps {
   http: HttpStart;
@@ -46,7 +51,7 @@ export interface UseExceptionListSuccess {
 export interface UseExceptionListProps {
   http: HttpStart;
   lists: ExceptionIdentifiers[];
-  onError: (arg: Error) => void;
+  onError?: (arg: string[]) => void;
   filterOptions?: FilterExceptionsOptions;
   pagination?: Pagination;
   onSuccess?: (arg: UseExceptionListSuccess) => void;
@@ -63,7 +68,7 @@ export interface ApiCallByListIdProps {
   listId: string;
   namespaceType: NamespaceType;
   filterOptions?: FilterExceptionsOptions;
-  pagination?: Pagination;
+  pagination: Partial<Pagination>;
   signal: AbortSignal;
 }
 
@@ -77,18 +82,30 @@ export interface ApiCallByIdProps {
 export interface ApiCallMemoProps {
   id: string;
   namespaceType: NamespaceType;
-  onError: (arg: Error) => void;
+  onError: (arg: string[]) => void;
   onSuccess: () => void;
 }
 
 export interface AddExceptionListProps {
   http: HttpStart;
-  list: AddExceptionList;
+  list: CreateExceptionListSchema;
   signal: AbortSignal;
 }
 
 export interface AddExceptionListItemProps {
   http: HttpStart;
-  listItem: AddExceptionListItem;
+  listItem: CreateExceptionListItemSchema;
+  signal: AbortSignal;
+}
+
+export interface UpdateExceptionListProps {
+  http: HttpStart;
+  list: UpdateExceptionListSchema;
+  signal: AbortSignal;
+}
+
+export interface UpdateExceptionListItemProps {
+  http: HttpStart;
+  listItem: UpdateExceptionListItemSchema;
   signal: AbortSignal;
 }
diff --git a/x-pack/plugins/lists/public/index.tsx b/x-pack/plugins/lists/public/index.tsx
index 1e25275a0d38b..71187273c731c 100644
--- a/x-pack/plugins/lists/public/index.tsx
+++ b/x-pack/plugins/lists/public/index.tsx
@@ -8,5 +8,9 @@ export { useApi } from './exceptions/hooks/use_api';
 export { usePersistExceptionItem } from './exceptions/hooks/persist_exception_item';
 export { usePersistExceptionList } from './exceptions/hooks/persist_exception_list';
 export { useExceptionList } from './exceptions/hooks/use_exception_list';
-export { ExceptionList, ExceptionIdentifiers } from './exceptions/types';
-export { mockNewExceptionItem, mockNewExceptionList } from './exceptions/mock';
+export {
+  ExceptionList,
+  ExceptionIdentifiers,
+  Pagination,
+  UseExceptionListSuccess,
+} from './exceptions/types';
diff --git a/x-pack/plugins/lists/server/saved_objects/exception_list.ts b/x-pack/plugins/lists/server/saved_objects/exception_list.ts
index 8fb618c01213c..10f9b1f4383f5 100644
--- a/x-pack/plugins/lists/server/saved_objects/exception_list.ts
+++ b/x-pack/plugins/lists/server/saved_objects/exception_list.ts
@@ -81,16 +81,42 @@ export const exceptionListItemMapping: SavedObjectsType['mappings'] = {
     },
     entries: {
       properties: {
+        entries: {
+          properties: {
+            field: {
+              type: 'keyword',
+            },
+            operator: {
+              type: 'keyword',
+            },
+            type: {
+              type: 'keyword',
+            },
+            value: {
+              fields: {
+                text: {
+                  type: 'text',
+                },
+              },
+              type: 'keyword',
+            },
+          },
+        },
         field: {
           type: 'keyword',
         },
-        match: {
+        operator: {
           type: 'keyword',
         },
-        match_any: {
+        type: {
           type: 'keyword',
         },
-        operator: {
+        value: {
+          fields: {
+            text: {
+              type: 'text',
+            },
+          },
           type: 'keyword',
         },
       },
diff --git a/x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item.json b/x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item.json
index 2b97f37a7fa6b..8663be5d649e5 100644
--- a/x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item.json
+++ b/x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item.json
@@ -9,13 +9,14 @@
   "entries": [
     {
       "field": "actingProcess.file.signer",
-      "operator": "included",
-      "match": "Elastic, N.V."
+      "operator": "excluded",
+      "type": "exists"
     },
     {
-      "field": "event.category",
+      "field": "host.name",
       "operator": "included",
-      "match_any": ["process", "malware"]
+      "type": "match_any",
+      "value": ["some host", "another host"]
     }
   ]
 }
diff --git a/x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item_agnostic.json b/x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item_agnostic.json
index db0b11480b81a..9cda9c12d6b30 100644
--- a/x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item_agnostic.json
+++ b/x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item_agnostic.json
@@ -11,12 +11,26 @@
     {
       "field": "actingProcess.file.signer",
       "operator": "included",
-      "match": "Elastic, N.V."
+      "type": "match",
+      "value": "Elastic, N.V."
     },
     {
-      "field": "event.category",
-      "operator": "included",
-      "match_any": ["process", "malware"]
+      "field": "file.signature",
+      "type": "nested",
+      "entries": [
+        {
+          "field": "signer",
+          "type": "match",
+          "operator": "included",
+          "value": "Evil"
+        },
+        {
+          "field": "trusted",
+          "type": "match",
+          "operator": "included",
+          "value": "true"
+        }
+      ]
     }
   ]
 }
diff --git a/x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item_auto_id.json b/x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item_auto_id.json
index f1a0dd0fa9c91..d63adc84a361d 100644
--- a/x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item_auto_id.json
+++ b/x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item_auto_id.json
@@ -10,12 +10,26 @@
     {
       "field": "actingProcess.file.signer",
       "operator": "included",
-      "match": "Elastic, N.V."
+      "type": "match",
+      "value": "Elastic, N.V."
     },
     {
-      "field": "event.category",
-      "operator": "included",
-      "match_any": ["process", "malware"]
+      "field": "file.signature",
+      "type": "nested",
+      "entries": [
+        {
+          "field": "signer",
+          "type": "match",
+          "operator": "included",
+          "value": "Evil"
+        },
+        {
+          "field": "trusted",
+          "type": "match",
+          "operator": "included",
+          "value": "true"
+        }
+      ]
     }
   ]
 }
diff --git a/x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item_detection_auto_id.json b/x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item_detection_auto_id.json
index ad3fef7e14364..833f6c023c5d9 100644
--- a/x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item_detection_auto_id.json
+++ b/x-pack/plugins/lists/server/scripts/exception_lists/new/exception_list_item_detection_auto_id.json
@@ -8,19 +8,33 @@
   "comments": [{ "comment": "This is a short little comment." }],
   "entries": [
     {
-      "field": "host.name",
-      "operator": "included",
-      "match": "sampleHostName"
+      "field": "actingProcess.file.signer",
+      "operator": "excluded",
+      "type": "exists"
     },
     {
-      "field": "event.category",
+      "field": "host.name",
       "operator": "included",
-      "match_any": ["process", "malware"]
+      "type": "match_any",
+      "value": ["some host", "another host"]
     },
     {
-      "field": "event.action",
-      "operator": "included",
-      "match": "user-password-change"
+      "field": "file.signature",
+      "type": "nested",
+      "entries": [
+        {
+          "field": "signer",
+          "type": "match",
+          "operator": "included",
+          "value": "Evil"
+        },
+        {
+          "field": "trusted",
+          "type": "match",
+          "operator": "included",
+          "value": "true"
+        }
+      ]
     }
   ]
 }
diff --git a/x-pack/plugins/lists/server/scripts/exception_lists/updates/simple_update_agnostic.json b/x-pack/plugins/lists/server/scripts/exception_lists/updates/simple_update_agnostic.json
index 72ddd15ebee47..90d5e0846e53a 100644
--- a/x-pack/plugins/lists/server/scripts/exception_lists/updates/simple_update_agnostic.json
+++ b/x-pack/plugins/lists/server/scripts/exception_lists/updates/simple_update_agnostic.json
@@ -10,7 +10,8 @@
     {
       "field": "event.category",
       "operator": "included",
-      "match_any": ["process", "malware"]
+      "type": "match_any",
+      "value": ["process", "malware"]
     }
   ]
 }
diff --git a/x-pack/plugins/lists/server/scripts/exception_lists/updates/simple_update_item.json b/x-pack/plugins/lists/server/scripts/exception_lists/updates/simple_update_item.json
index 27f020c43d1bf..33c9303c7b523 100644
--- a/x-pack/plugins/lists/server/scripts/exception_lists/updates/simple_update_item.json
+++ b/x-pack/plugins/lists/server/scripts/exception_lists/updates/simple_update_item.json
@@ -17,7 +17,8 @@
     {
       "field": "event.category",
       "operator": "included",
-      "match_any": ["process", "malware"]
+      "type": "match_any",
+      "value": ["process", "malware"]
     }
   ]
 }
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/exceptions.mock.ts b/x-pack/plugins/security_solution/public/common/components/exceptions/exceptions.mock.ts
new file mode 100644
index 0000000000000..e0bcc73c8bc49
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/exceptions.mock.ts
@@ -0,0 +1,14 @@
+/*
+ * 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 { FormattedEntry } from './types';
+
+export const getFormattedEntryMock = (isNested = false): FormattedEntry => ({
+  fieldName: 'host.name',
+  operator: 'is',
+  value: 'some name',
+  isNested,
+});
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/helpers.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/helpers.test.tsx
index d86a84996a34f..2239de3764326 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/helpers.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/helpers.test.tsx
@@ -10,7 +10,6 @@ import moment from 'moment-timezone';
 import {
   getOperatorType,
   getExceptionOperatorSelect,
-  isEntryNested,
   getFormattedEntries,
   formatEntry,
   getOperatingSystems,
@@ -18,13 +17,7 @@ import {
   getDescriptionListContent,
   getFormattedComments,
 } from './helpers';
-import {
-  OperatorType,
-  Operator,
-  NestedExceptionEntry,
-  FormattedEntry,
-  DescriptionListItem,
-} from './types';
+import { FormattedEntry, DescriptionListItem } from './types';
 import {
   isOperator,
   isNotOperator,
@@ -35,7 +28,16 @@ import {
   existsOperator,
   doesNotExistOperator,
 } from './operators';
-import { getExceptionItemEntryMock, getExceptionItemMock } from './mocks';
+import { OperatorTypeEnum } from '../../../lists_plugin_deps';
+import { getExceptionListItemSchemaMock } from '../../../../../lists/common/schemas/response/exception_list_item_schema.mock';
+import {
+  getEntryExistsMock,
+  getEntryListMock,
+  getEntryMatchMock,
+  getEntryMatchAnyMock,
+  getEntriesArrayMock,
+} from '../../../../../lists/common/schemas/types/entries.mock';
+import { getCommentsMock } from '../../../../../lists/common/schemas/types/comments.mock';
 
 describe('Exception helpers', () => {
   beforeEach(() => {
@@ -48,137 +50,96 @@ describe('Exception helpers', () => {
 
   describe('#getOperatorType', () => {
     test('returns operator type "match" if entry.type is "match"', () => {
-      const payload = getExceptionItemEntryMock();
-      payload.type = 'match';
-      const operatorType = getOperatorType(payload);
-
-      expect(operatorType).toEqual(OperatorType.PHRASE);
-    });
-
-    test('returns operator type "match" if entry.type is "nested"', () => {
-      const payload = getExceptionItemEntryMock();
-      payload.type = 'nested';
+      const payload = getEntryMatchMock();
       const operatorType = getOperatorType(payload);
 
-      expect(operatorType).toEqual(OperatorType.PHRASE);
+      expect(operatorType).toEqual(OperatorTypeEnum.MATCH);
     });
 
     test('returns operator type "match_any" if entry.type is "match_any"', () => {
-      const payload = getExceptionItemEntryMock();
-      payload.type = 'match_any';
+      const payload = getEntryMatchAnyMock();
       const operatorType = getOperatorType(payload);
 
-      expect(operatorType).toEqual(OperatorType.PHRASES);
+      expect(operatorType).toEqual(OperatorTypeEnum.MATCH_ANY);
     });
 
     test('returns operator type "list" if entry.type is "list"', () => {
-      const payload = getExceptionItemEntryMock();
-      payload.type = 'list';
+      const payload = getEntryListMock();
       const operatorType = getOperatorType(payload);
 
-      expect(operatorType).toEqual(OperatorType.LIST);
+      expect(operatorType).toEqual(OperatorTypeEnum.LIST);
     });
 
     test('returns operator type "exists" if entry.type is "exists"', () => {
-      const payload = getExceptionItemEntryMock();
-      payload.type = 'exists';
+      const payload = getEntryExistsMock();
       const operatorType = getOperatorType(payload);
 
-      expect(operatorType).toEqual(OperatorType.EXISTS);
+      expect(operatorType).toEqual(OperatorTypeEnum.EXISTS);
     });
   });
 
   describe('#getExceptionOperatorSelect', () => {
     test('it returns "isOperator" when "operator" is "included" and operator type is "match"', () => {
-      const payload = getExceptionItemEntryMock();
+      const payload = getEntryMatchMock();
       const result = getExceptionOperatorSelect(payload);
 
       expect(result).toEqual(isOperator);
     });
 
     test('it returns "isNotOperator" when "operator" is "excluded" and operator type is "match"', () => {
-      const payload = getExceptionItemEntryMock();
-      payload.operator = Operator.EXCLUSION;
+      const payload = getEntryMatchMock();
+      payload.operator = 'excluded';
       const result = getExceptionOperatorSelect(payload);
 
       expect(result).toEqual(isNotOperator);
     });
 
     test('it returns "isOneOfOperator" when "operator" is "included" and operator type is "match_any"', () => {
-      const payload = getExceptionItemEntryMock();
-      payload.type = 'match_any';
-      payload.operator = Operator.INCLUSION;
+      const payload = getEntryMatchAnyMock();
       const result = getExceptionOperatorSelect(payload);
 
       expect(result).toEqual(isOneOfOperator);
     });
 
     test('it returns "isNotOneOfOperator" when "operator" is "excluded" and operator type is "match_any"', () => {
-      const payload = getExceptionItemEntryMock();
-      payload.type = 'match_any';
-      payload.operator = Operator.EXCLUSION;
+      const payload = getEntryMatchAnyMock();
+      payload.operator = 'excluded';
       const result = getExceptionOperatorSelect(payload);
 
       expect(result).toEqual(isNotOneOfOperator);
     });
 
     test('it returns "existsOperator" when "operator" is "included" and no operator type is provided', () => {
-      const payload = getExceptionItemEntryMock();
-      payload.type = 'exists';
-      payload.operator = Operator.INCLUSION;
+      const payload = getEntryExistsMock();
       const result = getExceptionOperatorSelect(payload);
 
       expect(result).toEqual(existsOperator);
     });
 
     test('it returns "doesNotExistsOperator" when "operator" is "excluded" and no operator type is provided', () => {
-      const payload = getExceptionItemEntryMock();
-      payload.type = 'exists';
-      payload.operator = Operator.EXCLUSION;
+      const payload = getEntryExistsMock();
+      payload.operator = 'excluded';
       const result = getExceptionOperatorSelect(payload);
 
       expect(result).toEqual(doesNotExistOperator);
     });
 
     test('it returns "isInList" when "operator" is "included" and operator type is "list"', () => {
-      const payload = getExceptionItemEntryMock();
-      payload.type = 'list';
-      payload.operator = Operator.INCLUSION;
+      const payload = getEntryListMock();
       const result = getExceptionOperatorSelect(payload);
 
       expect(result).toEqual(isInListOperator);
     });
 
     test('it returns "isNotInList" when "operator" is "excluded" and operator type is "list"', () => {
-      const payload = getExceptionItemEntryMock();
-      payload.type = 'list';
-      payload.operator = Operator.EXCLUSION;
+      const payload = getEntryListMock();
+      payload.operator = 'excluded';
       const result = getExceptionOperatorSelect(payload);
 
       expect(result).toEqual(isNotInListOperator);
     });
   });
 
-  describe('#isEntryNested', () => {
-    test('it returns true if type NestedExceptionEntry', () => {
-      const payload: NestedExceptionEntry = {
-        field: 'actingProcess.file.signer',
-        type: 'nested',
-        entries: [],
-      };
-      const result = isEntryNested(payload);
-
-      expect(result).toBeTruthy();
-    });
-
-    test('it returns false if NOT type NestedExceptionEntry', () => {
-      const payload = getExceptionItemEntryMock();
-      const result = isEntryNested(payload);
-
-      expect(result).toBeFalsy();
-    });
-  });
-
   describe('#getFormattedEntries', () => {
     test('it returns empty array if no entries passed', () => {
       const result = getFormattedEntries([]);
@@ -187,116 +148,98 @@ describe('Exception helpers', () => {
     });
 
     test('it formats nested entries as expected', () => {
-      const payload = [
-        {
-          field: 'file.signature',
-          type: 'nested',
-          entries: [
-            {
-              field: 'signer',
-              type: 'match',
-              operator: Operator.INCLUSION,
-              value: 'Evil',
-            },
-            {
-              field: 'trusted',
-              type: 'match',
-              operator: Operator.INCLUSION,
-              value: 'true',
-            },
-          ],
-        },
-      ];
+      const payload = [getEntryMatchMock()];
       const result = getFormattedEntries(payload);
       const expected: FormattedEntry[] = [
         {
-          fieldName: 'file.signature',
-          operator: null,
-          value: null,
+          fieldName: 'host.name',
           isNested: false,
-        },
-        {
-          fieldName: 'file.signature.signer',
-          isNested: true,
           operator: 'is',
-          value: 'Evil',
-        },
-        {
-          fieldName: 'file.signature.trusted',
-          isNested: true,
-          operator: 'is',
-          value: 'true',
+          value: 'some host name',
         },
       ];
       expect(result).toEqual(expected);
     });
 
-    test('it formats non-nested entries as expected', () => {
-      const payload = [
-        {
-          field: 'actingProcess.file.signer',
-          type: 'match',
-          operator: Operator.INCLUSION,
-          value: 'Elastic, N.V.',
-        },
+    test('it formats "exists" entries as expected', () => {
+      const payload = [getEntryExistsMock()];
+      const result = getFormattedEntries(payload);
+      const expected: FormattedEntry[] = [
         {
-          field: 'actingProcess.file.signer',
-          type: 'match',
-          operator: Operator.EXCLUSION,
-          value: 'Global Signer',
+          fieldName: 'host.name',
+          isNested: false,
+          operator: 'exists',
+          value: null,
         },
       ];
+      expect(result).toEqual(expected);
+    });
+
+    test('it formats non-nested entries as expected', () => {
+      const payload = [getEntryMatchAnyMock(), getEntryMatchMock()];
       const result = getFormattedEntries(payload);
       const expected: FormattedEntry[] = [
         {
-          fieldName: 'actingProcess.file.signer',
+          fieldName: 'host.name',
           isNested: false,
-          operator: 'is',
-          value: 'Elastic, N.V.',
+          operator: 'is one of',
+          value: ['some host name'],
         },
         {
-          fieldName: 'actingProcess.file.signer',
+          fieldName: 'host.name',
           isNested: false,
-          operator: 'is not',
-          value: 'Global Signer',
+          operator: 'is',
+          value: 'some host name',
         },
       ];
       expect(result).toEqual(expected);
     });
 
     test('it formats a mix of nested and non-nested entries as expected', () => {
-      const payload = getExceptionItemMock();
-      const result = getFormattedEntries(payload.entries);
+      const payload = getEntriesArrayMock();
+      const result = getFormattedEntries(payload);
       const expected: FormattedEntry[] = [
         {
-          fieldName: 'actingProcess.file.signer',
+          fieldName: 'host.name',
           isNested: false,
           operator: 'is',
-          value: 'Elastic, N.V.',
+          value: 'some host name',
+        },
+        {
+          fieldName: 'host.name',
+          isNested: false,
+          operator: 'is one of',
+          value: ['some host name'],
+        },
+        {
+          fieldName: 'host.name',
+          isNested: false,
+          operator: 'is in list',
+          value: ['some host name'],
         },
         {
           fieldName: 'host.name',
           isNested: false,
-          operator: 'is not',
-          value: 'Global Signer',
+          operator: 'exists',
+          value: null,
         },
         {
-          fieldName: 'file.signature',
+          fieldName: 'host.name',
           isNested: false,
           operator: null,
           value: null,
         },
         {
-          fieldName: 'file.signature.signer',
+          fieldName: 'host.name.host.name',
           isNested: true,
           operator: 'is',
-          value: 'Evil',
+          value: 'some host name',
         },
         {
-          fieldName: 'file.signature.trusted',
+          fieldName: 'host.name.host.name',
           isNested: true,
-          operator: 'is',
-          value: 'true',
+          operator: 'exists',
+          value: null,
         },
       ];
       expect(result).toEqual(expected);
@@ -305,26 +248,26 @@ describe('Exception helpers', () => {
 
   describe('#formatEntry', () => {
     test('it formats an entry', () => {
-      const payload = getExceptionItemEntryMock();
+      const payload = getEntryMatchMock();
       const formattedEntry = formatEntry({ isNested: false, item: payload });
       const expected: FormattedEntry = {
-        fieldName: 'actingProcess.file.signer',
+        fieldName: 'host.name',
         isNested: false,
         operator: 'is',
-        value: 'Elastic, N.V.',
+        value: 'some host name',
       };
 
       expect(formattedEntry).toEqual(expected);
     });
 
-    test('it formats a nested entry', () => {
-      const payload = getExceptionItemEntryMock();
+    test('it formats as expected when "isNested" is "true"', () => {
+      const payload = getEntryMatchMock();
       const formattedEntry = formatEntry({ isNested: true, parent: 'parent', item: payload });
       const expected: FormattedEntry = {
-        fieldName: 'parent.actingProcess.file.signer',
+        fieldName: 'parent.host.name',
         isNested: true,
         operator: 'is',
-        value: 'Elastic, N.V.',
+        value: 'some host name',
       };
 
       expect(formattedEntry).toEqual(expected);
@@ -373,12 +316,12 @@ describe('Exception helpers', () => {
 
   describe('#getDescriptionListContent', () => {
     test('it returns formatted description list with os if one is specified', () => {
-      const payload = getExceptionItemMock();
+      const payload = getExceptionListItemSchemaMock();
       payload.description = '';
       const result = getDescriptionListContent(payload);
       const expected: DescriptionListItem[] = [
         {
-          description: 'Windows',
+          description: 'Linux',
           title: 'OS',
         },
         {
@@ -395,7 +338,7 @@ describe('Exception helpers', () => {
     });
 
     test('it returns formatted description list with a description if one specified', () => {
-      const payload = getExceptionItemMock();
+      const payload = getExceptionListItemSchemaMock();
       payload._tags = [];
       payload.description = 'Im a description';
       const result = getDescriptionListContent(payload);
@@ -418,7 +361,7 @@ describe('Exception helpers', () => {
     });
 
     test('it returns just user and date created if no other fields specified', () => {
-      const payload = getExceptionItemMock();
+      const payload = getExceptionListItemSchemaMock();
       payload._tags = [];
       payload.description = '';
       const result = getDescriptionListContent(payload);
@@ -439,29 +382,29 @@ describe('Exception helpers', () => {
 
   describe('#getFormattedComments', () => {
     test('it returns formatted comment object with username and timestamp', () => {
-      const payload = getExceptionItemMock().comments;
+      const payload = getCommentsMock();
       const result = getFormattedComments(payload);
 
-      expect(result[0].username).toEqual('user_name');
-      expect(result[0].timestamp).toEqual('on Apr 23rd 2020 @ 00:19:13');
+      expect(result[0].username).toEqual('some user');
+      expect(result[0].timestamp).toEqual('on Apr 20th 2020 @ 15:25:31');
     });
 
     test('it returns formatted timeline icon with comment users initial', () => {
-      const payload = getExceptionItemMock().comments;
+      const payload = getCommentsMock();
       const result = getFormattedComments(payload);
 
       const wrapper = mount<React.ReactElement>(result[0].timelineIcon as React.ReactElement);
 
-      expect(wrapper.text()).toEqual('U');
+      expect(wrapper.text()).toEqual('SU');
     });
 
     test('it returns comment text', () => {
-      const payload = getExceptionItemMock().comments;
+      const payload = getCommentsMock();
       const result = getFormattedComments(payload);
 
       const wrapper = mount<React.ReactElement>(result[0].children as React.ReactElement);
 
-      expect(wrapper.text()).toEqual('Comment goes here');
+      expect(wrapper.text()).toEqual('some comment');
     });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/helpers.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/helpers.tsx
index 9bc39d72322ae..f8b9c39801ae5 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/helpers.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/helpers.tsx
@@ -10,34 +10,32 @@ import { capitalize } from 'lodash';
 import moment from 'moment';
 
 import * as i18n from './translations';
+import { FormattedEntry, OperatorOption, DescriptionListItem, Comment } from './types';
+import { EXCEPTION_OPERATORS, isOperator } from './operators';
 import {
-  FormattedEntry,
-  OperatorType,
-  OperatorOption,
-  ExceptionEntry,
-  NestedExceptionEntry,
-  DescriptionListItem,
-  Comment,
+  Entry,
+  EntriesArray,
   ExceptionListItemSchema,
-} from './types';
-import { EXCEPTION_OPERATORS, isOperator } from './operators';
+  OperatorTypeEnum,
+  entriesNested,
+  entriesExists,
+} from '../../../lists_plugin_deps';
 
 /**
  * Returns the operator type, may not need this if using io-ts types
  *
  * @param entry a single ExceptionItem entry
  */
-export const getOperatorType = (entry: ExceptionEntry): OperatorType => {
+export const getOperatorType = (entry: Entry): OperatorTypeEnum => {
   switch (entry.type) {
-    case 'nested':
     case 'match':
-      return OperatorType.PHRASE;
+      return OperatorTypeEnum.MATCH;
     case 'match_any':
-      return OperatorType.PHRASES;
+      return OperatorTypeEnum.MATCH_ANY;
     case 'list':
-      return OperatorType.LIST;
+      return OperatorTypeEnum.LIST;
     default:
-      return OperatorType.EXISTS;
+      return OperatorTypeEnum.EXISTS;
   }
 };
 
@@ -47,22 +45,17 @@ export const getOperatorType = (entry: ExceptionEntry): OperatorType => {
  *
  * @param entry a single ExceptionItem entry
  */
-export const getExceptionOperatorSelect = (entry: ExceptionEntry): OperatorOption => {
-  const operatorType = getOperatorType(entry);
-  const foundOperator = EXCEPTION_OPERATORS.find((operatorOption) => {
-    return entry.operator === operatorOption.operator && operatorType === operatorOption.type;
-  });
-
-  return foundOperator ?? isOperator;
-};
-
-export const isEntryNested = (
-  tbd: ExceptionEntry | NestedExceptionEntry
-): tbd is NestedExceptionEntry => {
-  if (tbd.type === 'nested') {
-    return true;
+export const getExceptionOperatorSelect = (entry: Entry): OperatorOption => {
+  if (entriesNested.is(entry)) {
+    return isOperator;
+  } else {
+    const operatorType = getOperatorType(entry);
+    const foundOperator = EXCEPTION_OPERATORS.find((operatorOption) => {
+      return entry.operator === operatorOption.operator && operatorType === operatorOption.type;
+    });
+
+    return foundOperator ?? isOperator;
   }
-  return false;
 };
 
 /**
@@ -71,11 +64,9 @@ export const isEntryNested = (
  *
  * @param entries an ExceptionItem's entries
  */
-export const getFormattedEntries = (
-  entries: Array<ExceptionEntry | NestedExceptionEntry>
-): FormattedEntry[] => {
+export const getFormattedEntries = (entries: EntriesArray): FormattedEntry[] => {
   const formattedEntries = entries.map((entry) => {
-    if (isEntryNested(entry)) {
+    if (entriesNested.is(entry)) {
       const parent = { fieldName: entry.field, operator: null, value: null, isNested: false };
       return entry.entries.reduce<FormattedEntry[]>(
         (acc, nestedEntry) => {
@@ -106,11 +97,10 @@ export const formatEntry = ({
 }: {
   isNested: boolean;
   parent?: string;
-  item: ExceptionEntry;
+  item: Entry;
 }): FormattedEntry => {
   const operator = getExceptionOperatorSelect(item);
-  const operatorType = getOperatorType(item);
-  const value = operatorType === OperatorType.EXISTS ? null : item.value;
+  const value = !entriesExists.is(item) ? item.value : null;
 
   return {
     fieldName: isNested ? `${parent}.${item.field}` : item.field,
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/mocks.ts b/x-pack/plugins/security_solution/public/common/components/exceptions/mocks.ts
deleted file mode 100644
index f5577560a680a..0000000000000
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/mocks.ts
+++ /dev/null
@@ -1,108 +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 {
-  Operator,
-  ExceptionListItemSchema,
-  ExceptionEntry,
-  NestedExceptionEntry,
-  FormattedEntry,
-} from './types';
-import { ExceptionList } from '../../../lists_plugin_deps';
-
-export const getExceptionListMock = (): ExceptionList => ({
-  id: '5b543420',
-  created_at: '2020-04-23T00:19:13.289Z',
-  created_by: 'user_name',
-  list_id: 'test-exception',
-  tie_breaker_id: '77fd1909-6786-428a-a671-30229a719c1f',
-  updated_at: '2020-04-23T00:19:13.289Z',
-  updated_by: 'user_name',
-  namespace_type: 'single',
-  name: '',
-  description: 'This is a description',
-  _tags: ['os:windows'],
-  tags: [],
-  type: 'endpoint',
-  meta: {},
-  totalItems: 0,
-});
-
-export const getExceptionItemEntryMock = (): ExceptionEntry => ({
-  field: 'actingProcess.file.signer',
-  type: 'match',
-  operator: Operator.INCLUSION,
-  value: 'Elastic, N.V.',
-});
-
-export const getNestedExceptionItemEntryMock = (): NestedExceptionEntry => ({
-  field: 'actingProcess.file.signer',
-  type: 'nested',
-  entries: [{ ...getExceptionItemEntryMock() }],
-});
-
-export const getFormattedEntryMock = (isNested = false): FormattedEntry => ({
-  fieldName: 'host.name',
-  operator: 'is',
-  value: 'some name',
-  isNested,
-});
-
-export const getExceptionItemMock = (): ExceptionListItemSchema => ({
-  id: 'uuid_here',
-  item_id: 'item-id',
-  created_at: '2020-04-23T00:19:13.289Z',
-  created_by: 'user_name',
-  list_id: 'test-exception',
-  tie_breaker_id: '77fd1909-6786-428a-a671-30229a719c1f',
-  updated_at: '2020-04-23T00:19:13.289Z',
-  updated_by: 'user_name',
-  namespace_type: 'single',
-  name: '',
-  description: 'This is a description',
-  comments: [
-    {
-      created_by: 'user_name',
-      created_at: '2020-04-23T00:19:13.289Z',
-      comment: 'Comment goes here',
-    },
-  ],
-  _tags: ['os:windows'],
-  tags: [],
-  type: 'simple',
-  entries: [
-    {
-      field: 'actingProcess.file.signer',
-      type: 'match',
-      operator: Operator.INCLUSION,
-      value: 'Elastic, N.V.',
-    },
-    {
-      field: 'host.name',
-      type: 'match',
-      operator: Operator.EXCLUSION,
-      value: 'Global Signer',
-    },
-    {
-      field: 'file.signature',
-      type: 'nested',
-      entries: [
-        {
-          field: 'signer',
-          type: 'match',
-          operator: Operator.INCLUSION,
-          value: 'Evil',
-        },
-        {
-          field: 'trusted',
-          type: 'match',
-          operator: Operator.INCLUSION,
-          value: 'true',
-        },
-      ],
-    },
-  ],
-});
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/operators.ts b/x-pack/plugins/security_solution/public/common/components/exceptions/operators.ts
index 19c726893e682..2c18d7447d5f6 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/operators.ts
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/operators.ts
@@ -5,15 +5,16 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { OperatorOption, OperatorType, Operator } from './types';
+import { OperatorOption } from './types';
+import { OperatorTypeEnum } from '../../../lists_plugin_deps';
 
 export const isOperator: OperatorOption = {
   message: i18n.translate('xpack.securitySolution.exceptions.isOperatorLabel', {
     defaultMessage: 'is',
   }),
   value: 'is',
-  type: OperatorType.PHRASE,
-  operator: Operator.INCLUSION,
+  type: OperatorTypeEnum.MATCH,
+  operator: 'included',
 };
 
 export const isNotOperator: OperatorOption = {
@@ -21,8 +22,8 @@ export const isNotOperator: OperatorOption = {
     defaultMessage: 'is not',
   }),
   value: 'is_not',
-  type: OperatorType.PHRASE,
-  operator: Operator.EXCLUSION,
+  type: OperatorTypeEnum.MATCH,
+  operator: 'excluded',
 };
 
 export const isOneOfOperator: OperatorOption = {
@@ -30,8 +31,8 @@ export const isOneOfOperator: OperatorOption = {
     defaultMessage: 'is one of',
   }),
   value: 'is_one_of',
-  type: OperatorType.PHRASES,
-  operator: Operator.INCLUSION,
+  type: OperatorTypeEnum.MATCH_ANY,
+  operator: 'included',
 };
 
 export const isNotOneOfOperator: OperatorOption = {
@@ -39,8 +40,8 @@ export const isNotOneOfOperator: OperatorOption = {
     defaultMessage: 'is not one of',
   }),
   value: 'is_not_one_of',
-  type: OperatorType.PHRASES,
-  operator: Operator.EXCLUSION,
+  type: OperatorTypeEnum.MATCH_ANY,
+  operator: 'excluded',
 };
 
 export const existsOperator: OperatorOption = {
@@ -48,8 +49,8 @@ export const existsOperator: OperatorOption = {
     defaultMessage: 'exists',
   }),
   value: 'exists',
-  type: OperatorType.EXISTS,
-  operator: Operator.INCLUSION,
+  type: OperatorTypeEnum.EXISTS,
+  operator: 'included',
 };
 
 export const doesNotExistOperator: OperatorOption = {
@@ -57,8 +58,8 @@ export const doesNotExistOperator: OperatorOption = {
     defaultMessage: 'does not exist',
   }),
   value: 'does_not_exist',
-  type: OperatorType.EXISTS,
-  operator: Operator.EXCLUSION,
+  type: OperatorTypeEnum.EXISTS,
+  operator: 'excluded',
 };
 
 export const isInListOperator: OperatorOption = {
@@ -66,8 +67,8 @@ export const isInListOperator: OperatorOption = {
     defaultMessage: 'is in list',
   }),
   value: 'is_in_list',
-  type: OperatorType.LIST,
-  operator: Operator.INCLUSION,
+  type: OperatorTypeEnum.LIST,
+  operator: 'included',
 };
 
 export const isNotInListOperator: OperatorOption = {
@@ -75,8 +76,8 @@ export const isNotInListOperator: OperatorOption = {
     defaultMessage: 'is not in list',
   }),
   value: 'is_not_in_list',
-  type: OperatorType.LIST,
-  operator: Operator.EXCLUSION,
+  type: OperatorTypeEnum.LIST,
+  operator: 'excluded',
 };
 
 export const EXCEPTION_OPERATORS: OperatorOption[] = [
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/types.ts b/x-pack/plugins/security_solution/public/common/components/exceptions/types.ts
index 86485e308b59f..24c328462ce2f 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/types.ts
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/types.ts
@@ -5,11 +5,7 @@
  */
 import { ReactNode } from 'react';
 
-import {
-  NamespaceType,
-  ExceptionList,
-  ExceptionListItemSchema as ExceptionItem,
-} from '../../../lists_plugin_deps';
+import { Operator, OperatorType } from '../../../lists_plugin_deps';
 
 export interface OperatorOption {
   message: string;
@@ -18,39 +14,13 @@ export interface OperatorOption {
   type: OperatorType;
 }
 
-export enum Operator {
-  INCLUSION = 'included',
-  EXCLUSION = 'excluded',
-}
-
-export enum OperatorType {
-  NESTED = 'nested',
-  PHRASE = 'match',
-  PHRASES = 'match_any',
-  EXISTS = 'exists',
-  LIST = 'list',
-}
-
 export interface FormattedEntry {
   fieldName: string;
   operator: string | null;
-  value: string | null;
+  value: string | string[] | null;
   isNested: boolean;
 }
 
-export interface NestedExceptionEntry {
-  field: string;
-  type: string;
-  entries: ExceptionEntry[];
-}
-
-export interface ExceptionEntry {
-  field: string;
-  type: string;
-  operator: Operator;
-  value: string;
-}
-
 export interface DescriptionListItem {
   title: NonNullable<ReactNode>;
   description: NonNullable<ReactNode>;
@@ -79,47 +49,9 @@ export interface Filter {
   pagination: Partial<ExceptionsPagination>;
 }
 
-export interface SetExceptionsProps {
-  lists: ExceptionList[];
-  exceptions: ExceptionItem[];
-  pagination: Pagination;
-}
-
-export interface ApiProps {
-  id: string;
-  namespaceType: NamespaceType;
-}
-
-export interface Pagination {
-  page: number;
-  perPage: number;
-  total: number;
-}
-
 export interface ExceptionsPagination {
   pageIndex: number;
   pageSize: number;
   totalItemCount: number;
   pageSizeOptions: number[];
 }
-
-// TODO: Delete once types are updated
-export interface ExceptionListItemSchema {
-  _tags: string[];
-  comments: Comment[];
-  created_at: string;
-  created_by: string;
-  description?: string;
-  entries: Array<ExceptionEntry | NestedExceptionEntry>;
-  id: string;
-  item_id: string;
-  list_id: string;
-  meta?: unknown;
-  name: string;
-  namespace_type: 'single' | 'agnostic';
-  tags: string[];
-  tie_breaker_id: string;
-  type: string;
-  updated_at: string;
-  updated_by: string;
-}
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx
index b49615e24d052..3ea8507d82a15 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx
@@ -11,7 +11,8 @@ import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import moment from 'moment-timezone';
 
 import { ExceptionDetails } from './exception_details';
-import { getExceptionItemMock } from '../../mocks';
+import { getExceptionListItemSchemaMock } from '../../../../../../../lists/common/schemas/response/exception_list_item_schema.mock';
+import { getCommentsMock } from '../../../../../../../lists/common/schemas/types/comments.mock';
 
 describe('ExceptionDetails', () => {
   beforeEach(() => {
@@ -23,7 +24,7 @@ describe('ExceptionDetails', () => {
   });
 
   test('it renders no comments button if no comments exist', () => {
-    const exceptionItem = getExceptionItemMock();
+    const exceptionItem = getExceptionListItemSchemaMock();
     exceptionItem.comments = [];
 
     const wrapper = mount(
@@ -40,8 +41,8 @@ describe('ExceptionDetails', () => {
   });
 
   test('it renders comments button if comments exist', () => {
-    const exceptionItem = getExceptionItemMock();
-
+    const exceptionItem = getExceptionListItemSchemaMock();
+    exceptionItem.comments = getCommentsMock();
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
         <ExceptionDetails
@@ -58,8 +59,8 @@ describe('ExceptionDetails', () => {
   });
 
   test('it renders correct number of comments', () => {
-    const exceptionItem = getExceptionItemMock();
-
+    const exceptionItem = getExceptionListItemSchemaMock();
+    exceptionItem.comments = [getCommentsMock()[0]];
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
         <ExceptionDetails
@@ -76,19 +77,8 @@ describe('ExceptionDetails', () => {
   });
 
   test('it renders comments plural if more than one', () => {
-    const exceptionItem = getExceptionItemMock();
-    exceptionItem.comments = [
-      {
-        created_by: 'user_1',
-        created_at: '2020-04-23T00:19:13.289Z',
-        comment: 'Comment goes here',
-      },
-      {
-        created_by: 'user_2',
-        created_at: '2020-04-23T00:19:13.289Z',
-        comment: 'Comment goes here',
-      },
-    ];
+    const exceptionItem = getExceptionListItemSchemaMock();
+    exceptionItem.comments = getCommentsMock();
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
         <ExceptionDetails
@@ -105,7 +95,8 @@ describe('ExceptionDetails', () => {
   });
 
   test('it renders comments show text if "showComments" is false', () => {
-    const exceptionItem = getExceptionItemMock();
+    const exceptionItem = getExceptionListItemSchemaMock();
+    exceptionItem.comments = getCommentsMock();
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
         <ExceptionDetails
@@ -117,12 +108,13 @@ describe('ExceptionDetails', () => {
     );
 
     expect(wrapper.find('[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text()).toEqual(
-      'Show (1) Comment'
+      'Show (2) Comments'
     );
   });
 
   test('it renders comments hide text if "showComments" is true', () => {
-    const exceptionItem = getExceptionItemMock();
+    const exceptionItem = getExceptionListItemSchemaMock();
+    exceptionItem.comments = getCommentsMock();
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
         <ExceptionDetails
@@ -134,13 +126,14 @@ describe('ExceptionDetails', () => {
     );
 
     expect(wrapper.find('[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text()).toEqual(
-      'Hide (1) Comment'
+      'Hide (2) Comments'
     );
   });
 
   test('it invokes "onCommentsClick" when comments button clicked', () => {
     const mockOnCommentsClick = jest.fn();
-    const exceptionItem = getExceptionItemMock();
+    const exceptionItem = getExceptionListItemSchemaMock();
+    exceptionItem.comments = getCommentsMock();
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
         <ExceptionDetails
@@ -157,7 +150,7 @@ describe('ExceptionDetails', () => {
   });
 
   test('it renders the operating system if one is specified in the exception item', () => {
-    const exceptionItem = getExceptionItemMock();
+    const exceptionItem = getExceptionListItemSchemaMock();
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
         <ExceptionDetails
@@ -169,11 +162,11 @@ describe('ExceptionDetails', () => {
     );
 
     expect(wrapper.find('EuiDescriptionListTitle').at(0).text()).toEqual('OS');
-    expect(wrapper.find('EuiDescriptionListDescription').at(0).text()).toEqual('Windows');
+    expect(wrapper.find('EuiDescriptionListDescription').at(0).text()).toEqual('Linux');
   });
 
   test('it renders the exception item creator', () => {
-    const exceptionItem = getExceptionItemMock();
+    const exceptionItem = getExceptionListItemSchemaMock();
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
         <ExceptionDetails
@@ -191,7 +184,7 @@ describe('ExceptionDetails', () => {
   });
 
   test('it renders the exception item creation timestamp', () => {
-    const exceptionItem = getExceptionItemMock();
+    const exceptionItem = getExceptionListItemSchemaMock();
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
         <ExceptionDetails
@@ -207,7 +200,7 @@ describe('ExceptionDetails', () => {
   });
 
   test('it renders the description if one is included on the exception item', () => {
-    const exceptionItem = getExceptionItemMock();
+    const exceptionItem = getExceptionListItemSchemaMock();
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
         <ExceptionDetails
@@ -220,7 +213,7 @@ describe('ExceptionDetails', () => {
 
     expect(wrapper.find('EuiDescriptionListTitle').at(3).text()).toEqual('Comment');
     expect(wrapper.find('EuiDescriptionListDescription').at(3).text()).toEqual(
-      'This is a description'
+      'This is a sample endpoint type exception'
     );
   });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.tsx
index 7144bf8044704..44632236ea7a0 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.tsx
@@ -15,9 +15,10 @@ import {
 import React, { useMemo, Fragment } from 'react';
 import styled, { css } from 'styled-components';
 
-import { DescriptionListItem, ExceptionListItemSchema } from '../../types';
+import { DescriptionListItem } from '../../types';
 import { getDescriptionListContent } from '../../helpers';
 import * as i18n from '../../translations';
+import { ExceptionListItemSchema } from '../../../../../../public/lists_plugin_deps';
 
 const MyExceptionDetails = styled(EuiFlexItem)`
   ${({ theme }) => css`
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.test.tsx
index 2d022591d9980..c6a779845b190 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.test.tsx
@@ -10,7 +10,7 @@ import { mount } from 'enzyme';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 
 import { ExceptionEntries } from './exception_entries';
-import { getFormattedEntryMock } from '../../mocks';
+import { getFormattedEntryMock } from '../../exceptions.mock';
 import { getEmptyValue } from '../../../empty_value';
 
 describe('ExceptionEntries', () => {
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx
index 58667f1f78b0d..39e265acec1af 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx
@@ -12,6 +12,7 @@ import {
   EuiButton,
   EuiTableFieldDataColumnType,
   EuiHideFor,
+  EuiBadge,
 } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import styled, { css } from 'styled-components';
@@ -44,6 +45,7 @@ const MyRemoveButton = styled(EuiButton)`
 
 const MyAndOrBadgeContainer = styled(EuiFlexItem)`
   padding-top: ${({ theme }) => theme.eui.euiSizeXL};
+  padding-bottom: ${({ theme }) => theme.eui.euiSizeS};
 `;
 
 interface ExceptionEntriesComponentProps {
@@ -101,9 +103,13 @@ const ExceptionEntriesComponent = ({
         render: (values: string | string[] | null) => {
           if (Array.isArray(values)) {
             return (
-              <EuiFlexGroup direction="row">
+              <EuiFlexGroup gutterSize="xs" direction="row" justifyContent="flexStart">
                 {values.map((value) => {
-                  return <EuiFlexItem grow={1}>{value}</EuiFlexItem>;
+                  return (
+                    <EuiFlexItem key={value} grow={false}>
+                      <EuiBadge color="#DDD">{value}</EuiBadge>
+                    </EuiFlexItem>
+                  );
                 })}
               </EuiFlexGroup>
             );
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.stories.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.stories.tsx
index 3eb333966f267..b5f18feb48502 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.stories.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.stories.tsx
@@ -10,8 +10,8 @@ import { ThemeProvider } from 'styled-components';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 
 import { ExceptionItem } from './';
-import { Operator } from '../../types';
-import { getExceptionItemMock } from '../../mocks';
+import { getExceptionListItemSchemaMock } from '../../../../../../../lists/common/schemas/response/exception_list_item_schema.mock';
+import { getCommentsMock } from '../../../../../../../lists/common/schemas/types/comments.mock';
 
 addDecorator((storyFn) => (
   <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>{storyFn()}</ThemeProvider>
@@ -19,14 +19,14 @@ addDecorator((storyFn) => (
 
 storiesOf('Components|ExceptionItem', module)
   .add('with os', () => {
-    const payload = getExceptionItemMock();
+    const payload = getExceptionListItemSchemaMock();
     payload.description = '';
     payload.comments = [];
     payload.entries = [
       {
         field: 'actingProcess.file.signer',
         type: 'match',
-        operator: Operator.INCLUSION,
+        operator: 'included',
         value: 'Elastic, N.V.',
       },
     ];
@@ -42,14 +42,14 @@ storiesOf('Components|ExceptionItem', module)
     );
   })
   .add('with description', () => {
-    const payload = getExceptionItemMock();
+    const payload = getExceptionListItemSchemaMock();
     payload._tags = [];
     payload.comments = [];
     payload.entries = [
       {
         field: 'actingProcess.file.signer',
         type: 'match',
-        operator: Operator.INCLUSION,
+        operator: 'included',
         value: 'Elastic, N.V.',
       },
     ];
@@ -65,14 +65,15 @@ storiesOf('Components|ExceptionItem', module)
     );
   })
   .add('with comments', () => {
-    const payload = getExceptionItemMock();
+    const payload = getExceptionListItemSchemaMock();
     payload._tags = [];
     payload.description = '';
+    payload.comments = getCommentsMock();
     payload.entries = [
       {
         field: 'actingProcess.file.signer',
         type: 'match',
-        operator: Operator.INCLUSION,
+        operator: 'included',
         value: 'Elastic, N.V.',
       },
     ];
@@ -88,7 +89,7 @@ storiesOf('Components|ExceptionItem', module)
     );
   })
   .add('with nested entries', () => {
-    const payload = getExceptionItemMock();
+    const payload = getExceptionListItemSchemaMock();
     payload._tags = [];
     payload.description = '';
     payload.comments = [];
@@ -104,8 +105,8 @@ storiesOf('Components|ExceptionItem', module)
     );
   })
   .add('with everything', () => {
-    const payload = getExceptionItemMock();
-
+    const payload = getExceptionListItemSchemaMock();
+    payload.comments = getCommentsMock();
     return (
       <ExceptionItem
         loadingItemIds={[]}
@@ -117,7 +118,7 @@ storiesOf('Components|ExceptionItem', module)
     );
   })
   .add('with loadingItemIds', () => {
-    const { id, namespace_type, ...rest } = getExceptionItemMock();
+    const { id, namespace_type, ...rest } = getExceptionListItemSchemaMock();
 
     return (
       <ExceptionItem
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.test.tsx
index b4de3639944b1..6541939527596 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.test.tsx
@@ -10,11 +10,12 @@ import { mount } from 'enzyme';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 
 import { ExceptionItem } from './';
-import { getExceptionItemMock } from '../../mocks';
+import { getExceptionListItemSchemaMock } from '../../../../../../../lists/common/schemas/response/exception_list_item_schema.mock';
+import { getCommentsMock } from '../../../../../../../lists/common/schemas/types/comments.mock';
 
 describe('ExceptionItem', () => {
   it('it renders ExceptionDetails and ExceptionEntries', () => {
-    const exceptionItem = getExceptionItemMock();
+    const exceptionItem = getExceptionListItemSchemaMock();
 
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
@@ -34,7 +35,7 @@ describe('ExceptionItem', () => {
 
   it('it invokes "onEditException" when edit button clicked', () => {
     const mockOnEditException = jest.fn();
-    const exceptionItem = getExceptionItemMock();
+    const exceptionItem = getExceptionListItemSchemaMock();
 
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
@@ -51,12 +52,12 @@ describe('ExceptionItem', () => {
     const editBtn = wrapper.find('[data-test-subj="exceptionsViewerEditBtn"] button').at(0);
     editBtn.simulate('click');
 
-    expect(mockOnEditException).toHaveBeenCalledWith(getExceptionItemMock());
+    expect(mockOnEditException).toHaveBeenCalledWith(getExceptionListItemSchemaMock());
   });
 
   it('it invokes "onDeleteException" when delete button clicked', () => {
     const mockOnDeleteException = jest.fn();
-    const exceptionItem = getExceptionItemMock();
+    const exceptionItem = getExceptionListItemSchemaMock();
 
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
@@ -74,15 +75,15 @@ describe('ExceptionItem', () => {
     editBtn.simulate('click');
 
     expect(mockOnDeleteException).toHaveBeenCalledWith({
-      id: 'uuid_here',
+      id: '1',
       namespaceType: 'single',
     });
   });
 
   it('it renders comment accordion closed to begin with', () => {
     const mockOnDeleteException = jest.fn();
-    const exceptionItem = getExceptionItemMock();
-
+    const exceptionItem = getExceptionListItemSchemaMock();
+    exceptionItem.comments = getCommentsMock();
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
         <ExceptionItem
@@ -100,8 +101,8 @@ describe('ExceptionItem', () => {
 
   it('it renders comment accordion open when showComments is true', () => {
     const mockOnDeleteException = jest.fn();
-    const exceptionItem = getExceptionItemMock();
-
+    const exceptionItem = getExceptionListItemSchemaMock();
+    exceptionItem.comments = getCommentsMock();
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
         <ExceptionItem
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.tsx
index 08cdfd491d84c..e50b8bbd9edff 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.tsx
@@ -18,7 +18,11 @@ import styled from 'styled-components';
 import { ExceptionDetails } from './exception_details';
 import { ExceptionEntries } from './exception_entries';
 import { getFormattedEntries, getFormattedComments } from '../../helpers';
-import { FormattedEntry, ExceptionListItemSchema, ApiProps } from '../../types';
+import { FormattedEntry } from '../../types';
+import {
+  ExceptionIdentifiers,
+  ExceptionListItemSchema,
+} from '../../../../../../public/lists_plugin_deps';
 
 const MyFlexItem = styled(EuiFlexItem)`
   &.comments--show {
@@ -28,10 +32,10 @@ const MyFlexItem = styled(EuiFlexItem)`
 `;
 
 interface ExceptionItemProps {
-  loadingItemIds: ApiProps[];
+  loadingItemIds: ExceptionIdentifiers[];
   exceptionItem: ExceptionListItemSchema;
   commentsAccordionId: string;
-  onDeleteException: (arg: ApiProps) => void;
+  onDeleteException: (arg: ExceptionIdentifiers) => void;
   onEditException: (item: ExceptionListItemSchema) => void;
 }
 
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_item.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_item.test.tsx
index dbcae20eb1385..7ccb8d251eae1 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_item.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_item.test.tsx
@@ -9,7 +9,7 @@ import { ThemeProvider } from 'styled-components';
 import { mount } from 'enzyme';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 
-import { getExceptionItemMock } from '../mocks';
+import { getExceptionListItemSchemaMock } from '../../../../../../lists/common/schemas/response/exception_list_item_schema.mock';
 import { ExceptionsViewerItems } from './exceptions_viewer_items';
 
 describe('ExceptionsViewerItems', () => {
@@ -38,7 +38,7 @@ describe('ExceptionsViewerItems', () => {
         <ExceptionsViewerItems
           showEmpty={false}
           isInitLoading={false}
-          exceptions={[getExceptionItemMock()]}
+          exceptions={[getExceptionListItemSchemaMock()]}
           loadingItemIds={[]}
           commentsAccordionId="comments-accordion-id"
           onDeleteException={jest.fn()}
@@ -71,8 +71,8 @@ describe('ExceptionsViewerItems', () => {
   });
 
   it('it does not render or badge for first exception displayed', () => {
-    const exception1 = getExceptionItemMock();
-    const exception2 = getExceptionItemMock();
+    const exception1 = getExceptionListItemSchemaMock();
+    const exception2 = getExceptionListItemSchemaMock();
     exception2.id = 'newId';
 
     const wrapper = mount(
@@ -95,8 +95,8 @@ describe('ExceptionsViewerItems', () => {
   });
 
   it('it does render or badge with exception displayed', () => {
-    const exception1 = getExceptionItemMock();
-    const exception2 = getExceptionItemMock();
+    const exception1 = getExceptionListItemSchemaMock();
+    const exception2 = getExceptionListItemSchemaMock();
     exception2.id = 'newId';
 
     const wrapper = mount(
@@ -128,7 +128,7 @@ describe('ExceptionsViewerItems', () => {
         <ExceptionsViewerItems
           showEmpty={false}
           isInitLoading={false}
-          exceptions={[getExceptionItemMock()]}
+          exceptions={[getExceptionListItemSchemaMock()]}
           loadingItemIds={[]}
           commentsAccordionId="comments-accordion-id"
           onDeleteException={mockOnDeleteException}
@@ -140,7 +140,7 @@ describe('ExceptionsViewerItems', () => {
     wrapper.find('[data-test-subj="exceptionsViewerDeleteBtn"] button').at(0).simulate('click');
 
     expect(mockOnDeleteException).toHaveBeenCalledWith({
-      id: 'uuid_here',
+      id: '1',
       namespaceType: 'single',
     });
   });
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_items.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_items.tsx
index e1ef3c10188b3..63137a7b24899 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_items.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_items.tsx
@@ -9,9 +9,12 @@ import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/e
 import styled from 'styled-components';
 
 import * as i18n from '../translations';
-import { ExceptionListItemSchema, ApiProps } from '../types';
 import { ExceptionItem } from './exception_item';
 import { AndOrBadge } from '../../and_or_badge';
+import {
+  ExceptionIdentifiers,
+  ExceptionListItemSchema,
+} from '../../../../../public/lists_plugin_deps';
 
 const MyFlexItem = styled(EuiFlexItem)`
   margin: ${({ theme }) => `${theme.eui.euiSize} 0`};
@@ -34,9 +37,9 @@ interface ExceptionsViewerItemsProps {
   showEmpty: boolean;
   isInitLoading: boolean;
   exceptions: ExceptionListItemSchema[];
-  loadingItemIds: ApiProps[];
+  loadingItemIds: ExceptionIdentifiers[];
   commentsAccordionId: string;
-  onDeleteException: (arg: ApiProps) => void;
+  onDeleteException: (arg: ExceptionIdentifiers) => void;
   onEditExceptionItem: (item: ExceptionListItemSchema) => void;
 }
 
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.test.tsx
index b77b8380c39f1..3a1e3f85b11fd 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.test.tsx
@@ -13,7 +13,7 @@ import { ExceptionsViewer } from './';
 import { ExceptionListType } from '../types';
 import { useKibana } from '../../../../common/lib/kibana';
 import { useExceptionList, useApi } from '../../../../../public/lists_plugin_deps';
-import { getExceptionListMock } from '../mocks';
+import { getExceptionListSchemaMock } from '../../../../../../lists/common/schemas/response/exception_list_schema.mock';
 
 jest.mock('../../../../common/lib/kibana');
 jest.mock('../../../../../public/lists_plugin_deps');
@@ -96,7 +96,7 @@ describe('ExceptionsViewer', () => {
   it('it renders empty prompt if no exception items exist', () => {
     (useExceptionList as jest.Mock).mockReturnValue([
       false,
-      [getExceptionListMock()],
+      [getExceptionListSchemaMock()],
       [],
       {
         page: 1,
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.tsx
index 1051962852219..79ed8bb37949f 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.tsx
@@ -14,17 +14,13 @@ import { useKibana } from '../../../../common/lib/kibana';
 import { Panel } from '../../../../common/components/panel';
 import { Loader } from '../../../../common/components/loader';
 import { ExceptionsViewerHeader } from './exceptions_viewer_header';
-import {
-  ExceptionListType,
-  ExceptionListItemSchema,
-  ApiProps,
-  Filter,
-  SetExceptionsProps,
-} from '../types';
+import { ExceptionListType, Filter } from '../types';
 import { allExceptionItemsReducer, State } from './reducer';
 import {
   useExceptionList,
   ExceptionIdentifiers,
+  ExceptionListItemSchema,
+  UseExceptionListSuccess,
   useApi,
 } from '../../../../../public/lists_plugin_deps';
 import { ExceptionsViewerPagination } from './exceptions_pagination';
@@ -107,11 +103,11 @@ const ExceptionsViewerComponent = ({
       lists: newLists,
       exceptions: newExceptions,
       pagination: newPagination,
-    }: SetExceptionsProps) => {
+    }: UseExceptionListSuccess) => {
       dispatch({
         type: 'setExceptions',
         lists: newLists,
-        exceptions: (newExceptions as unknown) as ExceptionListItemSchema[],
+        exceptions: newExceptions,
         pagination: newPagination,
       });
     },
@@ -199,7 +195,7 @@ const ExceptionsViewerComponent = ({
   );
 
   const setLoadingItemIds = useCallback(
-    (items: ApiProps[]): void => {
+    (items: ExceptionIdentifiers[]): void => {
       dispatch({
         type: 'updateLoadingItemIds',
         items,
@@ -209,7 +205,7 @@ const ExceptionsViewerComponent = ({
   );
 
   const handleDeleteException = useCallback(
-    ({ id, namespaceType }: ApiProps) => {
+    ({ id, namespaceType }: ExceptionIdentifiers) => {
       setLoadingItemIds([{ id, namespaceType }]);
 
       deleteExceptionItem({
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/reducer.ts b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/reducer.ts
index 538207458f0ed..1f9a4fb446ab8 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/reducer.ts
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/reducer.ts
@@ -3,14 +3,13 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { FilterOptions, ExceptionsPagination } from '../types';
 import {
-  ApiProps,
-  FilterOptions,
-  ExceptionsPagination,
+  ExceptionList,
   ExceptionListItemSchema,
+  ExceptionIdentifiers,
   Pagination,
-} from '../types';
-import { ExceptionList, ExceptionIdentifiers } from '../../../../../public/lists_plugin_deps';
+} from '../../../../../public/lists_plugin_deps';
 
 export interface State {
   filterOptions: FilterOptions;
@@ -21,7 +20,7 @@ export interface State {
   exceptions: ExceptionListItemSchema[];
   exceptionToEdit: ExceptionListItemSchema | null;
   loadingLists: ExceptionIdentifiers[];
-  loadingItemIds: ApiProps[];
+  loadingItemIds: ExceptionIdentifiers[];
   isInitLoading: boolean;
   isModalOpen: boolean;
 }
@@ -42,7 +41,7 @@ export type Action =
   | { type: 'updateIsInitLoading'; loading: boolean }
   | { type: 'updateModalOpen'; isOpen: boolean }
   | { type: 'updateExceptionToEdit'; exception: ExceptionListItemSchema }
-  | { type: 'updateLoadingItemIds'; items: ApiProps[] };
+  | { type: 'updateLoadingItemIds'; items: ExceptionIdentifiers[] };
 
 export const allExceptionItemsReducer = () => (state: State, action: Action): State => {
   switch (action.type) {
@@ -62,7 +61,7 @@ export const allExceptionItemsReducer = () => (state: State, action: Action): St
           ...state.pagination,
           pageIndex: action.pagination.page - 1,
           pageSize: action.pagination.perPage,
-          totalItemCount: action.pagination.total,
+          totalItemCount: action.pagination.total ?? 0,
         },
         allExceptions: action.exceptions,
         exceptions: action.exceptions,
diff --git a/x-pack/plugins/security_solution/public/lists_plugin_deps.ts b/x-pack/plugins/security_solution/public/lists_plugin_deps.ts
index 113bfaa860f00..22732c86bd9a9 100644
--- a/x-pack/plugins/security_solution/public/lists_plugin_deps.ts
+++ b/x-pack/plugins/security_solution/public/lists_plugin_deps.ts
@@ -11,12 +11,20 @@ export {
   usePersistExceptionList,
   ExceptionIdentifiers,
   ExceptionList,
-  mockNewExceptionItem,
-  mockNewExceptionList,
+  Pagination,
+  UseExceptionListSuccess,
 } from '../../lists/public';
 export {
   ExceptionListSchema,
   ExceptionListItemSchema,
-  Entries,
+  Entry,
+  EntryExists,
+  EntryNested,
+  EntriesArray,
   NamespaceType,
+  Operator,
+  OperatorType,
+  OperatorTypeEnum,
+  entriesNested,
+  entriesExists,
 } from '../../lists/common/schemas';

From e0460290b06124fb04861a14ae481902a79acfa3 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Thu, 18 Jun 2020 19:24:41 +0200
Subject: [PATCH 34/63] [Ingest Pipelines] Add test coverage for ingest
 pipelines editor component (#69283)

* first iteration of CIT tests

* address pr feedback

- use dot notation where we can
- use string literals instead of + concatentation
---
 .../pipeline_processors_editor.helpers.ts     |  36 ----
 .../pipeline_processors_editor.helpers.tsx    | 158 +++++++++++++++++
 .../pipeline_processors_editor.test.tsx       | 159 ++++++++++++++++--
 .../components/add_processor_button.tsx       |   4 +-
 .../context_menu.tsx                          |  15 +-
 .../pipeline_processors_editor_item.tsx       |   6 +
 .../processor_settings_form.tsx               |   4 +-
 .../common_fields/processor_type_field.tsx    |   1 +
 .../processors/custom.tsx                     |   1 +
 .../components/drop_zone_button.tsx           |   5 +-
 .../components/private_tree.tsx               |   4 +
 .../processors_tree/components/tree_node.tsx  |   1 +
 .../processors_tree/processors_tree.tsx       |   3 +-
 .../pipeline_processors_editor/utils.ts       |   2 +
 14 files changed, 334 insertions(+), 65 deletions(-)
 delete mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.ts
 create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx

diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.ts
deleted file mode 100644
index acd61a9bbd01e..0000000000000
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.ts
+++ /dev/null
@@ -1,36 +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 { registerTestBed, TestBed } from '../../../../../../../test_utils';
-import { PipelineProcessorsEditor, Props } from '../pipeline_processors_editor.container';
-
-const testBedSetup = registerTestBed<TestSubject>(PipelineProcessorsEditor, {
-  doMountAsync: false,
-});
-
-export interface SetupResult extends TestBed<TestSubject> {
-  actions: {
-    toggleOnFailure: () => void;
-  };
-}
-
-export const setup = async (props: Props): Promise<SetupResult> => {
-  const testBed = await testBedSetup(props);
-  const toggleOnFailure = () => {
-    const { find } = testBed;
-    find('pipelineEditorOnFailureToggle').simulate('click');
-  };
-
-  return {
-    ...testBed,
-    actions: { toggleOnFailure },
-  };
-};
-
-type TestSubject =
-  | 'pipelineEditorDoneButton'
-  | 'pipelineEditorOnFailureToggle'
-  | 'pipelineEditorOnFailureTree';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx
new file mode 100644
index 0000000000000..97c74e0b2231f
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx
@@ -0,0 +1,158 @@
+/*
+ * 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 { act } from 'react-dom/test-utils';
+import React from 'react';
+import { registerTestBed, TestBed } from '../../../../../../../test_utils';
+import { PipelineProcessorsEditor, Props } from '../pipeline_processors_editor.container';
+
+jest.mock('@elastic/eui', () => ({
+  ...jest.requireActual('@elastic/eui'),
+  // Mocking EuiComboBox, as it utilizes "react-virtualized" for rendering search suggestions,
+  // which does not produce a valid component wrapper
+  EuiComboBox: (props: any) => (
+    <input
+      data-test-subj={props['data-test-subj'] || 'mockComboBox'}
+      data-currentvalue={props.selectedOptions}
+      onChange={async (syntheticEvent: any) => {
+        props.onChange([syntheticEvent['0']]);
+      }}
+    />
+  ),
+  // Mocking EuiCodeEditor, which uses React Ace under the hood
+  EuiCodeEditor: (props: any) => (
+    <input
+      data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
+      data-currentvalue={props.value}
+      onChange={(e: any) => {
+        props.onChange(e.jsonContent);
+      }}
+    />
+  ),
+}));
+
+jest.mock('react-virtualized', () => ({
+  ...jest.requireActual('react-virtualized'),
+  AutoSizer: ({ children }: { children: any }) => (
+    <div>{children({ height: 500, width: 500 })}</div>
+  ),
+}));
+
+const testBedSetup = registerTestBed<TestSubject>(PipelineProcessorsEditor, {
+  doMountAsync: false,
+});
+
+export interface SetupResult extends TestBed<TestSubject> {
+  actions: ReturnType<typeof createActions>;
+}
+
+/**
+ * We make heavy use of "processorSelector" in these actions. They are a way to uniquely identify
+ * a processor and are a stringified version of {@link ProcessorSelector}.
+ *
+ * @remark
+ * See also {@link selectorToDataTestSubject}.
+ */
+const createActions = (testBed: TestBed<TestSubject>) => {
+  const { find, component } = testBed;
+
+  return {
+    async addProcessor(processorsSelector: string, type: string, options: Record<string, any>) {
+      find(`${processorsSelector}.addProcessorButton`).simulate('click');
+      await act(async () => {
+        find('processorTypeSelector').simulate('change', [{ value: type, label: type }]);
+      });
+      component.update();
+      await act(async () => {
+        find('processorOptionsEditor').simulate('change', {
+          jsonContent: JSON.stringify(options),
+        });
+      });
+      await act(async () => {
+        find('processorSettingsForm.submitButton').simulate('click');
+      });
+    },
+
+    removeProcessor(processorSelector: string) {
+      find(`${processorSelector}.moreMenu.button`).simulate('click');
+      find(`${processorSelector}.moreMenu.deleteButton`).simulate('click');
+      act(() => {
+        find('removeProcessorConfirmationModal.confirmModalConfirmButton').simulate('click');
+      });
+    },
+
+    moveProcessor(processorSelector: string, dropZoneSelector: string) {
+      act(() => {
+        find(`${processorSelector}.moveItemButton`).simulate('click');
+      });
+      act(() => {
+        find(dropZoneSelector).last().simulate('click');
+      });
+      component.update();
+    },
+
+    async addOnFailureProcessor(
+      processorSelector: string,
+      type: string,
+      options: Record<string, any>
+    ) {
+      find(`${processorSelector}.moreMenu.button`).simulate('click');
+      find(`${processorSelector}.moreMenu.addOnFailureButton`).simulate('click');
+      await act(async () => {
+        find('processorTypeSelector').simulate('change', [{ value: type, label: type }]);
+      });
+      component.update();
+      await act(async () => {
+        find('processorOptionsEditor').simulate('change', {
+          jsonContent: JSON.stringify(options),
+        });
+      });
+      await act(async () => {
+        find('processorSettingsForm.submitButton').simulate('click');
+      });
+    },
+
+    duplicateProcessor(processorSelector: string) {
+      find(`${processorSelector}.moreMenu.button`).simulate('click');
+      act(() => {
+        find(`${processorSelector}.moreMenu.duplicateButton`).simulate('click');
+      });
+    },
+
+    startAndCancelMove(processorSelector: string) {
+      act(() => {
+        find(`${processorSelector}.moveItemButton`).simulate('click');
+      });
+      component.update();
+      act(() => {
+        find(`${processorSelector}.cancelMoveItemButton`).simulate('click');
+      });
+    },
+
+    toggleOnFailure() {
+      find('pipelineEditorOnFailureToggle').simulate('click');
+    },
+  };
+};
+
+export const setup = async (props: Props): Promise<SetupResult> => {
+  const testBed = await testBedSetup(props);
+  return {
+    ...testBed,
+    actions: createActions(testBed),
+  };
+};
+
+type TestSubject =
+  | 'pipelineEditorDoneButton'
+  | 'pipelineEditorOnFailureToggle'
+  | 'addProcessorsButtonLevel1'
+  | 'processorSettingsForm'
+  | 'processorSettingsForm.submitButton'
+  | 'processorOptionsEditor'
+  | 'processorSettingsFormFlyout'
+  | 'processorTypeSelector'
+  | 'pipelineEditorOnFailureTree'
+  | string;
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx
index ad0474a94f56c..15121cc71c321 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx
@@ -3,8 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
-import { setup } from './pipeline_processors_editor.helpers';
+import { setup, SetupResult } from './pipeline_processors_editor.helpers';
 import { Pipeline } from '../../../../../common/types';
 
 const testProcessors: Pick<Pipeline, 'processors'> = {
@@ -25,10 +24,20 @@ const testProcessors: Pick<Pipeline, 'processors'> = {
 };
 
 describe('Pipeline Editor', () => {
-  it('provides the same data out it got in if nothing changes', async () => {
-    const onUpdate = jest.fn();
+  let onUpdate: jest.Mock;
+  let testBed: SetupResult;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
 
-    await setup({
+  beforeEach(async () => {
+    onUpdate = jest.fn();
+    testBed = await setup({
       value: {
         ...testProcessors,
       },
@@ -38,7 +47,9 @@ describe('Pipeline Editor', () => {
       onTestPipelineClick: jest.fn(),
       esDocsBasePath: 'test',
     });
+  });
 
+  it('provides the same data out it got in if nothing changes', () => {
     const {
       calls: [[arg]],
     } = onUpdate.mock;
@@ -46,20 +57,134 @@ describe('Pipeline Editor', () => {
     expect(arg.getData()).toEqual(testProcessors);
   });
 
-  it('toggles the on-failure processors', async () => {
-    const { actions, exists } = await setup({
-      value: {
-        ...testProcessors,
-      },
-      onFlyoutOpen: jest.fn(),
-      onUpdate: jest.fn(),
-      isTestButtonDisabled: false,
-      onTestPipelineClick: jest.fn(),
-      esDocsBasePath: 'test',
-    });
-
+  it('toggles the on-failure processors tree', () => {
+    const { actions, exists } = testBed;
     expect(exists('pipelineEditorOnFailureTree')).toBe(false);
     actions.toggleOnFailure();
     expect(exists('pipelineEditorOnFailureTree')).toBe(true);
   });
+
+  describe('processors', () => {
+    it('adds a new processor', async () => {
+      const { actions } = testBed;
+      await actions.addProcessor('processors', 'test', { if: '1 == 1' });
+      const [onUpdateResult] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1];
+      const { processors } = onUpdateResult.getData();
+      expect(processors.length).toBe(3);
+      const [a, b, c] = processors;
+      expect(a).toEqual(testProcessors.processors[0]);
+      expect(b).toEqual(testProcessors.processors[1]);
+      expect(c).toEqual({ test: { if: '1 == 1' } });
+    });
+
+    it('removes a processor', () => {
+      const { actions } = testBed;
+      // processor>0 denotes the first processor in the top-level processors array.
+      actions.removeProcessor('processors>0');
+      const [onUpdateResult] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1];
+      const { processors } = onUpdateResult.getData();
+      expect(processors.length).toBe(1);
+      expect(processors[0]).toEqual({
+        gsub: {
+          field: '_index',
+          pattern: '(.monitoring-\\w+-)6(-.+)',
+          replacement: '$17$2',
+        },
+      });
+    });
+
+    it('reorders processors', () => {
+      const { actions } = testBed;
+      actions.moveProcessor('processors>0', 'dropButtonBelow-processors>1');
+      const [onUpdateResult] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1];
+      const { processors } = onUpdateResult.getData();
+      expect(processors).toEqual(testProcessors.processors.slice(0).reverse());
+    });
+
+    it('adds an on-failure processor to a processor', async () => {
+      const { actions, find, exists } = testBed;
+      const processorSelector = 'processors>1';
+      await actions.addOnFailureProcessor(processorSelector, 'test', { if: '1 == 2' });
+      // Assert that the add on failure button has been removed
+      find(`${processorSelector}.moreMenu.button`).simulate('click');
+      expect(!exists(`${processorSelector}.moreMenu.addOnFailureButton`));
+      // Assert that the add processor button is now visible
+      expect(exists(`${processorSelector}.addProcessor`));
+      const [onUpdateResult] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1];
+      const { processors } = onUpdateResult.getData();
+      expect(processors.length).toBe(2);
+      expect(processors[0]).toEqual(testProcessors.processors[0]); // should be unchanged
+      expect(processors[1].gsub).toEqual({
+        ...testProcessors.processors[1].gsub,
+        on_failure: [{ test: { if: '1 == 2' } }],
+      });
+    });
+
+    it('moves a processor to a nested dropzone', async () => {
+      const { actions } = testBed;
+      await actions.addOnFailureProcessor('processors>1', 'test', { if: '1 == 3' });
+      actions.moveProcessor('processors>0', 'dropButtonBelow-processors>1>onFailure>0');
+      const [onUpdateResult] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1];
+      const { processors } = onUpdateResult.getData();
+      expect(processors.length).toBe(1);
+      expect(processors[0].gsub.on_failure).toEqual([
+        {
+          test: { if: '1 == 3' },
+        },
+        testProcessors.processors[0],
+      ]);
+    });
+
+    it('duplicates a processor', async () => {
+      const { actions } = testBed;
+      await actions.addOnFailureProcessor('processors>1', 'test', { if: '1 == 4' });
+      actions.duplicateProcessor('processors>1');
+      const [onUpdateResult] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1];
+      const { processors } = onUpdateResult.getData();
+      expect(processors.length).toBe(3);
+      const duplicatedProcessor = {
+        gsub: {
+          ...testProcessors.processors[1].gsub,
+          on_failure: [{ test: { if: '1 == 4' } }],
+        },
+      };
+      expect(processors).toEqual([
+        testProcessors.processors[0],
+        duplicatedProcessor,
+        duplicatedProcessor,
+      ]);
+    });
+
+    it('can cancel a move', () => {
+      const { actions, exists } = testBed;
+      const processorSelector = 'processors>0';
+      actions.startAndCancelMove(processorSelector);
+      // Assert that we have exited move mode for this processor
+      expect(exists(`moveItemButton-${processorSelector}`));
+      const [onUpdateResult] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1];
+      const { processors } = onUpdateResult.getData();
+      // Assert that nothing has changed
+      expect(processors).toEqual(testProcessors.processors);
+    });
+
+    it('moves to and from the global on-failure tree', async () => {
+      const { actions } = testBed;
+      actions.toggleOnFailure();
+      await actions.addProcessor('onFailure', 'test', { if: '1 == 5' });
+      actions.moveProcessor('processors>0', 'dropButtonBelow-onFailure>0');
+      const [onUpdateResult1] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1];
+      const data1 = onUpdateResult1.getData();
+      expect(data1.processors.length).toBe(1);
+      expect(data1.on_failure.length).toBe(2);
+      expect(data1.processors).toEqual([testProcessors.processors[1]]);
+      expect(data1.on_failure).toEqual([{ test: { if: '1 == 5' } }, testProcessors.processors[0]]);
+      actions.moveProcessor('onFailure>1', 'dropButtonAbove-processors>0');
+      const [onUpdateResult2] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1];
+      const data2 = onUpdateResult2.getData();
+      expect(data2.processors.length).toBe(2);
+      expect(data2.on_failure.length).toBe(1);
+      expect(data2.processors).toEqual(testProcessors.processors);
+      expect(data2.on_failure).toEqual([{ test: { if: '1 == 5' } }]);
+    });
+  });
 });
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/add_processor_button.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/add_processor_button.tsx
index 5f9bf87ceca1e..276d684e3dca1 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/add_processor_button.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/add_processor_button.tsx
@@ -13,12 +13,14 @@ export interface Props {
   onClick: () => void;
 }
 
-export const AddProcessorButton: FunctionComponent<Props> = ({ onClick }) => {
+export const AddProcessorButton: FunctionComponent<Props> = (props) => {
+  const { onClick } = props;
   const {
     state: { editor },
   } = usePipelineProcessorsContext();
   return (
     <EuiButtonEmpty
+      data-test-subj="addProcessorButton"
       disabled={editor.mode.id !== 'idle'}
       iconSide="left"
       iconType="plusInCircle"
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/context_menu.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/context_menu.tsx
index bc7d6fdcff357..64364e921a3a1 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/context_menu.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/context_menu.tsx
@@ -16,19 +16,16 @@ interface Props {
   onDuplicate: () => void;
   onDelete: () => void;
   onAddOnFailure: () => void;
+  'data-test-subj'?: string;
 }
 
-export const ContextMenu: FunctionComponent<Props> = ({
-  showAddOnFailure,
-  onDuplicate,
-  onAddOnFailure,
-  onDelete,
-  disabled,
-}) => {
+export const ContextMenu: FunctionComponent<Props> = (props) => {
+  const { showAddOnFailure, onDuplicate, onAddOnFailure, onDelete, disabled } = props;
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const contextMenuItems = [
     <EuiContextMenuItem
+      data-test-subj="duplicateButton"
       key="duplicate"
       icon="copy"
       onClick={() => {
@@ -40,6 +37,7 @@ export const ContextMenu: FunctionComponent<Props> = ({
     </EuiContextMenuItem>,
     showAddOnFailure ? (
       <EuiContextMenuItem
+        data-test-subj="addOnFailureButton"
         key="addOnFailure"
         icon="indexClose"
         onClick={() => {
@@ -51,6 +49,7 @@ export const ContextMenu: FunctionComponent<Props> = ({
       </EuiContextMenuItem>
     ) : undefined,
     <EuiContextMenuItem
+      data-test-subj="deleteButton"
       key="delete"
       icon="trash"
       color="danger"
@@ -65,12 +64,14 @@ export const ContextMenu: FunctionComponent<Props> = ({
 
   return (
     <EuiPopover
+      data-test-subj={props['data-test-subj']}
       anchorPosition="leftCenter"
       panelPaddingSize="none"
       isOpen={isOpen}
       closePopover={() => setIsOpen(false)}
       button={
         <EuiButtonIcon
+          data-test-subj="button"
           disabled={disabled}
           onClick={() => setIsOpen((v) => !v)}
           iconType="boxesHorizontal"
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx
index 0e47b3ef7cf88..0eb259db75f47 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx
@@ -8,6 +8,7 @@ import React, { FunctionComponent, memo } from 'react';
 import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';
 
 import { ProcessorInternal, ProcessorSelector } from '../../types';
+import { selectorToDataTestSubject } from '../../utils';
 
 import { usePipelineProcessorsContext } from '../../context';
 
@@ -46,6 +47,7 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
         responsive={false}
         alignItems="center"
         justifyContent="spaceBetween"
+        data-test-subj={selectorToDataTestSubject(selector)}
       >
         <EuiFlexItem>
           <EuiFlexGroup gutterSize="m" alignItems="center" responsive={false}>
@@ -85,6 +87,7 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiButtonIcon
+                data-test-subj="editItemButton"
                 disabled={disabled}
                 aria-label={editorItemMessages.editorButtonLabel}
                 iconType="pencil"
@@ -100,6 +103,7 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
             <EuiFlexItem grow={false}>
               {selected ? (
                 <EuiButtonIcon
+                  data-test-subj="cancelMoveItemButton"
                   aria-label={editorItemMessages.cancelMoveButtonLabel}
                   size="s"
                   onClick={onCancelMove}
@@ -108,6 +112,7 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
               ) : (
                 <EuiToolTip content={editorItemMessages.moveButtonLabel}>
                   <EuiButtonIcon
+                    data-test-subj="moveItemButton"
                     disabled={disabled}
                     aria-label={editorItemMessages.moveButtonLabel}
                     size="s"
@@ -121,6 +126,7 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <ContextMenu
+            data-test-subj="moreMenu"
             disabled={disabled}
             showAddOnFailure={!processor.onFailure?.length}
             onAddOnFailure={() => {
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx
index 81b5731a96d5f..84dfce64f602b 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx
@@ -64,7 +64,7 @@ export const ProcessorSettingsForm: FunctionComponent<Props> = memo(
     );
 
     return (
-      <Form form={form}>
+      <Form data-test-subj="processorSettingsForm" form={form}>
         <EuiFlyout onClose={onClose}>
           <EuiFlyoutHeader>
             <EuiFlexGroup gutterSize="xs">
@@ -122,7 +122,7 @@ export const ProcessorSettingsForm: FunctionComponent<Props> = memo(
                   return (
                     <>
                       {formContent}
-                      <EuiButton onClick={form.submit}>
+                      <EuiButton data-test-subj="submitButton" onClick={form.submit}>
                         {i18n.translate(
                           'xpack.ingestPipelines.pipelineEditor.settingsForm.submitButtonLabel',
                           { defaultMessage: 'Submit' }
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/processor_type_field.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/processor_type_field.tsx
index 6c86fc16bcdd0..4b82fbfad9b52 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/processor_type_field.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/processor_type_field.tsx
@@ -54,6 +54,7 @@ export const ProcessorTypeField: FunctionComponent<Props> = ({ initialType }) =>
       component={ComboBoxField}
       componentProps={{
         euiFieldProps: {
+          'data-test-subj': 'processorTypeSelector',
           fullWidth: true,
           options: types.map((type) => ({ label: type, value: type })),
           noSuggestions: false,
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/custom.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/custom.tsx
index 61fc31a7b472a..4d8634e6f2855 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/custom.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/custom.tsx
@@ -76,6 +76,7 @@ export const Custom: FunctionComponent<Props> = ({ defaultOptions }) => {
       defaultValue={defaultOptions}
       componentProps={{
         euiCodeEditorProps: {
+          'data-test-subj': 'processorOptionsEditor',
           height: '300px',
           'aria-label': i18n.translate(
             'xpack.ingestPipelines.pipelineEditor.customForm.optionsFieldAriaLabel',
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/drop_zone_button.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/drop_zone_button.tsx
index a47886292cf32..b64de4f613911 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/drop_zone_button.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/drop_zone_button.tsx
@@ -12,13 +12,15 @@ import { EuiButtonIcon, EuiFlexItem } from '@elastic/eui';
 export interface Props {
   isDisabled: boolean;
   onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  'data-test-subj'?: string;
 }
 
 const MOVE_HERE_LABEL = i18n.translate('xpack.ingestPipelines.pipelineEditor.moveTargetLabel', {
   defaultMessage: 'Move here',
 });
 
-export const DropZoneButton: FunctionComponent<Props> = ({ onClick, isDisabled }) => {
+export const DropZoneButton: FunctionComponent<Props> = (props) => {
+  const { onClick, isDisabled } = props;
   const containerClasses = classNames({
     'pipelineProcessorsEditor__tree__dropZoneContainer--active': !isDisabled,
   });
@@ -31,6 +33,7 @@ export const DropZoneButton: FunctionComponent<Props> = ({ onClick, isDisabled }
       className={`pipelineProcessorsEditor__tree__dropZoneContainer ${containerClasses}`}
     >
       <EuiButtonIcon
+        data-test-subj={props['data-test-subj']}
         className={`pipelineProcessorsEditor__tree__dropZoneButton ${buttonClasses}`}
         aria-label={MOVE_HERE_LABEL}
         disabled={isDisabled}
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx
index bdc6b2eb44e2d..661bde1aa8b35 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx
@@ -11,6 +11,7 @@ import { AutoSizer, List, WindowScroller } from 'react-virtualized';
 import { DropSpecialLocations } from '../../../constants';
 import { ProcessorInternal, ProcessorSelector } from '../../../types';
 import { isChildPath } from '../../../processors_reducer';
+import { selectorToDataTestSubject } from '../../../utils';
 
 import { DropZoneButton } from '.';
 import { TreeNode } from '.';
@@ -73,10 +74,12 @@ export const PrivateTree: FunctionComponent<PrivateProps> = ({
     info: ProcessorInfo;
     processor: ProcessorInternal;
   }) => {
+    const stringifiedSelector = selectorToDataTestSubject(info.selector);
     return (
       <>
         {idx === 0 ? (
           <DropZoneButton
+            data-test-subj={`dropButtonAbove-${stringifiedSelector}`}
             onClick={(event) => {
               event.preventDefault();
               onAction({
@@ -102,6 +105,7 @@ export const PrivateTree: FunctionComponent<PrivateProps> = ({
           />
         </EuiFlexItem>
         <DropZoneButton
+          data-test-subj={`dropButtonBelow-${stringifiedSelector}`}
           isDisabled={Boolean(!movingProcessor || isDropZoneBelowDisabled(info, movingProcessor!))}
           onClick={(event) => {
             event.preventDefault();
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx
index ebe4ca4962b4c..a396a7f4d5ecd 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx
@@ -89,6 +89,7 @@ export const TreeNode: FunctionComponent<Props> = ({
           processors={processor.onFailure}
         />
         <AddProcessorButton
+          data-test-subj={stringSelector}
           onClick={() =>
             onAction({
               type: 'addProcessor',
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx
index d0661913515b2..db71cf25faacc 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx
@@ -8,6 +8,7 @@ import { EuiFlexGroup, EuiFlexItem, keyCodes } from '@elastic/eui';
 import { List, WindowScroller } from 'react-virtualized';
 
 import { ProcessorInternal, ProcessorSelector } from '../../types';
+import { selectorToDataTestSubject } from '../../utils';
 
 import './processors_tree.scss';
 import { AddProcessorButton } from '../add_processor_button';
@@ -96,7 +97,7 @@ export const ProcessorsTree: FunctionComponent<Props> = memo((props) => {
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiFlexGroup responsive={false} justifyContent="flexStart" gutterSize="none">
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem data-test-subj={selectorToDataTestSubject(baseSelector)} grow={false}>
             <AddProcessorButton
               onClick={() => {
                 onAction({ type: 'addProcessor', payload: { target: baseSelector } });
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/utils.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/utils.ts
index 49d24e8dc35c3..43703ed7d97b6 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/utils.ts
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/utils.ts
@@ -6,6 +6,8 @@
 
 import { ProcessorSelector } from './types';
 
+export const selectorToDataTestSubject = (selector: ProcessorSelector) => selector.join('>');
+
 type Path = string[];
 
 /**

From 38747670ca57c99c47beab68361b885ce6c31909 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Thu, 18 Jun 2020 19:29:16 +0200
Subject: [PATCH 35/63] [Ingest Pipelines] Encode URI component pipeline names
 (#69489)

* Properly encode URI component pipeline names

* safely URI decode to handle % case
---
 .../sections/pipelines_clone/pipelines_clone.tsx  |  4 +++-
 .../pipelines_create/pipelines_create.tsx         |  2 +-
 .../sections/pipelines_edit/pipelines_edit.tsx    |  6 ++++--
 .../application/sections/pipelines_list/table.tsx |  5 ++++-
 .../sections/shared/attempt_to_uri_decode.ts      | 15 +++++++++++++++
 .../public/application/sections/shared/index.ts   |  7 +++++++
 6 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 x-pack/plugins/ingest_pipelines/public/application/sections/shared/attempt_to_uri_decode.ts
 create mode 100644 x-pack/plugins/ingest_pipelines/public/application/sections/shared/index.ts

diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_clone/pipelines_clone.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_clone/pipelines_clone.tsx
index 4c857dc9c74f7..6dc7769ac02a9 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_clone/pipelines_clone.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_clone/pipelines_clone.tsx
@@ -12,6 +12,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { SectionLoading, useKibana } from '../../../shared_imports';
 
 import { PipelinesCreate } from '../pipelines_create';
+import { attemptToURIDecode } from '../shared';
 
 export interface ParamProps {
   sourceName: string;
@@ -25,8 +26,9 @@ export const PipelinesClone: FunctionComponent<RouteComponentProps<ParamProps>>
   const { sourceName } = props.match.params;
   const { services } = useKibana();
 
+  const decodedSourceName = attemptToURIDecode(sourceName);
   const { error, data: pipeline, isLoading, isInitialRequest } = services.api.useLoadPipeline(
-    decodeURIComponent(sourceName)
+    decodedSourceName
   );
 
   useEffect(() => {
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create/pipelines_create.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create/pipelines_create.tsx
index b495e142561fa..acca1c4e03f40 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create/pipelines_create.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create/pipelines_create.tsx
@@ -50,7 +50,7 @@ export const PipelinesCreate: React.FunctionComponent<RouteComponentProps & Prop
       return;
     }
 
-    history.push(BASE_PATH + `?pipeline=${pipeline.name}`);
+    history.push(BASE_PATH + `?pipeline=${encodeURIComponent(pipeline.name)}`);
   };
 
   const onCancel = () => {
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_edit/pipelines_edit.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_edit/pipelines_edit.tsx
index e1a7e5d6d1a36..e09cf4820771f 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_edit/pipelines_edit.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_edit/pipelines_edit.tsx
@@ -22,6 +22,8 @@ import { Pipeline } from '../../../../common/types';
 import { useKibana, SectionLoading } from '../../../shared_imports';
 import { PipelineForm } from '../../components';
 
+import { attemptToURIDecode } from '../shared';
+
 interface MatchParams {
   name: string;
 }
@@ -37,7 +39,7 @@ export const PipelinesEdit: React.FunctionComponent<RouteComponentProps<MatchPar
   const [isSaving, setIsSaving] = useState<boolean>(false);
   const [saveError, setSaveError] = useState<any>(null);
 
-  const decodedPipelineName = decodeURI(decodeURIComponent(name));
+  const decodedPipelineName = attemptToURIDecode(name);
 
   const { error, data: pipeline, isLoading } = services.api.useLoadPipeline(decodedPipelineName);
 
@@ -54,7 +56,7 @@ export const PipelinesEdit: React.FunctionComponent<RouteComponentProps<MatchPar
       return;
     }
 
-    history.push(BASE_PATH + `?pipeline=${updatedPipeline.name}`);
+    history.push(BASE_PATH + `?pipeline=${encodeURIComponent(updatedPipeline.name)}`);
   };
 
   const onCancel = () => {
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
index 0803b419bdbe4..a4b67ca80f718 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx
@@ -111,7 +111,10 @@ export const PipelineTable: FunctionComponent<Props> = ({
         render: (name: string) => (
           <EuiLink
             data-test-subj="pipelineDetailsLink"
-            {...reactRouterNavigate(history, { pathname: '/', search: `pipeline=${name}` })}
+            {...reactRouterNavigate(history, {
+              pathname: '/',
+              search: `pipeline=${encodeURIComponent(name)}`,
+            })}
           >
             {name}
           </EuiLink>
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/shared/attempt_to_uri_decode.ts b/x-pack/plugins/ingest_pipelines/public/application/sections/shared/attempt_to_uri_decode.ts
new file mode 100644
index 0000000000000..fe5a0d7932cbb
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/shared/attempt_to_uri_decode.ts
@@ -0,0 +1,15 @@
+/*
+ * 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 attemptToURIDecode = (value: string) => {
+  let result: string;
+  try {
+    result = decodeURI(decodeURIComponent(value));
+  } catch (e) {
+    result = value;
+  }
+  return result;
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/shared/index.ts b/x-pack/plugins/ingest_pipelines/public/application/sections/shared/index.ts
new file mode 100644
index 0000000000000..9326d13851387
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/shared/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 { attemptToURIDecode } from './attempt_to_uri_decode';

From 2436e2c9a6a86573f35cd28f2431f7f7bd77df92 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Thu, 18 Jun 2020 19:46:26 +0200
Subject: [PATCH 36/63] [Console] Added license headers to worker files
 (#69387)

* added license headers to worker files

* add missing @notice

* update notice.txt

* fix notice

* remove start-end license block markers

* Added license pre-amble
---
 NOTICE.txt                                    | 62 +++++++++++++++++++
 .../legacy_core_editor/mode/worker/worker.js  | 62 ++++++++++++++++---
 .../modes/x_json/worker/x_json.ace.worker.js  | 52 ++++++++++++++++
 3 files changed, 167 insertions(+), 9 deletions(-)

diff --git a/NOTICE.txt b/NOTICE.txt
index 946b328b8766c..94312d46c35ec 100644
--- a/NOTICE.txt
+++ b/NOTICE.txt
@@ -29,6 +29,68 @@ Author Tobias Koppers @sokra
 ---
 This product has relied on ASTExplorer that is licensed under MIT.
 
+---
+This product includes code that is based on Ace editor, which was available
+under a "BSD" license.
+
+Distributed under the BSD license:
+
+Copyright (c) 2010, Ajax.org B.V.
+All rights reserved.
+
+ Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+    * Neither the name of Ajax.org B.V. nor the
+      names of its contributors may be used to endorse or promote products
+      derived from this software without specific prior written permission.
+
+ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+---
+This product includes code that is based on Ace editor, which was available
+under a "BSD" license.
+
+Distributed under the BSD license:
+
+Copyright (c) 2010, Ajax.org B.V.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+    * Neither the name of Ajax.org B.V. nor the
+      names of its contributors may be used to endorse or promote products
+      derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
 ---
 This product includes code that is based on flot-charts, which was available
 under a "MIT" license.
diff --git a/src/plugins/console/public/application/models/legacy_core_editor/mode/worker/worker.js b/src/plugins/console/public/application/models/legacy_core_editor/mode/worker/worker.js
index 1cc626cfa668b..bd5932e88b5e9 100644
--- a/src/plugins/console/public/application/models/legacy_core_editor/mode/worker/worker.js
+++ b/src/plugins/console/public/application/models/legacy_core_editor/mode/worker/worker.js
@@ -1,5 +1,57 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* @notice
+ *
+ * This product includes code that is based on Ace editor, which was available
+ * under a "BSD" license.
+ *
+ * Distributed under the BSD license:
+ *
+ * Copyright (c) 2010, Ajax.org B.V.
+ * All rights reserved.
+ *
+ *  Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *     * Redistributions of source code must retain the above copyright
+ *       notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above copyright
+ *       notice, this list of conditions and the following disclaimer in the
+ *       documentation and/or other materials provided with the distribution.
+ *     * Neither the name of Ajax.org B.V. nor the
+ *       names of its contributors may be used to endorse or promote products
+ *       derived from this software without specific prior written permission.
+ *
+ *  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
 /* eslint-disable */
-/* 
+/*
   This file is loaded up as a blob by Brace to hand to Ace to load as Jsonp
   (hence the redefining of everything).  It is based on the javascript
   mode from the brace distro.
@@ -197,7 +249,6 @@ ace.define('ace/lib/oop', ['require', 'exports', 'module'], function (
   acequire,
   exports
 ) {
-  
   (exports.inherits = function (ctor, superCtor) {
     (ctor.super_ = superCtor),
     (ctor.prototype = Object.create(superCtor.prototype, {
@@ -221,7 +272,6 @@ ace.define('ace/range', ['require', 'exports', 'module'], function (
   acequire,
   exports
 ) {
-  
   let comparePoints = function (p1, p2) {
       return p1.row - p2.row || p1.column - p2.column;
     },
@@ -426,7 +476,6 @@ ace.define('ace/apply_delta', ['require', 'exports', 'module'], function (
   acequire,
   exports
 ) {
-  
   exports.applyDelta = function (docLines, delta) {
     let row = delta.start.row,
       startColumn = delta.start.column,
@@ -467,7 +516,6 @@ ace.define(
   'ace/lib/event_emitter',
   ['require', 'exports', 'module'],
   function (acequire, exports) {
-    
     let EventEmitter = {},
       stopPropagation = function () {
         this.propagationStopped = !0;
@@ -579,7 +627,6 @@ ace.define(
   'ace/anchor',
   ['require', 'exports', 'module', 'ace/lib/oop', 'ace/lib/event_emitter'],
   function (acequire, exports) {
-    
     let oop = acequire('./lib/oop'),
       EventEmitter = acequire('./lib/event_emitter').EventEmitter,
       Anchor = (exports.Anchor = function (doc, row, column) {
@@ -696,7 +743,6 @@ ace.define(
     'ace/anchor',
   ],
   function (acequire, exports) {
-    
     let oop = acequire('./lib/oop'),
       applyDelta = acequire('./apply_delta').applyDelta,
       EventEmitter = acequire('./lib/event_emitter').EventEmitter,
@@ -1064,7 +1110,6 @@ ace.define('ace/lib/lang', ['require', 'exports', 'module'], function (
   acequire,
   exports
 ) {
-  
   (exports.last = function (a) {
     return a[a.length - 1];
   }),
@@ -1215,7 +1260,6 @@ ace.define(
     'ace/lib/lang',
   ],
   function (acequire, exports) {
-    
     acequire('../range').Range;
     let Document = acequire('../document').Document,
       lang = acequire('../lib/lang'),
diff --git a/src/plugins/es_ui_shared/public/console_lang/ace/modes/x_json/worker/x_json.ace.worker.js b/src/plugins/es_ui_shared/public/console_lang/ace/modes/x_json/worker/x_json.ace.worker.js
index 69a8cc86f1f73..53cdb5885c730 100644
--- a/src/plugins/es_ui_shared/public/console_lang/ace/modes/x_json/worker/x_json.ace.worker.js
+++ b/src/plugins/es_ui_shared/public/console_lang/ace/modes/x_json/worker/x_json.ace.worker.js
@@ -1,3 +1,55 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* @notice
+ *
+ * This product includes code that is based on Ace editor, which was available
+ * under a "BSD" license.
+ *
+ * Distributed under the BSD license:
+ *
+ * Copyright (c) 2010, Ajax.org B.V.
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *     * Redistributions of source code must retain the above copyright
+ *       notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above copyright
+ *       notice, this list of conditions and the following disclaimer in the
+ *       documentation and/or other materials provided with the distribution.
+ *     * Neither the name of Ajax.org B.V. nor the
+ *       names of its contributors may be used to endorse or promote products
+ *       derived from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
 /* eslint-disable */
 /*
   This file is loaded up as a blob by Brace to hand to Ace to load as Jsonp

From f4b0d5cbbc3a84c840bb0bcd90507e553f05d321 Mon Sep 17 00:00:00 2001
From: Sandra Gonzales <neptunian@users.noreply.github.com>
Date: Thu, 18 Jun 2020 13:49:03 -0400
Subject: [PATCH 37/63] don't include group fields with no child fields in
 index pattern (#69457)

---
 .../index_pattern/__snapshots__/install.test.ts.snap |  2 +-
 .../epm/kibana/index_pattern/install.test.ts         | 12 +++++++++---
 .../services/epm/kibana/index_pattern/install.ts     |  4 ++++
 .../epm/kibana/index_pattern/tests/nginx.fields.yml  |  2 ++
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/ingest_manager/server/services/epm/kibana/index_pattern/__snapshots__/install.test.ts.snap b/x-pack/plugins/ingest_manager/server/services/epm/kibana/index_pattern/__snapshots__/install.test.ts.snap
index 029e278b5aa93..d8495840453f3 100644
--- a/x-pack/plugins/ingest_manager/server/services/epm/kibana/index_pattern/__snapshots__/install.test.ts.snap
+++ b/x-pack/plugins/ingest_manager/server/services/epm/kibana/index_pattern/__snapshots__/install.test.ts.snap
@@ -611,7 +611,7 @@ exports[`creating index patterns from yaml fields createIndexPatternFields funct
 }
 `;
 
-exports[`creating index patterns from yaml fields flattenFields function flattens recursively and handles copying alias fields: flattenFields 1`] = `
+exports[`creating index patterns from yaml fields flattenFields function flattens recursively and handles copying alias fields flattenFields matches snapshot: flattenFields 1`] = `
 [
   {
     "name": "coredns.id",
diff --git a/x-pack/plugins/ingest_manager/server/services/epm/kibana/index_pattern/install.test.ts b/x-pack/plugins/ingest_manager/server/services/epm/kibana/index_pattern/install.test.ts
index d083b40e40fd5..3425a698bd172 100644
--- a/x-pack/plugins/ingest_manager/server/services/epm/kibana/index_pattern/install.test.ts
+++ b/x-pack/plugins/ingest_manager/server/services/epm/kibana/index_pattern/install.test.ts
@@ -56,9 +56,15 @@ describe('creating index patterns from yaml fields', () => {
     expect(indexPattern).toMatchSnapshot('createIndexPattern');
   });
 
-  test('flattenFields function flattens recursively and handles copying alias fields', () => {
-    const flattened = flattenFields(fields);
-    expect(flattened).toMatchSnapshot('flattenFields');
+  describe('flattenFields function flattens recursively and handles copying alias fields', () => {
+    test('a field of type group with no nested fields is skipped', () => {
+      const flattened = flattenFields([{ name: 'nginx', type: 'group' }]);
+      expect(flattened.length).toBe(0);
+    });
+    test('flattenFields matches snapshot', () => {
+      const flattened = flattenFields(fields);
+      expect(flattened).toMatchSnapshot('flattenFields');
+    });
   });
 
   describe('dedupFields', () => {
diff --git a/x-pack/plugins/ingest_manager/server/services/epm/kibana/index_pattern/install.ts b/x-pack/plugins/ingest_manager/server/services/epm/kibana/index_pattern/install.ts
index 0f7b1d6cab178..69cd35f3050cd 100644
--- a/x-pack/plugins/ingest_manager/server/services/epm/kibana/index_pattern/install.ts
+++ b/x-pack/plugins/ingest_manager/server/services/epm/kibana/index_pattern/install.ts
@@ -307,6 +307,10 @@ export const transformField = (field: Field, i: number, fields: Fields): IndexPa
 export const flattenFields = (allFields: Fields): Fields => {
   const flatten = (fields: Fields): Fields =>
     fields.reduce<Field[]>((acc, field) => {
+      // if this is a group fields with no fields, skip the field
+      if (field.type === 'group' && !field.fields?.length) {
+        return acc;
+      }
       // recurse through nested fields
       if (field.type === 'group' && field.fields?.length) {
         // skip if field.enabled is not explicitly set to false
diff --git a/x-pack/plugins/ingest_manager/server/services/epm/kibana/index_pattern/tests/nginx.fields.yml b/x-pack/plugins/ingest_manager/server/services/epm/kibana/index_pattern/tests/nginx.fields.yml
index 220225a2c246b..7c2e721d564e7 100644
--- a/x-pack/plugins/ingest_manager/server/services/epm/kibana/index_pattern/tests/nginx.fields.yml
+++ b/x-pack/plugins/ingest_manager/server/services/epm/kibana/index_pattern/tests/nginx.fields.yml
@@ -116,3 +116,5 @@
       type: keyword
     - name: text
       type: text
+- name: nginx
+  type: group
\ No newline at end of file

From 4a26f56f31e64ddb37cad610d8223c544b1b8dc3 Mon Sep 17 00:00:00 2001
From: Marshall Main <55718608+marshallmain@users.noreply.github.com>
Date: Thu, 18 Jun 2020 13:50:53 -0400
Subject: [PATCH 38/63] Update endpoint event and alert types (#69292)

* start redoing types

* finish redoing types

* fix bad test

* rework tests

* fix more types

* fix test

* Fix endpoints test and render error

* add deletePolicyStream to alerts api tests

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Paul Tavares <paul.tavares@elastic.co>
---
 .../common/endpoint/generate_data.test.ts     |  12 +-
 .../common/endpoint/generate_data.ts          | 189 +++++++++---------
 .../common/endpoint/index_data.ts             |  92 +++++++++
 .../common/endpoint/types.ts                  | 106 +++++-----
 .../view/details/metadata/file_accordion.tsx  |   2 +-
 .../details/metadata/general_accordion.tsx    |   2 +-
 .../metadata/source_process_accordion.tsx     |   8 +-
 .../source_process_token_accordion.tsx        |   4 +-
 .../public/endpoint_alerts/view/index.tsx     |   2 +-
 .../pages/endpoint_hosts/store/selectors.ts   |   4 +-
 .../view/details/host_details.tsx             |   8 +-
 .../pages/endpoint_hosts/view/index.test.tsx  |  65 ++++--
 .../pages/endpoint_hosts/view/index.tsx       |   8 +-
 .../scripts/endpoint/resolver_generator.ts    |  74 ++-----
 .../endpoint/routes/metadata/metadata.test.ts |   2 +-
 .../apis/endpoint/alerts/index.ts             | 111 +++++++---
 .../api_integration/apis/endpoint/metadata.ts |  11 +-
 .../api_integration/apis/endpoint/policy.ts   |   2 +-
 .../endpoint/metadata/api_feature/data.json   |  54 +++--
 .../es_archives/endpoint/policy/data.json.gz  | Bin 1326 -> 1327 bytes
 20 files changed, 456 insertions(+), 300 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/common/endpoint/index_data.ts

diff --git a/x-pack/plugins/security_solution/common/endpoint/generate_data.test.ts b/x-pack/plugins/security_solution/common/endpoint/generate_data.test.ts
index ba4f2251564e8..d7b653916970f 100644
--- a/x-pack/plugins/security_solution/common/endpoint/generate_data.test.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/generate_data.test.ts
@@ -47,7 +47,7 @@ describe('data generator', () => {
     const metadata = generator.generateHostMetadata(timestamp);
     expect(metadata['@timestamp']).toEqual(timestamp);
     expect(metadata.event.created).toEqual(timestamp);
-    expect(metadata.endpoint).not.toBeNull();
+    expect(metadata.Endpoint).not.toBeNull();
     expect(metadata.agent).not.toBeNull();
     expect(metadata.host).not.toBeNull();
   });
@@ -57,10 +57,10 @@ describe('data generator', () => {
     const hostPolicyResponse = generator.generatePolicyResponse(timestamp);
     expect(hostPolicyResponse['@timestamp']).toEqual(timestamp);
     expect(hostPolicyResponse.event.created).toEqual(timestamp);
-    expect(hostPolicyResponse.endpoint).not.toBeNull();
+    expect(hostPolicyResponse.Endpoint).not.toBeNull();
     expect(hostPolicyResponse.agent).not.toBeNull();
     expect(hostPolicyResponse.host).not.toBeNull();
-    expect(hostPolicyResponse.endpoint.policy.applied).not.toBeNull();
+    expect(hostPolicyResponse.Endpoint.policy.applied).not.toBeNull();
   });
 
   it('creates alert event documents', () => {
@@ -68,7 +68,7 @@ describe('data generator', () => {
     const alert = generator.generateAlert(timestamp);
     expect(alert['@timestamp']).toEqual(timestamp);
     expect(alert.event.action).not.toBeNull();
-    expect(alert.endpoint).not.toBeNull();
+    expect(alert.Endpoint).not.toBeNull();
     expect(alert.agent).not.toBeNull();
     expect(alert.host).not.toBeNull();
     expect(alert.process.entity_id).not.toBeNull();
@@ -364,7 +364,9 @@ describe('data generator', () => {
   it('creates full resolver tree', () => {
     const alertAncestors = 3;
     const generations = 2;
-    const events = [...generator.fullResolverTreeGenerator(alertAncestors, generations)];
+    const events = [
+      ...generator.fullResolverTreeGenerator({ ancestors: alertAncestors, generations }),
+    ];
     const rootNode = buildResolverTree(events);
     const visitedEvents = countResolverEvents(rootNode, alertAncestors + generations);
     expect(visitedEvents).toEqual(events.length);
diff --git a/x-pack/plugins/security_solution/common/endpoint/generate_data.ts b/x-pack/plugins/security_solution/common/endpoint/generate_data.ts
index 7944d7d365ed8..8c03285996779 100644
--- a/x-pack/plugins/security_solution/common/endpoint/generate_data.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/generate_data.ts
@@ -10,7 +10,7 @@ import {
   EndpointEvent,
   Host,
   HostMetadata,
-  HostOS,
+  OSFields,
   HostPolicyResponse,
   HostPolicyResponseActionStatus,
   PolicyData,
@@ -28,38 +28,46 @@ interface EventOptions {
   processName?: string;
 }
 
-const Windows: HostOS[] = [
+const Windows: OSFields[] = [
   {
     name: 'windows 10.0',
     full: 'Windows 10',
     version: '10.0',
-    variant: 'Windows Pro',
+    Ext: {
+      variant: 'Windows Pro',
+    },
   },
   {
     name: 'windows 10.0',
     full: 'Windows Server 2016',
     version: '10.0',
-    variant: 'Windows Server',
+    Ext: {
+      variant: 'Windows Server',
+    },
   },
   {
     name: 'windows 6.2',
     full: 'Windows Server 2012',
     version: '6.2',
-    variant: 'Windows Server',
+    Ext: {
+      variant: 'Windows Server',
+    },
   },
   {
     name: 'windows 6.3',
     full: 'Windows Server 2012R2',
     version: '6.3',
-    variant: 'Windows Server Release 2',
+    Ext: {
+      variant: 'Windows Server Release 2',
+    },
   },
 ];
 
-const Linux: HostOS[] = [];
+const Linux: OSFields[] = [];
 
-const Mac: HostOS[] = [];
+const Mac: OSFields[] = [];
 
-const OS: HostOS[] = [...Windows, ...Mac, ...Linux];
+const OS: OSFields[] = [...Windows, ...Mac, ...Linux];
 
 const APPLIED_POLICIES: Array<{
   name: string;
@@ -186,7 +194,7 @@ interface HostInfo {
     type: string;
   };
   host: Host;
-  endpoint: {
+  Endpoint: {
     policy: {
       applied: {
         id: string;
@@ -283,8 +291,8 @@ export class EndpointDocGenerator {
    * Creates new random policy id for the host to simulate new policy application
    */
   public updatePolicyId() {
-    this.commonInfo.endpoint.policy.applied.id = this.randomChoice(APPLIED_POLICIES).id;
-    this.commonInfo.endpoint.policy.applied.status = this.randomChoice([
+    this.commonInfo.Endpoint.policy.applied = this.randomChoice(APPLIED_POLICIES);
+    this.commonInfo.Endpoint.policy.applied.status = this.randomChoice([
       HostPolicyResponseActionStatus.success,
       HostPolicyResponseActionStatus.failure,
       HostPolicyResponseActionStatus.warning,
@@ -310,7 +318,7 @@ export class EndpointDocGenerator {
         mac: this.randomArray(3, () => this.randomMac()),
         os: this.randomChoice(OS),
       },
-      endpoint: {
+      Endpoint: {
         policy: {
           applied: this.randomChoice(APPLIED_POLICIES),
         },
@@ -371,77 +379,88 @@ export class EndpointDocGenerator {
           sha1: 'fake file sha1',
           sha256: 'fake file sha256',
         },
-        code_signature: {
-          trusted: false,
-          subject_name: 'bad signer',
-        },
-        malware_classification: {
-          identifier: 'endpointpe',
-          score: 1,
-          threshold: 0.66,
-          version: '3.0.33',
+        Ext: {
+          code_signature: [
+            {
+              trusted: false,
+              subject_name: 'bad signer',
+            },
+          ],
+          malware_classification: {
+            identifier: 'endpointpe',
+            score: 1,
+            threshold: 0.66,
+            version: '3.0.33',
+          },
+          temp_file_path: 'C:/temp/fake_malware.exe',
         },
-        temp_file_path: 'C:/temp/fake_malware.exe',
       },
       process: {
         pid: 2,
         name: 'malware writer',
         start: ts,
         uptime: 0,
-        user: 'SYSTEM',
         entity_id: entityID,
         executable: 'C:/malware.exe',
         parent: parentEntityID ? { entity_id: parentEntityID, pid: 1 } : undefined,
-        token: {
-          domain: 'NT AUTHORITY',
-          integrity_level: 16384,
-          integrity_level_name: 'system',
-          privileges: [
-            {
-              description: 'Replace a process level token',
-              enabled: false,
-              name: 'SeAssignPrimaryTokenPrivilege',
-            },
-          ],
-          sid: 'S-1-5-18',
-          type: 'tokenPrimary',
-          user: 'SYSTEM',
-        },
-        code_signature: {
-          trusted: false,
-          subject_name: 'bad signer',
-        },
         hash: {
           md5: 'fake md5',
           sha1: 'fake sha1',
           sha256: 'fake sha256',
         },
+        Ext: {
+          code_signature: [
+            {
+              trusted: false,
+              subject_name: 'bad signer',
+            },
+          ],
+          user: 'SYSTEM',
+          token: {
+            domain: 'NT AUTHORITY',
+            integrity_level: 16384,
+            integrity_level_name: 'system',
+            privileges: [
+              {
+                description: 'Replace a process level token',
+                enabled: false,
+                name: 'SeAssignPrimaryTokenPrivilege',
+              },
+            ],
+            sid: 'S-1-5-18',
+            type: 'tokenPrimary',
+            user: 'SYSTEM',
+          },
+        },
       },
       dll: [
         {
           pe: {
             architecture: 'x64',
-            imphash: 'c30d230b81c734e82e86e2e2fe01cd01',
           },
           code_signature: {
             subject_name: 'Cybereason Inc',
             trusted: true,
           },
-          compile_time: 1534424710,
+
           hash: {
             md5: '1f2d082566b0fc5f2c238a5180db7451',
             sha1: 'ca85243c0af6a6471bdaa560685c51eefd6dbc0d',
             sha256: '8ad40c90a611d36eb8f9eb24fa04f7dbca713db383ff55a03aa0f382e92061a2',
           },
-          malware_classification: {
-            identifier: 'Whitelisted',
-            score: 0,
-            threshold: 0,
-            version: '3.0.0',
-          },
-          mapped_address: 5362483200,
-          mapped_size: 0,
+
           path: 'C:\\Program Files\\Cybereason ActiveProbe\\AmSvc.exe',
+          Ext: {
+            compile_time: 1534424710,
+            mapped_address: 5362483200,
+            mapped_size: 0,
+            malware_classification: {
+              identifier: 'Whitelisted',
+              score: 0,
+              threshold: 0,
+              version: '3.0.0',
+            },
+          },
         },
       ],
     };
@@ -561,28 +580,9 @@ export class EndpointDocGenerator {
    * @param percentTerminated - percent of nodes which will have process termination events
    * @param alwaysGenMaxChildrenPerNode - flag to always return the max children per node instead of it being a random number of children
    */
-  public *alertsGenerator(
-    numAlerts: number,
-    alertAncestors?: number,
-    childGenerations?: number,
-    maxChildrenPerNode?: number,
-    relatedEventsPerNode?: number,
-    relatedAlertsPerNode?: number,
-    percentNodesWithRelated?: number,
-    percentTerminated?: number,
-    alwaysGenMaxChildrenPerNode?: boolean
-  ) {
+  public *alertsGenerator(numAlerts: number, options: TreeOptions = {}) {
     for (let i = 0; i < numAlerts; i++) {
-      yield* this.fullResolverTreeGenerator(
-        alertAncestors,
-        childGenerations,
-        maxChildrenPerNode,
-        relatedEventsPerNode,
-        relatedAlertsPerNode,
-        percentNodesWithRelated,
-        percentTerminated,
-        alwaysGenMaxChildrenPerNode
-      );
+      yield* this.fullResolverTreeGenerator(options);
     }
   }
 
@@ -600,21 +600,12 @@ export class EndpointDocGenerator {
    * @param percentTerminated - percent of nodes which will have process termination events
    * @param alwaysGenMaxChildrenPerNode - flag to always return the max children per node instead of it being a random number of children
    */
-  public *fullResolverTreeGenerator(
-    alertAncestors?: number,
-    childGenerations?: number,
-    maxChildrenPerNode?: number,
-    relatedEventsPerNode?: RelatedEventInfo[] | number,
-    relatedAlertsPerNode?: number,
-    percentNodesWithRelated?: number,
-    percentTerminated?: number,
-    alwaysGenMaxChildrenPerNode?: boolean
-  ) {
+  public *fullResolverTreeGenerator(options: TreeOptions = {}) {
     const ancestry = this.createAlertEventAncestry(
-      alertAncestors,
-      relatedEventsPerNode,
-      percentNodesWithRelated,
-      percentTerminated
+      options.ancestors,
+      options.relatedEvents,
+      options.percentWithRelated,
+      options.percentTerminated
     );
     for (let i = 0; i < ancestry.length; i++) {
       yield ancestry[i];
@@ -622,13 +613,13 @@ export class EndpointDocGenerator {
     // ancestry will always have at least 2 elements, and the last element will be the alert
     yield* this.descendantsTreeGenerator(
       ancestry[ancestry.length - 1],
-      childGenerations,
-      maxChildrenPerNode,
-      relatedEventsPerNode,
-      relatedAlertsPerNode,
-      percentNodesWithRelated,
-      percentTerminated,
-      alwaysGenMaxChildrenPerNode
+      options.generations,
+      options.children,
+      options.relatedEvents,
+      options.relatedAlerts,
+      options.percentWithRelated,
+      options.percentTerminated,
+      options.alwaysGenMaxChildrenPerNode
     );
   }
 
@@ -940,7 +931,7 @@ export class EndpointDocGenerator {
       host: {
         id: this.commonInfo.host.id,
       },
-      endpoint: {
+      Endpoint: {
         policy: {
           applied: {
             actions: [
@@ -1045,7 +1036,7 @@ export class EndpointDocGenerator {
                 status: HostPolicyResponseActionStatus.success,
               },
             ],
-            id: this.commonInfo.endpoint.policy.applied.id,
+            id: this.commonInfo.Endpoint.policy.applied.id,
             response: {
               configurations: {
                 events: {
@@ -1086,9 +1077,9 @@ export class EndpointDocGenerator {
                 ],
               },
             },
-            status: this.commonInfo.endpoint.policy.applied.status,
+            status: this.commonInfo.Endpoint.policy.applied.status,
             version: policyVersion,
-            name: this.commonInfo.endpoint.policy.applied.name,
+            name: this.commonInfo.Endpoint.policy.applied.name,
           },
         },
       },
diff --git a/x-pack/plugins/security_solution/common/endpoint/index_data.ts b/x-pack/plugins/security_solution/common/endpoint/index_data.ts
new file mode 100644
index 0000000000000..d868ba63b1edc
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/endpoint/index_data.ts
@@ -0,0 +1,92 @@
+/*
+ * 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 { Client } from '@elastic/elasticsearch';
+import seedrandom from 'seedrandom';
+import { EndpointDocGenerator, TreeOptions, Event } from './generate_data';
+
+export async function indexHostsAndAlerts(
+  client: Client,
+  seed: string,
+  numHosts: number,
+  numDocs: number,
+  metadataIndex: string,
+  policyIndex: string,
+  eventIndex: string,
+  alertsPerHost: number,
+  options: TreeOptions = {}
+) {
+  const random = seedrandom(seed);
+  for (let i = 0; i < numHosts; i++) {
+    const generator = new EndpointDocGenerator(random);
+    await indexHostDocs(numDocs, client, metadataIndex, policyIndex, generator);
+    await indexAlerts(client, eventIndex, generator, alertsPerHost, options);
+  }
+  await client.indices.refresh({
+    index: eventIndex,
+  });
+  // TODO: Unclear why the documents are not showing up after the call to refresh.
+  // Waiting 5 seconds allows the indices to refresh automatically and
+  // the documents become available in API/integration tests.
+  await delay(5000);
+}
+
+function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function indexHostDocs(
+  numDocs: number,
+  client: Client,
+  metadataIndex: string,
+  policyIndex: string,
+  generator: EndpointDocGenerator
+) {
+  const timeBetweenDocs = 6 * 3600 * 1000; // 6 hours between metadata documents
+  const timestamp = new Date().getTime();
+  for (let j = 0; j < numDocs; j++) {
+    generator.updateHostData();
+    generator.updatePolicyId();
+    await client.index({
+      index: metadataIndex,
+      body: generator.generateHostMetadata(timestamp - timeBetweenDocs * (numDocs - j - 1)),
+      op_type: 'create',
+    });
+    await client.index({
+      index: policyIndex,
+      body: generator.generatePolicyResponse(timestamp - timeBetweenDocs * (numDocs - j - 1)),
+      op_type: 'create',
+    });
+  }
+}
+
+async function indexAlerts(
+  client: Client,
+  index: string,
+  generator: EndpointDocGenerator,
+  numAlerts: number,
+  options: TreeOptions = {}
+) {
+  const alertGenerator = generator.alertsGenerator(numAlerts, options);
+  let result = alertGenerator.next();
+  while (!result.done) {
+    let k = 0;
+    const resolverDocs: Event[] = [];
+    while (k < 1000 && !result.done) {
+      resolverDocs.push(result.value);
+      result = alertGenerator.next();
+      k++;
+    }
+    const body = resolverDocs.reduce(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (array: Array<Record<string, any>>, doc) => (
+        array.push({ create: { _index: index } }, doc), array
+      ),
+      []
+    );
+    await client.bulk({ body, refresh: 'true' });
+  }
+}
diff --git a/x-pack/plugins/security_solution/common/endpoint/types.ts b/x-pack/plugins/security_solution/common/endpoint/types.ts
index 0341b7593caf0..bd4d8372497f1 100644
--- a/x-pack/plugins/security_solution/common/endpoint/types.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/types.ts
@@ -173,12 +173,19 @@ export interface HostResultList {
 }
 
 /**
- * Operating System metadata for a host.
+ * Operating System metadata.
  */
-export interface HostOS {
+export interface OSFields {
   full: string;
   name: string;
   version: string;
+  Ext: OSFieldsExt;
+}
+
+/**
+ * Extended Operating System metadata.
+ */
+export interface OSFieldsExt {
   variant: string;
 }
 
@@ -190,7 +197,7 @@ export interface Host {
   hostname: string;
   ip: string[];
   mac: string[];
-  os: HostOS;
+  os: OSFields;
 }
 
 /**
@@ -220,27 +227,30 @@ interface MalwareClassification {
 
 interface ThreadFields {
   id: number;
-  service_name: string;
-  start: number;
-  start_address: number;
-  start_address_module: string;
+  Ext: {
+    service_name: string;
+    start: number;
+    start_address: number;
+    start_address_module: string;
+  };
 }
 
 interface DllFields {
+  hash: Hashes;
+  path: string;
   pe: {
     architecture: string;
-    imphash: string;
   };
   code_signature: {
     subject_name: string;
     trusted: boolean;
   };
-  compile_time: number;
-  hash: Hashes;
-  malware_classification: MalwareClassification;
-  mapped_address: number;
-  mapped_size: number;
-  path: string;
+  Ext: {
+    compile_time: number;
+    malware_classification: MalwareClassification;
+    mapped_address: number;
+    mapped_size: number;
+  };
 }
 
 /**
@@ -265,7 +275,7 @@ export interface AlertEvent {
     module: string;
     type: string;
   };
-  endpoint: {
+  Endpoint: {
     policy: {
       applied: {
         id: string;
@@ -275,12 +285,7 @@ export interface AlertEvent {
     };
   };
   process: {
-    code_signature: {
-      subject_name: string;
-      trusted: boolean;
-    };
     command_line?: string;
-    domain?: string;
     pid: number;
     ppid?: number;
     entity_id: string;
@@ -290,29 +295,31 @@ export interface AlertEvent {
     };
     name: string;
     hash: Hashes;
-    pe?: {
-      imphash: string;
-    };
     executable: string;
-    sid?: string;
     start: number;
-    malware_classification?: MalwareClassification;
-    token: {
-      domain: string;
-      type: string;
-      user: string;
-      sid: string;
-      integrity_level: number;
-      integrity_level_name: string;
-      privileges?: Array<{
-        description: string;
-        name: string;
-        enabled: boolean;
-      }>;
-    };
     thread?: ThreadFields[];
     uptime: number;
-    user: string;
+    Ext: {
+      code_signature: Array<{
+        subject_name: string;
+        trusted: boolean;
+      }>;
+      malware_classification?: MalwareClassification;
+      token: {
+        domain: string;
+        type: string;
+        user: string;
+        sid: string;
+        integrity_level: number;
+        integrity_level_name: string;
+        privileges?: Array<{
+          description: string;
+          name: string;
+          enabled: boolean;
+        }>;
+      };
+      user: string;
+    };
   };
   file: {
     owner: string;
@@ -323,15 +330,14 @@ export interface AlertEvent {
     created: number;
     size: number;
     hash: Hashes;
-    pe?: {
-      imphash: string;
-    };
-    code_signature: {
-      trusted: boolean;
-      subject_name: string;
+    Ext: {
+      malware_classification: MalwareClassification;
+      temp_file_path: string;
+      code_signature: Array<{
+        trusted: boolean;
+        subject_name: string;
+      }>;
     };
-    malware_classification: MalwareClassification;
-    temp_file_path: string;
   };
   host: Host;
   dll?: DllFields[];
@@ -373,7 +379,7 @@ export type HostMetadata = Immutable<{
       id: string;
     };
   };
-  endpoint: {
+  Endpoint: {
     policy: {
       applied: {
         id: string;
@@ -666,7 +672,7 @@ export interface HostPolicyResponseAppliedAction {
   message: string;
 }
 
-export type HostPolicyResponseConfiguration = HostPolicyResponse['endpoint']['policy']['applied']['response']['configurations'];
+export type HostPolicyResponseConfiguration = HostPolicyResponse['Endpoint']['policy']['applied']['response']['configurations'];
 
 interface HostPolicyResponseConfigurationStatus {
   status: HostPolicyResponseActionStatus;
@@ -711,7 +717,7 @@ export interface HostPolicyResponse {
     version: string;
     id: string;
   };
-  endpoint: {
+  Endpoint: {
     policy: {
       applied: {
         version: string;
diff --git a/x-pack/plugins/security_solution/public/endpoint_alerts/view/details/metadata/file_accordion.tsx b/x-pack/plugins/security_solution/public/endpoint_alerts/view/details/metadata/file_accordion.tsx
index 6c9df46c9313c..82800c92e742c 100644
--- a/x-pack/plugins/security_solution/public/endpoint_alerts/view/details/metadata/file_accordion.tsx
+++ b/x-pack/plugins/security_solution/public/endpoint_alerts/view/details/metadata/file_accordion.tsx
@@ -74,7 +74,7 @@ export const FileAccordion = memo(({ alertData }: { alertData: Immutable<AlertDa
             defaultMessage: 'Signer',
           }
         ),
-        description: alertData.file.code_signature.subject_name,
+        description: alertData.file.Ext.code_signature[0].subject_name,
       },
       {
         title: i18n.translate(
diff --git a/x-pack/plugins/security_solution/public/endpoint_alerts/view/details/metadata/general_accordion.tsx b/x-pack/plugins/security_solution/public/endpoint_alerts/view/details/metadata/general_accordion.tsx
index 650db43139957..b7e799a4a5d80 100644
--- a/x-pack/plugins/security_solution/public/endpoint_alerts/view/details/metadata/general_accordion.tsx
+++ b/x-pack/plugins/security_solution/public/endpoint_alerts/view/details/metadata/general_accordion.tsx
@@ -56,7 +56,7 @@ export const GeneralAccordion = memo(({ alertData }: { alertData: Immutable<Aler
             defaultMessage: 'MalwareScore',
           }
         ),
-        description: alertData.file.malware_classification.score,
+        description: alertData.file.Ext.malware_classification.score,
       },
       {
         title: i18n.translate(
diff --git a/x-pack/plugins/security_solution/public/endpoint_alerts/view/details/metadata/source_process_accordion.tsx b/x-pack/plugins/security_solution/public/endpoint_alerts/view/details/metadata/source_process_accordion.tsx
index 5a9a9e9bd193c..0ba937e219860 100644
--- a/x-pack/plugins/security_solution/public/endpoint_alerts/view/details/metadata/source_process_accordion.tsx
+++ b/x-pack/plugins/security_solution/public/endpoint_alerts/view/details/metadata/source_process_accordion.tsx
@@ -73,7 +73,7 @@ export const SourceProcessAccordion = memo(({ alertData }: { alertData: Immutabl
             defaultMessage: 'MalwareScore',
           }
         ),
-        description: alertData.process.malware_classification?.score || '-',
+        description: alertData.process.Ext.malware_classification?.score || '-',
       },
       {
         title: i18n.translate(
@@ -91,7 +91,7 @@ export const SourceProcessAccordion = memo(({ alertData }: { alertData: Immutabl
             defaultMessage: 'Signer',
           }
         ),
-        description: alertData.process.code_signature.subject_name,
+        description: alertData.process.Ext.code_signature[0].subject_name,
       },
       {
         title: i18n.translate(
@@ -100,7 +100,7 @@ export const SourceProcessAccordion = memo(({ alertData }: { alertData: Immutabl
             defaultMessage: 'Username',
           }
         ),
-        description: alertData.process.token.user,
+        description: alertData.process.Ext.token.user,
       },
       {
         title: i18n.translate(
@@ -109,7 +109,7 @@ export const SourceProcessAccordion = memo(({ alertData }: { alertData: Immutabl
             defaultMessage: 'Domain',
           }
         ),
-        description: alertData.process.token.domain,
+        description: alertData.process.Ext.token.domain,
       },
     ];
   }, [alertData]);
diff --git a/x-pack/plugins/security_solution/public/endpoint_alerts/view/details/metadata/source_process_token_accordion.tsx b/x-pack/plugins/security_solution/public/endpoint_alerts/view/details/metadata/source_process_token_accordion.tsx
index 4f77115066ff7..1caa37eb420ac 100644
--- a/x-pack/plugins/security_solution/public/endpoint_alerts/view/details/metadata/source_process_token_accordion.tsx
+++ b/x-pack/plugins/security_solution/public/endpoint_alerts/view/details/metadata/source_process_token_accordion.tsx
@@ -20,7 +20,7 @@ export const SourceProcessTokenAccordion = memo(
               defaultMessage: 'SID',
             }
           ),
-          description: alertData.process.token.sid,
+          description: alertData.process.Ext.token.sid,
         },
         {
           title: i18n.translate(
@@ -29,7 +29,7 @@ export const SourceProcessTokenAccordion = memo(
               defaultMessage: 'Integrity Level',
             }
           ),
-          description: alertData.process.token.integrity_level,
+          description: alertData.process.Ext.token.integrity_level,
         },
       ];
     }, [alertData]);
diff --git a/x-pack/plugins/security_solution/public/endpoint_alerts/view/index.tsx b/x-pack/plugins/security_solution/public/endpoint_alerts/view/index.tsx
index 6ad0d5ec94219..4234337148def 100644
--- a/x-pack/plugins/security_solution/public/endpoint_alerts/view/index.tsx
+++ b/x-pack/plugins/security_solution/public/endpoint_alerts/view/index.tsx
@@ -204,7 +204,7 @@ export const AlertIndex = memo(() => {
       } else if (columnId === 'archived') {
         return null;
       } else if (columnId === 'malware_score') {
-        return row.file.malware_classification.score;
+        return row.file.Ext.malware_classification.score;
       }
       return null;
     },
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts
index 5e7cbc0ef58d3..20365b3fe100b 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts
@@ -41,7 +41,7 @@ export const detailsError = (state: Immutable<HostState>) => state.detailsError;
  * Returns the full policy response from the endpoint after a user modifies a policy.
  */
 const detailsPolicyAppliedResponse = (state: Immutable<HostState>) =>
-  state.policyResponse && state.policyResponse.endpoint.policy.applied;
+  state.policyResponse && state.policyResponse.Endpoint.policy.applied;
 
 /**
  * Returns the response configurations from the endpoint after a user modifies a policy.
@@ -179,6 +179,6 @@ export const showView: (state: HostState) => 'policy_response' | 'details' = cre
 export const policyResponseStatus: (state: Immutable<HostState>) => string = createSelector(
   (state) => state.policyResponse,
   (policyResponse) => {
-    return (policyResponse && policyResponse?.endpoint?.policy?.applied?.status) || '';
+    return (policyResponse && policyResponse?.Endpoint?.policy?.applied?.status) || '';
   }
 );
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/host_details.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/host_details.tsx
index 9ec65a5d17898..f31b54b93851f 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/host_details.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/host_details.tsx
@@ -97,15 +97,15 @@ export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
     return [
       getManagementUrl({
         name: 'policyDetails',
-        policyId: details.endpoint.policy.applied.id,
+        policyId: details.Endpoint.policy.applied.id,
         excludePrefix: true,
       }),
       getManagementUrl({
         name: 'policyDetails',
-        policyId: details.endpoint.policy.applied.id,
+        policyId: details.Endpoint.policy.applied.id,
       }),
     ];
-  }, [details.endpoint.policy.applied.id]);
+  }, [details.Endpoint.policy.applied.id]);
 
   const policyDetailsClickHandler = useNavigateByRouterEventHandler(policyDetailsRoutePath);
 
@@ -123,7 +123,7 @@ export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
               href={policyDetailsRouteUrl}
               onClick={policyDetailsClickHandler}
             >
-              {details.endpoint.policy.applied.name}
+              {details.Endpoint.policy.applied.name}
             </EuiLink>
           </>
         ),
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
index e0f797b143055..af027c2e106c3 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
@@ -50,13 +50,13 @@ describe('when on the hosts page', () => {
     });
     describe('when list data loads', () => {
       const generatedPolicyStatuses: Array<
-        HostInfo['metadata']['endpoint']['policy']['applied']['status']
+        HostInfo['metadata']['Endpoint']['policy']['applied']['status']
       > = [];
       let firstPolicyID: string;
       beforeEach(() => {
         reactTestingLibrary.act(() => {
           const hostListData = mockHostResultList({ total: 3 });
-          firstPolicyID = hostListData.hosts[0].metadata.endpoint.policy.applied.id;
+          firstPolicyID = hostListData.hosts[0].metadata.Endpoint.policy.applied.id;
           [HostStatus.ERROR, HostStatus.ONLINE, HostStatus.OFFLINE].forEach((status, index) => {
             hostListData.hosts[index] = {
               metadata: hostListData.hosts[index].metadata,
@@ -64,7 +64,7 @@ describe('when on the hosts page', () => {
             };
           });
           hostListData.hosts.forEach((item, index) => {
-            generatedPolicyStatuses[index] = item.metadata.endpoint.policy.applied.status;
+            generatedPolicyStatuses[index] = item.metadata.Endpoint.policy.applied.status;
           });
           const action: AppAction = {
             type: 'serverReturnedHostList',
@@ -160,9 +160,11 @@ describe('when on the hosts page', () => {
       overallStatus: HostPolicyResponseActionStatus = HostPolicyResponseActionStatus.success
     ) => {
       const policyResponse = docGenerator.generatePolicyResponse();
-      policyResponse.endpoint.policy.applied.status = overallStatus;
-      policyResponse.endpoint.policy.applied.response.configurations.malware.status = overallStatus;
-      let downloadModelAction = policyResponse.endpoint.policy.applied.actions.find(
+      const malwareResponseConfigurations =
+        policyResponse.Endpoint.policy.applied.response.configurations.malware;
+      policyResponse.Endpoint.policy.applied.status = overallStatus;
+      malwareResponseConfigurations.status = overallStatus;
+      let downloadModelAction = policyResponse.Endpoint.policy.applied.actions.find(
         (action) => action.name === 'download_model'
       );
 
@@ -172,19 +174,30 @@ describe('when on the hosts page', () => {
           message: 'Failed to apply a portion of the configuration (kernel)',
           status: overallStatus,
         };
-        policyResponse.endpoint.policy.applied.actions.push(downloadModelAction);
+        policyResponse.Endpoint.policy.applied.actions.push(downloadModelAction);
       }
+
       if (
         overallStatus === HostPolicyResponseActionStatus.failure ||
         overallStatus === HostPolicyResponseActionStatus.warning
       ) {
         downloadModelAction.message = 'no action taken';
       }
-      store.dispatch({
-        type: 'serverReturnedHostPolicyResponse',
-        payload: {
-          policy_response: policyResponse,
-        },
+
+      // Make sure that at least one configuration has the above action, else
+      // we get into an out-of-sync condition
+      if (
+        malwareResponseConfigurations.concerned_actions.indexOf(downloadModelAction.name) === -1
+      ) {
+        malwareResponseConfigurations.concerned_actions.push(downloadModelAction.name);
+      }
+      reactTestingLibrary.act(() => {
+        store.dispatch({
+          type: 'serverReturnedHostPolicyResponse',
+          payload: {
+            policy_response: policyResponse,
+          },
+        });
       });
     };
 
@@ -236,7 +249,7 @@ describe('when on the hosts page', () => {
       const policyDetailsLink = await renderResult.findByTestId('policyDetailsValue');
       expect(policyDetailsLink).not.toBeNull();
       expect(policyDetailsLink.getAttribute('href')).toEqual(
-        `#/management/policy/${hostDetails.metadata.endpoint.policy.applied.id}`
+        `#/management/policy/${hostDetails.metadata.Endpoint.policy.applied.id}`
       );
     });
 
@@ -252,7 +265,7 @@ describe('when on the hosts page', () => {
       });
       const changedUrlAction = await userChangedUrlChecker;
       expect(changedUrlAction.payload.pathname).toEqual(
-        `/management/policy/${hostDetails.metadata.endpoint.policy.applied.id}`
+        `/management/policy/${hostDetails.metadata.Endpoint.policy.applied.id}`
       );
     });
 
@@ -361,6 +374,12 @@ describe('when on the hosts page', () => {
     describe('when showing host Policy Response panel', () => {
       let renderResult: ReturnType<typeof render>;
       beforeEach(async () => {
+        coreStart.http.post.mockImplementation(async (requestOptions) => {
+          if (requestOptions.path === '/api/endpoint/metadata') {
+            return mockHostResultList({ total: 0 });
+          }
+          throw new Error(`POST to '${requestOptions.path}' does not have a mock response!`);
+        });
         renderResult = render();
         const policyStatusLink = await renderResult.findByTestId('policyStatusValue');
         const userChangedUrlChecker = middlewareSpy.waitForAction('userChangedUrl');
@@ -373,6 +392,8 @@ describe('when on the hosts page', () => {
         });
       });
 
+      afterEach(reactTestingLibrary.cleanup);
+
       it('should hide the host details panel', async () => {
         const hostDetailsFlyout = await renderResult.queryByTestId('hostDetailsFlyoutBody');
         expect(hostDetailsFlyout).toBeNull();
@@ -433,21 +454,29 @@ describe('when on the hosts page', () => {
           });
       });
 
-      it('should show a numbered badge if at least one action failed', () => {
+      it('should show a numbered badge if at least one action failed', async () => {
+        const policyResponseActionDispatched = middlewareSpy.waitForAction(
+          'serverReturnedHostPolicyResponse'
+        );
         reactTestingLibrary.act(() => {
           dispatchServerReturnedHostPolicyResponse(HostPolicyResponseActionStatus.failure);
         });
-        const attentionBadge = renderResult.findAllByTestId(
+        await policyResponseActionDispatched;
+        const attentionBadge = await renderResult.findAllByTestId(
           'hostDetailsPolicyResponseAttentionBadge'
         );
         expect(attentionBadge).not.toBeNull();
       });
 
-      it('should show a numbered badge if at least one action has a warning', () => {
+      it('should show a numbered badge if at least one action has a warning', async () => {
+        const policyResponseActionDispatched = middlewareSpy.waitForAction(
+          'serverReturnedHostPolicyResponse'
+        );
         reactTestingLibrary.act(() => {
           dispatchServerReturnedHostPolicyResponse(HostPolicyResponseActionStatus.warning);
         });
-        const attentionBadge = renderResult.findAllByTestId(
+        await policyResponseActionDispatched;
+        const attentionBadge = await renderResult.findAllByTestId(
           'hostDetailsPolicyResponseAttentionBadge'
         );
         expect(attentionBadge).not.toBeNull();
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
index c67c29fbc73a9..149819480855b 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
@@ -154,13 +154,13 @@ export const HostList = () => {
         },
       },
       {
-        field: 'metadata.endpoint.policy.applied',
+        field: 'metadata.Endpoint.policy.applied',
         name: i18n.translate('xpack.securitySolution.endpointList.policy', {
           defaultMessage: 'Policy',
         }),
         truncateText: true,
         // eslint-disable-next-line react/display-name
-        render: (policy: HostInfo['metadata']['endpoint']['policy']['applied']) => {
+        render: (policy: HostInfo['metadata']['Endpoint']['policy']['applied']) => {
           const toRoutePath = getManagementUrl({
             name: 'policyDetails',
             policyId: policy.id,
@@ -181,12 +181,12 @@ export const HostList = () => {
         },
       },
       {
-        field: 'metadata.endpoint.policy.applied',
+        field: 'metadata.Endpoint.policy.applied',
         name: i18n.translate('xpack.securitySolution.endpointList.policyStatus', {
           defaultMessage: 'Policy Status',
         }),
         // eslint-disable-next-line react/display-name
-        render: (policy: HostInfo['metadata']['endpoint']['policy']['applied'], item: HostInfo) => {
+        render: (policy: HostInfo['metadata']['Endpoint']['policy']['applied'], item: HostInfo) => {
           const toRoutePath = getManagementUrl({
             name: 'endpointPolicyResponse',
             selected_host: item.metadata.host.id,
diff --git a/x-pack/plugins/security_solution/scripts/endpoint/resolver_generator.ts b/x-pack/plugins/security_solution/scripts/endpoint/resolver_generator.ts
index e4460b337960f..542991a927f7a 100644
--- a/x-pack/plugins/security_solution/scripts/endpoint/resolver_generator.ts
+++ b/x-pack/plugins/security_solution/scripts/endpoint/resolver_generator.ts
@@ -8,10 +8,9 @@ import * as path from 'path';
 import yargs from 'yargs';
 import * as url from 'url';
 import fetch from 'node-fetch';
-import seedrandom from 'seedrandom';
 import { Client, ClientOptions } from '@elastic/elasticsearch';
 import { ResponseError } from '@elastic/elasticsearch/lib/errors';
-import { EndpointDocGenerator, Event } from '../../common/endpoint/generate_data';
+import { indexHostsAndAlerts } from '../../common/endpoint/index_data';
 
 main();
 
@@ -201,59 +200,26 @@ async function main() {
     seed = Math.random().toString();
     console.log(`No seed supplied, using random seed: ${seed}`);
   }
-  const random = seedrandom(seed);
   const startTime = new Date().getTime();
-  for (let i = 0; i < argv.numHosts; i++) {
-    const generator = new EndpointDocGenerator(random);
-    const timeBetweenDocs = 6 * 3600 * 1000; // 6 hours between metadata documents
-
-    const timestamp = new Date().getTime();
-    for (let j = 0; j < argv.numDocs; j++) {
-      generator.updateHostData();
-      generator.updatePolicyId();
-      await client.index({
-        index: argv.metadataIndex,
-        body: generator.generateHostMetadata(timestamp - timeBetweenDocs * (argv.numDocs - j - 1)),
-        op_type: 'create',
-      });
-      await client.index({
-        index: argv.policyIndex,
-        body: generator.generatePolicyResponse(
-          timestamp - timeBetweenDocs * (argv.numDocs - j - 1)
-        ),
-        op_type: 'create',
-      });
+  await indexHostsAndAlerts(
+    client,
+    seed,
+    argv.numHosts,
+    argv.numDocs,
+    argv.metadataIndex,
+    argv.policyIndex,
+    argv.eventIndex,
+    argv.alertsPerHost,
+    {
+      ancestors: argv.ancestors,
+      generations: argv.generations,
+      children: argv.children,
+      relatedEvents: argv.relatedEvents,
+      relatedAlerts: argv.relatedAlerts,
+      percentWithRelated: argv.percentWithRelated,
+      percentTerminated: argv.percentTerminated,
+      alwaysGenMaxChildrenPerNode: argv.maxChildrenPerNode,
     }
-
-    const alertGenerator = generator.alertsGenerator(
-      argv.alertsPerHost,
-      argv.ancestors,
-      argv.generations,
-      argv.children,
-      argv.relatedEvents,
-      argv.relatedAlerts,
-      argv.percentWithRelated,
-      argv.percentTerminated,
-      argv.maxChildrenPerNode
-    );
-    let result = alertGenerator.next();
-    while (!result.done) {
-      let k = 0;
-      const resolverDocs: Event[] = [];
-      while (k < 1000 && !result.done) {
-        resolverDocs.push(result.value);
-        result = alertGenerator.next();
-        k++;
-      }
-      const body = resolverDocs.reduce(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (array: Array<Record<string, any>>, doc) => (
-          array.push({ create: { _index: argv.eventIndex } }, doc), array
-        ),
-        []
-      );
-      await client.bulk({ body, refresh: 'true' });
-    }
-  }
+  );
   console.log(`Creating and indexing documents took: ${new Date().getTime() - startTime}ms`);
 }
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 80626bbdb6e7f..92835dc5329ce 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
@@ -237,7 +237,7 @@ describe('test endpoint route', () => {
       expect(routeConfig.options).toEqual({ authRequired: true });
       expect(mockResponse.ok).toBeCalled();
       const result = mockResponse.ok.mock.calls[0][0]?.body as HostInfo;
-      expect(result).toHaveProperty('metadata.endpoint');
+      expect(result).toHaveProperty('metadata.Endpoint');
       expect(result.host_status).toEqual(HostStatus.ONLINE);
     });
 
diff --git a/x-pack/test/api_integration/apis/endpoint/alerts/index.ts b/x-pack/test/api_integration/apis/endpoint/alerts/index.ts
index 12c5857f9db39..ed287834761d8 100644
--- a/x-pack/test/api_integration/apis/endpoint/alerts/index.ts
+++ b/x-pack/test/api_integration/apis/endpoint/alerts/index.ts
@@ -7,12 +7,19 @@ import expect from '@kbn/expect/expect.js';
 import { FtrProviderContext } from '../../../ftr_provider_context';
 import { AlertData } from '../../../../../plugins/security_solution/common/endpoint_alerts/types';
 import { eventsIndexPattern } from '../../../../../plugins/security_solution/common/endpoint/constants';
-import { deleteEventsStream, deleteMetadataStream } from '../data_stream_helper';
+import {
+  deleteEventsStream,
+  deleteMetadataStream,
+  deletePolicyStream,
+} from '../data_stream_helper';
+import { indexHostsAndAlerts } from '../../../../../plugins/security_solution/common/endpoint/index_data';
 
 /**
  * The number of alert documents in the es archive.
  */
-const numberOfAlertsInFixture = 12;
+const numberOfHosts = 3;
+const numberOfAlertsPerHost = 4;
+const numberOfAlertsInFixture = numberOfHosts * numberOfAlertsPerHost;
 
 /**
  * The default number of entries returned when no page_size is specified.
@@ -57,10 +64,9 @@ const ES_QUERY_MISSING = {
 };
 
 export default function ({ getService }: FtrProviderContext) {
-  const esArchiver = getService('esArchiver');
   const supertest = getService('supertest');
   const es = getService('legacyEs');
-
+  const client = getService('es');
   const nextPrevPrefixQuery = "query=(language:kuery,query:'')";
   const nextPrevPrefixDateRange = "date_range=(from:'2018-01-10T00:00:00.000Z',to:now)";
   const nextPrevPrefixSort = 'sort=@timestamp';
@@ -73,8 +79,17 @@ export default function ({ getService }: FtrProviderContext) {
   describe('Endpoint alert API', () => {
     describe('when data is in elasticsearch', () => {
       before(async () => {
-        await esArchiver.load('endpoint/alerts/api_feature', { useCreate: true });
-        await esArchiver.load('endpoint/alerts/host_api_feature', { useCreate: true });
+        await indexHostsAndAlerts(
+          client,
+          'alerts-seed',
+          numberOfHosts,
+          1,
+          'metrics-endpoint.metadata-default-1',
+          'metrics-endpoint.policy-default-1',
+          'events-endpoint-1',
+          numberOfAlertsPerHost
+        );
+
         const res = await es.search({
           index: eventsIndexPattern,
           body: ES_QUERY_MISSING,
@@ -85,7 +100,11 @@ export default function ({ getService }: FtrProviderContext) {
       after(async () => {
         // the endpoint uses data streams and es archiver does not support deleting them at the moment so we need
         // to do it manually
-        await Promise.all([deleteEventsStream(getService), deleteMetadataStream(getService)]);
+        await Promise.all([
+          deleteEventsStream(getService),
+          deleteMetadataStream(getService),
+          deletePolicyStream(getService),
+        ]);
       });
 
       it('should not support POST requests', async () => {
@@ -159,7 +178,7 @@ export default function ({ getService }: FtrProviderContext) {
         expect(body.message).to.contain('Value must be equal to or greater than [1]');
       });
 
-      it('should return links to the next and previous pages using cursor-based pagination', async () => {
+      it('should return working link to the next page using cursor-based pagination', async () => {
         const { body } = await supertest
           .get('/api/endpoint/alerts?page_index=0')
           .set('kbn-xsrf', 'xxx')
@@ -170,51 +189,75 @@ export default function ({ getService }: FtrProviderContext) {
         expect(body.next).to.eql(
           `/api/endpoint/alerts?${nextPrevPrefix}&after=${lastTimestampFirstPage}&after=${lastEventIdFirstPage}`
         );
-      });
 
-      it('should return data using `next` link', async () => {
-        const { body } = await supertest
-          .get(
-            `/api/endpoint/alerts?${nextPrevPrefix}&after=1584044338719&after=66008e21-2493-4b15-a937-939ea228064a`
-          )
+        const { body: nextBody } = await supertest
+          .get(body.next)
           .set('kbn-xsrf', 'xxx')
           .expect(200);
-        expect(body.alerts.length).to.eql(defaultPageSize);
-        const firstTimestampNextPage = body.alerts[0]['@timestamp'];
-        const firstEventIdNextPage = body.alerts[0].event.id;
-        expect(body.prev).to.eql(
+        expect(nextBody.alerts.length).to.eql(2);
+        const firstTimestampNextPage = nextBody.alerts[0]['@timestamp'];
+        const firstEventIdNextPage = nextBody.alerts[0].event.id;
+        expect(nextBody.prev).to.eql(
           `/api/endpoint/alerts?${nextPrevPrefix}&before=${firstTimestampNextPage}&before=${firstEventIdNextPage}`
         );
       });
 
-      it('should return data using `prev` link', async () => {
+      it('should return working link to the prev page using cursor-based pagination', async () => {
         const { body } = await supertest
-          .get(
-            `/api/endpoint/alerts?${nextPrevPrefix}&before=1542789412000&before=823d814d-fa0c-4e53-a94c-f6b296bb965b`
-          )
+          .get('/api/endpoint/alerts?page_index=1')
           .set('kbn-xsrf', 'xxx')
           .expect(200);
-        expect(body.alerts.length).to.eql(10);
+        expect(body.alerts.length).to.eql(2);
+        const firstTimestamp = body.alerts[0]['@timestamp'];
+        const firstEventId = body.alerts[0].event.id;
+        expect(body.prev).to.eql(
+          `/api/endpoint/alerts?${nextPrevPrefix}&before=${firstTimestamp}&before=${firstEventId}`
+        );
+
+        const { body: prevBody } = await supertest
+          .get(body.prev)
+          .set('kbn-xsrf', 'xxx')
+          .expect(200);
+        expect(prevBody.alerts.length).to.eql(10);
+        const lastTimestampFirstPage = prevBody.alerts[9]['@timestamp'];
+        const lastEventIdFirstPage = prevBody.alerts[9].event.id;
+        expect(prevBody.next).to.eql(
+          `/api/endpoint/alerts?${nextPrevPrefix}&after=${lastTimestampFirstPage}&after=${lastEventIdFirstPage}`
+        );
       });
 
       it('should return no results when `before` is requested past beginning of first page', async () => {
         const { body } = await supertest
+          .get('/api/endpoint/alerts')
+          .set('kbn-xsrf', 'xxx')
+          .expect(200);
+
+        const { body: emptyBody } = await supertest
           .get(
-            `/api/endpoint/alerts?${nextPrevPrefix}&before=1584044338726&before=5ff1a4ec-758e-49e7-89aa-2c6821fe6b54`
+            `/api/endpoint/alerts?${nextPrevPrefix}&before=${
+              body.alerts[0]['@timestamp'] + 1
+            }&before=5ff1a4ec-758e-49e7-89aa-2c6821fe6b54`
           )
           .set('kbn-xsrf', 'xxx')
           .expect(200);
-        expect(body.alerts.length).to.eql(0);
+        expect(emptyBody.alerts.length).to.eql(0);
       });
 
       it('should return no results when `after` is requested past end of last page, descending', async () => {
         const { body } = await supertest
+          .get('/api/endpoint/alerts?page_index=1')
+          .set('kbn-xsrf', 'xxx')
+          .expect(200);
+
+        const { body: emptyBody } = await supertest
           .get(
-            `/api/endpoint/alerts?${nextPrevPrefix}&after=1584044338612&after=6d75d498-3cca-45ad-a304-525b95ae0412`
+            `/api/endpoint/alerts?${nextPrevPrefix}&after=${
+              body.alerts[1]['@timestamp'] - 1
+            }&after=6d75d498-3cca-45ad-a304-525b95ae0412`
           )
           .set('kbn-xsrf', 'xxx')
           .expect(200);
-        expect(body.alerts.length).to.eql(0);
+        expect(emptyBody.alerts.length).to.eql(0);
       });
 
       it('alerts api should return data using `before` by custom sort parameter, descending', async () => {
@@ -346,7 +389,12 @@ export default function ({ getService }: FtrProviderContext) {
       });
 
       it('should filter results of alert data using rison-encoded filters', async () => {
-        const hostname = 'Host-abmfhmc5ku';
+        const { body: firstBody } = await supertest
+          .get('/api/endpoint/alerts?page_index=0')
+          .set('kbn-xsrf', 'xxx')
+          .expect(200);
+
+        const hostname = firstBody.alerts[0].host.hostname;
         const { body } = await supertest
           .get(
             `/api/endpoint/alerts?filters=!((%27%24state%27%3A(store%3AappState)%2Cmeta%3A(alias%3A!n%2Cdisabled%3A!f%2Ckey%3Ahost.hostname%2Cnegate%3A!f%2Cparams%3A(query%3A${hostname})%2Ctype%3Aphrase)%2Cquery%3A(match_phrase%3A(host.hostname%3A${hostname}))))`
@@ -361,7 +409,12 @@ export default function ({ getService }: FtrProviderContext) {
       });
 
       it('should filter results of alert data using KQL', async () => {
-        const agentID = '7cf9f7a3-28a6-4d1e-bb45-005aa28f18d0';
+        const { body: firstBody } = await supertest
+          .get('/api/endpoint/alerts?page_index=0')
+          .set('kbn-xsrf', 'xxx')
+          .expect(200);
+
+        const agentID = firstBody.alerts[0].agent.id;
         const { body } = await supertest
           .get(
             `/api/endpoint/alerts?query=(language%3Akuery%2Cquery%3A%27agent.id%20%3A%20"${agentID}"%27)`
diff --git a/x-pack/test/api_integration/apis/endpoint/metadata.ts b/x-pack/test/api_integration/apis/endpoint/metadata.ts
index 61f294cbd6f9c..41531269ddeb9 100644
--- a/x-pack/test/api_integration/apis/endpoint/metadata.ts
+++ b/x-pack/test/api_integration/apis/endpoint/metadata.ts
@@ -160,18 +160,18 @@ export default function ({ getService }: FtrProviderContext) {
         expect(body.request_page_index).to.eql(0);
       });
 
-      it('metadata api should return page based on host.os.variant filter.', async () => {
+      it('metadata api should return page based on host.os.Ext.variant filter.', async () => {
         const variantValue = 'Windows Pro';
         const { body } = await supertest
           .post('/api/endpoint/metadata')
           .set('kbn-xsrf', 'xxx')
           .send({
-            filter: `host.os.variant:${variantValue}`,
+            filter: `host.os.Ext.variant:${variantValue}`,
           })
           .expect(200);
         expect(body.total).to.eql(2);
         const resultOsVariantValue: Set<string> = new Set(
-          body.hosts.map((hostInfo: Record<string, any>) => hostInfo.metadata.host.os.variant)
+          body.hosts.map((hostInfo: Record<string, any>) => hostInfo.metadata.host.os.Ext.variant)
         );
         expect(Array.from(resultOsVariantValue)).to.eql([variantValue]);
         expect(body.hosts.length).to.eql(2);
@@ -204,15 +204,14 @@ export default function ({ getService }: FtrProviderContext) {
           .post('/api/endpoint/metadata')
           .set('kbn-xsrf', 'xxx')
           .send({
-            filter: `not endpoint.policy.applied.status:success`,
+            filter: `not Endpoint.policy.applied.status:success`,
           })
           .expect(200);
         const statuses: Set<string> = new Set(
           body.hosts.map(
-            (hostInfo: Record<string, any>) => hostInfo.metadata.endpoint.policy.applied.status
+            (hostInfo: Record<string, any>) => hostInfo.metadata.Endpoint.policy.applied.status
           )
         );
-
         expect(statuses.size).to.eql(1);
         expect(Array.from(statuses)).to.eql(['failure']);
       });
diff --git a/x-pack/test/api_integration/apis/endpoint/policy.ts b/x-pack/test/api_integration/apis/endpoint/policy.ts
index 711762cc20abb..e33423d172567 100644
--- a/x-pack/test/api_integration/apis/endpoint/policy.ts
+++ b/x-pack/test/api_integration/apis/endpoint/policy.ts
@@ -27,7 +27,7 @@ export default function ({ getService }: FtrProviderContext) {
           .expect(200);
 
         expect(body.policy_response.host.id).to.eql(expectedHostId);
-        expect(body.policy_response.endpoint.policy).to.not.be(undefined);
+        expect(body.policy_response.Endpoint.policy).to.not.be(undefined);
       });
 
       it('should return not found if host has no policy response', async () => {
diff --git a/x-pack/test/functional/es_archives/endpoint/metadata/api_feature/data.json b/x-pack/test/functional/es_archives/endpoint/metadata/api_feature/data.json
index a8d868ebbec15..1434aae60c967 100644
--- a/x-pack/test/functional/es_archives/endpoint/metadata/api_feature/data.json
+++ b/x-pack/test/functional/es_archives/endpoint/metadata/api_feature/data.json
@@ -15,7 +15,7 @@
           "id": "11488bae-880b-4e7b-8d28-aac2aa9de816"
         }
       },
-      "endpoint": {
+      "Endpoint": {
         "policy": {
           "applied": {
             "name": "Default",
@@ -44,7 +44,9 @@
           "full": "Windows 10",
           "name": "windows 10.0",
           "version": "10.0",
-          "variant" : "Windows Pro"
+          "Ext": {
+            "variant" : "Windows Pro"
+          }
         }
       }
     }
@@ -68,7 +70,7 @@
           "id": "92ac1ce0-e1f7-409e-8af6-f17e97b1fc71"
         }
       },
-      "endpoint": {
+      "Endpoint": {
         "policy": {
           "applied": {
             "name": "Default",
@@ -96,7 +98,9 @@
           "full": "Windows Server 2016",
           "name": "windows 10.0",
           "version": "10.0",
-          "variant" : "Windows Server"
+          "Ext": {
+            "variant" : "Windows Server"
+          }
         }
       }
     }
@@ -120,7 +124,7 @@
           "id": "023fa40c-411d-4188-a941-4147bfadd095"
         }
       },
-      "endpoint": {
+      "Endpoint": {
         "policy": {
           "applied": {
             "name": "Default",
@@ -146,7 +150,9 @@
           "full": "Windows 10",
           "name": "windows 10.0",
           "version": "10.0",
-          "variant" : "Windows Pro"
+          "Ext": {
+            "variant" : "Windows Pro"
+          }
         }
       }
     }
@@ -170,7 +176,7 @@
           "id": "11488bae-880b-4e7b-8d28-aac2aa9de816"
         }
       },
-      "endpoint": {
+      "Endpoint": {
         "policy": {
           "applied": {
             "name": "Default",
@@ -199,7 +205,9 @@
           "full": "Windows Server 2016",
           "name": "windows 10.0",
           "version": "10.0",
-          "variant" : "Windows Server 2016"
+          "Ext": {
+            "variant" : "Windows Server 2016"
+          }
         }
       }
     }
@@ -223,7 +231,7 @@
           "id": "92ac1ce0-e1f7-409e-8af6-f17e97b1fc71"
         }
       },
-      "endpoint": {
+      "Endpoint": {
         "policy": {
           "applied": {
             "name": "Default",
@@ -250,7 +258,9 @@
           "full": "Windows Server 2012",
           "name": "windows 6.2",
           "version": "6.2",
-          "variant" : "Windows Server 2012"
+          "Ext": {
+            "variant" : "Windows Server 2012"
+          }
         }
       }
     }
@@ -274,7 +284,7 @@
           "id": "023fa40c-411d-4188-a941-4147bfadd095"
         }
       },
-      "endpoint": {
+      "Endpoint": {
         "policy": {
           "applied": {
             "name": "With Eventing",
@@ -301,7 +311,9 @@
           "full": "Windows Server 2012",
           "name": "windows 6.2",
           "version": "6.2",
-          "variant" : "Windows Server 2012"
+          "Ext": {
+            "variant" : "Windows Server 2012"
+          }
         }
       }
     }
@@ -325,7 +337,7 @@
           "id": "11488bae-880b-4e7b-8d28-aac2aa9de816"
         }
       },
-      "endpoint": {
+      "Endpoint": {
         "policy": {
           "applied": {
             "name": "With Eventing",
@@ -353,7 +365,9 @@
           "full": "Windows Server 2012R2",
           "name": "windows 6.3",
           "version": "6.3",
-          "variant" : "Windows Server 2012 R2"
+          "Ext": {
+            "variant" : "Windows Server 2012 R2"
+          }
         }
       }
     }
@@ -377,7 +391,7 @@
           "id": "92ac1ce0-e1f7-409e-8af6-f17e97b1fc71"
         }
       },
-      "endpoint": {
+      "Endpoint": {
         "policy": {
           "applied": {
             "name": "Default",
@@ -404,7 +418,9 @@
           "full": "Windows Server 2012R2",
           "name": "windows 6.3",
           "version": "6.3",
-          "variant" : "Windows Server 2012 R2"
+          "Ext": {
+            "variant" : "Windows Server 2012 R2"
+          }
         }
       }
     }
@@ -428,7 +444,7 @@
           "id": "023fa40c-411d-4188-a941-4147bfadd095"
         }
       },
-      "endpoint": {
+      "Endpoint": {
         "policy": {
           "applied": {
             "name": "With Eventing",
@@ -455,7 +471,9 @@
           "full": "Windows Server 2012",
           "name": "windows 6.2",
           "version": "6.2",
-          "variant" : "Windows Server 2012"
+          "Ext": {
+            "variant" : "Windows Server 2012"
+          }
         }
       }
     }
diff --git a/x-pack/test/functional/es_archives/endpoint/policy/data.json.gz b/x-pack/test/functional/es_archives/endpoint/policy/data.json.gz
index f380785f021bbfa49f17206df174a6a44c9d69df..d9fcf03f43f37d02e93a8c20bf8a1ba3d33ee9ce 100644
GIT binary patch
delta 1297
zcmV+s1@8K;3a<(WABzYGXDsTG2Qhyv3X&Xec9HL1QZMTn+kw2@gDyc#%?y7W4qyLo
zHvlZM=a?;i0t+h0;#M_0;c%~7zR4f*C#UM`hx^a5Zmxg*`}y~ePre=g_VM#WZmujM
z%DyP09m^6<Qph423m#?5ScIHBL&^fY4>PD&9;w(T<k*L7`6c5!mS%Vt%T|Bga$ST>
zN3%`SzO78~mPJ{^r)I;thKX&t5Su=MNd6B!gfO&S>iJYB7Pi>p_UQG*l9Y=`x#~-8
zsliYX94-yb&@`mmOKnlwzSMm)lD2zp#Xy5DAx<+++HU<Z)T1Ci^|5ZdQ1_?{QQ#5i
zGS7jIVHl3)G1qp3MeX*|>u-NuCcWKZF$3KmaU6%7(N44aKr%V1wD&=NA|eX-cAv0K
zIkJ@Dggk6yd&F|L0WYA6B2DG6)eu{bfQa2L1$9^o(mf&4IM|2bb7Q{hNU}V#y<%IG
zmWz(fOV_CZ{m7Dtg(ng3F%Kn5CXQgBbbXa5kbctk5~5ISw>;XOMEZZDk(Oq<D*vf7
zwZq{7C+sBGr-*%t<;+VImLwvn*(4OGf=re)Rb%H)Vk=`j;u*&w|0+3m@<+hKj3pCg
zjj~K}$(U>-Vis-KlU(3K>*p21G!t<w=~NV;qJTUKNLVbAY`Q6K!X6Tyv2$sUi$b9m
zoOyujg7Tg0UoI0&FHe7~$|_D&ZRSycigI1rI1$SJjTKO^mNBjcDh^Se&21=r9ByQv
zJdiv7B?VB$0PDZjU?=FQeerU*BIx-<>MVN(805JU5fA~$9$38@;k@x(v2(ni2v*LC
zysVT{y(zl-!IAUao=Ms~h(U~#RART_rerEliZkbZou4$6r7VBRH+6N^)TQ_{hy;+=
zS5B+*r)ZaFfTRm$_9p^QnA(%N*PwG!+gkQ23|MzAMboFbpuMP8`<R9Q_4tZvzl^Ve
zSGZpfue@xX%NKAKQt+<yT2kikw@;iM-pdNjKp^&!JeZ;qcS_D`HNAPBtA$gXYFA0<
zK_rhsC=Nf?j@f_u-GMHjXm`fS(>!wx*M{psbf>N0YK0JV?@VKbbacORR-Mk}tfaAg
zQ4L+E7cKmeQ}~tZL=l0gLDS9g<@V2jVdntoC#c19d;<*F{X68`$glK^)Sabg)hmP?
zYWxj!+3-g1j3Z+mID1AcN3YG-PR?r&u{R~BKZNfv<dJ_z-tdsqOm0HEX)2;$%_qx#
z^rc_fHD95VPX9%_QGYY*7&O!=4`E#+%!8gz42W#chpu5VXfVy8f$1RMcDn8n-sSu6
zpFDd2Yc=y7=p$ZVhsrCZEkY4FsaY;J4Jvy_A<s7)k6{a9onnX#%Y>L17&;E72pJBw
zsNEFu9(jM1`xPSBrrv6MOb;R*R1Q&K`kt$lL(irVDd7#9h7Ao<qmE;n)RD=lqTN(~
zUv6G*Zd9yuwbQVpoqpYZxUP0;Tjs2t&e~}s(yX1%+UcyFP6In@r?YlCYo~98owd{H
zm}c#C)=p>bbSlnSJDs)D0mIG#FkmsM1U8){I<S8?oU4FcdyvyfoArVi8QMS+-Y~d}
zblZtV%;xLu486Ablsa4IA2B?Y+|kFzr1f*rZqpAqu8nG%>w5-up^piLh%y7ZmhD5w
z4|HrI!|`?PJ8Pp|<?bkPF_TDISIMFVM4DwmOnd_}Q?nQ*w#Nd!Db)Rs+US3b4qP=?
HDgXfh6*Yq!

delta 1295
zcmV+q1@QW>3a$zVABzYG;-lV?2Qhyn3X*JZcH!?{QV(0!Beny1y9Zr@n3@^>X88Vp
zy8~dBza(t-6PQs!X7{RLi^Gj-`6hqJpPZ_%A09s^y1D%I@0Z^{Zhbra?c?XC!dzLz
zlzmY~5zA9fGRR_@2p;G2M1-8YK*|EV33I5|9+}vr<k*L7`6cHO%W@ngvQ>Y#To)nJ
z(QMPS?`sphW^vx|Ij~_}!^E~+h)thBB>#sVLKxaE^?a%m3tMb<fAre2G~*&xuKHY?
zYcLc9hjT+SG!5zYT$@$4`$ON1WT!o!#6Z0+A<lA6PTjgW9I_xj^|5ZdQ1_?{QQ#5i
zGS7jIVHl3)G1qp3*}-k!?XQ0-`e}#d2(){|NfL5KTg~bN$z@hq=Y#x2L>%z-CS|KC
zvy9=CJgsDV%nG+2FQ6txmdUhLiYJbMh$zayAuI*ih7f5SY{KxRF<ysAa(d(&#Wt%f
zXDyq3+o=Kl%+i>JXAvJU4<$-2j$oj2eU&JXe$w_DqEM{YJYJtg`lEkQmS(wX|FJ6-
z;c$mjc9!c?%)TUY<RuDAQ;{CnBowHFj8-%?$1WYjlZx?}=NyOptK^L2kAR0cOGm02
zWx3*#G1*EaEMBp#T;P4{=M};%7fB-NR1~11fFcS=St8PWydiGF?oyt!OKFdbLZOzN
zMS$Ca@<{eCmkFlVmsNjN6{l)$7EyqTa$DLY70UjNGoWOxV%!Q;?Bb%D>rnVOT**Fp
zAb0$0CO{nnEdN@9NYHcp;`MN4(94O`S@r@jC~75QAOes-vBPGBi^g~5&hdUESUD#0
zvQiE8s_g0qM=ol6A!+j<1_@3xiG2b$CR24%TsZE_;-sN0V`+b}sjIW*Fcp6Wu>kV=
z%4vQ6l<o2ikaVG}{z%{{Q+rbT8gxl%PnNw31D35z(fDO9X|I~AUCh$|c6{Y*zmBhg
zSGwO0uexkq$`^1JQt+<wnp5U))?3bY@8t~5K_E7<JecANcTCQDHNAP9>xEOEYBwq9
zPNdI4D0V;Aj(LCby9Hf6(H@M2r+MZQE)Ca%=s{b+#R4JdKA6S=>F9CcELxq*QOOed
zqUyU&&ra|MPT^Os6J-RVlBTQU%k7^Y!`1=NEzk+i@eR;p_ivwbqrTEFR(F<;Rc9g;
zP{VJa>(U#%GY;h1bM_2a4qlsYU7Xh*Vs9!=H-+zz^1y#1uRrB1mzz*D&Wz~J=Cjj&
z@TFhdHD95l4*ylVQFk+I88p->4`E#+%!8gz42W#chpu5VXfVy8f$1RMcG~VSj*9*F
zPo6)4r5gDb^bxN|huU^zIwA)(FXX0PW$!5D`G(^$Y(cD343S}(5EBDK$H5dK!=V<n
zn?l|*j|+dlQsi14w%QKUlgN6NLll_4=PKpUvnfPMc*CY)L&Mal<Jcy3WO3?fclF=>
z-Tv-Q#ky2G4O`mj*Y$_nYNxhkPTJ|Doi-v(+Uca7PTJ`>u#<K=X{VER`c~LUI~|W{
z(oQGsbka`8;+(Y8NjvQ^Y#jhS7NbgF<4K}Dd&7UF3fQfa98cOjEQo>BdW!Id<gU_f
zM;0-gueS^I+U8U0Vx51$@LX{R9~-02pR0D8Zopw}RMTAFGpGxFOejQ@8PK(CA3A=Z
zV-p#UuWR2~8*M9hM~RD>MAEuS7BwK!EDK`d8<3fr#W1lw7U)f(?tj!q{{wPJ;^$W?
F005q4hvEPL


From 72ec6eeea3f738b388c7e4e6a6d15a2797ae3748 Mon Sep 17 00:00:00 2001
From: patrykkopycinski <patryk.kopycinski@elastic.co>
Date: Thu, 18 Jun 2020 20:31:10 +0200
Subject: [PATCH 39/63] [Security Solution] Add cypress tests for global search
 bar (#68535)

---
 .../cypress/integration/search_bar.spec.ts    | 26 +++++++++++++++
 .../cypress/objects/filter.ts                 | 15 +++++++++
 .../cypress/screens/search_bar.ts             | 32 ++++++++++++++++++
 .../cypress/tasks/search_bar.ts               | 33 +++++++++++++++++++
 4 files changed, 106 insertions(+)
 create mode 100644 x-pack/plugins/security_solution/cypress/integration/search_bar.spec.ts
 create mode 100644 x-pack/plugins/security_solution/cypress/objects/filter.ts
 create mode 100644 x-pack/plugins/security_solution/cypress/screens/search_bar.ts
 create mode 100644 x-pack/plugins/security_solution/cypress/tasks/search_bar.ts

diff --git a/x-pack/plugins/security_solution/cypress/integration/search_bar.spec.ts b/x-pack/plugins/security_solution/cypress/integration/search_bar.spec.ts
new file mode 100644
index 0000000000000..103d4d45b3a09
--- /dev/null
+++ b/x-pack/plugins/security_solution/cypress/integration/search_bar.spec.ts
@@ -0,0 +1,26 @@
+/*
+ * 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 { loginAndWaitForPage } from '../tasks/login';
+import { openAddFilterPopover, fillAddFilterForm } from '../tasks/search_bar';
+import { GLOBAL_SEARCH_BAR_FILTER_ITEM } from '../screens/search_bar';
+import { hostIpFilter } from '../objects/filter';
+
+import { HOSTS_PAGE } from '../urls/navigation';
+import { waitForAllHostsToBeLoaded } from '../tasks/hosts/all_hosts';
+
+describe('SearchBar', () => {
+  before(() => {
+    loginAndWaitForPage(HOSTS_PAGE);
+    waitForAllHostsToBeLoaded();
+  });
+
+  it('adds correctly a filter to the global search bar', () => {
+    openAddFilterPopover();
+    fillAddFilterForm(hostIpFilter);
+    cy.get(GLOBAL_SEARCH_BAR_FILTER_ITEM(hostIpFilter)).should('be.visible');
+  });
+});
diff --git a/x-pack/plugins/security_solution/cypress/objects/filter.ts b/x-pack/plugins/security_solution/cypress/objects/filter.ts
new file mode 100644
index 0000000000000..7d9fa5c9e7ad4
--- /dev/null
+++ b/x-pack/plugins/security_solution/cypress/objects/filter.ts
@@ -0,0 +1,15 @@
+/*
+ * 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 interface SearchBarFilter {
+  key: string;
+  value: string;
+}
+
+export const hostIpFilter: SearchBarFilter = {
+  key: 'host.ip',
+  value: '1.1.1.1',
+};
diff --git a/x-pack/plugins/security_solution/cypress/screens/search_bar.ts b/x-pack/plugins/security_solution/cypress/screens/search_bar.ts
new file mode 100644
index 0000000000000..35864749a4065
--- /dev/null
+++ b/x-pack/plugins/security_solution/cypress/screens/search_bar.ts
@@ -0,0 +1,32 @@
+/*
+ * 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 { SearchBarFilter } from '../objects/filter';
+
+export const GLOBAL_SEARCH_BAR_ADD_FILTER =
+  '[data-test-subj="globalDatePicker"] [data-test-subj="addFilter"]';
+
+export const GLOBAL_SEARCH_BAR_SUBMIT_BUTTON =
+  '[data-test-subj="globalDatePicker"] [data-test-subj="querySubmitButton"]';
+
+export const ADD_FILTER_FORM_FIELD_INPUT =
+  '[data-test-subj="filterFieldSuggestionList"] input[data-test-subj="comboBoxSearchInput"]';
+
+export const ADD_FILTER_FORM_FIELD_OPTION = (value: string) =>
+  `[data-test-subj="comboBoxOptionsList filterFieldSuggestionList-optionsList"] button[title="${value}"] strong`;
+
+export const ADD_FILTER_FORM_OPERATOR_FIELD =
+  '[data-test-subj="filterOperatorList"] input[data-test-subj="comboBoxSearchInput"]';
+
+export const ADD_FILTER_FORM_OPERATOR_OPTION_IS =
+  '[data-test-subj="comboBoxOptionsList filterOperatorList-optionsList"] button[title="is"]';
+
+export const ADD_FILTER_FORM_FILTER_VALUE_INPUT = '[data-test-subj="filterParams"] input';
+
+export const ADD_FILTER_FORM_SAVE_BUTTON = '[data-test-subj="saveFilter"]';
+
+export const GLOBAL_SEARCH_BAR_FILTER_ITEM = ({ key, value }: SearchBarFilter) =>
+  `[data-test-subj="filter filter-enabled filter-key-${key} filter-value-${value} filter-unpinned"]`;
diff --git a/x-pack/plugins/security_solution/cypress/tasks/search_bar.ts b/x-pack/plugins/security_solution/cypress/tasks/search_bar.ts
new file mode 100644
index 0000000000000..01d712460b447
--- /dev/null
+++ b/x-pack/plugins/security_solution/cypress/tasks/search_bar.ts
@@ -0,0 +1,33 @@
+/*
+ * 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 { SearchBarFilter } from '../objects/filter';
+
+import {
+  GLOBAL_SEARCH_BAR_ADD_FILTER,
+  GLOBAL_SEARCH_BAR_SUBMIT_BUTTON,
+  ADD_FILTER_FORM_SAVE_BUTTON,
+  ADD_FILTER_FORM_FIELD_INPUT,
+  ADD_FILTER_FORM_OPERATOR_OPTION_IS,
+  ADD_FILTER_FORM_OPERATOR_FIELD,
+  ADD_FILTER_FORM_FIELD_OPTION,
+  ADD_FILTER_FORM_FILTER_VALUE_INPUT,
+} from '../screens/search_bar';
+
+export const openAddFilterPopover = () => {
+  cy.get(GLOBAL_SEARCH_BAR_SUBMIT_BUTTON).should('be.enabled');
+  cy.get(GLOBAL_SEARCH_BAR_ADD_FILTER).click({ force: true });
+};
+
+export const fillAddFilterForm = ({ key, value }: SearchBarFilter) => {
+  cy.get(ADD_FILTER_FORM_FIELD_INPUT).type(key);
+  cy.get(ADD_FILTER_FORM_FIELD_INPUT).click();
+  cy.get(ADD_FILTER_FORM_FIELD_OPTION(key)).click({ force: true });
+  cy.get(ADD_FILTER_FORM_OPERATOR_FIELD).click();
+  cy.get(ADD_FILTER_FORM_OPERATOR_OPTION_IS).click();
+  cy.get(ADD_FILTER_FORM_FILTER_VALUE_INPUT).type(value);
+  cy.get(ADD_FILTER_FORM_SAVE_BUTTON).click();
+};

From 550b95f17267de67b86233d801bffa6349c13f72 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Thu, 18 Jun 2020 20:32:10 +0200
Subject: [PATCH 40/63] [RUM Dashboard] Initial version resubmit (#69531)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Casper Hübertz <casper@formgeist.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../elasticsearch_fieldnames.test.ts.snap     |  24 +++
 .../apm/common/elasticsearch_fieldnames.ts    |   6 +
 .../plugins/apm/common/projections/errors.ts  |   2 +-
 .../plugins/apm/common/projections/metrics.ts |   2 +-
 .../apm/common/projections/rum_overview.ts    |  46 +++++
 .../apm/common/projections/services.ts        |   2 +-
 .../apm/common/projections/transactions.ts    |   2 +-
 .../plugins/apm/common/projections/typings.ts |   1 +
 .../helpers => common/utils}/range_filter.ts  |   0
 .../apm/e2e/cypress/integration/helpers.ts    |  20 +-
 .../cypress/integration/rum_dashboard.feature |   7 +
 .../apm/e2e/cypress/integration/snapshots.js  |  23 ++-
 .../support/step_definitions/rum_dashboard.ts |  43 ++++
 x-pack/plugins/apm/e2e/ingest-data/replay.js  |   6 +-
 x-pack/plugins/apm/e2e/run-e2e.sh             |   2 +-
 x-pack/plugins/apm/e2e/yarn.lock              |   8 +-
 .../plugins/apm/public/application/index.tsx  |   3 +-
 .../apm/public/components/app/Home/index.tsx  |  24 ++-
 .../app/Main/route_config/index.tsx           |   9 +
 .../app/Main/route_config/route_names.tsx     |   1 +
 .../app/RumDashboard/ChartWrapper/index.tsx   |  63 ++++++
 .../app/RumDashboard/ClientMetrics/index.tsx  |  82 ++++++++
 .../PercentileAnnotations.tsx                 |  60 ++++++
 .../PageLoadDistribution/index.tsx            | 144 +++++++++++++
 .../app/RumDashboard/PageViewsTrend/index.tsx | 111 ++++++++++
 .../app/RumDashboard/RumDashboard.tsx         |  65 ++++++
 .../components/app/RumDashboard/index.tsx     |  40 ++++
 .../app/RumDashboard/translations.ts          |  73 +++++++
 .../app/ServiceDetails/ServiceDetailTabs.tsx  |  16 ++
 .../components/shared/KueryBar/index.tsx      |   4 +-
 .../shared/Links/apm/RumOverviewLink.tsx      |  31 +++
 .../lib/errors/distribution/get_buckets.ts    |   2 +-
 .../apm/server/lib/errors/get_error_group.ts  |   2 +-
 .../apm/server/lib/errors/get_error_rate.ts   |   2 +-
 .../__snapshots__/queries.test.ts.snap        | 194 ++++++++++++++++++
 .../lib/rum_client/get_client_metrics.ts      |  61 ++++++
 .../rum_client/get_page_load_distribution.ts  | 140 +++++++++++++
 .../lib/rum_client/get_page_view_trends.ts    |  57 +++++
 .../apm/server/lib/rum_client/queries.test.ts |  52 +++++
 .../get_service_map_service_node_info.ts      |   2 +-
 .../lib/service_map/get_trace_sample_ids.ts   |   2 +-
 .../get_derived_service_annotations.ts        |   2 +-
 .../lib/services/get_service_agent_name.ts    |   2 +-
 .../services/get_service_transaction_types.ts |   2 +-
 .../apm/server/lib/traces/get_trace_items.ts  |   2 +-
 .../avg_duration_by_browser/fetcher.ts        |   2 +-
 .../avg_duration_by_country/index.ts          |   2 +-
 .../lib/transactions/breakdown/index.ts       |   2 +-
 .../charts/get_timeseries_data/fetcher.ts     |   2 +-
 .../distribution/get_buckets/fetcher.ts       |   2 +-
 .../lib/transactions/get_transaction/index.ts |   2 +-
 .../server/lib/ui_filters/get_environments.ts |   2 +-
 .../lib/ui_filters/local_ui_filters/config.ts |  35 ++++
 .../apm/server/routes/create_apm_api.ts       |  14 +-
 .../plugins/apm/server/routes/rum_client.ts   |  57 +++++
 .../plugins/apm/server/routes/ui_filters.ts   |  11 +
 .../apm/typings/elasticsearch/aggregations.ts |  26 +++
 .../translations/translations/ja-JP.json      |   1 -
 .../translations/translations/zh-CN.json      |   1 -
 59 files changed, 1553 insertions(+), 48 deletions(-)
 create mode 100644 x-pack/plugins/apm/common/projections/rum_overview.ts
 rename x-pack/plugins/apm/{server/lib/helpers => common/utils}/range_filter.ts (100%)
 create mode 100644 x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature
 create mode 100644 x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum_dashboard.ts
 create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx
 create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
 create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
 create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
 create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
 create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
 create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
 create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
 create mode 100644 x-pack/plugins/apm/public/components/shared/Links/apm/RumOverviewLink.tsx
 create mode 100644 x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap
 create mode 100644 x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts
 create mode 100644 x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts
 create mode 100644 x-pack/plugins/apm/server/lib/rum_client/get_page_view_trends.ts
 create mode 100644 x-pack/plugins/apm/server/lib/rum_client/queries.test.ts
 create mode 100644 x-pack/plugins/apm/server/routes/rum_client.ts

diff --git a/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap b/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap
index 54dd4704edfc0..f3dc7abcf8239 100644
--- a/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap
+++ b/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap
@@ -4,6 +4,8 @@ exports[`Error AGENT_NAME 1`] = `"java"`;
 
 exports[`Error AGENT_VERSION 1`] = `"agent version"`;
 
+exports[`Error CLIENT_GEO 1`] = `undefined`;
+
 exports[`Error CLIENT_GEO_COUNTRY_ISO_CODE 1`] = `undefined`;
 
 exports[`Error CONTAINER_ID 1`] = `undefined`;
@@ -122,18 +124,26 @@ exports[`Error TRANSACTION_SAMPLED 1`] = `undefined`;
 
 exports[`Error TRANSACTION_TYPE 1`] = `"request"`;
 
+exports[`Error TRANSACTION_URL 1`] = `undefined`;
+
 exports[`Error URL_FULL 1`] = `undefined`;
 
+exports[`Error USER_AGENT_DEVICE 1`] = `undefined`;
+
 exports[`Error USER_AGENT_NAME 1`] = `undefined`;
 
 exports[`Error USER_AGENT_ORIGINAL 1`] = `undefined`;
 
+exports[`Error USER_AGENT_OS 1`] = `undefined`;
+
 exports[`Error USER_ID 1`] = `undefined`;
 
 exports[`Span AGENT_NAME 1`] = `"java"`;
 
 exports[`Span AGENT_VERSION 1`] = `"agent version"`;
 
+exports[`Span CLIENT_GEO 1`] = `undefined`;
+
 exports[`Span CLIENT_GEO_COUNTRY_ISO_CODE 1`] = `undefined`;
 
 exports[`Span CONTAINER_ID 1`] = `undefined`;
@@ -252,18 +262,26 @@ exports[`Span TRANSACTION_SAMPLED 1`] = `undefined`;
 
 exports[`Span TRANSACTION_TYPE 1`] = `undefined`;
 
+exports[`Span TRANSACTION_URL 1`] = `undefined`;
+
 exports[`Span URL_FULL 1`] = `undefined`;
 
+exports[`Span USER_AGENT_DEVICE 1`] = `undefined`;
+
 exports[`Span USER_AGENT_NAME 1`] = `undefined`;
 
 exports[`Span USER_AGENT_ORIGINAL 1`] = `undefined`;
 
+exports[`Span USER_AGENT_OS 1`] = `undefined`;
+
 exports[`Span USER_ID 1`] = `undefined`;
 
 exports[`Transaction AGENT_NAME 1`] = `"java"`;
 
 exports[`Transaction AGENT_VERSION 1`] = `"agent version"`;
 
+exports[`Transaction CLIENT_GEO 1`] = `undefined`;
+
 exports[`Transaction CLIENT_GEO_COUNTRY_ISO_CODE 1`] = `undefined`;
 
 exports[`Transaction CONTAINER_ID 1`] = `"container1234567890abcdef"`;
@@ -382,10 +400,16 @@ exports[`Transaction TRANSACTION_SAMPLED 1`] = `true`;
 
 exports[`Transaction TRANSACTION_TYPE 1`] = `"transaction type"`;
 
+exports[`Transaction TRANSACTION_URL 1`] = `undefined`;
+
 exports[`Transaction URL_FULL 1`] = `"http://www.elastic.co"`;
 
+exports[`Transaction USER_AGENT_DEVICE 1`] = `undefined`;
+
 exports[`Transaction USER_AGENT_NAME 1`] = `"Other"`;
 
 exports[`Transaction USER_AGENT_ORIGINAL 1`] = `"test original"`;
 
+exports[`Transaction USER_AGENT_OS 1`] = `undefined`;
+
 exports[`Transaction USER_ID 1`] = `"1337"`;
diff --git a/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts b/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts
index d5c3f91eb9247..7537dba7f8411 100644
--- a/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts
+++ b/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts
@@ -87,3 +87,9 @@ export const CONTAINER_ID = 'container.id';
 export const POD_NAME = 'kubernetes.pod.name';
 
 export const CLIENT_GEO_COUNTRY_ISO_CODE = 'client.geo.country_iso_code';
+
+// RUM Labels
+export const TRANSACTION_URL = 'transaction.page.url';
+export const CLIENT_GEO = 'client.geo';
+export const USER_AGENT_DEVICE = 'user_agent.device.name';
+export const USER_AGENT_OS = 'user_agent.os.name';
diff --git a/x-pack/plugins/apm/common/projections/errors.ts b/x-pack/plugins/apm/common/projections/errors.ts
index bd397afae2243..390a8a0968102 100644
--- a/x-pack/plugins/apm/common/projections/errors.ts
+++ b/x-pack/plugins/apm/common/projections/errors.ts
@@ -16,7 +16,7 @@ import {
   ERROR_GROUP_ID,
 } from '../elasticsearch_fieldnames';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { rangeFilter } from '../../server/lib/helpers/range_filter';
+import { rangeFilter } from '../utils/range_filter';
 
 export function getErrorGroupsProjection({
   setup,
diff --git a/x-pack/plugins/apm/common/projections/metrics.ts b/x-pack/plugins/apm/common/projections/metrics.ts
index b05ec5f2ba876..45998bfe82e96 100644
--- a/x-pack/plugins/apm/common/projections/metrics.ts
+++ b/x-pack/plugins/apm/common/projections/metrics.ts
@@ -16,7 +16,7 @@ import {
   SERVICE_NODE_NAME,
 } from '../elasticsearch_fieldnames';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { rangeFilter } from '../../server/lib/helpers/range_filter';
+import { rangeFilter } from '../utils/range_filter';
 import { SERVICE_NODE_NAME_MISSING } from '../service_nodes';
 
 function getServiceNodeNameFilters(serviceNodeName?: string) {
diff --git a/x-pack/plugins/apm/common/projections/rum_overview.ts b/x-pack/plugins/apm/common/projections/rum_overview.ts
new file mode 100644
index 0000000000000..b1218546d09ff
--- /dev/null
+++ b/x-pack/plugins/apm/common/projections/rum_overview.ts
@@ -0,0 +1,46 @@
+/*
+ * 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 {
+  Setup,
+  SetupTimeRange,
+  SetupUIFilters,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../server/lib/helpers/setup_request';
+import { PROCESSOR_EVENT, TRANSACTION_TYPE } from '../elasticsearch_fieldnames';
+import { rangeFilter } from '../utils/range_filter';
+
+export function getRumOverviewProjection({
+  setup,
+}: {
+  setup: Setup & SetupTimeRange & SetupUIFilters;
+}) {
+  const { start, end, uiFiltersES, indices } = setup;
+
+  const bool = {
+    filter: [
+      { range: rangeFilter(start, end) },
+      { term: { [PROCESSOR_EVENT]: 'transaction' } },
+      { term: { [TRANSACTION_TYPE]: 'page-load' } },
+      {
+        // Adding this filter to cater for some inconsistent rum data
+        exists: {
+          field: 'transaction.marks.navigationTiming.fetchStart',
+        },
+      },
+      ...uiFiltersES,
+    ],
+  };
+
+  return {
+    index: indices['apm_oss.transactionIndices'],
+    body: {
+      query: {
+        bool,
+      },
+    },
+  };
+}
diff --git a/x-pack/plugins/apm/common/projections/services.ts b/x-pack/plugins/apm/common/projections/services.ts
index bcfc27d720ba9..80a3471e9c30d 100644
--- a/x-pack/plugins/apm/common/projections/services.ts
+++ b/x-pack/plugins/apm/common/projections/services.ts
@@ -12,7 +12,7 @@ import {
 } from '../../server/lib/helpers/setup_request';
 import { SERVICE_NAME, PROCESSOR_EVENT } from '../elasticsearch_fieldnames';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { rangeFilter } from '../../server/lib/helpers/range_filter';
+import { rangeFilter } from '../utils/range_filter';
 
 export function getServicesProjection({
   setup,
diff --git a/x-pack/plugins/apm/common/projections/transactions.ts b/x-pack/plugins/apm/common/projections/transactions.ts
index 99d5a04c1e722..b6cd73ca9aaad 100644
--- a/x-pack/plugins/apm/common/projections/transactions.ts
+++ b/x-pack/plugins/apm/common/projections/transactions.ts
@@ -17,7 +17,7 @@ import {
   TRANSACTION_NAME,
 } from '../elasticsearch_fieldnames';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { rangeFilter } from '../../server/lib/helpers/range_filter';
+import { rangeFilter } from '../utils/range_filter';
 
 export function getTransactionsProjection({
   setup,
diff --git a/x-pack/plugins/apm/common/projections/typings.ts b/x-pack/plugins/apm/common/projections/typings.ts
index 3361770336dde..693795b09e1d0 100644
--- a/x-pack/plugins/apm/common/projections/typings.ts
+++ b/x-pack/plugins/apm/common/projections/typings.ts
@@ -29,4 +29,5 @@ export enum PROJECTION {
   METRICS = 'metrics',
   ERROR_GROUPS = 'errorGroups',
   SERVICE_NODES = 'serviceNodes',
+  RUM_OVERVIEW = 'rumOverview',
 }
diff --git a/x-pack/plugins/apm/server/lib/helpers/range_filter.ts b/x-pack/plugins/apm/common/utils/range_filter.ts
similarity index 100%
rename from x-pack/plugins/apm/server/lib/helpers/range_filter.ts
rename to x-pack/plugins/apm/common/utils/range_filter.ts
diff --git a/x-pack/plugins/apm/e2e/cypress/integration/helpers.ts b/x-pack/plugins/apm/e2e/cypress/integration/helpers.ts
index 90d5c9eda632d..689b88390810f 100644
--- a/x-pack/plugins/apm/e2e/cypress/integration/helpers.ts
+++ b/x-pack/plugins/apm/e2e/cypress/integration/helpers.ts
@@ -6,20 +6,30 @@
 
 /* eslint-disable import/no-extraneous-dependencies */
 
-const RANGE_FROM = '2020-03-04T12:30:00.000Z';
-const RANGE_TO = '2020-03-04T13:00:00.000Z';
+const RANGE_FROM = '2020-06-01T14:59:32.686Z';
+const RANGE_TO = '2020-06-16T16:59:36.219Z';
+
 const BASE_URL = Cypress.config().baseUrl;
 
 /** The default time in ms to wait for a Cypress command to complete */
 export const DEFAULT_TIMEOUT = 60 * 1000;
 
-export function loginAndWaitForPage(url: string) {
+export function loginAndWaitForPage(
+  url: string,
+  dateRange?: { to: string; from: string }
+) {
   const username = Cypress.env('elasticsearch_username');
   const password = Cypress.env('elasticsearch_password');
 
   cy.log(`Authenticating via ${username} / ${password}`);
-
-  const fullUrl = `${BASE_URL}${url}?rangeFrom=${RANGE_FROM}&rangeTo=${RANGE_TO}`;
+  let rangeFrom = RANGE_FROM;
+  let rangeTo = RANGE_TO;
+  if (dateRange) {
+    rangeFrom = dateRange.from;
+    rangeTo = dateRange.to;
+  }
+
+  const fullUrl = `${BASE_URL}${url}?rangeFrom=${rangeFrom}&rangeTo=${rangeTo}`;
   cy.visit(fullUrl, { auth: { username, password } });
 
   cy.viewport('macbook-15');
diff --git a/x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature b/x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature
new file mode 100644
index 0000000000000..eabfaf096731b
--- /dev/null
+++ b/x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature
@@ -0,0 +1,7 @@
+Feature: RUM Dashboard
+
+  Scenario: Client metrics
+    Given a user browses the APM UI application for RUM Data
+    When the user inspects the real user monitoring tab
+    Then should redirect to rum dashboard
+      And should have correct client metrics
diff --git a/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js b/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js
index d4c8ba4910850..dd96a57ef8c45 100644
--- a/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js
+++ b/x-pack/plugins/apm/e2e/cypress/integration/snapshots.js
@@ -1,10 +1,17 @@
 module.exports = {
-  APM: {
-    'Transaction duration charts': {
-      '1': '350 ms',
-      '2': '175 ms',
-      '3': '0 ms',
-    },
+  "__version": "4.5.0",
+  "APM": {
+    "Transaction duration charts": {
+      "1": "55 ms",
+      "2": "28 ms",
+      "3": "0 ms"
+    }
   },
-  __version: '4.5.0',
-};
+  "RUM Dashboard": {
+    "Client metrics": {
+      "1": "62",
+      "2": "0.07 sec",
+      "3": "0.01 sec"
+    }
+  }
+}
diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum_dashboard.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum_dashboard.ts
new file mode 100644
index 0000000000000..38eadbf513032
--- /dev/null
+++ b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum_dashboard.ts
@@ -0,0 +1,43 @@
+/*
+ * 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 { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { loginAndWaitForPage } from '../../integration/helpers';
+
+/** The default time in ms to wait for a Cypress command to complete */
+export const DEFAULT_TIMEOUT = 60 * 1000;
+
+Given(`a user browses the APM UI application for RUM Data`, () => {
+  // open service overview page
+  const RANGE_FROM = 'now-24h';
+  const RANGE_TO = 'now';
+  loginAndWaitForPage(`/app/apm#/services`, { from: RANGE_FROM, to: RANGE_TO });
+});
+
+When(`the user inspects the real user monitoring tab`, () => {
+  // click rum tab
+  cy.get(':contains(Real User Monitoring)', { timeout: DEFAULT_TIMEOUT })
+    .last()
+    .click({ force: true });
+});
+
+Then(`should redirect to rum dashboard`, () => {
+  cy.url().should('contain', `/app/apm#/rum-overview`);
+});
+
+Then(`should have correct client metrics`, () => {
+  const clientMetrics = '[data-cy=client-metrics] .euiStat__title';
+
+  // wait for all loading to finish
+  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  cy.get('.euiStat__title-isLoading').should('not.be.visible');
+
+  cy.get(clientMetrics).eq(2).invoke('text').snapshot();
+
+  cy.get(clientMetrics).eq(1).invoke('text').snapshot();
+
+  cy.get(clientMetrics).eq(0).invoke('text').snapshot();
+});
diff --git a/x-pack/plugins/apm/e2e/ingest-data/replay.js b/x-pack/plugins/apm/e2e/ingest-data/replay.js
index ae3f62894afc0..3478039f39b50 100644
--- a/x-pack/plugins/apm/e2e/ingest-data/replay.js
+++ b/x-pack/plugins/apm/e2e/ingest-data/replay.js
@@ -99,7 +99,11 @@ async function init() {
     .split('\n')
     .filter((item) => item)
     .map((item) => JSON.parse(item))
-    .filter((item) => item.url === '/intake/v2/events');
+    .filter((item) => {
+      return (
+        item.url === '/intake/v2/events' || item.url === '/intake/v2/rum/events'
+      );
+    });
 
   spinner.start();
   requestProgress.total = items.length;
diff --git a/x-pack/plugins/apm/e2e/run-e2e.sh b/x-pack/plugins/apm/e2e/run-e2e.sh
index aa7c0e21425ad..43cc74a197f42 100755
--- a/x-pack/plugins/apm/e2e/run-e2e.sh
+++ b/x-pack/plugins/apm/e2e/run-e2e.sh
@@ -109,7 +109,7 @@ echo "${bold}Static mock data (logs: ${E2E_DIR}${TMP_DIR}/ingest-data.log)${norm
 # Download static data if not already done
 if [ ! -e "${TMP_DIR}/events.json" ]; then
     echo 'Downloading events.json...'
-    curl --silent https://storage.googleapis.com/apm-ui-e2e-static-data/events.json --output ${TMP_DIR}/events.json
+    curl --silent https://storage.googleapis.com/apm-ui-e2e-static-data/2020-06-12.json --output ${TMP_DIR}/events.json
 fi
 
 # echo "Deleting existing indices (apm* and .apm*)"
diff --git a/x-pack/plugins/apm/e2e/yarn.lock b/x-pack/plugins/apm/e2e/yarn.lock
index a6729c56ecb09..975154d71b85d 100644
--- a/x-pack/plugins/apm/e2e/yarn.lock
+++ b/x-pack/plugins/apm/e2e/yarn.lock
@@ -5561,10 +5561,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@3.9.2:
-  version "3.9.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.2.tgz#64e9c8e9be6ea583c54607677dd4680a1cf35db9"
-  integrity sha512-q2ktq4n/uLuNNShyayit+DTobV2ApPEo/6so68JaD5ojvc/6GClBipedB9zNWYxRSAlZXAe405Rlijzl6qDiSw==
+typescript@3.9.5:
+  version "3.9.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.5.tgz#586f0dba300cde8be52dd1ac4f7e1009c1b13f36"
+  integrity sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==
 
 umd@^3.0.0:
   version "3.0.3"
diff --git a/x-pack/plugins/apm/public/application/index.tsx b/x-pack/plugins/apm/public/application/index.tsx
index 56c427e67ad4c..8800b2fd492bf 100644
--- a/x-pack/plugins/apm/public/application/index.tsx
+++ b/x-pack/plugins/apm/public/application/index.tsx
@@ -23,7 +23,7 @@ import {
   KibanaContextProvider,
   useUiSetting$,
 } from '../../../../../src/plugins/kibana_react/public';
-import { px, unit, units } from '../style/variables';
+import { px, units } from '../style/variables';
 import { UpdateBreadcrumbs } from '../components/app/Main/UpdateBreadcrumbs';
 import { APMIndicesPermission } from '../components/app/APMIndicesPermission';
 import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange';
@@ -33,7 +33,6 @@ import { ConfigSchema } from '..';
 import 'react-vis/dist/style.css';
 
 const MainContainer = styled.div`
-  min-width: ${px(unit * 50)};
   padding: ${px(units.plus)};
   height: 100%;
 `;
diff --git a/x-pack/plugins/apm/public/components/app/Home/index.tsx b/x-pack/plugins/apm/public/components/app/Home/index.tsx
index 74cbc00b17889..c325a72375359 100644
--- a/x-pack/plugins/apm/public/components/app/Home/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Home/index.tsx
@@ -25,6 +25,9 @@ import { SetupInstructionsLink } from '../../shared/Links/SetupInstructionsLink'
 import { ServiceMap } from '../ServiceMap';
 import { ServiceOverview } from '../ServiceOverview';
 import { TraceOverview } from '../TraceOverview';
+import { RumOverview } from '../RumDashboard';
+import { RumOverviewLink } from '../../shared/Links/apm/RumOverviewLink';
+import { EndUserExperienceLabel } from '../RumDashboard/translations';
 
 function getHomeTabs({
   serviceMapEnabled = true,
@@ -70,14 +73,27 @@ function getHomeTabs({
     });
   }
 
+  homeTabs.push({
+    link: (
+      <RumOverviewLink>
+        {i18n.translate('xpack.apm.home.rumTabLabel', {
+          defaultMessage: 'Real User Monitoring',
+        })}
+      </RumOverviewLink>
+    ),
+    render: () => <RumOverview />,
+    name: 'rum-overview',
+  });
+
   return homeTabs;
 }
+
 const SETTINGS_LINK_LABEL = i18n.translate('xpack.apm.settingsLinkLabel', {
   defaultMessage: 'Settings',
 });
 
 interface Props {
-  tab: 'traces' | 'services' | 'service-map';
+  tab: 'traces' | 'services' | 'service-map' | 'rum-overview';
 }
 
 export function Home({ tab }: Props) {
@@ -93,7 +109,11 @@ export function Home({ tab }: Props) {
         <EuiFlexGroup alignItems="center">
           <EuiFlexItem grow={false}>
             <EuiTitle size="l">
-              <h1>APM</h1>
+              <h1>
+                {selectedTab.name === 'rum-overview'
+                  ? EndUserExperienceLabel
+                  : 'APM'}
+              </h1>
             </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
diff --git a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx
index 577af75e92d9e..295f343b411a9 100644
--- a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx
@@ -250,4 +250,13 @@ export const routes: BreadcrumbRoute[] = [
     }),
     name: RouteName.CUSTOMIZE_UI,
   },
+  {
+    exact: true,
+    path: '/rum-overview',
+    component: () => <Home tab="rum-overview" />,
+    breadcrumb: i18n.translate('xpack.apm.home.rumOverview.title', {
+      defaultMessage: 'Real User Monitoring',
+    }),
+    name: RouteName.RUM_OVERVIEW,
+  },
 ];
diff --git a/x-pack/plugins/apm/public/components/app/Main/route_config/route_names.tsx b/x-pack/plugins/apm/public/components/app/Main/route_config/route_names.tsx
index 167de1a37f427..4965aa9db8760 100644
--- a/x-pack/plugins/apm/public/components/app/Main/route_config/route_names.tsx
+++ b/x-pack/plugins/apm/public/components/app/Main/route_config/route_names.tsx
@@ -26,4 +26,5 @@ export enum RouteName {
   SERVICE_NODES = 'nodes',
   LINK_TO_TRACE = 'link_to_trace',
   CUSTOMIZE_UI = 'customize_ui',
+  RUM_OVERVIEW = 'rum_overview',
 }
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx
new file mode 100644
index 0000000000000..a3cfbb28abee2
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx
@@ -0,0 +1,63 @@
+/*
+ * 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, HTMLAttributes } from 'react';
+import {
+  EuiErrorBoundary,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingChart,
+} from '@elastic/eui';
+
+interface Props {
+  /**
+   * Height for the chart
+   */
+  height?: string;
+  /**
+   * if chart data source is still loading
+   */
+  loading?: boolean;
+  /**
+   * aria-label for accessibility
+   */
+  'aria-label'?: string;
+}
+
+export const ChartWrapper: FC<Props> = ({
+  loading = false,
+  height = '100%',
+  children,
+  ...rest
+}) => {
+  const opacity = loading === true ? 0.3 : 1;
+
+  return (
+    <EuiErrorBoundary>
+      <div
+        style={{
+          height,
+          opacity,
+          transition: 'opacity 0.2s',
+        }}
+        {...(rest as HTMLAttributes<HTMLDivElement>)}
+      >
+        {children}
+      </div>
+      {loading === true && (
+        <EuiFlexGroup
+          justifyContent="spaceAround"
+          alignItems="center"
+          style={{ height, marginTop: `-${height}`, marginBottom: 0 }}
+        >
+          <EuiFlexItem grow={false}>
+            <EuiLoadingChart size="xl" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
+    </EuiErrorBoundary>
+  );
+};
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
new file mode 100644
index 0000000000000..8c0a7c6a91f67
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
@@ -0,0 +1,82 @@
+/*
+ * 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.
+ */
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import { EuiFlexGroup, EuiFlexItem, EuiStat } from '@elastic/eui';
+import { useFetcher } from '../../../../hooks/useFetcher';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { BackEndLabel, FrontEndLabel, PageViewsLabel } from '../translations';
+
+export const formatBigValue = (val?: number | null, fixed?: number): string => {
+  if (val && val >= 1000) {
+    const result = val / 1000;
+    if (fixed) {
+      return result.toFixed(fixed) + 'k';
+    }
+    return result + 'k';
+  }
+  return val + '';
+};
+
+const ClFlexGroup = styled(EuiFlexGroup)`
+  flex-direction: row;
+  @media only screen and (max-width: 768px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+`;
+
+export const ClientMetrics = () => {
+  const { urlParams, uiFilters } = useUrlParams();
+
+  const { start, end } = urlParams;
+
+  const { data, status } = useFetcher(
+    (callApmApi) => {
+      if (start && end) {
+        return callApmApi({
+          pathname: '/api/apm/rum/client-metrics',
+          params: {
+            query: { start, end, uiFilters: JSON.stringify(uiFilters) },
+          },
+        });
+      }
+    },
+    [start, end, uiFilters]
+  );
+
+  const STAT_STYLE = { width: '240px' };
+
+  return (
+    <ClFlexGroup responsive={false}>
+      <EuiFlexItem grow={false} style={STAT_STYLE}>
+        <EuiStat
+          titleSize="s"
+          title={(data?.backEnd?.value?.toFixed(2) ?? '-') + ' sec'}
+          description={BackEndLabel}
+          isLoading={status !== 'success'}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false} style={STAT_STYLE}>
+        <EuiStat
+          titleSize="s"
+          title={(data?.frontEnd?.value?.toFixed(2) ?? '-') + ' sec'}
+          description={FrontEndLabel}
+          isLoading={status !== 'success'}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false} style={STAT_STYLE}>
+        <EuiStat
+          titleSize="s"
+          title={formatBigValue(data?.pageViews?.value, 2) ?? '-'}
+          description={PageViewsLabel}
+          isLoading={status !== 'success'}
+        />
+      </EuiFlexItem>
+    </ClFlexGroup>
+  );
+};
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
new file mode 100644
index 0000000000000..9c89b8bc161b7
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
@@ -0,0 +1,60 @@
+/*
+ * 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 * as React from 'react';
+import {
+  AnnotationDomainTypes,
+  LineAnnotation,
+  LineAnnotationDatum,
+  LineAnnotationStyle,
+} from '@elastic/charts';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import styled from 'styled-components';
+
+interface Props {
+  percentiles?: Record<string, number>;
+}
+
+function generateAnnotationData(
+  values?: Record<string, number>
+): LineAnnotationDatum[] {
+  return Object.entries(values ?? {}).map((value, index) => ({
+    dataValue: value[1],
+    details: `${(+value[0]).toFixed(0)}`,
+  }));
+}
+
+const PercentileMarker = styled.span`
+  position: relative;
+  bottom: 140px;
+`;
+
+export const PercentileAnnotations = ({ percentiles }: Props) => {
+  const dataValues = generateAnnotationData(percentiles) ?? [];
+
+  const style: Partial<LineAnnotationStyle> = {
+    line: {
+      strokeWidth: 1,
+      stroke: euiLightVars.euiColorSecondary,
+      opacity: 1,
+    },
+  };
+
+  return (
+    <>
+      {dataValues.map((annotation, index) => (
+        <LineAnnotation
+          id={index + 'annotation_' + annotation.dataValue}
+          key={index + 'percentile_' + annotation.dataValue}
+          domainType={AnnotationDomainTypes.XDomain}
+          dataValues={[annotation]}
+          style={style}
+          marker={<PercentileMarker>{annotation.details}th</PercentileMarker>}
+        />
+      ))}
+    </>
+  );
+};
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
new file mode 100644
index 0000000000000..c7a0b64f6a8b8
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
@@ -0,0 +1,144 @@
+/*
+ * 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 } from 'react';
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
+import {
+  Axis,
+  Chart,
+  ScaleType,
+  LineSeries,
+  CurveType,
+  BrushEndListener,
+  Settings,
+  TooltipValueFormatter,
+  TooltipValue,
+} from '@elastic/charts';
+import { Position } from '@elastic/charts/dist/utils/commons';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { useFetcher } from '../../../../hooks/useFetcher';
+import { ChartWrapper } from '../ChartWrapper';
+import { PercentileAnnotations } from './PercentileAnnotations';
+import {
+  PageLoadDistLabel,
+  PageLoadTimeLabel,
+  PercPageLoadedLabel,
+  ResetZoomLabel,
+} from '../translations';
+
+export const PageLoadDistribution = () => {
+  const { urlParams, uiFilters } = useUrlParams();
+
+  const { start, end } = urlParams;
+
+  const [percentileRange, setPercentileRange] = useState<{
+    min: string | null;
+    max: string | null;
+  }>({
+    min: null,
+    max: null,
+  });
+
+  const { data, status } = useFetcher(
+    (callApmApi) => {
+      if (start && end) {
+        return callApmApi({
+          pathname: '/api/apm/rum-client/page-load-distribution',
+          params: {
+            query: {
+              start,
+              end,
+              uiFilters: JSON.stringify(uiFilters),
+              ...(percentileRange.min && percentileRange.max
+                ? {
+                    minPercentile: percentileRange.min,
+                    maxPercentile: percentileRange.max,
+                  }
+                : {}),
+            },
+          },
+        });
+      }
+    },
+    [end, start, uiFilters, percentileRange.min, percentileRange.max]
+  );
+
+  const onBrushEnd: BrushEndListener = ({ x }) => {
+    if (!x) {
+      return;
+    }
+    const [minX, maxX] = x;
+    setPercentileRange({ min: String(minX), max: String(maxX) });
+  };
+
+  const headerFormatter: TooltipValueFormatter = (tooltip: TooltipValue) => {
+    return (
+      <div>
+        <p>{tooltip.value} seconds</p>
+      </div>
+    );
+  };
+
+  const tooltipProps = {
+    headerFormatter,
+  };
+
+  return (
+    <div>
+      <EuiFlexGroup responsive={false}>
+        <EuiFlexItem>
+          <EuiTitle size="xs">
+            <h3>{PageLoadDistLabel}</h3>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            iconType="inspect"
+            size="s"
+            onClick={() => {
+              setPercentileRange({ min: null, max: null });
+            }}
+            fill={percentileRange.min !== null && percentileRange.max !== null}
+          >
+            {ResetZoomLabel}
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="m" />
+      <ChartWrapper loading={status !== 'success'} height="200px">
+        <Chart className="story-chart">
+          <Settings onBrushEnd={onBrushEnd} tooltip={tooltipProps} />
+          <PercentileAnnotations percentiles={data?.percentiles} />
+          <Axis
+            id="bottom"
+            title={PageLoadTimeLabel}
+            position={Position.Bottom}
+          />
+          <Axis
+            id="left"
+            title={PercPageLoadedLabel}
+            position={Position.Left}
+            tickFormat={(d) => Number(d).toFixed(1) + ' %'}
+          />
+          <LineSeries
+            id={'PagesPercentage'}
+            name={PercPageLoadedLabel}
+            xScaleType={ScaleType.Linear}
+            yScaleType={ScaleType.Linear}
+            data={data?.pageLoadDistribution ?? []}
+            curve={CurveType.CURVE_NATURAL}
+          />
+        </Chart>
+      </ChartWrapper>
+    </div>
+  );
+};
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
new file mode 100644
index 0000000000000..cc41bd4352947
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
@@ -0,0 +1,111 @@
+/*
+ * 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 * as React from 'react';
+import { EuiTitle } from '@elastic/eui';
+import {
+  Axis,
+  BarSeries,
+  BrushEndListener,
+  Chart,
+  niceTimeFormatByDay,
+  ScaleType,
+  Settings,
+  timeFormatter,
+} from '@elastic/charts';
+import moment from 'moment';
+import { Position } from '@elastic/charts/dist/utils/commons';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { useFetcher } from '../../../../hooks/useFetcher';
+import { ChartWrapper } from '../ChartWrapper';
+import { DateTimeLabel, PageViewsLabel } from '../translations';
+import { history } from '../../../../utils/history';
+import { fromQuery, toQuery } from '../../../shared/Links/url_helpers';
+import { formatBigValue } from '../ClientMetrics';
+
+export const PageViewsTrend = () => {
+  const { urlParams, uiFilters } = useUrlParams();
+
+  const { start, end } = urlParams;
+
+  const { data, status } = useFetcher(
+    (callApmApi) => {
+      if (start && end) {
+        return callApmApi({
+          pathname: '/api/apm/rum-client/page-view-trends',
+          params: {
+            query: {
+              start,
+              end,
+              uiFilters: JSON.stringify(uiFilters),
+            },
+          },
+        });
+      }
+    },
+    [end, start, uiFilters]
+  );
+  const formatter = timeFormatter(niceTimeFormatByDay(2));
+
+  const onBrushEnd: BrushEndListener = ({ x }) => {
+    if (!x) {
+      return;
+    }
+    const [minX, maxX] = x;
+
+    const rangeFrom = moment(minX).toISOString();
+    const rangeTo = moment(maxX).toISOString();
+
+    history.push({
+      ...history.location,
+      search: fromQuery({
+        ...toQuery(history.location.search),
+        rangeFrom,
+        rangeTo,
+      }),
+    });
+  };
+
+  return (
+    <div>
+      <EuiTitle size="xs">
+        <h3>{PageViewsLabel}</h3>
+      </EuiTitle>
+      <ChartWrapper loading={status !== 'success'} height="200px">
+        <Chart>
+          <Settings
+            showLegend={false}
+            showLegendExtra
+            legendPosition={Position.Bottom}
+            onBrushEnd={onBrushEnd}
+          />
+          <Axis
+            id="date_time"
+            position={Position.Bottom}
+            title={DateTimeLabel}
+            tickFormat={formatter}
+          />
+          <Axis
+            id="page_views"
+            title={PageViewsLabel}
+            position={Position.Left}
+            tickFormat={(d) => formatBigValue(Number(d))}
+          />
+          <BarSeries
+            id={PageViewsLabel}
+            color={[euiLightVars.euiColorLightShade]}
+            xScaleType={ScaleType.Linear}
+            yScaleType={ScaleType.Linear}
+            xAccessor="x"
+            yAccessors={['y']}
+            data={data ?? []}
+          />
+        </Chart>
+      </ChartWrapper>
+    </div>
+  );
+};
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
new file mode 100644
index 0000000000000..e3fa7374afb38
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
@@ -0,0 +1,65 @@
+/*
+ * 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,
+  EuiTitle,
+  EuiSpacer,
+  EuiPanel,
+} from '@elastic/eui';
+import React from 'react';
+import { ClientMetrics } from './ClientMetrics';
+import { PageViewsTrend } from './PageViewsTrend';
+import { PageLoadDistribution } from './PageLoadDistribution';
+import { getWhatIsGoingOnLabel } from './translations';
+import { useUrlParams } from '../../../hooks/useUrlParams';
+
+export function RumDashboard() {
+  const { urlParams } = useUrlParams();
+
+  const { environment } = urlParams;
+
+  let environmentLabel = environment || 'all environments';
+
+  if (environment === 'ENVIRONMENT_NOT_DEFINED') {
+    environmentLabel = 'undefined environment';
+  }
+
+  return (
+    <>
+      <EuiTitle>
+        <h2>{getWhatIsGoingOnLabel(environmentLabel)}</h2>
+      </EuiTitle>
+      <EuiSpacer />
+      <EuiFlexGroup direction="column" gutterSize="s">
+        <EuiFlexItem>
+          <EuiPanel>
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem grow={1} data-cy={`client-metrics`}>
+                <EuiTitle size="xs">
+                  <h3>Page load times</h3>
+                </EuiTitle>
+                <EuiSpacer size="s" />
+                <ClientMetrics />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPanel>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiPanel>
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem grow={3}>
+                <PageLoadDistribution />
+                <PageViewsTrend />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPanel>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
new file mode 100644
index 0000000000000..8f21065b0dab0
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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, EuiSpacer } from '@elastic/eui';
+import React, { useMemo } from 'react';
+import { useTrackPageview } from '../../../../../observability/public';
+import { LocalUIFilters } from '../../shared/LocalUIFilters';
+import { PROJECTION } from '../../../../common/projections/typings';
+import { RumDashboard } from './RumDashboard';
+
+export function RumOverview() {
+  useTrackPageview({ app: 'apm', path: 'rum_overview' });
+  useTrackPageview({ app: 'apm', path: 'rum_overview', delay: 15000 });
+
+  const localUIFiltersConfig = useMemo(() => {
+    const config: React.ComponentProps<typeof LocalUIFilters> = {
+      filterNames: ['transactionUrl', 'location', 'device', 'os', 'browser'],
+      projection: PROJECTION.RUM_OVERVIEW,
+    };
+
+    return config;
+  }, []);
+
+  return (
+    <>
+      <EuiSpacer />
+      <EuiFlexGroup>
+        <EuiFlexItem grow={1}>
+          <LocalUIFilters {...localUIFiltersConfig} showCount={true} />
+        </EuiFlexItem>
+        <EuiFlexItem grow={7}>
+          <RumDashboard />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
new file mode 100644
index 0000000000000..c2aed41a55c7d
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
@@ -0,0 +1,73 @@
+/*
+ * 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';
+
+export const EndUserExperienceLabel = i18n.translate(
+  'xpack.apm.rum.dashboard.title',
+  {
+    defaultMessage: 'End User Experience',
+  }
+);
+
+export const getWhatIsGoingOnLabel = (environmentVal: string) =>
+  i18n.translate('xpack.apm.rum.dashboard.environment.title', {
+    defaultMessage: `What's going on in {environmentVal}?`,
+    values: { environmentVal },
+  });
+
+export const BackEndLabel = i18n.translate('xpack.apm.rum.dashboard.backend', {
+  defaultMessage: 'Backend',
+});
+
+export const FrontEndLabel = i18n.translate(
+  'xpack.apm.rum.dashboard.frontend',
+  {
+    defaultMessage: 'Frontend',
+  }
+);
+
+export const PageViewsLabel = i18n.translate(
+  'xpack.apm.rum.dashboard.pageViews',
+  {
+    defaultMessage: 'Page views',
+  }
+);
+
+export const DateTimeLabel = i18n.translate(
+  'xpack.apm.rum.dashboard.dateTime.label',
+  {
+    defaultMessage: 'Date / Time',
+  }
+);
+
+export const PercPageLoadedLabel = i18n.translate(
+  'xpack.apm.rum.dashboard.pagesLoaded.label',
+  {
+    defaultMessage: 'Pages loaded',
+  }
+);
+
+export const PageLoadTimeLabel = i18n.translate(
+  'xpack.apm.rum.dashboard.pageLoadTime.label',
+  {
+    defaultMessage: 'Page load time (seconds)',
+  }
+);
+
+export const PageLoadDistLabel = i18n.translate(
+  'xpack.apm.rum.dashboard.pageLoadDistribution.label',
+  {
+    defaultMessage: 'Page load distribution',
+  }
+);
+
+export const ResetZoomLabel = i18n.translate(
+  'xpack.apm.rum.dashboard.resetZoom.label',
+  {
+    defaultMessage: 'Reset zoom',
+  }
+);
diff --git a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx
index 2f35e329720de..81bdbdad805d6 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx
@@ -22,6 +22,8 @@ import { ServiceMap } from '../ServiceMap';
 import { ServiceMetrics } from '../ServiceMetrics';
 import { ServiceNodeOverview } from '../ServiceNodeOverview';
 import { TransactionOverview } from '../TransactionOverview';
+import { RumOverviewLink } from '../../shared/Links/apm/RumOverviewLink';
+import { RumOverview } from '../RumDashboard';
 
 interface Props {
   tab: 'transactions' | 'errors' | 'metrics' | 'nodes' | 'service-map';
@@ -110,6 +112,20 @@ export function ServiceDetailTabs({ tab }: Props) {
     tabs.push(serviceMapTab);
   }
 
+  if (isRumAgentName(agentName)) {
+    tabs.push({
+      link: (
+        <RumOverviewLink>
+          {i18n.translate('xpack.apm.home.rumTabLabel', {
+            defaultMessage: 'Real User Monitoring',
+          })}
+        </RumOverviewLink>
+      ),
+      render: () => <RumOverview />,
+      name: 'rum-overview',
+    });
+  }
+
   const selectedTab = tabs.find((serviceTab) => serviceTab.name === tab);
 
   return (
diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx b/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx
index d01deb8160858..eab685a4c1ab4 100644
--- a/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx
@@ -76,10 +76,10 @@ export function KueryBar() {
   });
 
   // The bar should be disabled when viewing the service map
-  const disabled = /\/service-map$/.test(location.pathname);
+  const disabled = /\/(service-map|rum-overview)$/.test(location.pathname);
   const disabledPlaceholder = i18n.translate(
     'xpack.apm.kueryBar.disabledPlaceholder',
-    { defaultMessage: 'Search is not available for service map' }
+    { defaultMessage: 'Search is not available here' }
   );
 
   async function onChange(inputValue: string, selectionStart: number) {
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/RumOverviewLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/RumOverviewLink.tsx
new file mode 100644
index 0000000000000..abca9817bd69d
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/RumOverviewLink.tsx
@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+/*
+ * 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 { APMLink, APMLinkExtendProps } from './APMLink';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { pickKeys } from '../../../../../common/utils/pick_keys';
+
+const RumOverviewLink = (props: APMLinkExtendProps) => {
+  const { urlParams } = useUrlParams();
+
+  const persistedFilters = pickKeys(
+    urlParams,
+    'transactionResult',
+    'host',
+    'containerId',
+    'podName'
+  );
+
+  return <APMLink path="/rum-overview" query={persistedFilters} {...props} />;
+};
+
+export { RumOverviewLink };
diff --git a/x-pack/plugins/apm/server/lib/errors/distribution/get_buckets.ts b/x-pack/plugins/apm/server/lib/errors/distribution/get_buckets.ts
index 7d96c490fcd70..db36ad1ede91c 100644
--- a/x-pack/plugins/apm/server/lib/errors/distribution/get_buckets.ts
+++ b/x-pack/plugins/apm/server/lib/errors/distribution/get_buckets.ts
@@ -10,7 +10,7 @@ import {
   PROCESSOR_EVENT,
   SERVICE_NAME,
 } from '../../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../../helpers/range_filter';
+import { rangeFilter } from '../../../../common/utils/range_filter';
 import {
   Setup,
   SetupTimeRange,
diff --git a/x-pack/plugins/apm/server/lib/errors/get_error_group.ts b/x-pack/plugins/apm/server/lib/errors/get_error_group.ts
index b157abd0b7e76..3d20f84ccfbc2 100644
--- a/x-pack/plugins/apm/server/lib/errors/get_error_group.ts
+++ b/x-pack/plugins/apm/server/lib/errors/get_error_group.ts
@@ -12,7 +12,7 @@ import {
 } from '../../../common/elasticsearch_fieldnames';
 import { PromiseReturnType } from '../../../typings/common';
 import { APMError } from '../../../typings/es_schemas/ui/apm_error';
-import { rangeFilter } from '../helpers/range_filter';
+import { rangeFilter } from '../../../common/utils/range_filter';
 import {
   Setup,
   SetupTimeRange,
diff --git a/x-pack/plugins/apm/server/lib/errors/get_error_rate.ts b/x-pack/plugins/apm/server/lib/errors/get_error_rate.ts
index d558e3942a42b..e91d3953942d9 100644
--- a/x-pack/plugins/apm/server/lib/errors/get_error_rate.ts
+++ b/x-pack/plugins/apm/server/lib/errors/get_error_rate.ts
@@ -10,12 +10,12 @@ import {
 } from '../../../common/elasticsearch_fieldnames';
 import { ProcessorEvent } from '../../../common/processor_event';
 import { getMetricsDateHistogramParams } from '../helpers/metrics';
-import { rangeFilter } from '../helpers/range_filter';
 import {
   Setup,
   SetupTimeRange,
   SetupUIFilters,
 } from '../helpers/setup_request';
+import { rangeFilter } from '../../../common/utils/range_filter';
 
 export async function getErrorRate({
   serviceName,
diff --git a/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap b/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap
new file mode 100644
index 0000000000000..7d8f31aaeca7f
--- /dev/null
+++ b/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap
@@ -0,0 +1,194 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rum client dashboard queries fetches client metrics 1`] = `
+Object {
+  "body": Object {
+    "aggs": Object {
+      "backEnd": Object {
+        "avg": Object {
+          "field": "transaction.marks.agent.timeToFirstByte",
+          "missing": 0,
+        },
+      },
+      "domInteractive": Object {
+        "avg": Object {
+          "field": "transaction.marks.agent.domInteractive",
+          "missing": 0,
+        },
+      },
+      "pageViews": Object {
+        "value_count": Object {
+          "field": "transaction.type",
+        },
+      },
+    },
+    "query": Object {
+      "bool": Object {
+        "filter": Array [
+          Object {
+            "range": Object {
+              "@timestamp": Object {
+                "format": "epoch_millis",
+                "gte": 1528113600000,
+                "lte": 1528977600000,
+              },
+            },
+          },
+          Object {
+            "term": Object {
+              "processor.event": "transaction",
+            },
+          },
+          Object {
+            "term": Object {
+              "transaction.type": "page-load",
+            },
+          },
+          Object {
+            "exists": Object {
+              "field": "transaction.marks.navigationTiming.fetchStart",
+            },
+          },
+          Object {
+            "term": Object {
+              "my.custom.ui.filter": "foo-bar",
+            },
+          },
+        ],
+      },
+    },
+    "size": 0,
+  },
+  "index": "myIndex",
+}
+`;
+
+exports[`rum client dashboard queries fetches page load distribution 1`] = `
+Object {
+  "body": Object {
+    "aggs": Object {
+      "durationMinMax": Object {
+        "min": Object {
+          "field": "transaction.duration.us",
+          "missing": 0,
+        },
+      },
+      "durationPercentiles": Object {
+        "percentiles": Object {
+          "field": "transaction.duration.us",
+          "percents": Array [
+            50,
+            75,
+            90,
+            95,
+            99,
+          ],
+          "script": Object {
+            "lang": "painless",
+            "params": Object {
+              "timeUnit": 1000,
+            },
+            "source": "doc['transaction.duration.us'].value / params.timeUnit",
+          },
+        },
+      },
+    },
+    "query": Object {
+      "bool": Object {
+        "filter": Array [
+          Object {
+            "range": Object {
+              "@timestamp": Object {
+                "format": "epoch_millis",
+                "gte": 1528113600000,
+                "lte": 1528977600000,
+              },
+            },
+          },
+          Object {
+            "term": Object {
+              "processor.event": "transaction",
+            },
+          },
+          Object {
+            "term": Object {
+              "transaction.type": "page-load",
+            },
+          },
+          Object {
+            "exists": Object {
+              "field": "transaction.marks.navigationTiming.fetchStart",
+            },
+          },
+          Object {
+            "term": Object {
+              "my.custom.ui.filter": "foo-bar",
+            },
+          },
+        ],
+      },
+    },
+    "size": 0,
+  },
+  "index": "myIndex",
+}
+`;
+
+exports[`rum client dashboard queries fetches page view trends 1`] = `
+Object {
+  "body": Object {
+    "aggs": Object {
+      "pageViews": Object {
+        "aggs": Object {
+          "trans_count": Object {
+            "value_count": Object {
+              "field": "transaction.type",
+            },
+          },
+        },
+        "auto_date_histogram": Object {
+          "buckets": 50,
+          "field": "@timestamp",
+        },
+      },
+    },
+    "query": Object {
+      "bool": Object {
+        "filter": Array [
+          Object {
+            "range": Object {
+              "@timestamp": Object {
+                "format": "epoch_millis",
+                "gte": 1528113600000,
+                "lte": 1528977600000,
+              },
+            },
+          },
+          Object {
+            "term": Object {
+              "processor.event": "transaction",
+            },
+          },
+          Object {
+            "term": Object {
+              "transaction.type": "page-load",
+            },
+          },
+          Object {
+            "exists": Object {
+              "field": "transaction.marks.navigationTiming.fetchStart",
+            },
+          },
+          Object {
+            "term": Object {
+              "my.custom.ui.filter": "foo-bar",
+            },
+          },
+        ],
+      },
+    },
+    "size": 0,
+  },
+  "index": "myIndex",
+}
+`;
diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts b/x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts
new file mode 100644
index 0000000000000..8b3f733fc402a
--- /dev/null
+++ b/x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts
@@ -0,0 +1,61 @@
+/*
+ * 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 { getRumOverviewProjection } from '../../../common/projections/rum_overview';
+import { mergeProjection } from '../../../common/projections/util/merge_projection';
+import {
+  Setup,
+  SetupTimeRange,
+  SetupUIFilters,
+} from '../helpers/setup_request';
+
+export async function getClientMetrics({
+  setup,
+}: {
+  setup: Setup & SetupTimeRange & SetupUIFilters;
+}) {
+  const projection = getRumOverviewProjection({
+    setup,
+  });
+
+  const params = mergeProjection(projection, {
+    body: {
+      size: 0,
+      query: {
+        bool: projection.body.query.bool,
+      },
+      aggs: {
+        pageViews: { value_count: { field: 'transaction.type' } },
+        backEnd: {
+          avg: {
+            field: 'transaction.marks.agent.timeToFirstByte',
+            missing: 0,
+          },
+        },
+        domInteractive: {
+          avg: {
+            field: 'transaction.marks.agent.domInteractive',
+            missing: 0,
+          },
+        },
+      },
+    },
+  });
+
+  const { client } = setup;
+
+  const response = await client.search(params);
+  const { backEnd, domInteractive, pageViews } = response.aggregations!;
+
+  // Divide by 1000 to convert ms into seconds
+  return {
+    pageViews,
+    backEnd: { value: (backEnd.value || 0) / 1000 },
+    frontEnd: {
+      value: ((domInteractive.value || 0) - (backEnd.value || 0)) / 1000,
+    },
+  };
+}
diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts b/x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts
new file mode 100644
index 0000000000000..3c563946e4052
--- /dev/null
+++ b/x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts
@@ -0,0 +1,140 @@
+/*
+ * 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 { getRumOverviewProjection } from '../../../common/projections/rum_overview';
+import { mergeProjection } from '../../../common/projections/util/merge_projection';
+import {
+  Setup,
+  SetupTimeRange,
+  SetupUIFilters,
+} from '../helpers/setup_request';
+
+export async function getPageLoadDistribution({
+  setup,
+  minPercentile,
+  maxPercentile,
+}: {
+  setup: Setup & SetupTimeRange & SetupUIFilters;
+  minPercentile?: string;
+  maxPercentile?: string;
+}) {
+  const projection = getRumOverviewProjection({
+    setup,
+  });
+
+  const params = mergeProjection(projection, {
+    body: {
+      size: 0,
+      query: {
+        bool: projection.body.query.bool,
+      },
+      aggs: {
+        durationMinMax: {
+          min: {
+            field: 'transaction.duration.us',
+            missing: 0,
+          },
+        },
+        durationPercentiles: {
+          percentiles: {
+            field: 'transaction.duration.us',
+            percents: [50, 75, 90, 95, 99],
+            script: {
+              lang: 'painless',
+              source: "doc['transaction.duration.us'].value / params.timeUnit",
+              params: {
+                timeUnit: 1000,
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+
+  const { client } = setup;
+
+  const {
+    aggregations,
+    hits: { total },
+  } = await client.search(params);
+
+  if (total.value === 0) {
+    return null;
+  }
+
+  const minDuration = (aggregations?.durationMinMax.value ?? 0) / 1000;
+
+  const minPerc = minPercentile ? +minPercentile : minDuration;
+
+  const maxPercentileQuery =
+    aggregations?.durationPercentiles.values['99.0'] ?? 100;
+
+  const maxPerc = maxPercentile ? +maxPercentile : maxPercentileQuery;
+
+  const pageDist = await getPercentilesDistribution(setup, minPerc, maxPerc);
+  return {
+    pageLoadDistribution: pageDist,
+    percentiles: aggregations?.durationPercentiles.values,
+  };
+}
+
+const getPercentilesDistribution = async (
+  setup: Setup & SetupTimeRange & SetupUIFilters,
+  minPercentiles: number,
+  maxPercentile: number
+) => {
+  const stepValue = (maxPercentile - minPercentiles) / 50;
+  const stepValues = [];
+  for (let i = 1; i < 50; i++) {
+    stepValues.push((stepValue * i + minPercentiles).toFixed(2));
+  }
+
+  const projection = getRumOverviewProjection({
+    setup,
+  });
+
+  const params = mergeProjection(projection, {
+    body: {
+      size: 0,
+      query: {
+        bool: projection.body.query.bool,
+      },
+      aggs: {
+        loadDistribution: {
+          percentile_ranks: {
+            field: 'transaction.duration.us',
+            values: stepValues,
+            keyed: false,
+            script: {
+              lang: 'painless',
+              source: "doc['transaction.duration.us'].value / params.timeUnit",
+              params: {
+                timeUnit: 1000,
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+
+  const { client } = setup;
+
+  const { aggregations } = await client.search(params);
+
+  const pageDist = (aggregations?.loadDistribution.values ?? []) as Array<{
+    key: number;
+    value: number;
+  }>;
+
+  return pageDist.map(({ key, value }, index: number, arr) => {
+    return {
+      x: key,
+      y: index === 0 ? value : value - arr[index - 1].value,
+    };
+  });
+};
diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_page_view_trends.ts b/x-pack/plugins/apm/server/lib/rum_client/get_page_view_trends.ts
new file mode 100644
index 0000000000000..126605206d299
--- /dev/null
+++ b/x-pack/plugins/apm/server/lib/rum_client/get_page_view_trends.ts
@@ -0,0 +1,57 @@
+/*
+ * 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 { getRumOverviewProjection } from '../../../common/projections/rum_overview';
+import { mergeProjection } from '../../../common/projections/util/merge_projection';
+import {
+  Setup,
+  SetupTimeRange,
+  SetupUIFilters,
+} from '../helpers/setup_request';
+
+export async function getPageViewTrends({
+  setup,
+}: {
+  setup: Setup & SetupTimeRange & SetupUIFilters;
+}) {
+  const projection = getRumOverviewProjection({
+    setup,
+  });
+
+  const params = mergeProjection(projection, {
+    body: {
+      size: 0,
+      query: {
+        bool: projection.body.query.bool,
+      },
+      aggs: {
+        pageViews: {
+          auto_date_histogram: {
+            field: '@timestamp',
+            buckets: 50,
+          },
+          aggs: {
+            trans_count: {
+              value_count: {
+                field: 'transaction.type',
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+
+  const { client } = setup;
+
+  const response = await client.search(params);
+
+  const result = response.aggregations?.pageViews.buckets ?? [];
+  return result.map(({ key, trans_count }) => ({
+    x: key,
+    y: trans_count.value,
+  }));
+}
diff --git a/x-pack/plugins/apm/server/lib/rum_client/queries.test.ts b/x-pack/plugins/apm/server/lib/rum_client/queries.test.ts
new file mode 100644
index 0000000000000..5f5a48eced746
--- /dev/null
+++ b/x-pack/plugins/apm/server/lib/rum_client/queries.test.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 {
+  SearchParamsMock,
+  inspectSearchParams,
+} from '../../../public/utils/testHelpers';
+import { getClientMetrics } from './get_client_metrics';
+import { getPageViewTrends } from './get_page_view_trends';
+import { getPageLoadDistribution } from './get_page_load_distribution';
+
+describe('rum client dashboard queries', () => {
+  let mock: SearchParamsMock;
+
+  afterEach(() => {
+    mock.teardown();
+  });
+
+  it('fetches client metrics', async () => {
+    mock = await inspectSearchParams((setup) =>
+      getClientMetrics({
+        setup,
+      })
+    );
+
+    expect(mock.params).toMatchSnapshot();
+  });
+
+  it('fetches page view trends', async () => {
+    mock = await inspectSearchParams((setup) =>
+      getPageViewTrends({
+        setup,
+      })
+    );
+
+    expect(mock.params).toMatchSnapshot();
+  });
+
+  it('fetches page load distribution', async () => {
+    mock = await inspectSearchParams((setup) =>
+      getPageLoadDistribution({
+        setup,
+        minPercentile: '0',
+        maxPercentile: '99',
+      })
+    );
+    expect(mock.params).toMatchSnapshot();
+  });
+});
diff --git a/x-pack/plugins/apm/server/lib/service_map/get_service_map_service_node_info.ts b/x-pack/plugins/apm/server/lib/service_map/get_service_map_service_node_info.ts
index d069e93397611..e521efa687388 100644
--- a/x-pack/plugins/apm/server/lib/service_map/get_service_map_service_node_info.ts
+++ b/x-pack/plugins/apm/server/lib/service_map/get_service_map_service_node_info.ts
@@ -6,7 +6,7 @@
 
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
 import { ESFilter } from '../../../typings/elasticsearch';
-import { rangeFilter } from '../helpers/range_filter';
+import { rangeFilter } from '../../../common/utils/range_filter';
 import {
   PROCESSOR_EVENT,
   SERVICE_ENVIRONMENT,
diff --git a/x-pack/plugins/apm/server/lib/service_map/get_trace_sample_ids.ts b/x-pack/plugins/apm/server/lib/service_map/get_trace_sample_ids.ts
index 6eba84f2205a1..11c3a00f32980 100644
--- a/x-pack/plugins/apm/server/lib/service_map/get_trace_sample_ids.ts
+++ b/x-pack/plugins/apm/server/lib/service_map/get_trace_sample_ids.ts
@@ -5,7 +5,7 @@
  */
 import { uniq, take, sortBy } from 'lodash';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
-import { rangeFilter } from '../helpers/range_filter';
+import { rangeFilter } from '../../../common/utils/range_filter';
 import { ESFilter } from '../../../typings/elasticsearch';
 import {
   PROCESSOR_EVENT,
diff --git a/x-pack/plugins/apm/server/lib/services/annotations/get_derived_service_annotations.ts b/x-pack/plugins/apm/server/lib/services/annotations/get_derived_service_annotations.ts
index 9829c5cb25182..6da5d195cf194 100644
--- a/x-pack/plugins/apm/server/lib/services/annotations/get_derived_service_annotations.ts
+++ b/x-pack/plugins/apm/server/lib/services/annotations/get_derived_service_annotations.ts
@@ -7,7 +7,7 @@ import { isNumber } from 'lodash';
 import { Annotation, AnnotationType } from '../../../../common/annotations';
 import { SetupTimeRange, Setup } from '../../helpers/setup_request';
 import { ESFilter } from '../../../../typings/elasticsearch';
-import { rangeFilter } from '../../helpers/range_filter';
+import { rangeFilter } from '../../../../common/utils/range_filter';
 import {
   PROCESSOR_EVENT,
   SERVICE_NAME,
diff --git a/x-pack/plugins/apm/server/lib/services/get_service_agent_name.ts b/x-pack/plugins/apm/server/lib/services/get_service_agent_name.ts
index 0b016828d5f00..8d75d746c7fca 100644
--- a/x-pack/plugins/apm/server/lib/services/get_service_agent_name.ts
+++ b/x-pack/plugins/apm/server/lib/services/get_service_agent_name.ts
@@ -8,7 +8,7 @@ import {
   AGENT_NAME,
   SERVICE_NAME,
 } from '../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../helpers/range_filter';
+import { rangeFilter } from '../../../common/utils/range_filter';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
 
 export async function getServiceAgentName(
diff --git a/x-pack/plugins/apm/server/lib/services/get_service_transaction_types.ts b/x-pack/plugins/apm/server/lib/services/get_service_transaction_types.ts
index 963dea4d8322c..d88be4055dc21 100644
--- a/x-pack/plugins/apm/server/lib/services/get_service_transaction_types.ts
+++ b/x-pack/plugins/apm/server/lib/services/get_service_transaction_types.ts
@@ -8,7 +8,7 @@ import {
   SERVICE_NAME,
   TRANSACTION_TYPE,
 } from '../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../helpers/range_filter';
+import { rangeFilter } from '../../../common/utils/range_filter';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
 
 export async function getServiceTransactionTypes(
diff --git a/x-pack/plugins/apm/server/lib/traces/get_trace_items.ts b/x-pack/plugins/apm/server/lib/traces/get_trace_items.ts
index e96b323958fd7..f9374558dfeeb 100644
--- a/x-pack/plugins/apm/server/lib/traces/get_trace_items.ts
+++ b/x-pack/plugins/apm/server/lib/traces/get_trace_items.ts
@@ -16,7 +16,7 @@ import {
 import { Span } from '../../../typings/es_schemas/ui/span';
 import { Transaction } from '../../../typings/es_schemas/ui/transaction';
 import { APMError } from '../../../typings/es_schemas/ui/apm_error';
-import { rangeFilter } from '../helpers/range_filter';
+import { rangeFilter } from '../../../common/utils/range_filter';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
 import { PromiseValueType } from '../../../typings/common';
 
diff --git a/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_browser/fetcher.ts b/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_browser/fetcher.ts
index 90dd41cb9b0c8..e3d688b694380 100644
--- a/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_browser/fetcher.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_browser/fetcher.ts
@@ -13,7 +13,7 @@ import {
   USER_AGENT_NAME,
   TRANSACTION_DURATION,
 } from '../../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../../helpers/range_filter';
+import { rangeFilter } from '../../../../common/utils/range_filter';
 import { getBucketSize } from '../../helpers/get_bucket_size';
 import { Options } from '.';
 import { TRANSACTION_PAGE_LOAD } from '../../../../common/transaction_types';
diff --git a/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_country/index.ts b/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_country/index.ts
index cc23055e34672..ea6213f64ee36 100644
--- a/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_country/index.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/avg_duration_by_country/index.ts
@@ -17,7 +17,7 @@ import {
   SetupTimeRange,
   SetupUIFilters,
 } from '../../helpers/setup_request';
-import { rangeFilter } from '../../helpers/range_filter';
+import { rangeFilter } from '../../../../common/utils/range_filter';
 import { TRANSACTION_PAGE_LOAD } from '../../../../common/transaction_types';
 
 export async function getTransactionAvgDurationByCountry({
diff --git a/x-pack/plugins/apm/server/lib/transactions/breakdown/index.ts b/x-pack/plugins/apm/server/lib/transactions/breakdown/index.ts
index 713423f8953d5..5af8b9f78cec1 100644
--- a/x-pack/plugins/apm/server/lib/transactions/breakdown/index.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/breakdown/index.ts
@@ -20,7 +20,7 @@ import {
   SetupTimeRange,
   SetupUIFilters,
 } from '../../helpers/setup_request';
-import { rangeFilter } from '../../helpers/range_filter';
+import { rangeFilter } from '../../../../common/utils/range_filter';
 import { getMetricsDateHistogramParams } from '../../helpers/metrics';
 import { MAX_KPIS } from './constants';
 import { getVizColorForIndex } from '../../../../common/viz_colors';
diff --git a/x-pack/plugins/apm/server/lib/transactions/charts/get_timeseries_data/fetcher.ts b/x-pack/plugins/apm/server/lib/transactions/charts/get_timeseries_data/fetcher.ts
index 71c40010a2a3f..8e19af926ce02 100644
--- a/x-pack/plugins/apm/server/lib/transactions/charts/get_timeseries_data/fetcher.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/charts/get_timeseries_data/fetcher.ts
@@ -15,7 +15,7 @@ import {
 } from '../../../../../common/elasticsearch_fieldnames';
 import { PromiseReturnType } from '../../../../../../observability/typings/common';
 import { getBucketSize } from '../../../helpers/get_bucket_size';
-import { rangeFilter } from '../../../helpers/range_filter';
+import { rangeFilter } from '../../../../../common/utils/range_filter';
 import {
   Setup,
   SetupTimeRange,
diff --git a/x-pack/plugins/apm/server/lib/transactions/distribution/get_buckets/fetcher.ts b/x-pack/plugins/apm/server/lib/transactions/distribution/get_buckets/fetcher.ts
index 920552d1c1aeb..3f8bf635712be 100644
--- a/x-pack/plugins/apm/server/lib/transactions/distribution/get_buckets/fetcher.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/distribution/get_buckets/fetcher.ts
@@ -15,7 +15,7 @@ import {
   TRANSACTION_SAMPLED,
   TRANSACTION_TYPE,
 } from '../../../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../../../helpers/range_filter';
+import { rangeFilter } from '../../../../../common/utils/range_filter';
 import {
   Setup,
   SetupTimeRange,
diff --git a/x-pack/plugins/apm/server/lib/transactions/get_transaction/index.ts b/x-pack/plugins/apm/server/lib/transactions/get_transaction/index.ts
index 60dc16b6a546c..a7de93a3bf650 100644
--- a/x-pack/plugins/apm/server/lib/transactions/get_transaction/index.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/get_transaction/index.ts
@@ -10,7 +10,7 @@ import {
   TRANSACTION_ID,
 } from '../../../../common/elasticsearch_fieldnames';
 import { Transaction } from '../../../../typings/es_schemas/ui/transaction';
-import { rangeFilter } from '../../helpers/range_filter';
+import { rangeFilter } from '../../../../common/utils/range_filter';
 import {
   Setup,
   SetupTimeRange,
diff --git a/x-pack/plugins/apm/server/lib/ui_filters/get_environments.ts b/x-pack/plugins/apm/server/lib/ui_filters/get_environments.ts
index ccbe7a19d2f82..3fca30634be6a 100644
--- a/x-pack/plugins/apm/server/lib/ui_filters/get_environments.ts
+++ b/x-pack/plugins/apm/server/lib/ui_filters/get_environments.ts
@@ -9,7 +9,7 @@ import {
   SERVICE_ENVIRONMENT,
   SERVICE_NAME,
 } from '../../../common/elasticsearch_fieldnames';
-import { rangeFilter } from '../helpers/range_filter';
+import { rangeFilter } from '../../../common/utils/range_filter';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
 import { ENVIRONMENT_NOT_DEFINED } from '../../../common/environment_filter_values';
 import { ESFilter } from '../../../typings/elasticsearch';
diff --git a/x-pack/plugins/apm/server/lib/ui_filters/local_ui_filters/config.ts b/x-pack/plugins/apm/server/lib/ui_filters/local_ui_filters/config.ts
index 8f35664c2599c..25a559cb07a3d 100644
--- a/x-pack/plugins/apm/server/lib/ui_filters/local_ui_filters/config.ts
+++ b/x-pack/plugins/apm/server/lib/ui_filters/local_ui_filters/config.ts
@@ -11,6 +11,11 @@ import {
   HOST_NAME,
   TRANSACTION_RESULT,
   SERVICE_VERSION,
+  TRANSACTION_URL,
+  USER_AGENT_NAME,
+  USER_AGENT_DEVICE,
+  CLIENT_GEO,
+  USER_AGENT_OS,
 } from '../../../../common/elasticsearch_fieldnames';
 
 const filtersByName = {
@@ -50,6 +55,36 @@ const filtersByName = {
     }),
     fieldName: SERVICE_VERSION,
   },
+  transactionUrl: {
+    title: i18n.translate('xpack.apm.localFilters.titles.transactionUrl', {
+      defaultMessage: 'Url',
+    }),
+    fieldName: TRANSACTION_URL,
+  },
+  browser: {
+    title: i18n.translate('xpack.apm.localFilters.titles.browser', {
+      defaultMessage: 'Browser',
+    }),
+    fieldName: USER_AGENT_NAME,
+  },
+  device: {
+    title: i18n.translate('xpack.apm.localFilters.titles.device', {
+      defaultMessage: 'Device',
+    }),
+    fieldName: USER_AGENT_DEVICE,
+  },
+  location: {
+    title: i18n.translate('xpack.apm.localFilters.titles.location', {
+      defaultMessage: 'Location',
+    }),
+    fieldName: CLIENT_GEO,
+  },
+  os: {
+    title: i18n.translate('xpack.apm.localFilters.titles.os', {
+      defaultMessage: 'OS',
+    }),
+    fieldName: USER_AGENT_OS,
+  },
 };
 
 export type LocalUIFilterName = keyof typeof filtersByName;
diff --git a/x-pack/plugins/apm/server/routes/create_apm_api.ts b/x-pack/plugins/apm/server/routes/create_apm_api.ts
index bdfb49fa30828..a34690aff43b4 100644
--- a/x-pack/plugins/apm/server/routes/create_apm_api.ts
+++ b/x-pack/plugins/apm/server/routes/create_apm_api.ts
@@ -59,6 +59,7 @@ import {
   transactionsLocalFiltersRoute,
   serviceNodesLocalFiltersRoute,
   uiFiltersEnvironmentsRoute,
+  rumOverviewLocalFiltersRoute,
 } from './ui_filters';
 import { createApi } from './create_api';
 import { serviceMapRoute, serviceMapServiceNodeRoute } from './service_map';
@@ -70,6 +71,11 @@ import {
   listCustomLinksRoute,
   customLinkTransactionRoute,
 } from './settings/custom_link';
+import {
+  rumClientMetricsRoute,
+  rumPageViewsTrendRoute,
+  rumPageLoadDistributionRoute,
+} from './rum_client';
 
 const createApmApi = () => {
   const api = createApi()
@@ -148,7 +154,13 @@ const createApmApi = () => {
     .add(updateCustomLinkRoute)
     .add(deleteCustomLinkRoute)
     .add(listCustomLinksRoute)
-    .add(customLinkTransactionRoute);
+    .add(customLinkTransactionRoute)
+
+    // Rum Overview
+    .add(rumOverviewLocalFiltersRoute)
+    .add(rumPageViewsTrendRoute)
+    .add(rumPageLoadDistributionRoute)
+    .add(rumClientMetricsRoute);
 
   return api;
 };
diff --git a/x-pack/plugins/apm/server/routes/rum_client.ts b/x-pack/plugins/apm/server/routes/rum_client.ts
new file mode 100644
index 0000000000000..9b5f6529b1783
--- /dev/null
+++ b/x-pack/plugins/apm/server/routes/rum_client.ts
@@ -0,0 +1,57 @@
+/*
+ * 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 * as t from 'io-ts';
+import { createRoute } from './create_route';
+import { setupRequest } from '../lib/helpers/setup_request';
+import { getClientMetrics } from '../lib/rum_client/get_client_metrics';
+import { rangeRt, uiFiltersRt } from './default_api_types';
+import { getPageViewTrends } from '../lib/rum_client/get_page_view_trends';
+import { getPageLoadDistribution } from '../lib/rum_client/get_page_load_distribution';
+
+export const percentileRangeRt = t.partial({
+  minPercentile: t.string,
+  maxPercentile: t.string,
+});
+
+export const rumClientMetricsRoute = createRoute(() => ({
+  path: '/api/apm/rum/client-metrics',
+  params: {
+    query: t.intersection([uiFiltersRt, rangeRt]),
+  },
+  handler: async ({ context, request }) => {
+    const setup = await setupRequest(context, request);
+
+    return getClientMetrics({ setup });
+  },
+}));
+
+export const rumPageLoadDistributionRoute = createRoute(() => ({
+  path: '/api/apm/rum-client/page-load-distribution',
+  params: {
+    query: t.intersection([uiFiltersRt, rangeRt, percentileRangeRt]),
+  },
+  handler: async ({ context, request }) => {
+    const setup = await setupRequest(context, request);
+
+    const {
+      query: { minPercentile, maxPercentile },
+    } = context.params;
+
+    return getPageLoadDistribution({ setup, minPercentile, maxPercentile });
+  },
+}));
+
+export const rumPageViewsTrendRoute = createRoute(() => ({
+  path: '/api/apm/rum-client/page-view-trends',
+  params: {
+    query: t.intersection([uiFiltersRt, rangeRt]),
+  },
+  handler: async ({ context, request }) => {
+    const setup = await setupRequest(context, request);
+    return getPageViewTrends({ setup });
+  },
+}));
diff --git a/x-pack/plugins/apm/server/routes/ui_filters.ts b/x-pack/plugins/apm/server/routes/ui_filters.ts
index 8f4ef94b86ac5..280645d4de8d0 100644
--- a/x-pack/plugins/apm/server/routes/ui_filters.ts
+++ b/x-pack/plugins/apm/server/routes/ui_filters.ts
@@ -29,6 +29,7 @@ import { createRoute } from './create_route';
 import { uiFiltersRt, rangeRt } from './default_api_types';
 import { jsonRt } from '../../common/runtime_types/json_rt';
 import { getServiceNodesProjection } from '../../common/projections/service_nodes';
+import { getRumOverviewProjection } from '../../common/projections/rum_overview';
 
 export const uiFiltersEnvironmentsRoute = createRoute(() => ({
   path: '/api/apm/ui_filters/environments',
@@ -221,6 +222,16 @@ export const serviceNodesLocalFiltersRoute = createLocalFiltersRoute({
   }),
 });
 
+export const rumOverviewLocalFiltersRoute = createLocalFiltersRoute({
+  path: '/api/apm/ui_filters/local_filters/rumOverview',
+  getProjection: ({ setup }) => {
+    return getRumOverviewProjection({
+      setup,
+    });
+  },
+  queryRt: t.type({}),
+});
+
 type BaseQueryType = typeof localUiBaseQueryRt;
 
 type GetProjection<
diff --git a/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts b/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts
index 0739e8e6120bf..6ee26caa4ef7c 100644
--- a/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts
+++ b/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts
@@ -137,6 +137,15 @@ export interface AggregationOptionsByType {
     >;
     keyed?: boolean;
   };
+  auto_date_histogram: {
+    field: string;
+    buckets: number;
+  };
+  percentile_ranks: {
+    field: string;
+    values: string[];
+    keyed?: boolean;
+  };
 }
 
 type AggregationType = keyof AggregationOptionsByType;
@@ -301,6 +310,23 @@ interface AggregationResponsePart<
       ? Record<string, DateRangeBucket>
       : { buckets: DateRangeBucket[] };
   };
+  auto_date_histogram: {
+    buckets: Array<
+      {
+        doc_count: number;
+        key: number;
+        key_as_string: string;
+      } & BucketSubAggregationResponse<
+        TAggregationOptionsMap['aggs'],
+        TDocument
+      >
+    >;
+    interval: string;
+  };
+
+  percentile_ranks: {
+    values: Record<string, number> | Array<{ key: number; value: number }>;
+  };
 }
 
 // Type for debugging purposes. If you see an error in AggregationResponseMap
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 5ba2541cbb050..8d604c59daac9 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -4229,7 +4229,6 @@
     "xpack.apm.jvmsTable.noJvmsLabel": "JVM が見つかりませんでした",
     "xpack.apm.jvmsTable.nonHeapMemoryColumnLabel": "非ヒープ領域の平均",
     "xpack.apm.jvmsTable.threadCountColumnLabel": "最大スレッド数",
-    "xpack.apm.kueryBar.disabledPlaceholder": "サービスマップの検索は利用できません",
     "xpack.apm.kueryBar.placeholder": "検索 {event, select,\n            transaction {トランザクション}\n            metric {メトリック}\n            error {エラー}\n             other {その他}\n          } (E.g. {queryExample})",
     "xpack.apm.license.betaBadge": "ベータ",
     "xpack.apm.license.betaTooltipMessage": "現在、この機能はベータです。不具合を見つけた場合やご意見がある場合、サポートに問い合わせるか、またはディスカッションフォーラムにご報告ください。",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index cddc9b6d38ad5..5dbe9e5ccc07e 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -4232,7 +4232,6 @@
     "xpack.apm.jvmsTable.noJvmsLabel": "未找到任何 JVM",
     "xpack.apm.jvmsTable.nonHeapMemoryColumnLabel": "非堆内存平均值",
     "xpack.apm.jvmsTable.threadCountColumnLabel": "线程计数最大值",
-    "xpack.apm.kueryBar.disabledPlaceholder": "搜索不适用于服务地图",
     "xpack.apm.kueryBar.placeholder": "搜索{event, select,\n            transaction {事务}\n            metric {指标}\n            error {错误}\n            other {事务、错误和指标}\n          }（例如 {queryExample}）",
     "xpack.apm.license.betaBadge": "公测版",
     "xpack.apm.license.betaTooltipMessage": "此功能当前为公测版。如果遇到任何错误或有任何反馈，请报告问题或访问我们的论坛。",

From 0c477478a4055aa294d85d851449da50a0a6d224 Mon Sep 17 00:00:00 2001
From: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Date: Thu, 18 Jun 2020 14:42:27 -0400
Subject: [PATCH 41/63] [Ingest Manager] Use long polling for agent checkin
 (#68922)

---
 .../ingest_manager/common/constants/agent.ts  |   2 +
 .../ingest_manager/common/types/index.ts      |   1 +
 x-pack/plugins/ingest_manager/package.json    |   5 +-
 .../ingest_manager/server/constants/index.ts  |   2 +
 x-pack/plugins/ingest_manager/server/index.ts |   1 +
 .../plugins/ingest_manager/server/plugin.ts   |   4 +
 .../server/routes/agent/handlers.ts           |  40 ++--
 .../server/routes/agent/index.ts              |   6 +-
 .../server/services/agent_config.ts           |   2 -
 .../server/services/agents/actions.ts         |   9 +
 .../server/services/agents/checkin.test.ts    | 136 ------------
 .../server/services/agents/checkin.ts         | 193 ------------------
 .../server/services/agents/checkin/index.ts   | 110 ++++++++++
 .../services/agents/checkin/rxjs_utils.ts     |  43 ++++
 .../server/services/agents/checkin/state.ts   |  48 +++++
 .../agents/checkin/state_connected_agents.ts  |  79 +++++++
 .../agents/checkin/state_new_actions.ts       | 183 +++++++++++++++++
 .../server/services/app_context.ts            |   9 +-
 x-pack/plugins/ingest_manager/yarn.lock       |   1 +
 .../apis/fleet/agents/checkin.ts              |   3 +-
 x-pack/test/api_integration/config.ts         |   1 +
 .../es_archives/fleet/agents/data.json        |   2 +-
 yarn.lock                                     |   7 +
 23 files changed, 534 insertions(+), 353 deletions(-)
 delete mode 100644 x-pack/plugins/ingest_manager/server/services/agents/checkin.test.ts
 delete mode 100644 x-pack/plugins/ingest_manager/server/services/agents/checkin.ts
 create mode 100644 x-pack/plugins/ingest_manager/server/services/agents/checkin/index.ts
 create mode 100644 x-pack/plugins/ingest_manager/server/services/agents/checkin/rxjs_utils.ts
 create mode 100644 x-pack/plugins/ingest_manager/server/services/agents/checkin/state.ts
 create mode 100644 x-pack/plugins/ingest_manager/server/services/agents/checkin/state_connected_agents.ts
 create mode 100644 x-pack/plugins/ingest_manager/server/services/agents/checkin/state_new_actions.ts
 create mode 120000 x-pack/plugins/ingest_manager/yarn.lock

diff --git a/x-pack/plugins/ingest_manager/common/constants/agent.ts b/x-pack/plugins/ingest_manager/common/constants/agent.ts
index f3990ba78c539..e9226fa684925 100644
--- a/x-pack/plugins/ingest_manager/common/constants/agent.ts
+++ b/x-pack/plugins/ingest_manager/common/constants/agent.ts
@@ -14,3 +14,5 @@ export const AGENT_TYPE_TEMPORARY = 'TEMPORARY';
 
 export const AGENT_POLLING_THRESHOLD_MS = 30000;
 export const AGENT_POLLING_INTERVAL = 1000;
+export const AGENT_UPDATE_LAST_CHECKIN_INTERVAL_MS = 30000;
+export const AGENT_UPDATE_ACTIONS_INTERVAL_MS = 5000;
diff --git a/x-pack/plugins/ingest_manager/common/types/index.ts b/x-pack/plugins/ingest_manager/common/types/index.ts
index 800e77a6a2742..7f81b04f5e84a 100644
--- a/x-pack/plugins/ingest_manager/common/types/index.ts
+++ b/x-pack/plugins/ingest_manager/common/types/index.ts
@@ -15,6 +15,7 @@ export interface IngestManagerConfigType {
   fleet: {
     enabled: boolean;
     tlsCheckDisabled: boolean;
+    pollingRequestTimeout: number;
     kibana: {
       host?: string;
       ca_sha256?: string;
diff --git a/x-pack/plugins/ingest_manager/package.json b/x-pack/plugins/ingest_manager/package.json
index 052d3d0b42c7e..8826ed57ab106 100644
--- a/x-pack/plugins/ingest_manager/package.json
+++ b/x-pack/plugins/ingest_manager/package.json
@@ -3,5 +3,8 @@
   "name": "ingest-manager",
   "version": "8.0.0",
   "private": true,
-  "license": "Elastic-License"
+  "license": "Elastic-License",
+  "dependencies": {
+    "abort-controller": "^3.0.0"
+  }
 }
diff --git a/x-pack/plugins/ingest_manager/server/constants/index.ts b/x-pack/plugins/ingest_manager/server/constants/index.ts
index 6e633c04ed816..4d60b9031414e 100644
--- a/x-pack/plugins/ingest_manager/server/constants/index.ts
+++ b/x-pack/plugins/ingest_manager/server/constants/index.ts
@@ -9,6 +9,8 @@ export {
   AGENT_TYPE_TEMPORARY,
   AGENT_POLLING_THRESHOLD_MS,
   AGENT_POLLING_INTERVAL,
+  AGENT_UPDATE_LAST_CHECKIN_INTERVAL_MS,
+  AGENT_UPDATE_ACTIONS_INTERVAL_MS,
   INDEX_PATTERN_PLACEHOLDER_SUFFIX,
   // Routes
   PLUGIN_ID,
diff --git a/x-pack/plugins/ingest_manager/server/index.ts b/x-pack/plugins/ingest_manager/server/index.ts
index 84408b60d3edb..f6b2d7ccc6d48 100644
--- a/x-pack/plugins/ingest_manager/server/index.ts
+++ b/x-pack/plugins/ingest_manager/server/index.ts
@@ -27,6 +27,7 @@ export const config = {
     fleet: schema.object({
       enabled: schema.boolean({ defaultValue: true }),
       tlsCheckDisabled: schema.boolean({ defaultValue: false }),
+      pollingRequestTimeout: schema.number({ defaultValue: 60000 }),
       kibana: schema.object({
         host: schema.maybe(schema.string()),
         ca_sha256: schema.maybe(schema.string()),
diff --git a/x-pack/plugins/ingest_manager/server/plugin.ts b/x-pack/plugins/ingest_manager/server/plugin.ts
index 0d53092a0a8ff..13301df471c53 100644
--- a/x-pack/plugins/ingest_manager/server/plugin.ts
+++ b/x-pack/plugins/ingest_manager/server/plugin.ts
@@ -55,6 +55,7 @@ import {
 } from './services';
 import { getAgentStatusById } from './services/agents';
 import { CloudSetup } from '../../cloud/server';
+import { agentCheckinState } from './services/agents/checkin/state';
 
 export interface IngestManagerSetupDeps {
   licensing: LicensingPluginSetup;
@@ -229,6 +230,8 @@ export class IngestManagerPlugin
       logger: this.logger,
     });
     licenseService.start(this.licensing$);
+    agentCheckinState.start();
+
     return {
       esIndexPatternService: new ESIndexPatternSavedObjectService(),
       agentService: {
@@ -240,5 +243,6 @@ export class IngestManagerPlugin
   public async stop() {
     appContextService.stop();
     licenseService.stop();
+    agentCheckinState.stop();
   }
 }
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 ae833b55137cc..0d1c77b8d697f 100644
--- a/x-pack/plugins/ingest_manager/server/routes/agent/handlers.ts
+++ b/x-pack/plugins/ingest_manager/server/routes/agent/handlers.ts
@@ -4,8 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { RequestHandler, KibanaRequest } from 'src/core/server';
+import { RequestHandler } from 'src/core/server';
 import { TypeOf } from '@kbn/config-schema';
+import { AbortController } from 'abort-controller';
 import {
   GetAgentsResponse,
   GetOneAgentResponse,
@@ -32,13 +33,6 @@ import * as AgentService from '../../services/agents';
 import * as APIKeyService from '../../services/api_keys';
 import { appContextService } from '../../services/app_context';
 
-export function getInternalUserSOClient(request: KibanaRequest) {
-  // soClient as kibana internal users, be carefull on how you use it, security is not enabled
-  return appContextService.getSavedObjects().getScopedClient(request, {
-    excludedWrappers: ['security'],
-  });
-}
-
 export const getAgentHandler: RequestHandler<TypeOf<
   typeof GetOneAgentRequestSchema.params
 >> = async (context, request, response) => {
@@ -176,14 +170,20 @@ export const postAgentCheckinHandler: RequestHandler<
   TypeOf<typeof PostAgentCheckinRequestSchema.body>
 > = async (context, request, response) => {
   try {
-    const soClient = getInternalUserSOClient(request);
+    const soClient = appContextService.getInternalUserSOClient(request);
     const res = APIKeyService.parseApiKeyFromHeaders(request.headers);
     const agent = await AgentService.getAgentByAccessAPIKeyId(soClient, res.apiKeyId);
+    const abortController = new AbortController();
+    request.events.aborted$.subscribe(() => {
+      abortController.abort();
+    });
+    const signal = abortController.signal;
     const { actions } = await AgentService.agentCheckin(
       soClient,
       agent,
       request.body.events || [],
-      request.body.local_metadata
+      request.body.local_metadata,
+      { signal }
     );
     const body: PostAgentCheckinResponse = {
       action: 'checkin',
@@ -198,16 +198,24 @@ export const postAgentCheckinHandler: RequestHandler<
     };
 
     return response.ok({ body });
-  } catch (e) {
-    if (e.isBoom && e.output.statusCode === 404) {
-      return response.notFound({
-        body: { message: `Agent ${request.params.agentId} not found` },
+  } catch (err) {
+    const logger = appContextService.getLogger();
+    if (err.isBoom) {
+      if (err.output.statusCode >= 500) {
+        logger.error(err);
+      }
+
+      return response.customError({
+        statusCode: err.output.statusCode,
+        body: { message: err.output.payload.message },
       });
     }
 
+    logger.error(err);
+
     return response.customError({
       statusCode: 500,
-      body: { message: e.message },
+      body: { message: err.message },
     });
   }
 };
@@ -218,7 +226,7 @@ export const postAgentEnrollHandler: RequestHandler<
   TypeOf<typeof PostAgentEnrollRequestSchema.body>
 > = async (context, request, response) => {
   try {
-    const soClient = getInternalUserSOClient(request);
+    const soClient = appContextService.getInternalUserSOClient(request);
     const { apiKeyId } = APIKeyService.parseApiKeyFromHeaders(request.headers);
     const enrollmentAPIKey = await APIKeyService.getEnrollmentAPIKeyById(soClient, apiKeyId);
 
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 78bb178dce402..87eee4622c80b 100644
--- a/x-pack/plugins/ingest_manager/server/routes/agent/index.ts
+++ b/x-pack/plugins/ingest_manager/server/routes/agent/index.ts
@@ -35,12 +35,12 @@ import {
   postAgentEnrollHandler,
   postAgentsUnenrollHandler,
   getAgentStatusForConfigHandler,
-  getInternalUserSOClient,
   putAgentsReassignHandler,
 } from './handlers';
 import { postAgentAcksHandlerBuilder } from './acks_handlers';
 import * as AgentService from '../../services/agents';
 import { postNewAgentActionHandlerBuilder } from './actions_handlers';
+import { appContextService } from '../../services';
 
 export const registerRoutes = (router: IRouter) => {
   // Get one
@@ -110,7 +110,9 @@ export const registerRoutes = (router: IRouter) => {
     postAgentAcksHandlerBuilder({
       acknowledgeAgentActions: AgentService.acknowledgeAgentActions,
       getAgentByAccessAPIKeyId: AgentService.getAgentByAccessAPIKeyId,
-      getSavedObjectsClientContract: getInternalUserSOClient,
+      getSavedObjectsClientContract: appContextService.getInternalUserSOClient.bind(
+        appContextService
+      ),
       saveAgentEvents: AgentService.saveAgentEvents,
     })
   );
diff --git a/x-pack/plugins/ingest_manager/server/services/agent_config.ts b/x-pack/plugins/ingest_manager/server/services/agent_config.ts
index 9e0386de74763..9c27e9b7a3a7a 100644
--- a/x-pack/plugins/ingest_manager/server/services/agent_config.ts
+++ b/x-pack/plugins/ingest_manager/server/services/agent_config.ts
@@ -65,8 +65,6 @@ class AgentConfigService {
       updated_by: user ? user.username : 'system',
     });
 
-    await this.triggerAgentConfigUpdatedEvent(soClient, 'updated', id);
-
     return (await this.get(soClient, id)) as AgentConfig;
   }
 
diff --git a/x-pack/plugins/ingest_manager/server/services/agents/actions.ts b/x-pack/plugins/ingest_manager/server/services/agents/actions.ts
index 236ad7df466b4..8d1b320c89ae6 100644
--- a/x-pack/plugins/ingest_manager/server/services/agents/actions.ts
+++ b/x-pack/plugins/ingest_manager/server/services/agents/actions.ts
@@ -77,6 +77,15 @@ export async function getAgentActionByIds(
   );
 }
 
+export async function getNewActionsSince(soClient: SavedObjectsClientContract, timestamp: string) {
+  const res = await soClient.find<AgentActionSOAttributes>({
+    type: AGENT_ACTION_SAVED_OBJECT_TYPE,
+    filter: `not ${AGENT_ACTION_SAVED_OBJECT_TYPE}.attributes.sent_at: * AND ${AGENT_ACTION_SAVED_OBJECT_TYPE}.attributes.created_at >= "${timestamp}"`,
+  });
+
+  return res.saved_objects.map(savedObjectToAgentAction);
+}
+
 export interface ActionsService {
   getAgent: (soClient: SavedObjectsClientContract, agentId: string) => Promise<Agent>;
 
diff --git a/x-pack/plugins/ingest_manager/server/services/agents/checkin.test.ts b/x-pack/plugins/ingest_manager/server/services/agents/checkin.test.ts
deleted file mode 100644
index 72a86d7c8158e..0000000000000
--- a/x-pack/plugins/ingest_manager/server/services/agents/checkin.test.ts
+++ /dev/null
@@ -1,136 +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 { shouldCreateConfigAction } from './checkin';
-import { Agent } from '../../types';
-
-function getAgent(data: Partial<Agent>) {
-  return { actions: [], ...data } as Agent;
-}
-
-describe('Agent checkin service', () => {
-  describe('shouldCreateConfigAction', () => {
-    it('should return false if the agent do not have an assigned config', () => {
-      const res = shouldCreateConfigAction(getAgent({}), []);
-
-      expect(res).toBeFalsy();
-    });
-
-    it('should return true if this is agent first checkin', () => {
-      const res = shouldCreateConfigAction(getAgent({ config_id: 'config1' }), []);
-
-      expect(res).toBeTruthy();
-    });
-
-    it('should return false agent is already running latest revision', () => {
-      const res = shouldCreateConfigAction(
-        getAgent({
-          config_id: 'config1',
-          last_checkin: '2018-01-02T00:00:00',
-          config_revision: 1,
-          config_newest_revision: 1,
-        }),
-        []
-      );
-
-      expect(res).toBeFalsy();
-    });
-
-    it('should return false agent has already latest revision config change action', () => {
-      const res = shouldCreateConfigAction(
-        getAgent({
-          config_id: 'config1',
-          last_checkin: '2018-01-02T00:00:00',
-          config_revision: 1,
-          config_newest_revision: 2,
-        }),
-        [
-          {
-            id: 'action1',
-            agent_id: 'agent1',
-            type: 'CONFIG_CHANGE',
-            created_at: new Date().toISOString(),
-            data: {
-              config: {
-                id: 'config1',
-                revision: 2,
-              },
-            },
-          },
-        ]
-      );
-
-      expect(res).toBeFalsy();
-    });
-
-    it('should return true agent has unrelated config change actions', () => {
-      const res = shouldCreateConfigAction(
-        getAgent({
-          config_id: 'config1',
-          last_checkin: '2018-01-02T00:00:00',
-          config_revision: 1,
-          config_newest_revision: 2,
-        }),
-        [
-          {
-            id: 'action1',
-            agent_id: 'agent1',
-            type: 'CONFIG_CHANGE',
-            created_at: new Date().toISOString(),
-            data: {
-              config: {
-                id: 'config2',
-                revision: 2,
-              },
-            },
-          },
-          {
-            id: 'action1',
-            agent_id: 'agent1',
-            type: 'CONFIG_CHANGE',
-            created_at: new Date().toISOString(),
-            data: {
-              config: {
-                id: 'config1',
-                revision: 1,
-              },
-            },
-          },
-        ]
-      );
-
-      expect(res).toBeTruthy();
-    });
-
-    it('should return true if this agent has a new revision', () => {
-      const res = shouldCreateConfigAction(
-        getAgent({
-          config_id: 'config1',
-          last_checkin: '2018-01-02T00:00:00',
-          config_revision: 1,
-          config_newest_revision: 2,
-        }),
-        []
-      );
-
-      expect(res).toBeTruthy();
-    });
-
-    it('should return true if this agent has no revision currently set', () => {
-      const res = shouldCreateConfigAction(
-        getAgent({
-          config_id: 'config1',
-          last_checkin: '2018-01-02T00:00:00',
-          config_revision: null,
-          config_newest_revision: 2,
-        }),
-        []
-      );
-
-      expect(res).toBeTruthy();
-    });
-  });
-});
diff --git a/x-pack/plugins/ingest_manager/server/services/agents/checkin.ts b/x-pack/plugins/ingest_manager/server/services/agents/checkin.ts
deleted file mode 100644
index 5bbc376051122..0000000000000
--- a/x-pack/plugins/ingest_manager/server/services/agents/checkin.ts
+++ /dev/null
@@ -1,193 +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 { SavedObjectsClientContract, SavedObjectsBulkCreateObject } from 'src/core/server';
-import {
-  Agent,
-  NewAgentEvent,
-  AgentEvent,
-  AgentAction,
-  AgentSOAttributes,
-  AgentEventSOAttributes,
-  AgentMetadata,
-} from '../../types';
-
-import { agentConfigService } from '../agent_config';
-import * as APIKeysService from '../api_keys';
-import { AGENT_SAVED_OBJECT_TYPE, AGENT_EVENT_SAVED_OBJECT_TYPE } from '../../constants';
-import { getAgentActionsForCheckin, createAgentAction } from './actions';
-import { appContextService } from '../app_context';
-
-export async function agentCheckin(
-  soClient: SavedObjectsClientContract,
-  agent: Agent,
-  events: NewAgentEvent[],
-  localMetadata?: any
-) {
-  const updateData: {
-    last_checkin: string;
-    default_api_key?: string;
-    default_api_key_id?: string;
-    local_metadata?: AgentMetadata;
-    current_error_events?: string;
-  } = {
-    last_checkin: new Date().toISOString(),
-  };
-
-  const actions = await getAgentActionsForCheckin(soClient, agent.id);
-
-  // Generate new agent config if config is updated
-  if (agent.config_id && shouldCreateConfigAction(agent, actions)) {
-    const {
-      attributes: { default_api_key: defaultApiKey },
-    } = await appContextService
-      .getEncryptedSavedObjects()
-      .getDecryptedAsInternalUser<AgentSOAttributes>(AGENT_SAVED_OBJECT_TYPE, agent.id);
-
-    const config = await agentConfigService.getFullConfig(soClient, agent.config_id);
-    if (config) {
-      // Assign output API keys
-      // We currently only support default ouput
-      if (!defaultApiKey) {
-        const outputAPIKey = await APIKeysService.generateOutputApiKey(
-          soClient,
-          'default',
-          agent.id
-        );
-        updateData.default_api_key = outputAPIKey.key;
-        updateData.default_api_key_id = outputAPIKey.id;
-      }
-      // Mutate the config to set the api token for this agent
-      config.outputs.default.api_key = defaultApiKey || updateData.default_api_key;
-
-      const configChangeAction = await createAgentAction(soClient, {
-        agent_id: agent.id,
-        type: 'CONFIG_CHANGE',
-        data: { config } as any,
-        created_at: new Date().toISOString(),
-        sent_at: undefined,
-      });
-      actions.push(configChangeAction);
-    }
-  }
-
-  const { updatedErrorEvents } = await processEventsForCheckin(soClient, agent, events);
-
-  // Persist changes
-  if (updatedErrorEvents) {
-    updateData.current_error_events = JSON.stringify(updatedErrorEvents);
-  }
-
-  await soClient.update<AgentSOAttributes>(AGENT_SAVED_OBJECT_TYPE, agent.id, updateData);
-
-  return { actions };
-}
-
-async function processEventsForCheckin(
-  soClient: SavedObjectsClientContract,
-  agent: Agent,
-  events: NewAgentEvent[]
-) {
-  const acknowledgedActionIds: string[] = [];
-  const updatedErrorEvents: Array<AgentEvent | NewAgentEvent> = [...agent.current_error_events];
-  for (const event of events) {
-    // @ts-ignore
-    event.config_id = agent.config_id;
-
-    if (isActionEvent(event)) {
-      acknowledgedActionIds.push(event.action_id as string);
-    }
-
-    if (isErrorOrState(event)) {
-      // Remove any global or specific to a stream event
-      const existingEventIndex = updatedErrorEvents.findIndex(
-        (e) => e.stream_id === event.stream_id
-      );
-      if (existingEventIndex >= 0) {
-        updatedErrorEvents.splice(existingEventIndex, 1);
-      }
-      if (event.type === 'ERROR') {
-        updatedErrorEvents.push(event);
-      }
-    }
-  }
-
-  if (events.length > 0) {
-    await createEventsForAgent(soClient, agent.id, events);
-  }
-
-  return {
-    acknowledgedActionIds,
-    updatedErrorEvents,
-  };
-}
-
-async function createEventsForAgent(
-  soClient: SavedObjectsClientContract,
-  agentId: string,
-  events: NewAgentEvent[]
-) {
-  const objects: Array<SavedObjectsBulkCreateObject<AgentEventSOAttributes>> = events.map(
-    (eventData) => {
-      return {
-        attributes: {
-          ...eventData,
-          payload: eventData.payload ? JSON.stringify(eventData.payload) : undefined,
-        },
-        type: AGENT_EVENT_SAVED_OBJECT_TYPE,
-      };
-    }
-  );
-
-  return soClient.bulkCreate(objects);
-}
-
-function isErrorOrState(event: AgentEvent | NewAgentEvent) {
-  return event.type === 'STATE' || event.type === 'ERROR';
-}
-
-function isActionEvent(event: AgentEvent | NewAgentEvent) {
-  return (
-    event.type === 'ACTION' && (event.subtype === 'ACKNOWLEDGED' || event.subtype === 'UNKNOWN')
-  );
-}
-
-export function shouldCreateConfigAction(agent: Agent, actions: AgentAction[]): boolean {
-  if (!agent.config_id) {
-    return false;
-  }
-
-  const isFirstCheckin = !agent.last_checkin;
-  if (isFirstCheckin) {
-    return true;
-  }
-
-  const isAgentConfigOutdated =
-    // Config reassignment
-    (!agent.config_revision && agent.config_newest_revision) ||
-    // new revision of a config
-    (agent.config_revision &&
-      agent.config_newest_revision &&
-      agent.config_revision < agent.config_newest_revision);
-
-  if (!isAgentConfigOutdated) {
-    return false;
-  }
-
-  const isActionAlreadyGenerated = !!actions.find((action) => {
-    if (!action.data || action.type !== 'CONFIG_CHANGE') {
-      return false;
-    }
-
-    const { data } = action;
-
-    return (
-      data.config.id === agent.config_id && data.config.revision === agent.config_newest_revision
-    );
-  });
-
-  return !isActionAlreadyGenerated;
-}
diff --git a/x-pack/plugins/ingest_manager/server/services/agents/checkin/index.ts b/x-pack/plugins/ingest_manager/server/services/agents/checkin/index.ts
new file mode 100644
index 0000000000000..7c6641bbb5faa
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/server/services/agents/checkin/index.ts
@@ -0,0 +1,110 @@
+/*
+ * 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 { SavedObjectsClientContract, SavedObjectsBulkCreateObject } from 'src/core/server';
+import {
+  Agent,
+  NewAgentEvent,
+  AgentEvent,
+  AgentSOAttributes,
+  AgentEventSOAttributes,
+  AgentMetadata,
+} from '../../../types';
+
+import { AGENT_SAVED_OBJECT_TYPE, AGENT_EVENT_SAVED_OBJECT_TYPE } from '../../../constants';
+import { agentCheckinState } from './state';
+import { getAgentActionsForCheckin } from '../actions';
+
+export async function agentCheckin(
+  soClient: SavedObjectsClientContract,
+  agent: Agent,
+  events: NewAgentEvent[],
+  localMetadata?: any,
+  options?: { signal: AbortSignal }
+) {
+  const updateData: {
+    local_metadata?: AgentMetadata;
+    current_error_events?: string;
+  } = {};
+  const { updatedErrorEvents } = await processEventsForCheckin(soClient, agent, events);
+  if (updatedErrorEvents) {
+    updateData.current_error_events = JSON.stringify(updatedErrorEvents);
+  }
+  if (localMetadata) {
+    updateData.local_metadata = localMetadata;
+  }
+  if (Object.keys(updateData).length > 0) {
+    await soClient.update<AgentSOAttributes>(AGENT_SAVED_OBJECT_TYPE, agent.id, updateData);
+  }
+
+  // Check if some actions are not acknowledged
+  let actions = await getAgentActionsForCheckin(soClient, agent.id);
+  if (actions.length > 0) {
+    return { actions };
+  }
+
+  // Wait for new actions
+  actions = await agentCheckinState.subscribeToNewActions(soClient, agent, options);
+
+  return { actions };
+}
+
+async function processEventsForCheckin(
+  soClient: SavedObjectsClientContract,
+  agent: Agent,
+  events: NewAgentEvent[]
+) {
+  const updatedErrorEvents: Array<AgentEvent | NewAgentEvent> = [...agent.current_error_events];
+  for (const event of events) {
+    // @ts-ignore
+    event.config_id = agent.config_id;
+
+    if (isErrorOrState(event)) {
+      // Remove any global or specific to a stream event
+      const existingEventIndex = updatedErrorEvents.findIndex(
+        (e) => e.stream_id === event.stream_id
+      );
+      if (existingEventIndex >= 0) {
+        updatedErrorEvents.splice(existingEventIndex, 1);
+      }
+      if (event.type === 'ERROR') {
+        updatedErrorEvents.push(event);
+      }
+    }
+  }
+
+  if (events.length > 0) {
+    await createEventsForAgent(soClient, agent.id, events);
+  }
+
+  return {
+    updatedErrorEvents,
+  };
+}
+
+async function createEventsForAgent(
+  soClient: SavedObjectsClientContract,
+  agentId: string,
+  events: NewAgentEvent[]
+) {
+  const objects: Array<SavedObjectsBulkCreateObject<AgentEventSOAttributes>> = events.map(
+    (eventData) => {
+      return {
+        attributes: {
+          ...eventData,
+          payload: eventData.payload ? JSON.stringify(eventData.payload) : undefined,
+        },
+        type: AGENT_EVENT_SAVED_OBJECT_TYPE,
+      };
+    }
+  );
+
+  return soClient.bulkCreate(objects);
+}
+
+function isErrorOrState(event: AgentEvent | NewAgentEvent) {
+  return event.type === 'STATE' || event.type === 'ERROR';
+}
diff --git a/x-pack/plugins/ingest_manager/server/services/agents/checkin/rxjs_utils.ts b/x-pack/plugins/ingest_manager/server/services/agents/checkin/rxjs_utils.ts
new file mode 100644
index 0000000000000..1f9bba8b12be4
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/server/services/agents/checkin/rxjs_utils.ts
@@ -0,0 +1,43 @@
+/*
+ * 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 { Observable } from 'rxjs';
+
+export class AbortError extends Error {}
+
+export const toPromiseAbortable = <T>(
+  observable: Observable<T>,
+  signal?: AbortSignal
+): Promise<T> =>
+  new Promise((resolve, reject) => {
+    if (signal && signal.aborted) {
+      reject(new AbortError('Aborted'));
+      return;
+    }
+
+    const listener = () => {
+      subscription.unsubscribe();
+      reject(new AbortError('Aborted'));
+    };
+    const cleanup = () => {
+      if (signal) {
+        signal.removeEventListener('abort', listener);
+      }
+    };
+    const subscription = observable.subscribe(
+      (data) => {
+        cleanup();
+        resolve(data);
+      },
+      (err) => {
+        cleanup();
+        reject(err);
+      }
+    );
+
+    if (signal) {
+      signal.addEventListener('abort', listener, { once: true });
+    }
+  });
diff --git a/x-pack/plugins/ingest_manager/server/services/agents/checkin/state.ts b/x-pack/plugins/ingest_manager/server/services/agents/checkin/state.ts
new file mode 100644
index 0000000000000..69d61171b21fc
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/server/services/agents/checkin/state.ts
@@ -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 { SavedObjectsClientContract } from 'src/core/server';
+import { Agent } from '../../../types';
+import { appContextService } from '../../app_context';
+import { agentCheckinStateConnectedAgentsFactory } from './state_connected_agents';
+import { agentCheckinStateNewActionsFactory } from './state_new_actions';
+import { AGENT_UPDATE_LAST_CHECKIN_INTERVAL_MS } from '../../../constants';
+
+function agentCheckinStateFactory() {
+  const agentConnected = agentCheckinStateConnectedAgentsFactory();
+  const newActions = agentCheckinStateNewActionsFactory();
+  let interval: NodeJS.Timeout;
+  function start() {
+    interval = setInterval(async () => {
+      try {
+        await agentConnected.updateLastCheckinAt();
+      } catch (err) {
+        appContextService.getLogger().error(err);
+      }
+    }, AGENT_UPDATE_LAST_CHECKIN_INTERVAL_MS);
+  }
+
+  function stop() {
+    if (interval) {
+      clearInterval(interval);
+    }
+  }
+  return {
+    subscribeToNewActions: (
+      soClient: SavedObjectsClientContract,
+      agent: Agent,
+      options?: { signal: AbortSignal }
+    ) =>
+      agentConnected.wrapPromise(
+        agent.id,
+        newActions.subscribeToNewActions(soClient, agent, options)
+      ),
+    start,
+    stop,
+  };
+}
+
+export const agentCheckinState = agentCheckinStateFactory();
diff --git a/x-pack/plugins/ingest_manager/server/services/agents/checkin/state_connected_agents.ts b/x-pack/plugins/ingest_manager/server/services/agents/checkin/state_connected_agents.ts
new file mode 100644
index 0000000000000..96e006b78f00f
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/server/services/agents/checkin/state_connected_agents.ts
@@ -0,0 +1,79 @@
+/*
+ * 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, SavedObjectsBulkUpdateObject } from 'src/core/server';
+import { appContextService } from '../../app_context';
+import { AgentSOAttributes } from '../../../types';
+import { AGENT_SAVED_OBJECT_TYPE } from '../../../constants';
+
+function getInternalUserSOClient() {
+  const fakeRequest = ({
+    headers: {},
+    getBasePath: () => '',
+    path: '/',
+    route: { settings: {} },
+    url: {
+      href: '/',
+    },
+    raw: {
+      req: {
+        url: '/',
+      },
+    },
+  } as unknown) as KibanaRequest;
+
+  return appContextService.getInternalUserSOClient(fakeRequest);
+}
+export function agentCheckinStateConnectedAgentsFactory() {
+  const connectedAgentsIds = new Set<string>();
+  let agentToUpdate = new Set<string>();
+
+  function addAgent(agentId: string) {
+    connectedAgentsIds.add(agentId);
+    agentToUpdate.add(agentId);
+  }
+
+  function removeAgent(agentId: string) {
+    connectedAgentsIds.delete(agentId);
+  }
+
+  async function wrapPromise<T>(agentId: string, p: Promise<T>): Promise<T> {
+    try {
+      addAgent(agentId);
+      const res = await p;
+      removeAgent(agentId);
+      return res;
+    } catch (err) {
+      removeAgent(agentId);
+      throw err;
+    }
+  }
+
+  async function updateLastCheckinAt() {
+    if (agentToUpdate.size === 0) {
+      return;
+    }
+    const internalSOClient = getInternalUserSOClient();
+    const now = new Date().toISOString();
+    const updates: Array<SavedObjectsBulkUpdateObject<AgentSOAttributes>> = [
+      ...connectedAgentsIds.values(),
+    ].map((agentId) => ({
+      type: AGENT_SAVED_OBJECT_TYPE,
+      id: agentId,
+      attributes: {
+        last_checkin: now,
+      },
+    }));
+
+    agentToUpdate = new Set<string>([...connectedAgentsIds.values()]);
+    await internalSOClient.bulkUpdate<AgentSOAttributes>(updates, { refresh: false });
+  }
+
+  return {
+    wrapPromise,
+    updateLastCheckinAt,
+  };
+}
diff --git a/x-pack/plugins/ingest_manager/server/services/agents/checkin/state_new_actions.ts b/x-pack/plugins/ingest_manager/server/services/agents/checkin/state_new_actions.ts
new file mode 100644
index 0000000000000..0f30ab409f381
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/server/services/agents/checkin/state_new_actions.ts
@@ -0,0 +1,183 @@
+/*
+ * 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 { timer, from, Observable, TimeoutError } from 'rxjs';
+import {
+  shareReplay,
+  distinctUntilKeyChanged,
+  switchMap,
+  mergeMap,
+  merge,
+  filter,
+  timeout,
+  take,
+} from 'rxjs/operators';
+import { SavedObjectsClientContract, KibanaRequest } from 'src/core/server';
+import {
+  Agent,
+  AgentAction,
+  AgentSOAttributes,
+  AgentConfig,
+  FullAgentConfig,
+} from '../../../types';
+import { agentConfigService } from '../../agent_config';
+import * as APIKeysService from '../../api_keys';
+import { AGENT_SAVED_OBJECT_TYPE, AGENT_UPDATE_ACTIONS_INTERVAL_MS } from '../../../constants';
+import { createAgentAction, getNewActionsSince } from '../actions';
+import { appContextService } from '../../app_context';
+import { toPromiseAbortable, AbortError } from './rxjs_utils';
+
+function getInternalUserSOClient() {
+  const fakeRequest = ({
+    headers: {},
+    getBasePath: () => '',
+    path: '/',
+    route: { settings: {} },
+    url: {
+      href: '/',
+    },
+    raw: {
+      req: {
+        url: '/',
+      },
+    },
+  } as unknown) as KibanaRequest;
+
+  return appContextService.getInternalUserSOClient(fakeRequest);
+}
+
+function createAgentConfigSharedObservable(configId: string) {
+  const internalSOClient = getInternalUserSOClient();
+  return timer(0, AGENT_UPDATE_ACTIONS_INTERVAL_MS).pipe(
+    switchMap(() =>
+      from(agentConfigService.get(internalSOClient, configId) as Promise<AgentConfig>)
+    ),
+    distinctUntilKeyChanged('revision'),
+    switchMap((data) => from(agentConfigService.getFullConfig(internalSOClient, configId))),
+    shareReplay({ refCount: true, bufferSize: 1 })
+  );
+}
+
+function createNewActionsSharedObservable(): Observable<AgentAction[]> {
+  return timer(0, AGENT_UPDATE_ACTIONS_INTERVAL_MS).pipe(
+    switchMap(() => {
+      const internalSOClient = getInternalUserSOClient();
+
+      return from(getNewActionsSince(internalSOClient, new Date().toISOString()));
+    }),
+    shareReplay({ refCount: true, bufferSize: 1 })
+  );
+}
+
+async function getOrCreateAgentDefaultOutputAPIKey(
+  soClient: SavedObjectsClientContract,
+  agent: Agent
+): Promise<string> {
+  const {
+    attributes: { default_api_key: defaultApiKey },
+  } = await appContextService
+    .getEncryptedSavedObjects()
+    .getDecryptedAsInternalUser<AgentSOAttributes>(AGENT_SAVED_OBJECT_TYPE, agent.id);
+
+  if (defaultApiKey) {
+    return defaultApiKey;
+  }
+
+  const outputAPIKey = await APIKeysService.generateOutputApiKey(soClient, 'default', agent.id);
+  await soClient.update<AgentSOAttributes>(AGENT_SAVED_OBJECT_TYPE, agent.id, {
+    default_api_key: outputAPIKey.key,
+    default_api_key_id: outputAPIKey.id,
+  });
+
+  return outputAPIKey.key;
+}
+
+async function createAgentActionFromConfigIfOutdated(
+  soClient: SavedObjectsClientContract,
+  agent: Agent,
+  config: FullAgentConfig | null
+) {
+  if (!config || !config.revision) {
+    return;
+  }
+  const isAgentConfigOutdated = !agent.config_revision || agent.config_revision < config.revision;
+  if (!isAgentConfigOutdated) {
+    return;
+  }
+
+  // Deep clone !not supporting Date, and undefined value.
+  const newConfig = JSON.parse(JSON.stringify(config));
+
+  // Mutate the config to set the api token for this agent
+  newConfig.outputs.default.api_key = await getOrCreateAgentDefaultOutputAPIKey(soClient, agent);
+
+  const configChangeAction = await createAgentAction(soClient, {
+    agent_id: agent.id,
+    type: 'CONFIG_CHANGE',
+    data: { config: newConfig } as any,
+    created_at: new Date().toISOString(),
+    sent_at: undefined,
+  });
+
+  return [configChangeAction];
+}
+
+export function agentCheckinStateNewActionsFactory() {
+  // Shared Observables
+  const agentConfigs$ = new Map<string, Observable<FullAgentConfig | null>>();
+  const newActions$ = createNewActionsSharedObservable();
+
+  async function subscribeToNewActions(
+    soClient: SavedObjectsClientContract,
+    agent: Agent,
+    options?: { signal: AbortSignal }
+  ): Promise<AgentAction[]> {
+    if (!agent.config_id) {
+      throw new Error('Agent do not have a config');
+    }
+    const configId = agent.config_id;
+    if (!agentConfigs$.has(configId)) {
+      agentConfigs$.set(configId, createAgentConfigSharedObservable(configId));
+    }
+    const agentConfig$ = agentConfigs$.get(configId);
+    if (!agentConfig$) {
+      throw new Error(`Invalid state no observable for config ${configId}`);
+    }
+    const stream$ = agentConfig$.pipe(
+      timeout(appContextService.getConfig()?.fleet.pollingRequestTimeout || 0),
+      mergeMap((config) => createAgentActionFromConfigIfOutdated(soClient, agent, config)),
+      merge(newActions$),
+      mergeMap(async (data) => {
+        if (!data) {
+          return;
+        }
+        const newActions = data.filter((action) => action.agent_id);
+        if (newActions.length === 0) {
+          return;
+        }
+
+        return newActions;
+      }),
+      filter((data) => data !== undefined),
+      take(1)
+    );
+    try {
+      const data = await toPromiseAbortable(stream$, options?.signal);
+
+      return data || [];
+    } catch (err) {
+      if (err instanceof TimeoutError || err instanceof AbortError) {
+        return [];
+      }
+
+      throw err;
+    }
+  }
+
+  return {
+    subscribeToNewActions,
+  };
+}
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 81a16caa8ce9e..5ed6f7c5e54d1 100644
--- a/x-pack/plugins/ingest_manager/server/services/app_context.ts
+++ b/x-pack/plugins/ingest_manager/server/services/app_context.ts
@@ -5,7 +5,7 @@
  */
 import { BehaviorSubject, Observable } from 'rxjs';
 import { first } from 'rxjs/operators';
-import { SavedObjectsServiceStart, HttpServiceSetup, Logger } from 'src/core/server';
+import { SavedObjectsServiceStart, HttpServiceSetup, Logger, KibanaRequest } from 'src/core/server';
 import {
   EncryptedSavedObjectsClient,
   EncryptedSavedObjectsPluginSetup,
@@ -89,6 +89,13 @@ class AppContextService {
     return this.savedObjects;
   }
 
+  public getInternalUserSOClient(request: KibanaRequest) {
+    // soClient as kibana internal users, be carefull on how you use it, security is not enabled
+    return appContextService.getSavedObjects().getScopedClient(request, {
+      excludedWrappers: ['security'],
+    });
+  }
+
   public getIsProductionMode() {
     return this.isProductionMode;
   }
diff --git a/x-pack/plugins/ingest_manager/yarn.lock b/x-pack/plugins/ingest_manager/yarn.lock
new file mode 120000
index 0000000000000..6e09764ec763b
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/yarn.lock
@@ -0,0 +1 @@
+../../../yarn.lock
\ No newline at end of file
diff --git a/x-pack/test/api_integration/apis/fleet/agents/checkin.ts b/x-pack/test/api_integration/apis/fleet/agents/checkin.ts
index 47756b02a8d22..d24f7f495a06c 100644
--- a/x-pack/test/api_integration/apis/fleet/agents/checkin.ts
+++ b/x-pack/test/api_integration/apis/fleet/agents/checkin.ts
@@ -8,7 +8,7 @@ import expect from '@kbn/expect';
 import uuid from 'uuid';
 
 import { FtrProviderContext } from '../../../ftr_provider_context';
-import { getSupertestWithoutAuth } from './services';
+import { getSupertestWithoutAuth, setupIngest } from './services';
 
 export default function (providerContext: FtrProviderContext) {
   const { getService } = providerContext;
@@ -44,6 +44,7 @@ export default function (providerContext: FtrProviderContext) {
         },
       });
     });
+    setupIngest(providerContext);
     after(async () => {
       await esArchiver.unload('fleet/agents');
     });
diff --git a/x-pack/test/api_integration/config.ts b/x-pack/test/api_integration/config.ts
index 71da903d33b29..4a333869a9549 100644
--- a/x-pack/test/api_integration/config.ts
+++ b/x-pack/test/api_integration/config.ts
@@ -29,6 +29,7 @@ export async function getApiIntegrationConfig({ readConfigFile }: FtrConfigProvi
         '--optimize.enabled=false',
         '--telemetry.optIn=true',
         '--xpack.ingestManager.enabled=true',
+        '--xpack.ingestManager.fleet.pollingRequestTimeout=5000', // 5 seconds
         '--xpack.securitySolution.alertResultListDefaultDateRange.from=2018-01-10T00:00:00.000Z',
       ],
     },
diff --git a/x-pack/test/functional/es_archives/fleet/agents/data.json b/x-pack/test/functional/es_archives/fleet/agents/data.json
index 1739f583b2e87..047f26a3f443c 100644
--- a/x-pack/test/functional/es_archives/fleet/agents/data.json
+++ b/x-pack/test/functional/es_archives/fleet/agents/data.json
@@ -9,7 +9,7 @@
         "access_api_key_id": "api-key-2",
         "active": true,
         "shared_id": "agent1_filebeat",
-        "config_id": "1",
+        "config_id": "config1",
         "type": "PERMANENT",
         "local_metadata": {},
         "user_provided_metadata": {}
diff --git a/yarn.lock b/yarn.lock
index 256c8642a02ae..9a9bf98e06c31 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6410,6 +6410,13 @@ abort-controller@^2.0.3:
   dependencies:
     event-target-shim "^5.0.0"
 
+abort-controller@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
+  integrity sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==
+  dependencies:
+    event-target-shim "^5.0.0"
+
 abortcontroller-polyfill@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.4.0.tgz#0d5eb58e522a461774af8086414f68e1dda7a6c4"

From b41ade3588479e905443f9b58e60eb11276f59e4 Mon Sep 17 00:00:00 2001
From: "Christiane (Tina) Heiligers" <christiane.heiligers@elastic.co>
Date: Thu, 18 Jun 2020 11:50:03 -0700
Subject: [PATCH 42/63] Fixes home page welcome link (#69539)

---
 .../components/__snapshots__/welcome.test.tsx.snap          | 6 +++---
 src/plugins/home/public/application/components/welcome.tsx  | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap b/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap
index bdf1f075967cb..4e66fd9e14c81 100644
--- a/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap
+++ b/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap
@@ -140,7 +140,7 @@ exports[`should render a Welcome screen with the telemetry disclaimer 1`] = `
               values={Object {}}
             />
             <EuiLink
-              href="rootapp/management/kibana/settings"
+              href="rootmanagement/kibana/settings"
             >
               <FormattedMessage
                 defaultMessage="disable usage data here."
@@ -238,7 +238,7 @@ exports[`should render a Welcome screen with the telemetry disclaimer when optIn
               values={Object {}}
             />
             <EuiLink
-              href="rootapp/management/kibana/settings"
+              href="rootmanagement/kibana/settings"
             >
               <FormattedMessage
                 defaultMessage="enable usage data here."
@@ -336,7 +336,7 @@ exports[`should render a Welcome screen with the telemetry disclaimer when optIn
               values={Object {}}
             />
             <EuiLink
-              href="rootapp/management/kibana/settings"
+              href="rootmanagement/kibana/settings"
             >
               <FormattedMessage
                 defaultMessage="disable usage data here."
diff --git a/src/plugins/home/public/application/components/welcome.tsx b/src/plugins/home/public/application/components/welcome.tsx
index f82bd024b80b8..cacb507009c70 100644
--- a/src/plugins/home/public/application/components/welcome.tsx
+++ b/src/plugins/home/public/application/components/welcome.tsx
@@ -100,7 +100,7 @@ export class Welcome extends React.Component<Props> {
             id="home.dataManagementDisableCollection"
             defaultMessage=" To stop collection, "
           />
-          <EuiLink href={this.services.addBasePath('app/management/kibana/settings')}>
+          <EuiLink href={this.services.addBasePath('management/kibana/settings')}>
             <FormattedMessage
               id="home.dataManagementDisableCollectionLink"
               defaultMessage="disable usage data here."
@@ -115,7 +115,7 @@ export class Welcome extends React.Component<Props> {
             id="home.dataManagementEnableCollection"
             defaultMessage=" To start collection, "
           />
-          <EuiLink href={this.services.addBasePath('app/management/kibana/settings')}>
+          <EuiLink href={this.services.addBasePath('management/kibana/settings')}>
             <FormattedMessage
               id="home.dataManagementEnableCollectionLink"
               defaultMessage="enable usage data here."

From 55a73616ab706b4588e4c681a1369c2f85c1f907 Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Thu, 18 Jun 2020 12:56:51 -0600
Subject: [PATCH 43/63] [Maps] Migrate maps client router to react (#65079)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../sidebar/lib/visualize_url_utils.ts        |   2 +-
 test/functional/services/common/find.ts       |  21 +
 x-pack/index.js                               |   2 -
 x-pack/legacy/plugins/maps/index.js           |  41 --
 .../maps/public/angular/map_controller.js     | 686 ------------------
 x-pack/legacy/plugins/maps/public/index.scss  |   3 -
 x-pack/legacy/plugins/maps/public/index.ts    |  34 -
 x-pack/legacy/plugins/maps/public/legacy.ts   |  22 -
 x-pack/legacy/plugins/maps/public/plugin.ts   |  70 --
 x-pack/legacy/plugins/maps/public/routes.js   | 108 ---
 .../functions/common/saved_map.ts             |   3 +-
 .../input_type_to_expression/map.test.ts      |   2 +-
 .../input_type_to_expression/map.ts           |   2 +-
 x-pack/plugins/maps/common/constants.ts       |   2 +-
 .../public/angular/listing_ng_wrapper.html    |   6 -
 x-pack/plugins/maps/public/angular/map.html   |  35 -
 .../es_search_source/load_index_settings.js   |   3 +-
 .../connected_components/gis_map/view.js      |   2 +-
 .../maps/public/embeddable/map_embeddable.tsx |   1 -
 x-pack/plugins/maps/public/index.ts           |   2 -
 .../maps/public/lazy_load_bundle/index.ts     |   7 +-
 .../public/lazy_load_bundle/lazy/index.ts     |   8 +-
 .../maps/public/maps_vis_type_alias.js        |   2 +-
 x-pack/plugins/maps/public/plugin.ts          |  33 +-
 x-pack/plugins/maps/public/reducers/store.js  |  13 +-
 .../bootstrap}/get_initial_layers.d.ts        |   2 +-
 .../bootstrap}/get_initial_layers.js          |  27 +-
 .../bootstrap}/get_initial_layers.test.js     |  18 +-
 .../bootstrap}/get_initial_query.js           |   4 +-
 .../bootstrap}/get_initial_refresh_config.js  |   4 +-
 .../bootstrap}/get_initial_time_filters.js    |   4 +-
 .../services/gis_map_saved_object_loader.js   |   4 +-
 .../bootstrap}/services/saved_gis_map.js      |  20 +-
 .../maps/public/routing/maps_router.js        |  62 ++
 .../routing/page_elements/breadcrumbs.js      |  60 ++
 .../page_elements/top_nav_menu/index.js       |  44 ++
 .../top_nav_menu/top_nav_menu.js              | 279 +++++++
 .../routes/list/load_list_and_render.js       |  57 ++
 .../routes/list/maps_list_view.js}            |  71 +-
 .../public/routing/routes/maps_app/index.js   |  67 ++
 .../routes/maps_app/load_map_and_render.js    |  58 ++
 .../routing/routes/maps_app/maps_app_view.js  | 476 ++++++++++++
 .../state_syncing/app_state_manager.js        |  44 ++
 .../public/routing/state_syncing/app_sync.js  |  61 ++
 .../routing/state_syncing/global_sync.ts      |  32 +
 .../maps/public/routing/store_operations.js   |  11 +
 .../maps/server/tutorials/ems/index.ts        |   3 +-
 .../components/embeddables/embedded_map.tsx   |   3 +-
 .../embeddables/embedded_map_helpers.tsx      |   8 +-
 .../line_tool_tip_content.test.tsx            |   6 +-
 .../map_tool_tip/line_tool_tip_content.tsx    |   3 +-
 .../embeddables/map_tool_tip/map_tool_tip.tsx |   3 +-
 .../point_tool_tip_content.test.tsx           |   6 +-
 .../map_tool_tip/point_tool_tip_content.tsx   |   3 +-
 .../network/components/embeddables/types.ts   |   3 +-
 .../translations/translations/ja-JP.json      |   4 -
 .../translations/translations/zh-CN.json      |   4 -
 .../location_map/embeddables/embedded_map.tsx |   6 +-
 .../location_map/embeddables/map_tool_tip.tsx |   3 +-
 .../apps/maps/saved_object_management.js      |   4 +-
 .../test/functional/page_objects/gis_page.js  |   9 +-
 61 files changed, 1457 insertions(+), 1126 deletions(-)
 delete mode 100644 x-pack/legacy/plugins/maps/index.js
 delete mode 100644 x-pack/legacy/plugins/maps/public/angular/map_controller.js
 delete mode 100644 x-pack/legacy/plugins/maps/public/index.scss
 delete mode 100644 x-pack/legacy/plugins/maps/public/index.ts
 delete mode 100644 x-pack/legacy/plugins/maps/public/legacy.ts
 delete mode 100644 x-pack/legacy/plugins/maps/public/plugin.ts
 delete mode 100644 x-pack/legacy/plugins/maps/public/routes.js
 delete mode 100644 x-pack/plugins/maps/public/angular/listing_ng_wrapper.html
 delete mode 100644 x-pack/plugins/maps/public/angular/map.html
 rename x-pack/plugins/maps/public/{angular => routing/bootstrap}/get_initial_layers.d.ts (84%)
 rename x-pack/plugins/maps/public/{angular => routing/bootstrap}/get_initial_layers.js (57%)
 rename x-pack/plugins/maps/public/{angular => routing/bootstrap}/get_initial_layers.test.js (82%)
 rename x-pack/plugins/maps/public/{angular => routing/bootstrap}/get_initial_query.js (84%)
 rename x-pack/plugins/maps/public/{angular => routing/bootstrap}/get_initial_refresh_config.js (86%)
 rename x-pack/plugins/maps/public/{angular => routing/bootstrap}/get_initial_time_filters.js (90%)
 rename x-pack/plugins/maps/public/{angular => routing/bootstrap}/services/gis_map_saved_object_loader.js (87%)
 rename x-pack/plugins/maps/public/{angular => routing/bootstrap}/services/saved_gis_map.js (82%)
 create mode 100644 x-pack/plugins/maps/public/routing/maps_router.js
 create mode 100644 x-pack/plugins/maps/public/routing/page_elements/breadcrumbs.js
 create mode 100644 x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/index.js
 create mode 100644 x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/top_nav_menu.js
 create mode 100644 x-pack/plugins/maps/public/routing/routes/list/load_list_and_render.js
 rename x-pack/plugins/maps/public/{components/map_listing.js => routing/routes/list/maps_list_view.js} (86%)
 create mode 100644 x-pack/plugins/maps/public/routing/routes/maps_app/index.js
 create mode 100644 x-pack/plugins/maps/public/routing/routes/maps_app/load_map_and_render.js
 create mode 100644 x-pack/plugins/maps/public/routing/routes/maps_app/maps_app_view.js
 create mode 100644 x-pack/plugins/maps/public/routing/state_syncing/app_state_manager.js
 create mode 100644 x-pack/plugins/maps/public/routing/state_syncing/app_sync.js
 create mode 100644 x-pack/plugins/maps/public/routing/state_syncing/global_sync.ts
 create mode 100644 x-pack/plugins/maps/public/routing/store_operations.js

diff --git a/src/plugins/discover/public/application/components/sidebar/lib/visualize_url_utils.ts b/src/plugins/discover/public/application/components/sidebar/lib/visualize_url_utils.ts
index d585c5d6f2638..d598f28a0ad12 100644
--- a/src/plugins/discover/public/application/components/sidebar/lib/visualize_url_utils.ts
+++ b/src/plugins/discover/public/application/components/sidebar/lib/visualize_url_utils.ts
@@ -104,7 +104,7 @@ export function getMapsAppUrl(
 
   return {
     app: 'maps',
-    path: `#/map?${mapAppParams.toString()}`,
+    path: `/map#?${mapAppParams.toString()}`,
   };
 }
 
diff --git a/test/functional/services/common/find.ts b/test/functional/services/common/find.ts
index 876fb7369feac..88357814357d4 100644
--- a/test/functional/services/common/find.ts
+++ b/test/functional/services/common/find.ts
@@ -162,6 +162,27 @@ export async function FindProvider({ getService }: FtrProviderContext) {
       return wrapAll(elements);
     }
 
+    public async allByButtonText(
+      buttonText: string,
+      element: WebDriver | WebElement | WebElementWrapper = driver,
+      timeout: number = defaultFindTimeout
+    ): Promise<string[]> {
+      log.debug(`Find.byButtonText('${buttonText}') with timeout=${timeout}`);
+      return await retry.tryForTime(timeout, async () => {
+        // tslint:disable-next-line:variable-name
+        const _element = element instanceof WebElementWrapper ? element._webElement : element;
+        await this._withTimeout(0);
+        const allButtons = wrapAll(await _element.findElements(By.tagName('button')));
+        await this._withTimeout(defaultFindTimeout);
+        const buttonTexts = await Promise.all(
+          allButtons.map(async (el) => {
+            return el.getVisibleText();
+          })
+        );
+        return buttonTexts.filter((text) => text.trim() === buttonText.trim());
+      });
+    }
+
     public async allByCssSelector(
       selector: string,
       timeout: number = defaultFindTimeout
diff --git a/x-pack/index.js b/x-pack/index.js
index 8096774d7a491..e7dd4886e6052 100644
--- a/x-pack/index.js
+++ b/x-pack/index.js
@@ -9,7 +9,6 @@ import { monitoring } from './legacy/plugins/monitoring';
 import { security } from './legacy/plugins/security';
 import { dashboardMode } from './legacy/plugins/dashboard_mode';
 import { beats } from './legacy/plugins/beats_management';
-import { maps } from './legacy/plugins/maps';
 import { spaces } from './legacy/plugins/spaces';
 import { ingestManager } from './legacy/plugins/ingest_manager';
 
@@ -21,7 +20,6 @@ module.exports = function (kibana) {
     security(kibana),
     dashboardMode(kibana),
     beats(kibana),
-    maps(kibana),
     ingestManager(kibana),
   ];
 };
diff --git a/x-pack/legacy/plugins/maps/index.js b/x-pack/legacy/plugins/maps/index.js
deleted file mode 100644
index d1354ef013a96..0000000000000
--- a/x-pack/legacy/plugins/maps/index.js
+++ /dev/null
@@ -1,41 +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 { resolve } from 'path';
-import { getAppTitle } from '../../../plugins/maps/common/i18n_getters';
-import { APP_ID, APP_ICON } from '../../../plugins/maps/common/constants';
-import { DEFAULT_APP_CATEGORIES } from '../../../../src/core/server';
-
-export function maps(kibana) {
-  return new kibana.Plugin({
-    require: ['kibana', 'elasticsearch'],
-    id: APP_ID,
-    configPrefix: 'xpack.maps',
-    publicDir: resolve(__dirname, 'public'),
-    config(Joi) {
-      return Joi.object({
-        enabled: Joi.boolean().default(true),
-      })
-        .unknown()
-        .default();
-    },
-    uiExports: {
-      app: {
-        title: getAppTitle(),
-        description: i18n.translate('xpack.maps.appDescription', {
-          defaultMessage: 'Map application',
-        }),
-        main: 'plugins/maps/legacy',
-        icon: 'plugins/maps/icon.svg',
-        euiIconType: APP_ICON,
-        category: DEFAULT_APP_CATEGORIES.kibana,
-        order: 4000,
-      },
-      styleSheetPaths: `${__dirname}/public/index.scss`,
-    },
-  });
-}
diff --git a/x-pack/legacy/plugins/maps/public/angular/map_controller.js b/x-pack/legacy/plugins/maps/public/angular/map_controller.js
deleted file mode 100644
index 70d5195feef42..0000000000000
--- a/x-pack/legacy/plugins/maps/public/angular/map_controller.js
+++ /dev/null
@@ -1,686 +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 _ from 'lodash';
-import rison from 'rison-node';
-import 'ui/directives/listen';
-import 'ui/directives/storage';
-import React from 'react';
-import { I18nProvider } from '@kbn/i18n/react';
-import { i18n } from '@kbn/i18n';
-import { render, unmountComponentAtNode } from 'react-dom';
-import { uiModules } from 'ui/modules';
-import {
-  getTimeFilter,
-  getIndexPatternService,
-  getInspector,
-  getNavigation,
-  getData,
-  getCoreI18n,
-  getCoreChrome,
-  getMapsCapabilities,
-  getToasts,
-  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-} from '../../../../../plugins/maps/public/kibana_services';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { createMapStore } from '../../../../../plugins/maps/public/reducers/store';
-import { Provider } from 'react-redux';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { GisMap } from '../../../../../plugins/maps/public/connected_components/gis_map';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { addHelpMenuToAppChrome } from '../../../../../plugins/maps/public/help_menu_util';
-import {
-  setSelectedLayer,
-  setRefreshConfig,
-  setGotoWithCenter,
-  replaceLayerList,
-  setQuery,
-  setMapSettings,
-  enableFullScreen,
-  updateFlyout,
-  setReadOnly,
-  setIsLayerTOCOpen,
-  setOpenTOCDetails,
-  openMapSettings,
-  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-} from '../../../../../plugins/maps/public/actions';
-import {
-  DEFAULT_IS_LAYER_TOC_OPEN,
-  FLYOUT_STATE,
-  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-} from '../../../../../plugins/maps/public/reducers/ui';
-import {
-  getIsFullScreen,
-  getFlyoutDisplay,
-  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-} from '../../../../../plugins/maps/public/selectors/ui_selectors';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { copyPersistentState } from '../../../../../plugins/maps/public/reducers/util';
-import {
-  getQueryableUniqueIndexPatternIds,
-  hasDirtyState,
-  getLayerListRaw,
-  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-} from '../../../../../plugins/maps/public/selectors/map_selectors';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { getInspectorAdapters } from '../../../../../plugins/maps/public/reducers/non_serializable_instances';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { getInitialLayers } from '../../../../../plugins/maps/public/angular/get_initial_layers';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { getInitialQuery } from '../../../../../plugins/maps/public/angular/get_initial_query';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { getInitialTimeFilters } from '../../../../../plugins/maps/public/angular/get_initial_time_filters';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { getInitialRefreshConfig } from '../../../../../plugins/maps/public/angular/get_initial_refresh_config';
-import { MAP_SAVED_OBJECT_TYPE, MAP_APP_PATH } from '../../../../../plugins/maps/common/constants';
-import { npSetup, npStart } from 'ui/new_platform';
-import { esFilters } from '../../../../../../src/plugins/data/public';
-import {
-  SavedObjectSaveModal,
-  showSaveModal,
-} from '../../../../../../src/plugins/saved_objects/public';
-import { loadKbnTopNavDirectives } from '../../../../../../src/plugins/kibana_legacy/public';
-import {
-  bindSetupCoreAndPlugins as bindNpSetupCoreAndPlugins,
-  bindStartCoreAndPlugins as bindNpStartCoreAndPlugins,
-} from '../../../../../plugins/maps/public/plugin'; // eslint-disable-line @kbn/eslint/no-restricted-paths
-
-const REACT_ANCHOR_DOM_ELEMENT_ID = 'react-maps-root';
-
-const app = uiModules.get(MAP_APP_PATH, []);
-
-// Init required services. Necessary while in legacy
-const config = _.get(npSetup, 'plugins.maps.config', {});
-const kibanaVersion = npSetup.core.injectedMetadata.getKibanaVersion();
-bindNpSetupCoreAndPlugins(npSetup.core, npSetup.plugins, config, kibanaVersion);
-bindNpStartCoreAndPlugins(npStart.core, npStart.plugins);
-
-loadKbnTopNavDirectives(getNavigation().ui);
-
-function getInitialLayersFromUrlParam() {
-  const locationSplit = window.location.href.split('?');
-  if (locationSplit.length <= 1) {
-    return [];
-  }
-  const mapAppParams = new URLSearchParams(locationSplit[1]);
-  if (!mapAppParams.has('initialLayers')) {
-    return [];
-  }
-
-  try {
-    return rison.decode_array(mapAppParams.get('initialLayers'));
-  } catch (e) {
-    getToasts().addWarning({
-      title: i18n.translate('xpack.maps.initialLayers.unableToParseTitle', {
-        defaultMessage: `Inital layers not added to map`,
-      }),
-      text: i18n.translate('xpack.maps.initialLayers.unableToParseMessage', {
-        defaultMessage: `Unable to parse contents of 'initialLayers' parameter. Error: {errorMsg}`,
-        values: { errorMsg: e.message },
-      }),
-    });
-    return [];
-  }
-}
-
-app.controller(
-  'GisMapController',
-  ($scope, $route, kbnUrl, localStorage, AppState, globalState) => {
-    const savedQueryService = getData().query.savedQueries;
-    const { filterManager } = getData().query;
-    const savedMap = $route.current.locals.map;
-    $scope.screenTitle = savedMap.title;
-    let unsubscribe;
-    let initialLayerListConfig;
-    const $state = new AppState();
-    const store = createMapStore();
-
-    function getAppStateFilters() {
-      return _.get($state, 'filters', []);
-    }
-
-    const visibleSubscription = getCoreChrome()
-      .getIsVisible$()
-      .subscribe((isVisible) => {
-        $scope.$evalAsync(() => {
-          $scope.isVisible = isVisible;
-        });
-      });
-
-    $scope.$listen(globalState, 'fetch_with_changes', (diff) => {
-      if (diff.includes('time') || diff.includes('filters')) {
-        onQueryChange({
-          filters: [...globalState.filters, ...getAppStateFilters()],
-          time: globalState.time,
-        });
-      }
-      if (diff.includes('refreshInterval')) {
-        $scope.onRefreshChange({ isPaused: globalState.pause, refreshInterval: globalState.value });
-      }
-    });
-
-    $scope.$listen($state, 'fetch_with_changes', function (diff) {
-      if ((diff.includes('query') || diff.includes('filters')) && $state.query) {
-        onQueryChange({
-          filters: [...globalState.filters, ...getAppStateFilters()],
-          query: $state.query,
-        });
-      }
-    });
-
-    function syncAppAndGlobalState() {
-      $scope.$evalAsync(() => {
-        // appState
-        $state.query = $scope.query;
-        $state.filters = filterManager.getAppFilters();
-        $state.save();
-
-        // globalState
-        globalState.time = $scope.time;
-        globalState.refreshInterval = {
-          pause: $scope.refreshConfig.isPaused,
-          value: $scope.refreshConfig.interval,
-        };
-        globalState.filters = filterManager.getGlobalFilters();
-        globalState.save();
-      });
-    }
-
-    $scope.query = getInitialQuery({
-      mapStateJSON: savedMap.mapStateJSON,
-      appState: $state,
-      userQueryLanguage: localStorage.get('kibana.userQueryLanguage'),
-    });
-    $scope.time = getInitialTimeFilters({
-      mapStateJSON: savedMap.mapStateJSON,
-      globalState: globalState,
-    });
-    $scope.refreshConfig = getInitialRefreshConfig({
-      mapStateJSON: savedMap.mapStateJSON,
-      globalState: globalState,
-    });
-
-    /* Saved Queries */
-    $scope.showSaveQuery = getMapsCapabilities().saveQuery;
-
-    $scope.$watch(
-      () => getMapsCapabilities().saveQuery,
-      (newCapability) => {
-        $scope.showSaveQuery = newCapability;
-      }
-    );
-
-    $scope.onQuerySaved = (savedQuery) => {
-      $scope.savedQuery = savedQuery;
-    };
-
-    $scope.onSavedQueryUpdated = (savedQuery) => {
-      $scope.savedQuery = { ...savedQuery };
-    };
-
-    $scope.onClearSavedQuery = () => {
-      delete $scope.savedQuery;
-      delete $state.savedQuery;
-      onQueryChange({
-        filters: filterManager.getGlobalFilters(),
-        query: {
-          query: '',
-          language: localStorage.get('kibana.userQueryLanguage'),
-        },
-      });
-    };
-
-    function updateStateFromSavedQuery(savedQuery) {
-      const savedQueryFilters = savedQuery.attributes.filters || [];
-      const globalFilters = filterManager.getGlobalFilters();
-      const allFilters = [...savedQueryFilters, ...globalFilters];
-
-      if (savedQuery.attributes.timefilter) {
-        if (savedQuery.attributes.timefilter.refreshInterval) {
-          $scope.onRefreshChange({
-            isPaused: savedQuery.attributes.timefilter.refreshInterval.pause,
-            refreshInterval: savedQuery.attributes.timefilter.refreshInterval.value,
-          });
-        }
-        onQueryChange({
-          filters: allFilters,
-          query: savedQuery.attributes.query,
-          time: savedQuery.attributes.timefilter,
-        });
-      } else {
-        onQueryChange({
-          filters: allFilters,
-          query: savedQuery.attributes.query,
-        });
-      }
-    }
-
-    $scope.$watch('savedQuery', (newSavedQuery) => {
-      if (!newSavedQuery) return;
-
-      $state.savedQuery = newSavedQuery.id;
-      updateStateFromSavedQuery(newSavedQuery);
-    });
-
-    $scope.$watch(
-      () => $state.savedQuery,
-      (newSavedQueryId) => {
-        if (!newSavedQueryId) {
-          $scope.savedQuery = undefined;
-          return;
-        }
-        if ($scope.savedQuery && newSavedQueryId !== $scope.savedQuery.id) {
-          savedQueryService.getSavedQuery(newSavedQueryId).then((savedQuery) => {
-            $scope.$evalAsync(() => {
-              $scope.savedQuery = savedQuery;
-              updateStateFromSavedQuery(savedQuery);
-            });
-          });
-        }
-      }
-    );
-    /* End of Saved Queries */
-    async function onQueryChange({ filters, query, time, refresh }) {
-      if (filters) {
-        filterManager.setFilters(filters); // Maps and merges filters
-        $scope.filters = filterManager.getFilters();
-      }
-      if (query) {
-        $scope.query = query;
-      }
-      if (time) {
-        $scope.time = time;
-      }
-      syncAppAndGlobalState();
-      dispatchSetQuery(refresh);
-    }
-
-    function dispatchSetQuery(refresh) {
-      store.dispatch(
-        setQuery({
-          filters: $scope.filters,
-          query: $scope.query,
-          timeFilters: $scope.time,
-          refresh,
-        })
-      );
-    }
-
-    $scope.indexPatterns = [];
-    $scope.onQuerySubmit = function ({ dateRange, query }) {
-      onQueryChange({
-        query,
-        time: dateRange,
-        refresh: true,
-      });
-    };
-    $scope.updateFiltersAndDispatch = function (filters) {
-      onQueryChange({
-        filters,
-      });
-    };
-    $scope.onRefreshChange = function ({ isPaused, refreshInterval }) {
-      $scope.refreshConfig = {
-        isPaused,
-        interval: refreshInterval ? refreshInterval : $scope.refreshConfig.interval,
-      };
-      syncAppAndGlobalState();
-
-      store.dispatch(setRefreshConfig($scope.refreshConfig));
-    };
-
-    function addFilters(newFilters) {
-      newFilters.forEach((filter) => {
-        filter.$state = { store: esFilters.FilterStateStore.APP_STATE };
-      });
-      $scope.updateFiltersAndDispatch([...$scope.filters, ...newFilters]);
-    }
-
-    function hasUnsavedChanges() {
-      const state = store.getState();
-      const layerList = getLayerListRaw(state);
-      const layerListConfigOnly = copyPersistentState(layerList);
-
-      const savedLayerList = savedMap.getLayerList();
-
-      return !savedLayerList
-        ? !_.isEqual(layerListConfigOnly, initialLayerListConfig)
-        : // savedMap stores layerList as a JSON string using JSON.stringify.
-          // JSON.stringify removes undefined properties from objects.
-          // savedMap.getLayerList converts the JSON string back into Javascript array of objects.
-          // Need to perform the same process for layerListConfigOnly to compare apples to apples
-          // and avoid undefined properties in layerListConfigOnly triggering unsaved changes.
-          !_.isEqual(JSON.parse(JSON.stringify(layerListConfigOnly)), savedLayerList);
-    }
-
-    function isOnMapNow() {
-      return window.location.hash.startsWith(`#/${MAP_SAVED_OBJECT_TYPE}`);
-    }
-
-    function beforeUnload(event) {
-      if (!isOnMapNow()) {
-        return;
-      }
-
-      const hasChanged = hasUnsavedChanges();
-      if (hasChanged) {
-        event.preventDefault();
-        event.returnValue = 'foobar'; //this is required for Chrome
-      }
-    }
-    window.addEventListener('beforeunload', beforeUnload);
-
-    async function renderMap() {
-      // clear old UI state
-      store.dispatch(setSelectedLayer(null));
-      store.dispatch(updateFlyout(FLYOUT_STATE.NONE));
-      store.dispatch(setReadOnly(!getMapsCapabilities().save));
-
-      handleStoreChanges(store);
-      unsubscribe = store.subscribe(() => {
-        handleStoreChanges(store);
-      });
-
-      // sync store with savedMap mapState
-      let savedObjectFilters = [];
-      if (savedMap.mapStateJSON) {
-        const mapState = JSON.parse(savedMap.mapStateJSON);
-        store.dispatch(
-          setGotoWithCenter({
-            lat: mapState.center.lat,
-            lon: mapState.center.lon,
-            zoom: mapState.zoom,
-          })
-        );
-        if (mapState.filters) {
-          savedObjectFilters = mapState.filters;
-        }
-        if (mapState.settings) {
-          store.dispatch(setMapSettings(mapState.settings));
-        }
-      }
-
-      if (savedMap.uiStateJSON) {
-        const uiState = JSON.parse(savedMap.uiStateJSON);
-        store.dispatch(
-          setIsLayerTOCOpen(_.get(uiState, 'isLayerTOCOpen', DEFAULT_IS_LAYER_TOC_OPEN))
-        );
-        store.dispatch(setOpenTOCDetails(_.get(uiState, 'openTOCDetails', [])));
-      }
-
-      const layerList = getInitialLayers(savedMap.layerListJSON, getInitialLayersFromUrlParam());
-      initialLayerListConfig = copyPersistentState(layerList);
-      store.dispatch(replaceLayerList(layerList));
-      store.dispatch(setRefreshConfig($scope.refreshConfig));
-
-      const initialFilters = [
-        ..._.get(globalState, 'filters', []),
-        ...getAppStateFilters(),
-        ...savedObjectFilters,
-      ];
-      await onQueryChange({ filters: initialFilters });
-
-      const root = document.getElementById(REACT_ANCHOR_DOM_ELEMENT_ID);
-      render(
-        <Provider store={store}>
-          <I18nProvider>
-            <GisMap addFilters={addFilters} />
-          </I18nProvider>
-        </Provider>,
-        root
-      );
-    }
-    renderMap();
-
-    let prevIndexPatternIds;
-    async function updateIndexPatterns(nextIndexPatternIds) {
-      const indexPatterns = [];
-      const getIndexPatternPromises = nextIndexPatternIds.map(async (indexPatternId) => {
-        try {
-          const indexPattern = await getIndexPatternService().get(indexPatternId);
-          indexPatterns.push(indexPattern);
-        } catch (err) {
-          // unable to fetch index pattern
-        }
-      });
-
-      await Promise.all(getIndexPatternPromises);
-      // ignore outdated results
-      if (prevIndexPatternIds !== nextIndexPatternIds) {
-        return;
-      }
-      $scope.$evalAsync(() => {
-        $scope.indexPatterns = indexPatterns;
-      });
-    }
-
-    $scope.isFullScreen = false;
-    $scope.isSaveDisabled = false;
-    $scope.isOpenSettingsDisabled = false;
-    function handleStoreChanges(store) {
-      const nextIsFullScreen = getIsFullScreen(store.getState());
-      if (nextIsFullScreen !== $scope.isFullScreen) {
-        // Must trigger digest cycle for angular top nav to redraw itself when isFullScreen changes
-        $scope.$evalAsync(() => {
-          $scope.isFullScreen = nextIsFullScreen;
-        });
-      }
-
-      const nextIndexPatternIds = getQueryableUniqueIndexPatternIds(store.getState());
-      if (nextIndexPatternIds !== prevIndexPatternIds) {
-        prevIndexPatternIds = nextIndexPatternIds;
-        updateIndexPatterns(nextIndexPatternIds);
-      }
-
-      const nextIsSaveDisabled = hasDirtyState(store.getState());
-      if (nextIsSaveDisabled !== $scope.isSaveDisabled) {
-        $scope.$evalAsync(() => {
-          $scope.isSaveDisabled = nextIsSaveDisabled;
-        });
-      }
-
-      const flyoutDisplay = getFlyoutDisplay(store.getState());
-      const nextIsOpenSettingsDisabled = flyoutDisplay !== FLYOUT_STATE.NONE;
-      if (nextIsOpenSettingsDisabled !== $scope.isOpenSettingsDisabled) {
-        $scope.$evalAsync(() => {
-          $scope.isOpenSettingsDisabled = nextIsOpenSettingsDisabled;
-        });
-      }
-    }
-
-    $scope.$on('$destroy', () => {
-      window.removeEventListener('beforeunload', beforeUnload);
-      visibleSubscription.unsubscribe();
-      getCoreChrome().setIsVisible(true);
-
-      if (unsubscribe) {
-        unsubscribe();
-      }
-      const node = document.getElementById(REACT_ANCHOR_DOM_ELEMENT_ID);
-      if (node) {
-        unmountComponentAtNode(node);
-      }
-    });
-
-    const updateBreadcrumbs = () => {
-      getCoreChrome().setBreadcrumbs([
-        {
-          text: i18n.translate('xpack.maps.mapController.mapsBreadcrumbLabel', {
-            defaultMessage: 'Maps',
-          }),
-          onClick: () => {
-            if (isOnMapNow() && hasUnsavedChanges()) {
-              const navigateAway = window.confirm(
-                i18n.translate('xpack.maps.mapController.unsavedChangesWarning', {
-                  defaultMessage: `Your unsaved changes might not be saved`,
-                })
-              );
-              if (navigateAway) {
-                window.location.hash = '#';
-              }
-            } else {
-              window.location.hash = '#';
-            }
-          },
-        },
-        { text: savedMap.title },
-      ]);
-    };
-    updateBreadcrumbs();
-
-    addHelpMenuToAppChrome();
-
-    async function doSave(saveOptions) {
-      savedMap.syncWithStore(store.getState());
-      let id;
-
-      try {
-        id = await savedMap.save(saveOptions);
-        getCoreChrome().docTitle.change(savedMap.title);
-      } catch (err) {
-        getToasts().addDanger({
-          title: i18n.translate('xpack.maps.mapController.saveErrorMessage', {
-            defaultMessage: `Error on saving '{title}'`,
-            values: { title: savedMap.title },
-          }),
-          text: err.message,
-          'data-test-subj': 'saveMapError',
-        });
-        return { error: err };
-      }
-
-      if (id) {
-        getToasts().addSuccess({
-          title: i18n.translate('xpack.maps.mapController.saveSuccessMessage', {
-            defaultMessage: `Saved '{title}'`,
-            values: { title: savedMap.title },
-          }),
-          'data-test-subj': 'saveMapSuccess',
-        });
-
-        updateBreadcrumbs();
-
-        if (savedMap.id !== $route.current.params.id) {
-          $scope.$evalAsync(() => {
-            kbnUrl.change(`map/{{id}}`, { id: savedMap.id });
-          });
-        }
-      }
-      return { id };
-    }
-
-    // Hide angular timepicer/refresh UI from top nav
-    getTimeFilter().disableTimeRangeSelector();
-    getTimeFilter().disableAutoRefreshSelector();
-    $scope.showDatePicker = true; // used by query-bar directive to enable timepikcer in query bar
-    $scope.topNavMenu = [
-      {
-        id: 'full-screen',
-        label: i18n.translate('xpack.maps.mapController.fullScreenButtonLabel', {
-          defaultMessage: `full screen`,
-        }),
-        description: i18n.translate('xpack.maps.mapController.fullScreenDescription', {
-          defaultMessage: `full screen`,
-        }),
-        testId: 'mapsFullScreenMode',
-        run() {
-          getCoreChrome().setIsVisible(false);
-          store.dispatch(enableFullScreen());
-        },
-      },
-      {
-        id: 'inspect',
-        label: i18n.translate('xpack.maps.mapController.openInspectorButtonLabel', {
-          defaultMessage: `inspect`,
-        }),
-        description: i18n.translate('xpack.maps.mapController.openInspectorDescription', {
-          defaultMessage: `Open Inspector`,
-        }),
-        testId: 'openInspectorButton',
-        run() {
-          const inspectorAdapters = getInspectorAdapters(store.getState());
-          getInspector().open(inspectorAdapters, {});
-        },
-      },
-      {
-        id: 'mapSettings',
-        label: i18n.translate('xpack.maps.mapController.openSettingsButtonLabel', {
-          defaultMessage: `Map settings`,
-        }),
-        description: i18n.translate('xpack.maps.mapController.openSettingsDescription', {
-          defaultMessage: `Open map settings`,
-        }),
-        testId: 'openSettingsButton',
-        disableButton() {
-          return $scope.isOpenSettingsDisabled;
-        },
-        run() {
-          store.dispatch(openMapSettings());
-        },
-      },
-      ...(getMapsCapabilities().save
-        ? [
-            {
-              id: 'save',
-              label: i18n.translate('xpack.maps.mapController.saveMapButtonLabel', {
-                defaultMessage: `save`,
-              }),
-              description: i18n.translate('xpack.maps.mapController.saveMapDescription', {
-                defaultMessage: `Save map`,
-              }),
-              testId: 'mapSaveButton',
-              disableButton() {
-                return $scope.isSaveDisabled;
-              },
-              tooltip() {
-                if ($scope.isSaveDisabled) {
-                  return i18n.translate('xpack.maps.mapController.saveMapDisabledButtonTooltip', {
-                    defaultMessage: 'Save or Cancel your layer changes before saving',
-                  });
-                }
-              },
-              run: async () => {
-                const onSave = ({
-                  newTitle,
-                  newCopyOnSave,
-                  isTitleDuplicateConfirmed,
-                  onTitleDuplicate,
-                }) => {
-                  const currentTitle = savedMap.title;
-                  savedMap.title = newTitle;
-                  savedMap.copyOnSave = newCopyOnSave;
-                  const saveOptions = {
-                    confirmOverwrite: false,
-                    isTitleDuplicateConfirmed,
-                    onTitleDuplicate,
-                  };
-                  return doSave(saveOptions).then((response) => {
-                    // If the save wasn't successful, put the original values back.
-                    if (!response.id || response.error) {
-                      savedMap.title = currentTitle;
-                    }
-                    return response;
-                  });
-                };
-
-                const saveModal = (
-                  <SavedObjectSaveModal
-                    onSave={onSave}
-                    onClose={() => {}}
-                    title={savedMap.title}
-                    showCopyOnSave={savedMap.id ? true : false}
-                    objectType={MAP_SAVED_OBJECT_TYPE}
-                    showDescription={false}
-                  />
-                );
-                showSaveModal(saveModal, getCoreI18n().Context);
-              },
-            },
-          ]
-        : []),
-    ];
-  }
-);
diff --git a/x-pack/legacy/plugins/maps/public/index.scss b/x-pack/legacy/plugins/maps/public/index.scss
deleted file mode 100644
index b2a228f01b921..0000000000000
--- a/x-pack/legacy/plugins/maps/public/index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-/* GIS plugin styles */
-
-@import '../../../../plugins/maps/public/index';
diff --git a/x-pack/legacy/plugins/maps/public/index.ts b/x-pack/legacy/plugins/maps/public/index.ts
deleted file mode 100644
index 89ce976de9278..0000000000000
--- a/x-pack/legacy/plugins/maps/public/index.ts
+++ /dev/null
@@ -1,34 +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.
- */
-
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import '../../../../plugins/maps/public/kibana_services';
-
-// import the uiExports that we want to "use"
-import 'uiExports/inspectorViews';
-import 'uiExports/search';
-import 'uiExports/embeddableFactories';
-import 'uiExports/embeddableActions';
-
-import 'ui/autoload/all';
-import 'react-vis/dist/style.css';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import '../../../../plugins/maps/public/angular/services/gis_map_saved_object_loader';
-import './angular/map_controller';
-import './routes';
-// @ts-ignore
-import { MapsPlugin } from './plugin';
-
-export const plugin = () => {
-  return new MapsPlugin();
-};
-
-export {
-  RenderTooltipContentParams,
-  ITooltipProperty,
-} from '../../../../plugins/maps/public/classes/tooltips/tooltip_property'; // eslint-disable-line @kbn/eslint/no-restricted-paths
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-export { MapEmbeddable, MapEmbeddableInput } from '../../../../plugins/maps/public/embeddable';
diff --git a/x-pack/legacy/plugins/maps/public/legacy.ts b/x-pack/legacy/plugins/maps/public/legacy.ts
deleted file mode 100644
index bcbfca17755fb..0000000000000
--- a/x-pack/legacy/plugins/maps/public/legacy.ts
+++ /dev/null
@@ -1,22 +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 { npSetup, npStart } from 'ui/new_platform';
-// @ts-ignore Untyped Module
-import { uiModules } from 'ui/modules';
-import { plugin } from '.';
-
-const pluginInstance = plugin();
-
-const setupPlugins = {
-  __LEGACY: {
-    uiModules,
-  },
-  np: npSetup.plugins,
-};
-
-export const setup = pluginInstance.setup(npSetup.core, setupPlugins);
-export const start = pluginInstance.start(npStart.core, npStart.plugins);
diff --git a/x-pack/legacy/plugins/maps/public/plugin.ts b/x-pack/legacy/plugins/maps/public/plugin.ts
deleted file mode 100644
index 9605c0d3e5fd8..0000000000000
--- a/x-pack/legacy/plugins/maps/public/plugin.ts
+++ /dev/null
@@ -1,70 +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 _ from 'lodash';
-import { Plugin, CoreStart, CoreSetup } from 'src/core/public';
-// @ts-ignore
-import { Start as InspectorStartContract } from 'src/plugins/inspector/public';
-// @ts-ignore
-import { wrapInI18nContext } from 'ui/i18n';
-// @ts-ignore
-import { MapListing } from '../../../../plugins/maps/public/components/map_listing'; // eslint-disable-line @kbn/eslint/no-restricted-paths
-// @ts-ignore
-import {
-  bindSetupCoreAndPlugins as bindNpSetupCoreAndPlugins,
-  bindStartCoreAndPlugins as bindNpStartCoreAndPlugins,
-} from '../../../../plugins/maps/public/plugin'; // eslint-disable-line @kbn/eslint/no-restricted-paths
-import { HomePublicPluginSetup } from '../../../../../src/plugins/home/public';
-import { LicensingPluginSetup } from '../../../../plugins/licensing/public';
-import {
-  DataPublicPluginSetup,
-  DataPublicPluginStart,
-} from '../../../../../src/plugins/data/public';
-
-/**
- * These are the interfaces with your public contracts. You should export these
- * for other plugins to use in _their_ `SetupDeps`/`StartDeps` interfaces.
- * @public
- */
-export type MapsPluginSetup = ReturnType<MapsPlugin['setup']>;
-export type MapsPluginStart = ReturnType<MapsPlugin['start']>;
-
-interface MapsPluginSetupDependencies {
-  __LEGACY: any;
-  np: {
-    licensing?: LicensingPluginSetup;
-    home: HomePublicPluginSetup;
-    data: DataPublicPluginSetup;
-  };
-}
-
-interface MapsPluginStartDependencies {
-  data: DataPublicPluginStart;
-  inspector: InspectorStartContract;
-  // file_upload TODO: Export type from file upload and use here
-}
-
-/** @internal */
-export class MapsPlugin implements Plugin<MapsPluginSetup, MapsPluginStart> {
-  public setup(core: CoreSetup, { __LEGACY: { uiModules }, np }: MapsPluginSetupDependencies) {
-    uiModules
-      .get('app/maps', ['ngRoute', 'react'])
-      .directive('mapListing', function (reactDirective: any) {
-        return reactDirective(wrapInI18nContext(MapListing));
-      });
-
-    // @ts-ignore
-    const config = _.get(np, 'maps.config', {});
-    // @ts-ignore
-    const kibanaVersion = core.injectedMetadata.getKibanaVersion();
-    // @ts-ignore
-    bindNpSetupCoreAndPlugins(core, np, config, kibanaVersion);
-  }
-
-  public start(core: CoreStart, plugins: MapsPluginStartDependencies) {
-    bindNpStartCoreAndPlugins(core, plugins);
-  }
-}
diff --git a/x-pack/legacy/plugins/maps/public/routes.js b/x-pack/legacy/plugins/maps/public/routes.js
deleted file mode 100644
index 20664b1b35a26..0000000000000
--- a/x-pack/legacy/plugins/maps/public/routes.js
+++ /dev/null
@@ -1,108 +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 routes from 'ui/routes';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import listingTemplate from '../../../../plugins/maps/public/angular/listing_ng_wrapper.html';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import mapTemplate from '../../../../plugins/maps/public/angular/map.html';
-import {
-  getSavedObjectsClient,
-  getCoreChrome,
-  getMapsCapabilities,
-  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-} from '../../../../plugins/maps/public/kibana_services';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { getMapsSavedObjectLoader } from '../../../../plugins/maps/public/angular/services/gis_map_saved_object_loader';
-import { LISTING_LIMIT_SETTING } from '../../../../../src/plugins/saved_objects/common';
-
-routes.enable();
-
-routes
-  .defaults(/.*/, {
-    badge: () => {
-      if (getMapsCapabilities().save) {
-        return undefined;
-      }
-
-      return {
-        text: i18n.translate('xpack.maps.badge.readOnly.text', {
-          defaultMessage: 'Read only',
-        }),
-        tooltip: i18n.translate('xpack.maps.badge.readOnly.tooltip', {
-          defaultMessage: 'Unable to save maps',
-        }),
-        iconType: 'glasses',
-      };
-    },
-  })
-  .when('/', {
-    template: listingTemplate,
-    controller($scope, config) {
-      const gisMapSavedObjectLoader = getMapsSavedObjectLoader();
-      $scope.listingLimit = config.get(LISTING_LIMIT_SETTING);
-      $scope.find = (search) => {
-        return gisMapSavedObjectLoader.find(search, $scope.listingLimit);
-      };
-      $scope.delete = (ids) => {
-        return gisMapSavedObjectLoader.delete(ids);
-      };
-      $scope.readOnly = !getMapsCapabilities().save;
-    },
-    resolve: {
-      hasMaps: function (kbnUrl) {
-        getSavedObjectsClient()
-          .find({ type: 'map', perPage: 1 })
-          .then((resp) => {
-            // Do not show empty listing page, just redirect to a new map
-            if (resp.savedObjects.length === 0) {
-              kbnUrl.redirect('/map');
-            }
-            return true;
-          });
-      },
-    },
-  })
-  .when('/map', {
-    template: mapTemplate,
-    controller: 'GisMapController',
-    resolve: {
-      map: function (redirectWhenMissing) {
-        const gisMapSavedObjectLoader = getMapsSavedObjectLoader();
-        return gisMapSavedObjectLoader.get().catch(
-          redirectWhenMissing({
-            map: '/',
-          })
-        );
-      },
-    },
-  })
-  .when('/map/:id', {
-    template: mapTemplate,
-    controller: 'GisMapController',
-    resolve: {
-      map: function (redirectWhenMissing, $route) {
-        const gisMapSavedObjectLoader = getMapsSavedObjectLoader();
-        const id = $route.current.params.id;
-        return gisMapSavedObjectLoader
-          .get(id)
-          .then((savedMap) => {
-            getCoreChrome().recentlyAccessed.add(savedMap.getFullPath(), savedMap.title, id);
-            getCoreChrome().docTitle.change(savedMap.title);
-            return savedMap;
-          })
-          .catch(
-            redirectWhenMissing({
-              map: '/',
-            })
-          );
-      },
-    },
-  })
-  .otherwise({
-    redirectTo: '/',
-  });
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_map.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_map.ts
index faa2937aeaa14..2a3741e15f467 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_map.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/saved_map.ts
@@ -13,7 +13,8 @@ import {
   EmbeddableExpression,
 } from '../../expression_types';
 import { getFunctionHelp } from '../../../i18n';
-import { MapEmbeddableInput } from '../../../../../legacy/plugins/maps/public';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { MapEmbeddableInput } from '../../../../../plugins/maps/public/embeddable';
 
 interface Arguments {
   id: string;
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/map.test.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/map.test.ts
index e0e0aeaeea272..d910c734a6974 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/map.test.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/map.test.ts
@@ -5,7 +5,7 @@
  */
 
 import { toExpression } from './map';
-import { MapEmbeddableInput } from '../../../../../../legacy/plugins/maps/public';
+import { MapEmbeddableInput } from '../../../../../../plugins/maps/public/embeddable';
 import { fromExpression, Ast } from '@kbn/interpreter/common';
 
 const baseSavedMapInput = {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/map.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/map.ts
index 1f9bec133488c..111fdc71fa242 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/map.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/map.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { MapEmbeddableInput } from '../../../../../../legacy/plugins/maps/public';
+import { MapEmbeddableInput } from '../../../../../../plugins/maps/public/embeddable';
 
 export function toExpression(input: MapEmbeddableInput): string {
   const expressionParts = [] as string[];
diff --git a/x-pack/plugins/maps/common/constants.ts b/x-pack/plugins/maps/common/constants.ts
index edb395633827f..be3de22fa011e 100644
--- a/x-pack/plugins/maps/common/constants.ts
+++ b/x-pack/plugins/maps/common/constants.ts
@@ -32,7 +32,7 @@ export const GIS_API_PATH = `api/${APP_ID}`;
 export const INDEX_SETTINGS_API_PATH = `${GIS_API_PATH}/indexSettings`;
 export const FONTS_API_PATH = `${GIS_API_PATH}/fonts`;
 
-export const MAP_BASE_URL = `/${MAP_APP_PATH}#/${MAP_SAVED_OBJECT_TYPE}`;
+export const MAP_BASE_URL = `/${MAP_APP_PATH}/${MAP_SAVED_OBJECT_TYPE}`;
 
 export function createMapPath(id: string) {
   return `${MAP_BASE_URL}/${id}`;
diff --git a/x-pack/plugins/maps/public/angular/listing_ng_wrapper.html b/x-pack/plugins/maps/public/angular/listing_ng_wrapper.html
deleted file mode 100644
index bfea81e13e9df..0000000000000
--- a/x-pack/plugins/maps/public/angular/listing_ng_wrapper.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<map-listing
-  find="find"
-  delete="delete"
-  listing-limit="listingLimit"
-  read-only="readOnly"
-></map-listing>
diff --git a/x-pack/plugins/maps/public/angular/map.html b/x-pack/plugins/maps/public/angular/map.html
deleted file mode 100644
index 7d7dcf6f9c9a9..0000000000000
--- a/x-pack/plugins/maps/public/angular/map.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<div id="maps-plugin"  ng-class="{mapFullScreen: isFullScreen}">
-
-  <div id="maps-top-nav">
-    <div>
-      <kbn-top-nav
-        ng-show="isVisible"
-        app-name="'maps'"
-        config="topNavMenu"
-        show-search-bar="isVisible"
-        show-filter-bar="isVisible"
-        show-date-picker="showDatePicker"
-        show-save-query="showSaveQuery"
-        query="query"
-        saved-query="savedQuery"
-        on-query-submit="onQuerySubmit"
-        filters="filters"
-        on-filters-updated="updateFiltersAndDispatch"
-        index-patterns="indexPatterns"
-        date-range-from="time.from"
-        date-range-to="time.to"
-        is-refresh-paused="refreshConfig.isPaused"
-        refresh-interval="refreshConfig.interval"
-        on-refresh-change="onRefreshChange"
-        on-saved="onQuerySaved"
-        on-saved-query-updated="onSavedQueryUpdated"
-        on-clear-saved-query="onClearSavedQuery"
-      >
-      </kbn-top-nav>
-    </div>
-  </div>
-
-  <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
-  <div id="react-maps-root"></div>
-
-</div>
diff --git a/x-pack/plugins/maps/public/classes/sources/es_search_source/load_index_settings.js b/x-pack/plugins/maps/public/classes/sources/es_search_source/load_index_settings.js
index 811291de26d35..d5d24da225232 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_search_source/load_index_settings.js
+++ b/x-pack/plugins/maps/public/classes/sources/es_search_source/load_index_settings.js
@@ -29,14 +29,13 @@ async function fetchIndexSettings(indexPatternTitle) {
   const http = getHttp();
   const toasts = getToasts();
   try {
-    const indexSettings = await http.fetch(`../${INDEX_SETTINGS_API_PATH}`, {
+    return await http.fetch(`/${INDEX_SETTINGS_API_PATH}`, {
       method: 'GET',
       credentials: 'same-origin',
       query: {
         indexPatternTitle,
       },
     });
-    return indexSettings;
   } catch (err) {
     const warningMsg = i18n.translate('xpack.maps.indexSettings.fetchErrorMsg', {
       defaultMessage: `Unable to fetch index settings for index pattern '{indexPatternTitle}'.
diff --git a/x-pack/plugins/maps/public/connected_components/gis_map/view.js b/x-pack/plugins/maps/public/connected_components/gis_map/view.js
index 122f5cdd45c1c..7199620d69fcf 100644
--- a/x-pack/plugins/maps/public/connected_components/gis_map/view.js
+++ b/x-pack/plugins/maps/public/connected_components/gis_map/view.js
@@ -14,7 +14,6 @@ import { LayerPanel } from '../layer_panel';
 import { AddLayerPanel } from '../add_layer_panel';
 import { EuiFlexGroup, EuiFlexItem, EuiCallOut } from '@elastic/eui';
 import { ExitFullScreenButton } from '../../../../../../src/plugins/kibana_react/public';
-
 import { getIndexPatternsFromIds } from '../../index_pattern_util';
 import { ES_GEO_FIELD_TYPE } from '../../../common/constants';
 import { indexPatterns as indexPatternsUtils } from '../../../../../../src/plugins/data/public';
@@ -23,6 +22,7 @@ import uuid from 'uuid/v4';
 import { FLYOUT_STATE } from '../../reducers/ui';
 import { MapSettingsPanel } from '../map_settings_panel';
 import { registerLayerWizards } from '../../classes/layers/load_layer_wizards';
+import 'mapbox-gl/dist/mapbox-gl.css';
 
 const RENDER_COMPLETE_EVENT = 'renderComplete';
 
diff --git a/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx b/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx
index b27f66ea085de..6f58339792214 100644
--- a/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx
+++ b/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx
@@ -8,7 +8,6 @@ import _ from 'lodash';
 import React, { Suspense, lazy } from 'react';
 import { Provider } from 'react-redux';
 import { render, unmountComponentAtNode } from 'react-dom';
-import 'mapbox-gl/dist/mapbox-gl.css';
 import { Subscription } from 'rxjs';
 import { Unsubscribe } from 'redux';
 import { EuiLoadingSpinner } from '@elastic/eui';
diff --git a/x-pack/plugins/maps/public/index.ts b/x-pack/plugins/maps/public/index.ts
index 6a144e84b05e0..7b5521443d974 100644
--- a/x-pack/plugins/maps/public/index.ts
+++ b/x-pack/plugins/maps/public/index.ts
@@ -17,5 +17,3 @@ export const plugin: PluginInitializer<MapsPluginSetup, MapsPluginStart> = (
 };
 
 export { MAP_SAVED_OBJECT_TYPE } from '../common/constants';
-export { ITooltipProperty } from './classes/tooltips/tooltip_property';
-export { MapsPluginStart } from './plugin';
diff --git a/x-pack/plugins/maps/public/lazy_load_bundle/index.ts b/x-pack/plugins/maps/public/lazy_load_bundle/index.ts
index 152412376fb09..ca4098ebfa805 100644
--- a/x-pack/plugins/maps/public/lazy_load_bundle/index.ts
+++ b/x-pack/plugins/maps/public/lazy_load_bundle/index.ts
@@ -7,6 +7,7 @@
 import { AnyAction } from 'redux';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { IndexPatternsService } from 'src/plugins/data/public/index_patterns';
+import { ReactElement } from 'react';
 import { Embeddable, IContainer } from '../../../../../src/plugins/embeddable/public';
 import { LayerDescriptor } from '../../common/descriptor_types';
 import { MapStore, MapStoreState } from '../reducers/store';
@@ -36,6 +37,7 @@ interface LazyLoadedMapModules {
     initialLayers?: LayerDescriptor[]
   ) => LayerDescriptor[];
   mergeInputWithSavedMap: any;
+  renderApp: (context: unknown, params: unknown) => ReactElement<any>;
   createSecurityLayerDescriptors: (
     indexPatternId: string,
     indexPatternTitle: string
@@ -49,7 +51,7 @@ export async function lazyLoadMapModules(): Promise<LazyLoadedMapModules> {
 
   loadModulesPromise = new Promise(async (resolve) => {
     const {
-      // @ts-ignore
+      // @ts-expect-error
       getMapsSavedObjectLoader,
       getQueryableUniqueIndexPatternIds,
       MapEmbeddable,
@@ -60,6 +62,8 @@ export async function lazyLoadMapModules(): Promise<LazyLoadedMapModules> {
       addLayerWithoutDataSync,
       getInitialLayers,
       mergeInputWithSavedMap,
+      // @ts-expect-error
+      renderApp,
       createSecurityLayerDescriptors,
     } = await import('./lazy');
 
@@ -74,6 +78,7 @@ export async function lazyLoadMapModules(): Promise<LazyLoadedMapModules> {
       addLayerWithoutDataSync,
       getInitialLayers,
       mergeInputWithSavedMap,
+      renderApp,
       createSecurityLayerDescriptors,
     });
   });
diff --git a/x-pack/plugins/maps/public/lazy_load_bundle/lazy/index.ts b/x-pack/plugins/maps/public/lazy_load_bundle/lazy/index.ts
index 0600b8d5073c6..4f9f01f8a1b37 100644
--- a/x-pack/plugins/maps/public/lazy_load_bundle/lazy/index.ts
+++ b/x-pack/plugins/maps/public/lazy_load_bundle/lazy/index.ts
@@ -7,13 +7,15 @@
 // These are map-dependencies of the embeddable.
 // By lazy-loading these, the Maps-app can register the embeddable when the plugin mounts, without actually pulling all the code.
 
-// @ts-ignore
-export * from '../../angular/services/gis_map_saved_object_loader';
+// @ts-expect-error
+export * from '../../routing/bootstrap/services/gis_map_saved_object_loader';
 export * from '../../embeddable/map_embeddable';
 export * from '../../kibana_services';
 export * from '../../reducers/store';
 export * from '../../actions';
 export * from '../../selectors/map_selectors';
-export * from '../../angular/get_initial_layers';
+export * from '../../routing/bootstrap/get_initial_layers';
 export * from '../../embeddable/merge_input_with_saved_map';
+// @ts-expect-error
+export * from '../../routing/maps_router';
 export * from '../../classes/layers/solution_layers/security';
diff --git a/x-pack/plugins/maps/public/maps_vis_type_alias.js b/x-pack/plugins/maps/public/maps_vis_type_alias.js
index 14f31d7660a54..cb7b3db17eab5 100644
--- a/x-pack/plugins/maps/public/maps_vis_type_alias.js
+++ b/x-pack/plugins/maps/public/maps_vis_type_alias.js
@@ -28,7 +28,7 @@ The Maps app offers more functionality and is easier to use.`,
 
   return {
     aliasApp: APP_ID,
-    aliasPath: `#/${MAP_SAVED_OBJECT_TYPE}`,
+    aliasPath: `/${MAP_SAVED_OBJECT_TYPE}`,
     name: APP_ID,
     title: i18n.translate('xpack.maps.visTypeAlias.title', {
       defaultMessage: 'Maps',
diff --git a/x-pack/plugins/maps/public/plugin.ts b/x-pack/plugins/maps/public/plugin.ts
index e0639c9d0f365..412e8832453bc 100644
--- a/x-pack/plugins/maps/public/plugin.ts
+++ b/x-pack/plugins/maps/public/plugin.ts
@@ -4,8 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from 'src/core/public';
 import { Setup as InspectorSetupContract } from 'src/plugins/inspector/public';
+import {
+  CoreSetup,
+  CoreStart,
+  Plugin,
+  PluginInitializerContext,
+  DEFAULT_APP_CATEGORIES,
+} from '../../../../src/core/public';
 // @ts-ignore
 import { MapView } from './inspector/views/map_view';
 import {
@@ -41,11 +47,13 @@ import { featureCatalogueEntry } from './feature_catalogue_entry';
 import { getMapsVisTypeAlias } from './maps_vis_type_alias';
 import { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
 import { VisualizationsSetup } from '../../../../src/plugins/visualizations/public';
-import { APP_ID, MAP_SAVED_OBJECT_TYPE } from '../common/constants';
+import { APP_ICON, APP_ID, MAP_SAVED_OBJECT_TYPE } from '../common/constants';
 import { MapEmbeddableFactory } from './embeddable/map_embeddable_factory';
 import { EmbeddableSetup } from '../../../../src/plugins/embeddable/public';
-import { MapsConfigType, MapsXPackConfig } from '../config';
+import { MapsXPackConfig, MapsConfigType } from '../config';
+import { getAppTitle } from '../common/i18n_getters';
 import { ILicense } from '../../licensing/common/types';
+import { lazyLoadMapModules } from './lazy_load_bundle';
 import { MapsStartApi } from './api';
 import { createSecurityLayerDescriptors } from './api/create_security_layer_descriptors';
 
@@ -140,9 +148,22 @@ export class MapsPlugin
     home.featureCatalogue.register(featureCatalogueEntry);
     visualizations.registerAlias(getMapsVisTypeAlias());
     embeddable.registerEmbeddableFactory(MAP_SAVED_OBJECT_TYPE, new MapEmbeddableFactory());
-    return {
-      config,
-    };
+
+    core.application.register({
+      id: APP_ID,
+      title: getAppTitle(),
+      order: 4000,
+      icon: `plugins/${APP_ID}/icon.svg`,
+      euiIconType: APP_ICON,
+      category: DEFAULT_APP_CATEGORIES.kibana,
+      // @ts-expect-error
+      async mount(context, params) {
+        const [coreStart, startPlugins] = await core.getStartServices();
+        bindStartCoreAndPlugins(coreStart, startPlugins);
+        const { renderApp } = await lazyLoadMapModules();
+        return renderApp(context, params);
+      },
+    });
   }
 
   public start(core: CoreStart, plugins: any): MapsStartApi {
diff --git a/x-pack/plugins/maps/public/reducers/store.js b/x-pack/plugins/maps/public/reducers/store.js
index a1bc6b8e70139..c63f5f7fd82fc 100644
--- a/x-pack/plugins/maps/public/reducers/store.js
+++ b/x-pack/plugins/maps/public/reducers/store.js
@@ -9,6 +9,7 @@ import thunk from 'redux-thunk';
 import { ui, DEFAULT_MAP_UI_STATE } from './ui';
 import { map, DEFAULT_MAP_STATE } from './map'; // eslint-disable-line import/named
 import { nonSerializableInstances } from './non_serializable_instances';
+import { MAP_DESTROYED } from '../actions';
 
 export const DEFAULT_MAP_STORE_STATE = {
   ui: { ...DEFAULT_MAP_UI_STATE },
@@ -17,11 +18,21 @@ export const DEFAULT_MAP_STORE_STATE = {
 
 export function createMapStore() {
   const enhancers = [applyMiddleware(thunk)];
-  const rootReducer = combineReducers({
+  const combinedReducers = combineReducers({
     map,
     ui,
     nonSerializableInstances,
   });
+
+  const rootReducer = (state, action) => {
+    // Reset store on map destroyed
+    if (action.type === MAP_DESTROYED) {
+      state = undefined;
+    }
+
+    return combinedReducers(state, action);
+  };
+
   const storeConfig = {};
   return createStore(rootReducer, storeConfig, compose(...enhancers));
 }
diff --git a/x-pack/plugins/maps/public/angular/get_initial_layers.d.ts b/x-pack/plugins/maps/public/routing/bootstrap/get_initial_layers.d.ts
similarity index 84%
rename from x-pack/plugins/maps/public/angular/get_initial_layers.d.ts
rename to x-pack/plugins/maps/public/routing/bootstrap/get_initial_layers.d.ts
index 5b77ea6f514fc..a23e715a08295 100644
--- a/x-pack/plugins/maps/public/angular/get_initial_layers.d.ts
+++ b/x-pack/plugins/maps/public/routing/bootstrap/get_initial_layers.d.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { LayerDescriptor } from '../../common/descriptor_types';
+import { LayerDescriptor } from '../../../common/descriptor_types';
 
 export function getInitialLayers(
   layerListJSON?: string,
diff --git a/x-pack/plugins/maps/public/angular/get_initial_layers.js b/x-pack/plugins/maps/public/routing/bootstrap/get_initial_layers.js
similarity index 57%
rename from x-pack/plugins/maps/public/angular/get_initial_layers.js
rename to x-pack/plugins/maps/public/routing/bootstrap/get_initial_layers.js
index 598fd6ce324d0..cf6f51c8aeacf 100644
--- a/x-pack/plugins/maps/public/angular/get_initial_layers.js
+++ b/x-pack/plugins/maps/public/routing/bootstrap/get_initial_layers.js
@@ -5,25 +5,24 @@
  */
 import _ from 'lodash';
 // Import each layer type, even those not used, to init in registry
-import '../classes/sources/wms_source';
-import '../classes/sources/ems_file_source';
-import '../classes/sources/es_search_source';
-import '../classes/sources/es_pew_pew_source';
-import '../classes/sources/kibana_regionmap_source';
-import '../classes/sources/es_geo_grid_source';
-import '../classes/sources/xyz_tms_source';
-import { KibanaTilemapSource } from '../classes/sources/kibana_tilemap_source';
-import { TileLayer } from '../classes/layers/tile_layer/tile_layer';
-import { EMSTMSSource } from '../classes/sources/ems_tms_source';
-import { VectorTileLayer } from '../classes/layers/vector_tile_layer/vector_tile_layer';
-import { getIsEmsEnabled } from '../kibana_services';
-import { getKibanaTileMap } from '../meta';
+import '../../classes/sources/wms_source';
+import '../../classes/sources/ems_file_source';
+import '../../classes/sources/es_search_source';
+import '../../classes/sources/es_pew_pew_source';
+import '../../classes/sources/kibana_regionmap_source';
+import '../../classes/sources/es_geo_grid_source';
+import '../../classes/sources/xyz_tms_source';
+import { KibanaTilemapSource } from '../../classes/sources/kibana_tilemap_source';
+import { TileLayer } from '../../classes/layers/tile_layer/tile_layer';
+import { EMSTMSSource } from '../../classes/sources/ems_tms_source';
+import { VectorTileLayer } from '../../classes/layers/vector_tile_layer/vector_tile_layer';
+import { getIsEmsEnabled } from '../../kibana_services';
+import { getKibanaTileMap } from '../../meta';
 
 export function getInitialLayers(layerListJSON, initialLayers = []) {
   if (layerListJSON) {
     return JSON.parse(layerListJSON);
   }
-
   const tilemapSourceFromKibana = getKibanaTileMap();
   if (_.get(tilemapSourceFromKibana, 'url')) {
     const layerDescriptor = TileLayer.createDescriptor({
diff --git a/x-pack/plugins/maps/public/angular/get_initial_layers.test.js b/x-pack/plugins/maps/public/routing/bootstrap/get_initial_layers.test.js
similarity index 82%
rename from x-pack/plugins/maps/public/angular/get_initial_layers.test.js
rename to x-pack/plugins/maps/public/routing/bootstrap/get_initial_layers.test.js
index 8ddcd7cb5bbbb..4de29e6f028e1 100644
--- a/x-pack/plugins/maps/public/angular/get_initial_layers.test.js
+++ b/x-pack/plugins/maps/public/routing/bootstrap/get_initial_layers.test.js
@@ -4,10 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-jest.mock('../meta', () => {
+jest.mock('../../meta', () => {
   return {};
 });
-jest.mock('../kibana_services');
+jest.mock('../../kibana_services');
 
 import { getInitialLayers } from './get_initial_layers';
 
@@ -15,7 +15,7 @@ const layerListNotProvided = undefined;
 
 describe('Saved object has layer list', () => {
   beforeEach(() => {
-    require('../kibana_services').getIsEmsEnabled = () => true;
+    require('../../kibana_services').getIsEmsEnabled = () => true;
   });
 
   it('Should get initial layers from saved object', () => {
@@ -32,7 +32,7 @@ describe('Saved object has layer list', () => {
 
 describe('kibana.yml configured with map.tilemap.url', () => {
   beforeAll(() => {
-    require('../meta').getKibanaTileMap = () => {
+    require('../../meta').getKibanaTileMap = () => {
       return {
         url: 'myTileUrl',
       };
@@ -62,11 +62,11 @@ describe('kibana.yml configured with map.tilemap.url', () => {
 
 describe('EMS is enabled', () => {
   beforeAll(() => {
-    require('../meta').getKibanaTileMap = () => {
+    require('../../meta').getKibanaTileMap = () => {
       return null;
     };
-    require('../kibana_services').getIsEmsEnabled = () => true;
-    require('../kibana_services').getEmsTileLayerId = () => ({
+    require('../../kibana_services').getIsEmsEnabled = () => true;
+    require('../../kibana_services').getEmsTileLayerId = () => ({
       bright: 'road_map',
       desaturated: 'road_map_desaturated',
       dark: 'dark_map',
@@ -98,10 +98,10 @@ describe('EMS is enabled', () => {
 
 describe('EMS is not enabled', () => {
   beforeAll(() => {
-    require('../meta').getKibanaTileMap = () => {
+    require('../../meta').getKibanaTileMap = () => {
       return null;
     };
-    require('../kibana_services').getIsEmsEnabled = () => false;
+    require('../../kibana_services').getIsEmsEnabled = () => false;
   });
 
   it('Should return empty layer list since there are no configured tile layers', () => {
diff --git a/x-pack/plugins/maps/public/angular/get_initial_query.js b/x-pack/plugins/maps/public/routing/bootstrap/get_initial_query.js
similarity index 84%
rename from x-pack/plugins/maps/public/angular/get_initial_query.js
rename to x-pack/plugins/maps/public/routing/bootstrap/get_initial_query.js
index 84f431cf2b3b6..dfc3a1c9de96a 100644
--- a/x-pack/plugins/maps/public/angular/get_initial_query.js
+++ b/x-pack/plugins/maps/public/routing/bootstrap/get_initial_query.js
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getUiSettings } from '../kibana_services';
-import { UI_SETTINGS } from '../../../../../src/plugins/data/public';
+import { getUiSettings } from '../../kibana_services';
+import { UI_SETTINGS } from '../../../../../../src/plugins/data/public';
 
 export function getInitialQuery({ mapStateJSON, appState = {}, userQueryLanguage }) {
   const settings = getUiSettings();
diff --git a/x-pack/plugins/maps/public/angular/get_initial_refresh_config.js b/x-pack/plugins/maps/public/routing/bootstrap/get_initial_refresh_config.js
similarity index 86%
rename from x-pack/plugins/maps/public/angular/get_initial_refresh_config.js
rename to x-pack/plugins/maps/public/routing/bootstrap/get_initial_refresh_config.js
index 17a50c6c5f685..d7b3bbf5b4ab2 100644
--- a/x-pack/plugins/maps/public/angular/get_initial_refresh_config.js
+++ b/x-pack/plugins/maps/public/routing/bootstrap/get_initial_refresh_config.js
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getUiSettings } from '../kibana_services';
-import { UI_SETTINGS } from '../../../../../src/plugins/data/public';
+import { getUiSettings } from '../../kibana_services';
+import { UI_SETTINGS } from '../../../../../../src/plugins/data/public';
 
 export function getInitialRefreshConfig({ mapStateJSON, globalState = {} }) {
   const uiSettings = getUiSettings();
diff --git a/x-pack/plugins/maps/public/angular/get_initial_time_filters.js b/x-pack/plugins/maps/public/routing/bootstrap/get_initial_time_filters.js
similarity index 90%
rename from x-pack/plugins/maps/public/angular/get_initial_time_filters.js
rename to x-pack/plugins/maps/public/routing/bootstrap/get_initial_time_filters.js
index 75d9f0e95ccf0..9c11dabe03923 100644
--- a/x-pack/plugins/maps/public/angular/get_initial_time_filters.js
+++ b/x-pack/plugins/maps/public/routing/bootstrap/get_initial_time_filters.js
@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getUiSettings } from '../kibana_services';
+import { getUiSettings } from '../../kibana_services';
 
-export function getInitialTimeFilters({ mapStateJSON, globalState = {} }) {
+export function getInitialTimeFilters({ mapStateJSON, globalState }) {
   if (mapStateJSON) {
     const mapState = JSON.parse(mapStateJSON);
     if (mapState.timeFilters) {
diff --git a/x-pack/plugins/maps/public/angular/services/gis_map_saved_object_loader.js b/x-pack/plugins/maps/public/routing/bootstrap/services/gis_map_saved_object_loader.js
similarity index 87%
rename from x-pack/plugins/maps/public/angular/services/gis_map_saved_object_loader.js
rename to x-pack/plugins/maps/public/routing/bootstrap/services/gis_map_saved_object_loader.js
index ea48eecf4e421..6c7e141c2ab5a 100644
--- a/x-pack/plugins/maps/public/angular/services/gis_map_saved_object_loader.js
+++ b/x-pack/plugins/maps/public/routing/bootstrap/services/gis_map_saved_object_loader.js
@@ -6,14 +6,14 @@
 
 import _ from 'lodash';
 import { createSavedGisMapClass } from './saved_gis_map';
-import { SavedObjectLoader } from '../../../../../../src/plugins/saved_objects/public';
+import { SavedObjectLoader } from '../../../../../../../src/plugins/saved_objects/public';
 import {
   getCoreChrome,
   getSavedObjectsClient,
   getIndexPatternService,
   getCoreOverlays,
   getData,
-} from '../../kibana_services';
+} from '../../../kibana_services';
 
 export const getMapsSavedObjectLoader = _.once(function () {
   const services = {
diff --git a/x-pack/plugins/maps/public/angular/services/saved_gis_map.js b/x-pack/plugins/maps/public/routing/bootstrap/services/saved_gis_map.js
similarity index 82%
rename from x-pack/plugins/maps/public/angular/services/saved_gis_map.js
rename to x-pack/plugins/maps/public/routing/bootstrap/services/saved_gis_map.js
index a0beaa768888a..f24c7be65afa3 100644
--- a/x-pack/plugins/maps/public/angular/services/saved_gis_map.js
+++ b/x-pack/plugins/maps/public/routing/bootstrap/services/saved_gis_map.js
@@ -5,7 +5,7 @@
  */
 
 import _ from 'lodash';
-import { createSavedObjectClass } from '../../../../../../src/plugins/saved_objects/public';
+import { createSavedObjectClass } from '../../../../../../../src/plugins/saved_objects/public';
 import {
   getTimeFilters,
   getMapZoom,
@@ -15,11 +15,12 @@ import {
   getQuery,
   getFilters,
   getMapSettings,
-} from '../../selectors/map_selectors';
-import { getIsLayerTOCOpen, getOpenTOCDetails } from '../../selectors/ui_selectors';
-import { copyPersistentState } from '../../reducers/util';
-import { extractReferences, injectReferences } from '../../../common/migrations/references';
-import { MAP_SAVED_OBJECT_TYPE } from '../../../common/constants';
+} from '../../../selectors/map_selectors';
+import { getIsLayerTOCOpen, getOpenTOCDetails } from '../../../selectors/ui_selectors';
+import { copyPersistentState } from '../../../reducers/util';
+import { extractReferences, injectReferences } from '../../../../common/migrations/references';
+import { MAP_BASE_URL, MAP_SAVED_OBJECT_TYPE } from '../../../../common/constants';
+import { getStore } from '../../store_operations';
 
 export function createSavedGisMapClass(services) {
   const SavedObjectClass = createSavedObjectClass(services);
@@ -73,14 +74,17 @@ export function createSavedGisMapClass(services) {
       });
       this.showInRecentlyAccessed = true;
     }
+
     getFullPath() {
-      return `/app/maps#map/${this.id}`;
+      return `${MAP_BASE_URL}/${this.id}`;
     }
+
     getLayerList() {
       return this.layerListJSON ? JSON.parse(this.layerListJSON) : null;
     }
 
-    syncWithStore(state) {
+    syncWithStore() {
+      const state = getStore().getState();
       const layerList = getLayerListRaw(state);
       const layerListConfigOnly = copyPersistentState(layerList);
       this.layerListJSON = JSON.stringify(layerListConfigOnly);
diff --git a/x-pack/plugins/maps/public/routing/maps_router.js b/x-pack/plugins/maps/public/routing/maps_router.js
new file mode 100644
index 0000000000000..840d4f2c66922
--- /dev/null
+++ b/x-pack/plugins/maps/public/routing/maps_router.js
@@ -0,0 +1,62 @@
+/*
+ * 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 { render, unmountComponentAtNode } from 'react-dom';
+import { Router, Switch, Route, Redirect } from 'react-router-dom';
+import { getCoreI18n } from '../kibana_services';
+import { createKbnUrlStateStorage } from '../../../../../src/plugins/kibana_utils/public';
+import { getStore } from './store_operations';
+import { Provider } from 'react-redux';
+import { LoadListAndRender } from './routes/list/load_list_and_render';
+import { LoadMapAndRender } from './routes/maps_app/load_map_and_render';
+
+export let goToSpecifiedPath;
+export let kbnUrlStateStorage;
+
+export async function renderApp(context, { appBasePath, element, history }) {
+  goToSpecifiedPath = (path) => history.push(path);
+  kbnUrlStateStorage = createKbnUrlStateStorage({ useHash: false, history });
+
+  render(<App history={history} appBasePath={appBasePath} />, element);
+
+  return () => {
+    unmountComponentAtNode(element);
+  };
+}
+
+const App = ({ history, appBasePath }) => {
+  const store = getStore();
+  const I18nContext = getCoreI18n().Context;
+
+  return (
+    <I18nContext>
+      <Provider store={store}>
+        <Router basename={appBasePath} history={history}>
+          <Switch>
+            <Route path={`/map/:savedMapId`} component={LoadMapAndRender} />
+            <Route exact path={`/map`} component={LoadMapAndRender} />
+            // Redirect other routes to list, or if hash-containing, their non-hash equivalents
+            <Route
+              path={``}
+              render={({ location: { pathname, hash } }) => {
+                if (hash) {
+                  // Remove leading hash
+                  const newPath = hash.substr(1);
+                  return <Redirect to={newPath} />;
+                } else if (pathname === '/' || pathname === '') {
+                  return <LoadListAndRender />;
+                } else {
+                  return <Redirect to="/" />;
+                }
+              }}
+            />
+          </Switch>
+        </Router>
+      </Provider>
+    </I18nContext>
+  );
+};
diff --git a/x-pack/plugins/maps/public/routing/page_elements/breadcrumbs.js b/x-pack/plugins/maps/public/routing/page_elements/breadcrumbs.js
new file mode 100644
index 0000000000000..36a355719d945
--- /dev/null
+++ b/x-pack/plugins/maps/public/routing/page_elements/breadcrumbs.js
@@ -0,0 +1,60 @@
+/*
+ * 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 { getCoreChrome } from '../../kibana_services';
+import { MAP_SAVED_OBJECT_TYPE } from '../../../common/constants';
+import _ from 'lodash';
+import { getLayerListRaw } from '../../selectors/map_selectors';
+import { copyPersistentState } from '../../reducers/util';
+import { getStore } from '../store_operations';
+import { goToSpecifiedPath } from '../maps_router';
+
+function hasUnsavedChanges(savedMap, initialLayerListConfig) {
+  const state = getStore().getState();
+  const layerList = getLayerListRaw(state);
+  const layerListConfigOnly = copyPersistentState(layerList);
+
+  const savedLayerList = savedMap.getLayerList();
+
+  return !savedLayerList
+    ? !_.isEqual(layerListConfigOnly, initialLayerListConfig)
+    : // savedMap stores layerList as a JSON string using JSON.stringify.
+      // JSON.stringify removes undefined properties from objects.
+      // savedMap.getLayerList converts the JSON string back into Javascript array of objects.
+      // Need to perform the same process for layerListConfigOnly to compare apples to apples
+      // and avoid undefined properties in layerListConfigOnly triggering unsaved changes.
+      !_.isEqual(JSON.parse(JSON.stringify(layerListConfigOnly)), savedLayerList);
+}
+
+export const updateBreadcrumbs = (savedMap, initialLayerListConfig, currentPath = '') => {
+  const isOnMapNow = currentPath.startsWith(`/${MAP_SAVED_OBJECT_TYPE}`);
+  const breadCrumbs = isOnMapNow
+    ? [
+        {
+          text: i18n.translate('xpack.maps.mapController.mapsBreadcrumbLabel', {
+            defaultMessage: 'Maps',
+          }),
+          onClick: () => {
+            if (hasUnsavedChanges(savedMap, initialLayerListConfig)) {
+              const navigateAway = window.confirm(
+                i18n.translate('xpack.maps.breadCrumbs.unsavedChangesWarning', {
+                  defaultMessage: `Your unsaved changes might not be saved`,
+                })
+              );
+              if (navigateAway) {
+                goToSpecifiedPath('/');
+              }
+            } else {
+              goToSpecifiedPath('/');
+            }
+          },
+        },
+        { text: savedMap.title },
+      ]
+    : [];
+  getCoreChrome().setBreadcrumbs(breadCrumbs);
+};
diff --git a/x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/index.js b/x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/index.js
new file mode 100644
index 0000000000000..2575bbb9df920
--- /dev/null
+++ b/x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/index.js
@@ -0,0 +1,44 @@
+/*
+ * 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 { connect } from 'react-redux';
+import { MapsTopNavMenu } from './top_nav_menu';
+import {
+  enableFullScreen,
+  openMapSettings,
+  removePreviewLayers,
+  setRefreshConfig,
+  setSelectedLayer,
+  updateFlyout,
+} from '../../../actions';
+import { FLYOUT_STATE } from '../../../reducers/ui';
+import { getInspectorAdapters } from '../../../reducers/non_serializable_instances';
+import { getFlyoutDisplay } from '../../../selectors/ui_selectors';
+import { hasDirtyState } from '../../../selectors/map_selectors';
+
+function mapStateToProps(state = {}) {
+  return {
+    isOpenSettingsDisabled: getFlyoutDisplay(state) !== FLYOUT_STATE.NONE,
+    inspectorAdapters: getInspectorAdapters(state),
+    isSaveDisabled: hasDirtyState(state),
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    closeFlyout: () => {
+      dispatch(setSelectedLayer(null));
+      dispatch(updateFlyout(FLYOUT_STATE.NONE));
+      dispatch(removePreviewLayers());
+    },
+    setRefreshStoreConfig: (refreshConfig) => dispatch(setRefreshConfig(refreshConfig)),
+    enableFullScreen: () => dispatch(enableFullScreen()),
+    openMapSettings: () => dispatch(openMapSettings()),
+  };
+}
+
+const connectedMapsTopNavMenu = connect(mapStateToProps, mapDispatchToProps)(MapsTopNavMenu);
+export { connectedMapsTopNavMenu as MapsTopNavMenu };
diff --git a/x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/top_nav_menu.js b/x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/top_nav_menu.js
new file mode 100644
index 0000000000000..762d61d6d33f9
--- /dev/null
+++ b/x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/top_nav_menu.js
@@ -0,0 +1,279 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import {
+  getNavigation,
+  getCoreChrome,
+  getMapsCapabilities,
+  getInspector,
+  getToasts,
+  getCoreI18n,
+  getData,
+  getUiSettings,
+} from '../../../kibana_services';
+import {
+  SavedObjectSaveModal,
+  showSaveModal,
+} from '../../../../../../../src/plugins/saved_objects/public';
+import { MAP_SAVED_OBJECT_TYPE } from '../../../../common/constants';
+import { updateBreadcrumbs } from '../breadcrumbs';
+import { goToSpecifiedPath } from '../../maps_router';
+
+export function MapsTopNavMenu({
+  savedMap,
+  query,
+  onQueryChange,
+  onQuerySaved,
+  onSavedQueryUpdated,
+  savedQuery,
+  time,
+  refreshConfig,
+  setRefreshConfig,
+  setRefreshStoreConfig,
+  initialLayerListConfig,
+  indexPatterns,
+  updateFiltersAndDispatch,
+  isSaveDisabled,
+  closeFlyout,
+  enableFullScreen,
+  openMapSettings,
+  inspectorAdapters,
+  syncAppAndGlobalState,
+  currentPath,
+  isOpenSettingsDisabled,
+}) {
+  const { TopNavMenu } = getNavigation().ui;
+  const { filterManager } = getData().query;
+  const showSaveQuery = getMapsCapabilities().saveQuery;
+  const onClearSavedQuery = () => {
+    onQuerySaved(undefined);
+    onQueryChange({
+      filters: filterManager.getGlobalFilters(),
+      query: {
+        query: '',
+        language: getUiSettings().get('search:queryLanguage'),
+      },
+    });
+  };
+
+  // Nav settings
+  const config = getTopNavConfig(
+    savedMap,
+    initialLayerListConfig,
+    isOpenSettingsDisabled,
+    isSaveDisabled,
+    closeFlyout,
+    enableFullScreen,
+    openMapSettings,
+    inspectorAdapters,
+    currentPath
+  );
+
+  const submitQuery = function ({ dateRange, query }) {
+    onQueryChange({
+      query,
+      time: dateRange,
+      refresh: true,
+    });
+  };
+
+  const onRefreshChange = function ({ isPaused, refreshInterval }) {
+    const newRefreshConfig = {
+      isPaused,
+      interval: isNaN(refreshInterval) ? refreshConfig.interval : refreshInterval,
+    };
+    setRefreshConfig(newRefreshConfig, () => {
+      setRefreshStoreConfig(newRefreshConfig);
+      syncAppAndGlobalState();
+    });
+  };
+
+  return (
+    <TopNavMenu
+      appName="maps"
+      config={config}
+      indexPatterns={indexPatterns || []}
+      filters={filterManager.getFilters()}
+      query={query}
+      onQuerySubmit={submitQuery}
+      onFiltersUpdated={updateFiltersAndDispatch}
+      dateRangeFrom={time.from}
+      dateRangeTo={time.to}
+      isRefreshPaused={refreshConfig.isPaused}
+      refreshInterval={refreshConfig.interval}
+      onRefreshChange={onRefreshChange}
+      showSearchBar={true}
+      showFilterBar={true}
+      showDatePicker={true}
+      showSaveQuery={showSaveQuery}
+      savedQuery={savedQuery}
+      onSaved={onQuerySaved}
+      onSavedQueryUpdated={onSavedQueryUpdated}
+      onClearSavedQuery={onClearSavedQuery}
+    />
+  );
+}
+
+function getTopNavConfig(
+  savedMap,
+  initialLayerListConfig,
+  isOpenSettingsDisabled,
+  isSaveDisabled,
+  closeFlyout,
+  enableFullScreen,
+  openMapSettings,
+  inspectorAdapters,
+  currentPath
+) {
+  return [
+    {
+      id: 'full-screen',
+      label: i18n.translate('xpack.maps.mapController.fullScreenButtonLabel', {
+        defaultMessage: `full screen`,
+      }),
+      description: i18n.translate('xpack.maps.mapController.fullScreenDescription', {
+        defaultMessage: `full screen`,
+      }),
+      testId: 'mapsFullScreenMode',
+      run() {
+        getCoreChrome().setIsVisible(false);
+        enableFullScreen();
+      },
+    },
+    {
+      id: 'inspect',
+      label: i18n.translate('xpack.maps.mapController.openInspectorButtonLabel', {
+        defaultMessage: `inspect`,
+      }),
+      description: i18n.translate('xpack.maps.mapController.openInspectorDescription', {
+        defaultMessage: `Open Inspector`,
+      }),
+      testId: 'openInspectorButton',
+      run() {
+        getInspector().open(inspectorAdapters, {});
+      },
+    },
+    {
+      id: 'mapSettings',
+      label: i18n.translate('xpack.maps.mapController.openSettingsButtonLabel', {
+        defaultMessage: `Map settings`,
+      }),
+      description: i18n.translate('xpack.maps.mapController.openSettingsDescription', {
+        defaultMessage: `Open map settings`,
+      }),
+      testId: 'openSettingsButton',
+      disableButton() {
+        return isOpenSettingsDisabled;
+      },
+      run() {
+        openMapSettings();
+      },
+    },
+    ...(getMapsCapabilities().save
+      ? [
+          {
+            id: 'save',
+            label: i18n.translate('xpack.maps.mapController.saveMapButtonLabel', {
+              defaultMessage: `save`,
+            }),
+            description: i18n.translate('xpack.maps.mapController.saveMapDescription', {
+              defaultMessage: `Save map`,
+            }),
+            testId: 'mapSaveButton',
+            disableButton() {
+              return isSaveDisabled;
+            },
+            tooltip() {
+              if (isSaveDisabled) {
+                return i18n.translate('xpack.maps.mapController.saveMapDisabledButtonTooltip', {
+                  defaultMessage: 'Save or Cancel your layer changes before saving',
+                });
+              }
+            },
+            run: async () => {
+              const onSave = ({
+                newTitle,
+                newCopyOnSave,
+                isTitleDuplicateConfirmed,
+                onTitleDuplicate,
+              }) => {
+                const currentTitle = savedMap.title;
+                savedMap.title = newTitle;
+                savedMap.copyOnSave = newCopyOnSave;
+                const saveOptions = {
+                  confirmOverwrite: false,
+                  isTitleDuplicateConfirmed,
+                  onTitleDuplicate,
+                };
+                return doSave(
+                  savedMap,
+                  saveOptions,
+                  initialLayerListConfig,
+                  closeFlyout,
+                  currentPath
+                ).then((response) => {
+                  // If the save wasn't successful, put the original values back.
+                  if (!response.id || response.error) {
+                    savedMap.title = currentTitle;
+                  }
+                  return response;
+                });
+              };
+
+              const saveModal = (
+                <SavedObjectSaveModal
+                  onSave={onSave}
+                  onClose={() => {}}
+                  title={savedMap.title}
+                  showCopyOnSave={!!savedMap.id}
+                  objectType={MAP_SAVED_OBJECT_TYPE}
+                  showDescription={false}
+                />
+              );
+              showSaveModal(saveModal, getCoreI18n().Context);
+            },
+          },
+        ]
+      : []),
+  ];
+}
+
+async function doSave(savedMap, saveOptions, initialLayerListConfig, closeFlyout, currentPath) {
+  closeFlyout();
+  savedMap.syncWithStore();
+  let id;
+
+  try {
+    id = await savedMap.save(saveOptions);
+    getCoreChrome().docTitle.change(savedMap.title);
+  } catch (err) {
+    getToasts().addDanger({
+      title: i18n.translate('xpack.maps.mapController.saveErrorMessage', {
+        defaultMessage: `Error on saving '{title}'`,
+        values: { title: savedMap.title },
+      }),
+      text: err.message,
+      'data-test-subj': 'saveMapError',
+    });
+    return { error: err };
+  }
+
+  if (id) {
+    goToSpecifiedPath(`/map/${id}${window.location.hash}`);
+    updateBreadcrumbs(savedMap, initialLayerListConfig, currentPath);
+
+    getToasts().addSuccess({
+      title: i18n.translate('xpack.maps.mapController.saveSuccessMessage', {
+        defaultMessage: `Saved '{title}'`,
+        values: { title: savedMap.title },
+      }),
+      'data-test-subj': 'saveMapSuccess',
+    });
+  }
+  return { id };
+}
diff --git a/x-pack/plugins/maps/public/routing/routes/list/load_list_and_render.js b/x-pack/plugins/maps/public/routing/routes/list/load_list_and_render.js
new file mode 100644
index 0000000000000..ee1307956071a
--- /dev/null
+++ b/x-pack/plugins/maps/public/routing/routes/list/load_list_and_render.js
@@ -0,0 +1,57 @@
+/*
+ * 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 { getMapsSavedObjectLoader } from '../../bootstrap/services/gis_map_saved_object_loader';
+import { getToasts } from '../../../kibana_services';
+import { i18n } from '@kbn/i18n';
+import { MapsListView } from './maps_list_view';
+import { Redirect } from 'react-router-dom';
+
+export class LoadListAndRender extends React.Component {
+  state = {
+    mapsLoaded: false,
+    hasSavedMaps: null,
+  };
+
+  componentDidMount() {
+    this._isMounted = true;
+    this._loadMapsList();
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  async _loadMapsList() {
+    try {
+      const { hits = [] } = await getMapsSavedObjectLoader().find('', 1);
+      if (this._isMounted) {
+        this.setState({ mapsLoaded: true, hasSavedMaps: !!hits.length });
+      }
+    } catch (err) {
+      if (this._isMounted) {
+        this.setState({ mapsLoaded: true, hasSavedMaps: false });
+        getToasts().addDanger({
+          title: i18n.translate('xpack.maps.mapListing.errorAttemptingToLoadSavedMaps', {
+            defaultMessage: `Unable to load maps`,
+          }),
+          text: `${err}`,
+        });
+      }
+    }
+  }
+
+  render() {
+    const { mapsLoaded, hasSavedMaps } = this.state;
+
+    if (mapsLoaded) {
+      return hasSavedMaps ? <MapsListView /> : <Redirect to="/map" />;
+    } else {
+      return null;
+    }
+  }
+}
diff --git a/x-pack/plugins/maps/public/components/map_listing.js b/x-pack/plugins/maps/public/routing/routes/list/maps_list_view.js
similarity index 86%
rename from x-pack/plugins/maps/public/components/map_listing.js
rename to x-pack/plugins/maps/public/routing/routes/list/maps_list_view.js
index 030b67185c106..a32bd00dbae51 100644
--- a/x-pack/plugins/maps/public/components/map_listing.js
+++ b/x-pack/plugins/maps/public/routing/routes/list/maps_list_view.js
@@ -5,10 +5,14 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import _ from 'lodash';
-
-import { getToasts } from '../kibana_services';
+import { getMapsSavedObjectLoader } from '../../bootstrap/services/gis_map_saved_object_loader';
+import {
+  getMapsCapabilities,
+  getUiSettings,
+  getToasts,
+  getCoreChrome,
+} from '../../../kibana_services';
 import {
   EuiTitle,
   EuiFieldSearch,
@@ -27,11 +31,14 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { addHelpMenuToAppChrome } from '../help_menu_util';
+import { addHelpMenuToAppChrome } from '../../../help_menu_util';
+import { Link } from 'react-router-dom';
+import { updateBreadcrumbs } from '../../page_elements/breadcrumbs';
+import { goToSpecifiedPath } from '../../maps_router';
 
 export const EMPTY_FILTER = '';
 
-export class MapListing extends React.Component {
+export class MapsListView extends React.Component {
   state = {
     hasInitialFetchReturned: false,
     isFetchingItems: false,
@@ -42,10 +49,13 @@ export class MapListing extends React.Component {
     selectedIds: [],
     page: 0,
     perPage: 20,
+    readOnly: !getMapsCapabilities().save,
+    listingLimit: getUiSettings().get('savedObjects:listingLimit'),
   };
 
   UNSAFE_componentWillMount() {
     this._isMounted = true;
+    updateBreadcrumbs();
   }
 
   componentWillUnmount() {
@@ -54,12 +64,21 @@ export class MapListing extends React.Component {
   }
 
   componentDidMount() {
+    this.initMapList();
+  }
+
+  async initMapList() {
     this.fetchItems();
     addHelpMenuToAppChrome();
+    getCoreChrome().docTitle.change('Maps');
   }
 
+  _find = (search) => getMapsSavedObjectLoader().find(search, this.state.listingLimit);
+
+  _delete = (ids) => getMapsSavedObjectLoader().delete(ids);
+
   debouncedFetch = _.debounce(async (filter) => {
-    const response = await this.props.find(filter);
+    const response = await this._find(filter);
 
     if (!this._isMounted) {
       return;
@@ -73,7 +92,7 @@ export class MapListing extends React.Component {
         isFetchingItems: false,
         items: response.hits,
         totalItems: response.total,
-        showLimitError: response.total > this.props.listingLimit,
+        showLimitError: response.total > this.state.listingLimit,
       });
     }
   }, 300);
@@ -89,7 +108,7 @@ export class MapListing extends React.Component {
 
   deleteSelectedItems = async () => {
     try {
-      await this.props.delete(this.state.selectedIds);
+      await this._delete(this.state.selectedIds);
     } catch (error) {
       getToasts().addDanger({
         title: i18n.translate('xpack.maps.mapListing.unableToDeleteToastTitle', {
@@ -211,11 +230,11 @@ export class MapListing extends React.Component {
               <FormattedMessage
                 id="xpack.maps.mapListing.limitHelpDescription"
                 defaultMessage="You have {totalItems} items,
-              but your <strong>listingLimit</strong> setting prevents the table below from displaying more than {listingLimit}.
-              You can change this setting under "
+            but your <strong>listingLimit</strong> setting prevents the table below from displaying more than {listingLimit}.
+            You can change this setting under "
                 values={{
                   totalItems: this.state.totalItems,
-                  listingLimit: this.props.listingLimit,
+                  listingLimit: this.state.listingLimit,
                 }}
               />
               <EuiLink href="#/management/kibana/settings">
@@ -307,7 +326,10 @@ export class MapListing extends React.Component {
         sortable: true,
         render: (field, record) => (
           <EuiLink
-            href={`#/map/${record.id}`}
+            onClick={(e) => {
+              e.preventDefault();
+              goToSpecifiedPath(`/map/${record.id}`);
+            }}
             data-test-subj={`mapListingTitleLink-${record.title.split(' ').join('-')}`}
           >
             {field}
@@ -331,7 +353,7 @@ export class MapListing extends React.Component {
     };
 
     let selection = false;
-    if (!this.props.readOnly) {
+    if (!this.state.readOnly) {
       selection = {
         onSelectionChange: (selection) => {
           this.setState({
@@ -369,14 +391,16 @@ export class MapListing extends React.Component {
 
   renderListing() {
     let createButton;
-    if (!this.props.readOnly) {
+    if (!this.state.readOnly) {
       createButton = (
-        <EuiButton href={`#/map`} data-test-subj="newMapLink" fill>
-          <FormattedMessage
-            id="xpack.maps.mapListing.createMapButtonLabel"
-            defaultMessage="Create map"
-          />
-        </EuiButton>
+        <Link to={'/map'}>
+          <EuiButton data-test-subj="newMapLink" fill>
+            <FormattedMessage
+              id="xpack.maps.mapListing.createMapButtonLabel"
+              defaultMessage="Create map"
+            />
+          </EuiButton>
+        </Link>
       );
     }
     return (
@@ -427,10 +451,3 @@ export class MapListing extends React.Component {
     );
   }
 }
-
-MapListing.propTypes = {
-  readOnly: PropTypes.bool.isRequired,
-  find: PropTypes.func.isRequired,
-  delete: PropTypes.func.isRequired,
-  listingLimit: PropTypes.number.isRequired,
-};
diff --git a/x-pack/plugins/maps/public/routing/routes/maps_app/index.js b/x-pack/plugins/maps/public/routing/routes/maps_app/index.js
new file mode 100644
index 0000000000000..6b47ac6e0352a
--- /dev/null
+++ b/x-pack/plugins/maps/public/routing/routes/maps_app/index.js
@@ -0,0 +1,67 @@
+/*
+ * 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 { connect } from 'react-redux';
+import { MapsAppView } from './maps_app_view';
+import { getFlyoutDisplay, getIsFullScreen } from '../../../selectors/ui_selectors';
+import {
+  getFilters,
+  getQueryableUniqueIndexPatternIds,
+  getRefreshConfig,
+} from '../../../selectors/map_selectors';
+import {
+  replaceLayerList,
+  setGotoWithCenter,
+  setIsLayerTOCOpen,
+  setMapSettings,
+  setOpenTOCDetails,
+  setQuery,
+  setReadOnly,
+  setRefreshConfig,
+  setSelectedLayer,
+  updateFlyout,
+} from '../../../actions';
+import { FLYOUT_STATE } from '../../../reducers/ui';
+import { getMapsCapabilities } from '../../../kibana_services';
+
+function mapStateToProps(state = {}) {
+  return {
+    isFullScreen: getIsFullScreen(state),
+    nextIndexPatternIds: getQueryableUniqueIndexPatternIds(state),
+    flyoutDisplay: getFlyoutDisplay(state),
+    refreshConfig: getRefreshConfig(state),
+    filters: getFilters(state),
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    dispatchSetQuery: (refresh, filters, query, time) => {
+      dispatch(
+        setQuery({
+          filters,
+          query,
+          timeFilters: time,
+          refresh,
+        })
+      );
+    },
+    setRefreshConfig: (refreshConfig) => dispatch(setRefreshConfig(refreshConfig)),
+    replaceLayerList: (layerList) => dispatch(replaceLayerList(layerList)),
+    setGotoWithCenter: (latLonZoom) => dispatch(setGotoWithCenter(latLonZoom)),
+    setMapSettings: (mapSettings) => dispatch(setMapSettings(mapSettings)),
+    setIsLayerTOCOpen: (isLayerTOCOpen) => dispatch(setIsLayerTOCOpen(isLayerTOCOpen)),
+    setOpenTOCDetails: (openTOCDetails) => dispatch(setOpenTOCDetails(openTOCDetails)),
+    clearUi: () => {
+      dispatch(setSelectedLayer(null));
+      dispatch(updateFlyout(FLYOUT_STATE.NONE));
+      dispatch(setReadOnly(!getMapsCapabilities().save));
+    },
+  };
+}
+
+const connectedMapsAppView = connect(mapStateToProps, mapDispatchToProps)(MapsAppView);
+export { connectedMapsAppView as MapsAppView };
diff --git a/x-pack/plugins/maps/public/routing/routes/maps_app/load_map_and_render.js b/x-pack/plugins/maps/public/routing/routes/maps_app/load_map_and_render.js
new file mode 100644
index 0000000000000..a17b83502e048
--- /dev/null
+++ b/x-pack/plugins/maps/public/routing/routes/maps_app/load_map_and_render.js
@@ -0,0 +1,58 @@
+/*
+ * 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 { MapsAppView } from '.';
+import { getMapsSavedObjectLoader } from '../../bootstrap/services/gis_map_saved_object_loader';
+import { getToasts } from '../../../kibana_services';
+import { i18n } from '@kbn/i18n';
+import { Redirect } from 'react-router-dom';
+
+export const LoadMapAndRender = class extends React.Component {
+  state = {
+    savedMap: null,
+    failedToLoad: false,
+  };
+
+  componentDidMount() {
+    this._isMounted = true;
+    this._loadSavedMap();
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  async _loadSavedMap() {
+    const { savedMapId } = this.props.match.params;
+    try {
+      const savedMap = await getMapsSavedObjectLoader().get(savedMapId);
+      if (this._isMounted) {
+        this.setState({ savedMap });
+      }
+    } catch (err) {
+      if (this._isMounted) {
+        this.setState({ failedToLoad: true });
+        getToasts().addWarning({
+          title: i18n.translate('xpack.maps.loadMap.errorAttemptingToLoadSavedMap', {
+            defaultMessage: `Unable to load map`,
+          }),
+          text: `${err.message}`,
+        });
+      }
+    }
+  }
+
+  render() {
+    const { savedMap, failedToLoad } = this.state;
+    if (failedToLoad) {
+      return <Redirect to="/" />;
+    }
+
+    const currentPath = this.props.match.url;
+    return savedMap ? <MapsAppView savedMap={savedMap} currentPath={currentPath} /> : null;
+  }
+};
diff --git a/x-pack/plugins/maps/public/routing/routes/maps_app/maps_app_view.js b/x-pack/plugins/maps/public/routing/routes/maps_app/maps_app_view.js
new file mode 100644
index 0000000000000..bf92f5a337121
--- /dev/null
+++ b/x-pack/plugins/maps/public/routing/routes/maps_app/maps_app_view.js
@@ -0,0 +1,476 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import _ from 'lodash';
+import { DEFAULT_IS_LAYER_TOC_OPEN } from '../../../reducers/ui';
+import {
+  getIndexPatternService,
+  getToasts,
+  getData,
+  getUiSettings,
+  getCoreChrome,
+} from '../../../kibana_services';
+import { copyPersistentState } from '../../../reducers/util';
+import { getInitialLayers } from '../../bootstrap/get_initial_layers';
+import rison from 'rison-node';
+import { getInitialTimeFilters } from '../../bootstrap/get_initial_time_filters';
+import { getInitialRefreshConfig } from '../../bootstrap/get_initial_refresh_config';
+import { getInitialQuery } from '../../bootstrap/get_initial_query';
+import { MapsTopNavMenu } from '../../page_elements/top_nav_menu';
+import {
+  getGlobalState,
+  updateGlobalState,
+  useGlobalStateSyncing,
+} from '../../state_syncing/global_sync';
+import { AppStateManager } from '../../state_syncing/app_state_manager';
+import { useAppStateSyncing } from '../../state_syncing/app_sync';
+import { updateBreadcrumbs } from '../../page_elements/breadcrumbs';
+import { esFilters } from '../../../../../../../src/plugins/data/public';
+import { GisMap } from '../../../connected_components/gis_map';
+
+export class MapsAppView extends React.Component {
+  _visibleSubscription = null;
+  _globalSyncUnsubscribe = null;
+  _globalSyncChangeMonitorSubscription = null;
+  _appSyncUnsubscribe = null;
+  _appStateManager = new AppStateManager();
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      indexPatterns: [],
+      prevIndexPatternIds: [],
+      initialized: false,
+      isVisible: true,
+      savedQuery: '',
+      currentPath: '',
+      initialLayerListConfig: null,
+    };
+  }
+
+  componentDidMount() {
+    const { savedMap, currentPath } = this.props;
+    this.setState({ currentPath });
+
+    getCoreChrome().docTitle.change(savedMap.title);
+    getCoreChrome().recentlyAccessed.add(savedMap.getFullPath(), savedMap.title, savedMap.id);
+
+    // Init sync utils
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    this._globalSyncUnsubscribe = useGlobalStateSyncing();
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    this._appSyncUnsubscribe = useAppStateSyncing(this._appStateManager);
+    this._globalSyncChangeMonitorSubscription = getData().query.state$.subscribe(
+      this._updateFromGlobalState
+    );
+
+    // Check app state in case of refresh
+    const initAppState = this._appStateManager.getAppState();
+    this._onQueryChange(initAppState);
+    if (initAppState.savedQuery) {
+      this._updateStateFromSavedQuery(initAppState.savedQuery);
+    }
+
+    // Monitor visibility
+    this._visibleSubscription = getCoreChrome()
+      .getIsVisible$()
+      .subscribe((isVisible) => this.setState({ isVisible }));
+    this._initMap();
+  }
+
+  _initBreadcrumbUpdater = () => {
+    const { initialLayerListConfig, currentPath } = this.state;
+    updateBreadcrumbs(this.props.savedMap, initialLayerListConfig, currentPath);
+  };
+
+  componentDidUpdate(prevProps, prevState) {
+    const { currentPath: prevCurrentPath } = prevState;
+    const { currentPath, initialLayerListConfig } = this.state;
+    const { savedMap } = this.props;
+    if (savedMap && initialLayerListConfig && currentPath !== prevCurrentPath) {
+      updateBreadcrumbs(savedMap, initialLayerListConfig, currentPath);
+    }
+    // TODO: Handle null when converting to TS
+    this._handleStoreChanges();
+  }
+
+  _updateFromGlobalState = ({ changes, state: globalState }) => {
+    if (!changes || !globalState) {
+      return;
+    }
+    const newState = {};
+    Object.keys(changes).forEach((key) => {
+      if (changes[key]) {
+        newState[key] = globalState[key];
+      }
+    });
+
+    this.setState(newState, () => {
+      this._appStateManager.setQueryAndFilters({
+        filters: getData().query.filterManager.getAppFilters(),
+      });
+      const { time, filters, refreshInterval } = globalState;
+      this.props.dispatchSetQuery(refreshInterval, filters, this.state.query, time);
+    });
+  };
+
+  componentWillUnmount() {
+    if (this._globalSyncUnsubscribe) {
+      this._globalSyncUnsubscribe();
+    }
+    if (this._appSyncUnsubscribe) {
+      this._appSyncUnsubscribe();
+    }
+    if (this._visibleSubscription) {
+      this._visibleSubscription.unsubscribe();
+    }
+    if (this._globalSyncChangeMonitorSubscription) {
+      this._globalSyncChangeMonitorSubscription.unsubscribe();
+    }
+
+    // Clean up app state filters
+    const { filterManager } = getData().query;
+    filterManager.filters.forEach((filter) => {
+      if (filter.$state.store === esFilters.FilterStateStore.APP_STATE) {
+        filterManager.removeFilter(filter);
+      }
+    });
+  }
+
+  _getInitialLayersFromUrlParam() {
+    const locationSplit = window.location.href.split('?');
+    if (locationSplit.length <= 1) {
+      return [];
+    }
+    const mapAppParams = new URLSearchParams(locationSplit[1]);
+    if (!mapAppParams.has('initialLayers')) {
+      return [];
+    }
+
+    try {
+      let mapInitLayers = mapAppParams.get('initialLayers');
+      if (mapInitLayers[mapInitLayers.length - 1] === '#') {
+        mapInitLayers = mapInitLayers.substr(0, mapInitLayers.length - 1);
+      }
+      return rison.decode_array(mapInitLayers);
+    } catch (e) {
+      getToasts().addWarning({
+        title: i18n.translate('xpack.maps.initialLayers.unableToParseTitle', {
+          defaultMessage: `Initial layers not added to map`,
+        }),
+        text: i18n.translate('xpack.maps.initialLayers.unableToParseMessage', {
+          defaultMessage: `Unable to parse contents of 'initialLayers' parameter. Error: {errorMsg}`,
+          values: { errorMsg: e.message },
+        }),
+      });
+      return [];
+    }
+  }
+
+  async _updateIndexPatterns(nextIndexPatternIds) {
+    const indexPatterns = [];
+    const getIndexPatternPromises = nextIndexPatternIds.map(async (indexPatternId) => {
+      try {
+        const indexPattern = await getIndexPatternService().get(indexPatternId);
+        indexPatterns.push(indexPattern);
+      } catch (err) {
+        // unable to fetch index pattern
+      }
+    });
+
+    await Promise.all(getIndexPatternPromises);
+    this.setState({
+      indexPatterns,
+    });
+  }
+
+  _handleStoreChanges = () => {
+    const { prevIndexPatternIds } = this.state;
+    const { nextIndexPatternIds } = this.props;
+
+    if (nextIndexPatternIds !== prevIndexPatternIds) {
+      this.setState({ prevIndexPatternIds: nextIndexPatternIds });
+      this._updateIndexPatterns(nextIndexPatternIds);
+    }
+  };
+
+  _getAppStateFilters = () => {
+    return this._appStateManager.getFilters() || [];
+  };
+
+  _syncAppAndGlobalState = () => {
+    const { query, time, initialized } = this.state;
+    const { refreshConfig } = this.props;
+    const { filterManager } = getData().query;
+
+    // appState
+    this._appStateManager.setQueryAndFilters({
+      query: query,
+      filters: filterManager.getAppFilters(),
+    });
+
+    // globalState
+    const refreshInterval = {
+      pause: refreshConfig.isPaused,
+      value: refreshConfig.interval,
+    };
+    updateGlobalState(
+      {
+        time: time,
+        refreshInterval,
+        filters: filterManager.getGlobalFilters(),
+      },
+      !initialized
+    );
+    this.setState({ refreshInterval });
+  };
+
+  _onQueryChange = async ({ filters, query, time, refresh }) => {
+    const { filterManager } = getData().query;
+    const { dispatchSetQuery } = this.props;
+    const newState = {};
+    let newFilters;
+    if (filters) {
+      filterManager.setFilters(filters); // Maps and merges filters
+      newFilters = filterManager.getFilters();
+    }
+    if (query) {
+      newState.query = query;
+    }
+    if (time) {
+      newState.time = time;
+    }
+    this.setState(newState, () => {
+      this._syncAppAndGlobalState();
+      dispatchSetQuery(
+        refresh,
+        newFilters || this.props.filters,
+        query || this.state.query,
+        time || this.state.time
+      );
+    });
+  };
+
+  _initQueryTimeRefresh() {
+    const { setRefreshConfig, savedMap } = this.props;
+    // TODO: Handle null when converting to TS
+    const globalState = getGlobalState();
+    const mapStateJSON = savedMap ? savedMap.mapStateJSON : undefined;
+    const newState = {
+      query: getInitialQuery({
+        mapStateJSON,
+        appState: this._appStateManager.getAppState(),
+        userQueryLanguage: getUiSettings().get('search:queryLanguage'),
+      }),
+      time: getInitialTimeFilters({
+        mapStateJSON,
+        globalState,
+      }),
+      refreshConfig: getInitialRefreshConfig({
+        mapStateJSON,
+        globalState,
+      }),
+    };
+    this.setState({ query: newState.query, time: newState.time });
+    updateGlobalState(
+      {
+        time: newState.time,
+        refreshInterval: {
+          value: newState.refreshConfig.interval,
+          pause: newState.refreshConfig.isPaused,
+        },
+      },
+      !this.state.initialized
+    );
+    setRefreshConfig(newState.refreshConfig);
+  }
+
+  _initMapAndLayerSettings() {
+    const { savedMap } = this.props;
+    // Get saved map & layer settings
+    this._initQueryTimeRefresh();
+
+    const layerList = getInitialLayers(
+      savedMap.layerListJSON,
+      this._getInitialLayersFromUrlParam()
+    );
+    this.props.replaceLayerList(layerList);
+    this.setState(
+      {
+        initialLayerListConfig: copyPersistentState(layerList),
+        savedMap,
+      },
+      this._initBreadcrumbUpdater
+    );
+  }
+
+  _updateFiltersAndDispatch = (filters) => {
+    this._onQueryChange({
+      filters,
+    });
+  };
+
+  _onRefreshChange = ({ isPaused, refreshInterval }) => {
+    const { refreshConfig } = this.props;
+    const newRefreshConfig = {
+      isPaused,
+      interval: isNaN(refreshInterval) ? refreshConfig.interval : refreshInterval,
+    };
+    this.setState({ refreshConfig: newRefreshConfig }, this._syncAppAndGlobalState);
+    this.props.setRefreshConfig(newRefreshConfig);
+  };
+
+  _updateStateFromSavedQuery(savedQuery) {
+    if (!savedQuery) {
+      this.setState({ savedQuery: '' });
+      return;
+    }
+    const { filterManager } = getData().query;
+    const savedQueryFilters = savedQuery.attributes.filters || [];
+    const globalFilters = filterManager.getGlobalFilters();
+    const allFilters = [...savedQueryFilters, ...globalFilters];
+
+    if (savedQuery.attributes.timefilter) {
+      if (savedQuery.attributes.timefilter.refreshInterval) {
+        this._onRefreshChange({
+          isPaused: savedQuery.attributes.timefilter.refreshInterval.pause,
+          refreshInterval: savedQuery.attributes.timefilter.refreshInterval.value,
+        });
+      }
+      this._onQueryChange({
+        filters: allFilters,
+        query: savedQuery.attributes.query,
+        time: savedQuery.attributes.timefilter,
+      });
+    } else {
+      this._onQueryChange({
+        filters: allFilters,
+        query: savedQuery.attributes.query,
+      });
+    }
+  }
+
+  _syncStoreAndGetFilters() {
+    const {
+      savedMap,
+      setGotoWithCenter,
+      setMapSettings,
+      setIsLayerTOCOpen,
+      setOpenTOCDetails,
+    } = this.props;
+    let savedObjectFilters = [];
+    if (savedMap.mapStateJSON) {
+      const mapState = JSON.parse(savedMap.mapStateJSON);
+      setGotoWithCenter({
+        lat: mapState.center.lat,
+        lon: mapState.center.lon,
+        zoom: mapState.zoom,
+      });
+      if (mapState.filters) {
+        savedObjectFilters = mapState.filters;
+      }
+      if (mapState.settings) {
+        setMapSettings(mapState.settings);
+      }
+    }
+
+    if (savedMap.uiStateJSON) {
+      const uiState = JSON.parse(savedMap.uiStateJSON);
+      setIsLayerTOCOpen(_.get(uiState, 'isLayerTOCOpen', DEFAULT_IS_LAYER_TOC_OPEN));
+      setOpenTOCDetails(_.get(uiState, 'openTOCDetails', []));
+    }
+    return savedObjectFilters;
+  }
+
+  async _initMap() {
+    const { clearUi, savedMap } = this.props;
+    // TODO: Handle null when converting to TS
+    const globalState = getGlobalState();
+    this._initMapAndLayerSettings();
+    clearUi();
+
+    const savedObjectFilters = this._syncStoreAndGetFilters(savedMap);
+    await this._onQueryChange({
+      filters: [
+        ..._.get(globalState, 'filters', []),
+        ...this._getAppStateFilters(),
+        ...savedObjectFilters,
+      ],
+    });
+    this.setState({ initialized: true });
+  }
+
+  _renderTopNav() {
+    const {
+      query,
+      time,
+      savedQuery,
+      initialLayerListConfig,
+      isVisible,
+      indexPatterns,
+      currentPath,
+    } = this.state;
+    const { savedMap, refreshConfig } = this.props;
+
+    return isVisible ? (
+      <MapsTopNavMenu
+        savedMap={savedMap}
+        query={query}
+        savedQuery={savedQuery}
+        onQueryChange={this._onQueryChange}
+        time={time}
+        refreshConfig={refreshConfig}
+        setRefreshConfig={(newConfig, callback) => {
+          this.setState(
+            {
+              refreshConfig: newConfig,
+            },
+            callback
+          );
+        }}
+        initialLayerListConfig={initialLayerListConfig}
+        indexPatterns={indexPatterns}
+        updateFiltersAndDispatch={this._updateFiltersAndDispatch}
+        onQuerySaved={(query) => {
+          this.setState({ savedQuery: query });
+          this._appStateManager.setQueryAndFilters({ savedQuery: query });
+          this._updateStateFromSavedQuery(query);
+        }}
+        onSavedQueryUpdated={(query) => {
+          this.setState({ savedQuery: { ...query } });
+          this._appStateManager.setQueryAndFilters({ savedQuery: query });
+          this._updateStateFromSavedQuery(query);
+        }}
+        syncAppAndGlobalState={this._syncAppAndGlobalState}
+        currentPath={currentPath}
+      />
+    ) : null;
+  }
+
+  render() {
+    const { filters, isFullScreen } = this.props;
+
+    return this.state.initialized ? (
+      <div id="maps-plugin" className={isFullScreen ? 'mapFullScreen' : ''}>
+        {this._renderTopNav()}
+        <h1 className="euiScreenReaderOnly">{`screenTitle placeholder`}</h1>
+        <div id="react-maps-root">
+          <GisMap
+            addFilters={(newFilters) => {
+              newFilters.forEach((filter) => {
+                filter.$state = { store: esFilters.FilterStateStore.APP_STATE };
+              });
+              this._updateFiltersAndDispatch([...filters, ...newFilters]);
+            }}
+          />
+        </div>
+      </div>
+    ) : null;
+  }
+}
diff --git a/x-pack/plugins/maps/public/routing/state_syncing/app_state_manager.js b/x-pack/plugins/maps/public/routing/state_syncing/app_state_manager.js
new file mode 100644
index 0000000000000..19118c6130805
--- /dev/null
+++ b/x-pack/plugins/maps/public/routing/state_syncing/app_state_manager.js
@@ -0,0 +1,44 @@
+/*
+ * 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 { Subject } from 'rxjs';
+
+export class AppStateManager {
+  _query = '';
+  _savedQuery = '';
+  _filters = [];
+
+  _updated$ = new Subject();
+
+  setQueryAndFilters({ query, savedQuery, filters }) {
+    if (this._query !== query) {
+      this._query = query;
+    }
+    if (this._savedQuery !== savedQuery) {
+      this._savedQuery = savedQuery;
+    }
+    if (this._filters !== filters) {
+      this._filters = filters;
+    }
+    this._updated$.next();
+  }
+
+  getQuery() {
+    return this._query;
+  }
+
+  getFilters() {
+    return this._filters;
+  }
+
+  getAppState() {
+    return {
+      query: this._query,
+      savedQuery: this._savedQuery,
+      filters: this._filters,
+    };
+  }
+}
diff --git a/x-pack/plugins/maps/public/routing/state_syncing/app_sync.js b/x-pack/plugins/maps/public/routing/state_syncing/app_sync.js
new file mode 100644
index 0000000000000..36b20174f2436
--- /dev/null
+++ b/x-pack/plugins/maps/public/routing/state_syncing/app_sync.js
@@ -0,0 +1,61 @@
+/*
+ * 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 { connectToQueryState, esFilters } from '../../../../../../src/plugins/data/public';
+import { syncState } from '../../../../../../src/plugins/kibana_utils/public';
+import { map } from 'rxjs/operators';
+import { getData } from '../../kibana_services';
+import { kbnUrlStateStorage } from '../maps_router';
+
+export function useAppStateSyncing(appStateManager) {
+  // get appStateContainer
+  // sync app filters with app state container from data.query to state container
+  const { query } = getData();
+
+  const stateContainer = {
+    get: () => ({
+      query: appStateManager.getQuery(),
+      filters: appStateManager.getFilters(),
+    }),
+    set: (state) =>
+      state && appStateManager.setQueryAndFilters({ query: state.query, filters: state.filters }),
+    state$: appStateManager._updated$.pipe(
+      map(() => ({
+        query: appStateManager.getQuery(),
+        filters: appStateManager.getFilters(),
+      }))
+    ),
+  };
+  const stopSyncingQueryAppStateWithStateContainer = connectToQueryState(query, stateContainer, {
+    filters: esFilters.FilterStateStore.APP_STATE,
+  });
+
+  // sets up syncing app state container with url
+  const { start: startSyncingAppStateWithUrl, stop: stopSyncingAppStateWithUrl } = syncState({
+    storageKey: '_a',
+    stateStorage: kbnUrlStateStorage,
+    stateContainer,
+  });
+
+  // merge initial state from app state container and current state in url
+  const initialAppState = {
+    ...stateContainer.get(),
+    ...kbnUrlStateStorage.get('_a'),
+  };
+  // trigger state update. actually needed in case some data was in url
+  stateContainer.set(initialAppState);
+
+  // set current url to whatever is in app state container
+  kbnUrlStateStorage.set('_a', initialAppState);
+
+  // finally start syncing state containers with url
+  startSyncingAppStateWithUrl();
+
+  return () => {
+    stopSyncingQueryAppStateWithStateContainer();
+    stopSyncingAppStateWithUrl();
+  };
+}
diff --git a/x-pack/plugins/maps/public/routing/state_syncing/global_sync.ts b/x-pack/plugins/maps/public/routing/state_syncing/global_sync.ts
new file mode 100644
index 0000000000000..b466f254e4d08
--- /dev/null
+++ b/x-pack/plugins/maps/public/routing/state_syncing/global_sync.ts
@@ -0,0 +1,32 @@
+/*
+ * 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 { syncQueryStateWithUrl } from '../../../../../../src/plugins/data/public';
+import { getData } from '../../kibana_services';
+// @ts-ignore
+import { kbnUrlStateStorage } from '../maps_router';
+
+export function useGlobalStateSyncing() {
+  const { stop } = syncQueryStateWithUrl(getData().query, kbnUrlStateStorage);
+  return stop;
+}
+
+export function getGlobalState() {
+  return kbnUrlStateStorage.get('_g');
+}
+
+export function updateGlobalState(newState: unknown, flushUrlState = false) {
+  const globalState = getGlobalState();
+  kbnUrlStateStorage.set('_g', {
+    // @ts-ignore
+    ...globalState,
+    // @ts-ignore
+    ...newState,
+  });
+  if (flushUrlState) {
+    kbnUrlStateStorage.flush({ replace: true });
+  }
+}
diff --git a/x-pack/plugins/maps/public/routing/store_operations.js b/x-pack/plugins/maps/public/routing/store_operations.js
new file mode 100644
index 0000000000000..53ebbb3328ff9
--- /dev/null
+++ b/x-pack/plugins/maps/public/routing/store_operations.js
@@ -0,0 +1,11 @@
+/*
+ * 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 { createMapStore } from '../reducers/store';
+
+const store = createMapStore();
+
+export const getStore = () => store;
diff --git a/x-pack/plugins/maps/server/tutorials/ems/index.ts b/x-pack/plugins/maps/server/tutorials/ems/index.ts
index 15dc403d942a3..e96af89e52685 100644
--- a/x-pack/plugins/maps/server/tutorials/ems/index.ts
+++ b/x-pack/plugins/maps/server/tutorials/ems/index.ts
@@ -6,6 +6,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { TutorialsCategory } from '../../../../../../src/plugins/home/server';
+import { MAP_BASE_URL } from '../../../common/constants';
 
 export function emsBoundariesSpecProvider({
   emsLandingPageUrl,
@@ -63,7 +64,7 @@ Indexing EMS administrative boundaries in Elasticsearch allows for search on bou
 2. Click `Add layer`, then select `Upload GeoJSON`.\n\
 3. Upload the GeoJSON file and click `Import file`.',
                     values: {
-                      newMapUrl: prependBasePath('/app/maps#/map'),
+                      newMapUrl: prependBasePath(MAP_BASE_URL),
                     },
                   }),
                 },
diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.tsx b/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.tsx
index 39b253439aff0..6470fc270d0bf 100644
--- a/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map.tsx
@@ -22,7 +22,8 @@ import { IndexPatternsMissingPrompt } from './index_patterns_missing_prompt';
 import { MapToolTip } from './map_tool_tip/map_tool_tip';
 import * as i18n from './translations';
 import { SetQuery } from './types';
-import { MapEmbeddable } from '../../../../../../legacy/plugins/maps/public';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { MapEmbeddable } from '../../../../../../plugins/maps/public/embeddable';
 import { Query, Filter } from '../../../../../../../src/plugins/data/public';
 import { useKibana, useUiSetting$ } from '../../../common/lib/kibana';
 
diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map_helpers.tsx b/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map_helpers.tsx
index 558133104ac1e..e50dcd7a8c8d8 100644
--- a/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map_helpers.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/embeddables/embedded_map_helpers.tsx
@@ -13,9 +13,13 @@ import { getLayerList } from './map_config';
 import { MAP_SAVED_OBJECT_TYPE } from '../../../../../maps/public';
 import {
   MapEmbeddable,
-  RenderTooltipContentParams,
   MapEmbeddableInput,
-} from '../../../../../../legacy/plugins/maps/public';
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../../../../../plugins/maps/public/embeddable';
+import {
+  RenderTooltipContentParams,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../../../../../plugins/maps/public/classes/tooltips/tooltip_property';
 import * as i18n from './translations';
 import { Query, Filter } from '../../../../../../../src/plugins/data/public';
 import {
diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/line_tool_tip_content.test.tsx b/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/line_tool_tip_content.test.tsx
index aef41ddaef5ae..648e52e3aba34 100644
--- a/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/line_tool_tip_content.test.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/line_tool_tip_content.test.tsx
@@ -13,8 +13,10 @@ import {
   SUM_OF_SERVER_BYTES,
   SUM_OF_SOURCE_BYTES,
 } from '../map_config';
-import { ITooltipProperty } from '../../../../../../maps/public';
-import { TooltipProperty } from '../../../../../../maps/public/classes/tooltips/tooltip_property';
+import {
+  ITooltipProperty,
+  TooltipProperty,
+} from '../../../../../../maps/public/classes/tooltips/tooltip_property';
 
 describe('LineToolTipContent', () => {
   const mockFeatureProps: ITooltipProperty[] = [
diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/line_tool_tip_content.tsx b/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/line_tool_tip_content.tsx
index 9238f7ec65a20..62d0e76287f2d 100644
--- a/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/line_tool_tip_content.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/line_tool_tip_content.tsx
@@ -16,7 +16,8 @@ import {
 } from '../map_config';
 
 import * as i18n from '../translations';
-import { ITooltipProperty } from '../../../../../../maps/public';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { ITooltipProperty } from '../../../../../../maps/public/classes/tooltips/tooltip_property';
 
 const FlowBadge = (styled(EuiBadge)`
   height: 45px;
diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/map_tool_tip.tsx b/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/map_tool_tip.tsx
index d2b8322c8121e..d3ca23f74dfdf 100644
--- a/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/map_tool_tip.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/map_tool_tip.tsx
@@ -17,7 +17,8 @@ import { LineToolTipContent } from './line_tool_tip_content';
 import { PointToolTipContent } from './point_tool_tip_content';
 import { Loader } from '../../../../common/components/loader';
 import * as i18n from '../translations';
-import { ITooltipProperty } from '../../../../../../maps/public';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { ITooltipProperty } from '../../../../../../maps/public/classes/tooltips/tooltip_property';
 
 export const MapToolTipComponent = ({
   closeTooltip,
diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx b/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx
index 36b9f44e19630..e7c9dcfdc9a53 100644
--- a/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx
@@ -11,8 +11,10 @@ import { TestProviders } from '../../../../common/mock';
 import { getEmptyStringTag } from '../../../../common/components/empty_value';
 import { HostDetailsLink, IPDetailsLink } from '../../../../common/components/links';
 import { FlowTarget } from '../../../../graphql/types';
-import { ITooltipProperty } from '../../../../../../maps/public';
-import { TooltipProperty } from '../../../../../../maps/public/classes/tooltips/tooltip_property';
+import {
+  TooltipProperty,
+  ITooltipProperty,
+} from '../../../../../../maps/public/classes/tooltips/tooltip_property';
 
 describe('PointToolTipContent', () => {
   const mockFeatureProps: ITooltipProperty[] = [
diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.tsx b/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.tsx
index 3196e7d7a6c3a..f38f3e054a645 100644
--- a/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.tsx
@@ -14,7 +14,8 @@ import { DescriptionListStyled } from '../../../../common/components/page';
 import { HostDetailsLink, IPDetailsLink } from '../../../../common/components/links';
 import { DefaultFieldRenderer } from '../../../../timelines/components/field_renderers/field_renderers';
 import { FlowTarget } from '../../../../graphql/types';
-import { ITooltipProperty } from '../../../../../../maps/public';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { ITooltipProperty } from '../../../../../../maps/public/classes/tooltips/tooltip_property';
 
 interface PointToolTipContentProps {
   contextId: string;
diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/types.ts b/x-pack/plugins/security_solution/public/network/components/embeddables/types.ts
index 9a49046634c3b..f91fd677ba7fe 100644
--- a/x-pack/plugins/security_solution/public/network/components/embeddables/types.ts
+++ b/x-pack/plugins/security_solution/public/network/components/embeddables/types.ts
@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { RenderTooltipContentParams } from '../../../../../../legacy/plugins/maps/public';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { RenderTooltipContentParams } from '../../../../../maps/public/classes/tooltips/tooltip_property';
 import { inputsModel } from '../../../common/store/inputs';
 
 export interface IndexPatternMapping {
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 8d604c59daac9..fb8a4c3464d11 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -8971,10 +8971,7 @@
     "xpack.maps.addLayerPanel.footer.cancelButtonLabel": "キャンセル",
     "xpack.maps.addLayerPanel.importFile": "ファイルのインポート",
     "xpack.maps.aggs.defaultCountLabel": "カウント",
-    "xpack.maps.appDescription": "マップアプリケーション",
     "xpack.maps.appTitle": "マップ",
-    "xpack.maps.badge.readOnly.text": "読み込み専用",
-    "xpack.maps.badge.readOnly.tooltip": "マップを保存できませんで",
     "xpack.maps.blendedVectorLayer.clusteredLayerName": "クラスター化 {displayName}",
     "xpack.maps.common.esSpatialRelation.containsLabel": "contains",
     "xpack.maps.common.esSpatialRelation.disjointLabel": "disjoint",
@@ -9105,7 +9102,6 @@
     "xpack.maps.mapController.saveMapDescription": "マップを保存",
     "xpack.maps.mapController.saveMapDisabledButtonTooltip": "保存する前に、レイヤーの変更を保存するか、キャンセルしてください",
     "xpack.maps.mapController.saveSuccessMessage": "「{title}」が保存されました",
-    "xpack.maps.mapController.unsavedChangesWarning": "保存されていない変更は保存されない可能性があります",
     "xpack.maps.mapEmbeddableFactory.invalidLayerList": "不正な形式のレイヤーリストによりマップを読み込めません",
     "xpack.maps.mapEmbeddableFactory.invalidSavedObject": "不正な形式の保存済みオブジェクトによりマップを読み込めません",
     "xpack.maps.mapListing.advancedSettingsLinkText": "高度な設定",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 5dbe9e5ccc07e..3fe58b62c00c3 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -8975,10 +8975,7 @@
     "xpack.maps.addLayerPanel.footer.cancelButtonLabel": "鍙栨秷",
     "xpack.maps.addLayerPanel.importFile": "导入文件",
     "xpack.maps.aggs.defaultCountLabel": "计数",
-    "xpack.maps.appDescription": "地图应用程序",
     "xpack.maps.appTitle": "Maps",
-    "xpack.maps.badge.readOnly.text": "只读",
-    "xpack.maps.badge.readOnly.tooltip": "无法保存地图",
     "xpack.maps.blendedVectorLayer.clusteredLayerName": "集群 {displayName}",
     "xpack.maps.common.esSpatialRelation.containsLabel": "contains",
     "xpack.maps.common.esSpatialRelation.disjointLabel": "disjoint",
@@ -9109,7 +9106,6 @@
     "xpack.maps.mapController.saveMapDescription": "保存地图",
     "xpack.maps.mapController.saveMapDisabledButtonTooltip": "保存或在保存之前取消您的图层更改",
     "xpack.maps.mapController.saveSuccessMessage": "已保存“{title}”",
-    "xpack.maps.mapController.unsavedChangesWarning": "可能不会保存您未保存的更改",
     "xpack.maps.mapEmbeddableFactory.invalidLayerList": "无法加载地图，图层列表格式不正确",
     "xpack.maps.mapEmbeddableFactory.invalidSavedObject": "无法加载地图，已保存对象格式错误",
     "xpack.maps.mapListing.advancedSettingsLinkText": "高级设置",
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/embedded_map.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/embedded_map.tsx
index 648418c02489a..85ac016333363 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/embedded_map.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/embedded_map.tsx
@@ -11,7 +11,8 @@ import { createPortalNode, InPortal, OutPortal } from 'react-reverse-portal';
 import {
   MapEmbeddable,
   MapEmbeddableInput,
-} from '../../../../../../../../legacy/plugins/maps/public';
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../../../../../../maps/public/embeddable';
 import * as i18n from './translations';
 import { GeoPoint } from '../../../../../../common/runtime_types';
 import { getLayerList } from './map_config';
@@ -23,7 +24,8 @@ import {
 } from '../../../../../../../../../src/plugins/embeddable/public';
 import { MAP_SAVED_OBJECT_TYPE } from '../../../../../../../maps/public';
 import { MapToolTipComponent } from './map_tool_tip';
-import { RenderTooltipContentParams } from '../../../../../../../../legacy/plugins/maps/public';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { RenderTooltipContentParams } from '../../../../../../../maps/public/classes/tooltips/tooltip_property';
 
 export interface EmbeddedMapProps {
   upPoints: LocationPoint[];
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/map_tool_tip.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/map_tool_tip.tsx
index 0d54d91007a8d..bf403846dcec4 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/map_tool_tip.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/map_tool_tip.tsx
@@ -21,7 +21,8 @@ import { AppState } from '../../../../../state';
 import { monitorLocationsSelector } from '../../../../../state/selectors';
 import { useMonitorId } from '../../../../../hooks';
 import { MonitorLocation } from '../../../../../../common/runtime_types/monitor';
-import { RenderTooltipContentParams } from '../../../../../../../../legacy/plugins/maps/public';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { RenderTooltipContentParams } from '../../../../../../../maps/public/classes/tooltips/tooltip_property';
 import { formatAvailabilityValue } from '../../availability_reporting/availability_reporting';
 import { LastCheckLabel } from '../../translations';
 
diff --git a/x-pack/test/functional/apps/maps/saved_object_management.js b/x-pack/test/functional/apps/maps/saved_object_management.js
index 62b9286d494ba..810df8e995064 100644
--- a/x-pack/test/functional/apps/maps/saved_object_management.js
+++ b/x-pack/test/functional/apps/maps/saved_object_management.js
@@ -77,9 +77,9 @@ export default function ({ getPageObjects, getService }) {
 
         it('should override query stored with map when query is provided in app state', async () => {
           const currentUrl = await browser.getCurrentUrl();
-          const kibanaBaseUrl = currentUrl.substring(0, currentUrl.indexOf('#'));
+          const kibanaBaseUrl = currentUrl.substring(0, currentUrl.indexOf('/maps/'));
           const appState = `_a=(query:(language:kuery,query:'machine.os.raw%20:%20"win%208"'))`;
-          const urlWithQueryInAppState = `${kibanaBaseUrl}#/map/8eabdab0-144f-11e9-809f-ad25bb78262c?${appState}`;
+          const urlWithQueryInAppState = `${kibanaBaseUrl}/maps/map/8eabdab0-144f-11e9-809f-ad25bb78262c#?${appState}`;
 
           await browser.get(urlWithQueryInAppState, true);
           await PageObjects.maps.waitForLayersToLoad();
diff --git a/x-pack/test/functional/page_objects/gis_page.js b/x-pack/test/functional/page_objects/gis_page.js
index c3862379be904..93b9d9b4b3f7b 100644
--- a/x-pack/test/functional/page_objects/gis_page.js
+++ b/x-pack/test/functional/page_objects/gis_page.js
@@ -5,6 +5,7 @@
  */
 
 import _ from 'lodash';
+import { APP_ID } from '../../../plugins/maps/common/constants';
 
 export function GisPageProvider({ getService, getPageObjects }) {
   const PageObjects = getPageObjects(['common', 'header', 'timePicker']);
@@ -159,7 +160,7 @@ export function GisPageProvider({ getService, getPageObjects }) {
 
     async onMapListingPage() {
       log.debug(`onMapListingPage`);
-      const exists = await testSubjects.exists('mapsListingPage');
+      const exists = await testSubjects.exists('mapsListingPage', { timeout: 3500 });
       return exists;
     }
 
@@ -197,7 +198,7 @@ export function GisPageProvider({ getService, getPageObjects }) {
       const onPage = await this.onMapListingPage();
       if (!onPage) {
         await retry.try(async () => {
-          await PageObjects.common.navigateToUrl('maps', '/', { basePath: this.basePath });
+          await PageObjects.common.navigateToUrlWithBrowserHistory(APP_ID, '/');
           const onMapListingPage = await this.onMapListingPage();
           if (!onMapListingPage) throw new Error('Not on map listing page.');
         });
@@ -209,8 +210,8 @@ export function GisPageProvider({ getService, getPageObjects }) {
 
       log.debug(`getMapCountWithName: ${name}`);
       await this.searchForMapWithName(name);
-      const links = await find.allByLinkText(name);
-      return links.length;
+      const buttons = await find.allByButtonText(name);
+      return buttons.length;
     }
 
     async isSetViewPopoverOpen() {

From 82ce718b013b88537b7f3a62d5bad105f28503c6 Mon Sep 17 00:00:00 2001
From: Alison Goryachev <alison.goryachev@elastic.co>
Date: Thu, 18 Jun 2020 15:15:15 -0400
Subject: [PATCH 44/63] [CCR] Fix follower indices table not updating after
 pausing (#69228)

---
 .../components/follower_indices_table/follower_indices_table.js | 2 +-
 .../public/app/store/actions/follower_index.js                  | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/components/follower_indices_table/follower_indices_table.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/components/follower_indices_table/follower_indices_table.js
index 183609355fdfd..0c57b3f7330cf 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/components/follower_indices_table/follower_indices_table.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/components/follower_indices_table/follower_indices_table.js
@@ -66,7 +66,7 @@ export class FollowerIndicesTable extends PureComponent {
     if (prevFollowerIndices !== followerIndices) {
       return {
         prevFollowerIndices: followerIndices,
-        filteredClusters: getFilteredIndices(followerIndices, queryText),
+        filteredIndices: getFilteredIndices(followerIndices, queryText),
       };
     }
 
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/store/actions/follower_index.js b/x-pack/plugins/cross_cluster_replication/public/app/store/actions/follower_index.js
index 1af5a95a29b98..d7f03931474ee 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/store/actions/follower_index.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/store/actions/follower_index.js
@@ -149,7 +149,6 @@ export const resumeFollowerIndex = (id) =>
     scope,
     handler: async () => resumeFollowerIndexRequest(id),
     onSuccess(response, dispatch) {
-      console.log('response', response);
       /**
        * We can have 1 or more follower index resume operation
        * that can fail or succeed. We will show 1 toast notification for each.

From b2a2aff75e6880ddc1543a7151077fdff56ff238 Mon Sep 17 00:00:00 2001
From: Aleh Zasypkin <aleh.zasypkin@gmail.com>
Date: Thu, 18 Jun 2020 21:22:48 +0200
Subject: [PATCH 45/63] Document authentication settings. (#69284)

Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co>
Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>
---
 docs/settings/security-settings.asciidoc      | 147 ++++++++++++++++++
 docs/user/security/access-agreement.asciidoc  |  27 ++++
 docs/user/security/audit-logging.asciidoc     |   2 +-
 .../security/authentication/index.asciidoc    |  19 ++-
 .../user/security/images/access-agreement.png | Bin 0 -> 62680 bytes
 docs/user/security/images/kibana-login.jpg    | Bin 22181 -> 0 bytes
 docs/user/security/images/kibana-login.png    | Bin 0 -> 33169 bytes
 docs/user/security/securing-kibana.asciidoc   |   1 +
 8 files changed, 192 insertions(+), 4 deletions(-)
 create mode 100644 docs/user/security/access-agreement.asciidoc
 create mode 100644 docs/user/security/images/access-agreement.png
 delete mode 100644 docs/user/security/images/kibana-login.jpg
 create mode 100644 docs/user/security/images/kibana-login.png

diff --git a/docs/settings/security-settings.asciidoc b/docs/settings/security-settings.asciidoc
index 2957c9c27b624..dc7f585f3e4c3 100644
--- a/docs/settings/security-settings.asciidoc
+++ b/docs/settings/security-settings.asciidoc
@@ -30,6 +30,150 @@ You do not need to configure any additional settings to use the
 
 |===
 
+[float]
+[[authentication-security-settings]]
+==== Authentication security settings
+
+You configure authentication settings in the `xpack.security.authc` namespace in `kibana.yml`.
+
+For example:
+
+[source,yaml]
+----------------------------------------
+xpack.security.authc:
+    providers:
+      basic.basic1: <1>
+          order: 0 <2>
+          ...
+
+      saml.saml1: <3>
+          order: 1
+          ...
+  
+      saml.saml2: <4>
+          order: 2
+          ...
+  
+      pki.realm3:
+          order: 3
+          ...
+    ...
+----------------------------------------
+<1> Specifies the type of authentication provider (for example, `basic`, `token`, `saml`, `oidc`, `kerberos`, `pki`) and the provider name. This setting is mandatory.
+<2> Specifies the order of the provider in the authentication chain and on the Login Selector UI. This setting is mandatory.
+<3> Specifies the settings for the SAML authentication provider with a `saml1` name.
+<4> Specifies the settings for the SAML authentication provider with a `saml2` name.
+
+The valid settings in the `xpack.security.authc.providers` namespace vary depending on the authentication provider type. For more information, refer to <<kibana-authentication>>.
+
+[float]
+[[authentication-provider-settings]]
+===== Valid settings for all authentication providers
+
+[cols="2*<"]
+|===
+| `xpack.security.authc.providers.`
+`<provider-type>.<provider-name>.enabled`
+| Determines if the authentication provider should be enabled. By default, {kib} enables the provider as soon as you configure any of its properties.
+
+| `xpack.security.authc.providers.`
+`<provider-type>.<provider-name>.order`
+| Order of the provider in the authentication chain and on the Login Selector UI.
+
+| `xpack.security.authc.providers.`
+`<provider-type>.<provider-name>.description`
+| Custom description of the provider entry displayed on the Login Selector UI.
+
+| `xpack.security.authc.providers.`
+`<provider-type>.<provider-name>.hint`
+| Custom hint for the provider entry displayed on the Login Selector UI.
+
+| `xpack.security.authc.providers.`
+`<provider-type>.<provider-name>.icon`
+| Custom icon for the provider entry displayed on the Login Selector UI.
+
+| `xpack.security.authc.providers.`
+`<provider-type>.<provider-name>.showInSelector`
+| Flag that indicates if the provider should have an entry on the Login Selector UI. Setting this to `false` doesn't remove the provider from the authentication chain.
+
+|===
+
+[NOTE]
+============
+You are unable to set this setting to `false` for `basic` and `token` authentication providers.
+============
+
+[cols="2*<"]
+|===
+
+| `xpack.security.authc.providers.`
+`<provider-type>.<provider-name>.accessAgreement.message`
+| Access agreement text in Markdown format. For more information, refer to <<xpack-security-access-agreement>>.
+
+|===
+
+[float]
+[[saml-authentication-provider-settings]]
+===== SAML authentication provider settings
+
+In addition to <<authentication-provider-settings,the settings that are valid for all providers>>, you can specify the following settings:
+
+[cols="2*<"]
+|===
+| `xpack.security.authc.providers.`
+`saml.<provider-name>.realm`
+| SAML realm in {es} that provider should use.
+
+| `xpack.security.authc.providers.`
+`saml.<provider-name>.maxRedirectURLSize`
+| The maximum size of the URL that {kib} is allowed to store during the authentication SAML handshake. For more information, refer to <<security-saml-and-long-urls>>.
+
+|===
+
+[float]
+[[oidc-authentication-provider-settings]]
+===== OpenID Connect authentication provider settings
+
+In addition to <<authentication-provider-settings,the settings that are valid for all providers>>, you can specify the following settings:
+
+[cols="2*<"]
+|===
+| `xpack.security.authc.providers.`
+`oidc.<provider-name>.realm`
+| OpenID Connect realm in {es} that the provider should use.
+
+|===
+
+[float]
+[[http-authentication-settings]]
+===== HTTP authentication settings
+
+There is a very limited set of cases when you'd want to change these settings. For more information, refer to <<http-authentication>>.
+
+[cols="2*<"]
+|===
+| `xpack.security.authc.http.enabled`
+| Determines if HTTP authentication should be enabled. By default, this setting is set to `true`.
+
+| `xpack.security.authc.http.autoSchemesEnabled`
+| Determines if HTTP authentication schemes used by the enabled authentication providers should be automatically supported during HTTP authentication. By default, this setting is set to `true`.
+
+| `xpack.security.authc.http.schemes`
+| List of HTTP authentication schemes that {kib} HTTP authentication should support. By default, this setting is set to `['apikey']` to support HTTP authentication with <<api-keys, `ApiKey`>> scheme.
+
+|===
+
+[float]
+[[login-selector-settings]]
+===== Login Selector UI settings
+
+[cols="2*<"]
+|===
+| `xpack.security.authc.selector.enabled`
+| Determines if the Login Selector UI should be enabled. By default, this setting is set to `true` if more than one authentication provider is configured.
+
+|===
+
 [float]
 [[security-ui-settings]]
 ==== User interface security settings
@@ -96,4 +240,7 @@ string of `<count>[ms|s|m|h|d|w|M|Y]` (e.g. '70ms', '5s', '3d', '1Y').
 | `xpack.security.loginAssistanceMessage`
   | Adds a message to the login screen. Useful for displaying information about maintenance windows, links to corporate sign up pages etc.
 
+| `xpack.security.loginHelp`
+  | Adds a message accessible at the Login Selector UI with additional help information for the login process.
+
 |===
diff --git a/docs/user/security/access-agreement.asciidoc b/docs/user/security/access-agreement.asciidoc
new file mode 100644
index 0000000000000..362eb80501210
--- /dev/null
+++ b/docs/user/security/access-agreement.asciidoc
@@ -0,0 +1,27 @@
+[role="xpack"]
+[[xpack-security-access-agreement]]
+=== Access agreement
+
+Some work environments require you to acknowledge and accept an agreement before you can access {kib}, which can contain sensitive information. The agreement text supports Markdown format and can be specified using the `xpack.security.authc.providers.<provider-type>.<provider-name>.accessAgreement.message` setting.
+
+[NOTE]
+============================================================================
+You need to acknowledge the access agreement only once per session, and {kib} reports the acknowledgement in the audit logs.
+============================================================================
+
+Here is how your `kibana.yml` can look like if you define an access agreement:
+
+[source,yaml]
+--------------------------------------------------------------------------------
+xpack.security.authc.providers:
+  basic.basic1:
+    order: 0
+    accessAgreement:
+      message: "**You are accessing a system with a sensitive information** \n\n
+                  By logging in, you acknowledge that (shortened ...)"
+--------------------------------------------------------------------------------
+
+When you authenticate using `basic.basic1`, you'll see the following agreement that you must acknowledge before you can access {kib}:
+
+[role="screenshot"]
+image::user/security/images/access-agreement.png["Access Agreement UI"]
diff --git a/docs/user/security/audit-logging.asciidoc b/docs/user/security/audit-logging.asciidoc
index f72ae0dcf9c93..a7359af38c1cb 100644
--- a/docs/user/security/audit-logging.asciidoc
+++ b/docs/user/security/audit-logging.asciidoc
@@ -1,6 +1,6 @@
 [role="xpack"]
 [[xpack-security-audit-logging]]
-===  Audit Logging
+=== Audit logs
 
 You can enable auditing to keep track of security-related events such as
 authorization success and failures. Logging these events enables you
diff --git a/docs/user/security/authentication/index.asciidoc b/docs/user/security/authentication/index.asciidoc
index 4c0e863b05d31..fe93e38151b82 100644
--- a/docs/user/security/authentication/index.asciidoc
+++ b/docs/user/security/authentication/index.asciidoc
@@ -17,22 +17,29 @@
 
 Enable multiple authentication mechanisms at the same time specifying a prioritized list of the authentication _providers_ (typically of various types) in the configuration. Providers are consulted in ascending order. Make sure each configured provider has a unique name (e.g. `basic1` or `saml1` in the configuration example) and `order` setting. In the event that two or more providers have the same name or `order`, {kib} will fail to start.
 
-When two or more providers are configured, you can choose the provider you want to use on the Login Selector UI. The order the providers appear is determined by the order setting. The appearance of the specific provider entry can be customized with the `description` setting.
+When two or more providers are configured, you can choose the provider you want to use on the Login Selector UI. The order the providers appear is determined by the `order` setting. The appearance of the specific provider entry can be customized with the `description`, `hint`, and `icon` settings.
+
+TIP: To provide login instructions to users, use the `xpack.security.loginHelp` setting, which supports Markdown format. When you specify the `xpack.security.loginHelp` setting, the Login Selector UI displays a `Need help?` link that lets users access login help information.
 
 If you don't want a specific provider to show up at the Login Selector UI (e.g. to only support third-party initiated login) you can hide it with `showInSelector` setting set to `false`. However, in this case, the provider is presented in the provider chain and may be consulted during authentication based on its `order`. To disable the provider, use the `enabled` setting.
 
 TIP: The Login Selector UI can also be disabled or enabled with `xpack.security.authc.selector.enabled` setting. 
 
-Here is how your `kibana.yml` can look like if you deal with multiple authentication providers:
+Here is how your `kibana.yml` and Login Selector UI can look like if you deal with multiple authentication providers:
 
+[source,yaml]
 --------------------------------------------------------------------------------
+xpack.security.loginHelp: "**Help** info with a [link](...)"
 xpack.security.authc.providers:
   basic.basic1:
     order: 0
+    icon: "logoElasticsearch"
+    hint: "Typically for administrators"
   saml.saml1:
     order: 1
     realm: saml1
     description: "Log in with SSO"
+    icon: "https://my-company.xyz/saml-logo.svg"
   saml.saml2:
     order: 2
     realm: saml2
@@ -42,6 +49,11 @@ xpack.security.authc.providers:
     enabled: false
 --------------------------------------------------------------------------------
 
+[role="screenshot"]
+image::user/security/images/kibana-login.png["Login Selector UI"]
+
+For more information, refer to <<authentication-security-settings, authentication security settings>>.
+
 [[basic-authentication]]
 ==== Basic authentication
 
@@ -170,6 +182,7 @@ Basic authentication is supported _only_ if the `basic` authentication provider
 To support basic authentication for the applications like `curl` or when the `Authorization: Basic base64(username:password)` HTTP header is included in the request (for example, by reverse proxy), add `Basic` scheme to the list of supported schemes for the <<http-authentication,HTTP authentication>>.
 
 [float]
+[[security-saml-and-long-urls]]
 ===== SAML and long URLs
 
 At the beginning of the SAML handshake, {kib} stores the initial URL in the session cookie, so it can redirect the user back to that URL after successful SAML authentication.
@@ -325,4 +338,4 @@ NOTE: Don't forget to explicitly specify default `apikey` scheme when you just w
 xpack.security.authc.http.schemes: [apikey, basic, something-custom]
 --------------------------------------------------------------------------------
 
-With this configuration, you can send requests to {kib} with the `Authorization` header using `ApiKey`, `Basic` or `Something-Custom` HTTP schemes (case insensitive). Under the hood, {kib} relays this header to {es}, then {es} authenticates the request using the credentials in the header.
\ No newline at end of file
+With this configuration, you can send requests to {kib} with the `Authorization` header using `ApiKey`, `Basic` or `Something-Custom` HTTP schemes (case insensitive). Under the hood, {kib} relays this header to {es}, then {es} authenticates the request using the credentials in the header.
diff --git a/docs/user/security/images/access-agreement.png b/docs/user/security/images/access-agreement.png
new file mode 100644
index 0000000000000000000000000000000000000000..ecb6122875cb85165519090a642f76b88de1f483
GIT binary patch
literal 62680
zcmZs@2Rzl?A2@y^QC1?dpOWkuSs6uS?~y&T_eC~OA%w@yCM$dI8A%A2Yh;J)xc0?0
z{^z5o=lA>nzyHtcd3ts3Ip=-e=e^(OeNLe&N-~5usBXYuFhbeqQfe^R)m0b_n-cFD
z_@z+`e+mZs3nnY|MB`QJubJaS2DdEq&Pu-bz!`S>qU%X;u4S+<iL(xl2H9sEsVk~i
zNrL)rtL_vA1h8?gF0t0%y-~UTSBhO&We;!V!*ARexH3vlI8C(X<?&<j`vpqF6T${-
zIZbnJ0~<7(O4{0L1tz=csJhmR?sEMreW7bPOL<iQ4e-f#T&%$ru1tP%7V&q!a`_YA
zYl#qx9#b;f%a+bPJh)EnooBe0tpqGA+60cim;ZLI`dt-fw^gFhH^1zK9o$?kFXjm&
zx@^Hkz}OZgqyMY#*9)b*MGC6RZV3)B*E_F^S@^PvXaVbx&`1wmA`!s(EVDDrSeKpr
zH%^VDfkbS<i@bk8(__(U5g<+epdofuxR^O|>Nx!O%9&(fbXfl%$QA&yv#{@P$gsG3
z2$QY~TJrGUD9?c1-tMk`zYK8-a0VAljrl(d;ev(k|DXL5frWI^T91Cuo#q3B-}m!r
zUp5gqV4Vtuyap_&8New4cJRfN<gzal3HpX~*e|<aa4Im*FrVw`WnXzE$!ht+1QAmI
za<39AfQSnfI#(|{SMOud8aKF14;a0>Y#UqLLtIH<oBD6-1W-S({h#fmJ;}trL6g{Z
z?{ake0t4a-4te;q%T@r<Ux+J=!oE*_BN!hdfg5L>%y!wQV|P_J^Xk7Sw3~uyw}pLG
z{~Z`4fvZuT^e=_TNdk#Jw*R~5^7nXf2^^&9A1IFjlp9*EIF~TPp?M}E3V)ifq2}cO
z-5mK3&K&@U@V~A=3Ecm87cInGvP-D!j$jR<6b$0GpgaPoy6HSZXJKFVZa&Mzrdr*9
z_M4jt0$8+&fX+V*k_I!cOqu+PtQ8O<L_m)(P)qPhP?M|%JP>qP;nKQnmp_Ku---SM
z3<#TS>`ec!v_1f!uIFvKpPK&OYab9$t6TpKmH>l4|A8!W6F~ZJCJ>=a+3Aqql3I-&
zNc0|eOY*mNol0k7F9-g+Gguoyz_Z-$zfQ2T<xls2ZyS~Yb*}F}!@oo}fdY$`Te-Fm
zS~0xO`62%B+9Cic;d@osINdJ9x)c_0$P#Y5R-F2P-U!X}OiBa@XsHwc7#aj5#jlXS
zg}+TerZ#w4dYI%F012sq)suWKeOUXjHb<{!xKnLPbW6ZmNtL*`$Hgp4Q9$4pF&MWA
zsG|F$KCSK56_~v8B6A`~xN~i6!lwD|^gDJYjy`t_p|uY5GOPEyl%z9HCIj+K*4Jqs
zkF8CCak-Q-4ksG1Y8Wh8n{wIanGo04h9n>JDuW3ntu?sTnu1o6g4Tqc(uBTJLuwrI
zS3+!DpDbvApOO^LEr-{N?U+QG#Ooe^9}RPR12_}VB?<6pe@X%icsYXaI{HE1nJhJB
zfH}5@HIYrx34h9^!Kd04S=E;BRm?B~1c?0+kO3_6Fc^$aP4ruQWC9y4OJbBolHFL{
zU*lGN=6l^16Kj>xZlltp4QmrB<7?x$VK8GMpo1Li`(603RVCN0H7&MpLe@zMY~w4@
zE_*XB4XM*`tvpS?xyD`<?Turwit#*<?(kG1qh?sZmb(4O^fY&3^jduoOEK++i)*dE
zQm=U>FRgZhz|y0Kmg_|+FZlp@0_LDec4F^gup7M#nmuqW6rF2OL2+K1mT;OXg<FG=
zo>EN8z*qK^lVnbBrTD=bWSKais+tTS!Dm1Mn83{Ej}09fT7B;E{qC;GY;%<p`eLl)
z=PBJ*5UmdHf?b$q;lbLc1+|52I5|3daZ8nEElWo^68n1GhiCoKg%NqKNGWJ=5VU1r
zX2M_r@x{CYn$-N3?<1%87fQZOmU5)^^m3;qXRl53MFX)mzKaKM$AX_=U4y};c?SBE
zhIQ|lycDvg%q#kKD|vVlkkys<TZdd(5Xs;1>V~0kAV(zt7yR~+n=l>E_3j1*u>p<>
zOh12<MU@bxJI}DiTWE|JH0Fn(59~@ne2#7^TjYbPw08=9(Iyk}yMC_y4h{NB!4`eh
zG+e{+ksld`0o}jR2NLPPv|Mlk;<Hs#A1cTM&$Dj`YEQc~=${`aL;He>1Kq?iX4Ho1
zP!@9Fsn)6$tub2&_Lc^KVU-Q3YSLoE@ul0n9grE{1C%8Xh}XYjd|cF^YkPMfDWNFN
zr0gR!bRtzPm;>q3^1OS!^v}?bND3ZUW=k_d!{P~Er%OC9Z7y;`sjf289tbxJGTNj;
zlOmGYmk?m8LJKhct9$b_hyZ34HQfHQexg#)Qr966xh6ff(_c-4I$(}~ca0bC*8soJ
zt`GD&&`!(=)?TU6!2CuX&lM=$QjUdAWDJ|R>RV|&&P4SNCv%-hcBZs8inLf3@6Gq?
zz$B_rL(5>%!q}DL)%7-?zN$>ER+!QpE|2Reoh~Se*L#ox8s?J@vN`e(M}eqkUWZoF
z>A4L{$k0{Sv(&b$v6ytoPth5-4^A@T&W2lP=QRQ^!3QiC`CAEGSfBh-VM!G<(q8ca
zM_#Sg1ki^VSzC9_@s5q<`r=D0h#@Ruq0w?J1tly<tzr05eUegLdFc#|KuOLTtHq>(
z8?dWZw*rZ_ffX``1&H@j1T$w$+DusI66g)R$+8oONOuj6qrM2PJY!;O+GDm5xDdC%
zC~G<VyvK6>HZGKNecs$v=ox9STJUCzL%g~HB^1J_L`vWuwS!oP2OCE2u(jGSK>`n6
zVvVjepICcFXvi<%Y9`iee~LbNbRoWU&x2z<>xH{+XdGjwi=_-gi1IQz83D%Kr#*xK
zrgLHwna-9pOC_&sz~jY9(fUwatyDFYZPb7FLquNRvP&2vhhuWl5;qjJWYS^L{=lA^
z$G!$*cN>)%yshO>qt8g7$AWwj*B(!a*W>vzB-PTL`Qc4gj3KAb%4vswL7EJQZjO9X
z<gH+iPF5rCzf~bMa3xuV(d%3lhUx6Slo_-rj7$$_;sAnGD_x@BtGbXJa$D#uk2lno
zZb1C6WBm>1(!T^;RP{0>o#peZ!p3QyC9>#oPyj8>1&&j!{F1fRy6E((U)2hIfcdv0
zbK`6m_s0ON(<1ahsB1LRQSG$SdoL=f+5J->XVcDH?oU^HZ@SsNo+UCcn9nXr%bAQ8
z{Q)@OkHLVv0f4dcde-cP`VFJy23@fU1Vt@Ky?(bc&4^22yE0MoF_ped$G27i@9GX3
z$OJlFcFWQ>wO$OxgSjvj;Fx@jb)hX57IG4)zK^liEmaFHvFcC}PP4ZC7G|X7yRZLq
zKgGP%TQMeXrm;*s&|$Gnen3SpBkF!Gk`m&2mnuByw!sT1;>x4}ViaiIMBDcM3arHX
zrSn@S_KCw$J=?B^uWJG<EuQ+lQoiA?6A>4s`bPt`V)QI+$+m(C<`sCr@Lj`$2Pg~s
z0(sF@ck?QWO|Wi~ONv~$t{$!Pp#+@~oAdpd$0z~3A#Sk`i^L+(VRsS&;7{N9oIUGR
zhej{ld~z$b>z>>o(DHUU;KO}}*TN}bh~(k5lG@lq9e3T}HRc5FIE5GXQ7_i|7kS59
z@;;9e$9FXVz)NO{%J@?3FEe9v%zM??O}=uc#RT08Q#Yt8hN7{59w4r?&Kq4^F<vVW
zX&Hsbaoasx44!O}`0T`5@;-$Fqs#N1vaUGsz6I`pZcN}nInA?0X}{zminYsdS0xN^
z>+|w!92mP0zqX^>Fz>JG7#8_?E4j$2bewyp4qD^QBtuhUglqO2!SIDe(v#i3hmDqh
z<<4s~{;Fs#`Jt<S|K6dKUb_0yay?~GHVdPA!n+RJJ{!maE<tpo2_Ytjm5+S84(}S(
zv)9gBVok5+CsksO-MKh-<q;?%rO()2(C4?Mr$q8QO5Hye>^dl^<Iqiw%~5zzl;reu
z$J~!m8zlyxwJ8PC0D}P)B9%s5X&+Wcox931_@k=VoSHfCrBcsF%x46(ZF~{EWeX=`
zQ{;3j-y&jisExiCUSMX#*Cz8HvD(x+-f(=Bh=dEKw<TtnT*hMotPqy$5XcyH0(d++
z;~|H(EK-%-!A6)YcFxnm7hxkj&|*LHkJz4%$}pD9(59f8OYnW!j3zYB*;IU;x0wH&
zS4PJCuY^8XWY&9AXLVU*v~`0fN)q@A7>tb)NM7h>j)>nAY!Ksk1mg9n_BxTt-bqf5
zJf<rFK%EQ&w*Yl_(K&rmdQB8Fkqo&C8mh>l6_lP4`AXP1CR*FaKfTM|MmX<zhe|K7
z>Fi{XzX*j`2YhmSjGANM+qgAm>+fNo)st^L^Ci|o`TF=6I&aByh4gy-AYc*jF>x)b
zAu?i?4NHz3n>~6yDyYqONA~1gpV69?O!I!a+Hg7WO;8X7`v}=K(+NoR<O;7fc3_bJ
z>u4byCZ(SIKJtjJc$svi)RTc-b~5_iM$UoqhNbV+ZD)M+JJ;Y{q@nF}3a7xKo9ytH
z9j8t~w4?THDN6h}4>hP6^B|7_zyOLvP-LEk2OJPA07{;=BdmcnGiE8M`P<entSE*4
z2?akN$-e(pgDQNfV(PC^R^FmiV_C`<nnf9}bfEunA0K=yov4-V%!{5gc~CgL&js`!
zWtWOS$HGFta*p!27~vj(IJ5CiB>nKLL2g)zyYTsl%5b@bPN{%eH1OUq*e=9%g{jRW
z9733t;ln^q8b#}ScjD*5>;2Z2RFKYFs882vw|{0Ern1#6hlU(<MU>gdn;wdJHf*P<
z{W6gqrY%GB)2^Iv_D&tNrqH9&p>n-TF3EV(w<GiLAREnp6WD0ClfSRQ_#7YIuxOF6
zq`)%h?VWqgNh1$d(i&TNDv&BSPT*?0ML)Lu-0#LlV?|b>NolgHp<bD#<P(&~^p2Mi
z(xfyE|CxD}kmA+O8{Ie1nS11+%!Kfz6%Ya#=YnWRY<>T72iX#dtn9aVglJVC#2$$1
z8|+EfJEUTkw$c>48`Ltq>|1iiux0?x$LEh9CKW%(X8@ui2M7;?6#^0Z0|lZ(AJ;7t
zky6yW9Ban<$!vFbjnD!!(^_E(wO*L(Gh*dPxtKA14<n?rL%$okW=Uu=vM6-zZ3hp;
zP$-{omq}~QyaMaDeHmtZ|D~0S@P{~)Iz~g;;gihV!N>F(-}-y|m-d4q$~c(^O8gc~
zS};LOOUo{MRL{_eg!$UXZRWkbQJLYC3eLd$e*{_J5s0DqV40qT*ap37_Y>5d9^^e|
zpGbJ6*+`l6PV8*5jhtpB%z=8AL$+}zsN`h2g=>UXaXhl1q>F<_k=(E|E`}xi(xu=4
zVT(rMQ1HVth1{^ytl3O}z7XO_swyfxi`(;N84t71Lh7;^v|4ng&hgxlUC-j^JVD7A
z4v9Fv(t)&{P<oPr-nAk1Oa8qZ!5_ffOWzF)Fbt*v(rPhQzjhc5-ZmkTxPz6Zi3bN(
z-C8j00YT8qTU3-8JHCwLy_>(Zjkfs_GlqAbcuY}St_PMF4YOtYBXmytYsEr(Ia2zp
z&3&Y^lHPo{E-Bj?ZL%zbcwrI9sqU@>IHg4ej30xT4oJvUxey@o%rRk0FXtmwvVrrm
z_c>2eRSoP4AzJ7N*&LKtDY$6GyE7gcWX{a5Or7}L?{T4tPznZ?mo>c{a@Yy-kafCL
z_RqNZFdgCLtHJ^deX@Pk22f19#vIMZPpW9;!}{Sl`{>wvw@~76$vEDJl$%82M*N7g
zh1|u1_Az+~GRrM_YcMRy>S<_BLEPHcYW<|z6k>SLcsfLOE#d!zG(Y0Dv^!-2TPK`M
z{(abIHDIgw`KatRd{_O(>SpQ$Jr+*#@5^#U%}!QGB=#-w@llOvFc&^&&(-OOGZE%x
zAEz#O4q^Qjidz;Sr$w8q`qlkmW!mGufv684Oo{;^!Z*Z-f<mX+-3g^e`zIR_R^RI+
zJl68Y@5>U~wN$^%^mf?(QY%U!TbWiJ-2F5;Ih2L!VI1GDQ#|1*4)$BBullb;>I(!}
z`4K%k%vjcWm>+QS{X%jjnc|&fqHg|2l&Z`$j(Uh*Ibr8B_13G6b3|J)aYlcA(8>&-
zBDMGCj3Hxfeu<o~2RsaoTT*l`Az#(G4%DOA98wR+u<C{d4mej;;)j!e?~2ziImK(#
z8P*U?9{vp1cx|7)e1iV*hAVJuA}RBiLgmZUsYhpZwW7EzZC)EctW-#ms=&{7#pK0+
zkkI9ZvqQq-O9*A-E{H0SKNwcCWgK643fb-GYO+X1{@Y<z=01&^;m`CB$2Rc8TrFF7
zo2T`a+#eJq$~cZX8j0qbAB+uh_O6#i>&P)IA^~5(wD{+`yzF&8fp}U@Koz$kdj?r*
z>w-F!H`e)kNPR*P@qV`lS<yR`2gHi3Q(si!4xIVQZHHwE3)9|4uhc54r)te?U-rFp
zU8heT`Fiv&&+^vsTFLC$$}sy)$b&u8!!qEGvFTCxW~C<>%2<*RWy{ks@HCRkTF_p+
zHD|us$ETvBExAr!pk<B~+knr6g^XW!cq?4oT9AW2#Ugjg%Pt|_;rM$@Fmgv+=L$Qm
z8%0?8E;>t|vexvv<im=b2d_y8Bd*<6*0qn&S9(+gOsjaAphs7Nz-{NWS~~5AdXG(P
ztoT0m7)yb{U`l~$W)(<|K)je-d$loC<pbm9JCphPp<U-15kHRoqgw@sxQ$Z1*2hO3
zJBLBz4&H4-O2;ALD%A&jlK`!RYI3+@_1<@K7eh1IqDB95EFInTnUDcJ_IuVWx0G1~
zNyopwdVbca-urS&AWSKSw;}bMBo&cwR3@72kkJuVlCn5dODA8Y_b5gEVmnUyi{y=g
z&$mPK<DP4A5`8*b0dmPovWf>+yo=!Pet<YOy}JUUW#iUDC0CB=kb!djTmrxn{+G;T
zN>-2W3?Xz>Vza(~2r4r{BFb>x*QiqjR;wJFKcY5Y$)ls9n62tO?$7zu^{6OFnmviY
zWw;SU8usM|QjbtCSkvV~D6b9>BJM7NWHtF|rY#Y}>S@J4dvclB+(r?34OCiU!(HkL
z_bTH4e#jH?Zt$a{lUi-c7Mye=x!)bRPW^4pn^TZf9oXx~7X4p@!q-Xw@-;XAMLvI*
z4t}+9jQwZxtyS1JZRaox=VaS8o6=c6?LN(W7A(o!e5A5A_wEe+Sd9z*k~jM0;9kNv
z5MN1VBdKW8fIt6`^qjX%P^wq0H#x#}si-cY?J&)c9xMUB6&NWoPKIURiU&W}`Rd7t
zxMKCJe^h^SqM)=VF85WhnqYzkHyLu(T<1(O_6FyI#<;^w-cueR!N7_Z8#CuQu@`_*
zyzxfNz10S&19LBMItpdmSO)5N@cz4qW3x-DXWkyoZ^*M`NYmsE<8)xAk+tC^LvHJ+
z_+pdtmJF1oPZso-(;N^gSk*fjwL0A|uxjpI6><#3yQHedy??2yv=l;sWnc>g2B@$u
zzes<LPsQ7Xze(~m?>tNVCew&e&^J>jA&k6MW9#%Z$*vYzVmDN$@TiEksheMrYUI0y
zR8~^`2WLqTCGV$N_j3}cHV9rVf*AMh&k{s|1N8VpWx(u|6xQjy5eOTA$0<yNF)8*-
z#Q^c*7Z%HI{dE0+Sb;hAg-|qSY=5D@vA*wXQYzXERi_7~Nzc`Gath3QwR+*K(t{O(
zAn<_P{Qs94nwk{hAMZS~)F~xE?&LKNNX0<Lo%d0RK~wjrICsIX8#?^=Qu+)0jn$gm
zqioIXbk(!0{7l|<jA(U!yO_y2SrsA=0sQ+YmC1nM50V(C!AcYVO&0PGV=b${hHo1X
z>dAI$JvL#vB>;S$)xA5TKLEJ_A^6BO94KWP?H;X&j(@7ieDJqw{~J=^p1VjBfIo;c
z@y=ceE2Gbb)W?S5U&2Q&CKwt2CxYx!{i<+AVA1+ihs*KN*$;1rQbML)IH`?(W*~4$
zWQISs2hioI2<`(uK=)O1DPZ64@nmz?@YAmn6q$OlU4mc#U!vpldypBJTs3g6cx(Fc
zAuZ4u)9WC=QbRs;j!=Ha$IY8-fW0_5Dqac~My};8PbDZ>Ru}o}H(mR}5Bhcr-sV{@
z+>nV4V`T5bSJ&Iam&|DaCKOLt8p<X|{(q=d2zOI;d^XOCFMTI3TVvi2UQu6=WMwk+
zwx|4>bl!*ncUFmr3~+c#bu~DSvYo?YX$<Ss?-A`^<D{87kDuNBAltQ&cZ)@y1-XM|
zu+(u=$vRb@6bcmoGd&>^D^WqI+92W+kBi(d<R2Z?8yzhN?gGR*{UA*s>gIbyIfhuR
zb_e3WQA(nyD3kcpcMY5Z<>h5hHrh%xU3<XCCtOm|Q=Zq!17?7Ej4?r&f!i{JFKY5@
z6IyG*a_>hIByfv0E~Clw0)f#QxaK$rc%mztpHoCa+~E@ji&&}nzK)%o75MNeI&+$l
zZ)sG~l27o~$YCqV0ihCP+lQW};&&5p4KOxi1~iK&dq=?8en1{{fN~j}ALaXedOKWD
zx&)ZcKCZ`iFPc@lG4AR7spwj;%xgfHk;8Ky`&pi1<Bv@;$lEgg(BC)D%%GlaE0slc
zlAsRfAhV!oSC%4h>}G>b>x*k~SFneI*N8vCYr9cRUSq;cRH<%GICXO9{o6N~_$c4m
zfJhIUA$D>?JdZ;pq{bCpZ+bnu=&1oXxMMf5vb=b8eh1SH1f&2sSjB7Ez&b-yBebJj
zEzoIZHjr6r22MHS{i8r4SVDGhLFwo{gPk@U!yI|tFh;<M*c(By$pq5;!qFMKlj3{@
zv}f6qm1a6AwZyi<G};eRHg(?jnO6cz)>vc8Yk%Dti#%67AikYft@H-pnKQ}g=7(2<
z4Kae2Iu4_P-IsJ*26W4KuhqB+BJy_s_@c&yYs^LFKXrE6aJzyS7G&jje*Us*1V*%?
zpj`S(9zWnjX`rk<ih4AGmSM8m_qn7Ql2<`5oF|WysfU}EFcJqW{SR1r=&)6Flj{A*
zkLM~3W=N`(8*F#NJhPX>2J`FxlG-^=XuYPnsGkhQlL$O0pSA!JY1~jqz7~f6SKPJ2
z1^76W{|d|Huy@@`xaTbSaQ@B9j_Wv<yG6}JQ6bgd=7r^NKfkZtq8ieh3aRnLl;=HF
z%~jBwDE4pQOzH38wpR@LFxl*@<7iJmHfF#81S+rflk6s4((v}H=Vq}cIF_cfJJJim
zrlB3CH}e*|8iuV)x&#F*Rp0VCLnnKbAhKi11C@t>rDB(%x5IyF`YAU~Ts(Tk)||Ji
zZpcs(_woY^PN%b?k_?C+hqk|0yGJP%I2y|}xhq@g&AqMN`r6&7sCTW}4E_GW-z3k>
zSaJ#EOH)*ZV>KV8uu<D5vPsp$AFz%0Gh66{eNh8>CN%PqJ>^%K20+;{fe!{vOhC7D
zXR_6)=u*bMn@hzaRl$Ogc70YmW+^Gyjn^eCD%Z8`sva8_?EY{QsMsDr*rx*z1f=Iw
z&xEJ+W=7+!8+a9DSUR<OFZG#;{h4WyrXhnY5OT%f4^$bfv)K;1O(72;cO-)8t|@WU
zm~xM_>Kia=(R}OfXiq(?Hx*p%JeB##ZlXj0ANn(5>RJn`tw!|Xp`JUD?bHB?{RZ{u
zz`64#RVrdDOO`M~$rgUEc&Fgw14&g#m+r|1nXx=G4PFR6ZP^d&c6=YH(07n-<eaOu
zKm$a+0}{dS?*OH5XX)m!=?Qko_PGonzt=o+l-g;9hhF-4c57BD0kY6MGN5R*kwDtV
zUvaN1`qNUSje&^b1a}W<>;Y_(%-nnT{U~eixsSD*RHKIm497>cuJ<q6JR)qsZ%`LB
zf=~epZq8n-L!k$-Y61~%kMA7#IWniJ+)q~Hb6`&3yUj((zoKZ(!7SEhga7m<<Y{yv
z+L{Xa+ySME4}Lj)xW&7eVIkgc%~CZg6u^Ng-X@QIYvUqZxMTd;yA%pCe%}S4ej&h1
zHw=R1;4gnuQKb#Hf6ciToL}A4(e8BaEeW_wg%24HhQ+&%In%Goxg+?=MiuTSW%N=B
zEWc@xGWnbeWlH&{ey&Q5cAse=>4a)e0m^n_|G?VA)Lh-hJ2b|Jy+MT}?;*Q3OD8A2
zYU0<BMyqKR!31K<Du#_+e0hay*+9e~8)e5@Jk(SE<pBd#8vDhZnfiQX_ccq?WX@k~
zAjW)<45F!hKO=Tk9@El&L)T{(=+wTbbh8?$etH4fCc#Ta<?{{;IoutK=cH3*8Uu&-
zJx}k*15J&ss^GjeIET-9>mi^AD~%#6nG&<cTX*EcpdVT{S$*sqx8JJ>W;yWz|1~_N
zd_O%o!lh?|IZ@$-;rk-;rQ$G5f4rEsfMP0033ZtN91QmI2@Gq}D{2cLxD9-4>=0d#
z`SPn}-Beb6Cua?(NvA_2hnw~h{q!zdiSz<a*9HB<=I;1&yT{h734E5>`tu%?x6$wS
zI`mCgZA(;LKMVcY$@ctJm{w_}@e)pP?+~03omYhC7QD2q?ZYvR=CBZ+{n}`5g7bX=
zujv(UTcb_$&23i37{)01C3?MSWnPQ;v&c$8?OV&ND1K09E8T5yKRE!#OlKY945$iz
zg9QxO3MQBKR%`buc}JJ>jZtd(9gJ(3Fpipc!N0#TVN)e=47xDT5BRWOk&9uT@mNDu
zFSBFuco)A*2HUq12iuQTg5Yea2o)9!?%FwgOc6;gy|bafH5o5eGi;?Tj8!T%foAm^
zC{L~QO*~gBg0pU<awnGT`n+`oyYz$3fw=8~SI^Y18G_e5HE`B2u&7QUbPu|i)yYMd
zy8gszj=3;8zcZd9ttb4nbU*!77v|^a4cGsJ0X9<3<J1%s{ph*AX`WwH7L=_uRFs-V
z2QOT3>Ak4Af^_eDYP2T0&6=&hL+6^S{(`OZQbIF*0Ue0hQ-Fd0SYr5*jb2lmawCk#
z{?X)%0lVg+ynUW3o>Fsv&20SyZpa5b0p=DLM6?nQStSi7##v1bUX-&*H&r@~2cVC3
z|I+5_ZLsbD)<S{_%35`Z=uLsKLkf=dUu)_u$lo&=$8(VaoDJ9lwQC<^D7xWb4S#vi
zs?9j7sg1GhJxnVV`x|HuEIbPM@BrdRFj$)gm}{lIvExP```{~xz2FZ4$+1Dbt_zfb
zT6NQA<=#PZNaaHaugJ-L?sIM`YpZ%suBe+LlxtvzQBA3@JCSe7LthqYe_VfyC4aL_
zuc&)@1yeePlfXyQ72_^H>ASO17CIIg;k^am!(cz?jj%y}JS@e`<M`>hjVhK-QMUkz
z9DDCh(4ur-_xQlggy%vW^xA?B)n{(D2j5S9=0+RapAL-;S~qc>>kR864iIbN%@8P<
z4ksSSxPtNE2TAUY%Q&D`clmP!l#vmVtgctlKnHl>v!aC(sGEVMs+mQ;;-EJE``0%T
zGMTn-CA2dPEZrXe&yT>?T@J&SfTDM)%%ZZ{|5?K3AtYPSr*j93Hn8+AmO+bzwl@w?
z;6KPfxh+7(rt0zp6&S9-f03>k)%!H6co~HPrkX+Nha~s|R7@dwP#K$KmFga1bh-Y3
zi~IkJonAKnJ0MulN43L`U?h|Y9XVx;IP78+k1R{uDf)G!P-h!eHo7R6yy-uqD^`os
zilXAUIiFWmSq$&PIHJ28g_07YN`}5ZxdeiEY=li)9`jvk@n5J=NMaSeIAR2y9Doms
z1~Q*1?ESvJ;|Gogf8P{<`VzoxA_Nw4;T%#q;Lhm5P@MkaAE1;2J_NYRgTR`y2*kT=
z{vd{$;Ev8^%jYSm>Lb?hLFEp7>|myG`sHB-XdQuKz&BESDVPoch5x+T!BwwO($!IQ
zW$~$<#Vae+V8kZi(Q=P-{RK_H;SCv6-I|yFT;F}>hs)rn@7s^R?7D7wW~eJ?YHR!L
z>CuXl|30|mRtA@D@G07N-Ny|!nstx>W+6W=GnG92v>uuSFoI=zgZjBAw>|k=7{ZTU
zWYG>Reo#|pRPdU}FT@M0<pkM?5%$yn;bZ0r&Z}VvQE)Zj@p~e41~$SF`!&Pt^TKh%
zxy-(@dR@^#!!*w^AzJZAPOTMCXbW4V1Dm9?OT-Lbu`1i}Kg0*H-A=DF^(tB(EcBHX
zG9ijCzMI7d2g``~`G6IU0j>XCK@gY+dv`GQa?tS{bxRqo@2~6Y*Z0?hjZPbLeOnux
zt2o;hY|^%8W2?O~uxo7kuLv(2pvEXT&%(~nKdaMDjRzB^>__yK4ey}*GPFvBBy0~w
zpEEV1?;D&fm8~aPW;mV<>LXqDSG?&F#}xWG43WZ0Ek$VLx-Zelb(CjYY5gvh{Y-6D
z!I|CMP`<6dQ`)TmZU`Ll357`aMrBLRwrXVvV)SP`$Ayy;kOwPM&JVq|vt-<6Eyc<t
ziA6fRi7eCIBF}wL*t52c-p1dl8w4JS@mq>_S=V)$y_H%#>38%mBlg+mqjf?|UE+WK
zh7=;q!109CFruVxra(E>x0Fb1KW)+#<qJQW%yyexvs@b&I8$0A{p2Z{A3b#a>}UQ(
zk-FHv>Soi$-AV6JKjD+_q;Mb&NMH2Xv(Ow>^h$>Jyb&Or4N4Q^Y2<y9v;sf3<Qkb|
zh}1-_pTWO1&6Zr8EF{*fm6W*poyU*QA|Mh*ikwT8=vK8639fDmpDkK$ls1j^BzKo^
zk)QaLJ!WF*92WKWlYllj+i-YibF`_9$P=UMdoqo`-;Pb(SIV<~A#Zeys`RGQavft5
z+r)SS>oEdqYRg$j3ig1dO|a0m*k9-aVlSh%EvE4zAPl6ld*_~;gOvsbZU-Jzes{$8
zie32x`6@qRPL?(29O}!UecI0rX?qx@2sk3WXVHO;m<fn9=o$3Lbjae%{cQS+sKaUR
zj7H3HJFYSk&OBVR;%yFpn(w>+t#NSvmvUPEt9$%q5_M+UZIPl|qOOOdO<v+b3>B3b
z-e(a4HHUA_Hs~Y)UH12={YNzdS};-mV?b#}X68&n=nLA;&O(zhpo9~dGUU;Ud7X^8
z@vA`>J$LaBy7g#2%5QS}z>W;>%&RRiJvOu_Q|vT4YIJ6<d+;>p@2u_AvrDB=g07F{
z^@H=k>has!hS}*7WlEx(?<&h2=O$3TPJRH5lu2z~i?vgH&RxH)YUJQBHnG@;x<`(q
z+pG14K5MsqH>T#sXNwLYg_oiC{ySKvo5Ip4qXiLum%_j&l<uNCcCxj~s0latU>g5o
zSfK2rcI=n;KR}x&FWM!GB5hod$EwC5&AuhzC*jo}9;+uAXHTgG?1vNt^X7+~MGy9?
zgcrXl7cl*k!F$sFI!a?^5Z!tqiE8j&h+SDjDL>8){6zBXgR}i?v!Zy@eBvZ3KoYW8
zJ^87HQp3L*_e8}=_N8YxE5@k|{JKVUFUk`69t)SA&q#W$Mt8$cy7vNC!0v2>5oh}+
z)bQyYCa<C8T9K_WVDgH(FLrXaT2P-VGdzK;Ht)IbS1_$6wza+}Yi)fZ$zbN?y7+R&
z7cDBhBuRhZhqAahi)b8NvlKXWITS??J#-t)phx7@)!JB@E0i@K2K)IfmQ^2q_3(^3
zUd-4kY0MawK<B%m3xK@siS2owE%xNscpK|X)uM*&J*GE<y4ur=YApKP&rb5@JhL{U
zWiIm4e49qwyq`yj9o8#}oUx<OV<~j&E0~s7N)T}Pq|D$5op;HQg;A6K;OU;wCLPGd
z4bHr_xuOzirvUTKXH@;5g4m_4eK4BLiUsrIR+!TJv^O@jmAZFk`n`UA9mQAEhBCsK
zaVgBWchB(C*O_!aK%vvUXIIEgjKtLds~!EjNgz_%Y}s1QIkaFt$3iq$?WQTSV&_@m
z>57(+q4Q0Z?tW0T)$RQ7WY@xIPg+;=OO1gqHjvUueEOQmmHvp78q|5nN3i?3^R2N`
zk-3b=D-R*-Fq(V@NlW2zy`%q%E@Y_}x%`nDnIcCBk3x?FKZtYd=jRnWESvtuVy1ov
z8`>l9-UB@#Y&)t!H~IT-Y--Y@KgSM!Wcr8x>{TEA*2iP-?20#>&8xRi6^;(mj{%Aj
zXnODB;U~CllHx7r!G##A3_P#str6q^LJUJ&T;_KcR>*K>$5ax|bsU5Cwr#mM^=YFR
z>;blFG})JU7=NP(HR$}%g5i)=(uM_!6u{+QT)t48d$4L`c9iIr?{{LQ!EeXs{cRVo
zDHNz?@He3icN^M{07@we%nfgQh@VF>wGi(C(U6`(L(1Q>^W{r0hUyN@&=uU48R{O*
z<FnVqzWG2k8qXrd$7YltM-M}~AFC{+N&U!<6*J4>UoQ!~9c}C3YOp$||3ONM8{`!D
z=S~c@(@<^VJ8|e_@uNf;>hrBZgCnC^A$zh_0M0ERm%{hFg9{=){>5HQUb;UI*_Qv0
ztmNy7%CQk$vBC=<7XhLr)GJ{G$gvPHpGHVOfg<)F`|%+7AG*2Dh@!otM13}g<noG>
zqta5752YhYn^w++=FpfkLoX%B*|?!CCQ2zz*F`P=BTxa7f(@A5zXy#{GyIMw@QeKX
zO?g+J#kYwWV*K<Rgf}9Xh1am@9lZ8Y7^Ra;XzRcv*ZCTapZ{pgGfKQT^Yn{HdX$Rh
zv1d}|ZFYruq3PM=C`Tpbcj(NRGF)srecvZ6PFdNA527bBgv-`7CUo5oHywl#v~J&a
z2s8E)IHn+31)jCoYp}{@Av8|F{wPx9LgTPyZqBO-EO@dlBR00bal9a3_G-|wyY##g
z6@RU<`}_pmh)KE;+}!Pl5gC7U+S28H?t3vw-+!E*fkF?vx_nmc=6Abj1;VU_Y98?-
z05RodUI1?TUI@YL$q0gKv{9|cBr3$CbXVL48Zzt!<yg|6duDrWHQE{=yN%!1-jY=h
zwg#I8wnY(Dv~Oq)Yyr5!<$QGpGVuvUm<7B>P20oq&p%JKC^m!lXhXlWurwaz@oJrX
zW*W3*Mfk3<UCcNciMMjLee42Oz{jvm(m8C`|9qUHuhp<QL^oU2G(IeQ>)Z)rU}3~X
z2(QWekig1Gu0}~z)UdiB-)!BIYvkAs8I;ze+_FbCWd|2tJyY6C%w6{`dDw}TNaUko
zR6A^DB(zk0Dqqx{_<UkhloPqxyU1#D@IB@w1^v|HS=SOJ#~Kjy4i+K(1z|dm>t@{{
zF@~)32B(D6oUgyC@?ZW{7=%Lgx>>rfUkf_RhxLvw!nwxGD5Ol(%TRo!o|5aO=*jm*
zi#fJgOSbYAn;EaEG{p$kLOx#M`Jgy;Wsz(<{?S~g)(p=>PZUjrG9UdN|Kp96lpF9-
z>0nJ(PBG_|$M;H8(rGykTVusmeK{<24F8&%sPi_&U_MW*K;c|b*|EdKxIDH&_HFGM
z_?WjiA1Pj&)0%c+@HhA7x$u>rO>-C%b&Qwoo)*e;T(=rrLWfD9w?z>+3@nOoZtao3
z%OPjvtMT$7&63iKVxtkz6)Tl0Y;k@V?E=Dor)evUkp02;<-K&<CCQAG0ah~mvu5`b
zVq94GN+<oXj^9<a*P0xQp>cJSW+j-?v-!iOX75Cf{rbs@vY>k4?>VO|tsWGDV8joF
z>2BVbIT?z&kl`x!w>D%enFY3aR_t(nMtjA`DSB+iwauNFz~k(glMZv&(MY7sjJd_p
z;7kI&7>p6#FJ~Z!8;;W*b2=IUk<#79{2b;=jN)b^hDXd%_+4!TyIpZr0(Xr;G_!Z8
zX-fufyIx8!ROX=KE*X=l0>@>1l^|9@-#wXF85i(5rD)sNgp4zAI>jev88h4RP{2Nm
z&ZzuhX4~CL{=sGaL&^ZS{4|uvg-I6Zui~pt^O~eQSvwHm<7eF}^T&il3NIfCwe6+Z
zMh!708s>%2c^1!`5~c~xiMQ=&LlO2HbUI(z;;VxL!d9Hdg|~HDv|isyW?Kz?jz@9Y
zlv(q?x!*(7ES@QW^ugE@!WHCwI{5W>1p|pB7{<?jo+OC3YvU_-ac^&tDjRNB0P#Y3
z&f%KtD#@=$yriR|M4}uT6d?k7I5vKOQh?UO12$?U$Lh4|bgz>a2EP3sZo{}@kC{#&
z`*E`3$^{=iZaud=w*J7Bwj1q9E3>vQ(}p$knpkvl*t6!>gg+h|A)GY!Q^KKk!^dY#
z*l8Ik4@h(Rs6jdmQr~uG-IUq&JW!=ucb!%kRn_YU1QE}u8eBN*Clda-jYFT2fnhEE
zCNx*@zGSjBTe+?6z}<JXGvB*xJjpUmo%}Ub=$Bhw>uZ(=P(lGYD-gCFez%QCKVES)
zaBX#LJSIQ5x{LH)ab>^o+Oe3!nt2jJQwjz-v}_LGWYjH$l>?Un(g|cD`Y98ZfygWh
zq&P6>eFK!Sw?E|snQwrXp^kV{@4{ThD>)!BHod@@G{21VT+SFACFI(hUulKN<7ial
zpfksrizGy~U1TL3@^A}&FpKhzf}F+H5oy!1kND}TQHzsc24)KilmHW>Qcs)@t}d6F
zPlibikNE$pkP{6&E|Jqy{vS-VL#%7WS}wEo5%g%8QC52UDT@A3x96-A;(sLygndw4
z2gzV}n!k-#2B^zgv1gh0+Vr({MC-_7cKbkJeg*39$xW<jjso)a&3ne<fDqnwOm~N7
zrxpFJYEYnM&~$%~0pW|nh--k@#x_dO-H?IIRtN-jnxK7g(8Yyu*%BdHo!s$b0%>7+
zGbCnL8--a>W)F=3>1yuB<Q<CqP=UlB#OnO04F7Rw6g1c9;)}qF52|_4#}LX%kIso7
z(JCmNw1+@0h}eH0S-ZJ`Trtc{m+%`3eR<(Cvp=TQQhuH*gkB8miuD3P=l)Oi3p*Qe
zD42#^)3;-a1YcjwfFG3VJ^Qc|jQQSZpHK1lk=^$Z{uRunx@6u~&Z)i#3^^fRmBU_u
z1asfj>qlS+zYxFZ%0}DKsN*Q<SFU|kHg?S${Za>sA@n6wKZHqEPyN~k(W&)o$2g5_
zrOhvAQL-@D53Wn0(3WYTju8L>PG$lwozG{?_G4~AUR1^fkX&uBO<bD&!^&tI2jQYb
zL(l#xbeW&4Yp3toUIT?qBx2Xqh^uu!4BbNQx3dw9;pLD4ibDc11*C>-z`2c#iOhOx
zbdGA$3S=+NorytRqoZ>>tzx9<v`Zu3&X8Me7k5!d`I6D4LUVO9&UIc`$6efpzP^&3
zz6O}r8_i}r42Xuc;(_xK&)H)<r9nO)pS6+cL?hppU*5>9w?v}9@F1X&%Vl-&-CK8r
zQalh@t)zBI2;W`>kzJjOQu1~9zb77U^Ppso5xowBojwD{P~aSiyCg^%2@V}T<_fwj
zfi%cwZN=ko^H9u3eE+MNYpZ`({P?T6GK!2xj<b24MB-|I*-(C>>H7}oa&R1^d*^5L
zHd|~-mGDn1T%1jodTVHT?Ys7TCoA3K{iUfVy|#{VzNn7yU4{){1)S_B8nc(hPCSUM
zH%Yo7Po?a8a#|`p2X6V2cMAU6X4v2?by_jl05RG@-qgwM)oa&enuGXeJ%({NB7M9M
zj}LTP1_L1r3i+8)e**8HLv5bj=pgwvH4mKGg||(oJLgsdXp#SG_u^+68Bi{AM*O&X
z-AWn;D}M#V9Gs95CbX2Vl{kQ^S!N?hB?VkIK!W7pDc;5G3exw~y%wFv1<F3Vk5Sks
z`C`7U=eyh4lM{7%lAYOJCTH@E%X)L_sCA!rI^Lfv_+{LW8_HhY%XJ+%E3PYpi~(d9
zCV|`&5=5?cB^nNa*m$9<9FWX!fAONAvCOvhKorFTod<~mVnY`3(;B6{mu(Tq%$}tA
z^cKvTwK^Ybx*iUJ#0W^DJD1w&wv6~_QJEv+`%&Dr5b6DnlSKFd{~UDW1Vy|chb?ya
zx-oJ*+nPNXo(&zefPgtY-RR;2aG|!CNU^h}d6|~+GbrJucC_2)holS2Wes2H0kWPP
zdX$b<4VD4*&aAbY$pWePbp!Yg<LtegAa-fovg$B>4COJK(Wv2ww$lh8sjmTlszDkx
z<30D<Rcoz;#$Yv1g!)qQ7!Y9RR%NrkkWC<wq0LY6zrYpU`?crwtIXf=*cTk=ffCTA
z7?x8A{<eo29?1SWXe*-VS(#5N^-E``TM1LmX9_ryzyZ8>pLkxN3uW@b;dDn0Tz&3t
z{dKJ?LCLz%(NkN~QY|=>81V2%IEj02wM4c0Z${ZF#ruF{7CP7>%$S0#W=n&!>v%c}
zWY>;7?{vjn*1K;L1RX4Y>2Jjq7DyWf2U_qEo^F8yF-j^r`}#KT^V0y3*{gJ(864L1
z6@3vBn3<4R0huXn;DDl~8wmJzuv`j4dyM-~nlKo*|K*`;={507Ut<%7PAYtK%SKF2
z=H)2H_~L}xah*ERC>IKRppzdjZB%}Cq>v$nAv~1MZ@+A>aV{?dGg)cT)Owa?3;E|_
zU$nSXps2R(1vc?0l&+LwdJYu1Zf=h)mz*q*&W(klE;0`%P{xqMfMN(JWgm?yYcdpZ
zKM<If0cRWoO=D}RuHr?I{(2v56^&wOK7vH<3B~yeW8=knh^}E4oM*7kWU>*n<qbc~
zA3#EGRrF9d`!$h}KE3!}Y~x0$n_&(+A$*b4RZ^h{+IT!K``L~%di~*w(Z|klx{?+z
z^e8wkK}O5a=Yz!S78Ky_d1WXlDQ<wnMBRM<Q#)Gtwn#O|6QQHT0}!>032?T_m9_1>
zoXJ4JGxs*mW=kbj@~XV{`s?636r7`3A+%W#SRgv%+t5pwbLj2}9$fQ1zJ5y$^p0j#
zIyc<^4MRmFJ$Po<E+=y-OodLVLCTJ9NT~SXq3bbtwtoGmcF^X21vui(Bn;$C02ltK
z_sHdS!*8wXinh9k<U!Zf>SJDd8&&13)%w_NMur5Bo>Yu_4<5S(g0t|7oY5Gii+OM=
zFP!ePo^jG0t1NJK^l;!b4mhsHAA1xYr{6&}0s)?Nu)Fyc&)xu!_Kwd=>L|!5zZ>~`
z9t|}{)udJXZFgq8Lh2dmT&Q(NLHDr0xh;{nmLm?#xZ*P@OWNVk!<JR|<rgcfTjJ+0
zptH9lDV0UiC-&3T&+1O+i69^A6@{4~Z2NUo0cr_<fx3%^Q{#`0t1x3RkX|JkIoF(<
zMQIua6j`)k6O}ZrbAd(3LAc9oqN@OwVK<oaINZP$KMe&6L_iDwIuD(ARzqjHyQ_=)
zJ+5Nekb){ITodt21yh;9L82UY3wYlIKIjRc$_FIH{mYh)CwO&t<?<30s4XagBW0Z0
z&V8t)32f^T=mXD@fSH9_ydb*ni(mQ!2YxM(s9awNA`<iozmdSzfsli~G)eFlxO*MC
z1_wA53*G|ny#F&U6udv~H{S;ZEAXv?FiwjvW$1T-AhQ#CH7x9V<#%ZTybCr>B0}n2
z)`uikz^h@?%PU#XyldcL@^f~g%Pv?Wxb4h#D_rstWPrmHu=vOtKJ;D_to{~y?+orN
zUA9*5fq8=e&ASff-S}@Fg!F>oyY%1XotYpoF&9bk8&L^H=mqwa$sah-3+y{-t=})9
z!V2#qOrDkN(EP?54$fM%u0q8!=<PeW`bii_)R*4VvU1sypkP3lOt=mwMH*RM{s7$+
zEH8FOLDg3vdz*j;V|IyuNYVthZI?uTdE*L{gV4}q7n;ipQBX}!CbP5BT-TwSi}P}J
zz)Jv&ed5m^<gbF2Bds5LU6zi(4Px*FUF5$`u=~Cn{{n7T1G}&6SpAJe`3L}G_ud`c
zeIdJq+wKFQ@tyO}=wWDd`=8Mopp%{Z&mx*&5zqe?0WU)2>HbVplg{jndCBu<r1O`8
zV{n=G_gw%m%bMuVz*}HnF<pP)(*SJD-A)#Mb9)=SA(oF>;;#8uo{7Osp}hV-gMGl@
zpZ{^O50tCq!>lW~f7hpU3;}i3X#P;w7*uIYz}=ib<Xj4o2w}`dQs7^1S^_*|F2Dc%
z@_rNep%1*WH;4+l`<oyx(wUOuW+uODSLLZBtB6tdKXMGEd0Dne<oN$e<WiJGNNHCG
zbPEO4`56B~WU=x5i+wTKRbe<IBrCr+R}LPAuL{?8{@IPo%~gb^LS8MFtDr+(=GZtG
zwcC49`cKJ;8xV%Oh^(URL|kL79WSTpcXmt+P1_W9Q?eB1U>(+<7wJFhDJO#3B;(H0
zJ|O+uuD~>80Mg|&=N&Mz`15d&9j@tw*aVAwi^)=Uk+%0hktKxcwmpKXi(~u|DYO>j
z$8A7nm+t|50kz+2zJs1!ng~(Rqzu)b%i7QK18lgtrcRjn1s^dWU7Dlaq=aFsKsDev
z!Bg0tN<Dm9oi5eB=(xO>x8y7<P0fCPDX4@2bAJ9<L}VaKQi9&CwIhrG3{HwgD-0eo
zNC<WJf2~APCB0=PQ*=8)9oYT;`ixVEnD~V$<1O+-U15kIKqh8Dma4FeWcvy58o6k*
zDL>BSCk^%GmqM&39D5)=ben-Ti|F!oH*MD$SHO#0{HOO7^-??(;U}owKaj1anr)xT
zB02R00hKPUz<vT|@&K;)3OQ(jXW-UNVN4uYwEqGwn_4y?1wSO!vZa83bs)0{Fo*;U
zE_9uKM-VH~{pIpozR)6o2lw2whav0%rg-`Iv!@aQ;1<4GUbfZrUx<p|-*F=#VivfK
z0-nu@oW2&iqyl+bf7{rZ|KR|pD75%W=Y_@?g6GXuEM@~0GARkNuD?wa2Wvlk{P^*&
zFoSW!o6nx$JbBV?IM({16o)!&|JE!j<QD;ftTEp8tG*eo>8=Upy=fv31w_iwvsoj>
z93`7pb~as68Hxm}cz562G}WXNy9l5cPeFVQh*Xo?RJsO-tJp6iwB-6(o9}<9D2NdK
zJ<jb79XvwO-beOoZro%N!RqRd9;e7*LkkHR2#j9G<!o&*8)3J20aKYQ`WL?Z9fYb}
z!C7xWBvDwZN91tp|I8R!c9|8DTj~jjy!jOGZta^Zv|xoYg4K_T_BPhkyWy$B^Y^fY
zLD!q_x30nC)NI;#GqWGn)TD`@#P!Bsp#{r7wY!cjEXPt~M2S#M>G51)-pu%)<tIPq
zX$^?TSo{Ak0_zY09I^ics%UER(LTka+)mYNaIgqo1tY;KbMA;AfKbA^l9oN<LWv*&
zh<#4r&diQe!vJJzk~yGVUishMXxcfL2+FKUfXT&A6#JRp5#0%Y`?bf)&W>t*;h!t*
zt}IdKBgn&FqE70^f1&MKXX1Lux|LHueGG6CY_Q=mJH(=nb8<p#96W!XieJKsr<~Dp
zXMN%3<;va(S7>R=eORvMjyW@9HOA)eWvUc{|D4ubDu&R`I}fu|3V&o#Mr4R@*c;OE
zI)#-Pk`As_t#E}j3Yx?ASM;S7<pQ1-be!ySyw(uLWQiZ}J-SDJBlm`DOyYONBrmlW
zZhHD2Z?dWSw2CWKS?rY!W|Vhy&V^k}KZZ-TU$XuMV14^;NSfM)AlVfInGm|WCaNmT
znt0d4|28b6Xe%miW)#z*J=u8Q-}kgwQbq>X#eK7TXfZ#ek=gxqcoPv=%=?gzYW>4L
zzWR#G#U}<Z*$F-*mvEMb-3SQNDHBz3*OzU!`OE{+cR$gMx>h1f<4F<zQ&-oAx_VP~
zDo-~ax*lRN$FVA8M6(~Cc69Z9Pe|%C%yh^4BN{_jdJ><i*ocPMytS3JPP+3sZIFvh
zJSsBjT98`M&=s?xu}6>TZeHi<aw1$+_!OW-x4dpG$n8JR3xIy^8l-`6bG<@a!S$a=
z>#}zW$(3xV3_KC=>}3bTu3nYN%+AIh?_>RpD9zly0qfL%iXo<Z@?3{3RljEYknmIC
z=*G^bUP*o0yOIg8MZ|HCTrFyA9v7gHYJgGPY6H`o4r!#EtnNcI_HVQ=<Q8q8cgi?Z
z-VM;HGr=DovkwOJQqO0+!cCB^8(Vu_xJ?C;kOz;cWFph0EG_dV%=}J&Qody5c$2RU
zqcNzyLroG6Wa56`>VX%H;46*CFM<59Y30suj623G8MgWaHS8rkE!hdFN}+fl)wO8)
z$)bnXrT1u4k7F#y{_hNbK>%cXkGLDiN6dVea)y|U+OFxVwZDJ-T8==JhaPQwz3wbx
zu@t}1;Eg$?)z#JQYAZ|7?+%N%c0zBz)}nZGu%?F?9%f}R>#ZDxenPEs|C&Kl02v5*
zTJX2-qIhQGub%i1Y6@X#k<m8d_1;H!A8?WYh_HYn#_=xRi?gGG`hl*$`xaKX3{R0O
z?z64FOq_Ew$;ufPX|Y>w9=RXM@F}=L0Aa-ZvIKpXX<Gd+0&&6<I^A;StFUpSk{^$4
zb??nf62jKFzqqd8pHCU#$0^wWmZb`(S;9FJbBcL|6K)p`!=7U|s^{<h5D_MDV5Pr5
zkQ(BF>aSxoYV+&ND4_l!VnaZa%75qf&B%VrsiEm<JNLBK(og4O_D16tM(7~MgX;Sh
zw{2|O!Vg+J=8P83TYZjg_}Hu3?BC_0vj(_EKK^>z#F9_ARgy;5+V`#ZQ)HU={Mv1p
z2eEig$)JR-Ep@HMvcw`SUi=Dku};#1hHEE{N(%89AHS@h^~xDSOb%t<DQgR*k{bIO
zWQMHdZK%P6CnvanBwRK8r~F;!npR0lgy;z-^oSe&0R0$nR5DA$<f%sU5p41-OB-*R
zOz!sSX{V|-nlxbP$_(HV5X7U-PuN)|q+N8%t=V7R5(jj2<^m=;&q1<iW=8tABm=M^
zneg2=%5}J1Zqy3s2VR<IRHY1r7{n{w4soZ{`hn<drmiKmgc5Rb5BN~n1uYF#XhH%x
ztbLDyt84dAe@kJ@6ZVh67hv=t-F6x?_R)Aetsw>)?_-Q#wU-tg-yd6gUPBKMHhYtO
z*Z6ybEq%c3>%bp8(Rb!Q1`qeBpR$|DKZ0deRgv<<l19)~c79P@=g*AQOPpDw(>ac$
zdJTk8g_&^Aex}il!rtCq#WOO7h62WZHkT318xfIElNLp9``JsISraIh1W>V7zoK|I
zrN(gsm9JL?n>^=<afx?yBf`>eFlm>(A_8>k?PYxzS(ladL|+=O+2hwVTWQtqpc^be
z!~+$c(c+DsUDbCO_)er;2J3Nq-{710^Ze%4%vNN?+js&a3M*S%(vbS5`VH;}k98ln
z{yb)RFqoEVTi)h2HRX1F-`7Y-O<7(|>k2H7@d3o5-MAME=PrA@U2fw3=ccOEW^2BJ
zz^?2ZrOq_p1k@yDa=r4^_H}<v>`WW}jU-rZtnRSZvu=e>JQ@B}{U))#@5vk(;iShF
z3Eznt>o=e&F~hvES7xeK4D6TjWNN<q0fDD^3@@G=$6cfU&zWI3fElx2RB7vSn_pO3
zkj&b?3EvnqfVFRmpg#{D(h3s5UY-2H0aySTC}&~753smmpr=Po&haAfsG!QJ=BF^M
z6FarM4Xg$;AWoEH;tvax-`TSirJ|y)V6dbIgp|g46E2$VFx$uwd~L>i{<?mn{yWMl
z3gg+o$()b2rak2W=$j-$lrSgsEOrHfi2K$vnUM1~vqvM!4(an8{{VXzO5B5*ZIO|Y
z3AuCsIFbk(_QJyFV%}_=C-F|?@k|r?d8!aG((-<G?V-rPvcb*7f-*;#@%wjvC-2Oi
z?;X$n9e7=J=VK8jH290O!fBb9@41Nfj5oYwsvM`kzrWsXqx4ntGM2EA+eGXIhcds9
z_+6z_JDCA7$e#>&)Y}|*@d&~QT0-6+o~>@)w-gCjyIblqAd7BHiTUTv81Nn5=W4&)
z_?^|TfB}RoHjl={Kdqxbd6a*RRb7YO${UQn`W#m7cwqwm&8z`N1p1~nt|g(IT;KLm
zpLPzr{Oxi7W91svB*Sy{2%#Q%Ziw?@$B=1F0~lw!{nUSbRx&kPDlY`tnfq7a4VHUd
zKNJOLal-!}y52f2tF7xAz7P<l1q755k&;H~Zb3l=MY<8CQ;?QcB&3lRP*6g;K}iv%
zM7q1X^P5}GeIB3tdB1<o@ki`y@3rQdbIdWu+~8WKayE2_^EP!I5~60<ZgFAbO_zL`
z8E9D<eNu(KKEFwJbfgjLHFi#F?EOY#00GbACr>WKQ1FSC==HwHqRoAGree<*DMxDr
zlmU5qwW(=R94AJBX+fl73kwGi^wK^51vr4LW|@lPq^LR|`l<2TF0ZFPR_l^nuVfp1
z3KjW_;<V4s&eQeH#@l!zf|7M_QR*W;_?)=*?gv`}*w{f~C02#%AyxKdXbvLUZL!tj
z1tSesA_3ebkAf;bx<L%sh}M2y60LRrD6=1Yol?y9tOPCbwei4mBX*X&hW#T+VfURg
zY;0_Xcf(htrbInYyf^p#zSi2Dcd6D@yF_vMaswypHCAjSd^9xtj19L}I96f>+0F-?
z2>QG3(!7NSV@@vDA6t8!OKll|PeUfwySV-J+X&lP;o)6oVg6m-hT^=6CHY5caQdZI
z<04J6_#<4YPpdvev)aR%V2bolGJ{1~TkAB+uc8s_`8tBHFPIVm{`219{7KUWM>(ul
zev(;|J0T*ngIWi*Vy+@HUtg$pbfyL@-l7_MPy@9CABw&8s9B@FDtX8g`L*uj8h6<F
zvYM<U_cOu4ie>h@q8n{G4O^F5CIstjhE~3opFPwnt=5ULTM2rO;o#^f)|jNx_%Kf*
zueV<6hNfK`+Y=+!Y67&MXo*9-ecD3($CdjyF)xzY^vZjdYFzyF-E|o4&IsCD&cv6V
zzHGgydwu1h`|Fc0|H16{OB8=tJ}&kNitf_;m5M)yy5*g}B4XuBoB5n}lD-v(z>fM&
zCyJF|uEccpH7+q#*2?7?N8Z&ls7WmI=POdz6`6747TP{8^iF&dkVt*yaWWomgnurC
zQ%jGBC%IvJlS7-kGGT~Ym-)J1laTU8BE*$e$uePSR9qC@CI5HIm;J4DE3|P_cJ)&Z
zDU}(OW?m*cIXGN#T$Y99PJKIk!QXJ_pM8;%LZ7+D!Sx~FlWjyp`Lv*rP-Churr*P`
zY9j&?h53ekyAt$R{JE(FVtdC~8WIBsk>&>aH&vpTzMt>SPciSb-FZ`~p1sQ=ld-mO
z-d{3{XqJQW)*8kw*W@T&7Cupe;NaNOD>B^DrH9p~A56(Rc6s>2Dwdz=oN*r|L(gHP
zRo6_cK-;Ae_Lh8d&b{`8uQZ+>DebgK3=E!)H)s6eUTPR+P+2GJShv4C64F|&G=<?X
zJop`lta4`F!qSphOw4Y}xOO3Ei{Rg8roeKNfIoxx7xkHnv}UC^x4jGAe7&y)<yV7c
zZmUVAE-h5&^Vq+?7yGj_mCSV}4tvfwHOiCUSszfc^X>`yn>TM7?Y1s<$jID9B5$DL
zM?t7+tT~(Dqst$xMkJtm^O{=3_$t)-<SpJxoMJ2K%^m&RUxnkmF%_527s%O8jB-0T
z!Zh7vzp^?cGq-)<5tW}N6&esqJvq1jb3&OD!j<A8U!w_p(7k)lh%0xgrS-o$a|J$r
zY*EBdPS}=T7+*Ryl&2dpVlK}3p8d!Awia71Nz_%N+Yha;8Qfw)S$zBI4R`jf;J&m{
z!WlmmlZ|O&cgyDc;*7Hi>Nir%kvd6-jrJW7ge@RB><k5>o7i8%a?mTjFIOV1%rDH;
zluzf1i%01>0=dXK(5m%((6hAc(e8j>S$uKc%>xZiYiRp&zw4_rEVl>9&9NNp2KBWt
z9PILl%SGmVYn@h?&2H$`K4bA1Da4{e7hL?eVZ9%HwEnJpXTV<E>F{aqksJbeOidZ7
zkB_A(T}o{28Bk+;FK&bfWJ6k88Y;ef^!>iL(}F`%ADxu*T9w=Mhb1p1XXpFo$BhA-
zrPiagu<A{6jg$SGF|vnSJ9y6}`*~ti&CTQcaPFLos%YOY;<0BO7#R4SKxV^~*=bqV
z)^Qr)@IX#(d`r)AZ7^K536@yjLYlQHIJ6Ot?3pn9L&0RdK&gOGBls$jX&bSg3T=0?
z<P&G1tc)+8quvs&Tc^r(R64CTj(hx5!|0hma`IkPtFrRSO?5eu&=Da`7Ij7Q>*}Ce
z1(d_jZ@!k6n>#vq&-@4}>QLR*GwAHvUhtp`rY!nlc;|i4o1ATT;hK8DRH^HQ24|{b
zG;MXnlW_IY?K6U@xfKKf+LczSd1wG=Y_2#CZdOFv>){q9U4|5VIB=T`!>?<NR0r+9
z_9As?`~p{Ip0$^59-j!-aJPox70u208v}!bjqb=TP0GREQ2e_$MR&C{_v;ns^&hvR
zQK7gTRG2b2!q=#%82lM{l0}26eKCGr_I!NmI>&Rd<2>!FPdTw=(wV|?moN=xsD(XG
zvdLyKC;&O;4pNXZ-i@QL@hcIk)7Dd9yxY(~FF8wg9Y1xE`ucf}Ho_9NBPW1>TyxKm
zGa*{R!6>Z$joIk-?T>q;Dj5-%4UEzn$q1bHF_1N>I(o0^Hkk_PypGPW;h4TH0qgUI
zeo9Ubo>5&|Wm|lYo{E}1q~eODw(?EP36G+RE4FQdaEROw32sMU9HGuq{ty;f)%SM!
z`(B=DsB#;ChyK}yH)x4#MCbfeFs(-k*X>iCQhqn&xuxE3u#>1A<Ad&|-lt`8<wLce
zsi>DzdN~?OK@;>TzcV~F{T-l|-ZAlol37RQ*&6c4B4}Y-`u7F1)+gm25?aVp7%h9@
zhxMKvyqXf>nz$rnqpmXhfNwQcc;)@w<l7#M6$CLOo@?j4PIf<C+b|H9W6s!NK^GkO
z_ya0E)y-v*l*PFYqt%*Pz?0|Y$k?jfyz>oBF4uS*Gic-%EbunTHq`b1z?n>&uw6Zo
z!U&LkgExmlG6{y?9WO}ru;U20>RZgp^TJ0#Z)D`SaCYuUa(wQspQkcL$)lCXJJ&`N
z0d^Pw7<_gA&>($)Aj_O@;`5g@*;Eyv3ZAZtFhwg)QUy-4fH1cC)0BhLwe70&W7+za
z2MC7}z8^Iey$;RnEuG2>P<^1c_<Wnp7f@W(ou1RFmK)dTIsDbgFaU0y@umxds&m#K
z{rp)3Jv_rv8GE<!{F^;V7oQdJY|7>qHo3CS&eTTK$5;{}D!N}D6UE`KyrYlHp*wH1
z!?sV@b`pZvqho%?H6(I0wlW^jn>YGRkg*4UE=l+qgB6E~#)rLf&YRk)OD^VIP!`Z}
zMS9><$Hub1d=u+M`^5TtIVWfCKs43Ey8R@IxW`}=Xs(CsU{AMWf3G`Nhszl+?>d$V
zUf+~_p<_!UiwhksPkb!lztu``R`RXtNs;b*>VwQkdC((Jk~U**y{ROJDsA(0v&lEp
z*>*+73oViD-_11Zc~p}h)g=KXMsVZs>Xx)%yb~H89v%vp!z@<B^a6=OJq0UP1O#GH
zNy&?9a=8!3(60+-nq2V>)5H6>P%&7VnE;2S-|7{DOAmgh2`%a22Q`5&ldfO-1}(U;
za%&-Uz2W0_b(Bs(n6U-`m$&6qkeiArwh+%|$0W$gm69gQn?FmLAqAWscemS~vJW)f
z|FqR>9j|03zCX*%t`M0sk=H1>4Dj+5_BpcIjH|wc+?)vQ;>l=U(=%BglT4~H+Q&OL
z4Qv`cFVBsHG>1&%zo^IqAt2!J_4@5Yx@iBV2<KO?p$iJKTAEo&eWV%^k34DPPN9Q4
z4g9@S$BA%_fDFqc+jkCM|E3B5Tuw-9aKHXemIyGV|1y<ZPT@ekscp!`sT{uki$MJI
zK^9X4+!;Icf3cTcqw+wMseh$0QdqwGH>+410gUHxD~+MTvg-f&x=t&Nfx<GdtN+77
z{`vWDH2Mn5TL0(kI^SsY6qfb=&)0`rXmk|<0{-SkJsE*Btt<!@tBAy>_?yl=QSvzK
z^yL_(U@ORv17b5=k<Ie4CB*@Sx61YZb!CJP-DMf*Y6Cvlfa$Mi{ms-KHd>fj(QE|0
zR51hA_&4SJFD1M}R*>a4PMJ{;<l+B3+3)KG^?gS!$MJtIhiUOU1oN)^_jf2}cp(h7
zV*cKR-;6Mxk=CA%!aT>{+wl9=DBf)}M|SD`uWdj+obS7Z*%K-A!45tCNR>s1^?!H!
zH!tn~TG36FC8M_JzaPgc_A6hp%EABRH=h5<IT}yjatiw^LVn*{fBElAh5q-Y+LVC%
zmZI?FWIoRMJFb5R!PCb#^v+7mTQmRn5)|Ih+T%W_;HmZZJ|eVqB2~-&4AXJ--!c9B
zQak#$g)|5KPYhEc@pJzBCaeOd-RvV(zNBK$slB%Xewc^~iYc&x+=X@>0|UG%mJiiN
z0N2&ECvU4=w>$-I`WyuXf?4suov8F$`9gMwRv62~v;IYD4e7zv8!T8xbcQ(vIe7D0
z7j6i2ULP!o{F1x+e8_yZjqJ)5{xfY>y8Ov{kA1rOqk+vcf;w<FNtj~cEnyeqf5-~H
z$Z>5JPeSGl9efk<SsH$PAPJdR@}%dB?Uwpo&#he7JBq6?5FacFP-b}MfeqD#GSYo{
z#Fg;IqaSjvu7@d0*8Bzpy^_|rvtI0w#7Wt8+4sM{*>;~>vwiF+;m&T_QoXakNd`no
zwq`Xo0+n}H#aP*9QuIHtTiqX$?oP+3dUm)<81?PotH`YJ-oIUxl)kDxg(og^hAiBf
z>GfEI6$M_lv%mkzddad#B&|<CwH^-c+;^kaPc!p{WYBIqKR6y>7%b(jy=}8yNjbZE
z?mt8xUIAs70yEG1YD@>lyNP~2g=eX#TyEaH`56j^TxeoA>(7q9bBqt!La4<o?FQdT
zdONL-(81&0Pf9~dQhIsN`oXqVi%Vi+Vqf7dA+UW=Z5xXkjJw?qZ~=*Y`=&Kv2MJs~
z|2m#ou$Z>o0yO3~fb0UW-O&jz4i9{By8+l<lvhXyJ}d=rjZH^>tz&{JSRBdv7Hxf2
z-HSQt>9~_k&2><Nfp&9VTeAjK1$*3Vp|gYg%y5DzpX~<LAh&(WI=*jZ01eO*U!YWe
zw@PEY7{v#eb8Taq<!AD#D!h`;%1ZX2$r9-C=Y{cnZyD%Qva=-%ly)l!!-%JZpKaj2
zxG^h{vmFrs4eQ1uj?bW5(6`>?<1>;vP;)-?{|q;fIhPe~Z(=4E5Sri%BsS1YKl2V2
z7B64s6D0*Gq0n=ln)v+bXWQ_0h-7i;DPz<-^onmE29X-yW;L=#@bdG_t7TcJE49uq
zeCO@QCalV$l@i--T<WMkdVd*ebffu7_q?$2qv<OQN)<yOTwDM&WXfm#3Q*Wj)3#K;
z3WB@9D^6@Pckf0pwiAjuk^*1GdHo6{+*4%sDRAj(*>`+aGr4T+ei=&M7lsBYaP)2x
z_w9n?r0HcP&(-3j`o)V17tKW7&vxtzkd}BthYh6B^N5e6@!SOsb{735=oDS0b;I=p
zQ0PJ2@bULQdu09WI^YmkW9g<Iixx3)bxpG9BKzYfK`wR^#_T}b{)Sm&{PLAmupOE@
zgo1)w;f}yEfBrZ)3;jxcdfz<UktCoio+t4Q=9Q)PBgdjn5BCifB#Bmrs;wQg$=G$9
zUiITNEUt7-8{U6ddm&HeH02x#iSGP1|8&X2>R(t_@{Yqdwa$DsCtjlZ4_Kg(*5Xf(
zQW*#WGTKkBAtfW@A{$!{w2aak&*-ZhB*Hn(I>V!219S>j04CemSi9T=+sPj<K+l+*
zPGXDYu3PNEK@KV0wIO4>`1&t%CT8aP?kDoV>q>%zW?Ky+3Lu`k8uWmBYPv68vGtSl
ziK-EG%x}9$11$>D*;Ha>V0bw9cX?g!{0sT+XB|$SPugsBYgBn0la@c*2ZhOS^m+Zn
zNnXr@F=&gjm4>|vHWVmDo?-)zoEUPO;k?-KY###&HGut>A#%B3OCbuw9IbpOx1e(?
zxijw(lcycDes3Lx`+O$S_u5_vzLb@&D3UCo7e|P7`V5osjV-<uL>+;%#z{|m9wZ`V
z4M&ReFYL#cDZEQccx_MD&ljey<2SsBC}*m@=V!vwBR-$r<P+c-KNPCGIxHnEuuVUE
z`P)#<ZK9_0<GGM`k$$fo_$C>(9jkglkv1KZX|`83_l^2r@*r0Lx;V9G&j?{y<AC=@
z5`%9;ITJHmJqRg*v4jC(pP1yucOlsUl&14oV2zB7q&=;p_YIEsT?-_a-+K+D3MfB)
z#fPYG*7s>4ebZ6?l6@}a^x@;E{zB2U@3GaWU%#vyXx~b@%PA#zLw}l<T}9-1LKb+w
zSK8H8sIE!2Ud)DagG0M6v2yoyjV;BA%^D&4E4Z6a&<1yFdO|pTX%6Li)Y>)by1ZDb
zNupPcsBr}a*zg?*pn9|ISuI9e8OgB-sOr<?LK|&3Kp4`kxMFP4(zM8DZM*kX9`Y0D
zZu+o~&c_FAaB6`MFXo>e7GJ0ff2w4q)g5t!69dvk!xyRMwXyM0evb)U(0;VboG+o)
z4t{9C@87>a5}A!u6AC`lGn~EwA?%vjNA^@J!>)l7AA83p$zDGA*t_eJQ0Kk^{~jvb
zXR1~ULFA<`8gy;7jFd4@72zo*9k(fv6A6oUE;R592wKSVy(v;u7JR0#(mayO_&mvR
z_@VpPC$&>2(O;hs`=kF`*Us@4+uUNwD6(FjroZ4F6rCNpg$uig39GS7Bl<E~G5Ph-
zV!eEOK-O09;Mgn;d%qQ|uy?ccOM(C(Mp7MACa30wTS|DX+9EL=WEwL-Gl|9xUR+v|
zo@!u*$iJjjNI$5Xe_fGC)L*WFT=A)%OOAGzR0|2PznSvq!%f;|$tDP}LOrUzj9N>m
z$f-Ehjw*|b@m8ok3~f|ZRQ$y#g&Rg3hC^96jjPgykMZUf7Ab(PRd$QT^m1Ai1NL`(
zq&i^Y1d>>is4K086ZCnMp!jxrU~^oAmGS}BEqr>qJ0`(=Zal3S>fhe3UVXhMoRzvJ
zMajOt$Lkd?n>%{2AHptM<X-FLK@g;kw;#%Xv)k;UlDBT^E~dCZ!Y$D?IWMO}1=3Nt
zm({R88*-<1Z9p0O6~@PqcO38C!^((YRN5|EDK%Yv-XuimQe7l>-^qnyVxTZa1(H7~
zYiB>(h(+qM#0>pJ!CHpsR1ySwwo<J;ZmDL#wav-(pz~murNkK|JJXXi9hfY5d!v6Z
z)44$@iFTjW;D8chW7uo)cXS<Z8UI??maV>FJzT-!AA#Zo{y#cLo$llqA}xGz2Xtu2
z08)0tHO}jyQztx*3H0<PvX<;9P?Q_0Fi#^WdqD$iT&1{75#06wbaM#3DZMh|9rfv=
zhwi@u5_WE{SieZ%HQ@iFvqKZW8!e^DoMA`x&5NDWSeRP)h=PFnBp77oaf=a5B>5~&
zU785X48a$va+msKx=M@Ek<bKuR5-Y@&w24OZ|B@|64cX`0W7goc%k|<%R{cZd%^GC
zJ!;`@PpXC3G4HkH#<oY*4?T0obckUmyWP`Yddlf07l4KWRn=gwQ&pE);~j`_*W2$M
z<IjOa9L~BqSGzVh?7BZ&T5*6!q7c<bk&{{0-C@5TkUBf@=H^dF+u0R&`AoBU!iS%g
zoe*-#MFSJSnJ=WV;zhoOW5^#}iwAWc5QLKRQ!h66F=bo7W^oAghUw-7z#f7X0!@GJ
zxLm+Uh}Xo};H1t3g)1e`GxB_buz6)xsq8FJom>O$ARj6ve8<!$=QUq&i7g%T4DZmt
z<6H!fCa-(-tOF!!zpj>_Ol3S5^|#YYy>e&Q#vsw^YZ?}G@`}1;N|^kzOb|}QB6CXQ
z*CruX7w;XcezdYTm0)CW2uDh`wXuQTaQN)Jqo|`MQFQvP`Y6Ak7$c<(qO|QpEu`?;
zExu<2Fslz<2{>=-Tl4l2UzQ=GgXm41mjSMYz-mi0sXT6=BEo0ir!34+MM&LLq?#RY
zjDIEBmel%2hy%&7^~J>%SB@N~eEW@}e(JVl5u|F*3~&h4(%TLCj-vo2W))|fKmHQ4
z8ce#MR%4<JTD@FEqltxu6~&eypie0Qr1a7(TjE#5oZhGKua9!Td;PsHJQ(si>NDsR
zC-IA!^^bL)ClRP7>7w!5ZKZeGA@%U-CTZzn>LtsfS8HA%F>R8uOKrGKj<~|YE#F9C
zsc}&(Xgl$dOWDN1L>+B@vl#+8-l%AqYrGR8!9`U6<am!6)IN~sO`i(ALzn@7e38&$
zZJl!>GC-*|SUfwxo&)+btl}vh9ANl7*}gJ)_3#30AboL7XF0U})2AA%qxJei0SbcD
z&aik-$-SlAA2sILs>;Rq>^xBZP$i{dqwYiZp*cxVtsB~JPb%+n$x#dmEJR54O&hoc
zc@v>*3SuvNR6HGKkQX=2{SJ{$gkCYp*tS*C4isx_&frPaHN(aaH}51yUpsN%>SNy9
z^OKxUmj!wo;fzYH1NkY5{)EBV-?D;{{otwwKAJt6&hBDQSH-9F#0V|1cZfuEfp`MI
z^Vs~wwNc^6Y!kbn(g5_5xo69~<st%jM|Qg0eU=)OUdV*#0NqJhHQ6uKSS;|9v1(dv
zTs{Vv06Skz9aHYL(lI{yC{)$T^_Q0WSIgRi1Gd+L47gYb|B+*|+|J;(xAF68Z4VE=
z!X;osw6vQJWY0R(`m-%Ro(!eRC`umC0z-98T73hxz4$}t?TutJ1ev?5zH8aWxU<dL
zUtk%~X;=A_hR`(_DT3G;-!dNt{NC@6YI$-F-*2W_o|g#7KpUQI*F#)HX_A5g#Hhzr
z=mD%LLQjuy;c52v3#p-73ooCB<6kFDEFuoIl4;(ZROs2+t{&4{(dAE%W%JN<Ku1HW
z{QVIUS5@AdH*ZnfsP<Yl_*#iL+@aOR;k#}%(YJmhoSOBF-NNlQ9t;$un|ht;pjsL+
zNalQC?14t}EWm7G=RH1%monhnr}+KscL7dAn1NQl4qXHt<bF*3ISJDbtoE~PQ5X&&
zTOo=`ryUL{8yR{<-R(wYU_-b1aUu?v`qPSpqR%?iaW{t~OW51@?$9wb;5`8)f>KK;
zh2oZudRH6XwG`sLdk+Jk2bId%<`WzNH4V7Q)6{~E==4&{yU^6$1MCKjC%t7%)+EV_
zy=w1!&W4|F&~!WpSyZ=a-y?ANYN;YQKBAjy-ahNl6N8o*Wob4Yrlyc(0{in&>yQfA
zt*M#m+oCiy7ddvsIe)cg3yIKZ_r9l?nOG3uQ+?bgZOfhsPzl+Bl`4mG#%;OB;a)3l
zH3pAW+vS_yE8V`VERIFaa9^*+F30#1?b78B;0M;Bf>Wao!XuoL$SrNw8kZkaL(0g;
zire_^?Ls}GuYT{9TYmf<(*aP%=kL@U#e_3-B-A!}BvF!3!}oFK<1akSljjq_N;Ifs
zN!_5NkK4Tc=MdIQm36fc7lxB6=yG!z^|*mHjtjLGA^qE3lPZCZzBO8=s1gmn59kjh
zV5Y>`?L^{2xIxxv?Wq^YMAuTZ^1C?6^mqBpd2jMcP75gD&VdP|5fEE?^L2gl5Op=R
z&P7TG*hiiPv}=qhLeCahwTB$TS3Qq1!6&9fq(CKV*JYg7lcdf9vTH~VRR>-=JL{8K
zR=hdTmtX0k@+}%Kr#)L#$csYgVIX*4<pyIBobqC~f~X4hhG^F8hGW9RmkQ9$2HZ`q
zy(L-;g6oOLQBm(?!L^i#pSs%*XzT_!$|2hh{3qKQi<`P%>d;_`oea9dl!5L5JQwsp
zkbxuta}Q;fy#P!Ikned6`#CuH^sO`kX3iiE_?C&5S}rX6UtSf5dQUQH70c<44^8^D
z`j2Wkx&&lSRQS|_{?LshUKc>ix6f1n2V1X2=5rO06(MjNw=|+(ri7hG$Di}nb$haS
z!zOKlp=~Nj4$Lb>A|n=q#PBO^ZA!*gqkf=o?`R~qY^p-QyrL%Bb`hC)-v;ijvUM%(
zN=(t&O&s{fC+Gr8SBIpaWyr6A5CFBc4xkx8_sN}QR|Fb^Xn&2M%%z$-Kf)BD(Ieis
zO~^JXW~)c}UkEW<FLTkwQB?c^#=bg$L|kLxs(N;Lw5Y(lv3QVj>*Xr^ch7GsD9VS4
z?(GUYP4gk9p@s#X`Ld_SXTf(^4-FEu8$s3z?x*8)pohaRveh*52wy!5WP-w(3O?&o
zKd^Bjv^Zc+78&}$H<4bj0^y})j~-2bhUB2*ivRZQ1_L6I&w1qs1|>h)7&>Qc@xvcj
z23VSA5CRl?O2v1*R=`*RD7Xpv^k<9s>^kfSHx3Geykr)1d4MyGSNrIcvaPYrF&*sM
z@{7?co_G7vFDF3itH9Gr={cYS8Dpq&m(Y_+0L_$-V`;!%xj-8f36ONso`AcLG8%N)
zE2h03$Pa-G%_*qQN<=if<B|aD2foV-gp|(_b^v6Oon<jxNMsi6BR>~yHHd)F&pY@)
zAg~-WG)g33S!d$~TzR)9cS>Om?p*d2Jq!uvV*i~j(uc)8G@GR9W83kivaO!S)|q#A
zJL)O_hw+j9aEvr|Pyt`0dW*xY6%;s0&5~gQz<77<+KYN~mXB6Jt-pFan!_U>kZ0}q
zfNX_uAmbSmr_>*CMM7B5<DtgD@%QR{s6X&bUs7L}xvrvtsB_i+kiD?k96H49MZO4v
z&UZ{qtla%T*Sv|3N358j1C1}u_yP4&rmIH#8xU&rSB_`kcvpTSYkip8_$z#|`m6&&
zLA@>{0Fz=F7@@$_GUT~-Yr_i%1x|-sTFGd@C-GN2=Ayk$Z8E%Ly`Z@_`+x@y{N4>m
zpQVE{Q#w*8o3#!u*sB(&IvhS<ut<osQ=#sw4a)+|wV}%L0qrJyhMjjIV-FI11LJpp
zC>&6skeVDf=ya)CV`DwS6fisv5Ir3W-Zo2nm$L7U8Ws%!3?jVDdjSA9ut@rf0}S$a
z#Z<d{`Se$+GQflzIG!^kFb6cv%R>rc>R^aOa!AzYGf-0JG68@<A5l2{NlhGU%RR)B
z3o9|h(Li3v^oe+HPme!%1IIV@2FYRfLGugZ5Snj;7?iEH#I$Rl32OfE3)5ixjYFDw
zW4C~{nVIatyE}k8>N;hDAkO)1)-uaH&Cfd64ScLwkg__YpDo1*>t*N@LR!V1aJ0m2
zpr}#(<{>I(iUHSC7CB5zE<%4fP}D3AdS$0n#u{nwO1&A<Q1l!F2dPoNe(*LwUw*?0
zx(l<M+Lo44EN@PSlG#CC#n<`tT59bwhMut%YO~<05D*Zd?YVN@<-<K|EyK%NC((Tr
ze|@TH>JpC}b8*QIb%*<rx(_tzzP>V-ezZTbMCh6CQ_|YZ*Bg(qLc=`Ai6Dy*3fR8v
zyYUw6Si(2ckgN<apkdgRV6FExG2r3)cdxS1mc<~-_VxoNfn0;YIG54;4Y4|xeRNwd
zZ$7$>K0TFH_(-pdc5P|@HiA`h=^SP4H!mE%FW4XjCgqdStnN_tE(+w#EAErLX}ZF`
z>OO;|s|MiPVoDTVU#(p|)E(z*j;^KOLCDpt;y;OeTXpA6TI7I&E5RIhi7_I>LBUzJ
z|2izb4|oFlH*^ji!bqhgu;&^gJEiMNKqG=^Q*eTA;L1=DzYuXHkoUi)Aqh6P0;eSj
zaT^RMyA#R`s#3SHzQJaLr)YSQ`(6Z5$_C}H#UrPN8Uax7!GUID+xw;e2L&-BeM)AT
zLuQbS2bXWD@Zo;I?GcqbF3oEHeWy~t?^Ffu6cJCjs}N1EI2v*UXd{<+i;Fg!gH+7y
z|7QIE!5cc(U$hIy1I#ly+!W?lY5x`r%v-$L4!Bcp&;=B#C}90B{pg<n>y^Sc&4|R0
z`dbso0R;ub4W)B4Zv+yeR0NCu*3SO9rHUEeo27RAEEx`Se~S%fY>V-l>uELpSK<Fy
z8Lu4i*hph+ncj&Ug2!Vf`e{)K-m#w|bB5*eKOd;|$76lqde$Mq6e2y~@6XEES+u^`
zVVfkNkR{UU)rJ^3VGk}X820)0T91H{xp|$~)W3p>0UUrJTS%JxT25tusaURQM+G)>
zVA3lGqKnD1xi6CFK9|f|aEyai8R9jpz@k{Ob%TY=%8iw~boGq>FfSrizX}fIIjn|~
z1ReIJHIHoYhAHKll$-@#xlW7;%xF2h!vy*?%b0)2d(U{U+_*248QpErhmAeNp97<z
z_gw6gGL`$+J)$G4$N^Q-)Tuar@v?ecYQna}oPtm^;HNe=SuHs@`EAlr@mpBnb7x<K
z#1150j_z5l4w00?NAU)$Xo*?&H_6e4SE{iP{8dz1I_Mzg<z7VghetY|Mi;C>d8-I&
zL!2WY4nB6PH3M-|DsUl{OgWwV{e?Y4f`9L}-zzsOgUa&gOKK!O9i)>WApWB*g+4)o
zNAztN8nBELc>MVB=hNu-2=xp|21>0gxXjB&O0A34^SSZBFpO~U5ZmyKS3Sg-p9&%#
z#DV1T&C@uxP{Ix>erFQ195KM}u~9{Y)}u8Mti3}+uRsL??(>XO6bDqQ@wVZ^YHD-n
z7eG09?aE7oTouj<z?n5Ll0ID)MS(A(EX$44S_0eSC^I5k3m`a`?F(oj{Q-4BYbPmX
zWYoJGRSGC)ZLj6VorFjf^jT-5nkL;mo|oN$+6XNJKoE2kRFfBR8Uhmqh@W)hhy*+%
zU*Or~?a3y$7fWRa5q13h&spTD6fbEMEXwBf8uhNAgY)Dp7$Bg)zpXe>tVI_bFN5l8
zbjSH75Pm>Sqoa-vt$VpZMp7?x7BDjtmG4>ARfBtY`}X}?=pBsXo_EW@=me`){@MRg
zT>zHwy4;FZRVyD1my$5J06$#kn2rx^x%&RB;8Esc#f-0cG1#A=tAT<W{33#AZElqj
z{-7QhIl--l37Qw=OD>pxs5)J{cO(h~>Eh4QTRj)rwn3RYrShRoIb2IU3zq4Bv;c%y
zFcwiA6m&Vdi6{hcQQJu)+k@`{Y20dR!%c`J0ILeV{i5wlFrab<1vtsb;ncywf!uPk
zC#O=j)v>lFgi6c@tl1OCE^~QC;ZNI0+>6~sR_)PL4SoXg=_}Xp84B7z%8<NxZ!&Kh
z#{qH2`9rp<`>&v(`U20WEBd7`Az!EKXLfZpm5|f2luc$T{xN#90W5aMVr6c1O>V|W
z+iPW0fRRY4hK>_>Ytw?@g+=WqU}Ef>o&sZ!;)^1<%Bb{u2^|IE3GekF{oOU2PlGt-
ze|$u}dh99YW-~Z|+v|U(;?4m!_zFx2WQvKk*Ac)%o;w%v859IWF@s@%006lO?Hm~T
z&P+HI6nG#SA@)+Il@U3Rs1PzANHPo*LK4BoB8`u``<^m7K;JI&=|`=^;JJoHLFBWH
z)<&l5?2WLPfI1pFvVkxIhJXCO`C}i(yGe1wPyaN^2&2xSS5voLfQ@kSAc+RW<kq!%
zey|1D|J!);;7yq>a32WGKb^d&?2(2Ibkk?ZLr_ox2{h}_XW;`8tgZW?w&~p~WGLki
znOgr8$Z6m?e8F{{0wf(!d1$D;{~vXQh~|u+CFmZLW2r{YTXS5nuF*Pti24M(hInZ=
zC>|gR6f}IKSPmfS-cwfhh5VSBk%6gK`&&(t&;NPvzV=J#y+M;9O*>Nuc2}m4z~n*4
z@%BjeB2r|*Sq0Rk$XLZ3IE+9O1D_1EJt&Y%Vry+K{cc2B?7m%h(y}A;&H;JK1{}D6
zG5kD1&q_&*i$VwAJu;$!SQY1g&LWdh96B9dt?9jsAkV#sZFy04&z2Zbxu%#435iJQ
zbAKj#u|unY#2WaE0nZa6UHH-fM{cjZR=>~=60<-Cr@#$@%FPMHC^$0ZcX;3*Kt!je
z7vTa+hRpF~r~9G2R!2Qk_7-?xjU%HT#4gJqSq(BbfJgo2w(87W51*NtNBNXWxtfSJ
z4dPM$>DUE;!3{ROBz6O$<!Fh@Cve0NvBs#m9Z|qR*(gLyEa#QNkH+|aYgOTvf|bvZ
zeL-x(z;*gXd{nbzKdgv$5t4(P2C+tXQRE_McCzwME&(p{0>BSWr>j<X+sa?Pxa|vY
z8Sww->O+F{_K#+1n_XR9FG1sgWvoU4x^e~r9_2Htt4{Gp$UEUi(@_PJz#h63GgT8P
z+hk&n(Nl$>b_FI1OKoV>Z3!T03gsVA3I`yZn(se+I*JoF#=-8_Rp_AB4*@N~tQL3w
zPnj$HH;F*c0}7>~9sH!wE)dP;Uk6zaW*8u3qq8Z<#0q;yp24Fa7`)mBr4L>y@CIHx
z90VN-BBY@f7@JFY%&xmDA^_3KY}UEGa<ST=p|g#HP8gAbwBDu01Z814sn-7jTbB>C
zz{Xu0;NQduebE2|SoDJn0;Mqt6$sV?LFzNekKrb;-K_X?2#YM}pG2H@n)$IF$Yc=M
z*`gl+D*}RjxZ^`uxYXJZyfSuBG^9YCt39oWaib=VVS4sY0<VXh94^p^y28gn1Cf>A
zd>0Nj406HT0W&+@)=E}pl|Tx&`^iz`oN#ZCha9j6L1zTVwa>#;1}>zx$7W`{13jTM
zj)3SV028+e4i@ghKoHYT)k_dVU`|URy4-1%_MOsgBA<ijxV9I+b=u#W24nou_}Ft8
zhf=hXQyOICOTmHud?U)7zV)1=1$zqmS<}FepGHA04L4ECRzO7GiP6v#4{u;WZ$--k
z#{i;tL+!NoZLfXWTrfz=uimULR}HF;m`-X1Q)SvHj{(ih!Zae=fRr`x?TZyhHr^k=
z6W}S{tRJFs5X2vew9Q=s@3Ve}f4XK8HC6a8IWG1uwQkyNWB@}Zv7&SuM?!ECL2%pA
zOd9LR9m^2%d}oDp5vb3=hTjo=OeN?>si_mzZ)pmuyYN-n4Gkc`0Ff(*3fXd#fi(|>
z`$eXGOi>?{>XTC8i{icLrk2Z2E!>FJ;~RH9w;fH1R6WCG5pwj;Z90d)H8Zt)`8VfY
ztMXy`$p9rtpLz`ivhKiySFURq1`6z(iZ$dZhwHiWgV*qH+-MeGK+r#sr<ZeFxAva2
zNEIX$d>dBt1j9npBxAcW<Tseq0KCzl%mV5t%ufaP*goBqw9-BC`i3MSXaJ$I-gC}U
z=Ppu95d+pZ>5dmIYQ=-fakK}NmsE!hY48RcC$1R8+qCO&eB{*dP+i=TX<wTKtsRp5
z?K&3}j1l>O2>|@rTjh%OmdOcTE1;C7jhCE(Zf+Rkw?q^Dk3@4R=MX%!D<iI6h=B%>
z2@F#OjpE%*!NCu{IWP)}_!4+wypHUjER-ts1!TGG1Ca~KIoJay;6wE%(mybgsss*w
z(72pQCQF!#Le8}ESqBlCBw&l=TY?&EL#c%@X=;_361&ggUJ3=e9`fO944dC=Xx2R-
zHczX#eZ`PDJ@aP(FBFx+YT*1sHb<d=kA;E1I$--6Kuv`7YWZ~V9d!d-d4<~FE4S3{
zJ?rg8@EXWp^?{c%|M3E#Vm-z%yy6PU0v(xm4F-R*pkU1L=71i^hTyRHVRhSTm{Q0C
z099@0PA%wDw&J~;Wr#2&TKQ4=11AVID1DHN!p*;tpl1aE@`y{oS_gk;cz|)aNmL=5
zKzFyBB+}Y}xhde$O|YNnH)ZbwE-?J6&wdlywHKSkc<Faw*5isvzZr}sB2!`@1wJ2i
zT6r<L%b2p*Pp6jG8?+g-J=6n@#~s~dN%zs}UGb_}m!0gT7V$F`kla5@-58iE08;*1
zJ-=($!$C&I6ylI|AgE*qX^5#U<GrjDU6Rp;pZmzUiugkheQTgKzH~)@Xipug3$O!M
zMGbh7!MLi6=z^*yI|MHY1Mano#Ju~~IVd{QriBe`WQ%s%=dn_<9)Dnxz^PV`z#c23
zPyz71&D+4xK)^@1k3f4&H1P&sen4a}k`i;56Ea-z_iRdOX{D7yVPJm%(f^p+jPlGS
zcJ0W>9Y$JK=lzW+`5y-I;*47}%(eGSimH)pF=E?;J11GsU<hKd>>;u4g1(iO-Qqg{
zs-R<p+hd{H^{R?A#mR_B{Xn->j2<68BnU6qY5H@h0G;a><#M*aT?=D<pKVu49{_1a
zTITM>+0SPx{10~+Qwn9{KsiYgbq|5c3oY~QB|NhKs0-CkkNsOfy_?!gcEL?u9%(u!
zbqboZK|xLYn>XvrwIe2A+?p$1>Y0=1-K2hOZ5^|vvh*UM<nB2pSA3(9$k!&_K5h3a
zCqU_n@L~rF0>ll)8Vo6CpF&QH`%2=y9UUkj>sa;5Nk?mby=+al9%48@HwEc&8jRic
z{mEV{2zC^FcDXtdll*9>Zs5;=lw%);gCZO53{ysJNj>v_lh<vJ&n-6nh>PWCMgvlu
z!Bukm8dO6FT;nnoDI>a@5VKN?VCF9i=^j@NO?3p&**qGW{ARd>9_;VXha&R<^sQB{
zr)UUj(JRCFyy0a9Y}KtKj^!u$qV71dSg&~AII-Qdcxy~8u1e5hw;&tqlRF!KgU{5W
zR8u?#OkNN~6e5A77h@*s1Kyl|)5Heo3PZID(HhkZItjfNR~%_EUJs)uKq-}0R0tEk
z*2?^G$g<_jZL(|l^dx-+mU7Ve+-}`kH^O_mEWos{>-;>3vvwGCg~k!_Gmy^T;KF>0
z{~6caV@za<l6816HgD7nG-kG%`G;f6gHB8=9|>nua47g%=4#4L$6g!b3(_jDe0<1`
zf<8=sAbDV56>_s}L9@0qz!=_3g4kaz4}o!Q3E~Fv?*gz&Qwe87U)(e^1=r3Ns1#Ye
z=w6+l#*>E1U1>nfdVC^=0)%fFySQAtKLCv{Sj%BBCcLN|xX8eexPNwXUEs_V(7x>%
zLtZPu5Q1qO5S&2YvS0BZ+w{j_EC<CO%a5N}(rmnZ8>yltlyIgZhC>h3#mgUi(<f(g
zgvuPs$%)@iaH%Ytl5|u%ufqt^MSvs)BmCq5KS67SfR-7juh-H}d;1<NR!q5hP!!0-
zh|#`WK!%jBL-#m(QV-2m6Ab=8Dz$tf{tyOi;QXi;yNH12W*jD40P+y>FiTL50J#{G
z&qD!z420W+hr;aGj{aP>7dH`qn;48@fb2v)vbidAPP%^peGS9eevn9hL)nr?MsD}3
z?uk1=kH_VE)31E;1h9{A^%*2RBD{F;%Xsx_1}b2)0|#Lu4zL|MK+yzYM^ez}5QP+K
z(d5W+0D5i^I07MAGy(O_?=-T;&<L31s-a}U6s?Am#<bOKr9?LEDoRLnHu+=RR>KuR
zz#qV@)ru3efZUF=KW90R$Av()1uze=88H$$yI`i&jI8xcgX|B97wIe@xgygJ-jWRD
zm<|x_zQMt=FjI%%c>wP|ph5}R?YuZ#>~8{3-v3h-U}jf^?g&{+5X0`d<WN4FWv_GU
zCI_U;$i4}j0>Cn8GvYdrd_-P=#sJ$zLPGk&e#NqV#bwhJkQvO%ljPC`pT15NvKy?q
z$ntY6ccU@u=QBi1nBmYqi{xB^i)R)fz1@S4k_%1tht34p%-zc!ab`CVbuz#QOF<#y
zi|JiJT|Q9x;FutNb^?D~(32O)9CWz20;HRf5i9Z@K}S+>U@C)=?HSGq7PK~yaA!5S
zokAdly{hb)8B@$3KlTDst=o|#v{u)j#eXEk(5kE^xA;SrnU$hZjeb*LJ|3o2LZi}m
zF2lu(KL>n8lds&Q!oBk_l@#w*hDS~OWJ^}o9_BO*VSbF?d5#<eTF5vCQ1qOSXL5|o
z!3vUY{mnO2j|uTHVaItP^YfH7^!iUgR*rg5$^`@uR9=AYbzp4*ZfNdcq|Ph1rUng2
zR6j6j&Qp}WNUn9=r3UhbQ)L+orrW<K72a|q=PQNS4A#wSMl3HT@7iziUVd|qyiIP`
zZo6T~7N?oh`pYR$PI#b;F(@f;UM}hD>q9sQWL6I*N#Lm6>zSNJK^dnJTL8L_2l2bU
z+mIMIz>SQ0cv<96uG)TJii}9^k9J@7WYw)uz~utoVf+0Z5d=6-Oqe1)EN~{@6*QSH
z*$wvhzsO!1UhBgA0@4x;m`s?pIHq~EHR=Qq(3lZI!TB@q&)#Olp#LFQ;OWt;J`d0f
z$cOKu5G@Yw6Ld{7I7(n?NbBSVU<rJJSH#DXUQd+s$pk&%3E+`f%9VceB^|dw?6^SA
zO$~mw#bP|PsbY7SCjIod1sf=w@oC~$?pXNo!tecJUS8nky$sTXufJjg_};)So!{%#
zc0V2(Z4ADs(3Th_hxfoJnA)||U3a;zJ%l$a3J$(B{ktoa4!|Ht9(8MgtrLlNP@H_W
z6yw6Zl-i0hVnyZbV8Uw^i6-KK8>&zBdfzNJ>ev4n1+B!Hd!sqHFD1cz%trOWtF7lK
z^P>-#syf4X4Nu|a5peJD`8T^|F7bY9dlg4`(RxF%$~Wu_GUow^<0)|mPiawFvE>|#
zuZlvzH$65$AZD^M(~94<!n{9+txF9Ud8s#nJ_qL_fPa>3o}x#C3@<pC-%*f2fw6c`
z_Mzn0j(=DiT0FRyfsUbXG?)s^mgcA1XDSv=E<%<Lv?igi5B09Q3K)#5yOCV&Q(MK}
z;kqgm4_X)*U7sfK4NLX=b4OA{9X$3P0$`=yc!=|7`atiWO5FidY^9U|`6>!oPyS}l
zRStj6pi#ND!dq*E|Lg0I&~$FI=pBeNXB_|6ltIpAc=D3M*Y6`$aQ^1K6_$I^upEAX
zGXtq2=&6xi<LrME@n*G}Bpp1(MQIsP!2%hPn*VF`quV2jrUM9mwrqIm4Y+9ke$`BI
zFR;ua(@Yr-9e>RSbd4KGsj`T=?LT=<Q+q@i$=!2eQBd|uZ}Bp4?mT*nZ0ttvMuREI
zPHA8OD5hew$Yh2K08gESOkW|g7x;efI6Kt#EYHm$%sE(Y)i`>=X9-5qNf?7X*31K@
z4(!Ndh|Cv2b8@^}{j2qn`Tw~6;e9T(xY4?IeH8C#U+sBsJ?|LzKURKp6k@P#QGK*s
z5u%$X2aZ2h&4Mm7lVy2#cXX(oP!9(!Xx#rH;0yLWrn>iGG7{#3njr1+auDPbK&lfI
z26CG!Ku5f{yUU-n#ytvRP5Z3F%>E5WbbtwnSH0Sm;0L?YA4`9DyTzprcrz(xC)ZD#
zjLagvMIF{M!~_phbZ@sb%YU_+SOV2;Ghv)NRXFTQU<ip25F^c76^&$QZh*?&4_hAX
zT72^9HF3u<Nc~`z{LPYV)Llj0N=o+5i4$t9RUH0_{v0ha68sv71u!>SyY%2>dgN}8
zXmh&L-#5+IO-7v&sp12J01=29K&r8mVhSpT3O<!6ez4P+GMN-FI5PEK!yvXlj@_Ax
zq_22$E_GgQcC0z}=3l(pL;;@6uZ5u{I>OE~XLMf$*8ax!CmoGvIG}EbdG-V)Cqj7{
z`<-gW!PANi3}pZOe-ZBPE2qeN6Oxk8!23p!m##cnF+`lvUIvdp0$?gLeDJ1a`3~Yy
z*M{Bn%Jo_?{9=NDV!$BCt7$;z0>UDi+Ub`iytxG*5c3|EjJ|!-j&6X>4(_S1iz~c`
z2FZ}nz5;t~D_SeA&B%XKMMViIohL>UM8G}cfz;NMJLv1*)Ren=I_QD0o1jHQz6Yn|
z#O&^hSVLc+`ac>mlG^0uFG1UZ%p8Kewg#ea3)kO60t=^0)lSOy7wc#DU1v*Gg@m-U
z3RhRs-wZhM-m&~;@k7m0GCo^Tidb60J0<f<3e!sgou529g@Kuwy$*`KZc!goQoK`)
z@7>3Jcn_E9I@6U@^x@-Su}=i<6%>y(-&l<u<{TW2k8jy0Z6<X5qDdz7>fel>$eVqD
z@&Z40e37Soiw;VBV8jR1V(TuC;a_5ws}c>0ijrzi@tgb=edFKL7#b4a+uwT<V~LAW
z$RKI~){*ZDiB(cfEP0|=SAi?a3+yvx&ko)Ug|g-3*ldSQelHKID_L1FnB2TG=&HOo
zSm~6wn>i$gA;zZX6G|f%r%h%)Fv>Y&Z1?OLrs1UNmtRu&G`0DCMf4eiuH05;L|r@7
zU@JErpX4K5p*wmVTSWNaLEfE^&DrUXw-Sm`xzu*)=_{BW>y(VEedx9K3~V;Hq#P`+
zVq?El49RDEMi!FDj|X2~i#&VfNt<DJ)vBB6rCO=2g3R<Oc5lhIV+);~vNDY(k6O=G
zc)Z)*UYd7L`(<Ve$M4l;Vl*-*0ip;}L@^2V&V}rOg-<2(c+a@Z#bJmA-oOx`_VHq|
z-p;l*>;4lSVcCOvSPLQ5-MB5L>bQu|ubKR1Wvv&eFZck*t95OzqH;y&_`T2ijVJQ)
z@hq)fPWy58WPY>E{5P@RE9nuQ^bBtr$0p_4-rc?W^H90t0yk$$$|405lKR#C=x{2&
zf9$2T-EM-#Scf+_BnWw)Cwh1(SGN-WkkY&Z@W%mOpKa1l<6ayM`l(k~;3W*Z`3huy
z&p2s)`1M$dP|T9o&U#o@R~PNk_XL8h-N$Z6d*?3)lY$AJ(`d%+dr~P0{8L%)w9!JN
zxR@qiXc=X^aRqU*TQ19?62-)&>KToi+isGOM32qotJ>Jc&<W5hI<(d67^_!5CB_a?
zusx9!G!~UmuX1=0v%RX&(b&{pw=5(BgF=^?vs}loy#^iWJSt`880(&hxtZWhG7B?X
zvklp$p5uaxeli(l;jjHt!k8Kw7$nm=Uw#8;S!nhWrLeR5`3x0ii_jN}4aYA7oRLE*
z%c$QSdrtap+;c1f7VxR+1t#-S7}YaKzW<4a8mY;7-h9jR&fSDiA<RaY7?3mUlH3c%
z_R-AomrNB0A;DPzeQojisIt!SS!|hr?wiqQ(cMU(J0G5<gAft^;O1@Go<zs>gx2j?
zO8RO$|Ds1f_UUIEW0TPapMa>oDjrPs6+4M@Y+CvF`Rj$!$>rg%F-`esZu0V=&Fxe3
z*0h7P;^*4kY|RP*P0Pqf)8A{)Wnd^QizSEcSW<HAT9IsKHd5cH6XIBFAtTdBH#Jfb
z44aod`YETi<YoLDU#>5cuWy=iQ441`Y?3`t-{0gQXU1u0zMCx5ypDIS5klae#y$p(
zn7hBy`}(bheR3X#GxISw09pI9X*n6j7Lsjj;7B)<Q}ABcBxRM-^+3xtHa6&<vxQ@N
zB_Uowg3s&@hPPCj&3e~G64EHc9~D2ySFTDud*+vEaeSEh(R83|_s7oE@EZAiXhdzY
zjKMwTopdVchCOBx><T=J()u4i2^f`<8i9$oIgxY;SUP5R*j^^P`Sc9?(K@4Utw+#S
zYaE0Kyo5njQlPxls$TwTW3*)!6YKTHe)|}h#>Uh;4YR`3x!YUK=bihWmyf-*t7Q0e
z@xm?b>U^hD1GuS)HEYHz5br=sp&X8dFTJlcw`i&Ux+O~D;ERjPG<R?o8+o&y+W1#*
zt7Cu5!1(BE1G6i`hjj!eRaIwjonDVW*f#GJRVAL$U++q;6n?r9B61G*CCT<VGiz(P
zxw4k4=hx|^GPcCT`7DO4?3PmUiG4lg6yLlAARV;BT<J=nM3j}e`?|a!7*j{W;Kip<
zrT0=ck4bjY9e1v9J#5dES5<7we>Wp?EqBCQx+^AcRpec$M`h~V*IJ#&1=g^w{PO90
zTjluT%{H~KzFTDeT4*z>Iqm4A_^zKTW-p~3Y~n?~eRt565OUZ}9(UrM{k{1c3D;Ce
zVgg-NE<Lj7lYZR+C;MwF2O)+A>;QbL>QtF!>4y2v)z{j~^VDa*kD5XTj%D@l?CbV@
zT_B$7lvKQIO*wfuzfep;KC?u>5Vbwg*lOiE-l(YPeTNzYIY~d~9U#4jLY%w|DTJl&
zG~L|5=KS7|^MK={%ph=2-uVW^GR@><0y2bo2knCL>5}b|_TFvsS9vb%AklPG)c>{s
zZ&Yq3>Ei7XK1auG_#{7;OB!$8Ay+Tm>v$mQ@$&E@fy|&<&PZT`1`f)hL~mi`_^o?S
z?&wvbMuQ8T>V;N?k7?X19T?|aDpsm5IEWON+iFA?SxQOK!D_yxwny3Q4ACD|JxW_!
zrFmwp<-);TO@K*7i;j+6QS;mzrdk6Z@E4?1LdqCt=T2W43564jBUQcCU&SM{MW>aV
zG((CV8pyT(8V7~sY<=bQwbdFz2aSF{nL!S{a<Jvnps2+7f4ty8kuxv4oD}C`4EN^Y
zy*+-^uH*gSqmXCW<=)N3-m}E{@7v*g)rIQ1@B4dy{J6Z!LR|;3JXp$8$9udcdQ7NR
zzlmfxC+wF<%7i@{s!_dmRLv-1`sDcM4z;wi^s5$8D3G^m6P^_4B=aot)(`TLo3@?M
zhT9}=_tsh8Cl5J#s*)Mn@PI+nEA722Ij3iGa8QEb)q+>M$DKQ?!UXHbTRWCWK8IfG
zdSvu);p4`kvMhP^62qL99rwe~E38*F9TF0>*9}SHOVY0h@^(%Y0`wp}-vK|xP<L1#
z5NZ>CYkkas9<}M+mY`l9O&@(P`kWx_o<_ewSlKt}w?wE9x@ua&SUT{=m6eCW4ZqC!
zIN9y68Dtnya~8FWe0DO2G%#3})+CLZn|t<z|Jo2I_cP^EIJ%1?6cW9v@f0y8@`Jjy
zuW=Y(bQ`}!O&)!99qe*_J?{?n>k_$g$2J}uTSCd~y4RRgC~bvy@$U32xG6AE9Jzax
zgwWL9j>&l*A^j4z^Fn<>HRq5_&vbsZyALo9m=Vj6+s0?+8ILMCFcQ~8`{6XDT7h3a
zKIatb2dp_LP~Vr<D~KHYm(QZ?XV@BFK1i(Ie6_g0@gU%)^ZG<a3l|cMfOej0)s!y}
zpTFvUm$FzhI5^(vv+89O-(4~3JAv>^i%_LrPO07XZtFUTk1xeX4ax0IPGqn!3~t}M
z9@Url6a_1Au0HCt%vq!8?n3Ty;H#JD9i0(!D>P?<W$6aqSN`6<{k`CeD@K!thE3o1
zQQ6j>ld*|DE4rAE7}&fE;|a7yrl39tbK-VrPrPF|FEWj54-aWz5T2X#f?g~K_@#GJ
z72DO<x9u_CxSGznN-nr2#SuF+iI6{U)BT`V<Hn;^Qf@jBzWW1G>6Oj%+yY6uO-_t+
z-&RKIeP67@s$L)@5Akhy7E6-o^+MLWt?U>9K~TX^iS54SBc+p9-*3TI^ZlKBsm3q%
zSsp*9as5As%_=ZO#XRLcSh-8m6#GMXGcM;~b6G0z3`8y~GYzKR-^2+c>=M}_a#;WQ
z2!^ljca{t~z5M?2N{W&5D1_0K2(0sB>3mirw0B-whvX6g9MW<1;OWmz?$e>s!l~dG
zb*)U-YrCoCSuM<|q<3D>ouH`htxAN^wKmNwTQ!U35-}yaR{)BT#6+I2zo@0D>B2V0
znp0cs-Nv~p){Rt&JGog`q;=Kktjxk6dq_;iRtBJL?rNw@-{iF#G1#f;Xn$^cTjG7F
zN|vPj69GUEv6fQqu<{09-d<!FR8`r<t|qG#Y<tJX9LV+4Twd(vL(iHXY{7ck=>uck
z>XAiihv+Knf&zPpNrvxnne9-Khp{U{WaN%MJsN)0X`ftWbT<zpu?8!#+_bLM^i|`>
zvNx40nmMFOM9fw*fv)23(pPwX=eYH9^{$fsULlu`;*t_atzDXB2^iV_UnQ+V;+0Cy
zbID&;S0`M8B!9JWNJ$2shs6cBOt*#6WeNzaGjtJvQG`I9THf%r@1+hm7zwE9jumHm
zDx6NysKuVa!6~I*t&1I7XRt@cSM`TEwEQfiPdbDg56)D%H3gPvT!pus7#@*a0}Jth
zT-N=oEQbtl;<dh0=jCAlSs(hcx!~fW^q|>@C-6fA+<CgIC2r=Jodp-oxn^BgdEK`*
z%P(OI0)~u83TZ0%5q_XWHy5dJQR&2k6kJJUmNZn9%x`)LP_WkLL{P!5o7)Zq=%4Ev
zSrlECE&3~nBi<5AZ|0zhD_Mz(y3NgX8na030;G+2TJAP|8IE&j)pP%Ob(!9W*J9wZ
zvcWGn<9yoo;=Wcp4lW%TE%I4F9iBC-|Gi0{4!$Q<N_V%mmRZ=h7tya$98)?pEtlSK
z)GPH~0Y?-Z2bop2M5O>`+Z(R*@Z1hV#+~*AC`j0@2|jJ%i|o4u7q*vv%{#<W-WXn@
zbQmr!|GiIe(EJ)6Jlas=_oUUi37b3HqWxXR==Q42yWP|jI%9otiC#YC4m`=o>%slh
zc47+g1(QLYBeQbnY;l+9=eW5G$F99LygMKfIr{N4(9ai$c;&YyT^4tA!diT6_P_Dm
zzb{<3`o0~o6j?w>0;;1k&B&~d(xCWrc$XbA#cP%1(N}tUE2g<8FHC^PAmr0a^NDQC
zFqcqLyvf4*9T!QWKSL!t(F;8nM5%s#4iGrf9{4M^l)1k@2bjyqWx~yQ|JA%5W?c=5
zLnFNjK)m_`yg_C4`!8R8X9X6OR*?4|`G@{q@0BAz2mZ?av8gP3CXPHX6~qvdUa-76
z_tuE`!ljD=5N-w!U^e%W{Bh2*1fS@2YT`8FFwaWD>FJ9I9EOB#vwDKw>G8f@+Y6F7
z0*$`S0YLHU9zNu%V<C*`y0HcpB^1@$W+;9)9<?=ZQ<Q_ls2=VX!6~<>wa!;047uUj
z@6^GhtMa||b5N?e7@UQn{d(H3W~&-O2#F(bUDalL0B>rV?218?_Nz5)5>lJFg}4s0
z;#;v?WX~mDzhg0-dGXM;ShfQ*K-R#)<{G<p)hq8hqU@u6GC+i>ODomvt-QN;v<_<e
zE8NM3gxzhI8lC{yyz02?ap#rNoLWb5X{i&gc_J4XCUg%>tY0QF#Gqi8!5TeM5{1~b
z7^*^tZiU}|<*Ij+lDNLIaj7>%QO(m~(pO<2bu?rgX-g|2NJ9wS<sA&2yOvgN?9nBb
z&{c<(xfq@1$$|9lKN@lZlmiW=NKg6893-+TDw?8)g6^zJNyvTu?B$(nosvQ!-KX&V
zUiSsb?*<$a?|;sJ0<gAs5TNhtK+=;v_)6=UleAdwFEgH}?^dM5_4xrG0Iv1}&ky|Y
z`RSr!=CFite`qU^CX|TxJWL^8ST<tk;aSZG81X6+)6n<fl^HhmM;k_MDiT-@M@(Dm
z6hWCSKjBYM&!JM%izp$X*BhmarH`a>d5+sfP*eKPLmn0LusC9c7XM4H7zV%%7>+O8
z)z!lhgd?U$K<($L&kse@Xke?{dF@k|bccxNJ-@j==`xqE|6hCW9Te5mv<<J4qo5#?
z1r*6alqgw5K_urSK|o0&Npcb-DJFuF77$62lVk-2B_kk6R1jD|Kyrq+&!WF@Klk%h
zeP4ZlzEzgB%bqi5rl+T;`|7Lb1UsKUGw7KOmV3T?N}R{I4F7EMN%*^<n3ed_l8WEU
z+56OV`FuorZbw8!%CCPPi-w>*)Kl|IPjwSA3oX{9&@vmluzE>o2=DzjuOQZi#0LzI
zW&OxI&?Kw-NwaA*NX>spz8~Sxg<SzjC#j@5j8R-_RZ0nQ@ZrIy?nsCZ-dJeTSsbtc
zZA=XUF@%+3%Q2}i-ghbLNLYJo=^T}wTG^rynciA$*R9fx)whoIQpHyM^%)(mlI^m(
z+N;DwLX-8q@(<P1n#@M`*e+kYGFytq5f2Hv6q$S&Km#~jOAP`vr>%0~n}4_f-A_Cj
z#s<1w9qn$_BbHQ7oVfN-im2z#v#(+p&s)yUQ|8lEJ1fsg2#Mlxp$*Wkw-EbW^jnzm
zI7{Q)*Z<@{+^HZ`v_XXMMAVTRb2XW^_m%ATm(SemC-5Q?525AZ<lqQ--&@tf6eZ6x
ziA&Sq5?v;YmvCxQ_qr9n^*?+v9ENnI?gjJq6Q}Dqh-javbqYqhX65dN1_qknQ@CgW
zf#F)-Lt}Z_CcPI&n5E3UmK-h{-C%ca7Yq{lI}WQn6j@JRGg&E@Vps0vMIpCELo6Or
z$d^^Mh8Q;zntUp<EXME@v;|KajEI8bgu^0nbL%%ktVf@|)g(^7s>tYP*<)rXz4?&&
zc~L79V+IGNwworWc&*~4rut{fv(M0IixVMcCmLhG_THmt3J%OOj^J0Zx7m1AQ1vM7
zC7Y!UbW(t{K_HSB)(|1f!<I)hE@Y!r^(QRuN4qf0D}8+AANbG=X~QrCi69taS$Hu9
z1}bMvT(qt<1+x*-?!f4w0aA+=KwsoS$In{gC2FM0+ShFMihHt6Q#HGB^fH<{gqYsm
z^5gD(A!X<-mtN*qMJZ=TfX4{;H3*cE!jSHX^2zIT`s@vSo_kVh>h;J)NqeEL^;tHv
zVOV;djyRkJPXOXUdSVB=s2rga)QzIIt*mTv(j}*#`4rd$EfMHMmR=$~Du<6x<%0C6
zq5mx6K99X2y&}6_2vl@gYo6(?C6cS@WqBgT@f!B)Yi#%WAt3&Dvk8#H(AMLbS~*wB
zVXr}hs0;UGh6TU49R8XAY*<WoeNlPcxr0{IaKG)9+|~3iMKp{oxHD@3XD}rOysV9?
z@4zYW%}mJYbGZJJhe9=ZuUGN>>}7xqkvMlPw?eh0^jupTFKoE#8U_xowE3ge!L4Tq
zr`k=6HiR1c6w<n2zfzdb9n|S-U<w12!~RoM<#3bE`Zd+8{Qb}N@k|m<bb#?~mtGrA
zuiYbo<88tyKdVC^ny#B%I<affwo8VZo143QWthZtp90MPdq6F>s~yVP8`~r(sE*>L
zYus4K7Le!pEh|phzHGJi%5|fh`ZW?EJ)xm!(^vOMrSM;%as1(=A2auX0A{YV%r~T6
zg<*h-8#DK2vjxcl-fo0A3r<33>U5KZs`-KxI@?T37!VI^0NYzyo51<l2ZLaBWC8nw
zZG7fV9aNgh&NH(PShZ|74Qy{4d?5p=h=Rkl<VdsTQL`n^R(%)%vPzr5@1xhQLvRZ)
zeYs}tmegdDdgG$pZ;d_bVp_NAaMxD;Y3k_Am%(5*DxU&9JeK!`Cqe_;9}AtpH8!;r
zAQAVvfhMZljEJ$AE=n5AtHVny74w*3@ZM=0sG>XGlz^s>bb4w1Y+C#;Ip_|?r{ub}
zsjWKidJaakkIY>moHqQ)iGdS*De0w2z|(lNeg8T*?<HkrhcG(<d;dmPPsVU~vgj;+
zql7#x0$W|_BFfD63<j75p-RINM+CUm7twA(A68OQLqI8Vo(LjK1b%|1L&H=qPK;-y
zic9-!(L9;t2>~EN^(M-y!!W!qN!L|BuR_nD@o9!13%f8SKp~N2@uA?JsEdII4H#=v
zrXVF^l>v@}qdW9YVR&wO)i8ts9QY(zC;l0w2rm(og3j!ezjK|wQh?b{iZ%5woh^Io
zb59xpBLQi+GRR3qY^OScz`!S17=x$7mf^HNoTo)a`BUbfRCB%yer5(s-2c2%wMR4a
zpD6D~N<g%b+(xdB?HU7Y{**Vpj)dn$nMsb;ctwE<$<9d9-PxzuDe)$g^4&Ql9<{VY
z{JyaxFy}sll&?kMO=YG05IO@kOuOl2MFcl~<DRhayx4Cg+rCOkMP+L9A?PriO@z?5
z)g{UFt9&EA-g%{x%ss#l$hUvHttam+KC;(Sngjq*4e{-4Y&Aoh1*&6%<WdU|A9wDS
zx1+&Qb#RF4@m?X0Q%Wv75c2~D9t1m}u%n8svaRjZXkDzShQULp$C}^9_!Lb{0(uwt
z(A(}GA%CJWPzN};|HJhmD2RNzHk-E>Q%nCKO^fSswZ#!{965-(Bf`3fIC!fFP;kg+
zKzv62r``U~1H`&V#M%?8IP7NUndWC`@jQLm{a)@qAG!bAva(?Yp4HHg4A`UvvsB7w
z%?zvQ`lcK``=%fk&COX60Z~4rVwgNO@c<Sff_aIP*gpdxbE*%HoYUA3eJvfScYt;t
zilcE6EDU>Nx=0a~e4*hz1{Xm201T(lFTgUAq;^S=kP~n+jEi{J6e(U}xuXE+S7Tc9
znY(L05#+wUPx|6U;TE7LfX*ZS@DL{laEq}&0r1jutMu!g2i@^!0jK@GmdIM2?fc+a
zPYq(h^fxbZ*urjiH*%%v(`ZL(K_->gXL45aoo7sViRt$FGyvfkBMA|z@N0rgo6d|#
z*dicni#rT)7g(qW8h(@19TPl2P)>R_liHkP{CqW|n}x-R>G0u($9vZ7U>D4%i_Qa~
zgmTiqJC^#tVyE?jfK8GEJdq&kaU39>w@~2Bc=qi#g1YZw$nh+Z&zA+gMv#+QWaZ`4
zzS<h?PjG`7U={W~e&^2eV;@PHW9*F<F1KIaUg+tmhF1(Q0G1sd9<B(X6#b!q?|OA+
zhOvF0L~E#Bp6lkzkIg(dcBW$tn6jeodq+>@oi(a)YZxm#Zy3dIidZ{9{*W6XQxhlX
zECqhy;^O!jn{)6Yhn)O<^Rm|i15pS@a@K<amMXezjSW<oj!ueJ!tE8Dfr|^tyg=x}
zC(fJoQ>*JsGo|rJD6&lRnPr)%9$ppE%G6O{XCd1+ysWdl7nGTF{ygJyNA$B8i#HLZ
zNWTFVF#7aSPVF)kWTAq+^i20aX)SL|eS6oS#1XBOGioeZBTq$)2M-5S$KUkGP6#mC
z>x*r9Fg#gxrxz|c>#w)yY!HO7LA;A#>yx>hU|P~9eVW``VRNIPmsVbR4oD_UimZj^
zG5@56?|Dh;%1Kvj2a^l=ep^#o*}k6anP~Lv!ick{XXy*>IyE9%t$yWB1;CDjBXq;d
zv>~vAnd$29KeZD&Qng?3$-0fG5=_JQh0SsjfS8DD&ad2%z@o#~R>b6Gr)F3bHM>Q=
z3n7R;#7|>S&Y~C_6ot+f<2}ZA*}3ih<Z`fBndecL8qPFy!Nq<>&?Lwjd3_f54DIRd
zwE(<7&ob1jH+@dBKMh@6GPim-EhU8#(nDb4h`0BBw=P_2KAfWAnsonsphJ6gdg>g&
zwg^6Nb&Uyil0P2>SsXwy4N69P?uqGDuRwYst7<)B4Y5d<QChzN-EBBkjxwzHc$_4`
z+nrxx<F*Oa7EzzxZ$D5`f%F8G=V9X-HynrsFG_BiRNwuYlOzUug+%K^C8xTi;Fvd>
zi{+>7ZTSGRJ}JPV;Zh5mIU%En{wW4tcxB))MIU4q;u$1te&T)~Re$=*e6x8q)dx_m
zAP`A*wysrFA4q-PV>UYpetnT(q0;6B=>oj4m;9r@d@SG8lrQipkFX#t@J0y9whWgX
z&cy<j{kUx5(Jw~`PpWqg%RZt$9*qFF+eb>VKK;>8y-D+CZ+CpGJ_+5l-xm53{Feor
zp&#UlafWg~x10>Qo0~>1#HXiH*enIij>xXB+Ty^12Wv8ahj}*&lVH>xHq=HW-oPC7
zFMzmHbyq;ZIS|S=8h_~h27xuob$j!jGSDZgy2+6M9#UjhEpzibo?PPqICoheAkZR*
zQ2;rebc&YE(h6V8^3)&BMbD}X(uboVSPAzPZGz-lrD<8Xl=TC2)vu;xcE9)+0tECT
z3n-M`$cw;@o5d<?g3nHG73Gb7q@Htz<3Yf5nk{{8Y-AtGzZ;4;aYjF=u7+O|@FMrW
z5$FJ4idnz@Ds~+G0;OvNu%*h~{3@BF)Acj=KVbHVkfp;hrMVTb^~ZfwLy6wTa2yU|
z4fb0PMz=KAat`<cv;kNG3PaH}`JM(9`OH;v-#|AI-d*2jB)Qu0B&EOG8Z0pa?q_;8
zxNGSS@_M+_CMoJJP@t_5)ZA;?;auwr*Lc8&BZaK@DXzR}-?IHK!bPg+E5X^LIL391
z_ib0VBxzh-2agB4UkPkGe@~i}&&@);P9IzKuenLhCa*CAmmr`<*E0pqPvnq?^%yUt
z%;QFh$y#%~uiSo|F8vBVUJyBkdK2}l38=a#)U8rF5Tbv^ITYf##8E_0=X`<W6}7L{
z+9{0h%SezuPzoQ8$XP?8p!Lkhm)<oc7^P1A!8HIZklnIOIJncRv0#emdLp`e{h3f}
z>gk+&AMj%M3~|ncQNcQ64H5G)dlT_`(1H>C-MxVC^>r=(6}gq>z<@0$UKM-~S_1YY
zxFZ^nq}G=TV4ecN!vMsbGQ`E;$rit<7nKVW+Xv@P<NpBGh0{O4dK;;I2aL_YPish0
zZh7U{-Y`vI`-Tyim*C2pY+w7by{$6oyO_AI<F2PMm0lyQy_)+xKneZ)<3x^*<NKcr
zHS$$lqXX`-r~gb5uZPHs2#u`w^CdWtdXzhnx6|~YCDlj6eNNF*i^2b)`wPhM(>=IU
zqUydbaD7jz_{Z~-vR&HQKYlKyOO5`?`Xmy8OwZGpH)^;nK}24J00k=qnK>RA7fnSg
zLs|^Bk#Obadz;Up;07-9eMu^B_9!|r2%Lwm>f5MaI||wWy$qD;av?y$NwDb%0GW0v
zO6d91Pjs^D+tbUiDgXmlG1NezU{)#E9Yhq}n;?{8eENCY3}V}jrHPyZRY(j<^I+;(
zQwyDz$%|LJJIZgINY@Ak7!DvI0k00%XsEvdXzHj6+A(hKQ<Xx4G+8%f++Y#Oupc?v
z-tnaDd@LXlKL?g`KDq4%p5E#==$u}d0C8K*I^IpJ;vO`R%~%M~(bKwhClWGZ_eR`(
z0L1pVkBV7G&t~l*KqjR2A{y!v1u9;7UeQ}Eq65h5;xY+c)6gG9=frFwAvY2P!WI<2
zIW?fQHv9Ywy=+so5fQCXzb$!XC{bZ5wag*d51aX>WQ8JYaEAeDP?@~i-H~RQh2DOA
zmNYoPmt1_D`6JL2T)8o**+JjlnFqiVIt^QD8@W@-rB0QH&-sq}Kr&FU^{X;Q-~A7~
z?Dq#=o+~898wMgAvXLbp5}$nk;;2Zmp=|l>MWv@@XKSSl%jVy|#Nf)tV4gmWk2=CE
z?)g#Dd!_$}fpP5}GRUb4#Kv7p6O_2uA<%tnij9Yr4&I58I>#*S3mM8&q-6Nwr}7pV
z%s{wDCnt(u+PB>>T;hu)Vsbo7U<}DLoBrbTKse8m<ku1{+kjOV#Bu-&K7yUdhB;jW
z_>l274#&&Yb#EBL@Q~N^K(XGL0dOdA03dthvFceqVYoeC^n>v*N@JmmU6S#^sB=uu
zD4lGER`%_s_2Rqh^EEcxm~WT6s(n!cg5t86LpDS4`AA-FKhj|7sz&FkBf`me@05ZT
z3aXh^0{hbW-Xt&&JVb;G0l9ie0EfaM5=g%N@{8gV{uXO!2|pG%tW!!9!nEcV?%VS_
zrvY7ASL)ooOxsw09WY^7mmdm`WvGKggkYwE;wg%<*7k!m)UmQ-Gs6=FqPDm&dQv!f
zDFDJQaD(chi&tT)b_%}SDvbl%59rmKyVJxF(m8>(2Y?PiriPgS%lKa)O+(q(N-yb4
zck#wFJn<oCPx5wU3%m&=J^4QoTBG~_8$9bPO~8v_RX^gUjZH*QNMH!z3S`=mGYfB@
zW+MT=S#I(e!f8;bX)JRX#e05%5YFV1hYa}+cqRx4i}^?tG5E!3h1>F)N*vqku@|DY
zhrqp5kay#ycEJli4IX*neji&sD?to#CAfhIOTbL?tivd$9N-CYNutaqQWp29B_DLh
z2IjqaNs3HFof$nq;*TFc5B}E4aj}V=SpNLBL8tx_`5}M6BQIY1z``w|s7KwqA!+^p
z7S?W+PK&wll*(n7{s6z>z#tky9$16R*vaAzD+x9N635Z&fECMQXn%wTUd!nI-WR0!
zo%sa$I^|xRun!-&pFg9K6&V>Epp)|<pTHNvaE*p0;?8?fO8Ml?s&^jxQd)B<E!a^e
zQ^5L}(`!nXKF1&C%U`H~zapS<JXAYJ<i*ujqhDUh+);XQJBh{Y>Fu5Ov?)`G>CT<n
z+BI_ZkrlwdvH&H7ECS&Z&Ciw8E&$IUYyCp{AvslE=e`VJFC6FJr3K-Ald5NiP>a1G
zw0pl5lGdcq6$BG#cx9PFnyV8*bZlIKyV)&zo%vRw=NvmisDacFFj~xEb;{Ob(sXhP
zg<P2-xB*&R5J(&{7)m`Bg&AdYT>k@dX8%a(!$a*NbKi3D{~2<QzDWi%dd+XAe?$LI
zP-}mMa`pC4TgaSA;9^e9Gcm>!>K>`Moi{n+EZIA1AiF;8%!ur^&s8ZP(+Wu)MhG+6
zx2LCcF1QZ3n8+*7n>lxIbS?{Bk?pJd117eU5|cZfzSn=qi&)$W^Xg1MlR#_dWm#E4
zpd%Qs-L=G5JXrIza)EiDmK0bA@I%n!td#di`8Y5qyzT+87~*!zRyq}pKJlC1P?OWp
zFZ!3gMnF4r2pm#N3?-v$j=HQJ3%mEI7NX@sX!wMc%^BA|Us$r{0D7}WBnbrZ|8=MC
zXy>g$bdIA<si7owvs(mSVqoCIN3wYTL>zH&f{Pd*v=MVpCzC6-*>mO0_7A<9i4_+v
z<;cxTlk{$RMCn4-MjU}>oXbcPj%nL*Rzjlj%zt94me)H!znba2u(kG!*0iov-?(Y(
z)!sB!Z~WtDjpxeO_Me%{U+OI781!-#d||Nd7ia4jQeMW@vm<xf@{#O6kk>!i3uiU0
zxf;VyrDe7IUR|q~+MV!p<?xyRi8}rv@esVK?OO7{NcH&0TNDHC^-4=$3NSl4vf%LL
z4$8Cr|L)~M)=f-c)F8U1mSeX|Q>C{hC6{4D>EkzK8vfwBj{*+i8IQ`yPQ7&@b+(@w
z4$g86(YR5?&lg>}E^j#a47uU@f4$+Gw|$ZKd0j~r-ZFgwx%4loDqpKoa&w7GRf1Vq
z-uwO&BmTqCV_*nY>duK+D$QzRZ&1pm{n9+*e2>%tW){I?3vc`rZ$~M6b)EOtjMGo}
z-c<LVifi@<gBOhQP2qiX_pQ><6ViC_qRQE)OYB!86$fhNQU1uWAYeY7r}$T|d?oFs
znU31NQ!u;@xePW3gC{jPT^SY8?gWr)K1auk6dW@W5{Ct9WEDBLooFokXQC3NHIu~u
zOiXM&E%oXqj(J|%I)kpmX-ff%d?w^HwR&*od^7-F-v-W-=9tx()ivMbXZCSm%pn6>
z)6v3s>v^4xn6E+YtESy+N#X<*ewU?tKCTJ6n;Hy|OW%nMNJu$}A>Vg9Ts*}m>*ZCI
zXxk`IM)o&r$HBkzb9R|QdzfbrC-4T`y(?&a-%ao50=1yPJV|VsyL_N-7~Z04AwcSM
zp2`KVbmLJ=4q|cVX<Jzl0Kjn>8%U%7!HdMFm<*|0yVSmVM#<OX=vho*EIQ%<RYsxc
z9^ivS{s+L<@zVNJTY@(j|91dmg3ETndj%lHl^YWymAu}UQq-;k<b&8YaId>Gt<W!j
z<Yf+JsP4;sPWS*>+i#p?Z-06yFZL~Sq22;|hOk8hcDw;lLYS+-iIZhf2N<!#^5Xyi
zHH2izq`&hx2<F#+DP*E~SH9qeAs3ttcyT*H(w!(}oV@|kND!ntf$ITeuliAhGc?q5
z3Sf=vfNX(HKw#16sO0cwPX2ruB=zR`5h24u>MbroUUll`r^3iVL7*=dPf6Kt8Fl$O
zX-X(O0Hz~&wZG`8@eyuI6FV5DH-lw8eZ0FJS0m{p$sxGWE3u@m^|5VCX=p-%tEA5;
zC^#X8ldagN7y-Y9D}JpWc?S>)@c-v_ys$9;-K7<NAZQZzv9bv%_cv|S{>)<pDx*c$
z6K%*#HxlN{w3@zQ07CwG&e@I@-N&$vgAE2a%=Qkc@(dnIJdqrNxUjeA%aFAb6uL<%
z<-28fCz(Fu59)fiX%}G;9$>EA*%_xhR)KDT5Pj#_#Md^*$0h)N+uH#rM-b>qut$At
zftRCKd-Z({`3DZWRegE^&o&<q1+=;bfSG_K69}A8gn9sbXgIF%0mYgB84U~++!G{A
zzp?S)1N0w}!Ro5%#no(2{RhvlMBEeJ9Ur^#oyq!yB9hzrO+a%%rQGUE%}e?4eFBb-
zHYB1wD*6OXLML&EW^dyd3}0bu;wp^LX=Q`+yU_nef8@hU1V*9U*ahU#pf3nH66vf{
z^mjnuQ2ynPw%-7n1}Ay^nyerU86iLWrq!c$a#GYd5c(?2*^cKo5rF>!<Wf+bEJPty
z9}8f2M%a^((f{ZjSa5fmD`n(=!}iiz*1BS=yeB-7jQZ{!_MJ<?X7fAA_k7m&J#hhw
zXV{!O1tHjN$dN;UOoMx<lLb}n6NIIvYD>K<w(dZ>RJ+F#Xqlbm0Y?IgAzWT+>ZnIv
zv%=sC6#6y@KizV1Pl{p4fnz&>cpUW=Qmyb27_x0ie!wjLc})TZ{vbj<Hr!T!lLVu+
z0CF!df-b5%(U#c_hncmT00k0LBnd0y-c_c1NDJ9B)bmtSNJbb)tOYOtt(w=D;Ceu;
z3*B~O+L!tMJF}Shi2{H4e*=4Q{il7tYD@I^Z4y`b5sqcFT>`%nbn7j|-7Kq2yoBsN
z`bf6cX^Dr6JNesqMu#zR<veIKz+^~{6YA&WWX*^m0B!;b)_)_(io-$(^e$Ve$b;-E
z*wo8c4MG8sGHR&|0J;Pv&@CRL>Ho=j4uiNJS?EA9egtvU&)JGN0YRp;AhzJ`&L`{j
zQN|>^2)GP5AnkK~kkDJmhd?w{sVF-|PZ17bsyalG2<wB9Aq-?jyzRYb1aCkPM5q#g
z;C`(3WTZT14)hL1*(OoDe{NBawi<PsqMf;##pFVWAD+T!xG&Jm6}#;oht$T=J;vjd
z4}irOvDUSJ8Cc#x0YOl#;yRO1sdBS%w}hQt9u&Hw0+06jSGAnp`cYe85dnY)pmV)2
zuwK*HRX!|5&ngW54eX)(SLw^1hlW5lZyb?qnJSP2!B0)MF@zYQHBO8ftP-5%6ZpP&
z@TC;Ai%>?MB?2uBWNLG3i~VQX0;9H(20rSI=Nvx3D`B4J0lv`av5HB^INfyE*Dll+
zc<=B-%FK;Yo9%&BLjhqs^Vl1JmlCSp^v@(1dzg3=K~*%esLGI|8z7cST^7!>{f#ib
z%dR6JAy&TU<08(8DBPLcH0y+lq{PVq7LO(-TzrLaPxi9%ayFnA$;QpJ3;^VdDK;ho
z1z8245W&%bFW3?Pv*QmJK<f)U5VWMZN!6)tEX8IpyO$n}Wk9Bsq+}l;6*8CmPj&6~
z_4h!c%wHieujFTvjTabnb`pMInVUiS6|xVw*S~swSIkp@93<rAv2m-{P|r&yJYyHT
zRE*G;wL$vKU1|H_S`v%ECX#)8f8=zYHt?q(I`#i^8|5I@9&J6QD5gkQcwF%)5@m$1
ziFy8{0^SvnlH$|3&49z_%83!Szw!=(yyLxB(z?EBui66o*$6%Z#AZ(0*B<|J2jsr9
z(?*8^_4cy<RITpWA|T9#Krp-b^Q*HN;dR~3t<poVDbKqI*)4B9Fakc#b5alOoL;0#
z1U8F9E`&%O>(h=Zk1bX(M*a_(?m@_mY*R`t^Uq1`OII%NiXH!D5$MnzLv<|R5DF3^
zh-N`Z(iRg9+Q6DNc5x66CB+A-V^<mE6$CYo6QY;JPZ0C@ygJj~)L|=p7(=CCS|=R3
z_8fL!o!t5UCJk8{CQ1v|64bZ1DQO5lJUaR*w+U$~w``wrjl)niLNEp{&Bg7V)#_|T
z*$mbH!H^A|=^l0_L&07i&p1<kce>*^k+?hyDGF$oafCuLLnATOG`>F!?E0VC>BJ<8
zxfd$Rmfutk#|TA7s{%zV6$&E0@3i*X0v(acC9(m?36BC~<24>shUnyEI%1eNdm(J7
zeE6WP**9xEwow?o`)oA2nA@i`4(ER9QMuRe9^)paRHOVY&RiooJTZ}TOWl#TArf9b
zpN=+M>b})#T2eh&nb~^_p)SFef%p{Way&Y(4UPaJ2^opt-AKG)s8xfR6dY2p3Iv%3
z-G4~5ZSrq4aZmVktAbx16sQ3fHgp=OWrEw~>K3f`Snf3*mSKj#7VwAgUkgiK)N#*C
z2x0D!_!Dwm^#vNr9o?TTc0;lKfx5Y7OH-dH#qo;O6+zu{pk5Q^lgnn*k@K5WpW}1{
zK&rk#zJ_CKEmyy!Bf&$t&|F(FUtSrT-@68HK)q9a0A$V<@i-6iX6fp#KQ?K0!xCVR
zh1BEYhOj}J4Q%7})W?u7sQ8jxTp>m);;2%1xsx_IIcii7`hV6dza0#V|BZ!U=8EIW
zz6QK>d$}DC;>$g$T(;Izr6Avkq#a-nuFUNNC+PRg0Br=gEo{$jJs6%~pt*O_(&nrh
zLj5#0Q_s4h4{>xQl?#G2dak%o@9tQF`K>=P1xE@q;SI+wxGL2pgh3*M-FtJX_lF*&
zO%Qtp)YhlWV~rDZYa>Drfkf)dcfki<l%^p0g(uo-izAxr8DzlBT>^iJDR&f0;|?G2
zRD<$T#~x?KK1OhXEhd-A`3eMAG_mpF!~prIz_ufwy-C7l<4x!6Yks_8;NgO%y;ynC
zqx>}w*H~GZ1lUnn_Nq@3!d}HQhI$CA4i5-Fb%-hpLTx}*8h+Mf*Gcnu@b7#q?JwZ`
z`qRgAW+j;UxC>O;n7a=gdRi3AX9%1d?B4Mk4pYiih-dWdE(QNyV{m_mh-J+TO(>2Y
zzh7;_gK^FPA5;wEF!=+i1_8G&wZp#u8Bgo^Qo9cZt%7m)7*PP&sNg2{c$Hk~i2j4>
z#cO0;)LBzGCsK|=QX&_f3l6;nH|gT?ZQ3*Da<8wb7D5$Juo$NDg~U~Uqm`%qhOBK&
zQl56KvwT4GKNF@E7u)e<xkRfIYWqLi@r#Zpi2J;I>8=YKJVJ;By-%HkB-ODtMr#J!
zf6!mId#d;0APr{V0F%G<l(o)dEIaMq%5QaHK_B1|aCAyridyZ<Uz$L*6a)feN+EY|
z^uf9TSQP=&U}=F49V?r55x*K1|J7Eu8~`hz1YUH`K7Z~U*x?Q?+438+*B}K$aVkzq
ztYUNHS4x_0=4q@#BJ2q$$bo7l^=)w9_X^O4Re2V*3JuG)H|>K#Kw)U11l^}*KYufb
zI53s6S)b7=UzyGG#z{VpOeqr<^5b0Toc7al{2zoxKvZ&iS$zlWfKB+Vp4l%IC@{8t
zj_-g=&&A}zgF*_q04%+|)FbvRR`=V`rgHtQh>$=&abe2G>P{b<+p)<}^2cZX8{L#r
zXL1Orm7vu|0QZ6~_zQ4&1l>$wJ5y<w4B#CYezS>=x|92EEHFbMz@cM-vMaM>pKS?U
zCthF&z#;c<fp_Tk^Xjp+!iz5^eoP`6PUN&{By-(d8-|oe#g(XOB`39aYy1a_Ie3E}
zO4R;h#=6>+8o<k5A|T}G);3zMH2u&^C#!3u5dvl%>aECt%K7nQs~ptz0M|98%Lb*#
zk7+Fp^2Pg{MdW-hTK<?duRn-e;Kv(&JOKAZhM^$f{ik9M=qAqnhX@}4s+hdIyqXHW
z&^oKDsUd7r9+NF0aFe}wF(ZDN9|)&8PMvB$rsMP=G92OO!vd?U^n_wF3#blw<I6?^
z)rYXYXd!W`reQ$-wg`MX6NHB;0QA>9OPAMUm4K|9#cf9s!U5Bx?||3>g#>co(7;Lp
z1}`Nbe-{HCz-pfOP955jJX>ieA2OYPKw*=UwLVmK)RoHl9)&#q6QC&SC`JOr0QGB-
zzC%Mj-q@?tu(hMm@Uj%cvh;djN5XHQlQIGC4wFK-R>yP!seME8V<pqhP(zX)hW6S^
zB?iV1Soer#ekia5S^yM^AvJ{%{TcN%DCg=}SkFk|;)cNKv<NOO3f_c^xN*6?7EoW~
zuu*M2pv;J)qpTcZlMH|X%Q^3}5Y8c#At)@Pj<(G@r@Sw83|_zqX=?d-=0LLeCo1n1
zA>N%X1gd%ghy-xZtDY0IXMnm35tKsDkDK+v!EyoM`F^LTAQn+Ig$lv0xj;JO-nOGa
zTV41!hG<M+i)XAmr>42ggn%EH^-ls4ZaxxtgY_{GqOYZOU0>L1__gorcTF{czqKxd
z#$Zz8e<ObSTl>|>Kp>a$fIr>(r2QyM4(thJH2+3c<r}>``7teplLjcp2x~~CAA<Y?
zB(4zJm8|%FC?qn@0MdZKwm{#3{262z>&t!^r>+eYxt`g<X=o!awT{~(KVTSAxzxy{
ze_8o-E1y_fqK=e^g&i0Of~4ao)VZ|f9A$h~pa{Y6WKf}>fq|h)8LuAHRHTfPT15S&
z7N@yN@s&#PiEl_iA%~S$e<`QLWVGhr1s#CY36&g!s!`C8??8P9!2053?<`?NXd^g*
zl50zrThgabyCdYOI;IUWNPDN2{A7CK{!?&zu|?n^)gNRWG9|Kr;KijRg4Vw_sUm`K
z5s1(Y(gF<h!ly}`NzOiug?b)PIsa`!zu$NVSi`lv;|(r<S-0P<Ab8r}3{Zr`iTfX%
zM~Gt%9{7JR{r@BZ($lr)%2M)Ddbtd!XMFR)=mDRV@ZYfQz_VL9A2fXAZR>gpvlMQ+
zGSbIK?`kwft+s8bt+#Q#Fyw?uu>2_ZFH{(vu5zPPFFSYp3%~2mR&Lvj_!p7YsEaQV
zHm^B2zJJqP|KP$%ap!+SmjCY!2pO1^6u%0+{aH0IFH0e;(JEM*<JsJ<?=T{I?1KAi
z_AReN<(46D3>|ioCWWJWUF{q+zt%ipq{OaKihsh?SU(N~OaMiee_`ndPA?FZ|9`$z
z+}Ay;hb~i#j-!{31OC^ZQ_CJmQKLi8pywn){A`6}`d^K9TsKWI(r$8;oLC?AR??nY
zj2@lE61>R||1$+*S&*vX-pmg;JZI~(IU8-LRZF>)6ZGG%M5o>op}0Njl~KwyILFtE
zSPV;we<~}Xla|)4T!Eny=M!1G>9oiaAeH@>l-v|^DJLzDg`ma#8JuwsYz{(g^cfEI
zt2;;Um+Xq?7Y`g;)jg?M;=SF^cF(j#)>@X^A*qDe@0UOsi(nyb8@Y|7dCvL+_MdZi
zooxRqg)^;NEcHE7$+N%8-?wa77w3K3t8x_fo1_h)9YAtb{lpXNNlrg06%oQPPSW0S
z7ucisOLjtV2#MuBjvnP7PmUS&zm`!v?cDL_Vf<>eJYU`>IbolL!Kfm&B<QYNi$@r~
zD1`<+3aIO-Jp4dM`AU;OWE(=znC9gwEz@k|?3Z|maG^p_yS$j5IXZ$zN5P4J4~WIJ
zI}W-NdYYs6CnL5i@^O1qE(W>e#L)xuX9Fo%;pNxzIq5*zZxlwl9XA1Q9c^dEUiz}e
z4=?c&{K)qHka}iMr%kD_*V>=)VbrtEsbvmyO`^=hv0IgV*Jxm#N>))-<jH%XH#M`7
zX(-eOiPKiPw4QGA_`z_nM}TS)vLIFj%akYO)w;z?#YJWy=He<NgUAZe78Y#22Vws|
zdKYEV>?BnY0L1+R`*x24J1nFz{4?2Z_D!ru7;44Q*!&=}7_bV0EiL%?O)kqywc;J_
zf4fymiQJU21l#i<<hfAuaIj%nUQgAs?R=H`jQ;1ruL5d#!`a+^hfsm*vHGhX3q9tj
zw|;fMUJOr!=FZZT<ddR)t?REz=huP;u)nU_8k%3lJS0+_Pf1aEu<x!}J3MPn^!Iof
zV7$+=-Acs#Mb9ewSa3r!tvI|g<akxzDCNNz%+SP@*35=zyS}lZnj<<sNr4XE#%ux|
z<~N%*HdHtV*hjS^$7b+%7IK__nn)`nNjL0H`+iY9`~1e2)Di>V-Y-6B=<W8VEh~T^
zI$tBE`%y}>43$fR@My?2g4PSmgv6!C_ixEAoIZ{>{PxC4!pZ=AWRYUaA|8f8VPpMu
zlZsbXki0~MN8u$%foH7L&OPM0hqr%$6UViU>#CTEnOog+YbGMeITLS(4?mrw>qlFO
z3cgNpb-nr`_d?@dU0ZeFs;=p`_LlrmQLTql$p)R-pV1g?oDln3Uh($2g!r%@@%g`M
z)dO^*@jvvE{TkI|-SJUu=f03-f858)anBY6ZR8~1f81k(>6`)Mo|9S3*R9=*War!8
zeR*rkvKJTQk7g{?Hc9i=v2d+3(^!4K+$GUdp4s)f=Xzi6t$WNo1SgNX?BCeswUpe9
zv`WWkri+gATne~d8#3|9?Rd(!3Eh(HbD7z;A7W;;H)x#CR@F%DyIm0`r>^}lm`}{n
zWALoz=0!|E6}$cZzJ29`R9!N)%+kAiS$Iz$j)-t_|LCi_tF}zm?8eLFXA`pgMFQ}o
zhO(_!HcjaS%!|ps?Sf+E5~CftWmm$6J$g45CQawGB^@RASu2}X=d8VVc`9NnpA@;9
z_$q*Ci`U(9l!CSwUQqZg9YW@U9N{c5kOV7PxDj&yo(GAuow&oJ*2c2-PmemC5x@6-
zzWUbCT^;M9(V568HCq?G_)Uh|D&=3ATbh~Y#d+TRdjFdA`JL*+&2G7uU+30s9Zrtd
zezUb9bjony+y2+MsGk|Gnf4mQtW(TZChywnW)>%v>0dGA`+MsOx(#QC=nzDX7;=T4
zM6o{C(e5Kgg-UjD>X6gaD(pq@Tg|R7#8{1Yi%=7r_<ra&T`(U?xijR~cW-7(IE4=}
ztT!C#7RQ{q*%@o1y1bN~%64#)dW3N>R4)5wUtPU#s<W+oNH+fDmhXAIeRpGzo~g(C
z7?C(EFPjo^22M|c(c#l^zB4Q{hCQNwb!9EH%N<Y8{=)2vRKK=WfLnfD=DWDmrrSB=
zzi%s_gc(A5ky)a#!))tlHoF?zIqm=5aGvl6-U5HnHG-FuIt}jbL`PMn>mxdHVaRUW
zm=$~Nt;$1>?=P^}n9>rP`Y5Ob$zkj{2la6u=-kJ_bNpUah5IyWL{ZzAJKW?v;hg0a
z$^G$g`u^K<cr!1wH#%&c@xI@>*177!ug`_ivA%G>$T(ucPbz3({^)CvG+i!val4k=
zS9a{$7Xq8!&m3)lqi}>oO082JIcKYo4M(MObDocq%+__plfZ!S7juj;&Dv&PL^1jc
z=Az`}p71g;(q+dF3s)^azLB3$E48Iunl<j)o6WEFm&^Si&DVOgY*)3#5ry)0qaJq@
z%D>)Pd)CJFt)IT1^2*mBJjcZy&4`n^FR11MwRTK(hwteSB-Cy*)y3A(NNIMX-;PD7
zwl%+iRj8)j$2C*4Ce70<Cm&BI)N!GH6f^=JY121z)iZq9W0P7Y13mcM@PY1X?nXXY
z^H#ZX5v=oY+~JyX6;XX1HZJ8CpIPYlJ61ic@;m&Zp9Q?FN#8Kl8KJWG+f65H+4p7_
z7pWUgJiCIZ8cf2*!~lue;L`ys20m|YF2((?^SH(^pP4t+zL~bqU8wUb{YIB3xk;Lz
zs8C;#Si5bqQn7EZP2NMt$j(sFm*e?@e(bmOSuuM}3+roIX-v+xXOj_)+<P9~5XXsZ
zKuAWvkQu@!d!-f~^K^6?){9ky$|4CJji3nXQe@fVnS3cV-wST4m)c@U+@Gt?F^)-#
zWjW?ob)@u?wcFi^tsMSe8}h|jt!lQxW~E+BCTVXf-&rz8{g6XZT<qQ4E)~@rDMWuL
z8D&mgamBfm9zBNi!OW`ZktSMmg|_8I^O4a4;chJ@W6xje6e?cJrtzfeyMwI{zdr(@
z=Is0;i!aK#x>lv9&h5Qt%HMt%C2K?bx${-yislioYMuS%=J-c*JoQNX3hD2@%<?Nt
ztvSY6Myz$b-ib^b#ha-!d_ji#b&Xe;vpi3~Hy7=-lR|5l7oU`z<X8MM%}##t)zqZv
zD*Ms$D$lh`SdC@H)RPYd8>Aik)QgzueJ^<_)Hmt;HmoP`9h{5H`)OJ?J74`w%uM-9
zXiw1Fj+0iY`dNa8Zkzj~Bg2h)ZleT@qc5sC(|u&sxp0qi9lof}NqCCNX0-G3%MuDW
z#V&M87thfsJ?pYf@aIS3EUZ^<S~Oi5de!M4{`AqS)3f4kOhc{=c1=f|ihV=-)};DJ
zo+l<gPkg?8yL~g+YhmZE;E}3gi7E-_^%1Z3imBzNQsG5ke=;rnWE|dJ-TxlFI-Kl2
zD|yCTlHO>&Zy=0i_gv(;6CdW*Ywq@TRP5H$j8FFo=WQ*T(9I`pu4bK~857#J+uWIV
z_vK_YUym&GTMo;xDAjG`brd_E?0bvFccS*`qP?`A>C1N<wF{C><MzoO!q@UG`$#V+
zCsL)gg?_hjj%sV`A0FF=#@2>?x1#*U!$RLsVfb7$ht{&J^R_(PnWSszF||{}es6Zq
z4^}H(eDAk4B$B^ry&a<}bu2$`Lhyur<EM0!oe}25DCb!Z?{5+O3)>xK<NaZ<U`z)M
z3fFagZ_KWbI;M{ZktELISCR}<Iqph#m@NB^ZkF!Pc;)St`fYdVj*nQ!knbeiCvp+l
zs&aWGv%at(<}{q&a>V;r&f!GCS8i;b@9bXQDVh3wzu_nbR~*IF^HOHL!*@0d^CM_u
zkom6Y$ge%+k!l}hcym;W-_l|(wTs^viW@U>w<*mDk*c%MSkwI0031$sKPov)@tSc>
z;QY4qMsH~7#=N@&=-I9WQ)pXTs7UqxcfGmjDwYXl{@3sMy(cR+cARO(+Q&2UY40W(
z{%kZpk{Gs7v%8_~<{K4tp=7^!XDA~%EL1sQ{)Yzt$o6JV(2q08M*U<i`J*N`)*Sbz
zy0`a|^6SjCzeacXKu^}}1bt?rAIRfXCQ`dN4p>JI-pa3bKzlh9R#h1|N=tBK*0xLQ
ze(fyH&%DtmsAL|J%K4?bcYk|*C!wh$ZvnqD(Z1Dhx8}&)wrj;mwt7JO3C&(Y7Xjm&
z0@YapXF7>oqW4eZqxA#kkvZsD6Yk=c^sB9+w>Q~;NMJ57P<<=9zixYUw11tnk`3Mu
zy>P*ok8iC-(mI3jRQAqB6I0Z88zGo+uMTw8_V?n&vEaQVX0M+s2Hx}UHSB%_-5s`H
zZ+x8AG&Yy)BlWQE4V}K&K=H&<^HkON5!I$~>%R4&_ntp6g&Sd2$)VEayRFj8i)SoE
z2ZoB<77ZUVMJTG~E4)vaSzp{Qca<8MsQXf0H&^?npMTx%v7}SpvAV7Fn)3U;vxfU8
z_of{sOTF;FMf<vWNz6`2uO&LxNqgSBn<-Pie7<I<j#<o;$9E;KiFItty3+^qu6uFD
zfN9iI|K!d??sl}-R_O!DseMMV%F-D@vP+8{``dj-RuiPxr>)IPbw^y#+bs*e0<3F!
zfrDc7x6gF?^!a(83`uLdyR67Ox;(oRY`S-6XZMKoB&oQ?RbEAO(Ddc|qNdl-$3Xl1
zU)U<42P-zrrcnFbyRqA*;hNmBf&H*lPfXkv8gX6tba$LFs!_ssVe@iO*Li-kjk4rA
zenfeWS@*ejtczdPs+izy8hiJY+sP`~&?rBWW8uP@+{KGK^WCv!DSM^sOi`h^xn;4Y
zD5r_#-D%SuIU~%gjWLnf@eIG^gT@t^#E-!uW*&HWEx&4R<nB`Rs%YuwD8Evlh}i|H
zniHxuMU<4WhlfqQ`(o2#L!9<OiQAZcF8I!fB!$8xd>~P-kqnquahEy{eU@74e7;dw
zReM}|udrzx(fnKak<zPc+v~gH-V1Y0Fo9e9JHw`4r+l|Wk|RM8n+$ZA#5;F?46DAM
zw0e&$3X$PWJ%-&MVRt<$n5}h+VX-Gl=QLf*|Ip#R^Jzm7o?W~2`4*1@Rh8M|{e}L@
zl(qT$9gXqx-aLB~j((CR)tyn$uerwVAgQUSp$clUQ4r+D-rO7EYiKV->!8PX9SZ3k
z_b}s&N2HfZ@BZj9s4k0HsQ3UKHHm!SO;NYvS4S)D-ITVNFTLoJU@+aZI7jb~2QxT)
z2_5uFy!FG8!-+CyIuD(@sCjrecReBWoy~H#UeP$&f}bcW>s~tnU#?W;oMy*+coqkK
z8Zwl+U(cuVXx~0$7#5Fz9UHP(c)x>5G@AjGZ*K$9(!p5O5A~ju`eNb8SffT<SJyt(
zE!O4+?f9*^ubC7S6qvkU@EhMrVjf)B+}n|;V?eC4j@ONq&jL(hrEa}tLkr&9yNh8>
zCJ_<4XT>*9O09gG9`<+H46mr$tj&KPbVfHdImD?}^F7jG)9t0Kjb>#pwvHpaTWpJ+
z5jkDFAx?#+jmR^!bMW$4p1Mm@cJR5RoroNJ9(--5$MFKCYJ#z}3kiY!Nfe4o`N~CE
zEwscP7hC12Fy};Mlx`{XezSE_45l78S1SYNKX&C(-$?fH6#P<jw(^6(!$iICx|L++
z>Y3!Z9DdVCU%JMzOO(t~zU;N*MbQEGJ=)hLe`)ZzexBD49mmBQmGzpbyBDf=uR=G*
z73aO}I%r*D>zLg3B0F-YbS0}~tRu6!!Di7ah(+=wd&j|=s%+lBgVUKH(`4zhJ(wqz
z^Rrl$f8Ogm-m)rMsPU>ZuJ{`<1-h#@J|w{G5xJnwvv!ttjBa<P!QdBLnoL5OH@@kP
z6Zq{u-st5|3<o>z_v>-K_8uHD2oHNc2@gwp7V?<7nB+Vt0D(*}Zl&86&Hni8;>Ooi
zOuE@hd3np;`(ahBJtHmo-%k`x(7!Jha1ERqeo53}#*>}27Ox}@GcsI#u|(@ELh4eJ
zx)zW(sM<CCAY)Kf$fNOt;65o$j6@+{=b@5V83IC=#<-ggWeECW@zXwPxSBaA@<X|S
zt7q{MW!K(m8jF3gHLklR0pw_QTydE{gDgwMH+$%I41>BQhsMDbw`e^FmM4e$rk+P!
zfG;%M6Y_V%u`i2WkevKxfY>7n3<@>^p*Bj)b*d}|1(W`ErCmZ06HDhI*gmaZuyuC1
zRX9&(3L?+TCUhCq2s(L)A%abD;eoW<U=4CjHe90v6Y?7W5PqH_8YeRhcApE;i`Kr2
zBu+oRbo8FQCet#!Rk2ZAxANhmCMO~e;lqsfPw~r&KQkO=lu>Ct+xg&9{Ns$XwZDGK
z4c%GMgGI7XMt6_cCOWrogcmj&d43*+q~;S3gfrF#L>f!HaK#7S&%HkPK!!l=STU(f
ze0;n*c}QVb%UG?nIL+wlLxQoGaxF$Kw2y;FOW|E)hwktjH?mtP;vi_~AELrU3U<>5
zJQTh>A+V*>)+K}Ogm~wiopVk9^oNRxQc>4=xdiVUf+nI>GHkq`PZ*jOKh5W9%mQ0D
zv}9oPbH%N^oEVv>2Qp37#fj1Eh~&*<0{G0iKa+(teAJ|+ui?@8QswmB{7id(UejhT
z+4bx%<Mkh|y?*U(krs;#hBP+`G}Iked{SG9F95xXOh=q6I^s>qlRO5y;L2(aHtwSW
zI3DVklA1XP<hiFJ1%;r~9^*#|C&Q3|YvWcXeudL!yKICm4Zb6ftL<8wy%s0b*m?`v
z3{yTCCxVPiixx)PctU8OtyA#G=j&9@wVhj84z$Mten6JUi}q}>$>&IuFrSSlEMAEn
zW>kR^)yX(Nqy<pO6BgLDa86y_;Jl*5fr8M&?N|jl1tNqA{nv%T#gjH{|M8TQ<+mQj
z9L1`r5VVM>Xj;1lC{Cu-6B+FTZNzpJv@w&LM%EvCME`e>TrHKk?I{0!yN=z>npY-C
zsonIt>YK|#O#go3Og(RIUwId|xmkr!%!i5gt4W1}%+joG+gVG}<Kq9(6Y?TU<=F@4
zSUPiGuQ&NNPLz(o<=y;^4?}B+Yv=zxJT1;>Hba9WHfixBF2`>Brc0~|<+)ndY3qUZ
zKV~IMO-|QausrBFyZD)FeD6KaMEJ&}UJhy=UGHRaxGBjH;BXe4(MFw@vMWVYvpTRQ
zK$!K;V?X3xJFcXi=@gW&Se_(TLC2E@koy;=-?5FDy(B_&Fq2(kPIp*@D?L_<Kd<Rn
z)yI5UBy@QS3sxXT%fw)>ZlrB|Gq$7Yx@h)RO*Jx|lh^SZ)GzqWc)xaE#!TIynh?;?
z-`!@O)QzbkH8(muYzgxjd1LBHC=c_+jM%2H!4ZYtg@&u!9*BOlzT?St8;=f-=$f8*
zJb@E?Q9yD+pos2b9;iIKJR0XZPu7rUS^`ZFW-VOLaQ4G8e{$3^HzW5nb|$|(3sUFd
zb9}#?(cbi-)WpS0;m3#T>pqIT3x09@d_i%f2Xb&w;=13}qVd{(#lpjt?OILc(T>`Z
z6CgMgilNz=pSKZcGZvd;mtNbOQn0iNlEIySBv@A3=1Ku;q}=rVjDbi@Oy5}PhiFkR
zSiT<iobA<>R2inm;obQOqf1<!Zq_D-hX>|+?emTM_d3#%tE$W1993?yEv)?Vz@aX*
znj`Hp&f|w+cWB>R5@BU}TT`QgdZy@tLb)z7iP5DFJo#>8_05-z^z@@ha_9?7ipWs~
zO~Ji$>%`pjh1COLaLH@;B9O+%rIMP`(yeug)+4d9SCeE!Xb&@@MC{LeroK5#rkbCe
zI>?{e&7Ioak~RqcfEb+jNHHT;F+=xax#>mtIoZ_U{F!z^&a9F<4hFcDpTJbdg(l{n
zk)Tohag)MBFqDVCoDA+NSe5#|v`!vdmyx-(OSa5HmLMXcaxkk`d)j$zb@%8Ol%=7U
zHx|5tyK1G$MH*CcyU%p0z?OhQp;{B`RdVfMGF8zy@HNkN%Ffb;IDi~J$I(9*CC~(~
z2R?5%6FZSx$sSzuWMYh=H5_~UPo)WtqSUSHhwNFg*Qt}2jT@1f<CTDIhTAT3DMl+2
z+i+vsGq{!zbPG0N6spr|qF_n%kUh3-8N)DVH4+dG3RR+ZbP6pDD+7hHp>-mkQ9z#O
zfBXs#e7=PJ98++IeCEo*pOKHs*pFhd&FT|}4!;q`K4(&oE|Qfy`v}F`QtZ<NnzlZm
zmo`vF$=E(Qa~+#PQ(_+yCtp@7=M4IfLJ3&k;hsXPAN-lkgHDHu-oF9N4GMMr+9@Y;
zx`StmJyLQaf1!kZXvndt>-iHAHF|WK8L?J-)z}f7)8kTn+<P)qfHu)r&`qzhU?6vA
zbJpCc;uwjA!NPGNKiIjUO*$U#>?oG2?U(XTNbvCTxmzto&epK%h-_JW#k8^e!e8(Z
zAza@oGFS6ZGcSVWK8G{h?CJN@+Q?+K?FVf~ek3#I3%0l4PTp~H;5*P)xJOg_4VAgW
z-(T6<+e8kQ8MMdsL{wz`K$$?WVah@3mgfmCUyVJ`PLP6=Ppn)?;9p<W9qjCn{B^ha
z(vP7EVM^@6hbOVur&G+a{ZXW=7kdjszaCfx_|d^&a;QS*=$~sH!kwoEY}0fJU5*ue
z`DEdmCLQAtW3}f>gGd;CDM6yop~ja^g2#C1qxDiG>^UlIh(5_Y&|)P1cIk__2aoa3
z2RC#m3vXh_oJlm*E-QhZT{WEc#Go~>=FpBgd_=q;<fC@eA+!N@PP91O=NU?pu#->C
znIJ*%<KWM%(Pd?a4G-Fri5VOqMz$9aQsW&%!+@3pt&oRHbg_+J57~0C$ICm3bn9&-
z)s+OCJa+77(wCnroZs#pXifm^W`|L$r?9^~n`lqO$pb41vgRx*rG7(+o%~lHzvz6s
zba4IA^0LDOV7#GCs+V`PHt+kQX%Bu0<SF+g7d?T!gZ=ewLEPJf*lu4{qw60aW&jTn
z`g-gc4Rr86R#tEC^$#e~zka=Lf$Vn^r6v;{riur*T-FIXvL#@Dc=*S`f;d!Gc9w{K
z*!$;3>6@YFpM;2Ao?@5cTNNevh2^mEfoN|(EgG5;12b=X2HOpXzzCMOQvrF2*dD$i
z(pTTT?=^W}rtcc|F_E9(VwFD^H)^fk_neIS>qiz<zL4un;6G!f`R$R$%~ghOmd?_r
z*n!-CMx)aq$oSWj2|s<Hxcd0d%?xr@s|=c_{#;D(>`AXPDDCg(GN{4umRidnn5b{d
z^vz{pRvNqKGMe`zXD?$#kHe85*+hEI43F{mC=cmLHu0=1E$U{tdMZqGblg1{&!L<t
z|C<NB!+)KG^Xg#9&lY%+#~m1!yoMRE>jMWD<HN=JV3Sd(Z*<vvo#Z7!*l}!gK-b>d
zVU?#KDqFe$XYOEjsqerIv<IydYy0UD3>+A@mNymDap$q(<$Frq`}Ys_Ivt0!u@AUz
zs6)!Nk0vjP!agEM{bfL}v&?yHKTe2xk!NCcL1s4nUFOmejEom{j!R7De~O{yuoIK3
zyL#UlJ&e7<fLE38J}Ub(qH>+L^vR?WaOSXj+-U&QhsHm+h`Ys@T()Lqi7IjAO?Y#1
zGPoEp(h?0W`17uv%d(!{eB=$M3e5wj3)EYunIvZ_llhNs7-Y>H`BCuq*QN=Ip6EaG
zm22U}?Rxt6WXj~c44BL9`D-$BHBLc8{C_ocI_KSer#Hv{`kuyt^o+=54!guU>7K*Q
z34gV$zIy*Qtg_!4YVdAN=Y`B~h4k0?NIYnmCH?2eNfR!6$8_313K{3+QB)IcMS&T>
zPW$!wuOq}g;1t8cG%Bv4&Xho=$iKqMi(AbdD^%yUHJ$55`X-m^PF&O>W#z|zoSwVS
z^LcM6F*)`KD>wPxHdbb>yn}`Twx7c9a95|x{<wKUf$kF5{m0Eje$22*MK^G`y?m#=
zKPH1H>U9Tr=F0LNcRZuVA?h&=&2=Jk{Y1Z?*0QE!lTqDoKplIFY8;8P;Ceo|e(p(z
zEEO5iodY8kr(9NE@7=PL8+}Jb|Fpa0K~F!e>BOmeyolm(7dsdQOh9WgD;d}R$XVWl
zOENg@9fK<hoR@Er)#hKtuF1DUpWtto;$w>^$gw-#^?5Bu8vjL0UJ_>steQ-Q&*gT?
zD9|d9Gz^g+v~2FheNIv5S+1zX{DFm=RMOF6X7s0T39c|ccoZ91f;53^xof-8>L~xr
z#e<QH`jOA@>Yp#?KWOIrj#y^K1?b?On)Sh5X)}a}enwB+czJxZ-Ba!0Z!9qW(kIk9
zZH&(jCW_<9T&@~Tg{V8n!38M`&<-ArECbf~zctDfSCSdLp+K9yJlTl#S32(oFHfO0
z+T*Jr<^c_V5G&zF&h?b~#>6Pji)%>N(2GSz=pZhtPt6rqu&dFgI-3ozME!epMHqIw
zuqpYmBNiv-<WPi_2_3KMVa8UCqf_h$w|5oQZ#oNbj}5tC)#02$@4LeT^<`hC4{qj}
z>Ud`dn@K!7cHoU%xZ-h@Ff)F+9S0iM*qkU$pcx(JEQGZqoqF0$ByrXrEbVPr2TX=7
zT>~9-^HX@yQs3S9gGW4Bp1SS{KE7?W%0ZX1F1IHK-Q-XbDQka$2ug;n;^bj=es|7`
zrw=aR1aE{^K=o{_oEFy2LO;%a2;Yl_(kZmDCd($_M<8KbCT#yoSnG1`A-$2=odgM8
z$%Ae?$>LtU)|+pA&>Y7x%ym{`Lql7vzle6qen=;9<W70n7p%)EllBt2d?j<MwDt6X
z(8mG^-*_k#m6l#Rxc@YWaEJ=-$ErD6edrspNYe+3RqQs`$>DH2c=3i#NADBtSkkl@
zMbV$Y>Xsf@1P*Nia+_=(eMw#2gVrD8^M(35r5A1W32bA11Di-zF+cLg#}Zz72Obn1
zo2pLdJJHukIU)zc`8fQI_`cPu(eA-uFR^#NOQCjf$o)OqkKr>G1m~{kJd3V#r~qgL
z3`1k4xSLG3o@5{C!9yP@1(1^iU7MHSpwom|E<xN3AuTK~u<ihwGW=BMJF`=RhV*~F
z|G?K3<%pF(7jZB{;G;0;J+^bSKZ<St(nk_#kc;def4~(NeZ*5<Q+nVL(aEBNf}Ff;
zmk)G64pyBMnrLWb;KD(N)Ld8m*$Zk)pC5=gW#-o*l}A-IrH}vdU9Ep);4=2|(paSb
zpt)^Wp{jY^6nK5XTjrS7uEC9i21|9H!6aSQ5%tT<!ZvY>|8xMk!^_*U7cH<->q(+^
uxoyE0YQu*ez(7kbI*2}d%e8r9PkOcR6Wg9nKnScj)D?wm7xUz<2mT+3+F%j@

literal 0
HcmV?d00001

diff --git a/docs/user/security/images/kibana-login.jpg b/docs/user/security/images/kibana-login.jpg
deleted file mode 100644
index 9a1916d5217dc61faf725bbaee5a60c25f75f0c7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 22181
zcmeHv2|QHY`}mclk|u>hOhu6;C8Cm>im|+sgrZD4l2j@Yu1Lx@p@_;@Lqdx!l__Mc
z#=aJ25Lsuev)=h1y>D;o?fd<{-{trH{r~^Zd$}{`+`0Fh^E~G{&-0vTxx6M`2eiOQ
z-%uao<Ab0Z;1A+apxb&E9gahgi3y|#LC|by7T+w0AC&l@8Q^2#Z)NZRpClyk<vIje
z@=5((w&hd!cE7&^H1oH6K$~9<&<kj5s=ujk{#bB+DS>OTGrrzE<6$iS*D~}D{0{L3
zA+25Z&gYz6?43_9Tfb&4q_xe^Wad=s;P_Hr`K7p^PCBTW06m%c*?Z3I0me2j-YZCC
zHuP@BLw>#$&<qhiei1%iF@y!Z3-En8zB~p#_-63W6qqGAd(K=Ta6|S2Xa*lY|BRXZ
z0s>Rr@OgsYp_w8A3zx6cowdm9kl>0lqH32z<7Ufld;D5#cQs9J{o%7dbLNUKULqm6
za+SQoYDIO84VqdTH*Mdcr;jr*G&0{~VQIB@pY@TW$Bx_CJDhMicm9IwMK^cfD}Gn~
zuU!ua3%_|QBJy@rbbLZ$(*5L=)CW(VW@YE(<~_?VEGm9eQd(ACQBzx2-_Y39+(Myt
zc6ER1>HXYC9~m7RpO|DYSyONUeEtd+`1}>JAK(%JaLt%GlYge*6kL2WT&DmRnJKV*
z-K>SWW`c*#ELx#<dA8`b(74C1=g6+#O%pqOwtB9(oH}JCeG0TMko`HpeEucKeh2Iu
zT&>V{XvUX=e+HN(ets}hGr=JsC@^&h&KCS~%>M0|`{fXtI)r~ec%TtJ&<1#T7WfyQ
zBRJ>x-~M!g_Ysh#60ZfC#}5{S2)_sfLz76$=7o#|eVu5JP97wy;=$|=m>h0dFht*Q
z1NmHna3!-lvim7K$Pe3}2EX)BHs+eY0yQ4=`K;{78=1YS3h5c1+)!+U!pIv#y~RQ+
zU}dxJfUtly;yb+dCRB>86y2|Ujq?~6p=hL#w@-w5n4rAprrGHyzdamJIg0BJ(0;tz
zOs}x)TFJUSYjz!^Tl**3eFzbjimErhNl|TFoI@O+bmBn?VFlL+L#kC)WUEf@hDNkt
zkTiDIs_HQhO2fxyRxvP?%zi94j|Zvg+>2lhnVf1OyuZd$h$n4@FZ%>2#LoENI16GJ
znyXFc7{H%dNLTi#u%|37_%X#nkgM~K6H(w20DqK4S2EWRYj5H~p@}>QAa^VU%d48;
zK`nx)zLPxq;y4egPO}xU9cFLkL1pj2O^reAEDgs(rN$y2G#75PMBEwsc#vF-AV-x4
z8Q(DT)$<JPX!k>B)@!ef@3U(8<?M%#du`sS`*jI?tP<DWuu;P$I^-d1Df`-Krins*
zv0k>klS+SmLT8ZVTE`(WV-I#d(kr}}%L(T}0STy>U=fkUug8NBIUYn!gPpMb=u#%a
zxZZ5XVG}=MQ3HnQtRPAD(;x0k0feGU>p{J%k@j+!@nB09lF2yDgRb3+K*-Oy)jX(+
zaD`_7I`cV9+2yg32gR!6Cr3<CMZymwXvML3kU!@C)eap1Qro`=DRVs|Dwea3rW2mi
zuJ3celD^OBu$sZP%dc;h4ClY}r)$dGkA86H$tK!T#HYk6L<(bcYImyv4;ryqlU!Mv
zwCfrBe&&S-n((=XGIjuQPEk7#Djm$^dbT3HU72yRJjjxyi{J9YRd(Q*7z@kC(cnRY
z?NbY7UBNx#a5H>gb~IimKq0dV({VaJKmq#U<WHj!E_19pD<^9`<dY2%bt9SG5=TN-
zp7cH%T4qr`lkaX!kuSl72VJ#efH~c2jBqf%9LLXa)5z?|SNYwADGLqL)t<X9SBY(b
z=iRkx)L@2qmgK!%wdvxC1q9`D4TGpKwt(jExAFL~n>D3}`^Yg4&-LEOWz@8(u=>0J
zWf!gI*aPZVNkRo*qw2_aRSi~@-bEfnU*MwJ<^O>PF=am^)VW>A=tL$efJL`*p8hZ}
z(9-t<9ajs0smng$%Q4RYf^~V&0xN((Vm3lk0CmA`B4<5ZLSW6X;Xxf9*iPK{Reb7A
zGae)&sD>JNl6g=VhT-!J%i*T+pvyQObOToAL6j&k=&FTaHuyVukR<#=o%>5XfpKkP
z<jD3RgmVKa7AxaHJ%f18T$pp2X~%=+k?9GjcLWb&U<IcT{9V1V@0ci3toxP}hIIk!
z$roLg0lI}xfU$yMbzv%D#&IMVJ2o>H@D>Ju<NGSfTp<BnG5;9n2Ac>t2$n8z7G|=o
zc+d<24_fwTaF6|l`DI{fD~0kPatnzeiZJ;{$fyLd6UXIK;XyPV41nUhYGz#pK=3u+
zC`3-DhX<7la&-3-P_KG0&;-Efun`FD?G(Ct=Qsmo(f|}c)V=PT;W#^%Rx+1Q!l(iK
z*R20F>p!mT+jRVE=j#P?Ylt@V`2j~B`9~$^MsN1>b3b)sxpEqj`kMdQ4ATC7OmWqA
z7s|WcZIqdz#>Y;FJXDjg-Y`?d<`74>l)d-CjlkgXCl2VzPbC+XZeE(ho?9<EFwh!k
z_4#~7#`C_Hrf=L8g|=DOe7xOt`-ogjS4wLCg!sb&L~Yyt>fLh{;zM=yM0fE`Kk@n=
ztAM<>HDz(`FjYKy@Om8i>2*;gAIC8sv1_~N3bZmH87~8c%M9jKPh!5;3NW_xAGCtk
z{l9Akmo5U9^}AMJ)e9H3GZ%2S@Sua0c&@n8D3zp(${=O_lwtNPYaZ15*r=fN9+kkp
zg{6B14cNyAbi)h5@V&o3A98Ih9#yON2V0rn)O9-P*X7bQ|COs8P0&U69A$O+wz-47
zp@E%P@y`YGs#i8>EXpH<&DJd<ufr;;j>^X_jb_N>8_%mQ>}!;4NRy8`bGliJosuvV
zKffZu8<t6I=m~k@m~yex+DX5EosHhjtep2d%<KxZ)_mNH@?YM6;DUK_#S3z;?R<)T
z_ns~3$J}e$%MnHHC6b)?*n`FJx%$zXl>OXV>x6+59`YE32VrwaU$w_8ziN*FrF6C<
z55iw)XKhsKH9)Cc0Wbeoh%mwiKb?Z#Iw#w)Crm$I<Ma~Z1C+-28A}!71E3#I?gB1>
z)U~w%9?+CW!)+QHZjImvJbBQHS&w<pp=a<|bX!4IW)Hd=Ol&%Wuf{eP$ROn#ukavD
zANd`YvD$f1h;H2B?EPZpeU5T|B<?x=c(RL=>qA}9v!+hM_nr|eeBT+$8m^L!IC@yt
zvem~`m597v$AcW4gYZj+UpRF*2e>~(R}yryYqK{?TMj9N^(}WF-PTa^Vzp#h;_FZP
zZ}@{At@K{PY3IfvCy9Zi1zz$D@-K~DHRJ6wGoE@LIzmx#HMu%zaJAheFRVpkZH!)7
zzKY1rw@<I`?%vumOAGObbL`&0zV7d?CetQ_r3$?yYcni?W?G~pQ+p)4c3h!~p#4$(
z6SdE+O`s_(s_~Fe7T*mo5B7Ri>4RL?21}9anHei`^$*4+oewsa@m1bhJ{Dinx4B<S
z_0Yx;s@yFMdrh2wuj42}oxG}wDtI-pNIoz0D8qt`!XiVOe)y$W`<RXS(Mros4Go*`
ze*Pre*ztCTyt#DN*|+5dANPq#?0C3@e_;3;B5L!hU>(DSvZL0IMxS_jCSHmFSFo4(
znmn)5u6i!@?&Abr^_02Pq+M`w9e&s2kk87AdDl<LNf;QXg!-rK??Pvgw3Inw)J%U@
z>{EGPZJP%zCnh)972_AYaa6fi*I2EaoD-b>@?LVw8YtS_fnQFlt1>q-LN44^j~<DN
zV6Yc4Z+KAFhU+x;YaOXGREwM%j*Ux-82#S+<fId3O>>s7wLz&?(KAA=@7!OgcUdvz
z_*OpFxJ%0CiQPD{?zd~TOGO@rDK6FtSmJ}s?ePzJq1d*bNMY11N87S%W9yGU{h(Ru
za9;Vww!tR1upJbfc~)Z)KFhA~p8QU_U7(H@<N0gbd5m1jwR6wiG@O)*k1shNJfn7J
z?(saQHPp|?a$1#<muunXz2y<3@4JOu3elMiUFvYF>|VMs*-zb}W|Ttq^)S9K)j#`}
zelHDSJxlt`fPJSD0;Kk+VeaiXvl>>c5^RkTql?F7?zL^}m((cnX^8e4jMj5iR#UIC
zuBa|OmoAk5(B;8(k-h#FTIVgxGOoU7RqhHTKh6uFYIl0<e6j|2GIa%M<$&#bHYJ8Y
zQ5Abz#gKmkXW@d*5ygfsTy48FM?>YX%_YawJsGW+(zk84m)_@7Nvb&M-+~wyNOLq8
zcv{7Kwh`k1<(*W~hDcW-7gxvlmLdls^5b2bOJ`fmH{1H2Z`m%vcr!gw=$|<)cangz
zvjvB~1WdTv$+|u~6X+ippg(0Ag6)`%<;?<(K0BL^$T&v09S@SZ&^}(G%7rWfGQX>#
zF%bhm_3Gt_i~)|BSoI^rQ0gUt#Xq7{4p>h(vNH4Dj~DJz36lmq=(^W0Z1Q}dyxGAt
zn5!tytNAy%KKb9~`Vw-X#lgxCMHYx3KjIyG)^Llr7+v)Z{u;S+%MJ(D(JS^1&bPfg
z2Nz<PC)x)>u5Hmdm3ZU{gG^VzYqtqkCB1v$^mNxf%)+((b3^O*a7RCIUIu$~A5c$i
zZL=Hn5Gcf31-yM6I@w-G)N8LF8+g&?Cu(LxOu77d&l<1KX+2-IJJIV?X?KC_;&`=y
z4e-ZYG{lIt5FU3N6C3^bv#Z~4bkIMw(HYx5p#!)z|6U&S=mU{u;*7VpDr$d%3x2UB
z`LlKD6^+ehPO9An?DP3=sq3^&=bgzZY!V1f=+=EddrSWyW-wSDMS!7VxDTOQFyzH|
zr7mrFddB@ZDmbC)za(En%XMCy`arb%K&|`w4(t--^;+Z@X$gb4hrVY5U0!QfKh#qY
z({9>e7f^4PADVQtRLXgzKJkLng9|>VW9KWW0%G*B@T#yrp5&Zjin*?#&=GndUG;ow
zV$R+9sfr4_>ACv*DgJ^!dS2I&lMe7G8|cl5`P3GkeFQv9Y(>~CBFDmG_-W*kp)HA<
zBjZD~j_i%!mEx_KvILqB@mJ05c;QM*reqc~9#R<olzU3W#>r(hEr@+f>FI`{3XAAf
zr}qi1e%+#vv+n0XIqF0vH<t&IQhCrDGwx$xnII36xZJ57yxp4DgUdg3jS>8a!ehd4
z5o@PEC0O3{2`zDCfA58fhBJENceKmp&KjP45W8b2+~8rQ&-O>~#h%-DCN46>&SdoI
z$P-`bNQYb0zu-Z+2MX@+8=pSqbG^AKSw%r_R4UC$LVm_e)9>KIwo00E&{iJQUI)w+
zDHCT0WNM_z>U7Oluusf-x@e3F-R|<3G=48}06jlAcxAnbX7lW|ZVxLw$O@Ochu*g}
zrISQC3Jix%&m($tOdv-!$x)K%zj9yJoytms?wB_<J8u25P;KZJ!-ZN<hgxc%z=a>W
zM4M`mo{4r8P3A#jxTlc^CvFV6n0stsAZI8qtzI|EEUoFT$}S%oI<K<9*dV56<PuZT
zCTi8SRGeGlaknKwPZyf1lV^CSF+6D`(`PjW(hOG<+F()_^%GTk!$*|{2Os6bxTaa3
zW(UN^Y)g?AIR7X5x3AvU{yk!THp;*5`Z{0#*J7gKdnvV>2Yt83GcZ(KF?KG)_%$mc
zE~Wj|fx-JBZEYJZlJcUe{C4aDJe$Q=PR%W(^wp&=*`|_HT^UkR73Y8NM6J>44Xt)v
z0z{5mE7G`xG{$GCs35yeSJcGkNbrKts#_3Z6hTVre#Tj3s4<gxFg{?lxTu*PH2oAC
z!xth<u`VDn%SmC4?{EE3KZ9c@BE_Uto<07^$a*3Ji{4tqtNqW5H6XVC{BDLu48krX
zQKYk-h3(JspyHZt*i$ja>9Dh@;Zo1`A;O(1nOv$>u@Ii$VPoLQ{G_I1Syx78X{qI*
zRIlV21&j0ZpB3asPmEZ`P$?~jM_nRZPXP`XvuXZ1o88HX8!?F{KgaWw<Jvc+lV`m8
z5QofaFV&r00Bz^7c|gEz<@+y-H@=MPD+WR>>c%Z0LRlSr<OvW7_Q)_0r+zyPX3p5E
zd|L3Vr(o(ts&*>Ua|f_dVN{eE-DjL6@jUx%a?=2*rv=NNAW?ANidNHZjoCvQeFuc!
zRbZ3ek}!m|B#fW}rjMHuauz%}h!hgO6*Jrb^^!GtP=ORjVI&D44M-{vO@`SZ_B1OC
ziKMOOhE$@SaX_><qN1MP%3{tHk*FJqOKYd#ZmDuc5jKTXNU&%7*C%k&h7_mW`Q1}4
zfA6V3(U)<zF%QyiM;XqvgccpjxIGV2?J#FcM{?NPd5~8lM`2o7vFG=Zg@5Ze%d@Dj
z8nu`d(<wd1gLJ9@db0tdzOUte>nG`tXu0M22L6V_zk$xx(`Mun?t@M`wwp7TIDM|M
z(<}R@ck`|HuTUzo1CZ&r|IKH2PoL2VLY}8JTv0&%Inh{hzR_2~&xq#dP^L5gF3|w&
z{7c04H?jJk=<g4+f$7GdF(0^qA05PS*?3yQw_=*tG*sXf@yt&=XtD_LlL0oLG#u0F
z!+(U{JWksbyXuLa30rq_Yckeb%<gvzHOnn~ja7ViFYap1nMP>*&C<coXD%(l+3o?Z
zv&6kW+fG?kBXhtm#VQ;ntwN3Qn|`Qoe1jbV#^8mVsL2><z?k179SCcWDX;F|Vf%f!
zLeh+kI2ySyk_S22qtyxfj34co|B=4B#MLE$lPB#sA=S~y34;ZAP?Ml3*v=`LUB3|G
zUw-jpP`ZER>5=#W;3Jr5*e+l6Y?k&Nnx|_ql3;lb<!g{F_px6k{Y=61(`>F|lR}2f
zaYVBSE-7`BAHgRPW<H~pymSa(c{eD5kx=Z*gQR=L9%@<!=NQagi;6FSLo<{5((7*}
z^(`5qgdE#)Z@X7=bf&$#=*4J9qepB~GLxuPZA(hIh%wF+7?2*s)($6kxnVD7@SD?0
z9w+h3J$8FUU^*^-OS;wvi|k1xxC-4ll=fL---P>8u8YhXy6v5gL2)O$-6#E+hx|;*
z>d8a#?3kWdiB&loTXq-WYJ2K6R!0cg991)vJvSGQ+5!zZb_~lf+JIX~vKId?UrFn1
z#D!uW^ng(RTmqXW^HGrhUTRSk6B|n-%ro6kJi4dmrk8v>JMG>0K!Me3`g~IAMWPka
zx}NA++!M<Vjb%TM9eA+GeZ*9*K}FQ+5O<N$&DFZ*_tVAVjpM;?*LUlb(`bvLANiw(
z#}`9f?T$T+oiaQKg`JT8A)uAxR(j6Cva(ronL|Ij%Efr2l3;3v(GSS&_MPO(0b;EP
zvl^=>YSk-9)A|Vk@=YQGz7$V!r^VLvWACzDPHf{r1M5syT(v)FaQMapyP+Z1mDjpD
z_+N=lL`GsKtwzK~T>ogGdzJSjvHOnYC)cOB6=i4{jq10_W20YJfRzbpL+f*i?ow_w
zbFMaUmgU3C@zNf8T;MM$r(ZH>NV9bqlC32%%W3b4cBvP`*cSDRjcT%r>oo7!xU4AE
zezL#f+J1!~g>CbxX9eR?GHGcygPho(W4nyTExq#MNXMWt8(W+&R-ATbVsp{Lx54xJ
z#E$#ef6zAdHs}-Z7;K&t$5qMfM?PY2BvcaE2_vE`h37)cWB$7G2W(_WQ8lk*sV=^_
zc~4FDoxPue(~n*JkkURcB`M6H^}&-zGer(`9|acQkr{PJe+|MFug{Tu__;o)W1tqd
zMiXOHAal-9&q&Qged0tZ_2m4T);CH=)bvBn)GEgkdv@1ff*GSZJSbxw(mUg!)mU9F
zd^vSP#~ncSp@*hh^{2`|Sn@yrQ1AI$mi_vFgDWPadlh+rwG)QxAhDs(JczZ@k=}Ja
zv&q>PKVraH3=IC#Fb~?1ZWqA7T&K6AdbgcfOt61{S_6#y9dKmfRAfYG)E@D}5Widu
zG$Z1f3Eph<cFU{gVAJ<Fx=3p;Y_6L<cg@3RW?e)vucf`jMJG)HO*Y)FHvCkik~8Cl
z_X0_KLglitr6P3;+%n0CjK?~<UD5M<`Q3RD<*g?-U6F8fnA1C_Uy3+H^5Q$e)ql{K
zW9c58m?L>b<U{Muq?K1K=7%Jw9McxDsmY)uZy!e&bPk*{h>*^3$5u?*o<S1wM{I~U
zM6K$v;)va|u|0Q+ZTUis?+Cn&l)T{j?$k@;ZKi7an{L8tgy(q&F}GMFN(Jk8Tj9oX
zaKw(M9%^q6CZDfAZ~F8AEMNU7K0uLhbjmn~F^Y4UG{Jx2TI$teI*a^)9gxt9XR*O-
zSC`|r;m~w1pMpz2yGq*L0beC?p9A9r_LFAqQ!ZP6tk~-uu3Arw#mAXHeRK4+>~+nn
zw0&fmBX&Y6oCg`E_xEqduS9>iWP~DAB2&t0oGZe;L+Rm!-!`S8579%i+<cu492G_*
z-KNBLp?^{3rOqv0JL-0`cgFOsl$5GWwsBjoy6os%k=5a6Jl`8i;l#!@Ig6f71TuW-
z>n9%4D;e=ylyi$!6c4ysY`9Qk^U&2@a&NPZ(0PaMW~uF~N5z^ewdP6SDs9Izk=H9x
z5y$+Y<P6Oak9{Xw?u~zBZ<lm975cJkc=LlO<){k(8=WqTLdFN$pCSYNw8@E+jG*>~
z9-FDbh;;$_HovAu*kEs>kaX7#Ls@D|!(!Dt=lPYlN>B@cXJFWx$xpR=gAm%Jxyh)s
z#|E06?_zVtrA(X3Riq55&DRUwS{(lvn9{XZC1~Y}%_}X}&zb#;)2aeeytmFqh6~+!
z!j~>MxRH*fkODmxDC=PD#nV*%#~(YK5p2Pql-aAfd$aDjQ$lYq6hAm90x>@byZIMk
zTKFgOrp!Qr1sm!9MS3+HXNtq{qQdBnwVBHomux<dC>O~U9P7AxxNOyx`27OhCW*{y
zYX$z%OC`iCc<_9pS9u$Tkwh83ig#oLru8Am>eXHDw;4}dTGqHiC_FjQrw^OW+%+Sl
ztJRI2Sf-z8!YHK^CI~db8&lr`DH_IG|0!iy{7GiuDz@_Iy^U?g=R>_3mj()_<obQO
zbFQM$d_nN(x9cbFE5u?5FJQXegg1$snLX?$ndzgKS;!Wa8nm=s&Q|Vtcjn2*(1Hg1
z!0;zSxoWBNrt7q0yC~iX6Ned3*;_dVbbRqkrB2u<vXEuxe?B*hHr|vSQ#%;ZcCJ5n
za){b<a`iltec;KH#}!0HH711rIV<^;1h&+lvXra*ZYduRowAe*{mfE+>pR={f5}qb
z@W0DNmDZcr3EZ_YpJm04oxrxiwRKeow2aPnhjaseI&wM7n^MMXLS}C%NFEcbs0rH}
zaoA8^E+#SB2osy2XHHO@tME|R&YZpJj?D#bKjt=}Ly#5iu)i-s-$E{KVMul=^Gb6o
z@s{cE5?9$r6Vm<N&H=>P;d}PIFr@6=)_!(!!}Y=s?k|qSM%JA}(mjRs&gte2cs6X0
zvZ_$h&k<=(Z!}y(X4S?qZ|Lr}xV$^jXZGuvr*#Ey==N>i4H&D0&XV*xmy4xEU~ihZ
ztQ~P)!h@_69##m_Q`oOODP%KpMTd{tM#1R8pqsa<xvN9%&aMANvAAl?@qs6)e4Hbq
zCu$*6CUa|B&ro!MyM+)j-yvS{Cq7uNHCMo668XV1J9YJ6al+2w64o3<X7=X<biAAY
z=s<1$!-y&;`KCcFmQ|yh7$ciP7P}Z(xcFTv!^S+XX6T-FZrDfv_ugGf30HB@i00~2
ztr8Pg60HDL<3Ux;ZeTYL0(O{^Bn`3_c2Q6Xd69nN?uh(0w%aPN!9rV=gKBRdMDQ=(
zc4}At3peW%gX!Iiy;vUPhM)j7r4c;3xV;3=l2V0--w=V{9xMx?;Z9Yqa3pb(N(PRF
zv~m#da-IO}E{{OG3yHa?7Z|FwjshPO#%c)Ij4LsJvZ0jk+gSjr6d+Tow&3$Y$I7s^
znnGD-Il{mr5=ie!U_mE|Bb;CyN0k&r8rxutv<Jedege9@0Y<%wco2w1=-Q6TUIqK5
zt>eH{#d*ZFFG~Q<IuN_$$pQ9?xF@41XCF|YG_Zd_6@lRo{3T2_h68Lyp%_Mp1kB~H
zX9J(WNYQx0il6`v*sA$W0zc{1N-~=c*g{zyQpjdh@}TX<dbo_Ipz{+jRr&~sdK!R7
zoY5WdUpV;-Cx6k&e`xKzqFa2-CR{!5Sous`Vfo`cH|Y>Diz6q)97kGz;8&KIYXz%0
z`gA8>2U|J1Soe7N4cm`b%=8%>rHa>;zTj_uvL(%0M!HkXAph2pN>8UtoGhG<Qpv!R
zJx5ax^|>^+-U(G=W^Wkmjq0(CO;4Qr%IC5E>@B);`BHo1N&8O?^^6{strS}T90;Oc
zb>gqz|B?ft@qbI&$4A=_b~+r>vXGGHOlI&iFR%I-D%}0y!s#e{c(v7YtSLQ1(jhTM
zKf?UkZQv8}o)FXM{ty{1f%n$3KmpIkTBqp_QBL>WJT-YpPt0;;NJ(Md$Y?X}g3e9p
z(7^C+n_Jmi^iD2ko<5G`k?PoUDH2gl&%@r9PU#9^RH{vCv|GqN(y}drk5U}%)3Anq
zMT%>4ZR3Cdme$2fcpPDXFr?Y<lewfMy<Fouxy_+C@k!xw{86v8-m_Z-Jn!tYZVNs{
z6<*b^Ul;y1=Xp>`XWrPcEm5Y+CRSwJWgZ~MQ-aX@=0O$_kK7Gi@t<<>7v2%?+_Y@G
zmZj7_uiw>OJQntJSbm`CRVYTGvpG_*sq4Z+>p?gv)xvMD;?0lL`r4t}-zfrdb^pV*
zAjk}_;sq2Ji5JGSp-Cg!@Rf$y&Z>jmFQSL2s@ig9`6Vf#-TI&8!iw+m1ugCJsOCY!
zN+2NBX98xZ0D&BsdGqbXQa+zzV_`GHip|YRu6@-keH`V&ndpu<LV|++qL<I^ybM3V
z(i=BTWx45j9Rg8MMqi?mUlLFuAiJnwUa#JoiqF-(gyo2r0+)CrhO=W{F4JyO6*U+q
zQRns$M<*gt0abJ>S391x76{iQFAx}P3+@$o41&_mA%AT0+GP;<tBiL479Tr`dewmV
z*d!oCvB@{BK4CfPnIJY<s0qaT=D_G00>c3hqJ0;G=3bvfI0ry<u3CFH@dJtZB{(+*
zA-CWeq9i8&*hl~eNd6y2{0FoEW7jMj&QmrJ;ZwoEE@UPfxI$)t>N2kwGyH9YRzm_2
zx~c#HK41)teE1JA6>qIXB9OB{qWOa0WT0We4oC+u<#%CfE0jhtsH7DL5f&IgXf{|L
zv>5jXfUZe6kC2D(Um~N)aL=GBXD*&|`OnS)fJlU21>MI5>c*GY>>dsmVDB=3;s$K0
zkogw=5o3RVh`Q_;sS<vM{2Cgr4Yao`5^XgyBKWymjOqU)Atn3)px<c#L@5770)LUf
zKi~rAn=WD|A{jw#O0~)_%vEBNlko>$+bQauQ0XQNswo?<P<uQxZLOS$&$Hp6ejGuq
z<(BNu8mkM>joN*WFUb^K-=coZCg$!l^9#FgeSB`a8eg9<rWUY!t-+X9VrCYs@O?1v
zZ^6ARRSL`r7(p7l+RGh#jJ~gGC2(tCDn49iw1~u%AagK0$mlw+>VHD`;{Tz+(hyp>
z6Y2_Y$$M$MOEb(VD0Hr8HMbM|DYiXMVJ5b0_0oekW2myZRj%V2zWW773xtF!UM5b?
zRY;WM3x6dl<6V9%WJ$|Dn-dD<tMa7SpH+L*G-tn9!NSnD^fjcXdghoa%Cc{2BUzqa
zF}DcTB^y3W(zHyEKkFe)x$gJ%PI>MHz=_rIaHriM)vTZ&i}&I|Cftwj1yxS=T!qKq
zg?QeKW-5}5GfxhV3vC=&Q)MXd)=4zLUG$6(EQ`OVv%K1l_UV~t-2SeYH{UHd!ZFyW
z4>;0t!Ttk#j-5X;i4k^*#0x14;D*iX5kDRj&Z!RhvY$S|{1P#cUd=Kwy+Rr0L7fx7
zXTgR3ngtj0)2m-{<3MOL$onZ}29JR#MXz%1I_y1>F*7|cZ-oCVOjB@uJ+VYMyN5$)
z15EjmIxs2k${tDgv|!sJWn2mmV)L8wpd=x@Vq?crE3nmdN7F`d6R!Tm5tD;Fs1WRE
zpMi$(+MYLl;<$mV4mfvUB|b71PEyZj5YDLjsSjF8&+oUe3@i&Y%QNT-`4D&Gmwgd?
z-**Saeo%YWvozSVngTO%7y@bFQ7@5&yT42DP5%7L85fhSpU~Q`o@1xmSk~PapSZBW
zOd?~=s)Ggw)o$`o*iJEE(iUB)<4=bN4zVpRZZ4YCSxv_jNuLl_dk=4-?p^ihWtf6@
z<>uCw1LV^)LTp6BpwG7N*z->;WGEGqvKE&J3(NALD+#Z7(0rMm?RlZD+z7{<=j#p9
z`q4mf)A-J~jU)JGJT<Zy5%Q`*XVqna?4f?m$xWnd1M2TgR5hg1;!;{|%O~94R2a%W
zOm>V?vr_Dv-68;aj8d?(FQ%2U29vL93n$t#d@V`kIZtX2X)ZEKn3)F+iliL0);|`k
zD{&~4=t_4TaA2D;Fh!cE8r``l*wnQ8T$<aO;Y^+8`#W<QXsK>1Z!LQnrnh73zK~k)
zO;+t*3Qw}R_X=dZ>f1Ilw&&_Mwo^9{DaKCQFypM_QK{Ltiu+F%>6k4#v1nk6SPp$e
z0gL6RaAP<Q^h=bC=Twkn<Z-gvZ>&W;F1^1^IMTYVr=g(e#2GbwYkIT(KAru{lrq;8
zr{*sHE-a>3k{pmds9A_gXI<jjSmg(ll+>&UT>0khV2)N@S(*3a4)J6B&-kOqRMvOk
zN=%%s=|q2ZXF-scm|Rr$wm|-A&V~{4eTDg6=N275zCv@k6X(<Bi-NM7@K44HdnN)H
zhG*Ab=NyPPTHm<P=;8WdvIgrAt%quvM04rP94x0B8{~wH^b{?Y+?l9yZ1Zl)vS)Y8
z=bYS7t$Zo`!u$_Cf=gmC<*NJ_1xtvF&L>dX{aM<qiA3d7=VhH8<rKV1?H|;<%XeE5
z^uXVi|J3HIRhQ1t^D8AyBr1#oSI9(J@!cFHFZ)C~<t64JO>4XgJ2dHNa+aIHh3(f-
zh<-dXQQN*x{i8m`sryB3lE9fo%6Hndnuf41f)w^T($FGQHwQc3<H&>J!@QNN|3+N0
zWe-^8UG_kI9Z<cGeBQ6&Zxgc^*isU<gSA%>1s2-r28MGdu6`+l++kWxeDZGcPM<^8
zC-%E>^%gV=zFhUwMfR_`=YNu7@^=zXzfUm%j;Jh-TAc^simgz#H&wq%o!f=XUYm(E
zXU*kANIQ<JQtUY4@LZ%x5~yQ(D!?CQHqxeE6Ewon)HDR#>EST&%XGjoKF<y~n}0C5
z_1xp7+@W?Zk)D=cl0318tu8qEexocyln0r&<W<y&^tm&=7NNG}ZWK7;Ed8H+-A+z@
zi;XxB3dVBp?5ll&TS!rj-|$p~2W>gT42So~qs+{QX%z+Qdpj*?0vzw-CfZ4T?o`>)
z&b})FHQ`yI<4dJ(Yp-(FcdaqK#WFU1-OM5QfAtpiP5HQ62%jbYY})0o$(V68Y!My>
zp~|g<QK`?(C^wvS7~Uk?8y~=hP{E%`WmpGsBr~xuVBo)V030>WvD=!}KS8P)PM~A`
zIXmcUYyGZFIGx1}g&`XIWpnkEUu2xQd(Z_h<C#;6dc{r!=As%5jQE>}Z7<oG<sboN
zsfPL0(;m?+Dh};2*5dXL+MON)bv6YC5zE2YX=RVW>WQ}Zo`LEX&N)D>C)Z&o$3gDk
zv~pnVgv-Fb__S$VsZTE-5PV8J{7%efFb5tT7X&fE^n`E4_}(pd*?*_|#kvDMO;7bK
z*-iuwS9dCinPWe_oR6{7c@xdn?C>we`?N_gFjUjah@|#%D!kC4r9E&teUou)pLou!
z4Y^s_K5}*u7n9~av592rueG}CqeLZ61LF@Mc|NB&x4;zF*O)-@7*z&e$Gzhip%d;a
z-v<Jwh+*Vf9@y%*p>g3XivWY}yuH5|=cS(3Ro;`)c-%I(upP+CqgY?}R}6oeF=cT8
zzQo;qQ9O?N(tY#2MMn4PN>&ETK6@7R*6iub3h}{bYJ0uhx!-2$59mA6KkP%w-kH{6
zVpl3o6dgOtxK6<asLB<nRu3hywIemv%7#v*-wk_Q@x0>7;l+nbW?nlolhy7=vd?T*
zr3gm`X<&U3j0YnAl1iL^LPlC8(=j4aeC_rWC*^H{sUHT;ndd3#@bM2XMO~)P-1PF)
zEFP&s=QA>DDa2wTKckJ+X2W)#)5kiMpz%Urq2slIea0&!maKSsxui2oCi$i3oK&xx
zeCf6%wn=+wY#-!tA=gKG-7gKzwUVok9X>^l@}Fsd8PYC#-5Ccjo!-;*@|RwRottqJ
z)z7&^?afrujEh8&9;JHqd|t+>vDQltafV|rcT-ng-M50heTAE*$YV9XgN0l7&Kku!
zzmBNR+7Qt&>{Io6-Y>XqNAz~<Z`G1J^Je`w^81fdqGE3ANu;L_1H$V&ao>u1RhKqS
zC|6q)w1Vw1ybGC%OPAD{URmSYOn!VkAbp}0%Vhb2xN%1HwBk9LKd}VU$wI&wPz_=w
zoAAHzpqf0#=xIyE@hRg{@&N{+q(%HrT*}Kl$y+xEZane~)jhNHi9y#wF$>YKowH7F
zx`ELb-e`5@NSf19H~%48w&I>@xmM>Lw+KyFzX+M#XNyC+qK(kou+M`3psc9@xny7S
z8G*g`%Uce{*}B06t7_o>pS*kmY~fA$Q6L(V%9K8n=Xupkwn@<1A}M7YO@WHf7f!d#
ziDup?TfXagz_r=?JGIK+c$DhxkCRX`#G2hbsx`0SuETLrX6NGbY1V)Zr(^d68_vEH
z*fB*Aoz(Ff_%LKbNscN8K8p(*Iy!y1u|0yHC)}Ab0fa-Qxjm>I8N>){QAjKSU_tqk
zXKuw!RPDMDW{N2Wrnx%}z|z+qZO2h}8s-WCS>AC3p+_@wK$6h>QtOVBf#_x65dnOB
z1XqKnRp*k%RDpQE9L$4C?13F7_$BbNxMMl<oYD384b`}({)c!_O7mhaKTr*7!AVFY
zQ4*YyURz*s;Fsb-LBO&hEOm(oZ5x9bOWHZd3!LH!cJp7O2}ki`7_e&q3VN7M*bhwu
z^U4py+j4iaAS*Z&se(}xkVVZhMkO~)qJF&yZ5@g64*UH`9Y3`wOq?FT_HEDut|EX0
z^)HA}W!Sg2vlasyd{qK=B^su?xUuqe57(UQCt&ot4{VoHMQ@jOhZ+%?M~3m*Uw|w1
zIct!uP*sn(gPixO4Y9k=Zspg>dtmh~gH!f%A4mCrdY2<oInO*U;M~3i<5s&W5dP3T
zJm`sfCUXP?fRKQ?;Ad~Pn;O%bS9kN=FJ!c=hSXEhigIwMD00*RKiUm)eY|8r6mJ#4
zyiCzVJsidTgiPq)0s+33?UPiPmcW)Z0s>aanN7zsEd4|;X-#09%$dYCK<(eP0RPY{
z?kVBmU+w*Wj=yX;3Mlu@l2#n14bpxM?3)P#!Aht{I%&8Vp;(KW4Rkhb$u|82atXMh
zNeKB?E|)>zC`_Y6u{b@M_gj2h_n>x@KQxu>Q}MnoA}2Rsq5hl@jcvGsD#drA3VJ7Q
z+}oFZyva;YY{%D~{&(M=i)lnu&kgP$aR#reN%CAy3wEJ6%!j)trs{Xi(9c-9YB|x3
z(#{F$K?MOT-T@Lh2rcW3E+*(hGUu3NRNtD(majrBSb9{1@8b41R_hKh0*!L(R^{pk
z$VV9}1i6YWk@eZCQEEs-D6yX@{mXd}1amB0cNdqeHM1K_p2euX*~MIiRW3G5=`m4n
zG0S=4Z2V5=CBgTsr?Aw^V9zQq5f9D5*nNQEf)NDV2bhazoB<q33TAfzL%KzB<ML*Z
zWx4({iF)t}%o0qS1iUs}N8;mv{RdCssrPiuB~VJa5b*U6`%WdV{o%rR*#)HWE&Sc%
zOTgnF2ONhG#vWuo+{*_Ru?P0c+iHHV5<xX%`%|<4aPLI|p})H1v79Jc$?y^V;Ujn#
zFw}%ELluJAKw!}KAV1VSPe~KUM=^}s$^`Us9~TIcF7j2)OOoK9O+>}8MFbY~6>#us
zp5N>8Q+a;<H-K#?^EOia`Y19LQ{WGL`yT6_H&s7xY6Nl5v=nqHQZ<8&G6A}=zt<R3
zH5-3Bu168NN(eBtSa;Gnn7N)3+*Shq3wi(}#L+rYZ*gR@d@8l>$2zNPGu;0POJBPW
zJLUQZa-f_z@6?3)sR@lqn4<{$W5*!i<}UzZNenlw4n&j~u7NT&Rlpl^-KPw^gg_?q
zBL@A2vHx-D_C0G{vS^OO&Wt^HVercrd;<jEZWk<&APH0Y!APg*2D{(?_%G;<jZ&6-
ze;xOzC1>5sY(NO5zov=GXy{ne+~=|ma^^F3*2t9>iOU>bd)~=^`AwhMoAZ6v+klM6
z%LI9SkdRSe%4n>kHHuQ6bemZQ5jAphjVB$Sas0+^TzRp*_@L4;`1u|&3sr|CCih-?
zB{^62<zT*!$?GxogDgo_DJqtH8N4_NZ1+8gz_~QNmYED<G_C``$=4SjeL@&MQDhF9
zGzqBjhR)94+NhlNRJ19>GDZMQhejrM1OcyZxfX@|_QECLO0a`RS&{89x|O+Eu&Ua(
z*Rdanm}$31PHzdOt~kbnMu(7d$QMu0>bqbheRvNbzWKX8V7KdI;xZqSDApGjquvdq
z$?`-n#SR^K7C+FG+U2MGT+;{di!QqlC>c)m90lZw34i1%yhP_}!Q($X^l!J}0Qlh7
zF#%uHDm)OaJ(IX!eL2(6_h+Wy?>+w&{eN!?|9bv!<Nq)G{bLsJ-=LrW9Qz=A$4vf7
z-t$jBtU9eP2l(5HpL+Y#-(y?@zcH?9OybM?wSH$A|Fs6DvCipyKl<+u|1019w}(Hi
z_x}Xr{%4u)|0>bV`c*#CkdhdZu=ZT{ULd|+|D$<-f!&VZ>9O=$?v*Y%q!Q>%<&KGg
z6n}5So*h{*Z4s*R!9IT$A-37mUq3sf=EJk_%Af_$??`C(WGI!tzt|`k7@KN-C446<
ishP<nniR%}A9p*hwl_%6K%LqUVw1bLLFqBC`TqdubW{NV

diff --git a/docs/user/security/images/kibana-login.png b/docs/user/security/images/kibana-login.png
new file mode 100644
index 0000000000000000000000000000000000000000..813f2c703908d8e23c228ba7e1ceaa1b321313d5
GIT binary patch
literal 33169
zcmZU*2UJsCvp<aT2qFS1B1#dJB7zj@MT#OIRaB%3NCzWLdW}eX1OY{9Ql*zrLvIlf
zBE2VcL<EFTq=o=VzJ1X5z4!h<)^e?!b9R}TJu~|^Gkg0+M_ZNd6w4_J3JN;4`}ZDE
zP*7qhD2^weq=Md<TsuucafL$d-W^@9<drE;x1{-IGI`ysPr8qcT3^EFS@6no1rG$v
zwVHA(j&i=G$nKX{{H#d(F;2VgGOs|z+v5(O6=wqn<1W}8RP>i$eHVQCdQ`Q*#CTn9
z`yxIpl-szR+pydU=by4AL(Mi;$8Gp#rm6U#jvQ@Xdwk*CklHt`EI<dvGnK<M8`U%Y
zC!;0~C7HpCSG$S^mfGbBl@OW2N+)66hTTS#;CBK|u=v8wE*lIBcu<@>i%A$tzToxY
z81!iZG_(KH%ucL@#nlu!V+Gz*EJ%Qd)OoHXk_t40uqWuXr5RxegFZ$o8Dt7b{q1$8
zg~g${V)QGJ3WcKO8H^okR2M=VJiOZHL<~r1hW+WYqiT>@B;~j@;|7heZ~^pc`%6*E
zS&W@*Pr%R-LB=Ox73@hGPS8UhCukM+_xE-1`_13q%;0xNdEybLIvl~`<9f&$zoT)f
zz?Uu?X({mVO6Ce;ph`0?2x1_Q5`2i%>V_I=GMh(Mwe#3OzjGo=RVHA&NoT<CFDohr
znX6;;UCq$s!%^UiC8H?RYUqvuWgI`+fs}OisNFs2al-tMKpjrPzPz*^e_;X1JzXML
z{9T)P(a{L6OR36ha*kwSbOxgsXoI>6z3-L}7T0+-{~i3KC{Q+_JYhgj4}PW_1&a%7
zBWFHB?`;5!7twzi;X8x*B6X9R8obw`gWgyC?eP)}biDo#gXhiZK0cHE+v-va3vY9U
z;h%9uKr5<0Oz8rWI-mU!k2)af(%<$pEi4Jaa}s1NNa@on&tkrCz34?ADbfk(leKH=
z5gQ%g%lS`4o)e&1|M*GRvr|t!Xu<C<R{!sBo<+kW-TTL!PWM%pBg8jvSSc0XGudQY
zI%pE0ZF#TSyn$s=P;_2F1fEKeh@UzR9&}hhmw&eqP?wK)4Jes@+&<E}Y(Q^_RNs*j
z-vBIK{X?M6DbPIdPxH5`29!^}|7i~NT#@N!(w`6KIT3+;3BgA^xSWKgs{?g|=CTt2
z194BxgDyMsH68Z$yBm}g{cBJQ2`rLIm`?d&^8Jqd-@6~CdBR4iDAI30pI$tpN@tl<
zs#{6ZddHVpo(Q|kO7SXD$$(PaZkLr=5y#Iol>KAO<3o9F*=fI(t?L2ALn04f5&_7w
z@+u;b1u}yM3ZuT^TPb|ub`xsfJYp_6K8pMB&bq!l`QC0H4_{qm65D~_^@ryt=9FaN
zw`s0{348z#EK>9e?~Y#-mCx&HbCb`Svf_zy(69RN=-T^7*AgFzBtGJc)#FRilM%=k
zml%v0w7(In%^$1IpV;lEeeHeBYF2wwsxjO6{I#SnfR_Nk3l-qyi<ai);cN>TN!$ug
zj5^O_^<3H^Zy(N--mg_j7wgjo-)lXiq|k8!lA@Flrqq$iqqWVYwapQIpQM?+d|~i$
zq!pj*)3_AgPaT5d5vx4y$Lq)X_$ermXU*w`^TwP^DSB?rCeOdTv&v;<R6Hrur>QSH
zxKuHDPd(>}pXu)27eV|U(4b*Jjml#a-wR(RA3u-tvCz40E#v5s?>Xe-({evI+e(Cc
z$i;d-KIi)Nn`b>4yG;Q}0zie{_b{X=PVk2JzP6qrxaJ`>nzUp;-@BH7VR?y$Q=mhO
z%ld-A*$3z4ayFtX$NCf~D2k#=sh)qOvQhL+co`>C|8t_;B>PcO@^Bkxth#N$rFX=G
zw_`xxo&!}9x1bb#ww82pWX?99Q3RoxAhC6O*+^9;C2o~#6P_FUsnLV+E6}OO(4r<v
zuqGUH9ox$j6xVP_h?@M`y}CV>_x^s4Rf6`|7)<icQ%VY9V3!G@HmJa3Vk&|K*KZPg
zdw&^e-wj>jla7cBcpx5=UvXNr-qp)PC7`9U<Y;W5^<Tt(Q}PJoH7}1OcG+D*uJ|ph
ztMbLhnJ@m3Q3HeOTm^$tp=ZN1o(bMy8u4hZOw;OmZ$5_Hgc<^3&BsIpu5(~RL`NZF
z8G#9lm5NFUdulR`gf4v(PL^gLseP}VD;kaEDn3S$2P{^TQZ|UvRVhERGu(qD!QMuv
znlJJ1^5p&Op>Wp38o|k1$#gwn^Z2)vDkm_dIdH6GWo>3GPeMT7rPZ-8uQyVcuc*e{
zwq!`oMM?CC@$WpqKa2y%K_x6lP`p|8Fwwj=JSpnjn=!ark&!A;-$^$s1IG@!o>OT`
z6cpo3fQApiA4Q%{mk2TcRg<3qMwjfe_n46IPl)>fmp?TpgHL9XkEfuh0GmVtPZ9@D
zprQStjkUH!-WE2$imh$j3R#}7B9o#w>}+MwJL+DXVm083j&Y_?lm&)le+>~hW`B6j
zS(f!JFg*ME@Jn$q`MV~^<pa1L-)K9nVMCI^zIl_BxPiY)k*)>FtPIHP;G^+z`6|j9
zfgz8isd53y)1t`t#<SY9H)*ITUIA%DmQvZoZ`8kv7C6Q+apLv`q``4hi>x90HVe$C
z;Oy99kINW08%6&#kj5uXK=%_K<Kvel9ojVYqmo{Dv{tP+PX=4$6xP@yx!5RP-30m_
zWP^HtOgG1?wfqP7_qY_D$x^0pmLm6_=eZh7q@>t!mxf0Z^t#XI$d8|+H`MV@Zzu-{
zaVv@XNaed3ea`z_W4@SHy`j+p?Ufa*U_45}+7sRMjJAbn8w6d~6EVk*az;^>0_(8a
ztBgaeB-fX$<g~$Nvz}j{4L$A-)Nr@H1P$4X9q1_R%zy`=KBS<jXevjJoap+}daIDz
zrf?|mx`^n|V`cZx?C8GH6?fo%q-^HngN*5s7=TGs3@F{7$sYbbSy4BL92rabBB1}U
zRd3SGhD-B93g=5w)sx<tD!wu4N87ebUl>PDxPNw_?lpLd)>3`g8fVVrWYrG9L^?Zg
z=IjQ+;{BWLHiaL!Z3{VXX}q~-Sz??LB^y3X%6JXC%zLhp*w#&FLC%vaKn}|3OKjiz
zsR9%$YX#w6ZijaVphM;_{}oj)7xfl}N~}ju1<%nne$|s%<9*pG%9tTjvv5qg7|!FG
z)Lfs-j>)GZ-)JKZl%n6mZ!c9GpRKV7HE|{g^g^-(a0J2>b`Bx$B?GQIw|X$WF%&_x
z3sOp^`BYo!Qe$tYk5-$-ab?Ry6>1pdda%v(qhnY@=dDs@Cj`orq|AXp0dmoy&H)IZ
zsNiRg^;mXS&isN<S?qnW-SLt4IE_9%Fv^v!d{1t*{GNzqMhq+I@yj}veJ`#X@9!@N
zHCh`vlIk!J?y!?Q8mXre5vcd1BgZ<>88KTQ7$33x{S)=a(NUlf?h(twp=4c|-}jU_
zqCbwY-#!yn_T~~r`YI4?ir7KV>GX=2t}iLUniEeZ-Oj)HbSgBHP7Y-h)1pr*cwvw`
zr)?r3$bSmgT+h1imDTNyX?E6qpO;^=^sQowCMkib32bfMPXH0udjdo$d5fGc)c_ZH
zQ}$}B+xaM#@V25*RXYnyRCn(5lkGyG^UCgfoo3e8Dz#bTd#nsJ9^G`j!6pv;WHXgb
zE%)pV4*+#40Pe_Rw6S`H5nU4bz2csrbXF;Hx&|SesxvCk^if~1A~I~|9T0C{YOJ|~
zLDb!|oJh9Y99Rg@Q~>al$C$*y5*YW`L(=*B)mClZ3)SaOw$0Z>j@8^;$#FY4xZ}T^
zF9`iB3h-7m^MmQ4R^JxNrt;P~OnLm%=U{pvpzLb2{h{+@*746Z7A_hpyS3Jyz<JaI
zUoYdr7GU>}QBQDb?<$pJy@-JR`-GwaMcoc7VqXb;{S7eW6^@Z?#G!whBV2(uKT4xn
zfi(P9xsr?f!;MI)jPS1_vO$Y|$li5&Z39Y*1^FXZ5rG)dF~Z0#PFKg@&Q}KCMRs8t
zB&6(hnSENFtUXSU_Z|;LKX(n{TAId6;>goGS!)3fL3eHD;_7k-?dhnmCAyB#ML=-J
z;Y}&k@>h#?7CY(M(#!CGO8eUI#Hg0Dk6Ss-M`R0Uej78X?&PK}4|0>YH9jpMb}*Ei
z*y5(cMC=YnwS1gs8`5c*a5gH^&4}eP4L{p0Cef7c9fU@*trkSA2t@3Jni!Fe?pgOw
zY>CHtNwyQ2p`oFz?$JFOq@@x*gu;%l{z5X&DzD15sQU61ZlzO+QN>=nkr{ctwHtUR
zEYW45z2DiO8Mvp}Z>6JOPE+(lSVSB6JG&bn9G+f~WN$ld+<gD366fc-u!R93ygt*2
znHMZ;k5<Y=-Ls_R1%7>PCnoFNlHGhGO6byvbp7kHIt4v778aTt7vJ#PjD{!CgWZ^7
zoE|`sH`a_8MgAL?Fk_Kjr@J8aKHVlR%!cr_(_<W|Msd93a)?xRn`DKLM9Wn1{<7(N
z<54Hl)!LQpo3d7~7E|$ALD*WCj4p~^Vl4?Uz@z!pC|mEGP;zP0QVo4l8h8n^WJXB!
zk1RQBGU|I`_IF2{b{Q+XFJ|ORICV)u-vUw5phHvMbS5}4a{;xP0sV_>+Kq7}|KxN}
zQdywoQBr4^$sJx$wtUF$b@vfZ0eRizf%c^lvJ1{q2DgF25X;mDUnyig`=--fYHi>c
zU`+wGXo~R@5QFyhT5u)Gi;vX|sPDSa?I{)DbG}33`jJOM!WA{l{BLlKgj{IY%qX7v
z9VMZR?xlP{o%+p88@GX%;fq=(*X-P4-`a}D9Vl{V57~nO5@Cjnz<Emm*W^CDA}RLj
zmgTMZ&M^12N5(Gvu2Jq+*s!k@(sfh1>VU<t4$}r;iz1u5AFb!^*Qryv-(YSy2qk%b
zO+!VaXK;B^d91a8hJ3LY&_z+oH_AO=tGuODFhC0+2pCxQs87UDDq)*~(kNR=Ayzhe
zzC_ItIVmT&g0Q_V*=n&WJhQH!ux=xm@<hWxfn=&W#bGOwIQZRJ2PlY33kyYm&VL8V
zi7BNI7EOvDi!#Q4{}>)0%t3sKlAvPG=JvPV3jLHJv)I;bsy6s~UEbJ5S7>hyN$35x
zYVP?nsXWDmQsC5ufNp2npgtdan{Rc)OZbJIvs7M<xg?hi_Yxf{8z{H_s8)wou6s|Y
zXAaZImYMfM)h1HGq+4BqA&yzXUGnEf+Yddk@-IrygI&JrzjWDjmPQ$$3Z2`G4rMwm
zxv<|G(t4lAeYT$b$wPPXu-rHIk5O;hnx?t!)}7V(;>vj@+&ZllIGzZIE^a^<XYPsV
zVG0o*I@plja4FN<i<{BGV#4Qj>!yu^qFIMbNOIHhlK#T8@*XEFeas(MJ021z_PgPz
zysk8Flls?@2ibQ37$WQFklw$0eO3wDgez!Z6p9m&L+d2|KABG7X`GB(;<b@FrA!z3
zR%K*J!3dwyjE;7l@op?OCmMLP@5ir~jJPJD(yM(ro|ye?4V4ew;EdHS%!TW6W<Ctb
z2(<|1Y;~)dyZ|;95UsIqC~@}7@X*4BI-jCt&Q*%B{G0D7e5K2Uh2^s?RvIxwd*XZ<
zwcAWm*n{6cRpae#zo*gp-;S}8j`E?VWTE?d{*6)ir7Fz`9Pm5i3_#P*Du^8~vb<|h
zuV$!yH)pl8;wdn~frR`49bKZ*ofEAap(?)?ai#W#S49(td%q}Xgzoq|T`pdfFvIqv
zIn|n-pMqwQp&8-rnxJFOd}qa!rh#pmFVG@kECex*2v!eu_uv^ReR?S;(|K4|m<`*1
z|Gr5hDKyoVm>DGicG3~21|Bt^Lj3!j5O*L`{Sq@J&Z{R{T|zQ*P7l2|uO-AD1EFTR
z$$v#~%CZ+kgDI!Gdb^F#J>A^Zcg>ZQGR@ubk>5Pd(a{dzl>+NRcHB7{`PF<Jx7@8;
z_c`j<97ZkQb4{q_)jQn-Z9`thkBg*qzo<<4rZ6J``5a2%b5tdOL<HK@KGMMW>(AeI
zym4M!jP2h%C*i#Jidp7YKgCq+M`D-HVHnoN1#ci-3~NiHMk(ohZ^nql`1giVo&`&m
z;lhtP-=J&YI`R+2m!}Y11KEutZe~nWQl}Z|hG&OBYiGAXm}L&w2dP4p#z(%-e~0ff
z409vMp2I@2m-tyn(oU1}&7<#hu23}<VoL&N-+`trw;tbWjk~qRf=TS@dIZGrtQWv;
z834O6j~s1(Pg2>0&hxP#&!0q#iJjAZKz44Gyj4${!vnj5&5&{@-Hbd$a;kke27=a;
z4N6(}vPH{Ty@c8HACOB!RbHP8whV8-c`44g!R3<dYoHw`A?+}ytBC865Efm%XCn>b
zkGLS)65Ga1Sm|eMg~yP+$=(|3dH8as8T`p?@I<L)p;gu+`_*48VDh|BB(@}Kp|3={
z)CGVd0dXz_vDr&YrB$W%^>sGnbNS-LljTcnX5G##0e-hy^9g$`V~KB7?6cRaH_X|?
zjaX<diQ8`{DcDGfb0k@Fv-rG-i_Ig9T7(X5qYMUQc&5H|cP87iOTGxn3{`2pMYkWc
zyu8DI4#~ojtId~9JMEuYkk@2A6n3gEvJvCK&3R6IWCVvzSI8T1)|}1z>?Md0kPxJ#
zsK^Zs-uZIBf+zCrsN&Z=LJbRh(U4q|T>~H@QdXS9?8;z`Swh7)K56be`McD)0;0PE
zpo$Hdvy*D~vrKEzoequ2A-9ENM8>=^mRMxf`L|!^IU@6N;rC?g!ak~tJ7SDtVwNgM
zKREhB)??EeO%tY$`B`!e_gm(>9ZBo*qX*=F4>Ql6;B-;8oRbuoJA6)|cyJX#g9|@{
zi7lhS)g|=e)D0{fV!E1<i-xRmg+~h!Mi=={#xkCIWMmQh{k~WG>&gkS?V;Y)I`28^
zx@{sHhci~dtnd5&tY(#UHC?^PMpIbWR}ui%;S9{XJG&y{48;P;W<4SRfhGNCHuLs6
z`JAn~bC`=x1@qrSW8dKJPd*Z6i-(ILQb`ZpS6Du-O03mkkPf4cciHPj7WEEPTY(b}
z|5{X*S7ks&e-zP}o1AT_6PfEP<3YegQ?Rk6?OwIn-)iT-htvlxf+)t3^a+#MoIrJW
zXLXtVk^W36OHK3`;?h#Z@Q5tJq*00GH?=s++enl8ah8bXA5&i<(hh9k93VS(KUn<F
z*un1pnv3q-h==N9Q_ZVo+_Pmh+4pa|E(wtD8#D$T0~+`dP8A<qy?l{{2BwNl2fh!u
zcBYf)^KXp9+mP{N<x_`S9T4ZT*Z#`+DgvN_5`Oc@N9sb<58k#_J`sko-#UM?T}<kn
zo@bgFdkUpU(ZYKB6vEsfN=AlyI7M##_L;Xg&fmCYoHA4M*7`e$%#;imF-%tx{Guf4
z`z>`6L*6Ddu#ciuYz<zF$VnBOoY<7gDC-|SR$>`VpVK{d_AC9duVV6bk*uEWsv@z2
zm=xmp2u^=SM~5@>Y{<3HYh}PW*+)7UNCXUtcu)cq&e-y)wD_dC$)%RR>%?nYuGM`?
zsF5jRBK)gnB$ef6w94>=LP3-X<@kVfx>dRV51B-DdsSPMj0as_HC&f8@UKeHEoF-w
zi;W*RJ)}Lb&8f4PV0Yz{xXv?}om<d)sYr86-eQ%6IT#e59_kRH;h<{=9_7)4nbNBD
z6>L=Ro$T>vl1Pw|U{47eZ$g^M`L_a?Xf1KGOYoRvcQ;Bl+qQ75;tvFEsk;{JZhaEB
z|3`^M=6frvXgyC#z5sCaeO~snul;sc3XZ|=*Y6)LkB*fT%cBNerHUWtyOGM)mbYME
zI0nJ@XJ2)=p5KUTble%8uav3=`O5#u0WA;^bQV*Ycw`|W*0x2oaY3wcnF;2$ebo|7
zr&(F(?+wc)NYD5fFHV|VNY%`#$aGblkfE*sUUj-T9r)`LttuWgUOWgo*rbTFO(DSg
zQKdWx{<{YHp{2#qOAW=r;yEHN7@7B|;!68^5!XNmneeXyA(?T<KPQB$axQb6DnQ!a
zpO8JM^jAfldt-$(u5sjifB*SGRDi?!ioR{%yZx}&ESDpB&xGG#>v<a9{Vi4B!A9t@
zjr0joOt&6zv=_~_4D^Fbi%*-Ia2%<OX0~(n@*({!w}gnOrs~ED0W<qA*pNL$k<G7U
zd_#x9!uCw~oEKfOk=&?I?JlkGHjai=a!mANt?7>4z0A)EEoVht?FEK9!gluPy26W%
zQ?7t0W;N{p<&5v46w=61%_|_@xm8ch2HNXb!eLTp^k$wZnl!eKPeU{Liixp(id{6x
z1wfWAtiszjy2_J2uh7%LKj;`8bqfn!8_1u8x0f$IS+prE+SK?$n`R6WPHIXZ_R#MM
zP@>G6w9;sy^`wcuR0Xz14s2lQ=UGL_P~CU-N6KJ2#xgz?g=itq3j%bWjB2aP8!!#k
zXrQkJ&?3FirEXD?FUTZp6`)s-_nvd6pxFEm3e>6n5!rnzKA1Vp$pHX(QKa2%W~@u(
zKO&1yJ@NY^1JZc{vilV-u<Aq3B01lbr0nUMN@HV>?fgtvovFrv9flL)=l<nA)7z_y
zE_&V5sh*;ra?@wc;5hJOwh$CJB3>KB&&rF&@!_}?@nY5E59#)mmX|o5*!HDYt^OLy
zahMvfLYmFy4Lk}=(avRxVi~W>RB(MOyAPHl4>(QGoQ39IMDY_j`GSbvLK_-TNKpn1
zXlo{c%vL5yBx$s{ulc7&;}Wu+hx_e#bKWaz29e(RP>X1^db-g)$3>YsjE@&ZSGj?O
zc_=c{py3K)UJ#w`+i6rwIILnY?2Y3Cu_pU+XTGVp-$Xt%TuWYlohNY<<V=wNfSlK@
zqev>&Zl9G!ai@L#oax0Vy=F~^wZ_zm{+s8J=ify3m>#IMEVG`<%XKoS_c;X1o+khX
zt*BJxa9Dyo^ywjtX194RH^6Tu{sI0K*&0bzyLK9?B|sCN>qkQ#0CfMRaIUxS(c<L?
zj+y0?a{_+!>MHJ_Is&EfmcN$Mz@Am{F=1;XYfrU`RNuVqC=)&}*v3?O{_RB;x_ja*
z|8^>T8WV4*2OFnvXn9i7j{Vl|W&eh3W7cXnm>pMEjXi&CftgM2Bl}A^MW5fllW<(Z
zppEM)A$@e)&bP#-d+eUh2i<{M5>#6Wb95@FLo&y-I?LlPiXwi@&(!9nmKqwq&ZDCE
zq6Ki|R00TPyKUwqMfp#6{BSKsPvZ&ft#gUlvjEg)ey%wT{Ff?BX_@tOLA{fKtZx`F
zyR21N>TNaEXbGpDd%LPhGL`POX<!=*X>n<z(<n~T1qB1XSiw(I+O~7j?=?HzKZLW!
z-JPugO&q4ia-${OZ7h6X(eg{b26j^@mw&Mh_D)}Q$I}%8aM?Wj4os+`<N_df_u#tM
zM(<2$>=e;=a&x^U&ju+%K@kq+m4q$nx&t1!Ri?}c+;)|-1-T&LNs-vPsCxn@TE|RU
zgKkCsbB%?KCLhl0Nxxg_;X(KOp!k@>#6Zad8K0ews>=@Jn4)N88FAyf$^PC4L5Dr7
zc=^$a#~e2PrS`cJe&zh+MGmJ9zh0o%`&Pyfts_<J#PKGWqHI0Y2-u*f17Gcj-33$F
zbDbHuFPx(&Rs3vJhwGEH{%y}gl{J}>F?9R{AqhzN*>gzoBt$V^l6ClsBP7JSOrp9v
z+bhLArrpIHZ=9<>AC-7Y`80_80g?fZ8iLs~9Gyap>&xtz;_0iaqp^m9O^vRK#=wZ(
zRnx#KFMn8V94~LY&ItUU2)VIQAGnT6=#$5`z3<{H;4_}1i?1HRigo9JT2GY1N7T%F
zMcrndr=S1*?A)!J^(;;XwJi%<kr`o><l`(jM!^db%*$V2?%iQb;OB|PX?k5q^IZKV
zESiyhT-L%)?0lc&%L^bhzE31Q3*e~-uuhJcxxBnpSm=2_MJ{N0<?>*!i%h*J95W)D
z1$Hl=eN_<U#iS*!;cer6K|IOw);i8l^)1aE_MToH)*Q~(m*IW6y(YPzfP~U5jwGb;
z;<zh7GA&5pCHraxlN%*&g0#P2YIBs$aoO_#gxJ3Je8D4&oE=M7$T|ks0p4Lh^!PIS
zX(%e0ZvH`DV?A|#3ZuY+ao&YNvIHLaBzhCi92J%HS@3qeOzyAb<?a{a^>9$ykcN^?
zVV7XfdM|Ncqmm+5TC{q2-mG}-)?o?Xq9T<&gkz+!(ieN5GRU3@2WvcXU!p2Z75O<?
zJcc;xyek3V<MGekJGriA*Dt<_ZgYEaGshA*bx`dZXYrJGpS5&ny!W?&BV*pql90sH
z?!GjJYvKOEXj6t<e1?8o=33Tz>+$=9M21x;7_5JBo3S%7r9S9AVv@`gyx;hrvjAa{
zhpVR)B+rR5MI~C^N@*0boRl6Wr1uIE1SK`JbpOLk!0&$+iZlAV!xs0(aIalU&?l<Q
zYZKYOA{WKcTGtgmuy?KTrX~$UeHE#9S1q5FGZoWwuJ>A~sx4uRFjmGtJU?>cjvVRf
z@&<Bvjsu2FgHuo#u|qkap`VhXuiBGd?$&+XbneprIaeoKPREZ-^159w>iJ@_d?U}C
z{}b)P3VcyQg}=dJ7R!4$9)h>m8clw&Vvv{(3}7Gf^Ph+|RKlX|eLog#e6CaNejUR-
zwMrt43jRCWGAfwtBB--%J15^)nw(K$;+3X18?#PxCxvgr>)+>~lnsjH?$5?SlHO6h
z$26XHW%B0k-sol8)s-1;z1iBasLffE-{iJxm#wZITH7qzK0<E_wW(m<e<!Ec<R91u
zTqNpy`7dUWg^aGHCR`kwlVIo~!Uwdc9t%5E^Y+vBZCvIUs&&naC{~jb%zFbShDvqr
z&&I&Sy*#ulKMYqk-ls%-FB`2&F8d{z{aeEFtjX^k^>(-LbfCn6fJ^$5FbYQti)YOK
zFP>U4hj<89MZESsMVMd?+qSy3%5xHo$r1<*?aRx(V@!%=`JBEtE6_p%#i1rVS#Rt?
zaUM!527+uTZziwD^#kO&0TUxa-;Mq8H-n;}o}EsD=Ggnpq?p|v21Fp}d7$R>;Y!vq
z3OgR4&y>(Pf=gdkp5R2Budz_P!suX2>Crb&aE{QT5trVi8AS_SOiY}MXixbREo39H
zR%4N4yyc=ir`;OGpNp|9T*RByN*Z)KpN|?l3Oct^^HxWta@jyR`{HA4=`Qsg%f&Z(
zJsfZQ?$=;^{3tmGE=e~*;o=_4rP6_#$6GEZuBo)9RU1VYrOtTHPe0@QJZ?6mf+Dou
zf*Gxc*^uX<>VCy3fLc?}nafGL#%MU4h063_CRIVm@c0_yx~((_=s}FrdlJ^-qaM7Y
zYi>gFvjkZbkkUK&`|jt8n#WIWsEYrpHX1;=+<OKO9LqJP&ivn@B*$3af?XF>XXO7(
zXp(9Va*yCFNj)csc5a--d<bzTus2VEvLtw0LHVCnAU6q~9sUj-FF6+V-4WWq0hl`m
zFzSOhU`~+V0?TpxKV9auNmQKwhoX4Nk^fBJR2S+Fgc_+YWFsbc3g_Y%`4*EgCpr};
z*JKpUZzDnSE+mZR5d0-a+N~Y0ad)W?AMUUc7pjx3de9OhnsQ*Ke(hxzjG}B=N`5OO
z3P@g*;xCgsBth&BzFr1up>i_}A`z;GrrY!cY#kj!paYJTa_9#LrNQ4N@DQZ#@eg#`
z<ERT&Rad(;^hE^pp#rK0eqI4-!RP%el7c#s5kj?hFPA*va2%DIcfgv|nSzH!6X%YP
z)l-KZ65b8+MREtP?b&CZq}A(zPbPByTJU0>6dftPXsmu&Uusj;uPyzRdUa|JAFCk_
zwAEp2rp%9Db8e%vg(C{zo%T0?hhYRqEZ#(R2~XVKi%|W!vA>O^=J>SjQT3rercv+P
z+>Sk|rO_&3H>(=HH-Mf8-{*YS(=Z!nF+=gb^qw9beZPncEk4Z|)-nglw7G5v>}Epy
zhk7(Pri0?a0!jvcf-Tu^ZiZlXx?z8OCMf^`i~=N~o><I@bW0>jIJ`&WhPZK<2R`-q
znHe3i`n~n)>BQ|_T*+a>ZPT=A|Mehyb`Enn{~mgrWt41wPG1_G`D%^YlqZ>Tf1?rK
z<*|3b@#k1chl>=71=-hhz>(gjq5rMCE3MOchRCoGAL!d4PyDWmk8LcP<EebHPONkr
zlOKwrYw_7XiCap%3A6?(jO%u|B$3-s6zmXi#c3}+2(KdqV*zoY(GptTYul<EPI2IA
z9;YC=YRQSnjV?{S45b!Lz>=PDjTw_qkCh_~BR9SL>()us>ZDqGX`>piT6%@ei?we)
zM#+(^2n#}bHyvXe{MQ;*RRak32G9=IKhNAIyzQ03Jryu2uU-%^DBz5e*Y<>O)myiE
z7nDwyAvMgJ<_l$hz2mG1b9x^qF!R8+NX`u9y_u-y`HLa++J1BN+R!a@N|rZm+&4*h
zS(N<ly{RoChrN}U?xyQy{}p{ekk1l>P?y5(0@=00Q2N_@&VUe1Cnfzzyc6O10F@p&
z0LO0P(Ka#;L|U=f&?d88n(5w$hiBP!CvWfUp>gCvz;!OPo|l`HWqyBeb)RB(>i1oT
z8;s!Uyq3btSwrNA-L8y|PO>y|I}<ZY-Ia^>8-q;a{(T`b-_u*&=CrEqx~kZpz|F)(
z5M<)Q#Qvc>7WXQMekgV80<5j6aC=PL7WX-fBWe4P-2B<xe{OC4*T0$3Lk%Z1Dqj!+
zWHx>d?flM+X7*Qr*O<>`u@*4}D6FA2udJdr(_`?GB<Y<VGei)B+@tDgkFY9FH;KbW
zkVJ({@5F~KoUq2uHoa!u1U|_L#UG8$ooITQ3r?tb`V)<TboK#*eBK9>YqQ4H(QO7?
zELZ|_@dq^SgA>Uj#b-QGhTP(A<o?|pG&L&6o@zXd*T3#p)X}ovSJIFJ#NG)^WWGSj
zZTdv~ub+=GKNURM4Hx+?hHLIMIIzpQ_g__ojA(3==my>|BPthRW77wVC`?X|@pV5_
zK}4G0vLU<A=zz?RJj<QPdQ?%#)Q%Rr=Z}0aq0C-Cr}$5f0jE?y72mxJ_EXmS%c<++
z`;u@1zftY-8Q=j@{Ch*J<EP;3sT>P)s|j=3gCWc&IV0#)F2L!7bqS|I?!CDwmqkgp
zp`Plc?@G}hffg?o6Ehs^2oh6nTMj<9lgq)*TybWx!cNWSQoJ^oWY%A6xP5O9>jHH5
zc}MIV(h5D<@gK=6C5@ZRbStQ;vb(+(Y&_%x&gZy*aZ?(wQ*F6b%@eO@Y0~g(z8rQ-
z<^I5txb2-StRxlm!2s3I$+6TOb32e`%)^%kMuy_y#X#LNPDI4blgT+rPW=1x8X$pv
zZ?5ilMi=M|sk`=Vf?EoFw(bx=4HRK}atr0O4~)Iv3tHDCoWA7+*~4#^ool<qOfu;W
zpn~)pt<a^FwY?03#{(|$YXp!CUhrTr^ZxQ#nWHZyiC7Cm<pnmE8JeKAmP2O9cOv48
z`+-uA{~pN6=;LR`I341&R;$p*A#+UiCE=BkLqSTdM(`&#TNUo{CWhPIq}hk7$QeE$
zdE#$0o~h?Dnoa{hMNXG*oVX1M!{>l1LSB*?Q)@WcB2|?V?AW*(b?7hnwBafI;6Nc<
zUg2W+FCYa-7+93IPm3!a_*015GISaul2zfxK9WK5#qj&WXy|2TG_jxnTNRW2eK8eY
z23Ra^*xy>laq#UU6`Bsi<5n9{(8P_K%QJjUGb+LEj^bbMgt2|Dp7Dpb5KZuHtl<GP
zx_jfrPu>6Zn6L~?_1-09C`7agOzp<X0%z`q#iE{UO7R$<0-ETGx?i^vUU=P)+_W7Q
zUujjsH0}_6Vrcq114TasAWwY|kUe2!B6w4Mb=SYQmbs(;z%P<Y1o>(p;j`SL0A|TH
zS#-9lcB-`mwXtxB4mj9$1v*@}zh%bjOLl4^7DJ@6!++Q-a|khETv`Xus<IbO?HUMQ
zEq<xlHDHTPPVv@sYDyvRF_(~I0J8y`Luv7HallyygC~sH4k06Yv1Px%HA;{``|o|R
z)U=%@l7^Weq0$wLmj`yL%rS#0d)!1wod1z+Gd6Wky_NIMDn5}?+^Kmm!%SP#x}dZ-
z<y7g~;EuIq(!uZ6=t|)4Ama|dH^(&P#M!dHAOu(L+MPD5uk%q4&=#|KK7TCi`RtE*
zWsQ3Bel;AJ@={l|U**q5X~##`Q~m0CpZZP*FQ&(p2J9y;ZlbJi;FA{u?zjW#jBFnQ
zG|2!!;a%iR=@+-d*=V?6?S$uKsTgEuFPASVb11m3dXKkO+ugOA_h2ATt($&>uZ+$;
zz#NA7+Iw+HE#3Ml@$lf+Tn`~S_7rZiY<hP@_Bzq0q-ocay>{PAZu__8OU4^?1l5X(
z%d~D^2hdt|ly!4F?uT!3wQ6Rb8o=?s3cLrki^;wZNw-&CRvVUM!)ZQyfGrx*Ef}0Q
zqsB2*60q|Tk~OJ6lL=MzIAjOfPUQR|hHDGm5DSxp%6gzDJl%V7A82tQ5%IVNTEWD@
zJ*MOHajzfjj)T3exM`t|CimKH{A2`J?)@c76z_ree3PSqdCEjsdVMu~(9*<n$%ozd
zu)`V;&JK1%e);MLV83y+|Fl9X#^`YnK#Y`xz(vaX1@un_xF6(HNc+`4=6h?m++0Nq
zWIa3}lNlG96rR6zxG}E}Ar)ZuY9!0-7MbcvJP|LcyK~X?q0jn*0Eu}A4xhbSz((Z&
zrrG4^3fTc3G-qYe#B~Zj@A*K;GYQ&fHR4wvZ<obVvlTp{zAQ1{89$&XCEDdZ-NvM_
z*3shQt7_YEY5S3c<KaDkt>R4so+#s!XmRQexKYDxLgm`20I;tCg<vYO+4GuPI3!>n
zhY-9*LfzMVNk24-^Y%xNQMf|r%B~K(e8Q;tMsDgY^XhfqfZua5tg(&6wF5|83)M~W
zWCKV1?-6vA0I{b>ko;rTOxv4WYdsj!<*pI31NjB8&FB&LULsqZ8n>oDR`-OAMoLb_
zkPQS88moCJU|}{E?=#E1+}SW{a8o9cUCW*>&3Eih+h#{eEsutC;H}J4eEmrWO=)`D
zl@N#syX@hnT%D5N<*>8Euw+IK&_I!PoZKh$*FHLte#De)WyhOwgZ*PpTT1zX!q((R
ze%@2jnV(8~<#Oje#z6X?1E}>G)_8Nly<Sha@YM`#vNz<<3u+!V=#G?|2#mo(wB@a}
zNS44GtRId~5u%Bk8)o|AFll*Vz?1wz(O@7ohw08-m%!Q7=N-tTZ#P--z*ksJ?H{69
zm@vjw9=b%f)k?pa|4^Umw>%c!gaLjL+tSv>U+0k7A_H9MB7<CkYj3@Q#x7q|)@ZoD
z{?c#GXmB2+S%(W=7l=+8vnJLsY7byh8v_0ibU;7UGFVI<$_+TE|8!ZB;@KLgke?Di
z=s7jqsxY%xeS5lWs>wC!V{H9tERaDq@J{b$Uhr4@?wOeqVI+y#i*m44LLG2A#rJ1d
zJn~CT%hvhWoplKPH?HF=J01L<fYf6`X>#>Lb7Du_Dp+6{uto6&L_ym?0f%Qk5Mhow
z=kH&Z4~AbWck$IZ0H3oXIo)lh2O9|tTdEV9PNxnam68rSVFa@Tzn$HB9+SlWGRydY
z{Vzflz;O{uVkhjn70&T`vyBA1&svW?_nrh%*wOK8mjLmFe{0Mk#J*YYPhN$SZ$wug
z(vLI9#Yi&{0AAsdd_PtL!^<)AvAvmh+8X3Ag)l8A$}c0wl8*_4X7h{ztN3U~`>;0q
z`@F|Fp$hw<xJ$;T<V9Fw&`Gt!PdH7n>T$32UryI1-M0rgM$!Qsr8qxO-iXHnpS4uG
z2shh3pIqX%17i{*cur<b`yEUjPE#<O_<48C<?$d~XSQMmOQ<Pyh0awoMH!0QxA(2N
zGvE?td0DCpFNh{zqR9dwGD|h9@6()#7<BAoTv=Q91^Ftzrp4zbRE~ykK5^(H$s(<j
z?xYYL;1Q0SzylMEHQ`AzZaJ*1Z%Ukz^Xo}myf9-k5k(Vd6#2+JB?7D7lHbob*3-3C
zPj0^9bO4YffHq5kX$r|?gUpt3t*i<F*>%|vmGWWPEk4F*ZQwafyaucv2c&2vRWI0j
z@Yl}xgza#Ux0$^g7$pZ;g{ps|KCLrMsQs#8d;kRryHUL~e^u)xKL{6xB*j>Upla?d
z%LRB`v9G~F(8j0B4GI_2-YX(@_NY`c=;Vrz%DfpH?W9N7SUjK0S1EqA+k+Y5%ARb=
z>Em_^Rqs}!ihD?1r(Ll`g@fAL)7_3Uxv3sGVACgO&CK!ZvuDg{-xf#t?&0BH>%kLj
zF550fReq=&C2+RLON{b*d<gPlTRh|_vy&WCwsDQSSn^17*ya2*xxIG)00U&Rxh8L>
z%HjLtBP)HXU+1T8q6dCK0rRc2X&y7dAAYB`!rDmtNs0ZM^vY;i;m@=Z`CYD6X(yKf
z*QcG5Yoy(e(I}n9R+;L;1F(zej`iIVP(4_we%|6bHX)f{X85p|-7|ob+^9g3(kqt9
zT3L*(n}jU5<kvYHpb|&Hk+P+YR^M5Q3VsmC^B@)t43hL#oxt(gBD+@Aq@No$#b+DA
z=9cp`^{@?x$^w8^2yTi4KwfrMqP8d5v36&-+zjn;&d7D47DCGr7FD_i=pS+P(kr~)
zo@pg;)Q<L8N%iguEhLA1R;LAp)Oub0S<P*)XoZa|u*(!1z_kX@td}sXk^vc0_@{Y5
zsP2Q`_IEv-O02u^LtSw1${*P6(3SbzQ)yv$QKX(Bg4SFov1K+hTCxkoTzZ$C?FJr^
zJBDQu<X!v`L<m*WQ}|h&DKC$BpfHzw!z><&Nfm<dc-0G`{k^MU?Ac%<gI#78uy^4#
zUPTBtHLT1xk~a2Hn+FWTn}<i|m}x-%B`Ty+JhJNrxJ08Il{7qkfEdp8Ou7z6LZ^AX
z9Gp<tTG=A7$1w|x)m!;VIf`%yNKU#%fGA%XK0P&&hB`mE2P4Owf=RxYCQksgb_8qT
zv)LJjJ6Fl~<(<)HY2M!yGW>Uqvw>tE;7LDimE$i&u*L=KepiBY!&hKNU#^i-Ic?%w
zsR!c?D71vO;flW0?4Gn2{QF1%!pK`hdDmwFtu^XD1Ik<m+T!C)#GQM+nIRin?t|YU
zQj#(h4z~D9=26#AN#-P}gL0m*0|?!&`1@3Q`>brtoF|^U!Xmoe$}y8mpv4b*Gd~r%
zib#WBMRv~q=G23M&`}xBcrw&|5xWNbRoA+Z4sUhEVJgR=XU7O@c1zuFU()7I+G9^A
z_&^#8#AlV*O@C1oo6pv&eWUF$=zuY(*UO<>#$BGHx-XbV>c!I102#8&*7GzvkYB-H
z=+A3l;~PzQ*?OGLR34<#x-Z+?F2}gz+<$cB!Wd?*0e_I<x~9x%qtq2rne^?&x!8J}
zjm{@wzW^8-$j?p5{}Tr;4G;AWf3ve|S#+3cQle&m3BlH*puJe`0j#e{u}j}i1z?FZ
zL+?@vhjEeFEf#i+qs2;$EqDpcFhkI=+B7%KMVnOqh@U~q?e0Zw?sJhiuvtJs+mCF1
zw@I4ZpPm7IG^!Q^tnKt`ZW+QyaVS6~EdDoAb4S&dnu5$jZ~ga}8%(C--C7@~nGR>1
znu?%c%Pe<Gu;!jEphsiZ=rh>f(ic;G%T|iNSNreu9ts75T{{w3MC4IU!nE!hivM8G
zET`s8w~7ZXvrr%T(Hsad`Hb{T`4Fzr<YZT&P6hb&lyVj3r*8HGuASVqN4KOvj;^n)
zG_@Dx-&6|scS_(;*d0VKosluIm{Igw#4vkQ`!4)&$jl9>3$*dsgFWdv2pion<6Aqp
zncF5WJ65dBS9wI<9|GSsa*R6Czp<}a+BjN{lvJ+aJax||Zu3B)LBB9sPOXU$F`tAo
zfTGf-gGLTJFD`>kSDR}H0RK4x_R5;Pi1AP;3SxkBJ!UoWQL?k=r?!H~7`rP^hhQ?d
z&kYw<Pkr{sD=2~pdubU~%um?A4Kg`0a|qW;yN+oHph6)+-E59=g*8ld1fK{%;E@+x
zjIWP!Uo5^1h0#!xao1@Jf1CN{It!xs{`a8hpFBLMNlcoVw^lsDxTFzpm=6gYaw@hD
z%nGUD8}|p6LpCHFrVBu9nGcdycGIu3eSXcNH{p7Mfc^!ab=3aIV<T6a1?j2Q>ig7e
zZV63pLq&{n$&?g)P{KBNhwT(>=+m?w@hEAlBlpLP>KHtzEc~qtQsE#)>I0M?tjFil
z;vEs=Kgr$yw7YNcVDbO|&Ukk_F0dY48w0)bPJq6Q7*{UDs=XkkCpZfWUh2^PndZI$
z7SuM6a<wBMp$q&KeQ>38&(s&!|1)!7sYmjX(0@BeD2@)_|Caa0yeIG|H-1fJq~#V&
zrKJut2XnikGN;{xW)fvRNN&@tUa*9@ZL{jFq9w-gPaCJ7-D-U(WiygB22X@8kmYGk
zwX!6vE|;+$T?yO;HHx`mOG!|dr=VC3Dy3?7G5Q`!10J63f;(u(bK1Z;8}K&*Am8zu
z;1CO71l%&>1*ujp@cY#mz)<C*bWpBcQQ#!(N|y(8j_8j7-;JzDavn7T=dW+-$F=?$
z3f%ZQ))m|8_#J$rcn;E<7rMScl>ND1_=gg3zc6#P>@+m&7dLQ)62^lZftu&MDOE8>
zCKf>{V__|D&(R1u^9uT4qX6A={5gKqYWWqosc10-s;(3iJBr|HW*Imr1BmsxiWrC+
z1xH%|v5jC<jh=uxXyyc2=#FIsI0OX#mj4Bv&Hr}32kvN=9(5i!;c|p=Sq*csA#HzN
zq%=n^Sc)MM6?Q%Vf?U|3lPBO7%j<`aL3QENTa~w$q}x9a81$eoih>-#=TF4=i(u&f
z7s2jCur0Ax{Sn2h(qf40%rST%L`Koy=Rl1Y(Bq{)jcLJkR@4{p{7O&J0Lx(>Dc$#T
z5=x9;i9YJ?n)>1UIdEcwLXqCw1P(5?iuE3e2Naya6;n%Xq{$I+ukIcVmw?oa7=wC0
zyWLU;$}-)CQLQf^^%TDRr#IKoCxRp+^nw)}D1rtk|08boYY1F)X?wEeICSiVf@1!w
zrs{0MlMe|?-QRAh{P5^OkG|!n1h-;c6aFmE2Qd1LKW!820bS>h=%DC^Zq<g41-sq=
zgMh;Y?aAi#e_MHjR{#8IB}NMv4LqWhqUWxGCC0J}vMfbWFu~5B3HmjI#cjm@a6_S`
zVqmHFcjkU8@Im0uI2FfRSdic{>}_Z=sL0U$D6SPcg#yGKSlW*G4>xw~pbvZ4p9uwm
z!50go7Y2};rB|N8Bs{5UxBz~?(o+JY2($kk8|1Q)D#)3e&}iV+Wu#&A(fJUHR~M8G
zGUv<84SiouTItnBgG&PCKTrpcxfSRsie8thbj@)L?8f*uvP<5WQ0wd^U9pyZgWv+k
zEUie>0ROM7plCwKDq;sS{1m)E1G5b!kRz*E&MMdNL9z2(R%0}YRs3DOeh)xpCoqXv
zuW+^SJ9D8Wa=eG^NlWn(=<>}Wi`H_Fn26^SYP^mz%geNOuv|0NY6iefQA&XO&WZDq
zDTkU8E_CTnfEgIRFu=$szn-6V85&q%4+8b)d7c;x;ftrKlwv0DJt7U{NvvOFW5ymf
zyuzH5WT$(34<;gYF6F)DX_cN&(Jo>ZKmq6@+n>v~C*0a%bPE<Yim^ui(=a6ku5hOG
z7dO39QQEK}AGSXezWDY6I~dMm=LBFPgGJy?X)%=Rp^WpWjGlZEWPKgnhXix!^2Ivt
z_BouU3Tn0+nB|EXA76^MuO-y*ln$tavuMCC*_VSgm{6NlvA#8gX<w!6AtgpOgYgCA
zB^)_)x+}nO1=udi7BUHNr%0HNN8`&x)Lf2Ly;@>b;r;Gwh)ZDbTl1qe{)+DtxQ9HD
z@zyU$|Ev9Bd#xNuR)wk=hypQWmcOTkwf?lFuDA?N?g4{ViECAOyUJJ1>cwku1_RNV
z@bbl^e7erpZ|n5aD{wSqZT{et3Z236>FF2Xz74qb^C?(72+)|r1{Q*sP23tt{?30|
zwU0EtOp3ph)AjbK4IfMGC0MK5Si@<7us<R?2N+;A?}0@4oEm^J6$30abj_Fh`;{YJ
z9<GAB-JO4g!{_XM`VUok9$*sdKa+%jgHe)q{_wL8+-ofG55V~|J)@BVDg#(}rVF`2
zkv|+B*QPzp4#Oz^X+Qoy?H`vC&<rR3cZUfrZJh0VqLj*z_OPFyXyxW`g{{8R8AEyM
zx&NF6z$84ppz-Av{eKytOCJGNC4Em^{eQ?mR>9K3BHBLBA@}irrlqtK2Zs62;*(6a
zmQT<MkI=WUC>8=o?wqV2+3`PYQW(*hM}~^5CeAEhM$(#3`EXu5wbY!ZkX2l~R#h`&
z6Nw_NuKVnI_DLQ985&B1&9*4CR7FXehV;4h=Ske)+}|`mibPy^JA((2S``4If(?6v
zaSbyXLa0XoZVCaQ9FE#uPxS>w#S#R5nyeU8;k9%MK;0b%vE2h<mdH*JF@Q(^-?O2i
z(^$>uN!N??s-OIM-%8*9J7uf0sW{)jIrEg$8l>EhYlj7ctPk|}i@epzIC9shv+jZ=
zJ60`Fp=b1}xF}*K;D9~Ft#ip|jX<_vChjtvh6*E~PNZC&q-`K%P@#D}*=_tE<Ej_2
z!wIFmQ+SYoNhBM{q+sYIrxCP5O}ZOi4UYJcQ$eLR-Cw~mLP*GT<}yHdonqpMRmW`E
zVt)Fi{04C$#xW1ecz#Jygt4{QHALT2-?gmjr2Nv<uK(TD9qm1mr-E#enc8aXw5-#7
zR=AiN%5KJO4o=VQM1)-)0O@J|nZq`y&@#2N<D{K%jEGh+#nN0)$$`?{4?!yGfWt2@
zQ;!3R?dVwLKmB%xZ}fA5tWVuWjxkqc$VwV%+m?vkF&oU__B|?eRo1V?Imj}~&$yci
z0FJ>z1O+L@WLb$MG8E^g5ll!`%ug${!E2QN{#eF=K&6{6F&2BCy$|r8W$Z{Sh+C<=
z>${G8RP8@cpO|B~Sz92EpbUKFNZNE5htJ>H1cflpXnAdv*RS^(ecpt56evnz0j}gW
zs(Zna;@RA`zc&{dlf~*(XWcUAwLO5=nAQg(R$@>9wMQ8}-(F(`QU7uls1?>_4A_yH
z<j2aD;}P|Dp>P2T&Ni+mXE4LbVHtB{O^r(NCN8mYf)lDBHo%53n-xSRNia_>WGfs#
z%uTLSp}in51f_=d`AZ(EqN5Je7E|YPQ+<pUQ$64NZ876yXNXN%-L<p1C5DC2*r4ES
z2e`GfwOtHebnc2PlEEKF0NnnF-Rt)(0p0U#82ld;N7hm2I=KM1wA@YDD6Og&?W)gZ
z90`$Ni#1d?U3{o!04Kzi{Iqq03g(6Mw;>^4PkCAQ6dTLcNNx^;06mnLg9@34G`V&l
zjRi|1>OEn{KoMJ%^e&f)U&lODyoB<zB!&Rp%~3%^Pi39}v%N;HrOasg-mv){$w{so
zj1v)YD=7@WTMqo!i41N%m1a<!2I@)B@^9}kq6B49K_xEF+811{L8m5=$Ia?-Ycc4@
z8V1)tsImKZ(?E2Pf*)@aa3qbt!6AOy6UDW(BS``Y*y}+3>UL?dxProxSWi3wq<2H8
zsKd6mMNvbBwrNlz0Hm&Sz+x(c%GC_xnnsM{K_@#H^%Kfj2-N5Npy~(6t5@u<Y;jvl
zcp3vG048nXJRmdWH3ZTD`U|jz&1G0jR!T|=p~M%&y--Yx0a=Dz5YzsQuSfm<p+PvP
zU0#N5p{qffjQ7mR^K$5eHTbLDF{fB<dH2X^Z+zq7q7QHsyW7Z3RJtKZiAKJCdtR;>
z;vGbNcd0M?d68U6o1k*)PrCG09k_eQY3A|w7OGU*h#}@U^s86uKh;FRpJJ6#z#T)N
zb70YcE+#YNc-=0hr0@I+g2=6pTuVPR1fkl+2srSNud5!j{Ur$XElgY7+`pra|D$#;
zw;He;L%<<>z}Mv%H2zy=G?cHvOgP4K$?a{0K}n#csfDF4K@9O+{)ZbXP}9o&y%@ag
z$fMswSVXL~VNBNbw8J9cFn7(obvot}SJ-fUCaxwVkB~B1v7cBIGjdLo3%+_Q`k<(K
z8p@x7d=9r--9b_!9kz*3wEh#-KGb)pJyUZqLBM8DJ_717UTzJO@2_^45L63qvmo&L
zlY<y`#?8n)U;#foF!?}cS#Kl<Hu<2jo92zAP8dXHqi=wL+wBlhQlA`Ip^g-qwB1|3
zKJVnZE6oi2=6s)1p90!8IRzf|p(9IgC5aHy{TSu1^2jER2q_C7i>TnA{>ugOTnkQH
zZREO#K&04!+5MOjh9GE<J@TLKmaeAa&xI|`9Xus@3TWd)u`ZfS7zN^3A5<MA>=#DJ
z2aq3dyaVG|>p$gIgU&Pn(a7)H-8^JR4}iLCAwBLXLgSH{8C0?X*<+*4J&%=9!}C4y
zrd6g}7jBNkJ2pK5Q~Ue-6An6hMD$rPwU=I~oeJY5m|gf85U3-?Gr@G*^X)#!P;K$%
zcPh;s*cN#<!lv-kzQx{HX}tgX@<*N%_wMPwRifg2-k)G6_9>yk$5o6a^SY|5@N3?5
z-hW@eenq96_?6}a+esB`=evs5I#kyc@9EgveRBNuxnNfp9A72>D%N5)ky}|V8281J
zNSJ-Z*R_J;srsaX{hh6q#fNJ!#L!ZOJn=;#X`>UiHoO*iJ@wj>^JfmP7W~eakM>4e
zYrgC`nfNRNg?$4Yhpc0biyg+{`Sa%$FuWu82esA1m+?*hZX9h<ONH+<*ZRw?`6nO#
z&=h(68!UTq<H4@|dXs+v0x^7RhL{>9D}QhsgTXxCSr+%%%(rzLX9yUS(IURdE$`hB
z-AZ$HLRojIuJL*-Fwi~1aZq@yP8W@jk0aI#iNl-LU3z)fE?`T9a6au6SLNv1SQPtp
z5D(AfDCesLs6Rm%OQe}JJR(k`3am{U($NzpWxa1dUY6dG7JY)(kAKQDQ8l&c^{f9g
zVj{(5K{_>JCqjsQ+O@WB|COx8w4uo3As7rM{_Oh|;=~hd%?VrxGc#@+M?!=fJmuFf
z?j+PqG2wR6mY?Dd8gqu0=+QBKy3SqY;xC8U*Ep_15+MHUPODQkdd}X)4)42%4=94a
zkkaN<otia;Pk*pTA$UijY%Su^cyO$smRrhIQ~!{}_e4*xQ>;gu?Dfvvuxi>DUL@Nl
z=Ncf&Igp4;cTJh={+A#mc=#l`&z#2zMU0Z|diCyZum#-}J6_B$@eBM)P9HN2@IIf*
zQ$H@BdvIdi@vF?^A3yvL3a?%8%w^Undh9AXpPSI;b8q6;_Q!mN0w6uanCnP?e;s`5
zx3S|8*wG8TW=LzgbLmVtY1hU4YZ#xRP2jX+t;hD43rmpU?mSU*c0&sSpQK??#*b`o
z%kbmMd_^pXi{w2GjKl7F35MBhMfckKZ~J@T$8d|X(62@2r;yC_O?On)UXoA#9v`&!
z0Yy&PQU_zo2YXF?7A|rUu2s8hQ~YWyK1079BiwDi`t;);^s$sV+Sv_5!vs=}VGSN5
z)NU!2QJoPx58GxDviTL6!Hl!eK1Tj+Rk^YkArukszqw@VSmpqabYJ*1*)6s-bGZBR
z$=4q&{s$>*{>(zAKjQi=F5vV{{k53NYU&jY7o>#h_OQzbjdM@VM&LI2i&wT?7})Y$
zI9jV1O5{xoEaVn?UDi1M5lJMkyhd2a!FHdT`1iOQH7=OoB`ncXnc<_exGquTNx_3D
zrWAR-V%P%Xo8SO&yrtmZwo31<3ynLw>L#AV|F5t&0f+kg9>+&ov?%o!rJ_ZatO;e8
zitIaMk5G&)j5S+X%9<r>LP8kJSTmL>lI${!kfkKcFodzp81uU`Q@y|M&+~ttf6vqN
z%<JBB&pq2c_uO;t>xG#rERuu~!siB<xJP<MR<(a{$h;sDigO%KGcYom$Brt)#v2L@
zjE&2Hq!{-eb}#74$e-S6f*Vp7qt<E9bgGz0UzIkd(qM=yLASG^iF$t&f1IlLEmRyl
zIFVoa-eJyuYh+26l3^MyAWjZ{)53R<YmC2nhVuP<?UPc|>W@M%*eyK^OE<}e9HMT|
zVimsq0D>eE_ksnBvrNfof8DM>cDEx5X&xugZgG+{fC)s*9qFB2^YJr9cnDdpuYzq6
z+}Yu_OKH|P#|cm<$8hGJayea;sJ(UF2x(cq?7MMKbS?iI3Qs)cx#mse_tLN`u|i+h
z!>t=n$fM!_E6nmF^TySl`NMG+Rcps3QO=jPAY@`i=h*X63c8b`nXtAsBQsDi@qoDg
zIRL~HL%5&T7rtgqwZzF@QXOd`du+t9rI7IlsQSQnd^<v3v{vn(tn4+sg@9N8lEI%Y
zet$0uSL!uxh)k}a@OgZ@l`@a;=+Ot=hRa=%-&tXLkva&5-N0w~<{IR(@L}r``LT6^
z=4+3*3+w7k;^ZaG9`|y5$NS3y8!#bps`vNjb;9w!>~FNuQ)`v0A_M8(6PU@$aNvQw
zH_TkJl#as+;hre4qWUtz>$%M8y&6f44~fHAEiPk63j(n@O4zW$m2#K_ozX|gRQeG(
zRL`h?TZ_0iTgA0~^H&oY{<#&6B@#|aYwWRF+m0e`?O`vTKr#+4eF-6UyNdL3yiYbg
zxEUAZUeh#Mfd1K)nX-yBH8mCYz@FZi@m=9p=sR=wqdi&n>ciz6nsTZBdQ6@y@uR`&
z?ZH^P3g=NT@-J;l>6G?0lK>)fpRYo_BB*I2NLy!Qn);?Gq)P-DuWYSra|YBqg?K)H
z?^e@<ai3Koi|yixH%l9_#uNtLxpY|BP>+ZV{;npHr}Yrs<;JrE3(V0$L}j2*ekEqL
zmZS~idM+6Q<C$1T`_ib3q0dCa=uT=mS}#WFl0EXJ*rIjjdP^2tS8Ix8j+x7u+(uH-
z0k7y*EqjGI2F87J;in=TXEj^k9S#b5w**Tmr=`1=S}ue>Yfz$l0G}I$$|1)qp%hZk
zSMxrb%m?72Nm!9Ndb8h#yz)vNzVLwe(s(Vp=cId6zJlzH*s0Bc`=Kle#(Y@Fqi~xT
zPVg3&7bMU@*D}%s5v5ynC49n9<$Y`-i_(+Y-*zGQbNN-+c_tXLX|rDdr2tW4I(KV7
zo!`$F8t&vkn@tfSs8AbCrgMS6xtmS4TeS)M&To&D_y2TDV-IiWGch2d>-MG&gS=g`
zCKshXhFZ@AMDK4AZoe$aUD6QuIj%LCA3K|%TBsZ!_TX1VWke|KmzWY0KcM2Mt!fLl
zDg7h3NFbj4<HQjO4qvXj&Nqs<+uouj<2Nqz=xMbF;aOpxk<Qg1Q#Im(d!=65w`{hQ
zZSarMlinQYg-?9gu<J-=6HzBM3ANnR)^rx7+rEJNv$;_Ay{+K&bWy#SW3Qn9C^7xw
zh?IB~ZDVnQ6&9LqtyiRL$_fJvTi!q_Khs4Vd~6f5Z1b8!p3e(8?#v<WNDw1qI*bqC
z>tPcE5~GsE!i%hHsr%1`dY<_gO@g&_1>^F~&{_W0CxkC!S?qbxdk<mVV$NFPtlMt^
z@Q=elG|EWfLy;0n?cet7m**ceSiXMB=y;<!pom|S56dJL3AYA<koHPvzpz<g(27dc
zZ>Bg*3rIV{zeN&cU|8HoYwtPg|L}|@PYNZb1>gVv2HZEGn>;9i3i!%uQj@vyAO=mb
zUL32ndTOh7!6j>UYe&WlkG0s4e`9@N>A7=?3vv6(!Ias?YA!!i?+A0o+9yQ8L9hC&
z#!UrD)_&6AO5<72+z<XsYZ&|a&61?36e=Tm=0`@#)#^2K`PyV*<GUKsf%;`=EpUv?
z7s?{c!`5n`3YRIj8f$Fw($mxZ;HNDUwUP1$L)m9!yxAALazAPrExzC0;nRCU`bW>@
zUya>gJ|B9Pk5DuTFlS?$_c=oi2U<I01+lJWrp0yIa!Whjs6y2i<*{NSQQ7(HO5soW
zy4!II<Ob!KOoTtL+^bBhz>BJ9I+lON)i^GMMyw5ue#Cv2T79mO&#l^?l*9YdSN8(`
zt@eeb7q9aK#vd#t7DK(^vWu$&9#ImWAI3N&S1dLCHy^0>Hx)U`E%!N%Jsg!o-Rr+V
z+>Wv^i6eAW)QUSU*fzd>J>?YK(P)^y{%MLs-tW;zEuY(50jM$Z*CGFP$L~oha7@XR
z#LUw$KldGV7o_FpcL8Es|5b@^Au90B#eWDyGgy^Z3r|euGT1~i5kgr`iQH6n?7Ph-
zcPLWY!u?-)*&PPHw4;JXG|s${`tr@I-Bzvgr%>N4^2ltDf4)O!o7qLx4b1?JtB32=
zsVoVMn`f?)U=9wSi#sQ<Z;*)+57&0f?X0ch-vpMD{H46RySs@bfihUvW+8{~5O-t6
zLdoHo#AoGU|E`O72U#99mo3)#)n^au7N<BY;CrJ2U#PHwT~e8uOYZtyjqZeYExs>l
z&f{Wras&DhS21{e#vM>cIu+C4k#Gppb*Y6^R0PMRlB!`FR~=nkunNgdg(@>$DcmJ~
z-i<FUm%XL5Oo1jYPZc<7+u?e-jls*cKCxX5_blDeDf#(4F((xaVIUVJBqTJlzLkQq
zTiY!m&i%E`&;I>{%$c#58(jze?sZG6_76=g3_g*;>w9=qp5`sly~~Ru6EX(+`(Jf)
zIS*>qj%OMomNJN`f}KVI0lDEZs39SI*3y?e8T`xdFFV&;i9h2v?pqmFb33#bm%(}x
zqolvOe2XfZ4?~L>s;ft>8yZp#XRyEjeBsoS)%b}CV=H6Fj<q_+`?ueKjgqPhv!#Zm
z@g_34@nyZHnLOr4ggq!!rzPi|tjzkHgCf3|dH$?C^sjV7+M<p;`p_GI@XiP?9j_V2
ztS#pniC_jVezg%8GFaxv%%G-ycbYGn)}gBJxBz3oXGvbc)nK^%^-f(4N-zw!3S49s
z+G#tmAqi9|ZIIGf<O{w}F}TBsa-F|B@^<SV)l3ljF8IW1kZc+kS4F7SR;fT)qsq%~
z1KG4=@9JHklJDR!Wb7{vj9ra8VFX1!IHn*$IxV~TsR3cr_`O5|KZDO$NtJnCpO<&*
z>eq(_V5^m8#YNncpB^u8cYTg;az&Bqx)v?{eCvM7)_oFsy9n0M3~>j*c`oZ@{uD8P
zwMV2OVRgr{cZ@eHptOD|qqHM{<ni)`QuB$wUUD~wh%6I_LKK`Nt4oO4A+{Ds`(yk~
zZu$3x8&ZFv{6_7`jrm1C+MX9f%gh_KR@sGhfm)QuCEA7DPt`swN{ds-fRAng2exPk
ztL#|D^a^3;Hza>NY#6gz`pkHw8~gTY5GH!K_x{%p=()!+T<Y@;P;W0;mHYstWj!c)
z$s$E@t7XDLX6lv!7jQ`FPT&GPHv%v~Y$wx61FNX58vlX5XZOkArdfNMEaB^Sgw0sf
z=ET+M%igF4?lHI3Okm%59mExiRYKAF5OrC?H(xlIn6C8~b4Ykq@W?K|kqq+OOkX!|
zMUgjBZgWe(#yvQ$1Qv0=xU7xg3^eZ*_LG_+uS$8lmOj+>p15jJ8<+8l>X%gd_wR@O
zyAMDcX3su(q=$H%4lp(4=w4V#e+@io{g8lq$;G8{)i~QRuaTCxnbXL?x#?-V^GF<Y
zLIIvH`EWCyRHtGuH|C7QQ|)5?2|-KqMFMO9Zh^f!9qC|#n#2AoDwN|cgePtMj4x^R
z!>wmht?5k9b^b^=X<>UsV9XQeb8)29VyP4=66jm^(qgT`%*QGSrdiO6x;j(3ekb#z
z=5~g^kkmPA5L8~bhsHY2>-iRz2xvMu-!=t1cR=%{_RE}zt1I#!lT?v=^Ei&)K;oq{
zOAg4xiRPN=lAW150>GK%T)<;VILRWgwlZoS<{z!q?(&TxfCb)(`Y3&+!=EycW(w2>
z%xrBAdxnT}o~jqZW}fMdcd$ZWG&NBd+ThJ;w|Y^RBElW!scSn39s~Tsv?~H+k0%Pl
z!*BM$5EQ@B%>-5)aIo(8b}bYaVas(lP*Ke>8OzTkgQ^A_@lwXfmuR=A=@}W-6vdK{
znm&BR&{{Nl$YY}?o!~b=oH8&l@Y<lGFLa;%?1e~){l4_L>I_4}m$M-1uqddsA@`)i
zQ4hXYINq0)T|~hzZF>0Ge>*lN=J$xYcKpf9@pe9#<X+FA#v}9jW^FLyUG1XF@k!hP
zmG`pnnX)%pRJ8jRc-dx=b-n9vpfl1hFJPLW>QY8E<ME9ZaAW=VLjmO`R6{Xq`&u?+
zgcxwXi}x<b4kBpgk>tAkf9{d1pPdFw7LoUfZ{-Z*>#Qi>*f!)d6o?wNv2|9!+T~_8
zQZ(|#@2+2=?p^pSX?+o4lVn3gTmw4A<DN+kSl72}zsl=+M`snaiiq61bZvhCollFO
zr!DWZxUu54E8rw{Kevw!h&Z^U&~Vw*xzJ}ezoS9Bj`GvPu@v+jMQ=Xrc;fw2V-JJI
zJ|f~sh6ouMP7vW3{YDmx5YOYtxsF^<2A}k#>L0M}`DJQ2&Sq@z7YNyq^q3bXb~n{w
zBB&4|!iNoIQECXMhtzf-%J~MFxFRLag|d|8KpB}hBH?MG{DVyV|7ki&4Fa2^sNw1d
zu%xI_@ELcWJdSfJNS;uZ?-Hyq$n_h@!<VDjk0vqvXXNc)yB@h;{}0s37WXf?9Cl&<
z!FJxMAk6*df8h2T?I_p%4KRbVbD$By4y!gHE4Tgwc8v;_`zH>ig6&JPmU8!rSKO_G
z0Fk24@6-<CC);?jn@rR=_Q?=EOqaeR$i{!;!+*g-afL^3{Rv>H2?N~O^8Si5l%SIk
zh5tYXd?XA!L7BIL7Zia5W7xgFb);9XduIT0fhu9y2)cyjMKvPWA=%7-<_%f#E+5y?
zw74X~kKy0?rH4?DE}T%5{3EmrpAL1l*Rx=;d1~&_%&G!QcM;l95c-p=_b(PZbg7@e
zg%pOd>7zpq|IuU2S#=Jt@v!oud?a_9&zsMmNGD*Y)bw}2$>3diDv{YU{Ewi2N5t`A
zV8Wq)htuPE;ru|xvA<&c9nSOF<xMZ|KC<>#YDaBZan0FKl^51m2&a}G{SW2~k$XCV
zxBm)>9-qT^BNb0RQ}~xb+PNZ@MY%9!{D0=dJ-L&_!3RQmx;6ejf(Uy=>oJD?Rr>Ce
ztte4GtX;IOWA^g@aDh5>(kPwRDf{;Swnv|^$0b%zP_Biz8%5iUB~(36FE=Nk(@pdW
z_je8^R2^JSjt7gym>NZQG(x!qb&)Q&O^dWseSh7}zub!YM}xFiE%!vLv@c0P&9dl9
z!iKQOJ2Pc)%CVq^epgC7fd=HQpZ_@VPk1IcT^$<T@Hl;w6?Z{&@f2T)4J!<-2Hy*o
z_xIoHE=|c<Z1L1G;~%S_CKE<HZAZW~+e-hM_djzs&ZZ8)4=C(D+wq4dkg$7Yf~bq-
zVEQX5MyB-J$6=+pdmlyoQHi4Guoe#OJL-}!E#6+0VLR+#;$@mY7(3Q+AG713EQ4<o
ztA%-+ZQw>qmW)ekHcFBMHh-1WOg+^=O7agVp4I)ccKAeUJl<BNdttu4g5^E0=oj17
z$6K$z-kKiP9(+eY8OhVwnS+w<ej%Y^6+nP<bEdEyYtli4xFIo%kshP>-8$4r<Hz~2
za(AE(QnKy4LR64FnOu|~P9VAF2VNq)7_{(fL&E?Z(}U{g(-r0M5<`~MJQk>1Ew2$Y
zG5r(y3a>oEUzCB=qBMRpaSepuSQ2b#8ZM(+ROZ^psGsk!JUmkbGAo|cJO+Uhm<#TL
zeV_ZnbZ#8@zDKQI>0=JV5d~(XiT(W8M*abwgNY2*O30ow3Q+`*GVy#bBJx>1ih{>Y
z;m2yVL6VJl<QhNDYl{^JB57(~2_*OgKo*Lck)01s)G`FLx^j)Rkxk_qGr2*|b)NU$
zjsX}4Qd86<2sL{Pn3E>TkgM)|TitU_AoQ6z@U8L>(!auD#|lRnW`nQmNVbjux8kF>
zN2%aMD>2Kc>3gx#hhCdANvsvnG9R)gHTUTAoqwcmRb5pNgy;EM{<o<KK#-Ft7**}J
zL)R;T$H2h%ts^Ms4C?nz?>B!?1-V0N+NL^yG}9=(FZ9`0FmJ0}eU#@dk2R_E)^sK2
zP>xn<Z$CYR8OZ+l_e@FSUaYb%jan6C28Mqe3n)uyx5X|Rm6+ycS-BypxgzR>k}e|%
zstSNw%xWGEe8cs;T%~f$%yn6>|J(U`&pCH8;is7=$eYZ+PShUy@?hgr#lqnY@6#&e
z*fVdyFhfJq#p>AI8(eM)V4RR2=S9Ecf9?Y8+}fx?qgNaO$EI&*!w_u&zw%n~x7|L%
zhbErEWz{VMZ-Kmb&Qz>|D(_)w&0JTsez^4yS>w1~e?1@qVf6P7L|jIGURac6-$4=K
zb<cVsGkNz;4?8=%h_?FqBSX|obxCbZkFRX#vvIJ$vL+8o9_wcE+#OYIjfAu509RUv
zNwf(V{WLmubga0nPOE^jtO3YDO{S!LdT?5`|D$FG9ONPk0iq*8vd|gIb_!KF9BX8Z
z96OFH^FeZt+|n)!LIe!n<&6fpS@R<rY00Z!cH9VArkzU(LAMj+iL-ZW&rZlXg}%mC
z1OQ2)_B4>E0^dGJblL3Gr0Okm6UiZO^ZKQqUm*6^A*m&H+7#~NB45koyuQjw#mziE
zautQC<JEjw)JSrtyd<o79g$yiGa6P9b8T#-%0f$q9Q`7TH*`&y6?QhrtNzx96HjB^
zkl;@Y9Cgf&)<Jj_)Y~+|M<u;Kc#hUAQVZsVT-$G|&3l8qLSDCAC<xk#LsJiC32R@v
zhFy*l^bi!l0XPqy2PLc7Jye@~h<)~=E#>6a8415=Zik-;DHm(<x43=k3GzFeiHNyD
z6?qqL{r4huYqesU`Uz`aJq}Xy<4KsnfjOyw<(!D)GWlhs#w;nHCp>@;*QVjAEibBi
zfy_3v-YU%84XA^q_-A_kZ1_j%0DGiF-<2B7!?!mxqLtb8??+Z!>%IvAaY9cfK9Ufv
za*wK!>LIceZYr+JM*~P;XR{y()FjI&`>7)Rtin}ai*z;v8OvpJ#1%UWM~k<hoMD_5
z$mq^F(UWOq|NJLx$0w7xb}Ad>5%T~M&!0cXPuVJ`HL~Hlm}&-4(%$(@-iEg5uhr^6
zr}+m1eV^9%L8-~uA(*#!eU}q8-q``!bk8356EW*ICV^4q+acK{bZV$(Wr1v(8GkBO
zATQ#(bsWf#ICwFoy~erLiBsB>59f97g>USP4f(rz)YzzjF_)W4myEi-qo1>L$=*Y!
zUjvWGA!JrVUFeoR50Ise_+Dypz<s*tMI0zdxdh4PJJe0Uq%-krsUtJ*LO5bL<UU#;
z1g``%@z&zz43_n^Ne|*;!&trxvBI)5Yc}-ExfaXbvB8YC_Pz?S$&_h4gKYXag1e{+
zQpi*_t@e7qt#xp4c))&4z#hr@SyEcgZvHWtQv#GPB*eup0XN8uo|epX>o1JlSX|PY
z5w=GL+J3xC?Ci^^_F5z&;(%Sn-d-BkAD$W|c>bz5S{pmRw#}lna-@|*_ui<c*kV;Q
zWKFW_fH_jqX+3A}t584&sD)|ElLcoaunOD1CJ_$(=q+d5%Pz3eF^x;#Th&)kA4g!w
z!0EvugQHRP2b1h#S6@X1l{8JrG_}l+s>tI*7$xv`zpQ^7Y+L2WPT`w|EWVV0O5AI#
zbCuXo;JpKZ+OE9trZMaX5>I_psa?}OrQ6mZJ2_BgDbNk?zs{EWdz(d9LDY&*w4zQY
z@MA$O<P~s&50Zx_eDo8<AAY!9`_>YaL*Ssw_zD=x|9?%y`)E0+YJ`w}sU{Yn+Qg?m
zn`FwDatBZbxKR2<1q!mcn5nr^=u&Y}zbbESX=otuFmo#RUgUukcHM?ASSxa4S_z=E
zReWXNkp~JJjXS(=CtMd&oBZ%~VVN&aDcxRDLMpR<(W=y_SLM(5iFi~7_LS3UPHB5?
zQk}e5t8@zRiO&Y46M*ljl-NX^Bf4bmNKaRBIdo-C4Se~MN~lg2wkY-Jtyc^no+-%6
z49dYakY4W18Z>260L%GsoW&a(q3T#IW3cf3Fm4-nVMC?f=oD>*(UG|+wf=}xSLgmM
zP53u{L;<1WIb<v!_sSbnF(zusTTm-4CD32WmbHnd6d%#8kV3rkz5t3Rd5%cw+sEay
zu+qSy<Of!Ihhe^kN2BNFrXE7GG;42PxQ)fvfx$u87>Y20MvsucfH1@R(mK$!Jm(pZ
z0j3Uln&~ojEXra0n^A>L=E+QZ)YahiNcR}R+ujv1uW5!2Sk=QTszOU-nB}9SuE2g!
z9P4MkdUz02S*R}QHBci($}@E$LWSv^F9_t^??^>!q$Iv#hbb2@c!t?nY=hfg|6etM
zT+Ct~(>d;05HBLWuoXW%UII0fjEZNN<@^)T9py>JaJS@Zq|`rRgC&+!Kz#n5Zg!7-
zTSRV)JgghQ7F3nxUlx&ot4_ozJn^$YXbK2*YLRw251xJTC)|t4u6V&C!Bf(p4l~re
z(2DBb8M!&$22Ck%)<rN22t_$pKv*GvXXOU7R*u0j%=;5<G?Dm6&+QFeA$$HF({_hA
zT%CR~uZhfudfyQfW6u5*sf*|hw5bhh^&5TOC?80TXu-(^{Y5LW%Z2THE-0Lubyjt+
zLm_G)PC@lJVJ{wR;txQMd*uxnOyH(?Ls|Oad{{mS5q~Xx#0678Ql$i&_HBq-*$FC9
zw|ygQV)PuwyhqI5zk;e%K}qD!17}D6GG|kf`4iFlso@ovh#~vOzwPB1&BjXutgy)H
zCG-c#tG{PYKJL*L0tU28fO5*eQEJ$v-E}e0mJUu`eSfixm%rdSY5(mYwSAE!ay5AN
z?|E{?dU)<tw2nT4AIplfEYIXI(ZcQ87yi7b?hx8qN(@n@Q4Du=d$|@8`v)7d$bxK5
z7nM+c>@8a<;L64+&pT}=+}`~?o2=a|{4-ZT-*n~WhuSBMa8V%>6I_$Le@->I0$%ZD
zIrthVZ^=7$+|3T7yJ8AYlPnVMB05%2<BJ^(<XWYnk%n*LZoXF@05Lm%i%~!>?F8NL
zEI*9YCd7p6h10A=I{Z#Krd#ZQXnj>}g8fcj^<@*H(g}kYeu1Uc)U|IupeDJaE8Tt3
z<jdsk@aM^kn-nr5c%j?jBC{DGntEWKyG}#M%zu#|dz&jz<eT@=n^n39neAMs6>@~l
z<;?v@@5+?uzdv=1ho;NgE!#GE32u$NLlF*>N7+L+@QNL;q4zEaoXEpRJNz0lzWI2u
zO88K!*qK3Ijewd;weD`AK=i!}p)AMxuFdf{PZ*XELkpAUsuml*Q*bBM$UE<|z$v0f
z2QkWOQ@x~gC2b^>>64(PeX4^5kLKctht6PiOd#5ohQMG*(sAhJV@Hj2u`cnblv~k@
zyJ4b-K4n7-GT`O!bu4n{NJlQPcSv+(j@7i)JLEmTZ3^<cefMOF4FW{Z@s9o2AYBF4
z&G0nQMUU_vJM`pn#4$B)p){kBfHS{HghQ?DA3{XWURY^GmHt|m_XrUh(m1HH8?1wb
z@Dfyb(&5uieWh~yssoIxfzZIkX(~4s{)gw^z27@nEo82o6T7$5A>nB7#t%i~^A?Ci
z{`x8V?+ijig7?GSvC?N`g)r_(w@sv>DLQb?%uB_N1j0BYv8ck-YOxTDmm3@*ckdYa
z2hVO6Rd76sm2<vyq>AiX-8Am6_}s9%sI(CC9u<0wUp;^NQw1goCuU!ewjQ(m#0gom
zz+*W0b6n@EdYxp6=jf}G!<c7c6z6Kq2SOi?M1@J|^f(nbpF4&zI`2@}^jXK*LP=uZ
zDR_3x^?i;w_~f0(MKBx#<fz-^ol%b<=f{qRC5vi=bBM|}p1!`=QZ+gb+oBM|zTc^K
z4b`-bB81#%e~~9WrE_%}e6@`Nud3B%*{k2I`%`RMx{}>a%uXP_Vj#6@AXWVN?Q|ep
zh$43?(3hizsoHD7i~3%p{^jC%sOVv>M7?Oe3!&#t5T`se7?$QfRT~Dke(<Xd36Kxt
zWJ>JnitBo0pP!lRkY|^wl_3r}d(1RzV-(F+6%?~fA{+>7t8xuB;f^8zPZ$?Th@VD1
z)BawQI5AsoE!C8zkj?6}aV)Aw{xF2^-f%CuTS_5z<<6*}R`_z1IXKm)$q5ghWL7P{
zrhQ(kGFo;=tnCf;b%*BI)^;7O^Tvn`t_9-A`~|~7Nw(@wBU+U+TpYR7uPrfMVdK3~
z_tXHXl@>emc|OTxdryl~8|j~e`Z=JNMbb+eeKJF_?^Y3%%W+MTxuNvE;4sqHqOVKv
z-FfQ!6^ezTYBBC?g*Fz`b_aYkmAszD_2Q27F0E4Et?}fYfQJQ(QV-vPu9$bYsH!_A
z#tl2i<K`woFO!%+oH}QSXru<xW%k?n;K@ABlAh(2mP(L{1HEUJ3y(^~^JA+C%5my&
zO^g28skMsfV21~pRK^~K!9YR_bPsaY3_EI!?8qJUO%=WiGFE`<vkU4mZvfi$3OAFE
zHCJm<5i?h07H!x&uXJ1JPRglwB4Dg#X_@51uN@t@m)O88V}SMMse?%jthg83@<t*G
zis(3SnuC099dOM)PIbZH!KY<lN$aAfSxoywlO`^Ol^e*O_qLa)uNXc1r#R5N<eY==
zJm;ceb;*W-(^G?;X@&TT0EM>etT{GgeXFgV(Qd3THWBbzi6Z|=NquzvKOh<~%jy8R
zt@#9y4*Qt&+<Qx#xa<+9fgHEWnEfT9exrY7@!GJ<K`_JhyE5GxWPDC|s47wzB0^rg
z4S(9NT?k-HOK@8v+RhdoR1rZyH+Z2#F&;TzdzF^g+Gmg%VYOVuL17bJ1>$|dGeP|`
zO^}Y1cEZ3*S}FUCj;g@oT*T*Rm&l%OWkJkU{8Sb29m@}#iJ(@%alsXsaihIuMMC5^
z)k9n_CuUed|8%>k$!kF?`W&f4R@uZ*lZv~QvZdv-Gs$<T2=uiQqajHcQCc!i`W=V<
zcuJFYS}WJdb(A-}!<K_8xC2qQIu1Oh%>sdC9v)vMBQ^%b9j%;|k}VpJ!DPk@f-8fl
zx;yX`0RARNW?+)c-Uua`*5dcgl8Mi4*a85=&4W=%$JuC!G=_U4nlA(SA~+6h*dBK$
z!sRh&eV*Jw$Ye^ci%Dt3#Be47$rzKo6GwSiJsAgI+!ji&CgKirSuJ1B3%o+Q(QDP)
zNyb~OhwTt*juTTxjb@Wm<P#S+gYXQjN5Cwcv{}yeVRUgQ<;s@*R}PAre$6P9j5cBn
zR)|H})$RChiaD35z2y?9wIOeRY$T4qt*xGUmNUOs{V`7|cJ<T-F%aOg#C54s)bC5Z
zqFz6c-tAOSH_ByDsyAjSzh`KEx>_K-Rc-P&(Pr$fgOd(R^|^0B*;Qyld^VbYX)Y^5
z1T&X7K1j0ST=+bLU6OviG=Vmy5Ps&NoO&WqEA5(@Y&ff4qE3*HW91I1+>S&1LA7L%
z#ZutTR*XM<VN8Hfa<r3xGvRXVJ=fA`l@Ar!%+^C^kaC2B9_BU$kTRqnG+!#&Zcx@j
znQ$#S^bsv0zLssw%*bPZT=k-{kevC`Z{CK^0CxgE?~>lwOW@<AG%H5mYD1kV&LF5*
zeH$yyo<GG997L5(lkBs8Z7$Pde%C;L-b}Eo*qi>UAMam~u<CSACu|5A60LH_bpkr(
zRy<;qO(&Yjn%w~#r%be9QaflD%Ml0U4p*(<5YFt#r>YFk8HE~L!yN9%YqKa4<@6Q`
z8{m7JzgRUl*$ESNMe^+i%nCv2%_*CE9=Fk{dKE@sucl$w%*`Y~U0us`7h<mx9@srz
zn&DLZR=(o>i@qSv*X4)$^AG0PA{*HtoAYnXl3~W0YE}lk1WNQni!8iz*ClMHLNWHF
z{&**<w=T%6ATP_vd#i3pez**Sw@M_`d2pJK0!mHH;=TI2M+_77S{GeEsb0mcr_?&E
zB{<_}4%Mqt0=|ezoR~Y@N?cQ2vJV)`(zGg=ku*S2$V4oow0&2G>Be-9aPR(Lx4Fdy
z)ubbl@Nc(J(9t>j!GVj6Rz;fm!HmI6Vyz>9ua8A#Yc1_dMMXPq$d?=ASBWA)7DeDo
z{kT%s7-;D|tf3dFZlb5VX=m$*wln^-1eP?fLGE-G`0+XePQYXk6kJSR5>8NLAEtQ?
zz6NDob^E|)1UN-JC@R0Px|6&Fp0m@WIJp#kOeCX{&YAOJ&l#9y9dIeE;U9#s>|Ttj
zPISTgVut2wTFu668rLw6-lpsEDALzLm1t;|#9}~itKUF^GY8sJrKjy$1vKlLwP8dX
zOu?qnR{eQXk>>QaDWthA+ko+w3ex57-sSxfdd!gb4{VV;D~f6p9LTRi*rzqPH(8_Q
z#`$Bf3H65^`aTSf7~k{Ssxu#gQfjR`W!Z6>RztYd%dYc}$KYZMJaWHwI4wl)21JmA
zfK5}T%hV<Abq|Rx@(69amF-N|95)$)YWu^Cv9In!nmhUWOcfv~Wu!}iPE_>qT^KaO
zStz((0?fX0=;4^P;qsM&rZS48Q`&d$#=N?vKum6L$r$`Lucmn(Rl*cG*Tm8cO8kt?
z;%hVYtp`)a^XTyggMx9i@)BP5%eTOT@^1$6D&+^NS8Hb}oJb``yswI@b6LCJ3k+{#
zG4J@q6iI4dpUi?Ta}uxzrt47t_^=KLq%~p5@(ZN-v0PC|e=gLUXlp=3FN1o3P&N2M
z^DX4wj*La|PA0{62>2r$V|zMXF11^c4t2)cT~T9(@X1F?=rlPM3~#tI+&tcj+81e9
z&ObnP%)8YjCPgBv3wROvj}V+LBM!snDqw#LR$_X`ab0mh7qMz9qX|xEX-1~t@F4Zd
z8Co)=nPFs_jJcUc-CV47i$WB$X>a$Qv(+yOdH4JGjl#W;KrRwY5&9%E-+&R+&!{gK
zDm{vKJex|}*A<yW^_X|FgZdKK<FBm)_!t`e?$k_|p1Nv*;7K|vhUAL=rj)%9i(J|)
z40bw2Av(XiKCHQ(m8D~Qml|!rm;*B60Nt(+Rl`OHnNCGgcMBF4$vh6Gi}c@+8bDZc
zByFP2Xgy}zVyPqp_)CsNulBeUdg~{zbi3WzpRz?c^o_>DmfyV(U25ZEHI#@MNhu(P
z8m>&`(ddx3F)LZ=e^#|3918lto=tq6_n5h`L7ZD%-?Z5A7^oS7e`8m^7!@ywb9aHW
z&<N209BlPd1lup;%ev9fAzj*+DDU4Xn_sy}yXpl71Phx88X1Ay8n~QBWu=c_4em=X
zVSy(_EvI6`oqsz+GVRSu__Ap?)~Mb4_}K)acGE6~QQxSwwcfKl`?oi^v#PFCTJ7)X
zv%K9lcDjFOhDgoXPpEUM#nEoMfzc4Lx24hvf5Fek;)-&M&p80Mm|gmL;C;A(<*{&!
zl`I*W2KmmG7RT1ucJ$P<a5{>ryGL8|VL=Xx%EEz9OIJ4)z2`YJ4Y|~Q<{3;YIMG!W
z;$|ViqDd1}Hsoz7#}i?ilKRxmjhSzrqM@C=h@Kc=T&7#e?4CqiQOGB{9r#v&5y7+w
z2eM)#qrtGRkFM4q??uyg9R`6K)v%VIlvG2iRA_X_-Z^kB_ySGnkRy7CU56)`=yOL1
zX6P|zgHk;h(8pNQ0w099(<cE{ogK9AJ{Ao+;3=LVL&n)%bjo(=zhm$OxdbrCGlYK<
zf}(RP{r=J<#P1QU{l^`d?k2R!K9<9@@n`q7*j8~U_R?b0;0sVe=-zjX^jTvw?GIdo
zxYFe!vtYvfPJrGK&OiC&(FieVeNg;oUcT@g>DRuawE6Gf-95=Ht>XlOE;_9a`N6rO
z9LMa(^QvjJ(%VR3SsIS>y#V)tP@6M!QQzeBH_FxF!+yR=m5SnP<eifTp8oAjx89=U
zpPqjFw}CBpkWV}kE>4phi%B5*q{>zfROKHU5%IPog3xe4z@O*4GSNo4*Zv~^kxCtY
z`0sFj$%Dx`PyTklJ^`TreYE`|3801lLZ4KIj0fj7NO1q(Ou`~b>hO6wU+=$<I3_8c
zP)6wb(Byk_7Z@J)I*oGQ?QZ`Hc{3gq{(*KnI6=4<`IM@W;EJ~U62Txu0g-n$;<71o
z_7|GS`CuSi;{#P{DmWk+q8362pWeuDhJ03}Ny?<cNx7II30w{ZP<HK0S4SYP9@D|@
ziUCxibW}2d==QxVAR`T+l8zhg+Nb0A`*+I<MN=~PKB!rN*_}j9ncp3u_b|7pk#_c;
zQe2~1h7Q|;I3Qu0<^U8;CPy40fwVDa*A~RhoEVltt{LFYx##XI0pX(S#V-(DxR=G5
zhAuSSq4NGoND#fp5eU(M@d=$brA~WbfDroO$TYnDl^s*^Ylq^?X(F8)Q!0Tp2AD36
zT7MSXt$m|;;P(YvV&L|t-*bLoGh;gcS3zol==i<vf2|>>1>n2%w^v$&QAI}=kxQ4n
z4iW>N-Tu!rkmgZyR@{A>HqIJELmHm$mA-+D<)NuTsl^>yb?CkFzt49#uI-BbW0#@f
z6Rs~qz{P|==s|CD@Za7?@5cw382*ytQ_~{u7RuNvola*_7Gn><L;is8=ES^X0EKs|
zSVKOFyFsqgJceTSW#-e0eRMhA*I?ZDOr*s#36zLI_Dn#i#f5Cu+0)(iwMV0~+;8U^
zP4>Il04C3m<u9<!P6c)&niUH?ARXXT@UHj9oIUu3I3zRn?MUFiu&*`R&O87~4k@j~
zrC!aGY0a86Te|~he!_!sJQG&KXz;3@wyi0ir8cr*v^o!{#>*e0Q~N>OExX~QJ?@hy
zR5|be!0~D4TX5Q;<Y=<o1@c*nTgZi~rCy;{I<86RVa&Ubif1P6GLT+@R=O{kOa)9T
zm6(@i;=u(OAdFpYOL~yA3d$c2!0Bcm(k$+FHdK(e%FOOK-4D`QWDj*d{U9+gMmJNP
zL!FcgNVY#u*a(PAfRDNJ#i6up@1s(Jv?C=;<PoSQfu;CvlIVE$i<5Gp2i*Wf-!^eD
z@nArDc$>wRE}-y<X$D2f7SHo_0m;Vnrbpd?0G&foy7MpT!&n3}0CPI2Nsiid-G;Ib
z88e2w+hsRSR~%Dd%Ko$SAQEaJ4EWLreCO>{xo0y9SLjc7-xF!(R?M3p%TG^aF*e6i
ziGxg><Z0zte%!h<u!pt`gO|32*%et$%(X2<X@qP>l8ZqcX28xy(?gS(Gl;O%B=b;{
zG%A*#zuy^DY}YA@qIn32)s}^L@S8hC?_adFH+c%kL#?HPe~>QuU{^sf+|#Mh@F5-h
z#~(z;>^Fzh;Htmj(dzqjdNiW+EH2Rjn!Wh2ipUemQzY~+J~~(IfD6_*kOp;?1)Drz
zVmZvtBS1pu5QrK4=%XHmbp|(IF+p^(|He|jEpkp#>M|73b@g}4(y?7h|Fqa5#T01b
z({YzPn8L8f&cmX*jE0m?%4qk#0}<fr7=4YjBi&BwTnnW5(+xx(++9(;US4e^O7~^%
zfhk9`Pp2Ywaf0jffTpCRMR0pUX_+)3c9^zrWxs~LJv1xVX@9`y8GVReK3D^OVf>RJ
zv>jDZ6?y(zpNt@sO_q*<Rp1fh)|C?_hq-Ass@Ab&vnw>M`#v0`%R$tmqZi2j&soHw
zjL-AgbVqNyAP#ug0+*a9%oncG2YsxlYvTA6(Ox|mqD-^V_VPitXI#p~k7-e8aDsKQ
z&^sCM7)LW!`r~@ZVGu|IF4R5(!SO4m(&TUE`5Wd}{cDJI%YFDYIv>Ys0R0UsvA7yx
z2!w%8_2zX0(u9y7xFQ3rKcV~#kYmH0&lStGST>tmux4bJEHZ5`CkLI)P`gUNx4xh$
z8>n_uB}Yx?_;pnP2%g^!?VMP}xM7F<kO=Vd1pv7SUI+-`ysQBlz^yQ912A5{@WFR2
zG(!(g5EY~xJjk*av6oZ+H;M_nJxq)Mp1z-7{N`=V(EQF;Vp)eSI__;@LB$hL4aOt%
z06MaVYIoXh0q|>dVS9R^+Bceag@#N}jDGL8kv;AJ#`{ps@Bty3v?6<I_(6jpoAANk
y4Y5aI+5Up&Y?d@CSToz7Nc0JzDVgVkC<>V@=ZbLYmKA_}i0Un^o25#39{oSd99dxi

literal 0
HcmV?d00001

diff --git a/docs/user/security/securing-kibana.asciidoc b/docs/user/security/securing-kibana.asciidoc
index 6fc2b0af318a4..b30acd0ed2e53 100644
--- a/docs/user/security/securing-kibana.asciidoc
+++ b/docs/user/security/securing-kibana.asciidoc
@@ -145,3 +145,4 @@ include::authentication/index.asciidoc[]
 include::securing-communications/index.asciidoc[]
 include::securing-communications/elasticsearch-mutual-tls.asciidoc[]
 include::audit-logging.asciidoc[]
+include::access-agreement.asciidoc[]

From 00a60d8cbded32d20cb4c8112f6107007d8dc301 Mon Sep 17 00:00:00 2001
From: Frank Hassanabad <frank.hassanabad@elastic.co>
Date: Thu, 18 Jun 2020 13:52:38 -0600
Subject: [PATCH 46/63] [SIEM][Detection Engine] Fixes 7.8 and 7.9 upgrade
 issue within rules where you can get the error "params invalid: [lists]:
 definition for this key is missing"

## Summary
* https://github.com/elastic/kibana/issues/69463
* See here for manual backport to 7.8: https://github.com/elastic/kibana/pull/69434

This fixes a bug where if you import rules and set your overwrite to `true` multiple times in a row within 7.7 you can end up with a lists array. When upgrading to 7.8, we change the name of `lists` to `exceptions_lists` and suddenly when you enable/disable a rule you can get the following error below:

![image](https://user-images.githubusercontent.com/1151048/84945824-fa60e280-b0a4-11ea-8e05-bffdec2e4765.png)

The fix is to allow the lists array still if it is present within saved objects to avoid seeing this error screen and being tolerant. We also fix the area of code that is causing the data bug so it cannot happen again with `exceptions_list` which is what the name of lists was renamed to causing this problem.

Note that this has unit tests and I also manually tested this by intentionally injecting a `lists` and `exceptions_lists` and using the UI to verify there wasn't another validation spot that needed to be relaxed to allow for the data.

### Checklist

- [x] [Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios
---
 .../routes/rules/utils.test.ts                |  29 ++++-
 .../signals/signal_params_schema.mock.ts      |  45 ++++++++
 .../signals/signal_params_schema.test.ts      | 105 ++++++++++++++++++
 .../signals/signal_params_schema.ts           |   2 +
 4 files changed, 180 insertions(+), 1 deletion(-)
 create mode 100644 x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_params_schema.mock.ts
 create mode 100644 x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_params_schema.test.ts

diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/utils.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/utils.test.ts
index 3b514b92e1479..891c241661a1b 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/utils.test.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/utils.test.ts
@@ -115,7 +115,7 @@ describe('utils', () => {
       expect(rule).toEqual(expected);
     });
 
-    it('transforms ML Rule fields', () => {
+    test('transforms ML Rule fields', () => {
       const mlRule = getResult();
       mlRule.params.anomalyThreshold = 55;
       mlRule.params.machineLearningJobId = 'some_job_id';
@@ -130,6 +130,33 @@ describe('utils', () => {
         })
       );
     });
+
+    // This has to stay here until we do data migration of saved objects and lists is removed from:
+    // signal_params_schema.ts
+    test('does not leak a lists structure in the transform which would cause validation issues', () => {
+      const result: RuleAlertType & { lists: [] } = { lists: [], ...getResult() };
+      const rule = transformAlertToRule(result);
+      expect(rule).toEqual(
+        expect.not.objectContaining({
+          lists: [],
+        })
+      );
+    });
+
+    // This has to stay here until we do data migration of saved objects and exceptions_list is removed from:
+    // signal_params_schema.ts
+    test('does not leak an exceptions_list structure in the transform which would cause validation issues', () => {
+      const result: RuleAlertType & { exceptions_list: [] } = {
+        exceptions_list: [],
+        ...getResult(),
+      };
+      const rule = transformAlertToRule(result);
+      expect(rule).toEqual(
+        expect.not.objectContaining({
+          exceptions_list: [],
+        })
+      );
+    });
   });
 
   describe('getIdError', () => {
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_params_schema.mock.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_params_schema.mock.ts
new file mode 100644
index 0000000000000..d60509b28f7da
--- /dev/null
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_params_schema.mock.ts
@@ -0,0 +1,45 @@
+/*
+ * 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 { SignalParamsSchema } from './signal_params_schema';
+
+export const getSignalParamsSchemaMock = (): Partial<SignalParamsSchema> => ({
+  description: 'Detecting root and admin users',
+  query: 'user.name: root or user.name: admin',
+  severity: 'high',
+  type: 'query',
+  riskScore: 55,
+  language: 'kuery',
+  ruleId: 'rule-1',
+  from: 'now-6m',
+  to: 'now',
+});
+
+export const getSignalParamsSchemaDecodedMock = (): SignalParamsSchema => ({
+  description: 'Detecting root and admin users',
+  falsePositives: [],
+  filters: null,
+  from: 'now-6m',
+  immutable: false,
+  index: null,
+  language: 'kuery',
+  maxSignals: 100,
+  meta: null,
+  note: null,
+  outputIndex: null,
+  query: 'user.name: root or user.name: admin',
+  references: [],
+  riskScore: 55,
+  ruleId: 'rule-1',
+  savedId: null,
+  severity: 'high',
+  threat: null,
+  timelineId: null,
+  timelineTitle: null,
+  to: 'now',
+  type: 'query',
+  version: 1,
+});
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_params_schema.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_params_schema.test.ts
new file mode 100644
index 0000000000000..a7404b4066387
--- /dev/null
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_params_schema.test.ts
@@ -0,0 +1,105 @@
+/*
+ * 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 { signalParamsSchema, SignalParamsSchema } from './signal_params_schema';
+import {
+  getSignalParamsSchemaDecodedMock,
+  getSignalParamsSchemaMock,
+} from './signal_params_schema.mock';
+import { DEFAULT_MAX_SIGNALS } from '../../../../common/constants';
+
+describe('signal_params_schema', () => {
+  test('it works with expected basic mock data set', () => {
+    const schema = signalParamsSchema();
+    expect(schema.validate(getSignalParamsSchemaMock())).toEqual(
+      getSignalParamsSchemaDecodedMock()
+    );
+  });
+
+  test('it works on older lists data structures if they exist as an empty array', () => {
+    const schema = signalParamsSchema();
+    const mock: Partial<SignalParamsSchema> = { lists: [], ...getSignalParamsSchemaMock() };
+    const expected: Partial<SignalParamsSchema> = {
+      lists: [],
+      ...getSignalParamsSchemaDecodedMock(),
+    };
+    expect(schema.validate(mock)).toEqual(expected);
+  });
+
+  test('it works on older exceptions_list data structures if they exist as an empty array', () => {
+    const schema = signalParamsSchema();
+    const mock: Partial<SignalParamsSchema> = {
+      exceptions_list: [],
+      ...getSignalParamsSchemaMock(),
+    };
+    const expected: Partial<SignalParamsSchema> = {
+      exceptions_list: [],
+      ...getSignalParamsSchemaDecodedMock(),
+    };
+    expect(schema.validate(mock)).toEqual(expected);
+  });
+
+  test('it throws if given an invalid value', () => {
+    const schema = signalParamsSchema();
+    const mock: Partial<SignalParamsSchema> & { madeUpValue: string } = {
+      madeUpValue: 'something',
+      ...getSignalParamsSchemaMock(),
+    };
+    expect(() => schema.validate(mock)).toThrow(
+      '[madeUpValue]: definition for this key is missing'
+    );
+  });
+
+  test('if risk score is a string then it will be converted into a number before being inserted as data', () => {
+    const schema = signalParamsSchema();
+    const mock: Omit<Partial<SignalParamsSchema>, 'riskScore'> & { riskScore: string } = {
+      ...getSignalParamsSchemaMock(),
+      riskScore: '5',
+    };
+    expect(schema.validate(mock).riskScore).toEqual(5);
+    expect(typeof schema.validate(mock).riskScore).toEqual('number');
+  });
+
+  test('if risk score is a number then it will work as a number', () => {
+    const schema = signalParamsSchema();
+    const mock: Partial<SignalParamsSchema> = {
+      ...getSignalParamsSchemaMock(),
+      riskScore: 5,
+    };
+    expect(schema.validate(mock).riskScore).toEqual(5);
+    expect(typeof schema.validate(mock).riskScore).toEqual('number');
+  });
+
+  test('maxSignals will default to "DEFAULT_MAX_SIGNALS" if not set', () => {
+    const schema = signalParamsSchema();
+    const { maxSignals, ...withoutMockData } = getSignalParamsSchemaMock();
+    expect(schema.validate(withoutMockData).maxSignals).toEqual(DEFAULT_MAX_SIGNALS);
+  });
+
+  test('version will default to "1" if not set', () => {
+    const schema = signalParamsSchema();
+    const { version, ...withoutVersion } = getSignalParamsSchemaMock();
+    expect(schema.validate(withoutVersion).version).toEqual(1);
+  });
+
+  test('references will default to an empty array if not set', () => {
+    const schema = signalParamsSchema();
+    const { references, ...withoutReferences } = getSignalParamsSchemaMock();
+    expect(schema.validate(withoutReferences).references).toEqual([]);
+  });
+
+  test('immutable will default to false if not set', () => {
+    const schema = signalParamsSchema();
+    const { immutable, ...withoutImmutable } = getSignalParamsSchemaMock();
+    expect(schema.validate(withoutImmutable).immutable).toEqual(false);
+  });
+
+  test('falsePositives will default to an empty array if not set', () => {
+    const schema = signalParamsSchema();
+    const { falsePositives, ...withoutFalsePositives } = getSignalParamsSchemaMock();
+    expect(schema.validate(withoutFalsePositives).falsePositives).toEqual([]);
+  });
+});
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_params_schema.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_params_schema.ts
index 461b2589babcc..5f95f635a6bd8 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_params_schema.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_params_schema.ts
@@ -34,6 +34,8 @@ const signalSchema = schema.object({
   type: schema.string(),
   references: schema.arrayOf(schema.string(), { defaultValue: [] }),
   version: schema.number({ defaultValue: 1 }),
+  lists: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))), // For backwards compatibility with customers that had a data bug in 7.7. Once we use a migration script please remove this.
+  exceptions_list: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))), // For backwards compatibility with customers that had a data bug in 7.8. Once we use a migration script please remove this.
   exceptionsList: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))),
 });
 

From d26cbef38992bc58dd4f796f99ddd6b620f9ce3e Mon Sep 17 00:00:00 2001
From: Lisa Cawley <lcawley@elastic.co>
Date: Thu, 18 Jun 2020 13:19:10 -0700
Subject: [PATCH 47/63] [DOCS] Adds kibana-pull attribute for release docs
 (#69554)

---
 .../development-plugin-feature-registration.asciidoc   |  8 ++++----
 .../development-plugin-functional-tests.asciidoc       |  2 +-
 .../plugin/development-plugin-localization.asciidoc    |  6 +++---
 .../plugin/development-plugin-resources.asciidoc       | 10 +++++-----
 .../visualize/development-visualize-index.asciidoc     |  2 +-
 docs/gs-index.asciidoc                                 |  8 ++------
 docs/index.asciidoc                                    |  6 +-----
 docs/plugins/known-plugins.asciidoc                    |  2 +-
 packages/kbn-release-notes/src/formats/asciidoc.ts     |  2 +-
 x-pack/dev-tools/xkb_release_notes.pl                  |  4 ++--
 10 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/docs/developer/plugin/development-plugin-feature-registration.asciidoc b/docs/developer/plugin/development-plugin-feature-registration.asciidoc
index d594a6d4255b2..203cc201ee626 100644
--- a/docs/developer/plugin/development-plugin-feature-registration.asciidoc
+++ b/docs/developer/plugin/development-plugin-feature-registration.asciidoc
@@ -22,7 +22,7 @@ init(server) {
 -----------
 
 ===== Feature details
-Registering a feature consists of the following fields. For more information, consult the {repo}blob/{branch}/x-pack/plugins/features/server/feature_registry.ts[feature registry interface].
+Registering a feature consists of the following fields. For more information, consult the {kib-repo}blob/{branch}/x-pack/plugins/features/server/feature_registry.ts[feature registry interface].
 
 
 [cols="1a, 1a, 1a, 1a"]
@@ -45,12 +45,12 @@ Registering a feature consists of the following fields. For more information, co
 |An array of applications this feature enables. Typically, all of your plugin's apps (from `uiExports`) will be included here.
 
 |`privileges` (required)
-|{repo}blob/{branch}/x-pack/plugins/features/common/feature.ts[`FeatureConfig`].
+|{kib-repo}blob/{branch}/x-pack/plugins/features/common/feature.ts[`FeatureConfig`].
 |See <<example-1-canvas,Example 1>> and <<example-2-dev-tools,Example 2>>
 |The set of privileges this feature requires to function.
 
 |`subFeatures` (optional)
-|{repo}blob/{branch}/x-pack/plugins/features/common/feature.ts[`FeatureConfig`].
+|{kib-repo}blob/{branch}/x-pack/plugins/features/common/feature.ts[`FeatureConfig`].
 |See <<example-3-discover,Example 3>>
 |The set of subfeatures that enables finer access control than the `all` and `read` feature privileges. These options are only available in the Gold subscription level and higher.
 
@@ -68,7 +68,7 @@ Registering a feature consists of the following fields. For more information, co
 ===== Privilege definition
 The `privileges` section of feature registration allows plugins to implement read/write and read-only modes for their applications.
 
-For a full explanation of fields and options, consult the {repo}blob/{branch}/x-pack/plugins/features/server/feature_registry.ts[feature registry interface].
+For a full explanation of fields and options, consult the {kib-repo}blob/{branch}/x-pack/plugins/features/server/feature_registry.ts[feature registry interface].
 
 ==== Using UI Capabilities
 
diff --git a/docs/developer/plugin/development-plugin-functional-tests.asciidoc b/docs/developer/plugin/development-plugin-functional-tests.asciidoc
index 1227682b1dcf9..eda2ceb627fce 100644
--- a/docs/developer/plugin/development-plugin-functional-tests.asciidoc
+++ b/docs/developer/plugin/development-plugin-functional-tests.asciidoc
@@ -85,5 +85,5 @@ node ../../kibana/scripts/functional_test_runner
 [float]
 ==== Using esArchiver
 
-We're working on documentation for this, but for now the best place to look is the original {pull}10359[pull request].
+We're working on documentation for this, but for now the best place to look is the original {kibana-pull}10359[pull request].
 
diff --git a/docs/developer/plugin/development-plugin-localization.asciidoc b/docs/developer/plugin/development-plugin-localization.asciidoc
index 1fb8b6aa0cbde..b0b543bd9fe33 100644
--- a/docs/developer/plugin/development-plugin-localization.asciidoc
+++ b/docs/developer/plugin/development-plugin-localization.asciidoc
@@ -109,7 +109,7 @@ export const HELLO_WORLD = i18n.translate('hello.wonderful.world', {
 });
 -----------
 
-Full details are {repo}tree/master/packages/kbn-i18n#vanilla-js[here].
+Full details are {kib-repo}tree/master/packages/kbn-i18n#vanilla-js[here].
 
 [float]
 ===== i18n for React
@@ -133,7 +133,7 @@ export const Component = () => {
 };
 -----------
 
-Full details are {repo}tree/master/packages/kbn-i18n#react[here].
+Full details are {kib-repo}tree/master/packages/kbn-i18n#react[here].
 
 
 
@@ -153,7 +153,7 @@ The translation directive has the following syntax:
 ></ANY>
 -----------
 
-Full details are {repo}tree/master/packages/kbn-i18n#angularjs[here].
+Full details are {kib-repo}tree/master/packages/kbn-i18n#angularjs[here].
 
 
 [float]
diff --git a/docs/developer/plugin/development-plugin-resources.asciidoc b/docs/developer/plugin/development-plugin-resources.asciidoc
index a2fd0e23d0be4..3a32c49e40e0f 100644
--- a/docs/developer/plugin/development-plugin-resources.asciidoc
+++ b/docs/developer/plugin/development-plugin-resources.asciidoc
@@ -5,12 +5,12 @@ Here are some resources that are helpful for getting started with plugin develop
 
 [float]
 ==== Some light reading
-Our {repo}blob/master/CONTRIBUTING.md[contributing guide] can help you get a development environment going.
+Our {kib-repo}blob/master/CONTRIBUTING.md[contributing guide] can help you get a development environment going.
 
 [float]
 ==== Plugin Generator
 
-We recommend that you kick-start your plugin by generating it with the {repo}tree/{branch}/packages/kbn-plugin-generator[Kibana Plugin Generator]. Run the following in the Kibana repo, and you will be asked a couple questions, see some progress bars, and have a freshly generated plugin ready for you to play with in Kibana's `plugins` folder.
+We recommend that you kick-start your plugin by generating it with the {kib-repo}tree/{branch}/packages/kbn-plugin-generator[Kibana Plugin Generator]. Run the following in the Kibana repo, and you will be asked a couple questions, see some progress bars, and have a freshly generated plugin ready for you to play with in Kibana's `plugins` folder.
 
 ["source","shell"]
 -----------
@@ -34,7 +34,7 @@ The Kibana directory must be named `kibana`, and your plugin directory should be
 
 [float]
 ==== References in the code
- - {repo}blob/{branch}/src/legacy/server/plugins/lib/plugin.js[Plugin class]: What options does the `kibana.Plugin` class accept?
+ - {kib-repo}blob/{branch}/src/legacy/server/plugins/lib/plugin.js[Plugin class]: What options does the `kibana.Plugin` class accept?
  - <<development-uiexports>>: What type of exports are available?
 
 [float]
@@ -65,9 +65,9 @@ To enable TypeScript support, create a `tsconfig.json` file at the root of your
 
 TypeScript code is automatically converted into JavaScript during development,
 but not in the distributable version of Kibana. If you use the
-{repo}blob/{branch}/packages/kbn-plugin-helpers[@kbn/plugin-helpers] to build your plugin, then your `.ts` and `.tsx` files will be permanently transpiled before your plugin is archived. If you have your own build process, make sure to run the TypeScript compiler on your source files and ship the compilation output so that your plugin will work with the distributable version of Kibana.
+{kib-repo}blob/{branch}/packages/kbn-plugin-helpers[@kbn/plugin-helpers] to build your plugin, then your `.ts` and `.tsx` files will be permanently transpiled before your plugin is archived. If you have your own build process, make sure to run the TypeScript compiler on your source files and ship the compilation output so that your plugin will work with the distributable version of Kibana.
 
 ==== {kib} platform migration guide
 
-{repo}blob/{branch}/src/core/MIGRATION.md#migrating-legacy-plugins-to-the-new-platform[This guide]
+{kib-repo}blob/{branch}/src/core/MIGRATION.md#migrating-legacy-plugins-to-the-new-platform[This guide]
 provides an action plan for moving a legacy plugin to the new platform. 
diff --git a/docs/developer/visualize/development-visualize-index.asciidoc b/docs/developer/visualize/development-visualize-index.asciidoc
index daefc434e1f18..ac824b4702a3c 100644
--- a/docs/developer/visualize/development-visualize-index.asciidoc
+++ b/docs/developer/visualize/development-visualize-index.asciidoc
@@ -22,5 +22,5 @@ here are a few resources:
 * The <<breaking-changes,breaking changes>> documentation, where we try to capture any changes to the APIs as they occur across minors.
 * link:https://github.com/elastic/kibana/issues/44121[Meta issue] which is tracking the move of the plugin to the new Kibana platform
 * Our link:https://www.elastic.co/blog/join-our-elastic-stack-workspace-on-slack[Elastic Stack workspace on Slack].
-* The {repo}blob/{branch}/src/plugins/visualizations[source code], which will continue to be
+* The {kib-repo}blob/{branch}/src/plugins/visualizations[source code], which will continue to be
 the most accurate source of information.
diff --git a/docs/gs-index.asciidoc b/docs/gs-index.asciidoc
index c5446dda67606..06996d382d90f 100644
--- a/docs/gs-index.asciidoc
+++ b/docs/gs-index.asciidoc
@@ -11,14 +11,10 @@ release-state can be: released | prerelease | unreleased
 
 :docker-image:   docker.elastic.co/kibana/kibana:{version}
 :es-ref:         https://www.elastic.co/guide/en/elasticsearch/reference/{branch}/
-:kibana-ref:     https://www.elastic.co/guide/en/kibana/{branch}
-:xpack-ref:      https://www.elastic.co/guide/en/x-pack/current/
-:repo:           https://github.com/elastic/kibana/
-:issue:          {repo}issues/
-:pull:           {repo}pull/
-:commit:         {repo}commit/
 :security:       https://www.elastic.co/community/security/
 
+include::{docs-root}/shared/attributes.asciidoc[]
+
 include::introduction.asciidoc[]
 
 include::setup/install.asciidoc[]
diff --git a/docs/index.asciidoc b/docs/index.asciidoc
index b8dec183d378b..66ad2f7ec306a 100644
--- a/docs/index.asciidoc
+++ b/docs/index.asciidoc
@@ -11,11 +11,7 @@ include::{docs-root}/shared/versions/stack/{source_branch}.asciidoc[]
 
 :docker-repo:    docker.elastic.co/kibana/kibana
 :docker-image:   docker.elastic.co/kibana/kibana:{version}
-:repo:           https://github.com/elastic/kibana/
-:issue:          {repo}issues/
-:pull:           {repo}pull/
-:commit:         {repo}commit/
-:blob:           {repo}blob/{branch}/
+:blob:           {kib-repo}blob/{branch}/
 :security-ref:   https://www.elastic.co/community/security/
 
 include::{docs-root}/shared/attributes.asciidoc[]
diff --git a/docs/plugins/known-plugins.asciidoc b/docs/plugins/known-plugins.asciidoc
index cb70a1d1c387a..cd07596ad37ef 100644
--- a/docs/plugins/known-plugins.asciidoc
+++ b/docs/plugins/known-plugins.asciidoc
@@ -71,4 +71,4 @@ Use it to create, edit and embed visualizations, and also to search inside an em
 * https://github.com/datasweet-fr/kibana-datasweet-formula[Datasweet Formula] (datasweet) - enables calculated metric on any standard Kibana visualization.
 * https://github.com/pjhampton/kibana-prometheus-exporter[Prometheus Exporter] - exports the Kibana metrics in the prometheus format
 
-NOTE: If you want your plugin to be added to this page, open a {repo}tree/{branch}/docs/plugins/known-plugins.asciidoc[pull request].
+NOTE: If you want your plugin to be added to this page, open a {kib-repo}tree/{branch}/docs/plugins/known-plugins.asciidoc[pull request].
diff --git a/packages/kbn-release-notes/src/formats/asciidoc.ts b/packages/kbn-release-notes/src/formats/asciidoc.ts
index d6c707f009f32..b749e89048a8e 100644
--- a/packages/kbn-release-notes/src/formats/asciidoc.ts
+++ b/packages/kbn-release-notes/src/formats/asciidoc.ts
@@ -73,7 +73,7 @@ export class AsciidocFormat extends Format {
         for (const pr of prsInArea) {
           const fixes = pr.fixes.length ? `[Fixes ${pr.fixes.join(', ')}] ` : '';
           const strippedTitle = pr.title.replace(/^\s*\[[^\]]+\]\s*/, '');
-          yield `* ${fixes}${strippedTitle} {pull}${pr.number}[#${pr.number}]\n`;
+          yield `* ${fixes}${strippedTitle} {kibana-pull}${pr.number}[#${pr.number}]\n`;
           if (pr.note) {
             yield `  - ${pr.note}\n`;
           }
diff --git a/x-pack/dev-tools/xkb_release_notes.pl b/x-pack/dev-tools/xkb_release_notes.pl
index 08da967c35e68..a635a88392657 100755
--- a/x-pack/dev-tools/xkb_release_notes.pl
+++ b/x-pack/dev-tools/xkb_release_notes.pl
@@ -111,7 +111,7 @@ sub dump_issues {
                 }
                 my $number = $issue->{number};
 
-#                print encode_utf8("* $title {pull}${number}[#${number}]");
+#                print encode_utf8("* $title {kibana-pull}${number}[#${number}]");
                  print encode_utf8("* $title");
                  print "\n";
                  print encode_utf8("// https://github.com/${User_Repo}pull/${number}[#${number}]");
@@ -120,7 +120,7 @@ sub dump_issues {
                     print keys %uniq > 1
                         ? " (issues: "
                         : " (issue: ";
-#                   print join ", ", map {"{issue}${_}[#${_}]"}
+#                   print join ", ", map {"{kib-issue}${_}[#${_}]"}
 #                   print join ", ", map {"#${_}"}
                     print join ", ", map {"https://github.com/${User_Repo}issues/${_}[#${_}]"}
                         sort keys %uniq;

From bdb65920f057cf588e9f012da15f6b4e665abd98 Mon Sep 17 00:00:00 2001
From: Jonathan Budzenski <jon@budzenski.me>
Date: Thu, 18 Jun 2020 15:19:46 -0500
Subject: [PATCH 48/63] skip tests using hostDetailsPolicyResponseActionBadge

---
 .../public/management/pages/endpoint_hosts/view/index.test.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
index af027c2e106c3..68c4e96074181 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
@@ -371,7 +371,7 @@ describe('when on the hosts page', () => {
       });
     });
 
-    describe('when showing host Policy Response panel', () => {
+    describe.skip('when showing host Policy Response panel', () => {
       let renderResult: ReturnType<typeof render>;
       beforeEach(async () => {
         coreStart.http.post.mockImplementation(async (requestOptions) => {

From 700f53d3a331c9ec3307f76eaf08ea8caf38183b Mon Sep 17 00:00:00 2001
From: Brent Kimmel <bkimmel@users.noreply.github.com>
Date: Thu, 18 Jun 2020 16:33:57 -0400
Subject: [PATCH 49/63] Merge/restyle nodes table (#69098)

Adds panel views and drilldowns to Resolver
---
 .../common/endpoint/generate_data.ts          |  56 +-
 .../common/endpoint/models/event.test.ts      |  41 +
 .../common/endpoint/models/event.ts           |  92 +++
 .../common/endpoint/types.ts                  |  24 +
 .../endpoint_alerts/store/middleware.ts       |  25 +-
 .../resolver/models/indexed_process_tree.ts   |   3 +-
 .../public/resolver/models/process_event.ts   |  69 ++
 .../public/resolver/store/actions.ts          |  55 +-
 .../public/resolver/store/data/action.ts      |  19 +-
 .../public/resolver/store/data/reducer.ts     |  16 +
 .../public/resolver/store/data/selectors.ts   |  15 +
 .../public/resolver/store/middleware.ts       |  26 +
 .../public/resolver/store/reducer.ts          |  28 +-
 .../public/resolver/store/selectors.ts        |  37 +
 .../public/resolver/store/ui/selectors.ts     |  16 +
 .../public/resolver/types.ts                  |  16 +-
 .../public/resolver/view/assets.tsx           |  45 +-
 .../public/resolver/view/index.tsx            |   6 +-
 .../public/resolver/view/panel.tsx            | 426 ++++++-----
 .../view/panels/panel_content_error.tsx       |  61 ++
 .../panels/panel_content_process_detail.tsx   | 211 ++++++
 .../panels/panel_content_process_list.tsx     | 164 ++++
 .../panels/panel_content_related_counts.tsx   | 144 ++++
 .../panels/panel_content_related_detail.tsx   | 365 +++++++++
 .../panels/panel_content_related_list.tsx     | 247 ++++++
 .../view/panels/panel_content_utilities.tsx   |  90 +++
 .../view/panels/process_cube_icon.tsx         |  46 ++
 .../resolver/view/process_event_dot.tsx       | 701 +++++++++---------
 .../public/resolver/view/submenu.tsx          |  66 +-
 29 files changed, 2557 insertions(+), 553 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/common/endpoint/models/event.test.ts
 create mode 100644 x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_error.tsx
 create mode 100644 x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_detail.tsx
 create mode 100644 x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_list.tsx
 create mode 100644 x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_counts.tsx
 create mode 100644 x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_detail.tsx
 create mode 100644 x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_list.tsx
 create mode 100644 x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_utilities.tsx
 create mode 100644 x-pack/plugins/security_solution/public/resolver/view/panels/process_cube_icon.tsx

diff --git a/x-pack/plugins/security_solution/common/endpoint/generate_data.ts b/x-pack/plugins/security_solution/common/endpoint/generate_data.ts
index 8c03285996779..ad140e48d4c64 100644
--- a/x-pack/plugins/security_solution/common/endpoint/generate_data.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/generate_data.ts
@@ -26,6 +26,9 @@ interface EventOptions {
   eventType?: string;
   eventCategory?: string | string[];
   processName?: string;
+  pid?: number;
+  parentPid?: number;
+  extensions?: object;
 }
 
 const Windows: OSFields[] = [
@@ -471,12 +474,36 @@ export class EndpointDocGenerator {
    * @param options - Allows event field values to be specified
    */
   public generateEvent(options: EventOptions = {}): EndpointEvent {
+    const processName = options.processName ? options.processName : randomProcessName();
+    const detailRecordForEventType =
+      options.extensions ||
+      ((eventCategory) => {
+        if (eventCategory === 'registry') {
+          return { registry: { key: `HKLM/Windows/Software/${this.randomString(5)}` } };
+        }
+        if (eventCategory === 'network') {
+          return {
+            network: {
+              direction: this.randomChoice(['inbound', 'outbound']),
+              forwarded_ip: `${this.randomIP()}`,
+            },
+          };
+        }
+        if (eventCategory === 'file') {
+          return { file: { path: 'C:\\My Documents\\business\\January\\processName' } };
+        }
+        if (eventCategory === 'dns') {
+          return { dns: { question: { name: `${this.randomIP()}` } } };
+        }
+        return {};
+      })(options.eventCategory);
     return {
       '@timestamp': options.timestamp ? options.timestamp : new Date().getTime(),
       agent: { ...this.commonInfo.agent, type: 'endpoint' },
       ecs: {
         version: '1.4.0',
       },
+      ...detailRecordForEventType,
       event: {
         category: options.eventCategory ? options.eventCategory : 'process',
         kind: 'event',
@@ -485,9 +512,30 @@ export class EndpointDocGenerator {
       },
       host: this.commonInfo.host,
       process: {
+        pid:
+          'pid' in options && typeof options.pid !== 'undefined' ? options.pid : this.randomN(5000),
+        executable: `C:\\${processName}`,
+        args: `"C:\\${processName}" \\${this.randomString(3)}`,
+        code_signature: {
+          status: 'trusted',
+          subject_name: 'Microsoft',
+        },
+        hash: { md5: this.seededUUIDv4() },
         entity_id: options.entityID ? options.entityID : this.randomString(10),
-        parent: options.parentEntityID ? { entity_id: options.parentEntityID } : undefined,
-        name: options.processName ? options.processName : randomProcessName(),
+        parent: options.parentEntityID
+          ? {
+              entity_id: options.parentEntityID,
+              pid:
+                'parentPid' in options && typeof options.parentPid !== 'undefined'
+                  ? options.parentPid
+                  : this.randomN(5000),
+            }
+          : undefined,
+        name: processName,
+      },
+      user: {
+        domain: this.randomString(10),
+        name: this.randomString(10),
       },
     };
   }
@@ -692,6 +740,8 @@ export class EndpointDocGenerator {
       ancestor = this.generateEvent({
         timestamp,
         parentEntityID: ancestor.process.entity_id,
+        parentPid: ancestor.process.pid,
+        pid: this.randomN(5000),
       });
       events.push(ancestor);
       timestamp = timestamp + 1000;
@@ -1117,7 +1167,7 @@ export class EndpointDocGenerator {
     return [...this.randomNGenerator(255, 6)].map((x) => x.toString(16)).join('-');
   }
 
-  private randomIP(): string {
+  public randomIP(): string {
     return [10, ...this.randomNGenerator(255, 3)].map((x) => x.toString()).join('.');
   }
 
diff --git a/x-pack/plugins/security_solution/common/endpoint/models/event.test.ts b/x-pack/plugins/security_solution/common/endpoint/models/event.test.ts
new file mode 100644
index 0000000000000..a0bf00f0274e6
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/endpoint/models/event.test.ts
@@ -0,0 +1,41 @@
+/*
+ * 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 { EndpointDocGenerator } from '../generate_data';
+import { descriptiveName } from './event';
+
+describe('Event descriptive names', () => {
+  let generator: EndpointDocGenerator;
+  beforeEach(() => {
+    generator = new EndpointDocGenerator('seed');
+  });
+
+  it('returns the right name for a registry event', () => {
+    const extensions = { registry: { key: `HKLM/Windows/Software/abc` } };
+    const event = generator.generateEvent({ eventCategory: 'registry', extensions });
+    expect(descriptiveName(event)).toEqual({ subject: `HKLM/Windows/Software/abc` });
+  });
+
+  it('returns the right name for a network event', () => {
+    const randomIP = `${generator.randomIP()}`;
+    const extensions = { network: { direction: 'outbound', forwarded_ip: randomIP } };
+    const event = generator.generateEvent({ eventCategory: 'network', extensions });
+    expect(descriptiveName(event)).toEqual({ subject: `${randomIP}`, descriptor: 'outbound' });
+  });
+
+  it('returns the right name for a file event', () => {
+    const extensions = { file: { path: 'C:\\My Documents\\business\\January\\processName' } };
+    const event = generator.generateEvent({ eventCategory: 'file', extensions });
+    expect(descriptiveName(event)).toEqual({
+      subject: 'C:\\My Documents\\business\\January\\processName',
+    });
+  });
+
+  it('returns the right name for a dns event', () => {
+    const extensions = { dns: { question: { name: `${generator.randomIP()}` } } };
+    const event = generator.generateEvent({ eventCategory: 'dns', extensions });
+    expect(descriptiveName(event)).toEqual({ subject: extensions.dns.question.name });
+  });
+});
diff --git a/x-pack/plugins/security_solution/common/endpoint/models/event.ts b/x-pack/plugins/security_solution/common/endpoint/models/event.ts
index 9eea6bf320db8..3f07bf77abf20 100644
--- a/x-pack/plugins/security_solution/common/endpoint/models/event.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/models/event.ts
@@ -52,3 +52,95 @@ export function parentEntityId(event: ResolverEvent): string | undefined {
   }
   return event.process.parent?.entity_id;
 }
+
+/**
+ * @param event The event to get the category for
+ */
+export function primaryEventCategory(event: ResolverEvent): string | undefined {
+  // Returning "Process" as a catch-all here because it seems pretty general
+  if (isLegacyEvent(event)) {
+    const legacyFullType = event.endgame.event_type_full;
+    if (legacyFullType) {
+      return legacyFullType;
+    }
+  } else {
+    const eventCategories = event.event.category;
+    const category = typeof eventCategories === 'string' ? eventCategories : eventCategories[0];
+
+    return category;
+  }
+}
+
+/**
+ * ECS event type will be things like 'creation', 'deletion', 'access', etc.
+ * see: https://www.elastic.co/guide/en/ecs/current/ecs-event.html
+ * @param event The ResolverEvent to get the ecs type for
+ */
+export function ecsEventType(event: ResolverEvent): Array<string | undefined> {
+  if (isLegacyEvent(event)) {
+    return [event.endgame.event_subtype_full];
+  }
+  return typeof event.event.type === 'string' ? [event.event.type] : event.event.type;
+}
+
+/**
+ * #Descriptive Names For Related Events:
+ *
+ * The following section provides facilities for deriving **Descriptive Names** for ECS-compliant event data.
+ * There are drawbacks to trying to do this: It *will* require ongoing maintenance. It presents temptations to overarticulate.
+ * On balance, however, it seems that the benefit of giving the user some form of information they can recognize & scan outweighs the drawbacks.
+ */
+type DeepPartial<T> = T extends object ? { [K in keyof T]?: DeepPartial<T[K]> } : T;
+/**
+ * Based on the ECS category of the event, attempt to provide a more descriptive name
+ * (e.g. the `event.registry.key` for `registry` or the `dns.question.name` for `dns`, etc.).
+ * This function returns the data in the form of `{subject, descriptor}` where `subject` will
+ * tend to be the more distinctive term (e.g. 137.213.212.7 for a network event) and the
+ * `descriptor` can be used to present more useful/meaningful view (e.g. `inbound 137.213.212.7`
+ * in the example above).
+ * see: https://www.elastic.co/guide/en/ecs/current/ecs-field-reference.html
+ * @param event The ResolverEvent to get the descriptive name for
+ * @returns { descriptiveName } An attempt at providing a readable name to the user
+ */
+export function descriptiveName(event: ResolverEvent): { subject: string; descriptor?: string } {
+  if (isLegacyEvent(event)) {
+    return { subject: eventName(event) };
+  }
+
+  // To be somewhat defensive, we'll check for the presence of these.
+  const partialEvent: DeepPartial<ResolverEvent> = event;
+
+  /**
+   * This list of attempts can be expanded/adjusted as the underlying model changes over time:
+   */
+
+  // Stable, per ECS 1.5: https://www.elastic.co/guide/en/ecs/current/ecs-allowed-values-event-category.html
+
+  if (partialEvent.network?.forwarded_ip) {
+    return {
+      subject: String(partialEvent.network?.forwarded_ip),
+      descriptor: String(partialEvent.network?.direction),
+    };
+  }
+
+  if (partialEvent.file?.path) {
+    return {
+      subject: String(partialEvent.file?.path),
+    };
+  }
+
+  // Extended categories (per ECS 1.5):
+  const pathOrKey = partialEvent.registry?.path || partialEvent.registry?.key;
+  if (pathOrKey) {
+    return {
+      subject: String(pathOrKey),
+    };
+  }
+
+  if (partialEvent.dns?.question?.name) {
+    return { subject: String(partialEvent.dns?.question?.name) };
+  }
+
+  // Fall back on entityId if we can't fish a more descriptive name out.
+  return { subject: entityId(event) };
+}
diff --git a/x-pack/plugins/security_solution/common/endpoint/types.ts b/x-pack/plugins/security_solution/common/endpoint/types.ts
index bd4d8372497f1..0b93af741da22 100644
--- a/x-pack/plugins/security_solution/common/endpoint/types.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/types.ts
@@ -444,14 +444,38 @@ export interface EndpointEvent {
     kind: string;
   };
   host: Host;
+  network?: {
+    direction: unknown;
+    forwarded_ip: unknown;
+  };
+  dns?: {
+    question: { name: unknown };
+  };
   process: {
     entity_id: string;
     name: string;
+    executable?: string;
+    args?: string;
+    code_signature?: {
+      status?: string;
+      subject_name: string;
+    };
+    pid?: number;
+    hash?: {
+      md5: string;
+    };
     parent?: {
       entity_id: string;
       name?: string;
+      pid?: number;
     };
   };
+  user?: {
+    domain?: string;
+    name: string;
+  };
+  file?: { path: unknown };
+  registry?: { path: unknown; key: unknown };
 }
 
 export type ResolverEvent = EndpointEvent | LegacyEndpointEvent;
diff --git a/x-pack/plugins/security_solution/public/endpoint_alerts/store/middleware.ts b/x-pack/plugins/security_solution/public/endpoint_alerts/store/middleware.ts
index cd7ed93d22d9f..ae5d36ce0d1ff 100644
--- a/x-pack/plugins/security_solution/public/endpoint_alerts/store/middleware.ts
+++ b/x-pack/plugins/security_solution/public/endpoint_alerts/store/middleware.ts
@@ -13,11 +13,12 @@ import {
 } from '../../../common/endpoint_alerts/types';
 import { ImmutableMiddlewareFactory } from '../../common/store';
 import { cloneHttpFetchQuery } from '../../common/utils/clone_http_fetch_query';
+
 import {
   isOnAlertPage,
   apiQueryParams,
-  hasSelectedAlert,
   uiQueryParams,
+  hasSelectedAlert,
   isAlertPageTabChange,
 } from './selectors';
 
@@ -25,6 +26,26 @@ export const alertMiddlewareFactory: ImmutableMiddlewareFactory<AlertListState>
   coreStart,
   depsStart
 ) => {
+  let lastSelectedAlert: string | null = null;
+  /**
+   * @returns <boolean> true once per change of `selectedAlert` in query params.
+   *
+   * As opposed to `hasSelectedAlert` which always returns true if the alert is present
+   * query params, which can cause unnecessary requests and re-renders in some cases.
+   */
+  const selectedAlertHasChanged = (params: ReturnType<typeof uiQueryParams>): boolean => {
+    const { selected_alert: selectedAlert } = params;
+    const shouldNotChange = selectedAlert === lastSelectedAlert;
+    if (shouldNotChange) {
+      return false;
+    }
+    if (typeof selectedAlert !== 'string') {
+      return false;
+    }
+    lastSelectedAlert = selectedAlert;
+    return true;
+  };
+
   async function fetchIndexPatterns(): Promise<IIndexPattern[]> {
     const { indexPatterns } = depsStart.data;
     const fields = await indexPatterns.getFieldsForWildcard({
@@ -50,7 +71,7 @@ export const alertMiddlewareFactory: ImmutableMiddlewareFactory<AlertListState>
       });
       api.dispatch({ type: 'serverReturnedAlertsData', payload: listResponse });
 
-      if (hasSelectedAlert(state)) {
+      if (hasSelectedAlert(state) && selectedAlertHasChanged(uiQueryParams(state))) {
         const uiParams = uiQueryParams(state);
         const detailsResponse: AlertDetails = await coreStart.http.get(
           `/api/endpoint/alerts/${uiParams.selected_alert}`
diff --git a/x-pack/plugins/security_solution/public/resolver/models/indexed_process_tree.ts b/x-pack/plugins/security_solution/public/resolver/models/indexed_process_tree.ts
index 3102b450e54f8..db00ca2d59968 100644
--- a/x-pack/plugins/security_solution/public/resolver/models/indexed_process_tree.ts
+++ b/x-pack/plugins/security_solution/public/resolver/models/indexed_process_tree.ts
@@ -55,9 +55,8 @@ export function factory(processes: ResolverEvent[]): IndexedProcessTree {
         currentProcessAdjacencyMap.parent = uniqueParentPid;
       }
     } else {
-      idToChildren.set(uniqueParentPid, [process]);
-
       if (uniqueParentPid) {
+        idToChildren.set(uniqueParentPid, [process]);
         /**
          * Get the parent's map, otherwise set an empty one
          */
diff --git a/x-pack/plugins/security_solution/public/resolver/models/process_event.ts b/x-pack/plugins/security_solution/public/resolver/models/process_event.ts
index 038e5b90b2170..1094fee6da249 100644
--- a/x-pack/plugins/security_solution/public/resolver/models/process_event.ts
+++ b/x-pack/plugins/security_solution/public/resolver/models/process_event.ts
@@ -78,6 +78,17 @@ export function uniquePidForProcess(passedEvent: ResolverEvent): string {
   }
 }
 
+/**
+ * Returns the pid for the process on the host
+ */
+export function processPid(passedEvent: ResolverEvent): number | undefined {
+  if (event.isLegacyEvent(passedEvent)) {
+    return passedEvent.endgame.pid;
+  } else {
+    return passedEvent.process.pid;
+  }
+}
+
 /**
  * Returns the process event's parent pid
  */
@@ -88,3 +99,61 @@ export function uniqueParentPidForProcess(passedEvent: ResolverEvent): string |
     return passedEvent.process.parent?.entity_id;
   }
 }
+
+/**
+ * Returns the process event's parent pid
+ */
+export function processParentPid(passedEvent: ResolverEvent): number | undefined {
+  if (event.isLegacyEvent(passedEvent)) {
+    return passedEvent.endgame.ppid;
+  } else {
+    return passedEvent.process.parent?.pid;
+  }
+}
+
+/**
+ * Returns the process event's path on its host
+ */
+export function processPath(passedEvent: ResolverEvent): string | undefined {
+  if (event.isLegacyEvent(passedEvent)) {
+    return passedEvent.endgame.process_path;
+  } else {
+    return passedEvent.process.executable;
+  }
+}
+
+/**
+ * Returns the username for the account that ran the process
+ */
+export function userInfoForProcess(
+  passedEvent: ResolverEvent
+): { user?: string; domain?: string } | undefined {
+  return passedEvent.user;
+}
+
+/**
+ * Returns the MD5 hash for the `passedEvent` param, or undefined if it can't be located
+ * @param {ResolverEvent} passedEvent The `ResolverEvent` to get the MD5 value for
+ * @returns {string | undefined} The MD5 string for the event
+ */
+export function md5HashForProcess(passedEvent: ResolverEvent): string | undefined {
+  if (event.isLegacyEvent(passedEvent)) {
+    // There is not currently a key for this on Legacy event types
+    return undefined;
+  }
+  return passedEvent?.process?.hash?.md5;
+}
+
+/**
+ * Returns the command line path and arguments used to run the `passedEvent` if any
+ *
+ * @param {ResolverEvent} passedEvent The `ResolverEvent` to get the arguemnts value for
+ * @returns {string | undefined} The arguments (including the path) used to run the process
+ */
+export function argsForProcess(passedEvent: ResolverEvent): string | undefined {
+  if (event.isLegacyEvent(passedEvent)) {
+    // There is not currently a key for this on Legacy event types
+    return undefined;
+  }
+  return passedEvent?.process?.args;
+}
diff --git a/x-pack/plugins/security_solution/public/resolver/store/actions.ts b/x-pack/plugins/security_solution/public/resolver/store/actions.ts
index 0963118ce14b8..c633d791e8bf2 100644
--- a/x-pack/plugins/security_solution/public/resolver/store/actions.ts
+++ b/x-pack/plugins/security_solution/public/resolver/store/actions.ts
@@ -24,6 +24,35 @@ interface UserBroughtProcessIntoView {
   };
 }
 
+/**
+ * Dispatched to notify state that a different panel needs to be displayed
+ */
+interface AppDisplayedDifferentPanel {
+  readonly type: 'appDisplayedDifferentPanel';
+  /**
+   * The name of the panel to display
+   */
+  readonly payload: string;
+}
+
+/**
+ * When an examination of query params in the UI indicates that state needs to
+ * be updated to reflect the new selection
+ */
+interface AppDetectedNewIdFromQueryParams {
+  readonly type: 'appDetectedNewIdFromQueryParams';
+  readonly payload: {
+    /**
+     * Used to identify the process the process that should be synced with state.
+     */
+    readonly process: ResolverEvent;
+    /**
+     * The time (since epoch in milliseconds) when the action was dispatched.
+     */
+    readonly time: number;
+  };
+}
+
 /**
  * Used when the alert list selects an alert and the flyout shows resolver.
  */
@@ -45,12 +74,21 @@ interface AppRequestedResolverData {
 }
 
 /**
- * The action dispatched when the app requests related event data for one or more
- * subjects (whose ids should be included as an array @ `payload`)
+ * The action dispatched when the app requests related event data for one
+ * subject (whose entity_id should be included as `payload`)
  */
 interface UserRequestedRelatedEventData {
   readonly type: 'userRequestedRelatedEventData';
-  readonly payload: ResolverEvent;
+  readonly payload: string;
+}
+
+/**
+ * The action dispatched when the app requests related event data for one
+ * subject (whose entity_id should be included as `payload`)
+ */
+interface AppDetectedMissingEventData {
+  readonly type: 'appDetectedMissingEventData';
+  readonly payload: string;
 }
 
 /**
@@ -80,9 +118,13 @@ interface UserSelectedResolverNode {
   readonly type: 'userSelectedResolverNode';
   readonly payload: {
     /**
-     * Used to identify the process node that the user selected
+     * The HTML ID used to identify the process node's element that the user selected
      */
     readonly nodeId: string;
+    /**
+     * The process entity_id for the process the node represents
+     */
+    readonly selectedProcessId: string;
   };
 }
 
@@ -118,4 +160,7 @@ export type ResolverAction =
   | UserSelectedResolverNode
   | UserRequestedRelatedEventData
   | UserSelectedRelatedEventCategory
-  | UserSelectedRelatedAlerts;
+  | UserSelectedRelatedAlerts
+  | AppDetectedNewIdFromQueryParams
+  | AppDisplayedDifferentPanel
+  | AppDetectedMissingEventData;
diff --git a/x-pack/plugins/security_solution/public/resolver/store/data/action.ts b/x-pack/plugins/security_solution/public/resolver/store/data/action.ts
index 96552fbed6207..fbeeefe1ab9f2 100644
--- a/x-pack/plugins/security_solution/public/resolver/store/data/action.ts
+++ b/x-pack/plugins/security_solution/public/resolver/store/data/action.ts
@@ -4,7 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { ResolverEvent, ResolverNodeStats } from '../../../../common/endpoint/types';
+import {
+  ResolverEvent,
+  ResolverNodeStats,
+  ResolverRelatedEvents,
+} from '../../../../common/endpoint/types';
 
 interface ServerReturnedResolverData {
   readonly type: 'serverReturnedResolverData';
@@ -21,10 +25,19 @@ interface ServerFailedToReturnResolverData {
  */
 interface ServerFailedToReturnRelatedEventData {
   readonly type: 'serverFailedToReturnRelatedEventData';
-  readonly payload: ResolverEvent;
+  readonly payload: string;
+}
+
+/**
+ * When related events are returned from the server
+ */
+interface ServerReturnedRelatedEventData {
+  readonly type: 'serverReturnedRelatedEventData';
+  readonly payload: ResolverRelatedEvents;
 }
 
 export type DataAction =
   | ServerReturnedResolverData
   | ServerFailedToReturnResolverData
-  | ServerFailedToReturnRelatedEventData;
+  | ServerFailedToReturnRelatedEventData
+  | ServerReturnedRelatedEventData;
diff --git a/x-pack/plugins/security_solution/public/resolver/store/data/reducer.ts b/x-pack/plugins/security_solution/public/resolver/store/data/reducer.ts
index 0c29411c316d4..3e897a91a74c6 100644
--- a/x-pack/plugins/security_solution/public/resolver/store/data/reducer.ts
+++ b/x-pack/plugins/security_solution/public/resolver/store/data/reducer.ts
@@ -11,6 +11,8 @@ function initialState(): DataState {
   return {
     results: [],
     relatedEventsStats: new Map(),
+    relatedEvents: new Map(),
+    relatedEventsReady: new Map(),
     isLoading: false,
     hasError: false,
   };
@@ -36,6 +38,20 @@ export const dataReducer: Reducer<DataState, ResolverAction> = (state = initialS
       ...state,
       hasError: true,
     };
+  } else if (
+    action.type === 'userRequestedRelatedEventData' ||
+    action.type === 'appDetectedMissingEventData'
+  ) {
+    return {
+      ...state,
+      relatedEventsReady: new Map([...state.relatedEventsReady, [action.payload, false]]),
+    };
+  } else if (action.type === 'serverReturnedRelatedEventData') {
+    return {
+      ...state,
+      relatedEventsReady: new Map([...state.relatedEventsReady, [action.payload.entityID, true]]),
+      relatedEvents: new Map([...state.relatedEvents, [action.payload.entityID, action.payload]]),
+    };
   } else {
     return state;
   }
diff --git a/x-pack/plugins/security_solution/public/resolver/store/data/selectors.ts b/x-pack/plugins/security_solution/public/resolver/store/data/selectors.ts
index 672b3fb2c7293..2873993cc645f 100644
--- a/x-pack/plugins/security_solution/public/resolver/store/data/selectors.ts
+++ b/x-pack/plugins/security_solution/public/resolver/store/data/selectors.ts
@@ -435,6 +435,21 @@ export function relatedEventsStats(data: DataState) {
   return data.relatedEventsStats;
 }
 
+/**
+ * returns {Map<string, ResolverRelatedEvents>} a map of entity_ids to related event data.
+ */
+export function relatedEventsByEntityId(data: DataState) {
+  return data.relatedEvents;
+}
+
+/**
+ * returns {Map<string, boolean>} a map of entity_ids to booleans indicating if it is waiting on related event
+ * A value of `undefined` can be interpreted as `not yet requested`
+ */
+export function relatedEventsReady(data: DataState) {
+  return data.relatedEventsReady;
+}
+
 export const processAdjacencies = createSelector(
   indexedProcessTree,
   graphableProcesses,
diff --git a/x-pack/plugins/security_solution/public/resolver/store/middleware.ts b/x-pack/plugins/security_solution/public/resolver/store/middleware.ts
index 079eecf0315a5..7f6f58dac7158 100644
--- a/x-pack/plugins/security_solution/public/resolver/store/middleware.ts
+++ b/x-pack/plugins/security_solution/public/resolver/store/middleware.ts
@@ -14,6 +14,7 @@ import {
   ResolverAncestry,
   LifecycleNode,
   ResolverNodeStats,
+  ResolverRelatedEvents,
 } from '../../../common/endpoint/types';
 import * as event from '../../../common/endpoint/models/event';
 
@@ -92,6 +93,31 @@ export const resolverMiddlewareFactory: MiddlewareFactory = (context) => {
           });
         }
       }
+    } else if (
+      (action.type === 'userRequestedRelatedEventData' ||
+        action.type === 'appDetectedMissingEventData') &&
+      context
+    ) {
+      const entityIdToFetchFor = action.payload;
+      let result: ResolverRelatedEvents;
+      try {
+        result = await context.services.http.get(
+          `/api/endpoint/resolver/${entityIdToFetchFor}/events`,
+          {
+            query: { events: 100 },
+          }
+        );
+
+        api.dispatch({
+          type: 'serverReturnedRelatedEventData',
+          payload: result,
+        });
+      } catch (e) {
+        api.dispatch({
+          type: 'serverFailedToReturnRelatedEventData',
+          payload: action.payload,
+        });
+      }
     }
   };
 };
diff --git a/x-pack/plugins/security_solution/public/resolver/store/reducer.ts b/x-pack/plugins/security_solution/public/resolver/store/reducer.ts
index 82206d77f8349..77dffd79ea094 100644
--- a/x-pack/plugins/security_solution/public/resolver/store/reducer.ts
+++ b/x-pack/plugins/security_solution/public/resolver/store/reducer.ts
@@ -19,7 +19,12 @@ import { uniquePidForProcess } from '../models/process_event';
 const resolverNodeIdGenerator = htmlIdGenerator('resolverNode');
 
 const uiReducer: Reducer<ResolverUIState, ResolverAction> = (
-  uiState = { activeDescendantId: null, selectedDescendantId: null },
+  uiState = {
+    activeDescendantId: null,
+    selectedDescendantId: null,
+    processEntityIdOfSelectedDescendant: null,
+    panelToDisplay: null,
+  },
   action
 ) => {
   if (action.type === 'userFocusedOnResolverNode') {
@@ -31,17 +36,29 @@ const uiReducer: Reducer<ResolverUIState, ResolverAction> = (
     return {
       ...uiState,
       selectedDescendantId: action.payload.nodeId,
+      processEntityIdOfSelectedDescendant: action.payload.selectedProcessId,
     };
-  } else if (action.type === 'userBroughtProcessIntoView') {
+  } else if (action.type === 'appDisplayedDifferentPanel') {
+    return {
+      ...uiState,
+      panelToDisplay: action.payload,
+    };
+  } else if (
+    action.type === 'userBroughtProcessIntoView' ||
+    action.type === 'appDetectedNewIdFromQueryParams'
+  ) {
     /**
      * This action has a process payload (instead of a processId), so we use
      * `uniquePidForProcess` and `resolverNodeIdGenerator` to resolve the determinant
      * html id of the node being brought into view.
      */
-    const processNodeId = resolverNodeIdGenerator(uniquePidForProcess(action.payload.process));
+    const processEntityId = uniquePidForProcess(action.payload.process);
+    const processNodeId = resolverNodeIdGenerator(processEntityId);
     return {
       ...uiState,
       activeDescendantId: processNodeId,
+      selectedDescendantId: processNodeId,
+      processEntityIdOfSelectedDescendant: processEntityId,
     };
   } else {
     return uiState;
@@ -56,7 +73,10 @@ const concernReducers = combineReducers({
 
 export const resolverReducer: Reducer<ResolverState, ResolverAction> = (state, action) => {
   const nextState = concernReducers(state, action);
-  if (action.type === 'userBroughtProcessIntoView') {
+  if (
+    action.type === 'userBroughtProcessIntoView' ||
+    action.type === 'appDetectedNewIdFromQueryParams'
+  ) {
     return animateProcessIntoView(nextState, action.payload.time, action.payload.process);
   } else {
     return nextState;
diff --git a/x-pack/plugins/security_solution/public/resolver/store/selectors.ts b/x-pack/plugins/security_solution/public/resolver/store/selectors.ts
index 270a84d24a991..bff30c62864f2 100644
--- a/x-pack/plugins/security_solution/public/resolver/store/selectors.ts
+++ b/x-pack/plugins/security_solution/public/resolver/store/selectors.ts
@@ -68,6 +68,22 @@ export const relatedEventsStats = composeSelectors(
   dataSelectors.relatedEventsStats
 );
 
+/**
+ * Map of related events... by entity id
+ */
+export const relatedEventsByEntityId = composeSelectors(
+  dataStateSelector,
+  dataSelectors.relatedEventsByEntityId
+);
+
+/**
+ * Entity ids to booleans for waiting status
+ */
+export const relatedEventsReady = composeSelectors(
+  dataStateSelector,
+  dataSelectors.relatedEventsReady
+);
+
 /**
  * Returns the id of the "current" tree node (fake-focused)
  */
@@ -84,6 +100,19 @@ export const uiSelectedDescendantId = composeSelectors(
   uiSelectors.selectedDescendantId
 );
 
+/**
+ * Returns the entity_id of the "selected" tree node's process
+ */
+export const uiSelectedDescendantProcessId = composeSelectors(
+  uiStateSelector,
+  uiSelectors.selectedDescendantProcessId
+);
+
+/**
+ * The current panel to display
+ */
+export const currentPanelView = composeSelectors(uiStateSelector, uiSelectors.currentPanelView);
+
 /**
  * Returns the camera state from within ResolverState
  */
@@ -115,6 +144,14 @@ export const isLoading = composeSelectors(dataStateSelector, dataSelectors.isLoa
  */
 export const hasError = composeSelectors(dataStateSelector, dataSelectors.hasError);
 
+/**
+ * An array containing all the processes currently in the Resolver than can be graphed
+ */
+export const graphableProcesses = composeSelectors(
+  dataStateSelector,
+  dataSelectors.graphableProcesses
+);
+
 /**
  * Calls the `secondSelector` with the result of the `selector`. Use this when re-exporting a
  * concern-specific selector. `selector` should return the concern-specific state.
diff --git a/x-pack/plugins/security_solution/public/resolver/store/ui/selectors.ts b/x-pack/plugins/security_solution/public/resolver/store/ui/selectors.ts
index 196e834c406b3..bddc7d34abf1c 100644
--- a/x-pack/plugins/security_solution/public/resolver/store/ui/selectors.ts
+++ b/x-pack/plugins/security_solution/public/resolver/store/ui/selectors.ts
@@ -28,3 +28,19 @@ export const selectedDescendantId = createSelector(
     return selectedDescendantId;
   }
 );
+
+/**
+ * id of the currently "selected" tree node
+ */
+export const selectedDescendantProcessId = createSelector(
+  (uiState: ResolverUIState) => uiState,
+  /* eslint-disable no-shadow */
+  ({ processEntityIdOfSelectedDescendant }: ResolverUIState) => {
+    return processEntityIdOfSelectedDescendant;
+  }
+);
+
+// Select the current panel to be displayed
+export const currentPanelView = (uiState: ResolverUIState) => {
+  return uiState.panelToDisplay;
+};
diff --git a/x-pack/plugins/security_solution/public/resolver/types.ts b/x-pack/plugins/security_solution/public/resolver/types.ts
index 765b2b2a26ada..a48f3b59b0f6d 100644
--- a/x-pack/plugins/security_solution/public/resolver/types.ts
+++ b/x-pack/plugins/security_solution/public/resolver/types.ts
@@ -8,7 +8,11 @@ import { Store } from 'redux';
 
 import { ResolverAction } from './store/actions';
 export { ResolverAction } from './store/actions';
-import { ResolverEvent, ResolverNodeStats } from '../../common/endpoint/types';
+import {
+  ResolverEvent,
+  ResolverNodeStats,
+  ResolverRelatedEvents,
+} from '../../common/endpoint/types';
 
 /**
  * Redux state for the Resolver feature. Properties on this interface are populated via multiple reducers using redux's `combineReducers`.
@@ -42,6 +46,14 @@ export interface ResolverUIState {
    * The ID attribute of the resolver's currently selected descendant.
    */
   readonly selectedDescendantId: string | null;
+  /**
+   * The entity_id of the process for the resolver's currently selected descendant.
+   */
+  readonly processEntityIdOfSelectedDescendant: string | null;
+  /**
+   * Which panel the ui should display
+   */
+  readonly panelToDisplay: string | null;
 }
 
 /**
@@ -136,6 +148,8 @@ export type CameraState = {
 export interface DataState {
   readonly results: readonly ResolverEvent[];
   readonly relatedEventsStats: Map<string, ResolverNodeStats>;
+  readonly relatedEvents: Map<string, ResolverRelatedEvents>;
+  readonly relatedEventsReady: Map<string, boolean>;
   isLoading: boolean;
   hasError: boolean;
 }
diff --git a/x-pack/plugins/security_solution/public/resolver/view/assets.tsx b/x-pack/plugins/security_solution/public/resolver/view/assets.tsx
index 150ab3d93a8c7..82f969b755b2f 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/assets.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/assets.tsx
@@ -12,6 +12,9 @@ import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
 import { useUiSetting } from '../../common/lib/kibana';
 import { DEFAULT_DARK_MODE } from '../../../common/constants';
+import { ResolverEvent } from '../../../common/endpoint/types';
+import * as processModel from '../models/process_event';
+import { ResolverProcessType } from '../types';
 
 type ResolverColorNames =
   | 'descriptionText'
@@ -405,7 +408,37 @@ export const SymbolDefinitions = styled(SymbolDefinitionsComponent)`
   height: 0;
 `;
 
-export const useResolverTheme = (): { colorMap: ColorMap; nodeAssets: NodeStyleMap } => {
+const processTypeToCube: Record<ResolverProcessType, keyof NodeStyleMap> = {
+  processCreated: 'runningProcessCube',
+  processRan: 'runningProcessCube',
+  processTerminated: 'terminatedProcessCube',
+  unknownProcessEvent: 'runningProcessCube',
+  processCausedAlert: 'runningTriggerCube',
+  unknownEvent: 'runningProcessCube',
+};
+
+/**
+ * This will return which type the ResolverEvent will display as in the Node component
+ * it will be something like 'runningProcessCube' or 'terminatedProcessCube'
+ *
+ * @param processEvent {ResolverEvent} the event to get the Resolver Component Node type of
+ */
+export function nodeType(processEvent: ResolverEvent): keyof NodeStyleMap {
+  const processType = processModel.eventType(processEvent);
+  if (processType in processTypeToCube) {
+    return processTypeToCube[processType];
+  }
+  return 'runningProcessCube';
+}
+
+/**
+ * A hook to bring Resolver theming information into components.
+ */
+export const useResolverTheme = (): {
+  colorMap: ColorMap;
+  nodeAssets: NodeStyleMap;
+  cubeAssetsForNode: (arg0: ResolverEvent) => NodeStyleConfig;
+} => {
   const isDarkMode = useUiSetting<boolean>(DEFAULT_DARK_MODE);
   const theme = isDarkMode ? euiThemeAmsterdamDark : euiThemeAmsterdamLight;
 
@@ -478,7 +511,15 @@ export const useResolverTheme = (): { colorMap: ColorMap; nodeAssets: NodeStyleM
     },
   };
 
-  return { colorMap, nodeAssets };
+  /**
+   * Export assets to reuse symbols/icons in other places in the app (e.g. tables, etc.)
+   * @param processEvent : The process event to fetch node assets for
+   */
+  function cubeAssetsForNode(processEvent: ResolverEvent) {
+    return nodeAssets[nodeType(processEvent)];
+  }
+
+  return { colorMap, nodeAssets, cubeAssetsForNode };
 };
 
 export const calculateResolverFontSize = (
diff --git a/x-pack/plugins/security_solution/public/resolver/view/index.tsx b/x-pack/plugins/security_solution/public/resolver/view/index.tsx
index 0e15cd5c4e1da..9dfc9a45fafeb 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/index.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/index.tsx
@@ -53,9 +53,9 @@ const StyledResolver = styled.div<StyledResolver>`
 
 const StyledPanel = styled(Panel)`
   position: absolute;
-  left: 1em;
-  top: 1em;
-  max-height: calc(100% - 2em);
+  left: 0;
+  top: 0;
+  bottom: 0;
   overflow: auto;
   width: 25em;
   max-width: 50%;
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panel.tsx b/x-pack/plugins/security_solution/public/resolver/view/panel.tsx
index 2b67a4ac16d4e..4bef2f4d2a10e 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/panel.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/panel.tsx
@@ -3,191 +3,283 @@
  * 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, { memo, useCallback, useMemo, useContext } from 'react';
-import {
-  EuiPanel,
-  EuiBadge,
-  EuiBasicTableColumn,
-  EuiTitle,
-  EuiHorizontalRule,
-  EuiInMemoryTable,
-} from '@elastic/eui';
-import euiVars from '@elastic/eui/dist/eui_theme_light.json';
+
+import React, {
+  memo,
+  useCallback,
+  useMemo,
+  useContext,
+  useLayoutEffect,
+  useState,
+  useEffect,
+} from 'react';
 import { useSelector } from 'react-redux';
-import { i18n } from '@kbn/i18n';
-import { SideEffectContext } from './side_effect_context';
-import { ResolverEvent } from '../../../common/endpoint/types';
-import * as event from '../../../common/endpoint/models/event';
-import { useResolverDispatch } from './use_resolver_dispatch';
+import { useHistory } from 'react-router-dom';
+// eslint-disable-next-line import/no-nodejs-modules
+import querystring from 'querystring';
+import { EuiPanel } from '@elastic/eui';
+import { displayNameRecord } from './process_event_dot';
 import * as selectors from '../store/selectors';
+import { useResolverDispatch } from './use_resolver_dispatch';
+import * as event from '../../../common/endpoint/models/event';
+import { ResolverEvent } from '../../../common/endpoint/types';
+import { SideEffectContext } from './side_effect_context';
+import { ProcessEventListNarrowedByType } from './panels/panel_content_related_list';
+import { EventCountsForProcess } from './panels/panel_content_related_counts';
+import { ProcessDetails } from './panels/panel_content_process_detail';
+import { ProcessListWithCounts } from './panels/panel_content_process_list';
+import { RelatedEventDetail } from './panels/panel_content_related_detail';
+import { CrumbInfo } from './panels/panel_content_utilities';
 
-const HorizontalRule = memo(function HorizontalRule() {
-  return (
-    <EuiHorizontalRule
-      style={{
-        /**
-         * Cannot use `styled` to override this because the specificity of EuiHorizontalRule's
-         * CSS selectors is too high.
-         */
-        marginLeft: `-${euiVars.euiPanelPaddingModifiers.paddingMedium}`,
-        marginRight: `-${euiVars.euiPanelPaddingModifiers.paddingMedium}`,
-        /**
-         * The default width is 100%, but this should be greater.
-         */
-        width: 'auto',
-      }}
-    />
-  );
-});
-
-export const Panel = memo(function Event({ className }: { className?: string }) {
-  interface ProcessTableView {
-    name: string;
-    timestamp?: Date;
-    event: ResolverEvent;
-  }
+/**
+ * The team decided to use this table to determine which breadcrumbs/view to display:
+ *
+ * | Crumb/Table            | &crumbId                   | &crumbEvent              |
+ * | :--------------------- | :------------------------- | :----------------------  |
+ * | all processes/default  | null                       | null                     |
+ * | process detail         | entity_id of process       | null                     |
+ * | relateds count by type | entity_id of process       | 'all'                    |
+ * | relateds list 1 type   | entity_id of process       | valid related event type |
+ * | related event detail   | event_id of related event  | entity_id of process     |
+ *
+ * This component implements the strategy laid out above by determining the "right" view and doing some other housekeeping e.g. effects to keep the UI-selected node in line with what's indicated by the URL parameters.
+ *
+ * @returns {JSX.Element} The "right" table content to show based on the query params as described above
+ */
+const PanelContent = memo(function PanelContent() {
+  const history = useHistory();
+  const urlSearch = history.location.search;
+  const dispatch = useResolverDispatch();
 
-  const { processNodePositions } = useSelector(selectors.processNodePositionsAndEdgeLineSegments);
-  const { timestamp } = useContext(SideEffectContext);
+  const queryParams: CrumbInfo = useMemo(() => {
+    return { crumbId: '', crumbEvent: '', ...querystring.parse(urlSearch.slice(1)) };
+  }, [urlSearch]);
 
-  const processTableView: ProcessTableView[] = useMemo(
-    () =>
-      [...processNodePositions.keys()].map((processEvent) => {
-        let dateTime;
-        const eventTime = event.eventTimestamp(processEvent);
-        const name = event.eventName(processEvent);
-        if (eventTime) {
-          const date = new Date(eventTime);
-          if (isFinite(date.getTime())) {
-            dateTime = date;
-          }
-        }
-        return {
-          name,
-          timestamp: dateTime,
-          event: processEvent,
-        };
-      }),
-    [processNodePositions]
-  );
+  const graphableProcesses = useSelector(selectors.graphableProcesses);
+  const graphableProcessEntityIds = useMemo(() => {
+    return new Set(graphableProcesses.map(event.entityId));
+  }, [graphableProcesses]);
+  // The entity id in query params of a graphable process (or false if none is found)
+  // For 1 case (the related detail, see below), the process id will be in crumbEvent instead of crumbId
+  const idFromParams = useMemo(() => {
+    if (graphableProcessEntityIds.has(queryParams.crumbId)) {
+      return queryParams.crumbId;
+    }
+    if (graphableProcessEntityIds.has(queryParams.crumbEvent)) {
+      return queryParams.crumbEvent;
+    }
+    return '';
+  }, [queryParams, graphableProcessEntityIds]);
 
-  const formatter = new Intl.DateTimeFormat(i18n.getLocale(), {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  });
+  // The "selected" node (and its corresponding event) in the tree control.
+  // It may need to be synchronized with the ID indicated as selected via the `idFromParams`
+  // memo above. When this is the case, it is handled by the layout effect below.
+  const selectedDescendantProcessId = useSelector(selectors.uiSelectedDescendantProcessId);
+  const uiSelectedEvent = useMemo(() => {
+    return graphableProcesses.find((evt) => event.entityId(evt) === selectedDescendantProcessId);
+  }, [graphableProcesses, selectedDescendantProcessId]);
 
-  const dispatch = useResolverDispatch();
+  // Until an event is dispatched during update, the event indicated as selected by params may
+  // be different than the one in state.
+  const paramsSelectedEvent = useMemo(() => {
+    return graphableProcesses.find((evt) => event.entityId(evt) === idFromParams);
+  }, [graphableProcesses, idFromParams]);
+  const { timestamp } = useContext(SideEffectContext);
+  const [lastUpdatedProcess, setLastUpdatedProcess] = useState<null | ResolverEvent>(null);
 
-  const handleBringIntoViewClick = useCallback(
-    (processTableViewItem) => {
+  /**
+   * When the ui-selected node is _not_ the one indicated by the query params, but the id from params _is_ in the current tree,
+   * dispatch a selection action to amend the UI state to hold the query id as "selected".
+   * This is to cover cases where users e.g. share links to reconstitute a Resolver state or
+   * an effect pushes a new process id to the query params.
+   */
+  useLayoutEffect(() => {
+    if (
+      paramsSelectedEvent &&
+      // Check state to ensure we don't dispatch this in a way that causes unnecessary re-renders, or disrupts animation:
+      paramsSelectedEvent !== lastUpdatedProcess &&
+      paramsSelectedEvent !== uiSelectedEvent
+    ) {
+      setLastUpdatedProcess(paramsSelectedEvent);
       dispatch({
-        type: 'userBroughtProcessIntoView',
+        type: 'appDetectedNewIdFromQueryParams',
         payload: {
           time: timestamp(),
-          process: processTableViewItem.event,
+          process: paramsSelectedEvent,
         },
       });
+    }
+  }, [dispatch, uiSelectedEvent, paramsSelectedEvent, lastUpdatedProcess, timestamp]);
+
+  /**
+   * This updates the breadcrumb nav and the panel view. It's supplied to each
+   * panel content view to allow them to dispatch transitions to each other.
+   */
+  const pushToQueryParams = useCallback(
+    (newCrumbs: CrumbInfo) => {
+      // Construct a new set of params from the current set (minus empty params)
+      // by assigning the new set of params provided in `newCrumbs`
+      const crumbsToPass = {
+        ...querystring.parse(urlSearch.slice(1)),
+        ...newCrumbs,
+      };
+
+      // If either was passed in as empty, remove it from the record
+      if (crumbsToPass.crumbId === '') {
+        delete crumbsToPass.crumbId;
+      }
+      if (crumbsToPass.crumbEvent === '') {
+        delete crumbsToPass.crumbEvent;
+      }
+
+      const relativeURL = { search: querystring.stringify(crumbsToPass) };
+      // We probably don't want to nuke the user's history with a huge
+      // trail of these, thus `.replace` instead of `.push`
+      return history.replace(relativeURL);
     },
-    [dispatch, timestamp]
+    [history, urlSearch]
   );
 
-  const columns = useMemo<Array<EuiBasicTableColumn<ProcessTableView>>>(
-    () => [
-      {
-        field: 'name',
-        name: i18n.translate(
-          'xpack.securitySolution.endpoint.resolver.panel.tabel.row.processNameTitle',
-          {
-            defaultMessage: 'Process Name',
-          }
-        ),
-        sortable: true,
-        truncateText: true,
-        render(name: string) {
-          return name === '' ? (
-            <EuiBadge color="warning">
-              {i18n.translate(
-                'xpack.securitySolution.endpoint.resolver.panel.table.row.valueMissingDescription',
-                {
-                  defaultMessage: 'Value is missing',
-                }
-              )}
-            </EuiBadge>
-          ) : (
-            name
-          );
-        },
-      },
-      {
-        field: 'timestamp',
-        name: i18n.translate(
-          'xpack.securitySolution.endpoint.resolver.panel.tabel.row.timestampTitle',
-          {
-            defaultMessage: 'Timestamp',
-          }
-        ),
-        dataType: 'date',
-        sortable: true,
-        render(eventDate?: Date) {
-          return eventDate ? (
-            formatter.format(eventDate)
-          ) : (
-            <EuiBadge color="warning">
-              {i18n.translate(
-                'xpack.securitySolution.endpoint.resolver.panel.tabel.row.timestampInvalidLabel',
-                {
-                  defaultMessage: 'invalid',
-                }
-              )}
-            </EuiBadge>
-          );
-        },
-      },
-      {
-        name: i18n.translate(
-          'xpack.securitySolution.endpoint.resolver.panel.tabel.row.actionsTitle',
-          {
-            defaultMessage: 'Actions',
-          }
-        ),
-        actions: [
-          {
-            name: i18n.translate(
-              'xpack.securitySolution.endpoint.resolver.panel.tabel.row.actions.bringIntoViewButtonLabel',
-              {
-                defaultMessage: 'Bring into view',
-              }
-            ),
-            description: i18n.translate(
-              'xpack.securitySolution.endpoint.resolver.panel.tabel.row.bringIntoViewLabel',
-              {
-                defaultMessage: 'Bring the process into view on the map.',
-              }
-            ),
-            type: 'icon',
-            icon: 'flag',
-            onClick: handleBringIntoViewClick,
-          },
-        ],
-      },
-    ],
-    [formatter, handleBringIntoViewClick]
-  );
+  // GO JONNY GO
+  const relatedEventStats = useSelector(selectors.relatedEventsStats);
+  const { crumbId, crumbEvent } = queryParams;
+  const relatedStatsForIdFromParams = useMemo(() => {
+    if (idFromParams) {
+      return relatedEventStats.get(idFromParams);
+    }
+    return undefined;
+  }, [relatedEventStats, idFromParams]);
+
+  /**
+   * Determine which set of breadcrumbs to display based on the query parameters
+   * for the table & breadcrumb nav.
+   *
+   */
+  const panelToShow = useMemo(() => {
+    if (crumbEvent === '' && crumbId === '') {
+      /**
+       * | Crumb/Table            | &crumbId                   | &crumbEvent              |
+       * | :--------------------- | :------------------------- | :----------------------  |
+       * | all processes/default  | null                       | null                     |
+       */
+      return 'processListWithCounts';
+    }
+
+    if (graphableProcessEntityIds.has(crumbId)) {
+      /**
+       * | Crumb/Table            | &crumbId                   | &crumbEvent              |
+       * | :--------------------- | :------------------------- | :----------------------  |
+       * | process detail         | entity_id of process       | null                     |
+       */
+      if (crumbEvent === '' && uiSelectedEvent) {
+        return 'processDetails';
+      }
+
+      /**
+       * | Crumb/Table            | &crumbId                   | &crumbEvent              |
+       * | :--------------------- | :------------------------- | :----------------------  |
+       * | relateds count by type | entity_id of process       | 'all'                    |
+       */
+
+      if (crumbEvent === 'all' && uiSelectedEvent) {
+        return 'eventCountsForProcess';
+      }
+
+      /**
+       * | Crumb/Table            | &crumbId                   | &crumbEvent              |
+       * | :--------------------- | :------------------------- | :----------------------  |
+       * | relateds list 1 type   | entity_id of process       | valid related event type |
+       */
+
+      if (crumbEvent in displayNameRecord && uiSelectedEvent) {
+        return 'processEventListNarrowedByType';
+      }
+    }
+
+    if (graphableProcessEntityIds.has(crumbEvent)) {
+      /**
+       * | Crumb/Table            | &crumbId                   | &crumbEvent              |
+       * | :--------------------- | :------------------------- | :----------------------  |
+       * | related event detail   | event_id of related event  | entity_id of process     |
+       */
+      return 'relatedEventDetail';
+    }
+
+    // The default 'Event List' / 'List of all processes' view
+    return 'processListWithCounts';
+  }, [uiSelectedEvent, crumbEvent, crumbId, graphableProcessEntityIds]);
+
+  useEffect(() => {
+    // dispatch `appDisplayedDifferentPanel` to sync state with which panel gets displayed
+    dispatch({
+      type: 'appDisplayedDifferentPanel',
+      payload: panelToShow,
+    });
+  }, [panelToShow, dispatch]);
+
+  const currentPanelView = useSelector(selectors.currentPanelView);
+
+  const panelInstance = useMemo(() => {
+    if (currentPanelView === 'processDetails') {
+      return (
+        <ProcessDetails processEvent={uiSelectedEvent!} pushToQueryParams={pushToQueryParams} />
+      );
+    }
+
+    if (currentPanelView === 'eventCountsForProcess') {
+      return (
+        <EventCountsForProcess
+          processEvent={uiSelectedEvent!}
+          pushToQueryParams={pushToQueryParams}
+          relatedStats={relatedStatsForIdFromParams!}
+        />
+      );
+    }
+
+    if (currentPanelView === 'processEventListNarrowedByType') {
+      return (
+        <ProcessEventListNarrowedByType
+          processEvent={uiSelectedEvent!}
+          pushToQueryParams={pushToQueryParams}
+          relatedStats={relatedStatsForIdFromParams!}
+          eventType={crumbEvent}
+        />
+      );
+    }
+
+    if (currentPanelView === 'relatedEventDetail') {
+      const parentCount: number = Object.values(
+        relatedStatsForIdFromParams?.events.byCategory || {}
+      ).reduce((sum, val) => sum + val, 0);
+      return (
+        <RelatedEventDetail
+          relatedEventId={crumbId}
+          parentEvent={uiSelectedEvent!}
+          pushToQueryParams={pushToQueryParams}
+          countForParent={parentCount}
+        />
+      );
+    }
+    // The default 'Event List' / 'List of all processes' view
+    return <ProcessListWithCounts pushToQueryParams={pushToQueryParams} />;
+  }, [
+    uiSelectedEvent,
+    crumbEvent,
+    crumbId,
+    pushToQueryParams,
+    relatedStatsForIdFromParams,
+    currentPanelView,
+  ]);
+
+  return <>{panelInstance}</>;
+});
+PanelContent.displayName = 'PanelContent';
+
+export const Panel = memo(function Event({ className }: { className?: string }) {
   return (
     <EuiPanel className={className}>
-      <EuiTitle size="xs">
-        <h4>
-          {i18n.translate('xpack.securitySolution.endpoint.resolver.panel.title', {
-            defaultMessage: 'Processes',
-          })}
-        </h4>
-      </EuiTitle>
-      <HorizontalRule />
-      <EuiInMemoryTable<ProcessTableView> items={processTableView} columns={columns} sorting />
+      <PanelContent />
     </EuiPanel>
   );
 });
+Panel.displayName = 'Panel';
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_error.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_error.tsx
new file mode 100644
index 0000000000000..c9a536fd5932d
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_error.tsx
@@ -0,0 +1,61 @@
+/*
+ * 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 { EuiSpacer, EuiText, EuiButtonEmpty } from '@elastic/eui';
+import React, { memo, useMemo } from 'react';
+import { CrumbInfo, StyledBreadcrumbs } from './panel_content_utilities';
+
+/**
+ * Display an error in the panel when something goes wrong and give the user a way to "retreat" back to a default state.
+ *
+ * @param {function} pushToQueryparams A function to update the hash value in the URL to control panel state
+ * @param {string} translatedErrorMessage The message to display in the panel when something goes wrong
+ */
+export const PanelContentError = memo(function ({
+  translatedErrorMessage,
+  pushToQueryParams,
+}: {
+  translatedErrorMessage: string;
+  pushToQueryParams: (arg0: CrumbInfo) => unknown;
+}) {
+  const crumbs = useMemo(() => {
+    return [
+      {
+        text: i18n.translate('xpack.securitySolution.endpoint.resolver.panel.error.events', {
+          defaultMessage: 'Events',
+        }),
+        onClick: () => {
+          pushToQueryParams({ crumbId: '', crumbEvent: '' });
+        },
+      },
+      {
+        text: i18n.translate('xpack.securitySolution.endpoint.resolver.panel.error.error', {
+          defaultMessage: 'Error',
+        }),
+        onClick: () => {},
+      },
+    ];
+  }, [pushToQueryParams]);
+  return (
+    <>
+      <StyledBreadcrumbs breadcrumbs={crumbs} />
+      <EuiSpacer size="l" />
+      <EuiText textAlign="center">{translatedErrorMessage}</EuiText>
+      <EuiSpacer size="l" />
+      <EuiButtonEmpty
+        onClick={() => {
+          pushToQueryParams({ crumbId: '', crumbEvent: '' });
+        }}
+      >
+        {i18n.translate('xpack.securitySolution.endpoint.resolver.panel.error.goBack', {
+          defaultMessage: 'Click this link to return to the list of all processes.',
+        })}
+      </EuiButtonEmpty>
+    </>
+  );
+});
+PanelContentError.displayName = 'TableServiceError';
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_detail.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_detail.tsx
new file mode 100644
index 0000000000000..fcb7bf1d12e1b
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_detail.tsx
@@ -0,0 +1,211 @@
+/*
+ * 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, { memo, useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
+import {
+  htmlIdGenerator,
+  EuiSpacer,
+  EuiTitle,
+  EuiText,
+  EuiTextColor,
+  EuiDescriptionList,
+} from '@elastic/eui';
+import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
+import * as event from '../../../../common/endpoint/models/event';
+import { CrumbInfo, formatDate, StyledBreadcrumbs } from './panel_content_utilities';
+import {
+  processPath,
+  processPid,
+  userInfoForProcess,
+  processParentPid,
+  md5HashForProcess,
+  argsForProcess,
+} from '../../models/process_event';
+import { CubeForProcess } from './process_cube_icon';
+import { ResolverEvent } from '../../../../common/endpoint/types';
+import { useResolverTheme } from '../assets';
+
+const StyledDescriptionList = styled(EuiDescriptionList)`
+  &.euiDescriptionList.euiDescriptionList--column dt.euiDescriptionList__title.desc-title {
+    max-width: 8em;
+  }
+`;
+
+/**
+ * A description list view of all the Metadata that goes with a particular process event, like:
+ * Created, Pid, User/Domain, etc.
+ */
+export const ProcessDetails = memo(function ProcessDetails({
+  processEvent,
+  pushToQueryParams,
+}: {
+  processEvent: ResolverEvent;
+  pushToQueryParams: (arg0: CrumbInfo) => unknown;
+}) {
+  const processName = event.eventName(processEvent);
+  const processInfoEntry = useMemo(() => {
+    const eventTime = event.eventTimestamp(processEvent);
+    const dateTime = eventTime ? formatDate(eventTime) : '';
+
+    const createdEntry = {
+      title: i18n.translate(
+        'xpack.securitySolution.endpoint.resolver.panel.processDescList.created',
+        {
+          defaultMessage: 'Created',
+        }
+      ),
+      description: dateTime,
+    };
+
+    const pathEntry = {
+      title: i18n.translate('xpack.securitySolution.endpoint.resolver.panel.processDescList.path', {
+        defaultMessage: 'Path',
+      }),
+      description: processPath(processEvent),
+    };
+
+    const pidEntry = {
+      title: i18n.translate('xpack.securitySolution.endpoint.resolver.panel.processDescList.pid', {
+        defaultMessage: 'PID',
+      }),
+      description: processPid(processEvent),
+    };
+
+    const userEntry = {
+      title: i18n.translate('xpack.securitySolution.endpoint.resolver.panel.processDescList.user', {
+        defaultMessage: 'User',
+      }),
+      description: (userInfoForProcess(processEvent) as { name: string }).name,
+    };
+
+    const domainEntry = {
+      title: i18n.translate(
+        'xpack.securitySolution.endpoint.resolver.panel.processDescList.domain',
+        {
+          defaultMessage: 'Domain',
+        }
+      ),
+      description: (userInfoForProcess(processEvent) as { domain: string }).domain,
+    };
+
+    const parentPidEntry = {
+      title: i18n.translate(
+        'xpack.securitySolution.endpoint.resolver.panel.processDescList.parentPid',
+        {
+          defaultMessage: 'Parent PID',
+        }
+      ),
+      description: processParentPid(processEvent),
+    };
+
+    const md5Entry = {
+      title: i18n.translate(
+        'xpack.securitySolution.endpoint.resolver.panel.processDescList.md5hash',
+        {
+          defaultMessage: 'MD5',
+        }
+      ),
+      description: md5HashForProcess(processEvent),
+    };
+
+    const commandLineEntry = {
+      title: i18n.translate(
+        'xpack.securitySolution.endpoint.resolver.panel.processDescList.commandLine',
+        {
+          defaultMessage: 'Command Line',
+        }
+      ),
+      description: argsForProcess(processEvent),
+    };
+
+    // This is the data in {title, description} form for the EUIDescriptionList to display
+    const processDescriptionListData = [
+      createdEntry,
+      pathEntry,
+      pidEntry,
+      userEntry,
+      domainEntry,
+      parentPidEntry,
+      md5Entry,
+      commandLineEntry,
+    ]
+      .filter((entry) => {
+        return entry.description;
+      })
+      .map((entry) => {
+        return {
+          ...entry,
+          description: String(entry.description),
+        };
+      });
+
+    return processDescriptionListData;
+  }, [processEvent]);
+
+  const crumbs = useMemo(() => {
+    return [
+      {
+        text: i18n.translate(
+          'xpack.securitySolution.endpoint.resolver.panel.processDescList.events',
+          {
+            defaultMessage: 'Events',
+          }
+        ),
+        onClick: () => {
+          pushToQueryParams({ crumbId: '', crumbEvent: '' });
+        },
+      },
+      {
+        text: (
+          <>
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.detailsForProcessName"
+              values={{ processName }}
+              defaultMessage="Details for: {processName}"
+            />
+          </>
+        ),
+        onClick: () => {},
+      },
+    ];
+  }, [processName, pushToQueryParams]);
+  const { cubeAssetsForNode } = useResolverTheme();
+  const { descriptionText } = useMemo(() => {
+    if (!processEvent) {
+      return { descriptionText: '' };
+    }
+    return cubeAssetsForNode(processEvent);
+  }, [processEvent, cubeAssetsForNode]);
+
+  const titleId = useMemo(() => htmlIdGenerator('resolverTable')(), []);
+  return (
+    <>
+      <StyledBreadcrumbs breadcrumbs={crumbs} />
+      <EuiSpacer size="l" />
+      <EuiTitle size="xs">
+        <h4 aria-describedby={titleId}>
+          <CubeForProcess processEvent={processEvent} />
+          {processName}
+        </h4>
+      </EuiTitle>
+      <EuiText>
+        <EuiTextColor color="subdued">
+          <span id={titleId}>{descriptionText}</span>
+        </EuiTextColor>
+      </EuiText>
+      <EuiSpacer size="l" />
+      <StyledDescriptionList
+        type="column"
+        align="left"
+        titleProps={{ className: 'desc-title' }}
+        compressed
+        listItems={processInfoEntry}
+      />
+    </>
+  );
+});
+ProcessDetails.displayName = 'ProcessDetails';
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_list.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_list.tsx
new file mode 100644
index 0000000000000..86ae10b3b38c8
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_list.tsx
@@ -0,0 +1,164 @@
+/*
+ * 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, { memo, useContext, useCallback, useMemo } from 'react';
+import {
+  EuiBasicTableColumn,
+  EuiBadge,
+  EuiButtonEmpty,
+  EuiSpacer,
+  EuiInMemoryTable,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useSelector } from 'react-redux';
+import * as event from '../../../../common/endpoint/models/event';
+import * as selectors from '../../store/selectors';
+import { CrumbInfo, formatter, StyledBreadcrumbs } from './panel_content_utilities';
+import { useResolverDispatch } from '../use_resolver_dispatch';
+import { SideEffectContext } from '../side_effect_context';
+import { CubeForProcess } from './process_cube_icon';
+import { ResolverEvent } from '../../../../common/endpoint/types';
+
+/**
+ * The "default" view for the panel: A list of all the processes currently in the graph.
+ *
+ * @param {function} pushToQueryparams A function to update the hash value in the URL to control panel state
+ */
+export const ProcessListWithCounts = memo(function ProcessListWithCounts({
+  pushToQueryParams,
+}: {
+  pushToQueryParams: (arg0: CrumbInfo) => unknown;
+}) {
+  interface ProcessTableView {
+    name: string;
+    timestamp?: Date;
+    event: ResolverEvent;
+  }
+
+  const dispatch = useResolverDispatch();
+  const { timestamp } = useContext(SideEffectContext);
+  const handleBringIntoViewClick = useCallback(
+    (processTableViewItem) => {
+      dispatch({
+        type: 'userBroughtProcessIntoView',
+        payload: {
+          time: timestamp(),
+          process: processTableViewItem.event,
+        },
+      });
+      pushToQueryParams({ crumbId: event.entityId(processTableViewItem.event), crumbEvent: '' });
+    },
+    [dispatch, timestamp, pushToQueryParams]
+  );
+
+  const columns = useMemo<Array<EuiBasicTableColumn<ProcessTableView>>>(
+    () => [
+      {
+        field: 'name',
+        name: i18n.translate(
+          'xpack.securitySolution.endpoint.resolver.panel.table.row.processNameTitle',
+          {
+            defaultMessage: 'Process Name',
+          }
+        ),
+        sortable: true,
+        truncateText: true,
+        render(name: string, item: ProcessTableView) {
+          return name === '' ? (
+            <EuiBadge color="warning">
+              {i18n.translate(
+                'xpack.securitySolution.endpoint.resolver.panel.table.row.valueMissingDescription',
+                {
+                  defaultMessage: 'Value is missing',
+                }
+              )}
+            </EuiBadge>
+          ) : (
+            <EuiButtonEmpty
+              onClick={() => {
+                handleBringIntoViewClick(item);
+                pushToQueryParams({ crumbId: event.entityId(item.event), crumbEvent: '' });
+              }}
+            >
+              <CubeForProcess processEvent={item.event} />
+              {name}
+            </EuiButtonEmpty>
+          );
+        },
+      },
+      {
+        field: 'timestamp',
+        name: i18n.translate(
+          'xpack.securitySolution.endpoint.resolver.panel.table.row.timestampTitle',
+          {
+            defaultMessage: 'Timestamp',
+          }
+        ),
+        dataType: 'date',
+        sortable: true,
+        render(eventDate?: Date) {
+          return eventDate ? (
+            formatter.format(eventDate)
+          ) : (
+            <EuiBadge color="warning">
+              {i18n.translate(
+                'xpack.securitySolution.endpoint.resolver.panel.table.row.timestampInvalidLabel',
+                {
+                  defaultMessage: 'invalid',
+                }
+              )}
+            </EuiBadge>
+          );
+        },
+      },
+    ],
+    [pushToQueryParams, handleBringIntoViewClick]
+  );
+
+  const { processNodePositions } = useSelector(selectors.processNodePositionsAndEdgeLineSegments);
+  const processTableView: ProcessTableView[] = useMemo(
+    () =>
+      [...processNodePositions.keys()].map((processEvent) => {
+        let dateTime;
+        const eventTime = event.eventTimestamp(processEvent);
+        const name = event.eventName(processEvent);
+        if (eventTime) {
+          const date = new Date(eventTime);
+          if (isFinite(date.getTime())) {
+            dateTime = date;
+          }
+        }
+        return {
+          name,
+          timestamp: dateTime,
+          event: processEvent,
+        };
+      }),
+    [processNodePositions]
+  );
+
+  const crumbs = useMemo(() => {
+    return [
+      {
+        text: i18n.translate(
+          'xpack.securitySolution.endpoint.resolver.panel.processListWithCounts.events',
+          {
+            defaultMessage: 'All Process Events',
+          }
+        ),
+        onClick: () => {},
+      },
+    ];
+  }, []);
+
+  return (
+    <>
+      <StyledBreadcrumbs breadcrumbs={crumbs} />
+      <EuiSpacer size="l" />
+      <EuiInMemoryTable<ProcessTableView> items={processTableView} columns={columns} sorting />
+    </>
+  );
+});
+ProcessListWithCounts.displayName = 'ProcessListWithCounts';
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_counts.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_counts.tsx
new file mode 100644
index 0000000000000..2e4211f568ffe
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_counts.tsx
@@ -0,0 +1,144 @@
+/*
+ * 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, { memo, useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiBasicTableColumn, EuiButtonEmpty, EuiSpacer, EuiInMemoryTable } from '@elastic/eui';
+import { FormattedMessage } from 'react-intl';
+import { CrumbInfo, StyledBreadcrumbs } from './panel_content_utilities';
+
+import * as event from '../../../../common/endpoint/models/event';
+import { ResolverEvent, ResolverNodeStats } from '../../../../common/endpoint/types';
+
+/**
+ * This view gives counts for all the related events of a process grouped by related event type.
+ * It should look something like:
+ *
+ * | Count                  | Event Type                 |
+ * | :--------------------- | :------------------------- |
+ * | 5                      | DNS                        |
+ * | 12                     | Registry                   |
+ * | 2                      | Network                    |
+ *
+ */
+export const EventCountsForProcess = memo(function EventCountsForProcess({
+  processEvent,
+  pushToQueryParams,
+  relatedStats,
+}: {
+  processEvent: ResolverEvent;
+  pushToQueryParams: (arg0: CrumbInfo) => unknown;
+  relatedStats: ResolverNodeStats;
+}) {
+  interface EventCountsTableView {
+    name: string;
+    count: number;
+  }
+
+  const relatedEventsState = { stats: relatedStats.events.byCategory };
+  const processName = processEvent && event.eventName(processEvent);
+  const processEntityId = event.entityId(processEvent);
+  /**
+   * totalCount: This will reflect the aggregated total by category for all related events
+   * e.g. [dns,file],[dns,file],[registry] will have an aggregate total of 5. This is to keep the
+   * total number consistent with the "broken out" totals we see elsewhere in the app.
+   * E.g. on the rleated list by type, the above would show as:
+   * 2 dns
+   * 2 file
+   * 1 registry
+   * So it would be extremely disorienting to show the user a "3" above that as a total.
+   */
+  const totalCount = Object.values(relatedStats.events.byCategory).reduce(
+    (sum, val) => sum + val,
+    0
+  );
+  const eventsString = i18n.translate(
+    'xpack.securitySolution.endpoint.resolver.panel.processEventCounts.events',
+    {
+      defaultMessage: 'Events',
+    }
+  );
+  const crumbs = useMemo(() => {
+    return [
+      {
+        text: eventsString,
+        onClick: () => {
+          pushToQueryParams({ crumbId: '', crumbEvent: '' });
+        },
+      },
+      {
+        text: processName,
+        onClick: () => {
+          pushToQueryParams({ crumbId: processEntityId, crumbEvent: '' });
+        },
+      },
+      {
+        text: (
+          <>
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.resolver.panel.relatedCounts.numberOfEventsInCrumb"
+              values={{ totalCount }}
+              defaultMessage="{totalCount} Events"
+            />
+          </>
+        ),
+        onClick: () => {
+          pushToQueryParams({ crumbId: processEntityId, crumbEvent: '' });
+        },
+      },
+    ];
+  }, [processName, totalCount, processEntityId, pushToQueryParams, eventsString]);
+  const rows = useMemo(() => {
+    return Object.entries(relatedEventsState.stats).map(
+      ([eventType, count]): EventCountsTableView => {
+        return {
+          name: eventType,
+          count,
+        };
+      }
+    );
+  }, [relatedEventsState]);
+  const columns = useMemo<Array<EuiBasicTableColumn<EventCountsTableView>>>(
+    () => [
+      {
+        field: 'count',
+        name: i18n.translate('xpack.securitySolution.endpoint.resolver.panel.table.row.count', {
+          defaultMessage: 'Count',
+        }),
+        width: '20%',
+        sortable: true,
+      },
+      {
+        field: 'name',
+        name: i18n.translate('xpack.securitySolution.endpoint.resolver.panel.table.row.eventType', {
+          defaultMessage: 'Event Type',
+        }),
+        width: '80%',
+        sortable: true,
+        render(name: string) {
+          return (
+            <EuiButtonEmpty
+              onClick={() => {
+                pushToQueryParams({ crumbId: event.entityId(processEvent), crumbEvent: name });
+              }}
+            >
+              {name}
+            </EuiButtonEmpty>
+          );
+        },
+      },
+    ],
+    [pushToQueryParams, processEvent]
+  );
+  return (
+    <>
+      <StyledBreadcrumbs breadcrumbs={crumbs} />
+      <EuiSpacer size="l" />
+      <EuiInMemoryTable<EventCountsTableView> items={rows} columns={columns} sorting />
+    </>
+  );
+});
+EventCountsForProcess.displayName = 'EventCountsForProcess';
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_detail.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_detail.tsx
new file mode 100644
index 0000000000000..1fe6599e0829a
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_detail.tsx
@@ -0,0 +1,365 @@
+/*
+ * 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, { memo, useMemo, useEffect, Fragment } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiSpacer, EuiText, EuiDescriptionList, EuiTextColor, EuiTitle } from '@elastic/eui';
+import styled from 'styled-components';
+import { useSelector } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import { CrumbInfo, formatDate, StyledBreadcrumbs, BoldCode } from './panel_content_utilities';
+import * as event from '../../../../common/endpoint/models/event';
+import { ResolverEvent } from '../../../../common/endpoint/types';
+import * as selectors from '../../store/selectors';
+import { useResolverDispatch } from '../use_resolver_dispatch';
+import { PanelContentError } from './panel_content_error';
+
+/**
+ * A helper function to turn objects into EuiDescriptionList entries.
+ * This reflects the strategy of more or less "dumping" metadata for related processes
+ * in description lists with little/no 'prettification'. This has the obvious drawback of
+ * data perhaps appearing inscrutable/daunting, but the benefit of presenting these fields
+ * to the user "as they occur" in ECS, which may help them with e.g. EQL queries.
+ *
+ * Given an object like: {a:{b: 1}, c: 'd'} it will yield title/description entries like so:
+ * {title: "a.b", description: "1"}, {title: "c", description: "d"}
+ *
+ * @param {object} obj The object to turn into `<dt><dd>` entries
+ */
+const objectToDescriptionListEntries = function* (
+  obj: object,
+  prefix = ''
+): Generator<{ title: string; description: string }> {
+  const nextPrefix = prefix.length ? `${prefix}.` : '';
+  for (const [metaKey, metaValue] of Object.entries(obj)) {
+    if (typeof metaValue === 'number' || typeof metaValue === 'string') {
+      yield { title: nextPrefix + metaKey, description: `${metaValue}` };
+    } else if (metaValue instanceof Array) {
+      yield {
+        title: nextPrefix + metaKey,
+        description: metaValue
+          .filter((arrayEntry) => {
+            return typeof arrayEntry === 'number' || typeof arrayEntry === 'string';
+          })
+          .join(','),
+      };
+    } else if (typeof metaValue === 'object') {
+      yield* objectToDescriptionListEntries(metaValue, nextPrefix + metaKey);
+    }
+  }
+};
+
+// Adding some styles to prevent horizontal scrollbars, per request from UX review
+const StyledDescriptionList = memo(styled(EuiDescriptionList)`
+  &.euiDescriptionList.euiDescriptionList--column dt.euiDescriptionList__title.desc-title {
+    max-width: 8em;
+  }
+  &.euiDescriptionList.euiDescriptionList--column dd.euiDescriptionList__description {
+    max-width: calc(100% - 8.5em);
+    overflow-wrap: break-word;
+  }
+`);
+
+// Styling subtitles, per UX review:
+const StyledFlexTitle = memo(styled('h3')`
+  display: flex;
+  flex-flow: row;
+  font-size: 1.2em;
+`);
+const StyledTitleRule = memo(styled('hr')`
+  &.euiHorizontalRule.euiHorizontalRule--full.euiHorizontalRule--marginSmall.override {
+    display: block;
+    flex: 1;
+    margin-left: 0.5em;
+  }
+`);
+
+const TitleHr = memo(() => {
+  return (
+    <StyledTitleRule className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall override" />
+  );
+});
+TitleHr.displayName = 'TitleHR';
+
+/**
+ * This view presents a detailed view of all the available data for a related event, split and titled by the "section"
+ * it appears in the underlying ResolverEvent
+ */
+export const RelatedEventDetail = memo(function RelatedEventDetail({
+  relatedEventId,
+  parentEvent,
+  pushToQueryParams,
+  countForParent,
+}: {
+  relatedEventId: string;
+  parentEvent: ResolverEvent;
+  pushToQueryParams: (arg0: CrumbInfo) => unknown;
+  countForParent: number | undefined;
+}) {
+  const processName = (parentEvent && event.eventName(parentEvent)) || '*';
+  const processEntityId = parentEvent && event.entityId(parentEvent);
+  const totalCount = countForParent || 0;
+  const eventsString = i18n.translate(
+    'xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.events',
+    {
+      defaultMessage: 'Events',
+    }
+  );
+  const naString = i18n.translate(
+    'xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.NA',
+    {
+      defaultMessage: 'N/A',
+    }
+  );
+
+  const relatedsReadyMap = useSelector(selectors.relatedEventsReady);
+  const relatedsReady = relatedsReadyMap.get(processEntityId!);
+  const dispatch = useResolverDispatch();
+
+  /**
+   * If we don't have the related events for the parent yet, use this effect
+   * to request them.
+   */
+  useEffect(() => {
+    if (typeof relatedsReady === 'undefined') {
+      dispatch({
+        type: 'appDetectedMissingEventData',
+        payload: processEntityId,
+      });
+    }
+  }, [relatedsReady, dispatch, processEntityId]);
+
+  const relatedEventsForThisProcess = useSelector(selectors.relatedEventsByEntityId).get(
+    processEntityId!
+  );
+
+  const [relatedEventToShowDetailsFor, countBySameCategory, relatedEventCategory] = useMemo(() => {
+    if (!relatedEventsForThisProcess) {
+      return [undefined, 0];
+    }
+    const specificEvent = relatedEventsForThisProcess.events.find(
+      (evt) => event.eventId(evt) === relatedEventId
+    );
+    // For breadcrumbs:
+    const specificCategory = specificEvent && event.primaryEventCategory(specificEvent);
+    const countOfCategory = relatedEventsForThisProcess.events.reduce((sumtotal, evt) => {
+      return event.primaryEventCategory(evt) === specificCategory ? sumtotal + 1 : sumtotal;
+    }, 0);
+    return [specificEvent, countOfCategory, specificCategory || naString];
+  }, [relatedEventsForThisProcess, naString, relatedEventId]);
+
+  const [sections, formattedDate] = useMemo(() => {
+    if (!relatedEventToShowDetailsFor) {
+      // This could happen if user relaods from URL param and requests an eventId that no longer exists
+      return [[], naString];
+    }
+    // Assuming these details (agent, ecs, process) aren't as helpful, can revisit
+    const {
+      agent,
+      ecs,
+      process,
+      ...relevantData
+    } = relatedEventToShowDetailsFor as ResolverEvent & {
+      ecs: unknown;
+    };
+    let displayDate = '';
+    const sectionData: Array<{
+      sectionTitle: string;
+      entries: Array<{ title: string; description: string }>;
+    }> = Object.entries(relevantData)
+      .map(([sectionTitle, val]) => {
+        if (sectionTitle === '@timestamp') {
+          displayDate = formatDate(val);
+          return { sectionTitle: '', entries: [] };
+        }
+        if (typeof val !== 'object') {
+          return { sectionTitle, entries: [{ title: sectionTitle, description: `${val}` }] };
+        }
+        return { sectionTitle, entries: [...objectToDescriptionListEntries(val)] };
+      })
+      .filter((v) => v.sectionTitle !== '' && v.entries.length);
+    return [sectionData, displayDate];
+  }, [relatedEventToShowDetailsFor, naString]);
+
+  const waitCrumbs = useMemo(() => {
+    return [
+      {
+        text: eventsString,
+        onClick: () => {
+          pushToQueryParams({ crumbId: '', crumbEvent: '' });
+        },
+      },
+    ];
+  }, [pushToQueryParams, eventsString]);
+
+  const { subject = '', descriptor = '' } = relatedEventToShowDetailsFor
+    ? event.descriptiveName(relatedEventToShowDetailsFor)
+    : {};
+  const crumbs = useMemo(() => {
+    return [
+      {
+        text: eventsString,
+        onClick: () => {
+          pushToQueryParams({ crumbId: '', crumbEvent: '' });
+        },
+      },
+      {
+        text: processName,
+        onClick: () => {
+          pushToQueryParams({ crumbId: processEntityId!, crumbEvent: '' });
+        },
+      },
+      {
+        text: (
+          <>
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.numberOfEvents"
+              values={{ totalCount }}
+              defaultMessage="{totalCount} Events"
+            />
+          </>
+        ),
+        onClick: () => {
+          pushToQueryParams({ crumbId: processEntityId!, crumbEvent: 'all' });
+        },
+      },
+      {
+        text: (
+          <>
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.countByCategory"
+              values={{ count: countBySameCategory, category: relatedEventCategory }}
+              defaultMessage="{count} {category}"
+            />
+          </>
+        ),
+        onClick: () => {
+          pushToQueryParams({
+            crumbId: processEntityId!,
+            crumbEvent: relatedEventCategory || 'all',
+          });
+        },
+      },
+      {
+        text: relatedEventToShowDetailsFor ? (
+          <FormattedMessage
+            id="xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.eventDescriptiveName"
+            values={{ subject, descriptor }}
+            defaultMessage="{descriptor} {subject}"
+          />
+        ) : (
+          naString
+        ),
+        onClick: () => {},
+      },
+    ];
+  }, [
+    processName,
+    processEntityId,
+    eventsString,
+    pushToQueryParams,
+    totalCount,
+    countBySameCategory,
+    naString,
+    relatedEventCategory,
+    relatedEventToShowDetailsFor,
+    subject,
+    descriptor,
+  ]);
+
+  /**
+   * If the ship hasn't come in yet, wait on the dock
+   */
+  if (!relatedsReady) {
+    const waitingString = i18n.translate(
+      'xpack.securitySolution.endpoint.resolver.panel.relatedDetail.wait',
+      {
+        defaultMessage: 'Waiting For Events...',
+      }
+    );
+    return (
+      <>
+        <StyledBreadcrumbs breadcrumbs={waitCrumbs} />
+        <EuiSpacer size="l" />
+        <EuiTitle>
+          <h4>{waitingString}</h4>
+        </EuiTitle>
+      </>
+    );
+  }
+
+  /**
+   * Could happen if user e.g. loads a URL with a bad crumbEvent
+   */
+  if (!relatedEventToShowDetailsFor) {
+    const errString = i18n.translate(
+      'xpack.securitySolution.endpoint.resolver.panel.relatedDetail.missing',
+      {
+        defaultMessage: 'Related event not found.',
+      }
+    );
+    return (
+      <PanelContentError translatedErrorMessage={errString} pushToQueryParams={pushToQueryParams} />
+    );
+  }
+
+  return (
+    <>
+      <StyledBreadcrumbs truncate={false} breadcrumbs={crumbs} />
+      <EuiSpacer size="l" />
+      <EuiText size="s">
+        <BoldCode>
+          <FormattedMessage
+            id="xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.categoryAndType"
+            values={{
+              category: relatedEventCategory,
+              eventType: String(event.ecsEventType(relatedEventToShowDetailsFor)),
+            }}
+            defaultMessage="{category} {eventType}"
+          />
+        </BoldCode>
+        <FormattedMessage
+          id="xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.atTime"
+          values={{ date: formattedDate }}
+          defaultMessage="@ {date}"
+        />
+      </EuiText>
+      <EuiSpacer size="m" />
+      <EuiText>
+        <FormattedMessage
+          id="xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.eventDescriptiveNameInTitle"
+          values={{ subject, descriptor }}
+          defaultMessage="{descriptor} {subject}"
+        />
+      </EuiText>
+      <EuiSpacer size="l" />
+      {sections.map(({ sectionTitle, entries }, index) => {
+        return (
+          <Fragment key={index}>
+            {index === 0 ? null : <EuiSpacer size="m" />}
+            <EuiTitle size="xs">
+              <EuiTextColor color="secondary">
+                <StyledFlexTitle>
+                  {sectionTitle}
+                  <TitleHr />
+                </StyledFlexTitle>
+              </EuiTextColor>
+            </EuiTitle>
+            <StyledDescriptionList
+              type="column"
+              align="left"
+              titleProps={{ className: 'desc-title' }}
+              compressed
+              listItems={entries}
+            />
+            {index === sections.length - 1 ? null : <EuiSpacer size="m" />}
+          </Fragment>
+        );
+      })}
+    </>
+  );
+});
+RelatedEventDetail.displayName = 'RelatedEventDetail';
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_list.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_list.tsx
new file mode 100644
index 0000000000000..c9c303010d10d
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_related_list.tsx
@@ -0,0 +1,247 @@
+/*
+ * 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, { memo, useMemo, useEffect, Fragment } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiTitle, EuiSpacer, EuiText, EuiButtonEmpty, EuiHorizontalRule } from '@elastic/eui';
+import { useSelector } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import { CrumbInfo, formatDate, StyledBreadcrumbs, BoldCode } from './panel_content_utilities';
+import * as event from '../../../../common/endpoint/models/event';
+import { ResolverEvent, ResolverNodeStats } from '../../../../common/endpoint/types';
+import * as selectors from '../../store/selectors';
+import { useResolverDispatch } from '../use_resolver_dispatch';
+
+/**
+ * This view presents a list of related events of a given type for a given process.
+ * It will appear like:
+ *
+ * |                                                        |
+ * | :----------------------------------------------------- |
+ * | **registry deletion** @ *3:32PM..* *HKLM/software...*  |
+ * | **file creation** @ *3:34PM..* *C:/directory/file.exe* |
+ */
+
+interface MatchingEventEntry {
+  formattedDate: string;
+  eventType: string;
+  eventCategory: string;
+  name: { subject: string; descriptor?: string };
+  entityId: string;
+  setQueryParams: () => void;
+}
+
+const DisplayList = memo(function DisplayList({
+  crumbs,
+  matchingEventEntries,
+}: {
+  crumbs: Array<{ text: string | JSX.Element; onClick: () => void }>;
+  matchingEventEntries: MatchingEventEntry[];
+}) {
+  return (
+    <>
+      <StyledBreadcrumbs breadcrumbs={crumbs} />
+      <EuiSpacer size="l" />
+      <>
+        {matchingEventEntries.map((eventView, index) => {
+          const { subject, descriptor = '' } = eventView.name;
+          return (
+            <Fragment key={index}>
+              <EuiText>
+                <BoldCode>
+                  <FormattedMessage
+                    id="xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.categoryAndType"
+                    values={{
+                      category: eventView.eventCategory,
+                      eventType: eventView.eventType,
+                    }}
+                    defaultMessage="{category} {eventType}"
+                  />
+                </BoldCode>
+                <FormattedMessage
+                  id="xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.atTime"
+                  values={{ date: eventView.formattedDate }}
+                  defaultMessage="@ {date}"
+                />
+              </EuiText>
+              <EuiSpacer size="xs" />
+              <EuiButtonEmpty onClick={eventView.setQueryParams}>
+                <FormattedMessage
+                  id="xpack.securitySolution.endpoint.resolver.panel.processEventListByType.eventDescriptiveName"
+                  values={{ subject, descriptor }}
+                  defaultMessage="{descriptor} {subject}"
+                />
+              </EuiButtonEmpty>
+              {index === matchingEventEntries.length - 1 ? null : <EuiHorizontalRule margin="m" />}
+            </Fragment>
+          );
+        })}
+      </>
+    </>
+  );
+});
+
+export const ProcessEventListNarrowedByType = memo(function ProcessEventListNarrowedByType({
+  processEvent,
+  eventType,
+  relatedStats,
+  pushToQueryParams,
+}: {
+  processEvent: ResolverEvent;
+  pushToQueryParams: (arg0: CrumbInfo) => unknown;
+  eventType: string;
+  relatedStats: ResolverNodeStats;
+}) {
+  const processName = processEvent && event.eventName(processEvent);
+  const processEntityId = event.entityId(processEvent);
+  const totalCount = Object.values(relatedStats.events.byCategory).reduce(
+    (sum, val) => sum + val,
+    0
+  );
+  const eventsString = i18n.translate(
+    'xpack.securitySolution.endpoint.resolver.panel.processEventListByType.events',
+    {
+      defaultMessage: 'Events',
+    }
+  );
+  const waitingString = i18n.translate(
+    'xpack.securitySolution.endpoint.resolver.panel.processEventListByType.wait',
+    {
+      defaultMessage: 'Waiting For Events...',
+    }
+  );
+
+  const relatedsReadyMap = useSelector(selectors.relatedEventsReady);
+  const relatedsReady = relatedsReadyMap.get(processEntityId);
+
+  const relatedEventsForThisProcess = useSelector(selectors.relatedEventsByEntityId).get(
+    processEntityId
+  );
+  const dispatch = useResolverDispatch();
+
+  useEffect(() => {
+    if (typeof relatedsReady === 'undefined') {
+      dispatch({
+        type: 'appDetectedMissingEventData',
+        payload: processEntityId,
+      });
+    }
+  }, [relatedsReady, dispatch, processEntityId]);
+
+  const waitCrumbs = useMemo(() => {
+    return [
+      {
+        text: eventsString,
+        onClick: () => {
+          pushToQueryParams({ crumbId: '', crumbEvent: '' });
+        },
+      },
+    ];
+  }, [pushToQueryParams, eventsString]);
+
+  const relatedEventsToDisplay = useMemo(() => {
+    return relatedEventsForThisProcess?.events || [];
+  }, [relatedEventsForThisProcess?.events]);
+
+  /**
+   * A list entry will be displayed for each of these
+   */
+  const matchingEventEntries: MatchingEventEntry[] = useMemo(() => {
+    const relateds = relatedEventsToDisplay
+      .reduce((a: ResolverEvent[], candidate) => {
+        if (event.primaryEventCategory(candidate) === eventType) {
+          a.push(candidate);
+        }
+        return a;
+      }, [])
+      .map((resolverEvent) => {
+        const eventTime = event.eventTimestamp(resolverEvent);
+        const formattedDate = typeof eventTime === 'undefined' ? '' : formatDate(eventTime);
+        const entityId = event.eventId(resolverEvent);
+
+        return {
+          formattedDate,
+          eventCategory: `${eventType}`,
+          eventType: `${event.ecsEventType(resolverEvent)}`,
+          name: event.descriptiveName(resolverEvent),
+          entityId,
+          setQueryParams: () => {
+            pushToQueryParams({ crumbId: entityId, crumbEvent: processEntityId });
+          },
+        };
+      });
+    return relateds;
+  }, [relatedEventsToDisplay, eventType, processEntityId, pushToQueryParams]);
+
+  const crumbs = useMemo(() => {
+    return [
+      {
+        text: eventsString,
+        onClick: () => {
+          pushToQueryParams({ crumbId: '', crumbEvent: '' });
+        },
+      },
+      {
+        text: processName,
+        onClick: () => {
+          pushToQueryParams({ crumbId: processEntityId, crumbEvent: '' });
+        },
+      },
+      {
+        text: (
+          <>
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.resolver.panel.relatedEventList.numberOfEvents"
+              values={{ totalCount }}
+              defaultMessage="{totalCount} Events"
+            />
+          </>
+        ),
+        onClick: () => {
+          pushToQueryParams({ crumbId: processEntityId, crumbEvent: 'all' });
+        },
+      },
+      {
+        text: (
+          <>
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.resolver.panel.relatedEventList.countByCategory"
+              values={{ count: matchingEventEntries.length, category: eventType }}
+              defaultMessage="{count} {category}"
+            />
+          </>
+        ),
+        onClick: () => {},
+      },
+    ];
+  }, [
+    eventType,
+    eventsString,
+    matchingEventEntries.length,
+    processEntityId,
+    processName,
+    pushToQueryParams,
+    totalCount,
+  ]);
+
+  /**
+   * Wait here until the effect resolves...
+   */
+  if (!relatedsReady) {
+    return (
+      <>
+        <StyledBreadcrumbs breadcrumbs={waitCrumbs} />
+        <EuiSpacer size="l" />
+        <EuiTitle>
+          <h4>{waitingString}</h4>
+        </EuiTitle>
+      </>
+    );
+  }
+
+  return <DisplayList crumbs={crumbs} matchingEventEntries={matchingEventEntries} />;
+});
+ProcessEventListNarrowedByType.displayName = 'ProcessEventListNarrowedByType';
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_utilities.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_utilities.tsx
new file mode 100644
index 0000000000000..65422d3d705d0
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_utilities.tsx
@@ -0,0 +1,90 @@
+/*
+ * 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 { EuiBreadcrumbs, Breadcrumb, EuiCode } from '@elastic/eui';
+import styled from 'styled-components';
+import React, { memo } from 'react';
+import { useResolverTheme } from '../assets';
+
+/**
+ * A bold version of EuiCode to display certain titles with
+ */
+export const BoldCode = styled(EuiCode)`
+  &.euiCodeBlock code.euiCodeBlock__code {
+    font-weight: 900;
+  }
+`;
+
+/**
+ * The two query parameters we read/write on to control which view the table presents:
+ */
+export interface CrumbInfo {
+  readonly crumbId: string;
+  readonly crumbEvent: string;
+}
+
+const ThemedBreadcrumbs = styled(EuiBreadcrumbs)<{ background: string; text: string }>`
+  &.euiBreadcrumbs.euiBreadcrumbs--responsive {
+    background-color: ${(props) => props.background};
+    color: ${(props) => props.text};
+    padding: 1em;
+  }
+`;
+
+/**
+ * Breadcrumb menu with adjustments per direction from UX team
+ */
+export const StyledBreadcrumbs = memo(function StyledBreadcrumbs({
+  breadcrumbs,
+  truncate,
+}: {
+  breadcrumbs: Breadcrumb[];
+  truncate?: boolean;
+}) {
+  const {
+    colorMap: { resolverEdge, resolverEdgeText },
+  } = useResolverTheme();
+  return (
+    <ThemedBreadcrumbs
+      background={resolverEdge}
+      text={resolverEdgeText}
+      breadcrumbs={breadcrumbs}
+      truncate={truncate}
+    />
+  );
+});
+
+/**
+ * Long formatter (to second) for DateTime
+ */
+export const formatter = new Intl.DateTimeFormat(i18n.getLocale(), {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+});
+
+const invalidDateText = i18n.translate(
+  'xpack.securitySolution.enpdoint.resolver.panelutils.invaliddate',
+  {
+    defaultMessage: 'Invalid Date',
+  }
+);
+/**
+ * @param {ConstructorParameters<typeof Date>[0]} timestamp To be passed through Date->Intl.DateTimeFormat
+ * @returns {string} A nicely formatted string for a date
+ */
+export function formatDate(timestamp: ConstructorParameters<typeof Date>[0]) {
+  const date = new Date(timestamp);
+  if (isFinite(date.getTime())) {
+    return formatter.format(date);
+  } else {
+    return invalidDateText;
+  }
+}
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/process_cube_icon.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/process_cube_icon.tsx
new file mode 100644
index 0000000000000..29ffe154d5719
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/resolver/view/panels/process_cube_icon.tsx
@@ -0,0 +1,46 @@
+/*
+ * 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, { memo } from 'react';
+import { ResolverEvent } from '../../../../common/endpoint/types';
+import { useResolverTheme } from '../assets';
+
+/**
+ * During user testing, one user indicated they wanted to see stronger visual relationships between
+ * Nodes on the graph and what's in the table. Using the same symbol in both places (as below) could help with that.
+ */
+export const CubeForProcess = memo(function CubeForProcess({
+  processEvent,
+}: {
+  processEvent: ResolverEvent;
+}) {
+  const { cubeAssetsForNode } = useResolverTheme();
+  const { cubeSymbol, descriptionText } = cubeAssetsForNode(processEvent);
+
+  return (
+    <>
+      <svg
+        style={{ position: 'relative', top: '0.4em', marginRight: '.25em' }}
+        className="table-process-icon"
+        width="1.5em"
+        height="1.5em"
+        viewBox="0 0 1 1"
+      >
+        <desc>{descriptionText}</desc>
+        <use
+          role="presentation"
+          xlinkHref={cubeSymbol}
+          x={0}
+          y={0}
+          width={1}
+          height={1}
+          opacity="1"
+          className="cube"
+        />
+      </svg>
+    </>
+  );
+});
diff --git a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx
index 7b463f0bed26a..78b70611a6972 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx
@@ -7,195 +7,185 @@
 import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
-import {
-  htmlIdGenerator,
-  EuiButton,
-  EuiI18nNumber,
-  EuiKeyboardAccessible,
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '@elastic/eui';
+import { htmlIdGenerator, EuiButton, EuiI18nNumber, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+// eslint-disable-next-line import/no-nodejs-modules
+import querystring from 'querystring';
 import { NodeSubMenu, subMenuAssets } from './submenu';
 import { applyMatrix3 } from '../lib/vector2';
-import { Vector2, Matrix3, AdjacentProcessMap, ResolverProcessType } from '../types';
-import { SymbolIds, useResolverTheme, NodeStyleMap, calculateResolverFontSize } from './assets';
+import { Vector2, Matrix3, AdjacentProcessMap } from '../types';
+import { SymbolIds, useResolverTheme, calculateResolverFontSize, nodeType } from './assets';
 import { ResolverEvent, ResolverNodeStats } from '../../../common/endpoint/types';
 import { useResolverDispatch } from './use_resolver_dispatch';
 import * as eventModel from '../../../common/endpoint/models/event';
-import * as processModel from '../models/process_event';
 import * as selectors from '../store/selectors';
+import { CrumbInfo } from './panels/panel_content_utilities';
+
+/**
+ * A map of all known event types (in ugly schema format) to beautifully i18n'd display names
+ */
+export const displayNameRecord = {
+  application: i18n.translate(
+    'xpack.securitySolution.endpoint.resolver.applicationEventTypeDisplayName',
+    {
+      defaultMessage: 'Application',
+    }
+  ),
+  apm: i18n.translate('xpack.securitySolution.endpoint.resolver.apmEventTypeDisplayName', {
+    defaultMessage: 'APM',
+  }),
+  audit: i18n.translate('xpack.securitySolution.endpoint.resolver.auditEventTypeDisplayName', {
+    defaultMessage: 'Audit',
+  }),
+  authentication: i18n.translate(
+    'xpack.securitySolution.endpoint.resolver.authenticationEventTypeDisplayName',
+    {
+      defaultMessage: 'Authentication',
+    }
+  ),
+  certificate: i18n.translate(
+    'xpack.securitySolution.endpoint.resolver.certificateEventTypeDisplayName',
+    {
+      defaultMessage: 'Certificate',
+    }
+  ),
+  cloud: i18n.translate('xpack.securitySolution.endpoint.resolver.cloudEventTypeDisplayName', {
+    defaultMessage: 'Cloud',
+  }),
+  database: i18n.translate(
+    'xpack.securitySolution.endpoint.resolver.databaseEventTypeDisplayName',
+    {
+      defaultMessage: 'Database',
+    }
+  ),
+  driver: i18n.translate('xpack.securitySolution.endpoint.resolver.driverEventTypeDisplayName', {
+    defaultMessage: 'Driver',
+  }),
+  email: i18n.translate('xpack.securitySolution.endpoint.resolver.emailEventTypeDisplayName', {
+    defaultMessage: 'Email',
+  }),
+  file: i18n.translate('xpack.securitySolution.endpoint.resolver.fileEventTypeDisplayName', {
+    defaultMessage: 'File',
+  }),
+  host: i18n.translate('xpack.securitySolution.endpoint.resolver.hostEventTypeDisplayName', {
+    defaultMessage: 'Host',
+  }),
+  iam: i18n.translate('xpack.securitySolution.endpoint.resolver.iamEventTypeDisplayName', {
+    defaultMessage: 'IAM',
+  }),
+  iam_group: i18n.translate(
+    'xpack.securitySolution.endpoint.resolver.iam_groupEventTypeDisplayName',
+    {
+      defaultMessage: 'IAM Group',
+    }
+  ),
+  intrusion_detection: i18n.translate(
+    'xpack.securitySolution.endpoint.resolver.intrusion_detectionEventTypeDisplayName',
+    {
+      defaultMessage: 'Intrusion Detection',
+    }
+  ),
+  malware: i18n.translate('xpack.securitySolution.endpoint.resolver.malwareEventTypeDisplayName', {
+    defaultMessage: 'Malware',
+  }),
+  network_flow: i18n.translate(
+    'xpack.securitySolution.endpoint.resolver.network_flowEventTypeDisplayName',
+    {
+      defaultMessage: 'Network Flow',
+    }
+  ),
+  network: i18n.translate('xpack.securitySolution.endpoint.resolver.networkEventTypeDisplayName', {
+    defaultMessage: 'Network',
+  }),
+  package: i18n.translate('xpack.securitySolution.endpoint.resolver.packageEventTypeDisplayName', {
+    defaultMessage: 'Package',
+  }),
+  process: i18n.translate('xpack.securitySolution.endpoint.resolver.processEventTypeDisplayName', {
+    defaultMessage: 'Process',
+  }),
+  registry: i18n.translate(
+    'xpack.securitySolution.endpoint.resolver.registryEventTypeDisplayName',
+    {
+      defaultMessage: 'Registry',
+    }
+  ),
+  session: i18n.translate('xpack.securitySolution.endpoint.resolver.sessionEventTypeDisplayName', {
+    defaultMessage: 'Session',
+  }),
+  service: i18n.translate('xpack.securitySolution.endpoint.resolver.serviceEventTypeDisplayName', {
+    defaultMessage: 'Service',
+  }),
+  socket: i18n.translate('xpack.securitySolution.endpoint.resolver.socketEventTypeDisplayName', {
+    defaultMessage: 'Socket',
+  }),
+  vulnerability: i18n.translate(
+    'xpack.securitySolution.endpoint.resolver.vulnerabilityEventTypeDisplayName',
+    {
+      defaultMessage: 'Vulnerability',
+    }
+  ),
+  web: i18n.translate('xpack.securitySolution.endpoint.resolver.webEventTypeDisplayName', {
+    defaultMessage: 'Web',
+  }),
+  alert: i18n.translate('xpack.securitySolution.endpoint.resolver.alertEventTypeDisplayName', {
+    defaultMessage: 'Alert',
+  }),
+  security: i18n.translate(
+    'xpack.securitySolution.endpoint.resolver.securityEventTypeDisplayName',
+    {
+      defaultMessage: 'Security',
+    }
+  ),
+  dns: i18n.translate('xpack.securitySolution.endpoint.resolver.dnsEventTypeDisplayName', {
+    defaultMessage: 'DNS',
+  }),
+  clr: i18n.translate('xpack.securitySolution.endpoint.resolver.clrEventTypeDisplayName', {
+    defaultMessage: 'CLR',
+  }),
+  image_load: i18n.translate(
+    'xpack.securitySolution.endpoint.resolver.image_loadEventTypeDisplayName',
+    {
+      defaultMessage: 'Image Load',
+    }
+  ),
+  powershell: i18n.translate(
+    'xpack.securitySolution.endpoint.resolver.powershellEventTypeDisplayName',
+    {
+      defaultMessage: 'Powershell',
+    }
+  ),
+  wmi: i18n.translate('xpack.securitySolution.endpoint.resolver.wmiEventTypeDisplayName', {
+    defaultMessage: 'WMI',
+  }),
+  api: i18n.translate('xpack.securitySolution.endpoint.resolver.apiEventTypeDisplayName', {
+    defaultMessage: 'API',
+  }),
+  user: i18n.translate('xpack.securitySolution.endpoint.resolver.userEventTypeDisplayName', {
+    defaultMessage: 'User',
+  }),
+} as const;
+
+const unknownEventTypeMessage = i18n.translate(
+  'xpack.securitySolution.endpoint.resolver.userEventTypeDisplayUnknown',
+  {
+    defaultMessage: 'Unknown',
+  }
+);
+
+type EventDisplayName = typeof displayNameRecord[keyof typeof displayNameRecord] &
+  typeof unknownEventTypeMessage;
 
 /**
  * Take a gross `schemaName` and return a beautiful translated one.
  */
-const getDisplayName: (schemaName: string) => string = function nameInSchemaToDisplayName(
-  schemaName: string
+const getDisplayName: (schemaName: string) => EventDisplayName = function nameInSchemaToDisplayName(
+  schemaName
 ) {
-  const displayNameRecord: Record<string, string> = {
-    application: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.applicationEventTypeDisplayName',
-      {
-        defaultMessage: 'Application',
-      }
-    ),
-    apm: i18n.translate('xpack.securitySolution.endpoint.resolver.apmEventTypeDisplayName', {
-      defaultMessage: 'APM',
-    }),
-    audit: i18n.translate('xpack.securitySolution.endpoint.resolver.auditEventTypeDisplayName', {
-      defaultMessage: 'Audit',
-    }),
-    authentication: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.authenticationEventTypeDisplayName',
-      {
-        defaultMessage: 'Authentication',
-      }
-    ),
-    certificate: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.certificateEventTypeDisplayName',
-      {
-        defaultMessage: 'Certificate',
-      }
-    ),
-    cloud: i18n.translate('xpack.securitySolution.endpoint.resolver.cloudEventTypeDisplayName', {
-      defaultMessage: 'Cloud',
-    }),
-    database: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.databaseEventTypeDisplayName',
-      {
-        defaultMessage: 'Database',
-      }
-    ),
-    driver: i18n.translate('xpack.securitySolution.endpoint.resolver.driverEventTypeDisplayName', {
-      defaultMessage: 'Driver',
-    }),
-    email: i18n.translate('xpack.securitySolution.endpoint.resolver.emailEventTypeDisplayName', {
-      defaultMessage: 'Email',
-    }),
-    file: i18n.translate('xpack.securitySolution.endpoint.resolver.fileEventTypeDisplayName', {
-      defaultMessage: 'File',
-    }),
-    host: i18n.translate('xpack.securitySolution.endpoint.resolver.hostEventTypeDisplayName', {
-      defaultMessage: 'Host',
-    }),
-    iam: i18n.translate('xpack.securitySolution.endpoint.resolver.iamEventTypeDisplayName', {
-      defaultMessage: 'IAM',
-    }),
-    iam_group: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.iam_groupEventTypeDisplayName',
-      {
-        defaultMessage: 'IAM Group',
-      }
-    ),
-    intrusion_detection: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.intrusion_detectionEventTypeDisplayName',
-      {
-        defaultMessage: 'Intrusion Detection',
-      }
-    ),
-    malware: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.malwareEventTypeDisplayName',
-      {
-        defaultMessage: 'Malware',
-      }
-    ),
-    network_flow: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.network_flowEventTypeDisplayName',
-      {
-        defaultMessage: 'Network Flow',
-      }
-    ),
-    network: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.networkEventTypeDisplayName',
-      {
-        defaultMessage: 'Network',
-      }
-    ),
-    package: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.packageEventTypeDisplayName',
-      {
-        defaultMessage: 'Package',
-      }
-    ),
-    process: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.processEventTypeDisplayName',
-      {
-        defaultMessage: 'Process',
-      }
-    ),
-    registry: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.registryEventTypeDisplayName',
-      {
-        defaultMessage: 'Registry',
-      }
-    ),
-    session: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.sessionEventTypeDisplayName',
-      {
-        defaultMessage: 'Session',
-      }
-    ),
-    service: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.serviceEventTypeDisplayName',
-      {
-        defaultMessage: 'Service',
-      }
-    ),
-    socket: i18n.translate('xpack.securitySolution.endpoint.resolver.socketEventTypeDisplayName', {
-      defaultMessage: 'Socket',
-    }),
-    vulnerability: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.vulnerabilityEventTypeDisplayName',
-      {
-        defaultMessage: 'Vulnerability',
-      }
-    ),
-    web: i18n.translate('xpack.securitySolution.endpoint.resolver.webEventTypeDisplayName', {
-      defaultMessage: 'Web',
-    }),
-    alert: i18n.translate('xpack.securitySolution.endpoint.resolver.alertEventTypeDisplayName', {
-      defaultMessage: 'Alert',
-    }),
-    security: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.securityEventTypeDisplayName',
-      {
-        defaultMessage: 'Security',
-      }
-    ),
-    dns: i18n.translate('xpack.securitySolution.endpoint.resolver.dnsEventTypeDisplayName', {
-      defaultMessage: 'DNS',
-    }),
-    clr: i18n.translate('xpack.securitySolution.endpoint.resolver.clrEventTypeDisplayName', {
-      defaultMessage: 'CLR',
-    }),
-    image_load: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.image_loadEventTypeDisplayName',
-      {
-        defaultMessage: 'Image Load',
-      }
-    ),
-    powershell: i18n.translate(
-      'xpack.securitySolution.endpoint.resolver.powershellEventTypeDisplayName',
-      {
-        defaultMessage: 'Powershell',
-      }
-    ),
-    wmi: i18n.translate('xpack.securitySolution.endpoint.resolver.wmiEventTypeDisplayName', {
-      defaultMessage: 'WMI',
-    }),
-    api: i18n.translate('xpack.securitySolution.endpoint.resolver.apiEventTypeDisplayName', {
-      defaultMessage: 'API',
-    }),
-    user: i18n.translate('xpack.securitySolution.endpoint.resolver.userEventTypeDisplayName', {
-      defaultMessage: 'User',
-    }),
-  };
-  return (
-    displayNameRecord[schemaName] ||
-    i18n.translate('xpack.securitySolution.endpoint.resolver.userEventTypeDisplayUnknown', {
-      defaultMessage: 'Unknown',
-    })
-  );
+  if (schemaName in displayNameRecord) {
+    return displayNameRecord[schemaName as keyof typeof displayNameRecord];
+  }
+  return unknownEventTypeMessage;
 };
 
 interface StyledActionsContainer {
@@ -283,11 +273,14 @@ const ProcessEventDotComponents = React.memo(
 
     const [magFactorX] = projectionMatrix;
 
+    // Node (html id=) IDs
     const selfId = adjacentNodeMap.self;
-
     const activeDescendantId = useSelector(selectors.uiActiveDescendantId);
     const selectedDescendantId = useSelector(selectors.uiSelectedDescendantId);
 
+    // Entity ID of self
+    const selfEntityId = eventModel.entityId(event);
+
     const isShowingEventActions = magFactorX > 0.8;
     const isShowingDescriptionText = magFactorX >= 0.55;
 
@@ -401,6 +394,50 @@ const ProcessEventDotComponents = React.memo(
       });
     }, [dispatch, nodeId]);
 
+    const handleRelatedEventRequest = useCallback(() => {
+      dispatch({
+        type: 'userRequestedRelatedEventData',
+        payload: selfId,
+      });
+    }, [dispatch, selfId]);
+
+    const handleRelatedAlertsRequest = useCallback(() => {
+      dispatch({
+        type: 'userSelectedRelatedAlerts',
+        payload: event,
+      });
+    }, [dispatch, event]);
+
+    const history = useHistory();
+    const urlSearch = history.location.search;
+
+    /**
+     * This updates the breadcrumb nav, the table view
+     */
+    const pushToQueryParams = useCallback(
+      (newCrumbs: CrumbInfo) => {
+        // Construct a new set of params from the current set (minus empty params)
+        // by assigning the new set of params provided in `newCrumbs`
+        const crumbsToPass = {
+          ...querystring.parse(urlSearch.slice(1)),
+          ...newCrumbs,
+        };
+
+        // If either was passed in as empty, remove it from the record
+        if (crumbsToPass.crumbId === '') {
+          delete crumbsToPass.crumbId;
+        }
+        if (crumbsToPass.crumbEvent === '') {
+          delete crumbsToPass.crumbEvent;
+        }
+
+        const relativeURL = { search: querystring.stringify(crumbsToPass) };
+
+        return history.replace(relativeURL);
+      },
+      [history, urlSearch]
+    );
+
     const handleClick = useCallback(() => {
       if (animationTarget.current !== null) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -410,39 +447,31 @@ const ProcessEventDotComponents = React.memo(
         type: 'userSelectedResolverNode',
         payload: {
           nodeId,
+          selectedProcessId: selfId,
         },
       });
-    }, [animationTarget, dispatch, nodeId]);
+      pushToQueryParams({ crumbId: selfEntityId, crumbEvent: 'all' });
+    }, [animationTarget, dispatch, nodeId, selfEntityId, pushToQueryParams, selfId]);
 
-    const handleRelatedEventRequest = useCallback(() => {
-      dispatch({
-        type: 'userRequestedRelatedEventData',
-        payload: event,
-      });
-    }, [dispatch, event]);
-
-    const handleRelatedAlertsRequest = useCallback(() => {
-      dispatch({
-        type: 'userSelectedRelatedAlerts',
-        payload: event,
-      });
-    }, [dispatch, event]);
     /**
      * Enumerates the stats for related events to display with the node as options,
      * generally in the form `number of related events in category` `category title`
      * e.g. "10 DNS", "230 File"
      */
-    const relatedEventOptions = useMemo(() => {
+
+    const [relatedEventOptions, grandTotal] = useMemo(() => {
       const relatedStatsList = [];
 
       if (!relatedEventsStats) {
         // Return an empty set of options if there are no stats to report
-        return [];
+        return [[], 0];
       }
+      let runningTotal = 0;
       // If we have entries to show, map them into options to display in the selectable list
       for (const category in relatedEventsStats.events.byCategory) {
         if (Object.hasOwnProperty.call(relatedEventsStats.events.byCategory, category)) {
           const total = relatedEventsStats.events.byCategory[category];
+          runningTotal += total;
           const displayName = getDisplayName(category);
           relatedStatsList.push({
             prefix: <EuiI18nNumber value={total || 0} />,
@@ -455,12 +484,14 @@ const ProcessEventDotComponents = React.memo(
                   category,
                 },
               });
+
+              pushToQueryParams({ crumbId: selfEntityId, crumbEvent: category });
             },
           });
         }
       }
-      return relatedStatsList;
-    }, [relatedEventsStats, dispatch, event]);
+      return [relatedStatsList, runningTotal];
+    }, [relatedEventsStats, dispatch, event, pushToQueryParams, selfEntityId]);
 
     const relatedEventStatusOrOptions = (() => {
       if (!relatedEventsStats) {
@@ -475,144 +506,144 @@ const ProcessEventDotComponents = React.memo(
      * Key event handling (e.g. 'Enter'/'Space') is provisioned by the `EuiKeyboardAccessible` component
      */
     return (
-      <EuiKeyboardAccessible>
-        <div
-          data-test-subj={'resolverNode'}
-          className={`${className} kbn-resetFocusState`}
-          role="treeitem"
-          aria-level={adjacentNodeMap.level}
-          aria-flowto={
-            adjacentNodeMap.nextSibling === null ? undefined : adjacentNodeMap.nextSibling
-          }
-          aria-labelledby={labelId}
-          aria-describedby={descriptionId}
-          aria-haspopup={'true'}
-          aria-current={isActiveDescendant ? 'true' : undefined}
-          aria-selected={isSelectedDescendant ? 'true' : undefined}
-          style={nodeViewportStyle}
-          id={nodeId}
-          onClick={handleClick}
-          onFocus={handleFocus}
-          tabIndex={-1}
+      <div
+        data-test-subj={'resolverNode'}
+        className={`${className} kbn-resetFocusState`}
+        role="treeitem"
+        aria-level={adjacentNodeMap.level}
+        aria-flowto={adjacentNodeMap.nextSibling === null ? undefined : adjacentNodeMap.nextSibling}
+        aria-labelledby={labelId}
+        aria-describedby={descriptionId}
+        aria-haspopup={'true'}
+        aria-current={isActiveDescendant ? 'true' : undefined}
+        aria-selected={isSelectedDescendant ? 'true' : undefined}
+        style={nodeViewportStyle}
+        id={nodeId}
+        tabIndex={-1}
+      >
+        <svg
+          viewBox="-15 -15 90 30"
+          preserveAspectRatio="xMidYMid meet"
+          style={{
+            display: 'block',
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+            top: '0',
+            left: '0',
+          }}
+        >
+          <g>
+            <use
+              xlinkHref={`#${SymbolIds.processCubeActiveBacking}`}
+              fill={backingFill} // Only visible on hover
+              x={-15.35}
+              y={-15.35}
+              stroke={strokeColor}
+              width={markerSize * 1.5}
+              height={markerSize * 1.5}
+              className="backing"
+            />
+            <use
+              role="presentation"
+              xlinkHref={cubeSymbol}
+              x={markerPositionXOffset}
+              y={markerPositionYOffset}
+              width={markerSize}
+              height={markerSize}
+              opacity="1"
+              className="cube"
+            >
+              <animateTransform
+                attributeType="XML"
+                attributeName="transform"
+                type="scale"
+                values="1 1; 1 .83; 1 .8; 1 .83; 1 1"
+                dur="0.2s"
+                repeatCount="1"
+                className="squish"
+                ref={animationTarget}
+              />
+            </use>
+          </g>
+        </svg>
+        <StyledActionsContainer
+          color={colorMap.full}
+          fontSize={scaledTypeSize}
+          topPct={actionableButtonsTopOffset}
         >
-          <svg
-            viewBox="-15 -15 90 30"
-            preserveAspectRatio="xMidYMid meet"
+          <StyledDescriptionText
+            backgroundColor={colorMap.resolverBackground}
+            color={colorMap.descriptionText}
+            isDisplaying={isShowingDescriptionText}
+          >
+            {descriptionText}
+          </StyledDescriptionText>
+          <div
+            className={magFactorX >= 2 ? 'euiButton' : 'euiButton euiButton--small'}
+            data-test-subject="nodeLabel"
+            id={labelId}
+            onClick={handleClick}
+            onFocus={handleFocus}
+            tabIndex={-1}
             style={{
-              display: 'block',
-              width: '100%',
-              height: '100%',
-              position: 'absolute',
-              top: '0',
-              left: '0',
+              backgroundColor: colorMap.resolverBackground,
+              alignSelf: 'flex-start',
+              padding: 0,
             }}
           >
-            <g>
-              <use
-                xlinkHref={`#${SymbolIds.processCubeActiveBacking}`}
-                fill={backingFill} // Only visible on hover
-                x={-15.35}
-                y={-15.35}
-                stroke={strokeColor}
-                width={markerSize * 1.5}
-                height={markerSize * 1.5}
-                className="backing"
-              />
-              <use
-                role="presentation"
-                xlinkHref={cubeSymbol}
-                x={markerPositionXOffset}
-                y={markerPositionYOffset}
-                width={markerSize}
-                height={markerSize}
-                opacity="1"
-                className="cube"
-              >
-                <animateTransform
-                  attributeType="XML"
-                  attributeName="transform"
-                  type="scale"
-                  values="1 1; 1 .83; 1 .8; 1 .83; 1 1"
-                  dur="0.2s"
-                  begin="click"
-                  repeatCount="1"
-                  className="squish"
-                  ref={animationTarget}
-                />
-              </use>
-            </g>
-          </svg>
-          <StyledActionsContainer
-            color={colorMap.full}
-            fontSize={scaledTypeSize}
-            topPct={actionableButtonsTopOffset}
-          >
-            <StyledDescriptionText
-              backgroundColor={colorMap.resolverBackground}
-              color={colorMap.descriptionText}
-              isDisplaying={isShowingDescriptionText}
-            >
-              {descriptionText}
-            </StyledDescriptionText>
-            <div
+            <EuiButton
+              color={labelButtonFill}
+              data-test-subject="nodeLabel"
+              fill={isLabelFilled}
+              id={labelId}
+              size="s"
               style={{
-                backgroundColor: colorMap.resolverBackground,
-                alignSelf: 'flex-start',
-                padding: 0,
+                maxHeight: `${Math.min(26 + magFactorX * 3, 32)}px`,
+                maxWidth: `${isShowingEventActions ? 400 : 210 * magFactorX}px`,
               }}
+              tabIndex={-1}
+              title={eventModel.eventName(event)}
             >
-              <EuiButton
-                color={labelButtonFill}
-                data-test-subject="nodeLabel"
-                fill={isLabelFilled}
-                id={labelId}
-                size="s"
-                style={{
-                  maxHeight: `${Math.min(26 + magFactorX * 3, 32)}px`,
-                  maxWidth: `${isShowingEventActions ? 400 : 210 * magFactorX}px`,
-                }}
-                tabIndex={-1}
-                title={eventModel.eventName(event)}
-              >
-                <span className="euiButton__content">
-                  <span className="euiButton__text" data-test-subj={'euiButton__text'}>
-                    {eventModel.eventName(event)}
-                  </span>
+              <span className="euiButton__content">
+                <span className="euiButton__text" data-test-subj={'euiButton__text'}>
+                  {eventModel.eventName(event)}
                 </span>
-              </EuiButton>
-            </div>
-            <EuiFlexGroup
-              justifyContent="flexStart"
-              gutterSize="xs"
-              style={{
-                alignSelf: 'flex-start',
-                background: colorMap.resolverBackground,
-                display: `${isShowingEventActions ? 'flex' : 'none'}`,
-                margin: 0,
-                padding: 0,
-              }}
-            >
-              <EuiFlexItem grow={false} className="related-dropdown">
-                <NodeSubMenu
-                  buttonBorderColor={labelButtonFill}
-                  buttonFill={colorMap.resolverBackground}
-                  menuAction={handleRelatedEventRequest}
-                  menuTitle={subMenuAssets.relatedEvents.title}
-                  optionsWithActions={relatedEventStatusOrOptions}
-                />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <NodeSubMenu
-                  buttonBorderColor={labelButtonFill}
-                  buttonFill={colorMap.resolverBackground}
-                  menuTitle={subMenuAssets.relatedAlerts.title}
-                  menuAction={handleRelatedAlertsRequest}
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </StyledActionsContainer>
-        </div>
-      </EuiKeyboardAccessible>
+              </span>
+            </EuiButton>
+          </div>
+          <EuiFlexGroup
+            justifyContent="flexStart"
+            gutterSize="xs"
+            style={{
+              alignSelf: 'flex-start',
+              background: colorMap.resolverBackground,
+              display: `${isShowingEventActions ? 'flex' : 'none'}`,
+              margin: 0,
+              padding: 0,
+            }}
+          >
+            <EuiFlexItem grow={false} className="related-dropdown">
+              <NodeSubMenu
+                count={grandTotal}
+                buttonBorderColor={labelButtonFill}
+                buttonFill={colorMap.resolverBackground}
+                menuAction={handleRelatedEventRequest}
+                menuTitle={subMenuAssets.relatedEvents.title}
+                optionsWithActions={relatedEventStatusOrOptions}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <NodeSubMenu
+                buttonBorderColor={labelButtonFill}
+                buttonFill={colorMap.resolverBackground}
+                menuTitle={subMenuAssets.relatedAlerts.title}
+                menuAction={handleRelatedAlertsRequest}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </StyledActionsContainer>
+      </div>
     );
     /* eslint-enable jsx-a11y/click-events-have-key-events */
   }
@@ -673,21 +704,3 @@ export const ProcessEventDot = styled(ProcessEventDotComponents)`
     color: white;
   }
 `;
-
-const processTypeToCube: Record<ResolverProcessType, keyof NodeStyleMap> = {
-  processCreated: 'runningProcessCube',
-  processRan: 'runningProcessCube',
-  processTerminated: 'terminatedProcessCube',
-  unknownProcessEvent: 'runningProcessCube',
-  processCausedAlert: 'runningTriggerCube',
-  unknownEvent: 'runningProcessCube',
-};
-
-function nodeType(processEvent: ResolverEvent): keyof NodeStyleMap {
-  const processType = processModel.eventType(processEvent);
-
-  if (processType in processTypeToCube) {
-    return processTypeToCube[processType];
-  }
-  return 'runningProcessCube';
-}
diff --git a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx
index 861c170b8b0b8..8f972dd737af6 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx
@@ -6,7 +6,14 @@
 
 import { i18n } from '@kbn/i18n';
 import React, { ReactNode, useState, useMemo, useCallback } from 'react';
-import { EuiSelectable, EuiButton, EuiPopover, ButtonColor, htmlIdGenerator } from '@elastic/eui';
+import {
+  EuiI18nNumber,
+  EuiSelectable,
+  EuiButton,
+  EuiPopover,
+  ButtonColor,
+  htmlIdGenerator,
+} from '@elastic/eui';
 import styled from 'styled-components';
 
 /**
@@ -74,21 +81,44 @@ const OptionList = React.memo(
                 };
           })
     );
-    return useMemo(
-      () => (
-        <EuiSelectable
-          singleSelection={true}
-          options={options}
-          onChange={(newOptions) => {
-            setOptions(newOptions);
-          }}
-          listProps={{ showIcons: true, bordered: true }}
-          isLoading={isLoading}
-        >
-          {(list) => <OptionListItem>{list}</OptionListItem>}
-        </EuiSelectable>
-      ),
-      [isLoading, options]
+
+    const actionsByLabel: Record<string, () => unknown> = useMemo(() => {
+      if (typeof subMenuOptions !== 'object') {
+        return {};
+      }
+      return subMenuOptions.reduce((titleActionRecord, opt) => {
+        const { optionTitle, action } = opt;
+        return { ...titleActionRecord, [optionTitle]: action };
+      }, {});
+    }, [subMenuOptions]);
+
+    type ChangeOptions = Array<{ label: string; prepend?: ReactNode; checked?: string }>;
+    const selectableProps = useMemo(() => {
+      return {
+        listProps: { showIcons: true, bordered: true },
+        onChange: (newOptions: ChangeOptions) => {
+          const selectedOption = newOptions.find((opt) => opt.checked === 'on');
+          if (selectedOption) {
+            const { label } = selectedOption;
+            const actionToTake = actionsByLabel[label];
+            if (typeof actionToTake === 'function') {
+              actionToTake();
+            }
+          }
+          setOptions(newOptions);
+        },
+      };
+    }, [actionsByLabel]);
+
+    return (
+      <EuiSelectable
+        singleSelection={true}
+        options={options}
+        {...selectableProps}
+        isLoading={isLoading}
+      >
+        {(list) => <OptionListItem>{list}</OptionListItem>}
+      </EuiSelectable>
     );
   }
 );
@@ -102,6 +132,7 @@ OptionList.displayName = 'OptionList';
  */
 const NodeSubMenuComponents = React.memo(
   ({
+    count,
     buttonBorderColor,
     menuTitle,
     menuAction,
@@ -113,6 +144,7 @@ const NodeSubMenuComponents = React.memo(
     menuAction?: () => unknown;
     buttonBorderColor: ButtonColor;
     buttonFill: string;
+    count?: number;
   } & {
     optionsWithActions?: ResolverSubmenuOptionList | string | undefined;
   }) => {
@@ -176,7 +208,7 @@ const NodeSubMenuComponents = React.memo(
         iconSide="right"
         tabIndex={-1}
       >
-        {menuTitle}
+        {count ? <EuiI18nNumber value={count} /> : ''} {menuTitle}
       </EuiButton>
     );
 

From 051c93a6bef8ae6dd0b4367161b6b59907b49c52 Mon Sep 17 00:00:00 2001
From: Spencer <email@spalger.com>
Date: Thu, 18 Jun 2020 15:24:16 -0700
Subject: [PATCH 50/63] [ftr] add support for docker servers (#68173)

Co-authored-by: spalger <spalger@users.noreply.github.com>
---
 packages/kbn-dev-utils/src/index.ts           |   1 +
 .../kbn-dev-utils/src/proc_runner/proc.ts     |   2 +-
 packages/kbn-dev-utils/src/stdio/index.ts     |  21 ++
 .../{proc_runner => stdio}/observe_lines.ts   |   0
 .../observe_readable.ts                       |   0
 packages/kbn-test/package.json                |   9 +-
 .../src/functional_test_runner/cli.ts         |   6 +-
 .../functional_test_runner.ts                 |   8 +
 .../src/functional_test_runner/index.ts       |   1 +
 .../lib/config/schema.ts                      |  23 ++
 .../lib/docker_servers/README.md              | 113 +++++++++
 .../lib/docker_servers/container_logs.ts      |  43 ++++
 .../lib/docker_servers/container_running.ts   |  65 +++++
 .../define_docker_servers_config.ts           |  45 ++++
 .../docker_servers/docker_servers_service.ts  | 224 ++++++++++++++++++
 .../lib/docker_servers/index.ts               |  21 ++
 .../src/functional_test_runner/lib/index.ts   |   1 +
 .../lib/lifecycle_phase.ts                    |  32 ++-
 packages/kbn-test/src/index.ts                |   1 +
 packages/kbn-test/types/ftr.d.ts              |  12 +-
 test/functional/config.js                     |   1 +
 vars/workers.groovy                           |  10 +-
 x-pack/test/functional/config.js              |   2 -
 23 files changed, 616 insertions(+), 25 deletions(-)
 create mode 100644 packages/kbn-dev-utils/src/stdio/index.ts
 rename packages/kbn-dev-utils/src/{proc_runner => stdio}/observe_lines.ts (100%)
 rename packages/kbn-dev-utils/src/{proc_runner => stdio}/observe_readable.ts (100%)
 create mode 100644 packages/kbn-test/src/functional_test_runner/lib/docker_servers/README.md
 create mode 100644 packages/kbn-test/src/functional_test_runner/lib/docker_servers/container_logs.ts
 create mode 100644 packages/kbn-test/src/functional_test_runner/lib/docker_servers/container_running.ts
 create mode 100644 packages/kbn-test/src/functional_test_runner/lib/docker_servers/define_docker_servers_config.ts
 create mode 100644 packages/kbn-test/src/functional_test_runner/lib/docker_servers/docker_servers_service.ts
 create mode 100644 packages/kbn-test/src/functional_test_runner/lib/docker_servers/index.ts

diff --git a/packages/kbn-dev-utils/src/index.ts b/packages/kbn-dev-utils/src/index.ts
index 40ee72d94729f..fad5f85ab5890 100644
--- a/packages/kbn-dev-utils/src/index.ts
+++ b/packages/kbn-dev-utils/src/index.ts
@@ -37,4 +37,5 @@ export { run, createFailError, createFlagError, combineErrors, isFailError, Flag
 export { REPO_ROOT } from './repo_root';
 export { KbnClient } from './kbn_client';
 export * from './axios';
+export * from './stdio';
 export * from './ci_stats_reporter';
diff --git a/packages/kbn-dev-utils/src/proc_runner/proc.ts b/packages/kbn-dev-utils/src/proc_runner/proc.ts
index 59512cbb133b3..bd2368defd7e0 100644
--- a/packages/kbn-dev-utils/src/proc_runner/proc.ts
+++ b/packages/kbn-dev-utils/src/proc_runner/proc.ts
@@ -29,7 +29,7 @@ import { promisify } from 'util';
 const treeKillAsync = promisify((...args: [number, string, any]) => treeKill(...args));
 
 import { ToolingLog } from '../tooling_log';
-import { observeLines } from './observe_lines';
+import { observeLines } from '../stdio';
 import { createCliError } from './errors';
 
 const SECOND = 1000;
diff --git a/packages/kbn-dev-utils/src/stdio/index.ts b/packages/kbn-dev-utils/src/stdio/index.ts
new file mode 100644
index 0000000000000..3436d971b879a
--- /dev/null
+++ b/packages/kbn-dev-utils/src/stdio/index.ts
@@ -0,0 +1,21 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './observe_lines';
+export * from './observe_readable';
diff --git a/packages/kbn-dev-utils/src/proc_runner/observe_lines.ts b/packages/kbn-dev-utils/src/stdio/observe_lines.ts
similarity index 100%
rename from packages/kbn-dev-utils/src/proc_runner/observe_lines.ts
rename to packages/kbn-dev-utils/src/stdio/observe_lines.ts
diff --git a/packages/kbn-dev-utils/src/proc_runner/observe_readable.ts b/packages/kbn-dev-utils/src/stdio/observe_readable.ts
similarity index 100%
rename from packages/kbn-dev-utils/src/proc_runner/observe_readable.ts
rename to packages/kbn-dev-utils/src/stdio/observe_readable.ts
diff --git a/packages/kbn-test/package.json b/packages/kbn-test/package.json
index c74dba8a34c9d..fa30a88b79b08 100644
--- a/packages/kbn-test/package.json
+++ b/packages/kbn-test/package.json
@@ -1,9 +1,9 @@
 {
   "name": "@kbn/test",
-  "main": "./target/index.js",
   "version": "1.0.0",
-  "license": "Apache-2.0",
   "private": true,
+  "license": "Apache-2.0",
+  "main": "./target/index.js",
   "scripts": {
     "build": "babel src --out-dir target --delete-dir-on-start --extensions .ts,.js,.tsx --ignore *.test.js,**/__tests__/** --source-maps=inline",
     "kbn:bootstrap": "yarn build",
@@ -13,6 +13,7 @@
     "@babel/cli": "^7.10.1",
     "@kbn/babel-preset": "1.0.0",
     "@kbn/dev-utils": "1.0.0",
+    "@types/joi": "^13.4.2",
     "@types/parse-link-header": "^1.0.0",
     "@types/puppeteer": "^3.0.0",
     "@types/strip-ansi": "^5.2.1",
@@ -23,12 +24,14 @@
     "chalk": "^2.4.2",
     "dedent": "^0.7.0",
     "del": "^5.1.0",
+    "exit-hook": "^2.2.0",
     "getopts": "^2.2.4",
     "glob": "^7.1.2",
+    "joi": "^13.5.2",
     "parse-link-header": "^1.0.1",
     "puppeteer": "^3.3.0",
-    "strip-ansi": "^5.2.0",
     "rxjs": "^6.5.3",
+    "strip-ansi": "^5.2.0",
     "tar-fs": "^1.16.3",
     "tmp": "^0.1.0",
     "xml2js": "^0.4.22",
diff --git a/packages/kbn-test/src/functional_test_runner/cli.ts b/packages/kbn-test/src/functional_test_runner/cli.ts
index fd5ee5ad3ae44..2a8e0c3d7de9a 100644
--- a/packages/kbn-test/src/functional_test_runner/cli.ts
+++ b/packages/kbn-test/src/functional_test_runner/cli.ts
@@ -19,7 +19,10 @@
 
 import { resolve } from 'path';
 import { inspect } from 'util';
+
 import { run, createFlagError, Flags } from '@kbn/dev-utils';
+import exitHook from 'exit-hook';
+
 import { FunctionalTestRunner } from './functional_test_runner';
 
 const makeAbsolutePath = (v: string) => resolve(process.cwd(), v);
@@ -92,8 +95,7 @@ export function runFtrCli() {
           err instanceof Error ? err : new Error(`non-Error type rejection value: ${inspect(err)}`)
         )
       );
-      process.on('SIGTERM', () => teardown());
-      process.on('SIGINT', () => teardown());
+      exitHook(teardown);
 
       try {
         if (flags['test-stats']) {
diff --git a/packages/kbn-test/src/functional_test_runner/functional_test_runner.ts b/packages/kbn-test/src/functional_test_runner/functional_test_runner.ts
index 03d4d7643607f..24f5cdceac95b 100644
--- a/packages/kbn-test/src/functional_test_runner/functional_test_runner.ts
+++ b/packages/kbn-test/src/functional_test_runner/functional_test_runner.ts
@@ -29,6 +29,7 @@ import {
   readProviderSpec,
   setupMocha,
   runTests,
+  DockerServersService,
   Config,
   SuiteTracker,
 } from './lib';
@@ -130,12 +131,19 @@ export class FunctionalTestRunner {
         throw new Error('No tests defined.');
       }
 
+      const dockerServers = new DockerServersService(
+        config.get('dockerServers'),
+        this.log,
+        this.lifecycle
+      );
+
       // base level services that functional_test_runner exposes
       const coreProviders = readProviderSpec('Service', {
         lifecycle: () => this.lifecycle,
         log: () => this.log,
         failureMetadata: () => this.failureMetadata,
         config: () => config,
+        dockerServers: () => dockerServers,
       });
 
       return await handler(config, coreProviders);
diff --git a/packages/kbn-test/src/functional_test_runner/index.ts b/packages/kbn-test/src/functional_test_runner/index.ts
index c783117a0ba42..cf65ceb51df8e 100644
--- a/packages/kbn-test/src/functional_test_runner/index.ts
+++ b/packages/kbn-test/src/functional_test_runner/index.ts
@@ -20,3 +20,4 @@
 export { FunctionalTestRunner } from './functional_test_runner';
 export { readConfigFile } from './lib';
 export { runFtrCli } from './cli';
+export * from './lib/docker_servers';
diff --git a/packages/kbn-test/src/functional_test_runner/lib/config/schema.ts b/packages/kbn-test/src/functional_test_runner/lib/config/schema.ts
index e9aeee87f1a3b..6cbdc5ec7fc20 100644
--- a/packages/kbn-test/src/functional_test_runner/lib/config/schema.ts
+++ b/packages/kbn-test/src/functional_test_runner/lib/config/schema.ts
@@ -57,6 +57,27 @@ const appUrlPartsSchema = () =>
     })
     .default();
 
+const requiredWhenEnabled = (schema: Joi.Schema) => {
+  return Joi.when('enabled', {
+    is: true,
+    then: schema.required(),
+    otherwise: schema.optional(),
+  });
+};
+
+const dockerServerSchema = () =>
+  Joi.object()
+    .keys({
+      enabled: Joi.boolean().required(),
+      image: requiredWhenEnabled(Joi.string()),
+      port: requiredWhenEnabled(Joi.number()),
+      portInContainer: requiredWhenEnabled(Joi.number()),
+      waitForLogLine: Joi.alternatives(Joi.object().type(RegExp), Joi.string()).optional(),
+      waitFor: Joi.func().optional(),
+      args: Joi.array().items(Joi.string()).optional(),
+    })
+    .default();
+
 const defaultRelativeToConfigPath = (path: string) => {
   const makeDefault: any = (_: any, options: any) => resolve(dirname(options.context.path), path);
   makeDefault.description = `<config.js directory>/${path}`;
@@ -259,5 +280,7 @@ export const schema = Joi.object()
         disableTestUser: Joi.boolean(),
       })
       .default(),
+
+    dockerServers: Joi.object().pattern(Joi.string(), dockerServerSchema()).default(),
   })
   .default();
diff --git a/packages/kbn-test/src/functional_test_runner/lib/docker_servers/README.md b/packages/kbn-test/src/functional_test_runner/lib/docker_servers/README.md
new file mode 100644
index 0000000000000..d75faf4c854aa
--- /dev/null
+++ b/packages/kbn-test/src/functional_test_runner/lib/docker_servers/README.md
@@ -0,0 +1,113 @@
+# Functional Test Runner - Docker Servers
+
+In order to make it simpler to run some services while the functional tests are running, we've added the ability to execute docker containers while the tests execute for the purpose of exposing services to the tests. These containers are expected to expose an application via a single HTTP port and live for the life of the tests. If the application exits for any reason before the tests complete the tests will abort.
+
+To configure docker servers in your FTR config add the `dockerServers` key to your config like so:
+
+```ts
+// import this helper to get TypeScript support for this section of the config
+import { defineDockerServersConfig } from '@kbn/test';
+
+export default function () {
+  return {
+    ...
+
+    dockerServers: defineDockerServersConfig({
+      // unique names are used in logging and to get the details of this server in the tests
+      helloWorld: {
+        /** disable this docker server unless the user sets some flag/env var */
+        enabled: !!process.env.HELLO_WORLD_PORT,
+        /** the docker image to pull and run */
+        image: 'vad1mo/hello-world-rest',
+        /** The port that this application will be accessible via locally */
+        port: process.env.HELLO_WORLD_PORT,
+        /** The port that the container binds to in the container */
+        portInContainer: 5050,
+        /**
+         * OPTIONAL: string/regex to look for in the log, when specified the
+         * tests won't start until a line containing this string, or matching
+         * this expression is found.
+         */
+        waitForLogLine: /hello/,
+        /**
+         * OPTIONAL: function that is called when server is started, when defined
+         * it is called to give the configuration an option to write custom delay
+         * logic. The function is passed a DockerServer object, which is described
+         * below, and an observable of the log lines produced by the application
+         */
+        async waitFor(server, logLine$) {
+          await logLine$.pipe(
+            filter(line => line.includes('...')),
+            tap((line) => {
+              console.log('marking server ready because this line was logged:', line);
+              console.log('server accessible from url', server.url);
+            })
+          ).toPromise()
+        }
+      }
+    })
+  }
+}
+```
+
+To consume the test server, use can use something like supertest to send request. Just make sure that you disable your test suite if the user doesn't choose to enable your docker server:
+
+```ts
+import makeSupertest from 'supertest-as-promised';
+import { FtrProviderContext } from '../ftr_provider_context';
+
+export default function ({ getService }: FtrProviderContext) {
+  const dockerServers = getService('dockerServers');
+  const log = getService('log');
+
+  const server = dockerServers.get('helloWorld');
+  const supertest = makeSupertest(server.url);
+
+  describe('test suite name', function () {
+    if (!server.enabled) {
+      log.warning(
+        'disabling tests because server is not enabled, set HELLO_WORLD_PORT to run them'
+      );
+      this.pending = true;
+    }
+
+    it('test name', async () => {
+      await supertest.get('/foo/bar').expect(200);
+    });
+  });
+}
+```
+
+## `DockerServersService`
+
+The docker servers service is a core service that is always available in functional test runner tests. When you call `getService('dockerServers')` you will receive an instance of the `DockerServersService` class which has to methods:
+
+### `has(name: string): boolean`
+
+Determine if a name resolves to a known docker server.
+
+### `isEnabled(name: string): boolean`
+
+Determine if a named server is enabled.
+
+### `get(name: string): DockerServer`
+
+Get a `DockerServer` object for the server with the given name.
+
+
+## `DockerServer`
+
+The object passed to the `waitFor()` config function and returned by `DockerServersService#get()`
+
+```ts
+{
+  url: string;
+  name: string;
+
+  portInContainer: number;
+  port: number;
+  image: string;
+  waitForLogLine?: RegExp | string;
+  waitFor?: (server: DockerServer, logLine$: Rx.Observable<string>) => Promise<boolean>;
+}
+```
diff --git a/packages/kbn-test/src/functional_test_runner/lib/docker_servers/container_logs.ts b/packages/kbn-test/src/functional_test_runner/lib/docker_servers/container_logs.ts
new file mode 100644
index 0000000000000..f8e8137ce40a2
--- /dev/null
+++ b/packages/kbn-test/src/functional_test_runner/lib/docker_servers/container_logs.ts
@@ -0,0 +1,43 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import execa from 'execa';
+import * as Rx from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { ToolingLog, observeLines } from '@kbn/dev-utils';
+
+/**
+ * Observe the logs for a container, reflecting the log lines
+ * to the ToolingLog and the returned Observable
+ */
+export function observeContainerLogs(name: string, containerId: string, log: ToolingLog) {
+  log.debug(`[docker:${name}] streaming logs from container [id=${containerId}]`);
+  const logsProc = execa('docker', ['logs', '--follow', containerId], {
+    stdio: ['ignore', 'pipe', 'pipe'],
+  });
+
+  const logLine$ = new Rx.Subject<string>();
+
+  Rx.merge(
+    observeLines(logsProc.stdout).pipe(tap((line) => log.info(`[docker:${name}] ${line}`))),
+    observeLines(logsProc.stderr).pipe(tap((line) => log.error(`[docker:${name}] ${line}`)))
+  ).subscribe(logLine$);
+
+  return logLine$.asObservable();
+}
diff --git a/packages/kbn-test/src/functional_test_runner/lib/docker_servers/container_running.ts b/packages/kbn-test/src/functional_test_runner/lib/docker_servers/container_running.ts
new file mode 100644
index 0000000000000..3e3247a6ae3bb
--- /dev/null
+++ b/packages/kbn-test/src/functional_test_runner/lib/docker_servers/container_running.ts
@@ -0,0 +1,65 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import execa from 'execa';
+import * as Rx from 'rxjs';
+import { ToolingLog } from '@kbn/dev-utils';
+
+/**
+ * Create an observable that errors if a docker
+ * container exits before being unsubscribed
+ */
+export function observeContainerRunning(name: string, containerId: string, log: ToolingLog) {
+  return new Rx.Observable((subscriber) => {
+    log.debug(`[docker:${name}] watching container for exit status [${containerId}]`);
+
+    const exitCodeProc = execa('docker', ['wait', containerId]);
+
+    let exitCode: Error | number | null = null;
+    exitCodeProc
+      .then(({ stdout }) => {
+        exitCode = Number.parseInt(stdout.trim(), 10);
+
+        if (Number.isFinite(exitCode)) {
+          subscriber.error(
+            new Error(`container [id=${containerId}] unexpectedly exitted with code ${exitCode}`)
+          );
+        } else {
+          subscriber.error(
+            new Error(`unable to parse exit code from output of "docker wait": ${stdout}`)
+          );
+        }
+      })
+      .catch((error) => {
+        if (error?.killed) {
+          // ignore errors thrown because the process was killed
+          subscriber.complete();
+          return;
+        }
+
+        subscriber.error(
+          new Error(`failed to monitor process with "docker wait": ${error.message}`)
+        );
+      });
+
+    return () => {
+      exitCodeProc.kill('SIGKILL');
+    };
+  });
+}
diff --git a/packages/kbn-test/src/functional_test_runner/lib/docker_servers/define_docker_servers_config.ts b/packages/kbn-test/src/functional_test_runner/lib/docker_servers/define_docker_servers_config.ts
new file mode 100644
index 0000000000000..bb91ddbacf039
--- /dev/null
+++ b/packages/kbn-test/src/functional_test_runner/lib/docker_servers/define_docker_servers_config.ts
@@ -0,0 +1,45 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as Rx from 'rxjs';
+
+export interface DockerServerSpec {
+  enabled: boolean;
+  portInContainer: number;
+  port: number;
+  image: string;
+  waitForLogLine?: RegExp | string;
+  /** a function that should return an observable that will allow the tests to execute as soon as it emits anything */
+  waitFor?: (server: DockerServer, logLine$: Rx.Observable<string>) => Rx.Observable<unknown>;
+  /* additional command line arguments passed to docker run */
+  args?: string[];
+}
+
+export interface DockerServer extends DockerServerSpec {
+  name: string;
+  url: string;
+}
+
+/**
+ * Helper that helps authors use the type definitions for the section of the FTR config
+ * under the `dockerServers` key.
+ */
+export function defineDockerServersConfig(config: { [name: string]: DockerServerSpec } | {}) {
+  return config;
+}
diff --git a/packages/kbn-test/src/functional_test_runner/lib/docker_servers/docker_servers_service.ts b/packages/kbn-test/src/functional_test_runner/lib/docker_servers/docker_servers_service.ts
new file mode 100644
index 0000000000000..606902228e1b7
--- /dev/null
+++ b/packages/kbn-test/src/functional_test_runner/lib/docker_servers/docker_servers_service.ts
@@ -0,0 +1,224 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import Url from 'url';
+import execa from 'execa';
+import * as Rx from 'rxjs';
+import { filter, take, map } from 'rxjs/operators';
+import { ToolingLog } from '@kbn/dev-utils';
+
+import { Lifecycle } from '../lifecycle';
+import { observeContainerRunning } from './container_running';
+import { observeContainerLogs } from './container_logs';
+import { DockerServer, DockerServerSpec } from './define_docker_servers_config';
+
+const SECOND = 1000;
+
+export class DockerServersService {
+  private servers: DockerServer[];
+
+  constructor(
+    configs: {
+      [name: string]: DockerServerSpec;
+    },
+    private log: ToolingLog,
+    private lifecycle: Lifecycle
+  ) {
+    this.servers = Object.entries(configs).map(([name, config]) => ({
+      ...config,
+      name,
+      url: Url.format({
+        protocol: 'http:',
+        hostname: 'localhost',
+        port: config.port,
+      }),
+    }));
+
+    this.lifecycle.beforeTests.add(async () => {
+      await this.startServers();
+    });
+  }
+
+  isEnabled(name: string) {
+    return this.get(name).enabled;
+  }
+
+  has(name: string) {
+    return this.servers.some((s) => s.name === name);
+  }
+
+  get(name: string) {
+    const server = this.servers.find((s) => s.name === name);
+    if (!server) {
+      throw new Error(`no server with name "${name}"`);
+    }
+    return { ...server };
+  }
+
+  private async dockerRun(server: DockerServer) {
+    const { args } = server;
+    try {
+      this.log.info(`[docker:${server.name}] running image "${server.image}"`);
+
+      const dockerArgs = [
+        'run',
+        '-dit',
+        args || [],
+        '-p',
+        `${server.port}:${server.portInContainer}`,
+        server.image,
+      ].flat();
+      const res = await execa('docker', dockerArgs);
+
+      return res.stdout.trim();
+    } catch (error) {
+      if (error?.exitCode === 125 && error?.message.includes('port is already allocated')) {
+        throw new Error(`
+          [docker:${server.name}] Another process is already listening on port ${server.port}.
+
+          When this happens on CI it is usually because the port number isn't taking into
+          account parallel workers running on the same machine.
+
+          When this happens locally it is usually because the functional test runner didn't
+          have a chance to cleanup the running docker containers before being killed.
+
+          To see if this is the case:
+
+           1. make sure that there aren't other instances of the functional test runner running
+           2. run \`docker ps\` to see the containers running
+           3. if one of them lists that it is using port ${server.port} then kill it with \`docker kill "container ID"\`
+        `);
+      }
+
+      throw error;
+    }
+  }
+
+  private async startServer(server: DockerServer) {
+    const { log, lifecycle } = this;
+    const { image, name, waitFor, waitForLogLine } = server;
+
+    // pull image from registry
+    log.info(`[docker:${name}] pulling docker image "${image}"`);
+    await execa('docker', ['pull', image]);
+
+    // run the image that we just pulled
+    const containerId = await this.dockerRun(server);
+
+    lifecycle.cleanup.add(() => {
+      try {
+        execa.sync('docker', ['kill', containerId]);
+        execa.sync('docker', ['rm', containerId]);
+      } catch (error) {
+        if (
+          error.message.includes(`Container ${containerId} is not running`) ||
+          error.message.includes(`No such container: ${containerId}`)
+        ) {
+          return;
+        }
+
+        throw error;
+      }
+    });
+
+    // push the logs from the container to our logger, and expose an observable of those lines for testing
+    const logLine$ = observeContainerLogs(name, containerId, log);
+    lifecycle.cleanup.add(async () => {
+      await logLine$.toPromise();
+    });
+
+    // ensure container stays running, error if it exits
+    lifecycle.cleanup.addSub(
+      observeContainerRunning(name, containerId, log).subscribe({
+        error: (error) => {
+          lifecycle.cleanup.after$.subscribe(() => {
+            log.error(`[docker:${name}] Error ensuring that the container is running`);
+            log.error(error);
+            process.exit(1);
+          });
+
+          if (!lifecycle.cleanup.triggered) {
+            lifecycle.cleanup.trigger();
+          }
+        },
+      })
+    );
+
+    // wait for conditions before completing
+    if (waitForLogLine instanceof RegExp) {
+      log.info(`[docker:${name}] Waiting for log line matching /${waitForLogLine.source}/`);
+    }
+    if (typeof waitForLogLine === 'string') {
+      log.info(`[docker:${name}] Waiting for log line containing "${waitForLogLine}"`);
+    }
+    if (waitFor !== undefined) {
+      log.info(`[docker:${name}] Waiting for waitFor() promise to resolve`);
+    }
+    if (waitForLogLine === undefined && waitFor === undefined) {
+      log.warning(`
+        [docker:${name}] No "waitFor*" condition defined, you should always
+          define a wait condition to avoid race conditions that are more likely
+          to fail on CI because we're not waiting for the contained server to be ready.
+      `);
+    }
+
+    function firstWithTimeout(source$: Rx.Observable<any>, errorMsg: string, ms = 30 * SECOND) {
+      return Rx.race(
+        source$.pipe(take(1)),
+        Rx.timer(ms).pipe(
+          map(() => {
+            throw new Error(`[docker:${name}] ${errorMsg} within ${ms / SECOND} seconds`);
+          })
+        )
+      );
+    }
+
+    await Rx.merge(
+      waitFor === undefined
+        ? Rx.EMPTY
+        : firstWithTimeout(
+            waitFor(server, logLine$),
+            `didn't find a line containing "${waitForLogLine}"`
+          ),
+
+      waitForLogLine === undefined
+        ? Rx.EMPTY
+        : firstWithTimeout(
+            logLine$.pipe(
+              filter((line) =>
+                waitForLogLine instanceof RegExp
+                  ? waitForLogLine.test(line)
+                  : line.includes(waitForLogLine)
+              )
+            ),
+            `waitForLogLine didn't emit anything`
+          )
+    ).toPromise();
+  }
+
+  private async startServers() {
+    await Promise.all(
+      this.servers.map(async (server) => {
+        if (server.enabled) {
+          await this.startServer(server);
+        }
+      })
+    );
+  }
+}
diff --git a/packages/kbn-test/src/functional_test_runner/lib/docker_servers/index.ts b/packages/kbn-test/src/functional_test_runner/lib/docker_servers/index.ts
new file mode 100644
index 0000000000000..23df9df0458d7
--- /dev/null
+++ b/packages/kbn-test/src/functional_test_runner/lib/docker_servers/index.ts
@@ -0,0 +1,21 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './docker_servers_service';
+export * from './define_docker_servers_config';
diff --git a/packages/kbn-test/src/functional_test_runner/lib/index.ts b/packages/kbn-test/src/functional_test_runner/lib/index.ts
index 2e534974e1d76..4c34f334a8c25 100644
--- a/packages/kbn-test/src/functional_test_runner/lib/index.ts
+++ b/packages/kbn-test/src/functional_test_runner/lib/index.ts
@@ -23,4 +23,5 @@ export { readConfigFile, Config } from './config';
 export { readProviderSpec, ProviderCollection, Provider } from './providers';
 export { runTests, setupMocha } from './mocha';
 export { FailureMetadata } from './failure_metadata';
+export * from './docker_servers';
 export { SuiteTracker } from './suite_tracker';
diff --git a/packages/kbn-test/src/functional_test_runner/lib/lifecycle_phase.ts b/packages/kbn-test/src/functional_test_runner/lib/lifecycle_phase.ts
index 5c7fdb532faa1..70fcd4d217be0 100644
--- a/packages/kbn-test/src/functional_test_runner/lib/lifecycle_phase.ts
+++ b/packages/kbn-test/src/functional_test_runner/lib/lifecycle_phase.ts
@@ -28,6 +28,8 @@ export type GetArgsType<T extends LifecyclePhase<any>> = T extends LifecyclePhas
 export class LifecyclePhase<Args extends readonly any[]> {
   private readonly handlers: Array<(...args: Args) => Promise<void> | void> = [];
 
+  public triggered = false;
+
   private readonly beforeSubj = new Rx.Subject<void>();
   public readonly before$ = this.beforeSubj.asObservable();
 
@@ -46,29 +48,39 @@ export class LifecyclePhase<Args extends readonly any[]> {
     this.handlers.push(fn);
   }
 
+  public addSub(sub: Rx.Subscription) {
+    this.handlers.push(() => {
+      sub.unsubscribe();
+    });
+  }
+
   public async trigger(...args: Args) {
-    if (this.beforeSubj.isStopped) {
+    if (this.options.singular && this.triggered) {
       throw new Error(`singular lifecycle event can only be triggered once`);
     }
 
+    this.triggered = true;
+
     this.beforeSubj.next(undefined);
     if (this.options.singular) {
       this.beforeSubj.complete();
     }
 
     // catch the first error but still execute all handlers
-    let error;
+    let error: Error | undefined;
 
     // shuffle the handlers to prevent relying on their order
-    for (const fn of shuffle(this.handlers)) {
-      try {
-        await fn(...args);
-      } catch (_error) {
-        if (!error) {
-          error = _error;
+    await Promise.all(
+      shuffle(this.handlers).map(async (fn) => {
+        try {
+          await fn(...args);
+        } catch (_error) {
+          if (!error) {
+            error = _error;
+          }
         }
-      }
-    }
+      })
+    );
 
     this.afterSubj.next(undefined);
     if (this.options.singular) {
diff --git a/packages/kbn-test/src/index.ts b/packages/kbn-test/src/index.ts
index 0bc7cc664df68..46f753b909553 100644
--- a/packages/kbn-test/src/index.ts
+++ b/packages/kbn-test/src/index.ts
@@ -59,4 +59,5 @@ export { makeJunitReportPath } from './junit_report_path';
 
 export { CI_PARALLEL_PROCESS_PREFIX } from './ci_parallel_process_prefix';
 
+export * from './functional_test_runner';
 export * from './page_load_metrics';
diff --git a/packages/kbn-test/types/ftr.d.ts b/packages/kbn-test/types/ftr.d.ts
index 8beecab88878d..38eb69d3e6811 100644
--- a/packages/kbn-test/types/ftr.d.ts
+++ b/packages/kbn-test/types/ftr.d.ts
@@ -18,7 +18,12 @@
  */
 
 import { ToolingLog } from '@kbn/dev-utils';
-import { Config, Lifecycle, FailureMetadata } from '../src/functional_test_runner/lib';
+import {
+  Config,
+  Lifecycle,
+  FailureMetadata,
+  DockerServersService,
+} from '../src/functional_test_runner/lib';
 
 export { Lifecycle, Config, FailureMetadata };
 
@@ -61,7 +66,9 @@ export interface GenericFtrProviderContext<
    * Determine if a service is avaliable
    * @param serviceName
    */
-  hasService(serviceName: 'config' | 'log' | 'lifecycle' | 'failureMetadata'): true;
+  hasService(
+    serviceName: 'config' | 'log' | 'lifecycle' | 'failureMetadata' | 'dockerServers'
+  ): true;
   hasService<K extends keyof ServiceMap>(serviceName: K): serviceName is K;
   hasService(serviceName: string): serviceName is Extract<keyof ServiceMap, string>;
 
@@ -73,6 +80,7 @@ export interface GenericFtrProviderContext<
   getService(serviceName: 'config'): Config;
   getService(serviceName: 'log'): ToolingLog;
   getService(serviceName: 'lifecycle'): Lifecycle;
+  getService(serviceName: 'dockerServers'): DockerServersService;
   getService(serviceName: 'failureMetadata'): FailureMetadata;
   getService<T extends keyof ServiceMap>(serviceName: T): ServiceMap[T];
 
diff --git a/test/functional/config.js b/test/functional/config.js
index c377e64f2fc45..95e0c689089ef 100644
--- a/test/functional/config.js
+++ b/test/functional/config.js
@@ -40,6 +40,7 @@ export default async function ({ readConfigFile }) {
     ],
     pageObjects,
     services,
+
     servers: commonConfig.get('servers'),
 
     esTestCluster: commonConfig.get('esTestCluster'),
diff --git a/vars/workers.groovy b/vars/workers.groovy
index 8034a548285a4..e44df9ef75ad0 100644
--- a/vars/workers.groovy
+++ b/vars/workers.groovy
@@ -6,15 +6,15 @@ def label(size) {
     case 'flyweight':
       return 'flyweight'
     case 's':
-      return 'linux && immutable'
+      return 'docker && linux && immutable'
     case 's-highmem':
-      return 'tests-s'
+      return 'docker && tests-s'
     case 'l':
-      return 'tests-l'
+      return 'docker && tests-l'
     case 'xl':
-      return 'tests-xl'
+      return 'docker && tests-xl'
     case 'xxl':
-      return 'tests-xxl'
+      return 'docker && tests-xxl'
   }
 
   error "unknown size '${size}'"
diff --git a/x-pack/test/functional/config.js b/x-pack/test/functional/config.js
index bcc7c978ca237..d5e3f82878d6b 100644
--- a/x-pack/test/functional/config.js
+++ b/x-pack/test/functional/config.js
@@ -4,8 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-/* eslint-disable import/no-default-export */
-
 import { resolve } from 'path';
 
 import { services } from './services';

From 25b4f34f7ccac9a459ba12969fb6a581b2af7c7d Mon Sep 17 00:00:00 2001
From: Marshall Main <55718608+marshallmain@users.noreply.github.com>
Date: Thu, 18 Jun 2020 18:42:27 -0400
Subject: [PATCH 51/63] Remove endpoint alert fields from signal mapping
 (#68934)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../routes/index/ecs_mapping.json             | 1705 ++---------------
 1 file changed, 187 insertions(+), 1518 deletions(-)

diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/index/ecs_mapping.json b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/index/ecs_mapping.json
index 6a404e390bd14..6126ee462ec20 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/index/ecs_mapping.json
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/index/ecs_mapping.json
@@ -7,14 +7,6 @@
       },
       "agent": {
         "properties": {
-          "build": {
-            "properties": {
-              "original": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              }
-            }
-          },
           "ephemeral_id": {
             "ignore_above": 1024,
             "type": "keyword"
@@ -37,6 +29,27 @@
           }
         }
       },
+      "as": {
+        "properties": {
+          "number": {
+            "type": "long"
+          },
+          "organization": {
+            "properties": {
+              "name": {
+                "fields": {
+                  "text": {
+                    "norms": false,
+                    "type": "text"
+                  }
+                },
+                "ignore_above": 1024,
+                "type": "keyword"
+              }
+            }
+          }
+        }
+      },
       "client": {
         "properties": {
           "address": {
@@ -202,10 +215,6 @@
               "id": {
                 "ignore_above": 1024,
                 "type": "keyword"
-              },
-              "name": {
-                "ignore_above": 1024,
-                "type": "keyword"
               }
             }
           },
@@ -233,18 +242,6 @@
               }
             }
           },
-          "project": {
-            "properties": {
-              "id": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "name": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              }
-            }
-          },
           "provider": {
             "ignore_above": 1024,
             "type": "keyword"
@@ -255,6 +252,27 @@
           }
         }
       },
+      "code_signature": {
+        "properties": {
+          "exists": {
+            "type": "boolean"
+          },
+          "status": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "subject_name": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "trusted": {
+            "type": "boolean"
+          },
+          "valid": {
+            "type": "boolean"
+          }
+        }
+      },
       "container": {
         "properties": {
           "id": {
@@ -467,9 +485,6 @@
               }
             }
           },
-          "compile_time": {
-            "type": "date"
-          },
           "hash": {
             "properties": {
               "md5": {
@@ -490,53 +505,6 @@
               }
             }
           },
-          "malware_classification": {
-            "properties": {
-              "features": {
-                "properties": {
-                  "data": {
-                    "properties": {
-                      "buffer": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "decompressed_size": {
-                        "type": "integer"
-                      },
-                      "encoding": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      }
-                    }
-                  }
-                }
-              },
-              "identifier": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "score": {
-                "type": "double"
-              },
-              "threshold": {
-                "type": "double"
-              },
-              "upx_packed": {
-                "type": "boolean"
-              },
-              "version": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              }
-            }
-          },
-          "mapped_address": {
-            "ignore_above": 1024,
-            "type": "keyword"
-          },
-          "mapped_size": {
-            "type": "long"
-          },
           "name": {
             "ignore_above": 1024,
             "type": "keyword"
@@ -547,10 +515,6 @@
           },
           "pe": {
             "properties": {
-              "architecture": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
               "company": {
                 "ignore_above": 1024,
                 "type": "keyword"
@@ -563,10 +527,6 @@
                 "ignore_above": 1024,
                 "type": "keyword"
               },
-              "imphash": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
               "original_file_name": {
                 "ignore_above": 1024,
                 "type": "keyword"
@@ -666,49 +626,6 @@
           }
         }
       },
-      "endpoint": {
-        "properties": {
-          "artifact": {
-            "properties": {
-              "hash": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "name": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "version": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              }
-            }
-          },
-          "event": {
-            "properties": {
-              "process": {
-                "properties": {
-                  "ancestry": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                },
-                "type": "object"
-              }
-            },
-            "type": "object"
-          },
-          "policy": {
-            "properties": {
-              "id": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              }
-            },
-            "type": "object"
-          }
-        }
-      },
       "error": {
         "properties": {
           "code": {
@@ -882,9 +799,6 @@
             "ignore_above": 1,
             "type": "keyword"
           },
-          "entry_modified": {
-            "type": "double"
-          },
           "extension": {
             "ignore_above": 1024,
             "type": "keyword"
@@ -921,156 +835,6 @@
             "ignore_above": 1024,
             "type": "keyword"
           },
-          "macro": {
-            "properties": {
-              "code_page": {
-                "type": "long"
-              },
-              "collection": {
-                "properties": {
-                  "hash": {
-                    "properties": {
-                      "md5": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "sha1": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "sha256": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "sha512": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      }
-                    }
-                  }
-                },
-                "type": "object"
-              },
-              "errors": {
-                "properties": {
-                  "count": {
-                    "type": "long"
-                  },
-                  "error_type": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                },
-                "type": "nested"
-              },
-              "file_extension": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "project_file": {
-                "properties": {
-                  "hash": {
-                    "properties": {
-                      "md5": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "sha1": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "sha256": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "sha512": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      }
-                    }
-                  }
-                },
-                "type": "object"
-              },
-              "stream": {
-                "properties": {
-                  "hash": {
-                    "properties": {
-                      "md5": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "sha1": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "sha256": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "sha512": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      }
-                    }
-                  },
-                  "name": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "raw_code": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "raw_code_size": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                },
-                "type": "nested"
-              }
-            }
-          },
-          "malware_classification": {
-            "properties": {
-              "features": {
-                "properties": {
-                  "data": {
-                    "properties": {
-                      "buffer": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "decompressed_size": {
-                        "type": "integer"
-                      },
-                      "encoding": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      }
-                    }
-                  }
-                }
-              },
-              "identifier": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "score": {
-                "type": "double"
-              },
-              "threshold": {
-                "type": "double"
-              },
-              "upx_packed": {
-                "type": "boolean"
-              },
-              "version": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              }
-            }
-          },
           "mime_type": {
             "ignore_above": 1024,
             "type": "keyword"
@@ -1102,10 +866,6 @@
           },
           "pe": {
             "properties": {
-              "architecture": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
               "company": {
                 "ignore_above": 1024,
                 "type": "keyword"
@@ -1118,10 +878,6 @@
                 "ignore_above": 1024,
                 "type": "keyword"
               },
-              "imphash": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
               "original_file_name": {
                 "ignore_above": 1024,
                 "type": "keyword"
@@ -1132,13 +888,6 @@
               }
             }
           },
-          "quarantine_path": {
-            "ignore_above": 1024,
-            "type": "keyword"
-          },
-          "quarantine_result": {
-            "type": "boolean"
-          },
           "size": {
             "type": "long"
           },
@@ -1152,123 +901,48 @@
             "ignore_above": 1024,
             "type": "keyword"
           },
-          "temp_file_path": {
+          "type": {
             "ignore_above": 1024,
             "type": "keyword"
           },
-          "type": {
+          "uid": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          }
+        }
+      },
+      "geo": {
+        "properties": {
+          "city_name": {
             "ignore_above": 1024,
             "type": "keyword"
           },
-          "uid": {
+          "continent_name": {
             "ignore_above": 1024,
             "type": "keyword"
           },
-          "x509": {
-            "properties": {
-              "alternative_names": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "issuer": {
-                "properties": {
-                  "common_name": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "country": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "distinguished_name": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "locality": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "organization": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "organizational_unit": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "state_or_province": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                }
-              },
-              "not_after": {
-                "type": "date"
-              },
-              "not_before": {
-                "type": "date"
-              },
-              "public_key_algorithm": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "public_key_curve": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "public_key_exponent": {
-                "doc_values": false,
-                "index": false,
-                "type": "long"
-              },
-              "public_key_size": {
-                "type": "long"
-              },
-              "serial_number": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "signature_algorithm": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "subject": {
-                "properties": {
-                  "common_name": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "country": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "distinguished_name": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "locality": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "organization": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "organizational_unit": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "state_or_province": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                }
-              },
-              "version_number": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              }
-            }
+          "country_iso_code": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "country_name": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "location": {
+            "type": "geo_point"
+          },
+          "name": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "region_iso_code": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "region_name": {
+            "ignore_above": 1024,
+            "type": "keyword"
           }
         }
       },
@@ -1288,6 +962,26 @@
           }
         }
       },
+      "hash": {
+        "properties": {
+          "md5": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "sha1": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "sha256": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "sha512": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          }
+        }
+      },
       "host": {
         "properties": {
           "architecture": {
@@ -1386,10 +1080,6 @@
                 "ignore_above": 1024,
                 "type": "keyword"
               },
-              "variant": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
               "version": {
                 "ignore_above": 1024,
                 "type": "keyword"
@@ -1519,10 +1209,6 @@
               },
               "status_code": {
                 "type": "long"
-              },
-              "version": {
-                "ignore_above": 1024,
-                "type": "keyword"
               }
             }
           },
@@ -1532,19 +1218,27 @@
           }
         }
       },
+      "interface": {
+        "properties": {
+          "alias": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "id": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "name": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          }
+        }
+      },
       "labels": {
         "type": "object"
       },
       "log": {
         "properties": {
-          "file": {
-            "properties": {
-              "path": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              }
-            }
-          },
           "level": {
             "ignore_above": 1024,
             "type": "keyword"
@@ -1848,10 +1542,6 @@
                 "ignore_above": 1024,
                 "type": "keyword"
               },
-              "variant": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
               "version": {
                 "ignore_above": 1024,
                 "type": "keyword"
@@ -1898,6 +1588,46 @@
           }
         }
       },
+      "os": {
+        "properties": {
+          "family": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "full": {
+            "fields": {
+              "text": {
+                "norms": false,
+                "type": "text"
+              }
+            },
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "kernel": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "name": {
+            "fields": {
+              "text": {
+                "norms": false,
+                "type": "text"
+              }
+            },
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "platform": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "version": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          }
+        }
+      },
       "package": {
         "properties": {
           "architecture": {
@@ -1952,6 +1682,30 @@
           }
         }
       },
+      "pe": {
+        "properties": {
+          "company": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "description": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "file_version": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "original_file_name": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "product": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          }
+        }
+      },
       "process": {
         "properties": {
           "args": {
@@ -2029,46 +1783,6 @@
               }
             }
           },
-          "malware_classification": {
-            "properties": {
-              "features": {
-                "properties": {
-                  "data": {
-                    "properties": {
-                      "buffer": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "decompressed_size": {
-                        "type": "integer"
-                      },
-                      "encoding": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      }
-                    }
-                  }
-                }
-              },
-              "identifier": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "score": {
-                "type": "double"
-              },
-              "threshold": {
-                "type": "double"
-              },
-              "upx_packed": {
-                "type": "boolean"
-              },
-              "version": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              }
-            }
-          },
           "name": {
             "fields": {
               "text": {
@@ -2216,10 +1930,6 @@
           },
           "pe": {
             "properties": {
-              "architecture": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
               "company": {
                 "ignore_above": 1024,
                 "type": "keyword"
@@ -2232,10 +1942,6 @@
                 "ignore_above": 1024,
                 "type": "keyword"
               },
-              "imphash": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
               "original_file_name": {
                 "ignore_above": 1024,
                 "type": "keyword"
@@ -2255,132 +1961,17 @@
           "ppid": {
             "type": "long"
           },
-          "services": {
-            "ignore_above": 1024,
-            "type": "keyword"
-          },
           "start": {
             "type": "date"
           },
           "thread": {
             "properties": {
-              "call_stack": {
-                "properties": {
-                  "instruction_pointer": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "memory_section": {
-                    "properties": {
-                      "address": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "protection": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "size": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      }
-                    }
-                  },
-                  "module_path": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "rva": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "symbol_info": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                }
-              },
               "id": {
                 "type": "long"
               },
               "name": {
                 "ignore_above": 1024,
                 "type": "keyword"
-              },
-              "service": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "start": {
-                "type": "date"
-              },
-              "start_address": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "start_address_module": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "token": {
-                "properties": {
-                  "domain": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "elevation": {
-                    "type": "boolean"
-                  },
-                  "elevation_type": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "impersonation_level": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "integrity_level": {
-                    "type": "long"
-                  },
-                  "integrity_level_name": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "is_appcontainer": {
-                    "type": "boolean"
-                  },
-                  "privileges": {
-                    "properties": {
-                      "description": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "enabled": {
-                        "type": "boolean"
-                      },
-                      "name": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      }
-                    },
-                    "type": "nested"
-                  },
-                  "sid": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "type": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "user": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                }
-              },
-              "uptime": {
-                "type": "long"
               }
             }
           },
@@ -2394,70 +1985,9 @@
             "ignore_above": 1024,
             "type": "keyword"
           },
-          "token": {
-            "properties": {
-              "domain": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "elevation": {
-                "type": "boolean"
-              },
-              "elevation_type": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "impersonation_level": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "integrity_level": {
-                "type": "long"
-              },
-              "integrity_level_name": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "is_appcontainer": {
-                "type": "boolean"
-              },
-              "privileges": {
-                "properties": {
-                  "description": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "enabled": {
-                    "type": "boolean"
-                  },
-                  "name": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                },
-                "type": "nested"
-              },
-              "sid": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "type": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "user": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              }
-            }
-          },
           "uptime": {
             "type": "long"
           },
-          "user": {
-            "ignore_above": 1024,
-            "type": "keyword"
-          },
           "working_directory": {
             "fields": {
               "text": {
@@ -2921,663 +2451,6 @@
         "ignore_above": 1024,
         "type": "keyword"
       },
-      "target": {
-        "properties": {
-          "dll": {
-            "properties": {
-              "code_signature": {
-                "properties": {
-                  "exists": {
-                    "type": "boolean"
-                  },
-                  "status": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "subject_name": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "trusted": {
-                    "type": "boolean"
-                  },
-                  "valid": {
-                    "type": "boolean"
-                  }
-                }
-              },
-              "compile_time": {
-                "type": "date"
-              },
-              "hash": {
-                "properties": {
-                  "md5": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "sha1": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "sha256": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "sha512": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                }
-              },
-              "malware_classification": {
-                "properties": {
-                  "features": {
-                    "properties": {
-                      "data": {
-                        "properties": {
-                          "buffer": {
-                            "ignore_above": 1024,
-                            "type": "keyword"
-                          },
-                          "decompressed_size": {
-                            "type": "integer"
-                          },
-                          "encoding": {
-                            "ignore_above": 1024,
-                            "type": "keyword"
-                          }
-                        }
-                      }
-                    }
-                  },
-                  "identifier": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "score": {
-                    "type": "double"
-                  },
-                  "threshold": {
-                    "type": "double"
-                  },
-                  "upx_packed": {
-                    "type": "boolean"
-                  },
-                  "version": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                }
-              },
-              "mapped_address": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "mapped_size": {
-                "type": "long"
-              },
-              "name": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "path": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "pe": {
-                "properties": {
-                  "architecture": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "company": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "description": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "file_version": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "imphash": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "original_file_name": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "product": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                }
-              }
-            }
-          },
-          "process": {
-            "properties": {
-              "args": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "args_count": {
-                "type": "long"
-              },
-              "code_signature": {
-                "properties": {
-                  "exists": {
-                    "type": "boolean"
-                  },
-                  "status": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "subject_name": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "trusted": {
-                    "type": "boolean"
-                  },
-                  "valid": {
-                    "type": "boolean"
-                  }
-                }
-              },
-              "command_line": {
-                "fields": {
-                  "text": {
-                    "norms": false,
-                    "type": "text"
-                  }
-                },
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "entity_id": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "executable": {
-                "fields": {
-                  "text": {
-                    "norms": false,
-                    "type": "text"
-                  }
-                },
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "exit_code": {
-                "type": "long"
-              },
-              "hash": {
-                "properties": {
-                  "md5": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "sha1": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "sha256": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "sha512": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                }
-              },
-              "malware_classification": {
-                "properties": {
-                  "features": {
-                    "properties": {
-                      "data": {
-                        "properties": {
-                          "buffer": {
-                            "ignore_above": 1024,
-                            "type": "keyword"
-                          },
-                          "decompressed_size": {
-                            "type": "integer"
-                          },
-                          "encoding": {
-                            "ignore_above": 1024,
-                            "type": "keyword"
-                          }
-                        }
-                      }
-                    }
-                  },
-                  "identifier": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "score": {
-                    "type": "double"
-                  },
-                  "threshold": {
-                    "type": "double"
-                  },
-                  "upx_packed": {
-                    "type": "boolean"
-                  },
-                  "version": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                }
-              },
-              "name": {
-                "fields": {
-                  "text": {
-                    "norms": false,
-                    "type": "text"
-                  }
-                },
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "parent": {
-                "properties": {
-                  "args": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "args_count": {
-                    "type": "long"
-                  },
-                  "code_signature": {
-                    "properties": {
-                      "exists": {
-                        "type": "boolean"
-                      },
-                      "status": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "subject_name": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "trusted": {
-                        "type": "boolean"
-                      },
-                      "valid": {
-                        "type": "boolean"
-                      }
-                    }
-                  },
-                  "command_line": {
-                    "fields": {
-                      "text": {
-                        "norms": false,
-                        "type": "text"
-                      }
-                    },
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "entity_id": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "executable": {
-                    "fields": {
-                      "text": {
-                        "norms": false,
-                        "type": "text"
-                      }
-                    },
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "exit_code": {
-                    "type": "long"
-                  },
-                  "hash": {
-                    "properties": {
-                      "md5": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "sha1": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "sha256": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "sha512": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      }
-                    }
-                  },
-                  "name": {
-                    "fields": {
-                      "text": {
-                        "norms": false,
-                        "type": "text"
-                      }
-                    },
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "pgid": {
-                    "type": "long"
-                  },
-                  "pid": {
-                    "type": "long"
-                  },
-                  "ppid": {
-                    "type": "long"
-                  },
-                  "start": {
-                    "type": "date"
-                  },
-                  "thread": {
-                    "properties": {
-                      "id": {
-                        "type": "long"
-                      },
-                      "name": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      }
-                    }
-                  },
-                  "title": {
-                    "fields": {
-                      "text": {
-                        "norms": false,
-                        "type": "text"
-                      }
-                    },
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "uptime": {
-                    "type": "long"
-                  },
-                  "working_directory": {
-                    "fields": {
-                      "text": {
-                        "norms": false,
-                        "type": "text"
-                      }
-                    },
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                }
-              },
-              "pe": {
-                "properties": {
-                  "architecture": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "company": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "description": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "file_version": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "imphash": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "original_file_name": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "product": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                }
-              },
-              "pgid": {
-                "type": "long"
-              },
-              "pid": {
-                "type": "long"
-              },
-              "ppid": {
-                "type": "long"
-              },
-              "services": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "start": {
-                "type": "date"
-              },
-              "thread": {
-                "properties": {
-                  "call_stack": {
-                    "properties": {
-                      "instruction_pointer": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "memory_section": {
-                        "properties": {
-                          "address": {
-                            "ignore_above": 1024,
-                            "type": "keyword"
-                          },
-                          "protection": {
-                            "ignore_above": 1024,
-                            "type": "keyword"
-                          },
-                          "size": {
-                            "ignore_above": 1024,
-                            "type": "keyword"
-                          }
-                        }
-                      },
-                      "module_path": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "rva": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "symbol_info": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      }
-                    }
-                  },
-                  "id": {
-                    "type": "long"
-                  },
-                  "name": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "service": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "start": {
-                    "type": "date"
-                  },
-                  "start_address": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "start_address_module": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "token": {
-                    "properties": {
-                      "domain": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "elevation": {
-                        "type": "boolean"
-                      },
-                      "elevation_type": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "impersonation_level": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "integrity_level": {
-                        "type": "long"
-                      },
-                      "integrity_level_name": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "is_appcontainer": {
-                        "type": "boolean"
-                      },
-                      "privileges": {
-                        "properties": {
-                          "description": {
-                            "ignore_above": 1024,
-                            "type": "keyword"
-                          },
-                          "enabled": {
-                            "type": "boolean"
-                          },
-                          "name": {
-                            "ignore_above": 1024,
-                            "type": "keyword"
-                          }
-                        },
-                        "type": "nested"
-                      },
-                      "sid": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "type": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "user": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      }
-                    }
-                  },
-                  "uptime": {
-                    "type": "long"
-                  }
-                }
-              },
-              "title": {
-                "fields": {
-                  "text": {
-                    "norms": false,
-                    "type": "text"
-                  }
-                },
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "token": {
-                "properties": {
-                  "domain": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "elevation": {
-                    "type": "boolean"
-                  },
-                  "elevation_type": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "impersonation_level": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "integrity_level": {
-                    "type": "long"
-                  },
-                  "integrity_level_name": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "is_appcontainer": {
-                    "type": "boolean"
-                  },
-                  "privileges": {
-                    "properties": {
-                      "description": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "enabled": {
-                        "type": "boolean"
-                      },
-                      "name": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      }
-                    },
-                    "type": "nested"
-                  },
-                  "sid": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "type": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "user": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                }
-              },
-              "uptime": {
-                "type": "long"
-              },
-              "user": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
-              "working_directory": {
-                "fields": {
-                  "text": {
-                    "norms": false,
-                    "type": "text"
-                  }
-                },
-                "ignore_above": 1024,
-                "type": "keyword"
-              }
-            }
-          }
-        }
-      },
       "threat": {
         "properties": {
           "framework": {
@@ -3681,112 +2554,6 @@
               "supported_ciphers": {
                 "ignore_above": 1024,
                 "type": "keyword"
-              },
-              "x509": {
-                "properties": {
-                  "alternative_names": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "issuer": {
-                    "properties": {
-                      "common_name": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "country": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "distinguished_name": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "locality": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "organization": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "organizational_unit": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "state_or_province": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      }
-                    }
-                  },
-                  "not_after": {
-                    "type": "date"
-                  },
-                  "not_before": {
-                    "type": "date"
-                  },
-                  "public_key_algorithm": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "public_key_curve": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "public_key_exponent": {
-                    "doc_values": false,
-                    "index": false,
-                    "type": "long"
-                  },
-                  "public_key_size": {
-                    "type": "long"
-                  },
-                  "serial_number": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "signature_algorithm": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "subject": {
-                    "properties": {
-                      "common_name": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "country": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "distinguished_name": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "locality": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "organization": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "organizational_unit": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "state_or_province": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      }
-                    }
-                  },
-                  "version_number": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                }
               }
             }
           },
@@ -3847,112 +2614,6 @@
               "subject": {
                 "ignore_above": 1024,
                 "type": "keyword"
-              },
-              "x509": {
-                "properties": {
-                  "alternative_names": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "issuer": {
-                    "properties": {
-                      "common_name": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "country": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "distinguished_name": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "locality": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "organization": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "organizational_unit": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "state_or_province": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      }
-                    }
-                  },
-                  "not_after": {
-                    "type": "date"
-                  },
-                  "not_before": {
-                    "type": "date"
-                  },
-                  "public_key_algorithm": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "public_key_curve": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "public_key_exponent": {
-                    "doc_values": false,
-                    "index": false,
-                    "type": "long"
-                  },
-                  "public_key_size": {
-                    "type": "long"
-                  },
-                  "serial_number": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "signature_algorithm": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  },
-                  "subject": {
-                    "properties": {
-                      "common_name": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "country": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "distinguished_name": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "locality": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "organization": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "organizational_unit": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      },
-                      "state_or_province": {
-                        "ignore_above": 1024,
-                        "type": "keyword"
-                      }
-                    }
-                  },
-                  "version_number": {
-                    "ignore_above": 1024,
-                    "type": "keyword"
-                  }
-                }
               }
             }
           },
@@ -4163,10 +2824,6 @@
                 "ignore_above": 1024,
                 "type": "keyword"
               },
-              "variant": {
-                "ignore_above": 1024,
-                "type": "keyword"
-              },
               "version": {
                 "ignore_above": 1024,
                 "type": "keyword"
@@ -4179,6 +2836,18 @@
           }
         }
       },
+      "vlan": {
+        "properties": {
+          "id": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          },
+          "name": {
+            "ignore_above": 1024,
+            "type": "keyword"
+          }
+        }
+      },
       "vulnerability": {
         "properties": {
           "category": {

From 8a554f8aaad137d36680a7e30b38281e8d4898f3 Mon Sep 17 00:00:00 2001
From: DeDe Morton <dede.morton@elastic.co>
Date: Thu, 18 Jun 2020 15:44:29 -0700
Subject: [PATCH 52/63] [DOCS] Add related link to the ingest management docs
 (#69467)

* [DOCS] Add related link to the ingest management docs

* Add link to ingest manager topic in Kibana

* Remove link to ingest manager topic in kibana
---
 docs/settings/ingest-manager-settings.asciidoc | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/settings/ingest-manager-settings.asciidoc b/docs/settings/ingest-manager-settings.asciidoc
index 0c3427b034ae2..f46c769079040 100644
--- a/docs/settings/ingest-manager-settings.asciidoc
+++ b/docs/settings/ingest-manager-settings.asciidoc
@@ -8,8 +8,10 @@
 experimental[]
 
 You can configure `xpack.ingestManager` settings in your `kibana.yml`. 
-By default, {ingest-manager} is not enabled. You need to enable it. To use
-{fleet}, you also need to configure {kib} and {es} hosts.
+By default, {ingest-manager} is not enabled. You need to
+enable it. To use {fleet}, you also need to configure {kib} and {es} hosts.
+
+See the {ingest-guide}/index.html[Ingest Management] docs for more information.
 
 [[general-ingest-manager-settings-kb]]
 ==== General {ingest-manager} settings

From 639d1e082940fa13925b30fa3425444376cac908 Mon Sep 17 00:00:00 2001
From: Jonathan Buttner <56361221+jonathan-buttner@users.noreply.github.com>
Date: Thu, 18 Jun 2020 21:06:10 -0400
Subject: [PATCH 53/63] Resolving conflicts (#69597)

---
 .../apis/endpoint/alerts/index.ts             | 176 ------------------
 1 file changed, 176 deletions(-)

diff --git a/x-pack/test/api_integration/apis/endpoint/alerts/index.ts b/x-pack/test/api_integration/apis/endpoint/alerts/index.ts
index ed287834761d8..45f6a1515d049 100644
--- a/x-pack/test/api_integration/apis/endpoint/alerts/index.ts
+++ b/x-pack/test/api_integration/apis/endpoint/alerts/index.ts
@@ -5,8 +5,6 @@
  */
 import expect from '@kbn/expect/expect.js';
 import { FtrProviderContext } from '../../../ftr_provider_context';
-import { AlertData } from '../../../../../plugins/security_solution/common/endpoint_alerts/types';
-import { eventsIndexPattern } from '../../../../../plugins/security_solution/common/endpoint/constants';
 import {
   deleteEventsStream,
   deleteMetadataStream,
@@ -26,46 +24,8 @@ const numberOfAlertsInFixture = numberOfHosts * numberOfAlertsPerHost;
  */
 const defaultPageSize = 10;
 
-/**
- * `NULLABLE_EVENT_FIELD` should be a field in the fixture that exists for some alerts,
- * but not all.
- *
- * This allows us to test sorting and paging on mixed data that may or may not exist
- * for each alert.
- */
-const NULLABLE_EVENT_FIELD = 'process.parent.entity_id';
-
-/**
- * An Elasticsearch query to get the alert (or alerts) without `NULLABLE_EVENT_FIELD`.
- */
-const ES_QUERY_MISSING = {
-  query: {
-    bool: {
-      must: [
-        {
-          bool: {
-            must_not: {
-              exists: {
-                field: NULLABLE_EVENT_FIELD,
-              },
-            },
-          },
-        },
-        {
-          term: {
-            'event.kind': {
-              value: 'alert',
-            },
-          },
-        },
-      ],
-    },
-  },
-};
-
 export default function ({ getService }: FtrProviderContext) {
   const supertest = getService('supertest');
-  const es = getService('legacyEs');
   const client = getService('es');
   const nextPrevPrefixQuery = "query=(language:kuery,query:'')";
   const nextPrevPrefixDateRange = "date_range=(from:'2018-01-10T00:00:00.000Z',to:now)";
@@ -74,8 +34,6 @@ export default function ({ getService }: FtrProviderContext) {
   const nextPrevPrefixPageSize = 'page_size=10';
   const nextPrevPrefix = `${nextPrevPrefixQuery}&${nextPrevPrefixDateRange}&${nextPrevPrefixSort}&${nextPrevPrefixOrder}&${nextPrevPrefixPageSize}`;
 
-  let nullableEventId = '';
-
   describe('Endpoint alert API', () => {
     describe('when data is in elasticsearch', () => {
       before(async () => {
@@ -89,12 +47,6 @@ export default function ({ getService }: FtrProviderContext) {
           'events-endpoint-1',
           numberOfAlertsPerHost
         );
-
-        const res = await es.search({
-          index: eventsIndexPattern,
-          body: ES_QUERY_MISSING,
-        });
-        nullableEventId = res.hits.hits[0]._source.event.id;
       });
 
       after(async () => {
@@ -260,134 +212,6 @@ export default function ({ getService }: FtrProviderContext) {
         expect(emptyBody.alerts.length).to.eql(0);
       });
 
-      it('alerts api should return data using `before` by custom sort parameter, descending', async () => {
-        const { body } = await supertest
-          .get(
-            `/api/endpoint/alerts?${nextPrevPrefixDateRange}&${nextPrevPrefixPageSize}&${nextPrevPrefixOrder}&sort=process.name&before=malware%20writer&before=4d7afd81-26ec-47c0-9741-ae16d331f73d`
-          )
-          .set('kbn-xsrf', 'xxx')
-          .expect(200);
-        let valid: boolean = true;
-        (body.alerts as AlertData[]).forEach((alert) => {
-          if (alert.process?.name > 'malware writer') {
-            valid = false;
-          }
-        });
-        expect(valid).to.eql(true);
-      });
-
-      it('alerts api should return data using `before` on undefined primary sort values by custom sort parameter, descending', async () => {
-        const { body } = await supertest
-          .get(
-            `/api/endpoint/alerts?${nextPrevPrefixDateRange}&${nextPrevPrefixPageSize}&order=desc&sort=${NULLABLE_EVENT_FIELD}&before=&before=${nullableEventId}&empty_string_is_undefined=true`
-          )
-          .set('kbn-xsrf', 'xxx')
-          .expect(200);
-
-        let lastSeen: string | undefined = 'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz';
-        let valid: boolean = true;
-
-        for (const alert of body.alerts) {
-          const entityId = alert.process?.parent?.entity_id;
-          if (entityId === undefined && alert.event.id > nullableEventId) {
-            valid = false;
-          }
-          if (entityId !== undefined && lastSeen !== undefined && entityId > lastSeen) {
-            valid = false;
-          } else {
-            lastSeen = entityId;
-          }
-        }
-
-        expect(valid).to.eql(true);
-      });
-
-      it('alerts api should return data using `before` on undefined primary sort values by custom sort parameter, ascending', async () => {
-        const { body } = await supertest
-          .get(
-            `/api/endpoint/alerts?${nextPrevPrefixDateRange}&page_size=25&order=asc&sort=${NULLABLE_EVENT_FIELD}&before=&before=${nullableEventId}&empty_string_is_undefined=true`
-          )
-          .set('kbn-xsrf', 'xxx')
-          .expect(200);
-
-        let lastSeen: string | undefined = '1';
-        let valid: boolean = true;
-
-        for (const alert of body.alerts) {
-          const entityId = alert.process?.parent?.entity_id;
-          if (entityId === undefined && alert.event.id < nullableEventId) {
-            valid = false;
-          }
-          if (entityId !== undefined && lastSeen !== undefined && entityId < lastSeen) {
-            valid = false;
-          } else {
-            lastSeen = entityId;
-          }
-        }
-        expect(valid).to.eql(true);
-      });
-
-      it('should return data using `after` by custom sort parameter, descending', async () => {
-        const { body } = await supertest
-          .get(
-            `/api/endpoint/alerts?${nextPrevPrefixDateRange}&${nextPrevPrefixPageSize}&${nextPrevPrefixOrder}&sort=process.pid&after=3&after=66008e21-2493-4b15-a937-939ea228064a`
-          )
-          .set('kbn-xsrf', 'xxx')
-          .expect(200);
-        expect(body.alerts.length).to.eql(10);
-        expect(body.alerts[0].process.pid).to.eql(2);
-      });
-
-      it('alerts api should return data using `after` on undefined primary sort values by custom sort parameter, descending', async () => {
-        const { body } = await supertest
-          .get(
-            `/api/endpoint/alerts?${nextPrevPrefixDateRange}&${nextPrevPrefixPageSize}&sort=${NULLABLE_EVENT_FIELD}&order=desc&after=&after=${nullableEventId}&empty_string_is_undefined=true`
-          )
-          .set('kbn-xsrf', 'xxx')
-          .expect(200);
-
-        let lastSeen: string | undefined = 'zzzzzzzzzzzzzzzzzzzzzzzzzzz';
-        let valid: boolean = true;
-
-        for (const alert of body.alerts) {
-          const entityId = alert.process?.parent?.entity_id;
-          if (entityId === undefined && alert.event.id < nullableEventId) {
-            valid = false;
-          }
-          if (entityId !== undefined && lastSeen !== undefined && entityId > lastSeen) {
-            valid = false;
-          } else {
-            lastSeen = entityId;
-          }
-        }
-        expect(valid).to.eql(true);
-      });
-
-      it('alerts api should return data using `after` on undefined primary sort values by custom sort parameter, ascending', async () => {
-        const { body } = await supertest
-          .get(
-            `/api/endpoint/alerts?${nextPrevPrefixDateRange}&${nextPrevPrefixPageSize}&sort=${NULLABLE_EVENT_FIELD}&order=asc&after=&after=${nullableEventId}&empty_string_is_undefined=true`
-          )
-          .set('kbn-xsrf', 'xxx')
-          .expect(200);
-
-        let lastSeen: string | undefined = '1';
-        let valid: boolean = true;
-
-        for (const alert of body.alerts) {
-          const entityId = alert.process?.parent?.entity_id;
-          if (entityId === undefined && alert.event.id < nullableEventId) {
-            valid = false;
-          }
-          if (entityId !== undefined && lastSeen !== undefined && entityId < lastSeen) {
-            valid = false;
-          } else {
-            lastSeen = entityId;
-          }
-        }
-        expect(valid).to.eql(true);
-      });
-
       it('should filter results of alert data using rison-encoded filters', async () => {
         const { body: firstBody } = await supertest
           .get('/api/endpoint/alerts?page_index=0')

From a489e5f0b188def8732f259ee6533831c9a95d12 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Fri, 19 Jun 2020 08:39:50 +0200
Subject: [PATCH 54/63] [ML] Data Grid Histograms (#68359)

Adds support for histogram charts to data grid columns.
- Adds a toggle button to the data grid's header to enabled/disable column charts.
- When enabled, the charts get rendered as part of the data grid header.
- Histogram charts will get rendered for fields based on date, number, string and boolean.
---
 .../ml/common/util/group_color_utils.ts       |  16 +-
 .../ml/common/util/string_utils.test.ts       |  10 +-
 x-pack/plugins/ml/common/util/string_utils.ts |  17 +
 .../components/data_grid/column_chart.scss    |  31 ++
 .../components/data_grid/column_chart.tsx     |  73 +++
 .../components/data_grid/common.ts            |  33 +-
 .../components/data_grid/data_grid.tsx        |  78 +++-
 .../application/components/data_grid/index.ts |   2 +
 .../application/components/data_grid/types.ts |  12 +-
 .../components/data_grid/use_column_chart.tsx | 432 ++++++++++++++++++
 .../{use_data_grid.ts => use_data_grid.tsx}   |  29 +-
 .../data_frame_analytics/common/fields.ts     |   2 +-
 .../configuration_step_form.tsx               |   3 +-
 .../hooks/use_index_data.ts                   |  43 +-
 .../exploration_results_table.tsx             |  19 +-
 .../use_exploration_results.ts                |  37 +-
 .../outlier_exploration.tsx                   |  59 +--
 .../outlier_exploration/use_outlier_data.ts   |  33 +-
 .../public/app/hooks/use_index_data.ts        |  40 +-
 .../public/app/hooks/use_pivot_data.ts        |  11 +-
 .../expanded_row_preview_pane.tsx             |  18 +-
 .../transform/public/shared_imports.ts        |   3 +
 .../apps/transform/creation_index_pattern.ts  |  32 +-
 .../functional/services/transform/wizard.ts   |  58 +++
 24 files changed, 996 insertions(+), 95 deletions(-)
 create mode 100644 x-pack/plugins/ml/public/application/components/data_grid/column_chart.scss
 create mode 100644 x-pack/plugins/ml/public/application/components/data_grid/column_chart.tsx
 create mode 100644 x-pack/plugins/ml/public/application/components/data_grid/use_column_chart.tsx
 rename x-pack/plugins/ml/public/application/components/data_grid/{use_data_grid.ts => use_data_grid.tsx} (79%)

diff --git a/x-pack/plugins/ml/common/util/group_color_utils.ts b/x-pack/plugins/ml/common/util/group_color_utils.ts
index 92f5c6b2c1347..7105919274185 100644
--- a/x-pack/plugins/ml/common/util/group_color_utils.ts
+++ b/x-pack/plugins/ml/common/util/group_color_utils.ts
@@ -6,6 +6,8 @@
 
 import euiVars from '@elastic/eui/dist/eui_theme_dark.json';
 
+import { stringHash } from './string_utils';
+
 const COLORS = [
   euiVars.euiColorVis0,
   euiVars.euiColorVis1,
@@ -33,17 +35,3 @@ export function tabColor(name: string): string {
     return colorMap[name];
   }
 }
-
-function stringHash(str: string): number {
-  let hash = 0;
-  let chr = 0;
-  if (str.length === 0) {
-    return hash;
-  }
-  for (let i = 0; i < str.length; i++) {
-    chr = str.charCodeAt(i);
-    hash = (hash << 5) - hash + chr; // eslint-disable-line no-bitwise
-    hash |= 0; // eslint-disable-line no-bitwise
-  }
-  return hash < 0 ? hash * -2 : hash;
-}
diff --git a/x-pack/plugins/ml/common/util/string_utils.test.ts b/x-pack/plugins/ml/common/util/string_utils.test.ts
index 026c8e6110c99..8afc7e52c9fa5 100644
--- a/x-pack/plugins/ml/common/util/string_utils.test.ts
+++ b/x-pack/plugins/ml/common/util/string_utils.test.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { renderTemplate, getMedianStringLength } from './string_utils';
+import { renderTemplate, getMedianStringLength, stringHash } from './string_utils';
 
 const strings: string[] = [
   'foo',
@@ -46,4 +46,12 @@ describe('ML - string utils', () => {
       expect(result).toBe(0);
     });
   });
+
+  describe('stringHash', () => {
+    test('should return a unique number based off a string', () => {
+      const hash1 = stringHash('the-string-1');
+      const hash2 = stringHash('the-string-2');
+      expect(hash1).not.toBe(hash2);
+    });
+  });
 });
diff --git a/x-pack/plugins/ml/common/util/string_utils.ts b/x-pack/plugins/ml/common/util/string_utils.ts
index bd4ca02bf93cc..b4591fd2943e6 100644
--- a/x-pack/plugins/ml/common/util/string_utils.ts
+++ b/x-pack/plugins/ml/common/util/string_utils.ts
@@ -22,3 +22,20 @@ export function getMedianStringLength(strings: string[]) {
   const sortedStringLengths = strings.map((s) => s.length).sort((a, b) => a - b);
   return sortedStringLengths[Math.floor(sortedStringLengths.length / 2)] || 0;
 }
+
+/**
+ * Creates a deterministic number based hash out of a string.
+ */
+export function stringHash(str: string): number {
+  let hash = 0;
+  let chr = 0;
+  if (str.length === 0) {
+    return hash;
+  }
+  for (let i = 0; i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr; // eslint-disable-line no-bitwise
+    hash |= 0; // eslint-disable-line no-bitwise
+  }
+  return hash < 0 ? hash * -2 : hash;
+}
diff --git a/x-pack/plugins/ml/public/application/components/data_grid/column_chart.scss b/x-pack/plugins/ml/public/application/components/data_grid/column_chart.scss
new file mode 100644
index 0000000000000..37d8871ab3562
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/data_grid/column_chart.scss
@@ -0,0 +1,31 @@
+.mlDataGridChart__histogram {
+  width: 100%;
+  height: $euiSizeXL + $euiSizeXXL;
+}
+
+.mlDataGridChart__legend {
+  @include euiTextTruncate;
+  @include euiFontSizeXS;
+
+  color: $euiColorMediumShade;
+  display: block;
+  overflow-x: hidden;
+  margin: $euiSizeXS 0px 0px 0px;
+  font-style: italic;
+  font-weight: normal;
+  text-align: left;
+}
+
+.mlDataGridChart__legend--numeric {
+  text-align: right;
+}
+
+.mlDataGridChart__legendBoolean {
+  width: 100%;
+  td { text-align: center }
+}
+
+/* Override to align column header to bottom of cell when no chart is available */
+.mlDataGrid .euiDataGridHeaderCell__content {
+  margin-top: auto;
+}
diff --git a/x-pack/plugins/ml/public/application/components/data_grid/column_chart.tsx b/x-pack/plugins/ml/public/application/components/data_grid/column_chart.tsx
new file mode 100644
index 0000000000000..00e2d5b14a96b
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/data_grid/column_chart.tsx
@@ -0,0 +1,73 @@
+/*
+ * 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 } from 'react';
+import classNames from 'classnames';
+
+import { BarSeries, Chart, Settings } from '@elastic/charts';
+import { EuiDataGridColumn } from '@elastic/eui';
+
+import './column_chart.scss';
+
+import { isUnsupportedChartData, useColumnChart, ChartData } from './use_column_chart';
+
+interface Props {
+  chartData: ChartData;
+  columnType: EuiDataGridColumn;
+  dataTestSubj: string;
+}
+
+export const ColumnChart: FC<Props> = ({ chartData, columnType, dataTestSubj }) => {
+  const { data, legendText, xScaleType } = useColumnChart(chartData, columnType);
+
+  return (
+    <div data-test-subj={dataTestSubj}>
+      {!isUnsupportedChartData(chartData) && data.length > 0 && (
+        <div className="mlDataGridChart__histogram" data-test-subj={`${dataTestSubj}-histogram`}>
+          <Chart>
+            <Settings
+              theme={{
+                background: { color: 'transparent' },
+                chartMargins: {
+                  left: 0,
+                  right: 0,
+                  top: 0,
+                  bottom: 1,
+                },
+                chartPaddings: {
+                  left: 0,
+                  right: 0,
+                  top: 0,
+                  bottom: 0,
+                },
+                scales: { barsPadding: 0.1 },
+              }}
+            />
+            <BarSeries
+              id="histogram"
+              name="count"
+              xScaleType={xScaleType}
+              yScaleType="linear"
+              xAccessor="key"
+              yAccessors={['doc_count']}
+              styleAccessor={(d) => d.datum.color}
+              data={data}
+            />
+          </Chart>
+        </div>
+      )}
+      <div
+        className={classNames('mlDataGridChart__legend', {
+          'mlDataGridChart__legend--numeric': columnType.schema === 'number',
+        })}
+        data-test-subj={`${dataTestSubj}-legend`}
+      >
+        {legendText}
+      </div>
+      <div data-test-subj={`${dataTestSubj}-id`}>{columnType.id}</div>
+    </div>
+  );
+};
diff --git a/x-pack/plugins/ml/public/application/components/data_grid/common.ts b/x-pack/plugins/ml/public/application/components/data_grid/common.ts
index 7d0559c215114..1f0fcb63f019d 100644
--- a/x-pack/plugins/ml/public/application/components/data_grid/common.ts
+++ b/x-pack/plugins/ml/public/application/components/data_grid/common.ts
@@ -13,6 +13,10 @@ import {
   EuiDataGridStyle,
 } from '@elastic/eui';
 
+import { i18n } from '@kbn/i18n';
+
+import { CoreSetup } from 'src/core/public';
+
 import {
   IndexPattern,
   IFieldType,
@@ -20,6 +24,8 @@ import {
   KBN_FIELD_TYPES,
 } from '../../../../../../../src/plugins/data/public';
 
+import { extractErrorMessage } from '../../../../common/util/errors';
+
 import {
   BASIC_NUMERICAL_TYPES,
   EXTENDED_NUMERICAL_TYPES,
@@ -37,7 +43,7 @@ import { mlFieldFormatService } from '../../services/field_format_service';
 
 import { DataGridItem, IndexPagination, RenderCellValue } from './types';
 
-export const INIT_MAX_COLUMNS = 20;
+export const INIT_MAX_COLUMNS = 10;
 
 export const euiDataGridStyle: EuiDataGridStyle = {
   border: 'all',
@@ -102,6 +108,8 @@ export const getDataGridSchemasFromFieldTypes = (fieldTypes: FieldTypes, results
       case 'boolean':
         schema = 'boolean';
         break;
+      case 'text':
+        schema = NON_AGGREGATABLE;
     }
 
     if (
@@ -122,7 +130,10 @@ export const getDataGridSchemasFromFieldTypes = (fieldTypes: FieldTypes, results
   });
 };
 
-export const getDataGridSchemaFromKibanaFieldType = (field: IFieldType | undefined) => {
+export const NON_AGGREGATABLE = 'non-aggregatable';
+export const getDataGridSchemaFromKibanaFieldType = (
+  field: IFieldType | undefined
+): string | undefined => {
   // Built-in values are ['boolean', 'currency', 'datetime', 'numeric', 'json']
   // To fall back to the default string schema it needs to be undefined.
   let schema;
@@ -143,6 +154,10 @@ export const getDataGridSchemaFromKibanaFieldType = (field: IFieldType | undefin
       break;
   }
 
+  if (schema === undefined && field?.aggregatable === false) {
+    return NON_AGGREGATABLE;
+  }
+
   return schema;
 };
 
@@ -289,3 +304,17 @@ export const multiColumnSortFactory = (sortingColumns: EuiDataGridSorting['colum
 
   return sortFn;
 };
+
+export const showDataGridColumnChartErrorMessageToast = (
+  e: any,
+  toastNotifications: CoreSetup['notifications']['toasts']
+) => {
+  const error = extractErrorMessage(e);
+
+  toastNotifications.addDanger(
+    i18n.translate('xpack.ml.dataGrid.columnChart.ErrorMessageToast', {
+      defaultMessage: 'An error occurred fetching the histogram charts data: {error}',
+      values: { error: error !== '' ? error : e },
+    })
+  );
+};
diff --git a/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx b/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx
index 618075a77d906..9af7a869e0e56 100644
--- a/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx
+++ b/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx
@@ -10,6 +10,7 @@ import React, { memo, useEffect, FC } from 'react';
 import { i18n } from '@kbn/i18n';
 
 import {
+  EuiButtonEmpty,
   EuiButtonIcon,
   EuiCallOut,
   EuiCodeBlock,
@@ -27,6 +28,8 @@ import { INDEX_STATUS } from '../../data_frame_analytics/common';
 
 import { euiDataGridStyle, euiDataGridToolbarSettings } from './common';
 import { UseIndexDataReturnType } from './types';
+// TODO Fix row hovering + bar highlighting
+// import { hoveredRow$ } from './column_chart';
 
 export const DataGridTitle: FC<{ title: string }> = ({ title }) => (
   <EuiTitle size="xs">
@@ -54,7 +57,9 @@ type Props = PropsWithHeader | PropsWithoutHeader;
 export const DataGrid: FC<Props> = memo(
   (props) => {
     const {
-      columns,
+      chartsVisible,
+      chartsButtonVisible,
+      columnsWithCharts,
       dataTestSubj,
       errorMessage,
       invalidSortingColumnns,
@@ -70,9 +75,18 @@ export const DataGrid: FC<Props> = memo(
       status,
       tableItems: data,
       toastNotifications,
+      toggleChartVisibility,
       visibleColumns,
     } = props;
 
+    // TODO Fix row hovering + bar highlighting
+    // const getRowProps = (item: any) => {
+    //   return {
+    //     onMouseOver: () => hoveredRow$.next(item),
+    //     onMouseLeave: () => hoveredRow$.next(null),
+    //   };
+    // };
+
     useEffect(() => {
       if (invalidSortingColumnns.length > 0) {
         invalidSortingColumnns.forEach((columnId) => {
@@ -162,22 +176,50 @@ export const DataGrid: FC<Props> = memo(
             <EuiSpacer size="m" />
           </div>
         )}
-        <EuiDataGrid
-          aria-label={isWithHeader(props) ? props.title : ''}
-          columns={columns}
-          columnVisibility={{ visibleColumns, setVisibleColumns }}
-          gridStyle={euiDataGridStyle}
-          rowCount={rowCount}
-          renderCellValue={renderCellValue}
-          sorting={{ columns: sortingColumns, onSort }}
-          toolbarVisibility={euiDataGridToolbarSettings}
-          pagination={{
-            ...pagination,
-            pageSizeOptions: [5, 10, 25],
-            onChangeItemsPerPage,
-            onChangePage,
-          }}
-        />
+        <div className="mlDataGrid">
+          <EuiDataGrid
+            aria-label={isWithHeader(props) ? props.title : ''}
+            columns={columnsWithCharts.map((c) => {
+              c.initialWidth = 165;
+              return c;
+            })}
+            columnVisibility={{ visibleColumns, setVisibleColumns }}
+            gridStyle={euiDataGridStyle}
+            rowCount={rowCount}
+            renderCellValue={renderCellValue}
+            sorting={{ columns: sortingColumns, onSort }}
+            toolbarVisibility={{
+              ...euiDataGridToolbarSettings,
+              ...(chartsButtonVisible
+                ? {
+                    additionalControls: (
+                      <EuiButtonEmpty
+                        aria-checked={chartsVisible}
+                        className={`euiDataGrid__controlBtn${
+                          chartsVisible ? ' euiDataGrid__controlBtn--active' : ''
+                        }`}
+                        data-test-subj={`${dataTestSubj}HistogramButton`}
+                        size="xs"
+                        iconType="visBarVertical"
+                        color="text"
+                        onClick={toggleChartVisibility}
+                      >
+                        {i18n.translate('xpack.ml.dataGrid.histogramButtonText', {
+                          defaultMessage: 'Histogram charts',
+                        })}
+                      </EuiButtonEmpty>
+                    ),
+                  }
+                : {}),
+            }}
+            pagination={{
+              ...pagination,
+              pageSizeOptions: [5, 10, 25],
+              onChangeItemsPerPage,
+              onChangePage,
+            }}
+          />
+        </div>
       </div>
     );
   },
@@ -186,7 +228,7 @@ export const DataGrid: FC<Props> = memo(
 
 function pickProps(props: Props) {
   return [
-    props.columns,
+    props.columnsWithCharts,
     props.dataTestSubj,
     props.errorMessage,
     props.invalidSortingColumnns,
diff --git a/x-pack/plugins/ml/public/application/components/data_grid/index.ts b/x-pack/plugins/ml/public/application/components/data_grid/index.ts
index 2472878d1b0c1..80bc6b861f742 100644
--- a/x-pack/plugins/ml/public/application/components/data_grid/index.ts
+++ b/x-pack/plugins/ml/public/application/components/data_grid/index.ts
@@ -9,8 +9,10 @@ export {
   getDataGridSchemaFromKibanaFieldType,
   getFieldsFromKibanaIndexPattern,
   multiColumnSortFactory,
+  showDataGridColumnChartErrorMessageToast,
   useRenderCellValue,
 } from './common';
+export { fetchChartsData, ChartData } from './use_column_chart';
 export { useDataGrid } from './use_data_grid';
 export { DataGrid } from './data_grid';
 export {
diff --git a/x-pack/plugins/ml/public/application/components/data_grid/types.ts b/x-pack/plugins/ml/public/application/components/data_grid/types.ts
index 5fa038edf7815..756f74c8f9302 100644
--- a/x-pack/plugins/ml/public/application/components/data_grid/types.ts
+++ b/x-pack/plugins/ml/public/application/components/data_grid/types.ts
@@ -13,6 +13,8 @@ import { Dictionary } from '../../../../common/types/common';
 
 import { INDEX_STATUS } from '../../data_frame_analytics/common/analytics';
 
+import { ChartData } from './use_column_chart';
+
 export type ColumnId = string;
 export type DataGridItem = Record<string, any>;
 
@@ -54,6 +56,9 @@ export interface SearchResponse7 extends SearchResponse<any> {
 export interface UseIndexDataReturnType
   extends Pick<
     UseDataGridReturnType,
+    | 'chartsVisible'
+    | 'chartsButtonVisible'
+    | 'columnsWithCharts'
     | 'errorMessage'
     | 'invalidSortingColumnns'
     | 'noDataMessage'
@@ -67,13 +72,16 @@ export interface UseIndexDataReturnType
     | 'sortingColumns'
     | 'status'
     | 'tableItems'
+    | 'toggleChartVisibility'
     | 'visibleColumns'
   > {
-  columns: EuiDataGridColumn[];
   renderCellValue: RenderCellValue;
 }
 
 export interface UseDataGridReturnType {
+  chartsVisible: boolean;
+  chartsButtonVisible: boolean;
+  columnsWithCharts: EuiDataGridColumn[];
   errorMessage: string;
   invalidSortingColumnns: ColumnId[];
   noDataMessage: string;
@@ -83,6 +91,7 @@ export interface UseDataGridReturnType {
   pagination: IndexPagination;
   resetPagination: () => void;
   rowCount: number;
+  setColumnCharts: Dispatch<SetStateAction<ChartData[]>>;
   setErrorMessage: Dispatch<SetStateAction<string>>;
   setNoDataMessage: Dispatch<SetStateAction<string>>;
   setPagination: Dispatch<SetStateAction<IndexPagination>>;
@@ -94,5 +103,6 @@ export interface UseDataGridReturnType {
   sortingColumns: EuiDataGridSorting['columns'];
   status: INDEX_STATUS;
   tableItems: DataGridItem[];
+  toggleChartVisibility: () => void;
   visibleColumns: ColumnId[];
 }
diff --git a/x-pack/plugins/ml/public/application/components/data_grid/use_column_chart.tsx b/x-pack/plugins/ml/public/application/components/data_grid/use_column_chart.tsx
new file mode 100644
index 0000000000000..6b207a999eb52
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/data_grid/use_column_chart.tsx
@@ -0,0 +1,432 @@
+/*
+ * 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 moment from 'moment';
+import { BehaviorSubject } from 'rxjs';
+import React from 'react';
+
+import { useObservable } from 'react-use';
+
+import { euiPaletteColorBlind, EuiDataGridColumn } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+
+import { KBN_FIELD_TYPES } from '../../../../../../../src/plugins/data/public';
+
+import { stringHash } from '../../../../common/util/string_utils';
+
+import { NON_AGGREGATABLE } from './common';
+
+export const hoveredRow$ = new BehaviorSubject<any | null>(null);
+
+const BAR_COLOR = euiPaletteColorBlind()[0];
+const BAR_COLOR_BLUR = euiPaletteColorBlind({ rotations: 2 })[10];
+const MAX_CHART_COLUMNS = 20;
+
+type XScaleType = 'ordinal' | 'time' | 'linear' | undefined;
+const getXScaleType = (kbnFieldType: KBN_FIELD_TYPES | undefined): XScaleType => {
+  switch (kbnFieldType) {
+    case KBN_FIELD_TYPES.BOOLEAN:
+    case KBN_FIELD_TYPES.IP:
+    case KBN_FIELD_TYPES.STRING:
+      return 'ordinal';
+    case KBN_FIELD_TYPES.DATE:
+      return 'time';
+    case KBN_FIELD_TYPES.NUMBER:
+      return 'linear';
+  }
+};
+
+const getFieldType = (schema: EuiDataGridColumn['schema']): KBN_FIELD_TYPES | undefined => {
+  if (schema === NON_AGGREGATABLE) {
+    return undefined;
+  }
+
+  let fieldType: KBN_FIELD_TYPES;
+
+  switch (schema) {
+    case 'datetime':
+      fieldType = KBN_FIELD_TYPES.DATE;
+      break;
+    case 'numeric':
+      fieldType = KBN_FIELD_TYPES.NUMBER;
+      break;
+    case 'boolean':
+      fieldType = KBN_FIELD_TYPES.BOOLEAN;
+      break;
+    case 'json':
+      fieldType = KBN_FIELD_TYPES.OBJECT;
+      break;
+    default:
+      fieldType = KBN_FIELD_TYPES.STRING;
+  }
+
+  return fieldType;
+};
+
+interface NumericColumnStats {
+  interval: number;
+  min: number;
+  max: number;
+}
+type NumericColumnStatsMap = Record<string, NumericColumnStats>;
+const getAggIntervals = async (
+  indexPatternTitle: string,
+  esSearch: (payload: any) => Promise<any>,
+  query: any,
+  columnTypes: EuiDataGridColumn[]
+): Promise<NumericColumnStatsMap> => {
+  const numericColumns = columnTypes.filter((cT) => {
+    const fieldType = getFieldType(cT.schema);
+    return fieldType === KBN_FIELD_TYPES.NUMBER || fieldType === KBN_FIELD_TYPES.DATE;
+  });
+
+  if (numericColumns.length === 0) {
+    return {};
+  }
+
+  const minMaxAggs = numericColumns.reduce((aggs, c) => {
+    const id = stringHash(c.id);
+    aggs[id] = {
+      stats: {
+        field: c.id,
+      },
+    };
+    return aggs;
+  }, {} as Record<string, object>);
+
+  const respStats = await esSearch({
+    index: indexPatternTitle,
+    size: 0,
+    body: {
+      query,
+      aggs: minMaxAggs,
+      size: 0,
+    },
+  });
+
+  return Object.keys(respStats.aggregations).reduce((p, aggName) => {
+    const stats = [respStats.aggregations[aggName].min, respStats.aggregations[aggName].max];
+    if (!stats.includes(null)) {
+      const delta = respStats.aggregations[aggName].max - respStats.aggregations[aggName].min;
+
+      let aggInterval = 1;
+
+      if (delta > MAX_CHART_COLUMNS) {
+        aggInterval = Math.round(delta / MAX_CHART_COLUMNS);
+      }
+
+      if (delta <= 1) {
+        aggInterval = delta / MAX_CHART_COLUMNS;
+      }
+
+      p[aggName] = { interval: aggInterval, min: stats[0], max: stats[1] };
+    }
+
+    return p;
+  }, {} as NumericColumnStatsMap);
+};
+
+interface AggHistogram {
+  histogram: {
+    field: string;
+    interval: number;
+  };
+}
+
+interface AggCardinality {
+  cardinality: {
+    field: string;
+  };
+}
+
+interface AggTerms {
+  terms: {
+    field: string;
+    size: number;
+  };
+}
+
+type ChartRequestAgg = AggHistogram | AggCardinality | AggTerms;
+
+export const fetchChartsData = async (
+  indexPatternTitle: string,
+  esSearch: (payload: any) => Promise<any>,
+  query: any,
+  columnTypes: EuiDataGridColumn[]
+): Promise<ChartData[]> => {
+  const aggIntervals = await getAggIntervals(indexPatternTitle, esSearch, query, columnTypes);
+
+  const chartDataAggs = columnTypes.reduce((aggs, c) => {
+    const fieldType = getFieldType(c.schema);
+    const id = stringHash(c.id);
+    if (fieldType === KBN_FIELD_TYPES.NUMBER || fieldType === KBN_FIELD_TYPES.DATE) {
+      if (aggIntervals[id] !== undefined) {
+        aggs[`${id}_histogram`] = {
+          histogram: {
+            field: c.id,
+            interval: aggIntervals[id].interval !== 0 ? aggIntervals[id].interval : 1,
+          },
+        };
+      }
+    } else if (fieldType === KBN_FIELD_TYPES.STRING || fieldType === KBN_FIELD_TYPES.BOOLEAN) {
+      if (fieldType === KBN_FIELD_TYPES.STRING) {
+        aggs[`${id}_cardinality`] = {
+          cardinality: {
+            field: c.id,
+          },
+        };
+      }
+      aggs[`${id}_terms`] = {
+        terms: {
+          field: c.id,
+          size: MAX_CHART_COLUMNS,
+        },
+      };
+    }
+    return aggs;
+  }, {} as Record<string, ChartRequestAgg>);
+
+  if (Object.keys(chartDataAggs).length === 0) {
+    return [];
+  }
+
+  const respChartsData = await esSearch({
+    index: indexPatternTitle,
+    size: 0,
+    body: {
+      query,
+      aggs: chartDataAggs,
+      size: 0,
+    },
+  });
+
+  const chartsData: ChartData[] = columnTypes.map(
+    (c): ChartData => {
+      const fieldType = getFieldType(c.schema);
+      const id = stringHash(c.id);
+
+      if (fieldType === KBN_FIELD_TYPES.NUMBER || fieldType === KBN_FIELD_TYPES.DATE) {
+        if (aggIntervals[id] === undefined) {
+          return {
+            type: 'numeric',
+            data: [],
+            interval: 0,
+            stats: [0, 0],
+            id: c.id,
+          };
+        }
+
+        return {
+          data: respChartsData.aggregations[`${id}_histogram`].buckets,
+          interval: aggIntervals[id].interval,
+          stats: [aggIntervals[id].min, aggIntervals[id].max],
+          type: 'numeric',
+          id: c.id,
+        };
+      } else if (fieldType === KBN_FIELD_TYPES.STRING || fieldType === KBN_FIELD_TYPES.BOOLEAN) {
+        return {
+          type: fieldType === KBN_FIELD_TYPES.STRING ? 'ordinal' : 'boolean',
+          cardinality:
+            fieldType === KBN_FIELD_TYPES.STRING
+              ? respChartsData.aggregations[`${id}_cardinality`].value
+              : 2,
+          data: respChartsData.aggregations[`${id}_terms`].buckets,
+          id: c.id,
+        };
+      }
+
+      return {
+        type: 'unsupported',
+        id: c.id,
+      };
+    }
+  );
+
+  return chartsData;
+};
+
+interface NumericDataItem {
+  key: number;
+  key_as_string?: string;
+  doc_count: number;
+}
+
+interface NumericChartData {
+  data: NumericDataItem[];
+  id: string;
+  interval: number;
+  stats: [number, number];
+  type: 'numeric';
+}
+
+export const isNumericChartData = (arg: any): arg is NumericChartData => {
+  return (
+    arg.hasOwnProperty('data') &&
+    arg.hasOwnProperty('id') &&
+    arg.hasOwnProperty('interval') &&
+    arg.hasOwnProperty('stats') &&
+    arg.hasOwnProperty('type')
+  );
+};
+
+interface OrdinalDataItem {
+  key: string;
+  key_as_string?: string;
+  doc_count: number;
+}
+
+interface OrdinalChartData {
+  type: 'ordinal' | 'boolean';
+  cardinality: number;
+  data: OrdinalDataItem[];
+  id: string;
+}
+
+export const isOrdinalChartData = (arg: any): arg is OrdinalChartData => {
+  return (
+    arg.hasOwnProperty('data') &&
+    arg.hasOwnProperty('cardinality') &&
+    arg.hasOwnProperty('id') &&
+    arg.hasOwnProperty('type')
+  );
+};
+
+interface UnsupportedChartData {
+  id: string;
+  type: 'unsupported';
+}
+
+export const isUnsupportedChartData = (arg: any): arg is UnsupportedChartData => {
+  return arg.hasOwnProperty('type') && arg.type === 'unsupported';
+};
+
+type ChartDataItem = NumericDataItem | OrdinalDataItem;
+export type ChartData = NumericChartData | OrdinalChartData | UnsupportedChartData;
+
+type LegendText = string | JSX.Element;
+const getLegendText = (chartData: ChartData): LegendText => {
+  if (chartData.type === 'unsupported') {
+    return i18n.translate('xpack.ml.dataGridChart.histogramNotAvailable', {
+      defaultMessage: 'Chart not supported.',
+    });
+  }
+
+  if (chartData.data.length === 0) {
+    return i18n.translate('xpack.ml.dataGridChart.notEnoughData', {
+      defaultMessage: `0 documents contain field.`,
+    });
+  }
+
+  if (chartData.type === 'boolean') {
+    return (
+      <table className="mlDataGridChart__legendBoolean">
+        <tbody>
+          <tr>
+            {chartData.data[0] !== undefined && <td>{chartData.data[0].key_as_string}</td>}
+            {chartData.data[1] !== undefined && <td>{chartData.data[1].key_as_string}</td>}
+          </tr>
+        </tbody>
+      </table>
+    );
+  }
+
+  if (isOrdinalChartData(chartData) && chartData.cardinality <= MAX_CHART_COLUMNS) {
+    return i18n.translate('xpack.ml.dataGridChart.singleCategoryLegend', {
+      defaultMessage: `{cardinality, plural, one {# category} other {# categories}}`,
+      values: { cardinality: chartData.cardinality },
+    });
+  }
+
+  if (isOrdinalChartData(chartData) && chartData.cardinality > MAX_CHART_COLUMNS) {
+    return i18n.translate('xpack.ml.dataGridChart.topCategoriesLegend', {
+      defaultMessage: `top {MAX_CHART_COLUMNS} of {cardinality} categories`,
+      values: { cardinality: chartData.cardinality, MAX_CHART_COLUMNS },
+    });
+  }
+
+  if (isNumericChartData(chartData)) {
+    const fromValue = Math.round(chartData.stats[0] * 100) / 100;
+    const toValue = Math.round(chartData.stats[1] * 100) / 100;
+
+    return fromValue !== toValue ? `${fromValue} - ${toValue}` : '' + fromValue;
+  }
+
+  return '';
+};
+
+interface ColumnChart {
+  data: ChartDataItem[];
+  legendText: LegendText;
+  xScaleType: XScaleType;
+}
+
+export const useColumnChart = (
+  chartData: ChartData,
+  columnType: EuiDataGridColumn
+): ColumnChart => {
+  const fieldType = getFieldType(columnType.schema);
+
+  const hoveredRow = useObservable(hoveredRow$);
+
+  const xScaleType = getXScaleType(fieldType);
+
+  const getColor = (d: ChartDataItem) => {
+    if (hoveredRow === undefined || hoveredRow === null) {
+      return BAR_COLOR;
+    }
+
+    if (
+      isOrdinalChartData(chartData) &&
+      xScaleType === 'ordinal' &&
+      hoveredRow._source[columnType.id] === d.key
+    ) {
+      return BAR_COLOR;
+    }
+
+    if (
+      isNumericChartData(chartData) &&
+      xScaleType === 'linear' &&
+      hoveredRow._source[columnType.id] >= +d.key &&
+      hoveredRow._source[columnType.id] < +d.key + chartData.interval
+    ) {
+      return BAR_COLOR;
+    }
+
+    if (
+      isNumericChartData(chartData) &&
+      xScaleType === 'time' &&
+      moment(hoveredRow._source[columnType.id]).unix() * 1000 >= +d.key &&
+      moment(hoveredRow._source[columnType.id]).unix() * 1000 < +d.key + chartData.interval
+    ) {
+      return BAR_COLOR;
+    }
+
+    return BAR_COLOR_BLUR;
+  };
+
+  let data: ChartDataItem[] = [];
+
+  // The if/else if/else is a work-around because `.map()` doesn't work with union types.
+  // See TS Caveats for details: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-3.html#caveats
+  if (isOrdinalChartData(chartData)) {
+    data = chartData.data.map((d: OrdinalDataItem) => ({
+      ...d,
+      color: getColor(d),
+    }));
+  } else if (isNumericChartData(chartData)) {
+    data = chartData.data.map((d: NumericDataItem) => ({
+      ...d,
+      color: getColor(d),
+    }));
+  }
+
+  return {
+    data,
+    legendText: getLegendText(chartData),
+    xScaleType,
+  };
+};
diff --git a/x-pack/plugins/ml/public/application/components/data_grid/use_data_grid.ts b/x-pack/plugins/ml/public/application/components/data_grid/use_data_grid.tsx
similarity index 79%
rename from x-pack/plugins/ml/public/application/components/data_grid/use_data_grid.ts
rename to x-pack/plugins/ml/public/application/components/data_grid/use_data_grid.tsx
index 7843bf2ea801b..47c84ce6cd664 100644
--- a/x-pack/plugins/ml/public/application/components/data_grid/use_data_grid.ts
+++ b/x-pack/plugins/ml/public/application/components/data_grid/use_data_grid.tsx
@@ -4,12 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { EuiDataGridSorting, EuiDataGridColumn } from '@elastic/eui';
 
 import { INDEX_STATUS } from '../../data_frame_analytics/common';
 
+import { ColumnChart } from './column_chart';
 import { INIT_MAX_COLUMNS } from './common';
 import {
   ColumnId,
@@ -20,6 +21,7 @@ import {
   OnSort,
   UseDataGridReturnType,
 } from './types';
+import { ChartData } from './use_column_chart';
 
 export const useDataGrid = (
   columns: EuiDataGridColumn[],
@@ -33,9 +35,15 @@ export const useDataGrid = (
   const [errorMessage, setErrorMessage] = useState('');
   const [status, setStatus] = useState(INDEX_STATUS.UNUSED);
   const [rowCount, setRowCount] = useState(0);
+  const [columnCharts, setColumnCharts] = useState<ChartData[]>([]);
   const [tableItems, setTableItems] = useState<DataGridItem[]>([]);
   const [pagination, setPagination] = useState(defaultPagination);
   const [sortingColumns, setSortingColumns] = useState<EuiDataGridSorting['columns']>([]);
+  const [chartsVisible, setChartsVisible] = useState(false);
+
+  const toggleChartVisibility = () => {
+    setChartsVisible(!chartsVisible);
+  };
 
   const onChangeItemsPerPage: OnChangeItemsPerPage = useCallback((pageSize) => {
     setPagination((p) => {
@@ -87,6 +95,23 @@ export const useDataGrid = (
   );
 
   return {
+    chartsVisible,
+    chartsButtonVisible: true,
+    columnsWithCharts: columns.map((c, index) => {
+      const chartData = columnCharts.find((cd) => cd.id === c.id);
+
+      return {
+        ...c,
+        display:
+          chartData !== undefined && chartsVisible === true ? (
+            <ColumnChart
+              chartData={chartData}
+              columnType={c}
+              dataTestSubj={`mlDataGridChart-${index}`}
+            />
+          ) : undefined,
+      };
+    }),
     errorMessage,
     invalidSortingColumnns,
     noDataMessage,
@@ -96,6 +121,7 @@ export const useDataGrid = (
     pagination,
     resetPagination,
     rowCount,
+    setColumnCharts,
     setErrorMessage,
     setNoDataMessage,
     setPagination,
@@ -107,6 +133,7 @@ export const useDataGrid = (
     sortingColumns,
     status,
     tableItems,
+    toggleChartVisibility,
     visibleColumns,
   };
 };
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/common/fields.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/common/fields.ts
index 0a64886c80a63..1b28875a624f8 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/common/fields.ts
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/common/fields.ts
@@ -30,7 +30,7 @@ export interface EsDoc extends Record<string, any> {
   _source: EsDocSource;
 }
 
-export const MAX_COLUMNS = 20;
+export const MAX_COLUMNS = 10;
 export const DEFAULT_REGRESSION_COLUMNS = 8;
 
 export const BASIC_NUMERICAL_TYPES = new Set([
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/configuration_step/configuration_step_form.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/configuration_step/configuration_step_form.tsx
index e63756686a4ba..2c3079e24cf1d 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/configuration_step/configuration_step_form.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/configuration_step/configuration_step_form.tsx
@@ -87,7 +87,8 @@ export const ConfigurationStepForm: FC<CreateAnalyticsStepProps> = ({
 
   const indexData = useIndexData(
     currentIndexPattern,
-    savedSearchQuery !== undefined ? savedSearchQuery : jobConfigQuery
+    savedSearchQuery !== undefined ? savedSearchQuery : jobConfigQuery,
+    toastNotifications
   );
 
   const indexPreviewProps = {
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/hooks/use_index_data.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/hooks/use_index_data.ts
index e8f25584201e3..ee0e5c1955ead 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/hooks/use_index_data.ts
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/hooks/use_index_data.ts
@@ -6,10 +6,16 @@
 
 import { useEffect } from 'react';
 
+import { EuiDataGridColumn } from '@elastic/eui';
+
+import { CoreSetup } from 'src/core/public';
+
 import { IndexPattern } from '../../../../../../../../../src/plugins/data/public';
 import {
+  fetchChartsData,
   getDataGridSchemaFromKibanaFieldType,
   getFieldsFromKibanaIndexPattern,
+  showDataGridColumnChartErrorMessageToast,
   useDataGrid,
   useRenderCellValue,
   EsSorting,
@@ -22,15 +28,19 @@ import { ml } from '../../../../services/ml_api_service';
 
 type IndexSearchResponse = SearchResponse7;
 
-export const useIndexData = (indexPattern: IndexPattern, query: any): UseIndexDataReturnType => {
+export const useIndexData = (
+  indexPattern: IndexPattern,
+  query: any,
+  toastNotifications: CoreSetup['notifications']['toasts']
+): UseIndexDataReturnType => {
   const indexPatternFields = getFieldsFromKibanaIndexPattern(indexPattern);
 
   // EuiDataGrid State
-  const columns = [
+  const columns: EuiDataGridColumn[] = [
     ...indexPatternFields.map((id) => {
       const field = indexPattern.fields.getByName(id);
       const schema = getDataGridSchemaFromKibanaFieldType(field);
-      return { id, schema };
+      return { id, schema, isExpandable: schema !== 'boolean' };
     }),
   ];
 
@@ -93,11 +103,36 @@ export const useIndexData = (indexPattern: IndexPattern, query: any): UseIndexDa
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [indexPattern.title, JSON.stringify([query, pagination, sortingColumns])]);
 
+  const fetchColumnChartsData = async function () {
+    try {
+      const columnChartsData = await fetchChartsData(
+        indexPattern.title,
+        ml.esSearch,
+        query,
+        columns.filter((cT) => dataGrid.visibleColumns.includes(cT.id))
+      );
+      dataGrid.setColumnCharts(columnChartsData);
+    } catch (e) {
+      showDataGridColumnChartErrorMessageToast(e, toastNotifications);
+    }
+  };
+
+  useEffect(() => {
+    if (dataGrid.chartsVisible) {
+      fetchColumnChartsData();
+    }
+    // custom comparison
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    dataGrid.chartsVisible,
+    indexPattern.title,
+    JSON.stringify([query, dataGrid.visibleColumns]),
+  ]);
+
   const renderCellValue = useRenderCellValue(indexPattern, pagination, tableItems);
 
   return {
     ...dataGrid,
-    columns,
     renderCellValue,
   };
 };
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_results_table/exploration_results_table.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_results_table/exploration_results_table.tsx
index 105eb9f73804d..941fbefd78084 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_results_table/exploration_results_table.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_results_table/exploration_results_table.tsx
@@ -67,9 +67,20 @@ export const ExplorationResultsTable: FC<Props> = React.memo(
       setEvaluateSearchQuery(searchQuery);
     }, [JSON.stringify(searchQuery)]);
 
-    const classificationData = useExplorationResults(indexPattern, jobConfig, searchQuery);
-    const docFieldsCount = classificationData.columns.length;
-    const { columns, errorMessage, status, tableItems, visibleColumns } = classificationData;
+    const classificationData = useExplorationResults(
+      indexPattern,
+      jobConfig,
+      searchQuery,
+      getToastNotifications()
+    );
+    const docFieldsCount = classificationData.columnsWithCharts.length;
+    const {
+      columnsWithCharts,
+      errorMessage,
+      status,
+      tableItems,
+      visibleColumns,
+    } = classificationData;
 
     if (jobConfig === undefined || classificationData === undefined) {
       return null;
@@ -140,7 +151,7 @@ export const ExplorationResultsTable: FC<Props> = React.memo(
             </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
-        {(columns.length > 0 || searchQuery !== defaultSearchQuery) && (
+        {(columnsWithCharts.length > 0 || searchQuery !== defaultSearchQuery) && (
           <EuiFlexGroup direction="column">
             <EuiFlexItem grow={false}>
               <EuiSpacer size="s" />
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_results_table/use_exploration_results.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_results_table/use_exploration_results.ts
index b8b5a16c84e85..796670f6a864d 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_results_table/use_exploration_results.ts
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_results_table/use_exploration_results.ts
@@ -8,15 +8,20 @@ import { useEffect } from 'react';
 
 import { EuiDataGridColumn } from '@elastic/eui';
 
+import { CoreSetup } from 'src/core/public';
+
 import { IndexPattern } from '../../../../../../../../../../src/plugins/data/public';
 
 import {
+  fetchChartsData,
   getDataGridSchemasFromFieldTypes,
+  showDataGridColumnChartErrorMessageToast,
   useDataGrid,
   useRenderCellValue,
   UseIndexDataReturnType,
 } from '../../../../../components/data_grid';
 import { SavedSearchQuery } from '../../../../../contexts/ml';
+import { ml } from '../../../../../services/ml_api_service';
 
 import { getIndexData, getIndexFields, DataFrameAnalyticsConfig } from '../../../../common';
 import {
@@ -29,7 +34,8 @@ import { sortExplorationResultsFields, ML__ID_COPY } from '../../../../common/fi
 export const useExplorationResults = (
   indexPattern: IndexPattern | undefined,
   jobConfig: DataFrameAnalyticsConfig | undefined,
-  searchQuery: SavedSearchQuery
+  searchQuery: SavedSearchQuery,
+  toastNotifications: CoreSetup['notifications']['toasts']
 ): UseIndexDataReturnType => {
   const needsDestIndexFields =
     indexPattern !== undefined && indexPattern.title === jobConfig?.source.index[0];
@@ -66,6 +72,34 @@ export const useExplorationResults = (
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [jobConfig && jobConfig.id, dataGrid.pagination, searchQuery, dataGrid.sortingColumns]);
 
+  const fetchColumnChartsData = async function () {
+    try {
+      if (jobConfig !== undefined) {
+        const columnChartsData = await fetchChartsData(
+          jobConfig.dest.index,
+          ml.esSearch,
+          searchQuery,
+          columns.filter((cT) => dataGrid.visibleColumns.includes(cT.id))
+        );
+        dataGrid.setColumnCharts(columnChartsData);
+      }
+    } catch (e) {
+      showDataGridColumnChartErrorMessageToast(e, toastNotifications);
+    }
+  };
+
+  useEffect(() => {
+    if (dataGrid.chartsVisible) {
+      fetchColumnChartsData();
+    }
+    // custom comparison
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    dataGrid.chartsVisible,
+    jobConfig?.dest.index,
+    JSON.stringify([searchQuery, dataGrid.visibleColumns]),
+  ]);
+
   const renderCellValue = useRenderCellValue(
     indexPattern,
     dataGrid.pagination,
@@ -75,7 +109,6 @@ export const useExplorationResults = (
 
   return {
     ...dataGrid,
-    columns,
     renderCellValue,
   };
 };
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
index 917ab1b0ed1dd..0b29b7f43bfc8 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
@@ -53,7 +53,7 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
   const [searchQuery, setSearchQuery] = useState<SavedSearchQuery>(defaultSearchQuery);
   const outlierData = useOutlierData(indexPattern, jobConfig, searchQuery);
 
-  const { columns, errorMessage, status, tableItems } = outlierData;
+  const { columnsWithCharts, errorMessage, status, tableItems } = outlierData;
 
   // if it's a searchBar syntax error leave the table visible so they can try again
   if (status === INDEX_STATUS.ERROR && !errorMessage.includes('failed to create query')) {
@@ -98,35 +98,36 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
         )}
       </EuiFlexGroup>
       <EuiHorizontalRule margin="xs" />
-      {(columns.length > 0 || searchQuery !== defaultSearchQuery) && indexPattern !== undefined && (
-        <>
-          <EuiFlexGroup justifyContent="spaceBetween">
-            <EuiFlexItem>
-              <ExplorationQueryBar indexPattern={indexPattern} setSearchQuery={setSearchQuery} />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiSpacer size="s" />
-              <ColorRangeLegend
-                colorRange={colorRange}
-                title={i18n.translate(
-                  'xpack.ml.dataframe.analytics.exploration.colorRangeLegendTitle',
-                  {
-                    defaultMessage: 'Feature influence score',
-                  }
-                )}
+      {(columnsWithCharts.length > 0 || searchQuery !== defaultSearchQuery) &&
+        indexPattern !== undefined && (
+          <>
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem>
+                <ExplorationQueryBar indexPattern={indexPattern} setSearchQuery={setSearchQuery} />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiSpacer size="s" />
+                <ColorRangeLegend
+                  colorRange={colorRange}
+                  title={i18n.translate(
+                    'xpack.ml.dataframe.analytics.exploration.colorRangeLegendTitle',
+                    {
+                      defaultMessage: 'Feature influence score',
+                    }
+                  )}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiSpacer size="s" />
+            {columnsWithCharts.length > 0 && tableItems.length > 0 && (
+              <DataGrid
+                {...outlierData}
+                dataTestSubj="mlExplorationDataGrid"
+                toastNotifications={getToastNotifications()}
               />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          <EuiSpacer size="s" />
-          {columns.length > 0 && tableItems.length > 0 && (
-            <DataGrid
-              {...outlierData}
-              dataTestSubj="mlExplorationDataGrid"
-              toastNotifications={getToastNotifications()}
-            />
-          )}
-        </>
-      )}
+            )}
+          </>
+        )}
     </EuiPanel>
   );
 });
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/use_outlier_data.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/use_outlier_data.ts
index 37ab67e2a33cb..beb6836bf801f 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/use_outlier_data.ts
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/use_outlier_data.ts
@@ -16,12 +16,16 @@ import {
   COLOR_RANGE_SCALE,
 } from '../../../../../components/color_range_legend';
 import {
+  fetchChartsData,
   getDataGridSchemasFromFieldTypes,
+  showDataGridColumnChartErrorMessageToast,
   useDataGrid,
   useRenderCellValue,
   UseIndexDataReturnType,
 } from '../../../../../components/data_grid';
 import { SavedSearchQuery } from '../../../../../contexts/ml';
+import { ml } from '../../../../../services/ml_api_service';
+import { getToastNotifications } from '../../../../../util/dependency_cache';
 
 import { getIndexData, getIndexFields, DataFrameAnalyticsConfig } from '../../../../common';
 import { DEFAULT_RESULTS_FIELD, FEATURE_INFLUENCE } from '../../../../common/constants';
@@ -75,6 +79,34 @@ export const useOutlierData = (
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [jobConfig && jobConfig.id, dataGrid.pagination, searchQuery, dataGrid.sortingColumns]);
 
+  const fetchColumnChartsData = async function () {
+    try {
+      if (jobConfig !== undefined) {
+        const columnChartsData = await fetchChartsData(
+          jobConfig.dest.index,
+          ml.esSearch,
+          searchQuery,
+          columns.filter((cT) => dataGrid.visibleColumns.includes(cT.id))
+        );
+        dataGrid.setColumnCharts(columnChartsData);
+      }
+    } catch (e) {
+      showDataGridColumnChartErrorMessageToast(e, getToastNotifications());
+    }
+  };
+
+  useEffect(() => {
+    if (dataGrid.chartsVisible) {
+      fetchColumnChartsData();
+    }
+    // custom comparison
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    dataGrid.chartsVisible,
+    jobConfig?.dest.index,
+    JSON.stringify([searchQuery, dataGrid.visibleColumns]),
+  ]);
+
   const colorRange = useColorRange(
     COLOR_RANGE.BLUE,
     COLOR_RANGE_SCALE.INFLUENCER,
@@ -115,7 +147,6 @@ export const useOutlierData = (
 
   return {
     ...dataGrid,
-    columns,
     renderCellValue,
   };
 };
diff --git a/x-pack/plugins/transform/public/app/hooks/use_index_data.ts b/x-pack/plugins/transform/public/app/hooks/use_index_data.ts
index e1aa27df5e979..c821c183ad370 100644
--- a/x-pack/plugins/transform/public/app/hooks/use_index_data.ts
+++ b/x-pack/plugins/transform/public/app/hooks/use_index_data.ts
@@ -6,10 +6,14 @@
 
 import { useEffect } from 'react';
 
+import { EuiDataGridColumn } from '@elastic/eui';
+
 import {
+  fetchChartsData,
   getDataGridSchemaFromKibanaFieldType,
   getFieldsFromKibanaIndexPattern,
   getErrorMessage,
+  showDataGridColumnChartErrorMessageToast,
   useDataGrid,
   useRenderCellValue,
   EsSorting,
@@ -23,6 +27,8 @@ import { isDefaultQuery, matchAllQuery, PivotQuery } from '../common';
 import { SearchItems } from './use_search_items';
 import { useApi } from './use_api';
 
+import { useToastNotifications } from '../app_dependencies';
+
 type IndexSearchResponse = SearchResponse7;
 
 export const useIndexData = (
@@ -30,11 +36,12 @@ export const useIndexData = (
   query: PivotQuery
 ): UseIndexDataReturnType => {
   const api = useApi();
+  const toastNotifications = useToastNotifications();
 
   const indexPatternFields = getFieldsFromKibanaIndexPattern(indexPattern);
 
   // EuiDataGrid State
-  const columns = [
+  const columns: EuiDataGridColumn[] = [
     ...indexPatternFields.map((id) => {
       const field = indexPattern.fields.getByName(id);
       const schema = getDataGridSchemaFromKibanaFieldType(field);
@@ -45,8 +52,10 @@ export const useIndexData = (
   const dataGrid = useDataGrid(columns);
 
   const {
+    chartsVisible,
     pagination,
     resetPagination,
+    setColumnCharts,
     setErrorMessage,
     setRowCount,
     setStatus,
@@ -61,7 +70,7 @@ export const useIndexData = (
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(query)]);
 
-  const getIndexData = async function () {
+  const fetchDataGridData = async function () {
     setErrorMessage('');
     setStatus(INDEX_STATUS.LOADING);
 
@@ -92,20 +101,43 @@ export const useIndexData = (
     } catch (e) {
       setErrorMessage(getErrorMessage(e));
       setStatus(INDEX_STATUS.ERROR);
+      return;
+    }
+  };
+
+  const fetchColumnChartsData = async function () {
+    try {
+      const columnChartsData = await fetchChartsData(
+        indexPattern.title,
+        api.esSearch,
+        isDefaultQuery(query) ? matchAllQuery : query,
+        columns.filter((cT) => dataGrid.visibleColumns.includes(cT.id))
+      );
+
+      setColumnCharts(columnChartsData);
+    } catch (e) {
+      showDataGridColumnChartErrorMessageToast(e, toastNotifications);
     }
   };
 
   useEffect(() => {
-    getIndexData();
+    fetchDataGridData();
     // custom comparison
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [indexPattern.title, JSON.stringify([query, pagination, sortingColumns])]);
 
+  useEffect(() => {
+    if (chartsVisible) {
+      fetchColumnChartsData();
+    }
+    // custom comparison
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chartsVisible, indexPattern.title, JSON.stringify([query, dataGrid.visibleColumns])]);
+
   const renderCellValue = useRenderCellValue(indexPattern, pagination, tableItems);
 
   return {
     ...dataGrid,
-    columns,
     renderCellValue,
   };
 };
diff --git a/x-pack/plugins/transform/public/app/hooks/use_pivot_data.ts b/x-pack/plugins/transform/public/app/hooks/use_pivot_data.ts
index 13544b80ed1b2..b073dace30340 100644
--- a/x-pack/plugins/transform/public/app/hooks/use_pivot_data.ts
+++ b/x-pack/plugins/transform/public/app/hooks/use_pivot_data.ts
@@ -7,6 +7,8 @@
 import moment from 'moment-timezone';
 import { useEffect, useMemo, useState } from 'react';
 
+import { EuiDataGridColumn } from '@elastic/eui';
+
 import { i18n } from '@kbn/i18n';
 
 import { ES_FIELD_TYPES } from '../../../../../../src/plugins/data/common';
@@ -76,7 +78,7 @@ export const usePivotData = (
   const api = useApi();
 
   const aggsArr = useMemo(() => dictionaryToArray(aggs), [aggs]);
-  const groupByArr = dictionaryToArray(groupBy);
+  const groupByArr = useMemo(() => dictionaryToArray(groupBy), [groupBy]);
 
   // Filters mapping properties of type `object`, which get returned for nested field parents.
   const columnKeys = Object.keys(previewMappings.properties).filter(
@@ -85,7 +87,7 @@ export const usePivotData = (
   columnKeys.sort(sortColumns(groupByArr));
 
   // EuiDataGrid State
-  const columns = columnKeys.map((id) => {
+  const columns: EuiDataGridColumn[] = columnKeys.map((id) => {
     const field = previewMappings.properties[id];
 
     // Built-in values are ['boolean', 'currency', 'datetime', 'numeric', 'json']
@@ -195,8 +197,7 @@ export const usePivotData = (
   }, [
     indexPatternTitle,
     aggsArr,
-    JSON.stringify(groupByArr),
-    JSON.stringify(query),
+    JSON.stringify([groupByArr, query]),
     /* eslint-enable react-hooks/exhaustive-deps */
   ]);
 
@@ -251,7 +252,7 @@ export const usePivotData = (
 
   return {
     ...dataGrid,
-    columns,
+    chartsButtonVisible: false,
     renderCellValue,
   };
 };
diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_preview_pane.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_preview_pane.tsx
index e183712b390cf..a917fc73ad8fb 100644
--- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_preview_pane.tsx
+++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_preview_pane.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC } from 'react';
+import React, { useMemo, FC } from 'react';
 
 import { DataGrid } from '../../../../../shared_imports';
 
@@ -24,14 +24,22 @@ interface ExpandedRowPreviewPaneProps {
 
 export const ExpandedRowPreviewPane: FC<ExpandedRowPreviewPaneProps> = ({ transformConfig }) => {
   const toastNotifications = useToastNotifications();
-  const { aggList, groupByList, searchQuery } = applyTransformConfigToDefineState(
-    getDefaultStepDefineState({} as SearchItems),
-    transformConfig
+
+  const { aggList, groupByList, searchQuery } = useMemo(
+    () =>
+      applyTransformConfigToDefineState(
+        getDefaultStepDefineState({} as SearchItems),
+        transformConfig
+      ),
+    [transformConfig]
   );
-  const pivotQuery = getPivotQuery(searchQuery);
+
+  const pivotQuery = useMemo(() => getPivotQuery(searchQuery), [searchQuery]);
+
   const indexPatternTitle = Array.isArray(transformConfig.source.index)
     ? transformConfig.source.index.join(',')
     : transformConfig.source.index;
+
   const pivotPreviewProps = usePivotData(indexPatternTitle, pivotQuery, aggList, groupByList);
 
   return (
diff --git a/x-pack/plugins/transform/public/shared_imports.ts b/x-pack/plugins/transform/public/shared_imports.ts
index ca3fb52cc02c3..f50ae9274fa4a 100644
--- a/x-pack/plugins/transform/public/shared_imports.ts
+++ b/x-pack/plugins/transform/public/shared_imports.ts
@@ -14,13 +14,16 @@ export {
 } from '../../../../src/plugins/es_ui_shared/public';
 
 export {
+  fetchChartsData,
   getErrorMessage,
   extractErrorMessage,
   getDataGridSchemaFromKibanaFieldType,
   getFieldsFromKibanaIndexPattern,
   multiColumnSortFactory,
+  showDataGridColumnChartErrorMessageToast,
   useDataGrid,
   useRenderCellValue,
+  ChartData,
   DataGrid,
   EsSorting,
   RenderCellValue,
diff --git a/x-pack/test/functional/apps/transform/creation_index_pattern.ts b/x-pack/test/functional/apps/transform/creation_index_pattern.ts
index 61c4776e20404..55b2f4a0220ad 100644
--- a/x-pack/test/functional/apps/transform/creation_index_pattern.ts
+++ b/x-pack/test/functional/apps/transform/creation_index_pattern.ts
@@ -147,9 +147,25 @@ export default function ({ getService }: FtrProviderContext) {
             progress: '100',
           },
           indexPreview: {
-            columns: 20,
+            columns: 10,
             rows: 5,
           },
+          histogramCharts: [
+            { chartAvailable: false, id: 'category', legend: 'Chart not supported.' },
+            { chartAvailable: true, id: 'currency', legend: '1 category' },
+            {
+              chartAvailable: false,
+              id: 'customer_birth_date',
+              legend: '0 documents contain field.',
+            },
+            { chartAvailable: false, id: 'customer_first_name', legend: 'Chart not supported.' },
+            { chartAvailable: false, id: 'customer_full_name', legend: 'Chart not supported.' },
+            { chartAvailable: true, id: 'customer_gender', legend: '2 categories' },
+            { chartAvailable: true, id: 'customer_id', legend: 'top 20 of 46 categories' },
+            { chartAvailable: false, id: 'customer_last_name', legend: 'Chart not supported.' },
+            { chartAvailable: true, id: 'customer_phone', legend: '1 category' },
+            { chartAvailable: true, id: 'day_of_week', legend: '7 categories' },
+          ],
         },
       },
       {
@@ -229,9 +245,10 @@ export default function ({ getService }: FtrProviderContext) {
             progress: '100',
           },
           indexPreview: {
-            columns: 20,
+            columns: 10,
             rows: 5,
           },
+          histogramCharts: [],
         },
       },
     ];
@@ -289,6 +306,16 @@ export default function ({ getService }: FtrProviderContext) {
           await transform.wizard.assertAdvancedQueryEditorSwitchCheckState(false);
         });
 
+        it('enables the index preview histogram charts', async () => {
+          await transform.wizard.enableIndexPreviewHistogramCharts();
+        });
+
+        it('displays the index preview histogram charts', async () => {
+          await transform.wizard.assertIndexPreviewHistogramCharts(
+            testData.expected.histogramCharts
+          );
+        });
+
         it('adds the group by entries', async () => {
           for (const [index, entry] of testData.groupByEntries.entries()) {
             await transform.wizard.assertGroupByInputExists();
@@ -323,6 +350,7 @@ export default function ({ getService }: FtrProviderContext) {
         });
 
         it('shows the pivot preview', async () => {
+          await transform.wizard.assertPivotPreviewChartHistogramButtonMissing();
           await transform.wizard.assertPivotPreviewColumnValues(
             testData.expected.pivotPreview.column,
             testData.expected.pivotPreview.values
diff --git a/x-pack/test/functional/services/transform/wizard.ts b/x-pack/test/functional/services/transform/wizard.ts
index 8b61e8c895e30..9cfdbadac8a3b 100644
--- a/x-pack/test/functional/services/transform/wizard.ts
+++ b/x-pack/test/functional/services/transform/wizard.ts
@@ -76,6 +76,12 @@ export function TransformWizardProvider({ getService }: FtrProviderContext) {
       await testSubjects.existOrFail(selector);
     },
 
+    async assertPivotPreviewChartHistogramButtonMissing() {
+      // the button should not exist because histogram charts
+      // for the pivot preview are not supported yet
+      await testSubjects.missingOrFail('transformPivotPreviewHistogramButton');
+    },
+
     async parseEuiDataGrid(tableSubj: string) {
       const table = await testSubjects.find(`~${tableSubj}`);
       const $ = await table.parseDomContent();
@@ -155,6 +161,58 @@ export function TransformWizardProvider({ getService }: FtrProviderContext) {
       await this.assertPivotPreviewExists('empty');
     },
 
+    async assertIndexPreviewHistogramChartButtonExists() {
+      await testSubjects.existOrFail('transformIndexPreviewHistogramButton');
+    },
+
+    async enableIndexPreviewHistogramCharts() {
+      await this.assertIndexPreviewHistogramChartButtonCheckState(false);
+      await testSubjects.click('transformIndexPreviewHistogramButton');
+      await this.assertIndexPreviewHistogramChartButtonCheckState(true);
+    },
+
+    async assertIndexPreviewHistogramChartButtonCheckState(expectedCheckState: boolean) {
+      const actualCheckState =
+        (await testSubjects.getAttribute(
+          'transformIndexPreviewHistogramButton',
+          'aria-checked'
+        )) === 'true';
+      expect(actualCheckState).to.eql(
+        expectedCheckState,
+        `Chart histogram button check state should be '${expectedCheckState}' (got '${actualCheckState}')`
+      );
+    },
+
+    async assertIndexPreviewHistogramCharts(
+      expectedHistogramCharts: Array<{ chartAvailable: boolean; id: string; legend: string }>
+    ) {
+      // For each chart, get the content of each header cell and assert
+      // the legend text and column id and if the chart should be present or not.
+      await retry.tryForTime(5000, async () => {
+        for (const [index, expected] of expectedHistogramCharts.entries()) {
+          await testSubjects.existOrFail(`mlDataGridChart-${index}`);
+
+          if (expected.chartAvailable) {
+            await testSubjects.existOrFail(`mlDataGridChart-${index}-histogram`);
+          } else {
+            await testSubjects.missingOrFail(`mlDataGridChart-${index}-histogram`);
+          }
+
+          const actualLegend = await testSubjects.getVisibleText(`mlDataGridChart-${index}-legend`);
+          expect(actualLegend).to.eql(
+            expected.legend,
+            `Legend text for column '${index}' should be '${expected.legend}' (got '${actualLegend}')`
+          );
+
+          const actualId = await testSubjects.getVisibleText(`mlDataGridChart-${index}-id`);
+          expect(actualId).to.eql(
+            expected.id,
+            `Id text for column '${index}' should be '${expected.id}' (got '${actualId}')`
+          );
+        }
+      });
+    },
+
     async assertQueryInputExists() {
       await testSubjects.existOrFail('transformQueryInput');
     },

From 84f8b43c38d57311143ceff36e83d95015f5a999 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= <sorenlouv@gmail.com>
Date: Fri, 19 Jun 2020 12:53:25 +0200
Subject: [PATCH 55/63] [APM] Add support for dark mode (#69362)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Use theme colors for stacktrace

* [APM] Use theme for all components

* Switch HoC withTheme to useTheme and convert classes to hooks

* Change hardcoded white to euiColorEmptyShade for ServiceMap

* Snapshots and Legends fix

* Switch to context and add test helper

* Fix tests and update snaps

* New snaps + new anomaly detection

* Remove shallow from testHelpers

* Remove commented tests

* Fix prettier

* Pass correct theme to cytoscape

* Fix ServiceMap

* fixes some rendering issues in service maps

* removed the old anomaly detection logic from service map popover contents, since it's been moved to a new component.

* Fix eslint, tsc lint issues and unit tests

* Remove types for styled-components default theme

* Update x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js

Co-authored-by: Casper Hübertz <casper@formgeist.com>

* fix OuterTheme

* Ise function declaration instead of expression

Co-authored-by: Balthazar Gronon <git@balthazar.dev>
Co-authored-by: Balthazar Gronon <bgronon@gmail.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Oliver Gupte <olivergupte@gmail.com>
Co-authored-by: Casper Hübertz <casper@formgeist.com>
---
 .../plugins/apm/public/application/index.tsx  |  15 +-
 .../app/ErrorGroupDetails/index.tsx           |   3 +-
 .../components/app/ServiceMap/BetaBadge.tsx   |   5 +-
 .../components/app/ServiceMap/Controls.tsx    |  33 +-
 .../components/app/ServiceMap/Cytoscape.tsx   |  32 +-
 .../app/ServiceMap/EmptyBanner.test.tsx       |  11 +-
 .../components/app/ServiceMap/EmptyBanner.tsx |  15 +-
 .../app/ServiceMap/LoadingOverlay.tsx         |   3 +-
 .../app/ServiceMap/Popover/Info.tsx           |   3 +-
 .../ServiceMap/Popover/ServiceMetricList.tsx  |   3 +-
 .../ServiceMap/Popover/anomaly_detection.tsx  |   9 +-
 .../app/ServiceMap/Popover/index.tsx          |  20 +-
 .../app/ServiceMap/cytoscapeOptions.ts        | 328 +++++++++---------
 .../components/app/ServiceMap/index.tsx       |  17 +-
 .../AgentConfigurations/List/index.tsx        |  19 +-
 .../Waterfall/SpanFlyout/DatabaseContext.tsx  |   5 +-
 .../Waterfall/SpanFlyout/HttpContext.tsx      |   5 +-
 .../Waterfall/WaterfallItem.tsx               |   9 +-
 .../public/components/shared/EuiTabLink.tsx   |   5 +-
 .../shared/KeyValueTable/FormattedValue.tsx   |   3 +-
 .../__test__/KeyValueTable.test.tsx           |   3 +-
 .../shared/KueryBar/Typeahead/Suggestion.js   |  35 +-
 .../shared/KueryBar/Typeahead/Suggestions.js  |   7 +-
 .../shared/LocalUIFilters/Filter/index.tsx    |   7 +-
 .../Stacktrace/CauseStacktrace.test.tsx       |   7 +-
 .../shared/Stacktrace/CauseStacktrace.tsx     |  11 +-
 .../components/shared/Stacktrace/Context.tsx  |  21 +-
 .../shared/Stacktrace/FrameHeading.tsx        |   7 +-
 .../shared/Stacktrace/Stackframe.tsx          |  11 +-
 .../shared/Stacktrace/Variables.tsx           |   3 +-
 .../Stacktrace/__test__/Stackframe.test.tsx   |  11 +-
 .../__snapshots__/Stackframe.test.tsx.snap    |  60 ++--
 .../shared/StickyProperties/index.tsx         |   3 +-
 .../Summary/ErrorCountSummaryItemBadge.tsx    |  24 +-
 .../Summary/UserAgentSummaryItem.test.tsx     |   6 +-
 .../shared/Summary/UserAgentSummaryItem.tsx   |   3 +-
 .../ErrorCountSummaryItemBadge.test.tsx       |  11 +-
 .../components/shared/Summary/index.tsx       |   6 +-
 .../charts/CustomPlot/AnnotationsPlot.tsx     |  21 +-
 .../shared/charts/CustomPlot/Legends.js       |  17 +-
 .../charts/CustomPlot/test/CustomPlot.test.js |   7 +-
 .../Histogram/__test__/Histogram.test.js      |  26 +-
 .../components/shared/charts/Legend/index.tsx |  13 +-
 .../Timeline/Marker/AgentMarker.test.tsx      |   9 +-
 .../charts/Timeline/Marker/AgentMarker.tsx    |  12 +-
 .../Timeline/Marker/ErrorMarker.test.tsx      |   9 +-
 .../charts/Timeline/Marker/ErrorMarker.tsx    |   7 +-
 .../__snapshots__/AgentMarker.test.tsx.snap   |  34 +-
 .../shared/charts/Timeline/Timeline.test.tsx  |  11 +-
 .../shared/charts/Timeline/TimelineAxis.tsx   |  15 +-
 .../shared/charts/Timeline/VerticalLines.tsx  |  91 +++--
 .../components/shared/charts/Tooltip/index.js |  19 +-
 .../TransactionCharts/ChoroplethMap/index.tsx |  13 +-
 x-pack/plugins/apm/public/hooks/useTheme.tsx  |  14 +
 .../plugins/apm/public/utils/testHelpers.tsx  |  29 +-
 55 files changed, 598 insertions(+), 528 deletions(-)
 create mode 100644 x-pack/plugins/apm/public/hooks/useTheme.tsx

diff --git a/x-pack/plugins/apm/public/application/index.tsx b/x-pack/plugins/apm/public/application/index.tsx
index 8800b2fd492bf..0a6cca8434a85 100644
--- a/x-pack/plugins/apm/public/application/index.tsx
+++ b/x-pack/plugins/apm/public/application/index.tsx
@@ -8,8 +8,9 @@ import { ApmRoute } from '@elastic/apm-rum-react';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
-import styled from 'styled-components';
-import { EuiThemeProvider } from '../../../observability/public';
+import styled, { ThemeProvider, DefaultTheme } from 'styled-components';
+import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import { CoreStart, AppMountParameters } from '../../../../../src/core/public';
 import { ApmPluginSetupDeps } from '../plugin';
 import { ApmPluginContext } from '../context/ApmPluginContext';
@@ -41,7 +42,13 @@ const App = () => {
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
   return (
-    <EuiThemeProvider darkMode={darkMode}>
+    <ThemeProvider
+      theme={(outerTheme?: DefaultTheme) => ({
+        ...outerTheme,
+        eui: darkMode ? euiDarkVars : euiLightVars,
+        darkMode,
+      })}
+    >
       <MainContainer data-test-subj="apmMainContainer" role="main">
         <UpdateBreadcrumbs routes={routes} />
         <Route component={ScrollToTopOnPathChange} />
@@ -53,7 +60,7 @@ const App = () => {
           </Switch>
         </APMIndicesPermission>
       </MainContainer>
-    </EuiThemeProvider>
+    </ThemeProvider>
   );
 };
 
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx
index 225e5ef2f6ca2..b765dc42ede64 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx
@@ -13,7 +13,6 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import React, { Fragment } from 'react';
 import styled from 'styled-components';
@@ -37,7 +36,7 @@ const Titles = styled.div`
 const Label = styled.div`
   margin-bottom: ${px(units.quarter)};
   font-size: ${fontSizes.small};
-  color: ${theme.euiColorMediumShade};
+  color: ${({ theme }) => theme.eui.euiColorMediumShade};
 `;
 
 const Message = styled.div`
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/BetaBadge.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/BetaBadge.tsx
index dfbdee647b50a..b468470e3a17d 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/BetaBadge.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/BetaBadge.tsx
@@ -5,15 +5,14 @@
  */
 
 import { EuiBetaBadge } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import styled from 'styled-components';
 
 const BetaBadgeContainer = styled.div`
-  right: ${theme.gutterTypes.gutterMedium};
+  right: ${({ theme }) => theme.eui.gutterTypes.gutterMedium};
   position: absolute;
-  top: ${theme.gutterTypes.gutterSmall};
+  top: ${({ theme }) => theme.eui.gutterTypes.gutterSmall};
   z-index: 1; /* The element containing the cytoscape canvas has z-index = 0. */
 `;
 
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Controls.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Controls.tsx
index 8775cebc0af55..bcc87cbf35819 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/Controls.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Controls.tsx
@@ -4,41 +4,44 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import React, { useContext, useEffect, useState } from 'react';
 import { EuiButtonIcon, EuiPanel, EuiToolTip } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
-import React, { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { CytoscapeContext } from './Cytoscape';
-import { animationOptions, nodeHeight } from './cytoscapeOptions';
+import { getAnimationOptions, getNodeHeight } from './cytoscapeOptions';
 import { getAPMHref } from '../../shared/Links/apm/APMLink';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { APMQueryParams } from '../../shared/Links/url_helpers';
+import { useTheme } from '../../../hooks/useTheme';
 
 const ControlsContainer = styled('div')`
-  left: ${theme.gutterTypes.gutterMedium};
+  left: ${({ theme }) => theme.eui.gutterTypes.gutterMedium};
   position: absolute;
-  top: ${theme.gutterTypes.gutterSmall};
+  top: ${({ theme }) => theme.eui.gutterTypes.gutterSmall};
   z-index: 1; /* The element containing the cytoscape canvas has z-index = 0. */
 `;
 
 const Button = styled(EuiButtonIcon)`
   display: block;
-  margin: ${theme.paddingSizes.xs};
+  margin: ${({ theme }) => theme.eui.paddingSizes.xs};
 `;
 
 const ZoomInButton = styled(Button)`
-  margin-bottom: ${theme.paddingSizes.s};
+  margin-bottom: ${({ theme }) => theme.eui.paddingSizes.s};
 `;
 
 const Panel = styled(EuiPanel)`
-  margin-bottom: ${theme.paddingSizes.s};
+  margin-bottom: ${({ theme }) => theme.eui.paddingSizes.s};
 `;
 
-const duration = parseInt(theme.euiAnimSpeedFast, 10);
 const steps = 5;
 
-function doZoom(cy: cytoscape.Core | undefined, increment: number) {
+function doZoom(
+  cy: cytoscape.Core | undefined,
+  increment: number,
+  duration: number
+) {
   if (cy) {
     const level = cy.zoom() + increment;
     // @ts-ignore `.position()` _does_ work on a NodeCollection. It returns the position of the first element in the collection.
@@ -93,10 +96,12 @@ function useDebugDownloadUrl(cy?: cytoscape.Core) {
 }
 
 export function Controls() {
+  const theme = useTheme();
   const cy = useContext(CytoscapeContext);
   const { urlParams } = useUrlParams();
   const currentSearch = urlParams.kuery ?? '';
   const [zoom, setZoom] = useState((cy && cy.zoom()) || 1);
+  const duration = parseInt(theme.eui.euiAnimSpeedFast, 10);
   const downloadUrl = useDebugDownloadUrl(cy);
 
   // Handle zoom events
@@ -120,19 +125,19 @@ export function Controls() {
     if (cy) {
       const eles = cy.nodes();
       cy.animate({
-        ...animationOptions,
+        ...getAnimationOptions(theme),
         center: { eles },
-        fit: { eles, padding: nodeHeight },
+        fit: { eles, padding: getNodeHeight(theme) },
       });
     }
   }
 
   function zoomIn() {
-    doZoom(cy, increment);
+    doZoom(cy, increment, duration);
   }
 
   function zoomOut() {
-    doZoom(cy, -increment);
+    doZoom(cy, -increment, duration);
   }
 
   if (!cy) {
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx
index c2764d3adfa7c..1cde473aae6fa 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import cytoscape from 'cytoscape';
 import React, {
   createContext,
   CSSProperties,
@@ -13,11 +12,13 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import cytoscape from 'cytoscape';
 import { debounce } from 'lodash';
+import { useTheme } from '../../../hooks/useTheme';
 import {
-  animationOptions,
-  cytoscapeOptions,
-  nodeHeight,
+  getAnimationOptions,
+  getCytoscapeOptions,
+  getNodeHeight,
 } from './cytoscapeOptions';
 import { useUiTracker } from '../../../../../observability/public';
 
@@ -73,7 +74,8 @@ function rotatePoint(
 function getLayoutOptions(
   selectedRoots: string[],
   height: number,
-  width: number
+  width: number,
+  nodeHeight: number
 ): cytoscape.LayoutOptions {
   return {
     name: 'breadthfirst',
@@ -111,11 +113,14 @@ export function Cytoscape({
   serviceName,
   style,
 }: CytoscapeProps) {
+  const theme = useTheme();
   const [ref, cy] = useCytoscape({
-    ...cytoscapeOptions,
+    ...getCytoscapeOptions(theme),
     elements,
   });
 
+  const nodeHeight = getNodeHeight(theme);
+
   // Add the height to the div style. The height is a separate prop because it
   // is required and can trigger rendering when changed.
   const divStyle = { ...style, height };
@@ -149,7 +154,7 @@ export function Cytoscape({
 
         const selectedRoots = selectRoots(event.cy);
         const layout = cy.layout(
-          getLayoutOptions(selectedRoots, height, width)
+          getLayoutOptions(selectedRoots, height, width, nodeHeight)
         );
 
         layout.run();
@@ -162,7 +167,7 @@ export function Cytoscape({
       layoutstopDelayTimeout = setTimeout(() => {
         if (serviceName) {
           event.cy.animate({
-            ...animationOptions,
+            ...getAnimationOptions(theme),
             fit: {
               eles: event.cy.elements(),
               padding: nodeHeight,
@@ -237,7 +242,16 @@ export function Cytoscape({
       }
       clearTimeout(layoutstopDelayTimeout);
     };
-  }, [cy, elements, height, serviceName, trackApmEvent, width]);
+  }, [
+    cy,
+    elements,
+    height,
+    serviceName,
+    trackApmEvent,
+    width,
+    nodeHeight,
+    theme,
+  ]);
 
   return (
     <CytoscapeContext.Provider value={cy}>
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx
index d497711cd0c24..b330129f83785 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx
@@ -4,12 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { act, render, wait } from '@testing-library/react';
-import cytoscape from 'cytoscape';
 import React, { FunctionComponent } from 'react';
+import { act, wait } from '@testing-library/react';
+import cytoscape from 'cytoscape';
 import { CytoscapeContext } from './Cytoscape';
 import { EmptyBanner } from './EmptyBanner';
 import { MockApmPluginContextWrapper } from '../../../context/ApmPluginContext/MockApmPluginContext';
+import { renderWithTheme } from '../../../utils/testHelpers';
 
 const cy = cytoscape({});
 
@@ -29,7 +30,7 @@ describe('EmptyBanner', () => {
           </CytoscapeContext.Provider>
         </MockApmPluginContextWrapper>
       );
-      const component = render(<EmptyBanner />, {
+      const component = renderWithTheme(<EmptyBanner />, {
         wrapper: noCytoscapeWrapper,
       });
 
@@ -39,7 +40,7 @@ describe('EmptyBanner', () => {
 
   describe('with no nodes', () => {
     it('renders null', () => {
-      const component = render(<EmptyBanner />, {
+      const component = renderWithTheme(<EmptyBanner />, {
         wrapper,
       });
 
@@ -49,7 +50,7 @@ describe('EmptyBanner', () => {
 
   describe('with one node', () => {
     it('does not render null', async () => {
-      const component = render(<EmptyBanner />, { wrapper });
+      const component = renderWithTheme(<EmptyBanner />, { wrapper });
 
       await act(async () => {
         cy.add({ data: { id: 'test id' } });
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.tsx
index 86582d57b3d7e..63a9cf985959f 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.tsx
@@ -4,26 +4,27 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import React, { useContext, useEffect, useState } from 'react';
 import { EuiCallOut } from '@elastic/eui';
-import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
-import React, { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
 import { CytoscapeContext } from './Cytoscape';
+import { useTheme } from '../../../hooks/useTheme';
 
 const EmptyBannerContainer = styled.div`
-  margin: ${lightTheme.gutterTypes.gutterSmall};
+  margin: ${({ theme }) => theme.eui.gutterTypes.gutterSmall};
   /* Add some extra margin so it displays to the right of the controls. */
   left: calc(
-    ${lightTheme.gutterTypes.gutterExtraLarge} +
-      ${lightTheme.gutterTypes.gutterSmall}
+    ${({ theme }) => theme.eui.gutterTypes.gutterExtraLarge} +
+      ${({ theme }) => theme.eui.gutterTypes.gutterSmall}
   );
   position: absolute;
   z-index: 1;
 `;
 
 export function EmptyBanner() {
+  const theme = useTheme();
   const cy = useContext(CytoscapeContext);
   const [nodeCount, setNodeCount] = useState(0);
 
@@ -51,8 +52,8 @@ export function EmptyBanner() {
   // subtract the space for controls and margins.
   const width =
     cy.width() -
-    parseInt(lightTheme.gutterTypes.gutterExtraLarge, 10) -
-    parseInt(lightTheme.gutterTypes.gutterLarge, 10);
+    parseInt(theme.eui.gutterTypes.gutterExtraLarge, 10) -
+    parseInt(theme.eui.gutterTypes.gutterLarge, 10);
 
   return (
     <EmptyBannerContainer style={{ width }}>
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/LoadingOverlay.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/LoadingOverlay.tsx
index 23fd568648bad..9e805058e8cb5 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/LoadingOverlay.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/LoadingOverlay.tsx
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import React from 'react';
 import { EuiProgress, EuiText, EuiSpacer } from '@elastic/eui';
 import styled from 'styled-components';
@@ -22,7 +21,7 @@ const Overlay = styled.div`
   flex-direction: column;
   align-items: center;
   width: 100%;
-  padding: ${theme.gutterTypes.gutterMedium};
+  padding: ${({ theme }) => theme.eui.gutterTypes.gutterMedium};
 `;
 
 const ProgressBarContainer = styled.div`
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx
index 992e6ffdc46ba..223d342e6799f 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import cytoscape from 'cytoscape';
 import React from 'react';
@@ -19,7 +18,7 @@ const ItemRow = styled.div`
 `;
 
 const ItemTitle = styled.dt`
-  color: ${lightTheme.textColors.subdued};
+  color: ${({ theme }) => theme.eui.textColors.subdued};
 `;
 
 const ItemDescription = styled.dd``;
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceMetricList.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceMetricList.tsx
index 4e6f077a80ae7..d66be9c61e42d 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceMetricList.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceMetricList.tsx
@@ -5,7 +5,6 @@
  */
 
 import { EuiFlexGroup, EuiLoadingSpinner } from '@elastic/eui';
-import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import { isNumber } from 'lodash';
 import React from 'react';
@@ -30,7 +29,7 @@ export const ItemRow = styled('tr')`
 `;
 
 export const ItemTitle = styled('td')`
-  color: ${lightTheme.textColors.subdued};
+  color: ${({ theme }) => theme.eui.textColors.subdued};
   padding-right: 1rem;
 `;
 
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
index ad4dc2ced2bfb..531bbb139d58b 100644
--- 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
@@ -7,7 +7,6 @@
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import styled from 'styled-components';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -15,6 +14,7 @@ import {
   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';
@@ -33,11 +33,11 @@ const VerticallyCentered = styled.div`
 `;
 
 const SubduedText = styled.span`
-  color: ${theme.euiTextSubduedColor};
+  color: ${({ theme }) => theme.eui.euiTextSubduedColor};
 `;
 
 const EnableText = styled.section`
-  color: ${theme.euiTextSubduedColor};
+  color: ${({ theme }) => theme.eui.euiTextSubduedColor};
   line-height: 1.4;
   font-size: ${fontSize};
   width: ${px(popoverMinWidth)};
@@ -52,6 +52,7 @@ interface AnomalyDetectionProps {
 }
 
 export function AnomalyDetection({ serviceNodeData }: AnomalyDetectionProps) {
+  const theme = useTheme();
   const anomalySeverity = serviceNodeData.anomaly_severity;
   const anomalyScore = serviceNodeData.anomaly_score;
   const actualValue = serviceNodeData.actual_value;
@@ -81,7 +82,7 @@ export function AnomalyDetection({ serviceNodeData }: AnomalyDetectionProps) {
           <EuiFlexGroup>
             <EuiFlexItem>
               <VerticallyCentered>
-                <EuiHealth color={getSeverityColor(anomalySeverity)} />
+                <EuiHealth color={getSeverityColor(theme, anomalySeverity)} />
                 <SubduedText>{ANOMALY_DETECTION_SCORE_METRIC}</SubduedText>
               </VerticallyCentered>
             </EuiFlexItem>
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/index.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/index.tsx
index 96e8ef78967b5..1658c36e8a92f 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/index.tsx
@@ -4,8 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiPopover } from '@elastic/eui';
-import cytoscape from 'cytoscape';
 import React, {
   CSSProperties,
   MouseEvent,
@@ -15,9 +13,12 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import { EuiPopover } from '@elastic/eui';
+import cytoscape from 'cytoscape';
+import { useTheme } from '../../../../hooks/useTheme';
 import { SERVICE_NAME } from '../../../../../common/elasticsearch_fieldnames';
 import { CytoscapeContext } from '../Cytoscape';
-import { animationOptions } from '../cytoscapeOptions';
+import { getAnimationOptions } from '../cytoscapeOptions';
 import { Contents } from './Contents';
 
 interface PopoverProps {
@@ -25,6 +26,7 @@ interface PopoverProps {
 }
 
 export function Popover({ focusedServiceName }: PopoverProps) {
+  const theme = useTheme();
   const cy = useContext(CytoscapeContext);
   const [selectedNode, setSelectedNode] = useState<
     cytoscape.NodeSingular | undefined
@@ -93,16 +95,20 @@ export function Popover({ focusedServiceName }: PopoverProps) {
       event.preventDefault();
       if (cy) {
         cy.animate({
-          ...animationOptions,
+          ...getAnimationOptions(theme),
           center: { eles: cy.getElementById(selectedNodeServiceName) },
         });
       }
     },
-    [cy, selectedNodeServiceName]
+    [cy, selectedNodeServiceName, theme]
   );
 
   const isAlreadyFocused = focusedServiceName === selectedNodeServiceName;
 
+  const onFocusClick = isAlreadyFocused
+    ? centerSelectedNode
+    : (_event: MouseEvent<HTMLAnchorElement>) => deselect();
+
   return (
     <EuiPopover
       anchorPosition={'upCenter'}
@@ -115,9 +121,7 @@ export function Popover({ focusedServiceName }: PopoverProps) {
       <Contents
         isService={isService}
         label={label}
-        onFocusClick={
-          isAlreadyFocused ? centerSelectedNode : (_event) => deselect()
-        }
+        onFocusClick={onFocusClick}
         selectedNodeData={selectedNodeData}
         selectedNodeServiceName={selectedNodeServiceName}
       />
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts b/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts
index 5107d36df85d8..5a2a3d2a2644e 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts
@@ -3,46 +3,49 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import cytoscape from 'cytoscape';
 import { CSSProperties } from 'react';
 import {
   SERVICE_NAME,
   SPAN_DESTINATION_SERVICE_RESOURCE,
 } from '../../../../common/elasticsearch_fieldnames';
+import { EuiTheme } from '../../../../../observability/public';
 import { severity } from '../../../../common/ml_job_constants';
 import { defaultIcon, iconForNode } from './icons';
 
 export const popoverMinWidth = 280;
 
-export const getSeverityColor = (nodeSeverity?: string) => {
+export function getSeverityColor(theme: EuiTheme, nodeSeverity?: string) {
   switch (nodeSeverity) {
     case severity.warning:
-      return theme.euiColorVis0;
+      return theme.eui.euiColorVis0;
     case severity.minor:
     case severity.major:
-      return theme.euiColorVis5;
+      return theme.eui.euiColorVis5;
     case severity.critical:
-      return theme.euiColorVis9;
+      return theme.eui.euiColorVis9;
     default:
       return;
   }
-};
+}
 
-const getBorderColor: cytoscape.Css.MapperFunction<
-  cytoscape.NodeSingular,
-  string
-> = (el: cytoscape.NodeSingular) => {
-  const hasAnomalyDetectionJob = el.data('ml_job_id') !== undefined;
-  const nodeSeverity = el.data('anomaly_severity');
-  if (hasAnomalyDetectionJob) {
-    return getSeverityColor(nodeSeverity) || theme.euiColorMediumShade;
-  }
-  if (el.hasClass('primary') || el.selected()) {
-    return theme.euiColorPrimary;
-  }
-  return theme.euiColorMediumShade;
-};
+function getBorderColorFn(
+  theme: EuiTheme
+): cytoscape.Css.MapperFunction<cytoscape.NodeSingular, string> {
+  return (el: cytoscape.NodeSingular) => {
+    const hasAnomalyDetectionJob = el.data('ml_job_id') !== undefined;
+    const nodeSeverity = el.data('anomaly_severity');
+    if (hasAnomalyDetectionJob) {
+      return (
+        getSeverityColor(theme, nodeSeverity) || theme.eui.euiColorMediumShade
+      );
+    }
+    if (el.hasClass('primary') || el.selected()) {
+      return theme.eui.euiColorPrimary;
+    }
+    return theme.eui.euiColorMediumShade;
+  };
+}
 
 const getBorderStyle: cytoscape.Css.MapperFunction<
   cytoscape.NodeSingular,
@@ -56,7 +59,7 @@ const getBorderStyle: cytoscape.Css.MapperFunction<
   }
 };
 
-const getBorderWidth = (el: cytoscape.NodeSingular) => {
+function getBorderWidth(el: cytoscape.NodeSingular) {
   const nodeSeverity = el.data('anomaly_severity');
 
   if (nodeSeverity === severity.minor || nodeSeverity === severity.major) {
@@ -66,7 +69,7 @@ const getBorderWidth = (el: cytoscape.NodeSingular) => {
   } else {
     return 4;
   }
-};
+}
 
 // IE 11 does not properly load some SVGs or draw certain shapes. This causes
 // a runtime error and the map fails work at all. We would prefer to do some
@@ -79,172 +82,183 @@ const getBorderWidth = (el: cytoscape.NodeSingular) => {
 // @ts-ignore `documentMode` is not recognized as a valid property of `document`.
 const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
 
-export const animationOptions: cytoscape.AnimationOptions = {
-  duration: parseInt(theme.euiAnimSpeedNormal, 10),
+export const getAnimationOptions = (
+  theme: EuiTheme
+): cytoscape.AnimationOptions => ({
+  duration: parseInt(theme.eui.euiAnimSpeedNormal, 10),
   // @ts-ignore The cubic-bezier options here are not recognized by the cytoscape types
-  easing: theme.euiAnimSlightBounce,
-};
-const lineColor = '#C5CCD7';
+  easing: theme.eui.euiAnimSlightBounce,
+});
+
 const zIndexNode = 200;
 const zIndexEdge = 100;
 const zIndexEdgeHighlight = 110;
 const zIndexEdgeHover = 120;
-export const nodeHeight = parseInt(theme.avatarSizing.l.size, 10);
+
+export const getNodeHeight = (theme: EuiTheme): number =>
+  parseInt(theme.eui.avatarSizing.l.size, 10);
 
 function isService(el: cytoscape.NodeSingular) {
   return el.data(SERVICE_NAME) !== undefined;
 }
 
-const style: cytoscape.Stylesheet[] = [
-  {
-    selector: 'node',
-    style: {
-      'background-color': 'white',
-      // The DefinitelyTyped definitions don't specify that a function can be
-      // used here.
-      //
-      // @ts-ignore
-      'background-image': isIE11
-        ? undefined
-        : (el: cytoscape.NodeSingular) => iconForNode(el) ?? defaultIcon,
-      'background-height': (el: cytoscape.NodeSingular) =>
-        isService(el) ? '60%' : '40%',
-      'background-width': (el: cytoscape.NodeSingular) =>
-        isService(el) ? '60%' : '40%',
-      'border-color': getBorderColor,
-      'border-style': getBorderStyle,
-      'border-width': getBorderWidth,
-      color: (el: cytoscape.NodeSingular) =>
-        el.hasClass('primary') || el.selected()
-          ? theme.euiColorPrimaryText
-          : theme.textColors.text,
-      // theme.euiFontFamily doesn't work here for some reason, so we're just
-      // specifying a subset of the fonts for the label text.
-      'font-family': 'Inter UI, Segoe UI, Helvetica, Arial, sans-serif',
-      'font-size': theme.euiFontSizeS,
-      ghost: 'yes',
-      'ghost-offset-x': 0,
-      'ghost-offset-y': 2,
-      'ghost-opacity': 0.15,
-      height: nodeHeight,
-      label: (el: cytoscape.NodeSingular) =>
-        isService(el)
-          ? el.data(SERVICE_NAME)
-          : el.data(SPAN_DESTINATION_SERVICE_RESOURCE),
-      'min-zoomed-font-size': parseInt(theme.euiSizeS, 10),
-      'overlay-opacity': 0,
-      shape: (el: cytoscape.NodeSingular) =>
-        isService(el) ? (isIE11 ? 'rectangle' : 'ellipse') : 'diamond',
-      'text-background-color': theme.euiColorPrimary,
-      'text-background-opacity': (el: cytoscape.NodeSingular) =>
-        el.hasClass('primary') || el.selected() ? 0.1 : 0,
-      'text-background-padding': theme.paddingSizes.xs,
-      'text-background-shape': 'roundrectangle',
-      'text-margin-y': parseInt(theme.paddingSizes.s, 10),
-      'text-max-width': '200px',
-      'text-valign': 'bottom',
-      'text-wrap': 'ellipsis',
-      width: theme.avatarSizing.l.size,
-      'z-index': zIndexNode,
+const getStyle = (theme: EuiTheme): cytoscape.Stylesheet[] => {
+  const lineColor = theme.eui.euiColorMediumShade;
+  return [
+    {
+      selector: 'node',
+      style: {
+        'background-color': theme.eui.euiColorGhost,
+        // The DefinitelyTyped definitions don't specify that a function can be
+        // used here.
+        //
+        // @ts-ignore
+        'background-image': isIE11
+          ? undefined
+          : (el: cytoscape.NodeSingular) => iconForNode(el) ?? defaultIcon,
+        'background-height': (el: cytoscape.NodeSingular) =>
+          isService(el) ? '60%' : '40%',
+        'background-width': (el: cytoscape.NodeSingular) =>
+          isService(el) ? '60%' : '40%',
+        'border-color': getBorderColorFn(theme),
+        'border-style': getBorderStyle,
+        'border-width': getBorderWidth,
+        color: (el: cytoscape.NodeSingular) =>
+          el.hasClass('primary') || el.selected()
+            ? theme.eui.euiColorPrimaryText
+            : theme.eui.textColors.text,
+        // theme.euiFontFamily doesn't work here for some reason, so we're just
+        // specifying a subset of the fonts for the label text.
+        'font-family': 'Inter UI, Segoe UI, Helvetica, Arial, sans-serif',
+        'font-size': theme.eui.euiFontSizeS,
+        ghost: 'yes',
+        'ghost-offset-x': 0,
+        'ghost-offset-y': 2,
+        'ghost-opacity': 0.15,
+        height: getNodeHeight(theme),
+        label: (el: cytoscape.NodeSingular) =>
+          isService(el)
+            ? el.data(SERVICE_NAME)
+            : el.data(SPAN_DESTINATION_SERVICE_RESOURCE),
+        'min-zoomed-font-size': parseInt(theme.eui.euiSizeS, 10),
+        'overlay-opacity': 0,
+        shape: (el: cytoscape.NodeSingular) =>
+          isService(el) ? (isIE11 ? 'rectangle' : 'ellipse') : 'diamond',
+        'text-background-color': theme.eui.euiColorPrimary,
+        'text-background-opacity': (el: cytoscape.NodeSingular) =>
+          el.hasClass('primary') || el.selected() ? 0.1 : 0,
+        'text-background-padding': theme.eui.paddingSizes.xs,
+        'text-background-shape': 'roundrectangle',
+        'text-margin-y': parseInt(theme.eui.paddingSizes.s, 10),
+        'text-max-width': '200px',
+        'text-valign': 'bottom',
+        'text-wrap': 'ellipsis',
+        width: theme.eui.avatarSizing.l.size,
+        'z-index': zIndexNode,
+      },
     },
-  },
-  {
-    selector: 'edge',
-    style: {
-      'curve-style': 'taxi',
-      // @ts-ignore
-      'taxi-direction': 'auto',
-      'line-color': lineColor,
-      'overlay-opacity': 0,
-      'target-arrow-color': lineColor,
-      'target-arrow-shape': isIE11 ? 'none' : 'triangle',
-      // The DefinitelyTyped definitions don't specify this property since it's
-      // fairly new.
-      //
-      // @ts-ignore
-      'target-distance-from-node': isIE11 ? undefined : theme.paddingSizes.xs,
-      width: 1,
-      'source-arrow-shape': 'none',
-      'z-index': zIndexEdge,
+    {
+      selector: 'edge',
+      style: {
+        'curve-style': 'taxi',
+        // @ts-ignore
+        'taxi-direction': 'auto',
+        'line-color': lineColor,
+        'overlay-opacity': 0,
+        'target-arrow-color': lineColor,
+        'target-arrow-shape': isIE11 ? 'none' : 'triangle',
+        // The DefinitelyTyped definitions don't specify this property since it's
+        // fairly new.
+        //
+        // @ts-ignore
+        'target-distance-from-node': isIE11
+          ? undefined
+          : theme.eui.paddingSizes.xs,
+        width: 1,
+        'source-arrow-shape': 'none',
+        'z-index': zIndexEdge,
+      },
     },
-  },
-  {
-    selector: 'edge[bidirectional]',
-    style: {
-      'source-arrow-shape': isIE11 ? 'none' : 'triangle',
-      'source-arrow-color': lineColor,
-      'target-arrow-shape': isIE11 ? 'none' : 'triangle',
-      // @ts-ignore
-      'source-distance-from-node': isIE11
-        ? undefined
-        : parseInt(theme.paddingSizes.xs, 10),
-      'target-distance-from-node': isIE11
-        ? undefined
-        : parseInt(theme.paddingSizes.xs, 10),
+    {
+      selector: 'edge[bidirectional]',
+      style: {
+        'source-arrow-shape': isIE11 ? 'none' : 'triangle',
+        'source-arrow-color': lineColor,
+        'target-arrow-shape': isIE11 ? 'none' : 'triangle',
+        // @ts-ignore
+        'source-distance-from-node': isIE11
+          ? undefined
+          : parseInt(theme.eui.paddingSizes.xs, 10),
+        'target-distance-from-node': isIE11
+          ? undefined
+          : parseInt(theme.eui.paddingSizes.xs, 10),
+      },
     },
-  },
-  {
-    selector: 'edge[isInverseEdge]',
-    // @ts-ignore DefinitelyTyped says visibility is "none" but it's
-    // actually "hidden"
-    style: { visibility: 'hidden' },
-  },
-  {
-    selector: 'edge.nodeHover',
-    style: {
-      width: 2,
-      // @ts-ignore
-      'z-index': zIndexEdgeHover,
-      'line-color': theme.euiColorDarkShade,
-      'source-arrow-color': theme.euiColorDarkShade,
-      'target-arrow-color': theme.euiColorDarkShade,
+    {
+      selector: 'edge[isInverseEdge]',
+      // @ts-ignore DefinitelyTyped says visibility is "none" but it's
+      // actually "hidden"
+      style: { visibility: 'hidden' },
     },
-  },
-  {
-    selector: 'node.hover',
-    style: {
-      'border-width': getBorderWidth,
+    {
+      selector: 'edge.nodeHover',
+      style: {
+        width: 4,
+        // @ts-ignore
+        'z-index': zIndexEdgeHover,
+        'line-color': theme.eui.euiColorDarkShade,
+        'source-arrow-color': theme.eui.euiColorDarkShade,
+        'target-arrow-color': theme.eui.euiColorDarkShade,
+      },
     },
-  },
-  {
-    selector: 'edge.highlight',
-    style: {
-      width: 2,
-      'line-color': theme.euiColorPrimary,
-      'source-arrow-color': theme.euiColorPrimary,
-      'target-arrow-color': theme.euiColorPrimary,
-      // @ts-ignore
-      'z-index': zIndexEdgeHighlight,
+    {
+      selector: 'node.hover',
+      style: {
+        'border-width': getBorderWidth,
+      },
     },
-  },
-];
+    {
+      selector: 'edge.highlight',
+      style: {
+        width: 4,
+        'line-color': theme.eui.euiColorPrimary,
+        'source-arrow-color': theme.eui.euiColorPrimary,
+        'target-arrow-color': theme.eui.euiColorPrimary,
+        // @ts-ignore
+        'z-index': zIndexEdgeHighlight,
+      },
+    },
+  ];
+};
 
 // The CSS styles for the div containing the cytoscape element. Makes a
 // background grid of dots.
-export const cytoscapeDivStyle: CSSProperties = {
+export const getCytoscapeDivStyle = (theme: EuiTheme): CSSProperties => ({
   background: `linear-gradient(
   90deg,
-  ${theme.euiPageBackgroundColor}
-    calc(${theme.euiSizeL} - calc(${theme.euiSizeXS} / 2)),
+  ${theme.eui.euiPageBackgroundColor}
+    calc(${theme.eui.euiSizeL} - calc(${theme.eui.euiSizeXS} / 2)),
   transparent 1%
 )
 center,
 linear-gradient(
-  ${theme.euiPageBackgroundColor}
-    calc(${theme.euiSizeL} - calc(${theme.euiSizeXS} / 2)),
+  ${theme.eui.euiPageBackgroundColor}
+    calc(${theme.eui.euiSizeL} - calc(${theme.eui.euiSizeXS} / 2)),
   transparent 1%
 )
 center,
-${theme.euiColorLightShade}`,
-  backgroundSize: `${theme.euiSizeL} ${theme.euiSizeL}`,
-  margin: `-${theme.gutterTypes.gutterLarge}`,
+${theme.eui.euiColorLightShade}`,
+  backgroundSize: `${theme.eui.euiSizeL} ${theme.eui.euiSizeL}`,
+  margin: `-${theme.eui.gutterTypes.gutterLarge}`,
   marginTop: 0,
-};
+});
 
-export const cytoscapeOptions: cytoscape.CytoscapeOptions = {
+export const getCytoscapeOptions = (
+  theme: EuiTheme
+): cytoscape.CytoscapeOptions => ({
   autoungrabify: true,
   boxSelectionEnabled: false,
   maxZoom: 3,
   minZoom: 0.2,
-  style,
-};
+  style: getStyle(theme),
+});
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx
index 2decf7325a8f3..7f3d25efa6f44 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx
@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import React from 'react';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { useTheme } from '../../../hooks/useTheme';
 import {
   invalidLicenseMessage,
   isValidPlatinumLicense,
@@ -18,7 +18,7 @@ import { callApmApi } from '../../../services/rest/createCallApmApi';
 import { LicensePrompt } from '../../shared/LicensePrompt';
 import { Controls } from './Controls';
 import { Cytoscape } from './Cytoscape';
-import { cytoscapeDivStyle } from './cytoscapeOptions';
+import { getCytoscapeDivStyle } from './cytoscapeOptions';
 import { EmptyBanner } from './EmptyBanner';
 import { Popover } from './Popover';
 import { useRefDimensions } from './useRefDimensions';
@@ -29,7 +29,8 @@ interface ServiceMapProps {
   serviceName?: string;
 }
 
-export function ServiceMap({ serviceName }: ServiceMapProps) {
+export const ServiceMap = ({ serviceName }: ServiceMapProps) => {
+  const theme = useTheme();
   const license = useLicense();
   const { urlParams } = useUrlParams();
 
@@ -67,14 +68,16 @@ export function ServiceMap({ serviceName }: ServiceMapProps) {
 
   return isValidPlatinumLicense(license) ? (
     <div
-      style={{ height: height - parseInt(theme.gutterTypes.gutterLarge, 10) }}
+      style={{
+        height: height - parseInt(theme.eui.gutterTypes.gutterLarge, 10),
+      }}
       ref={ref}
     >
       <Cytoscape
         elements={data?.elements ?? []}
         height={height}
         serviceName={serviceName}
-        style={cytoscapeDivStyle}
+        style={getCytoscapeDivStyle(theme)}
         width={width}
       >
         <Controls />
@@ -98,4 +101,4 @@ export function ServiceMap({ serviceName }: ServiceMapProps) {
       </EuiFlexItem>
     </EuiFlexGroup>
   );
-}
+};
diff --git a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/index.tsx
index 6d850b66f2980..0f23e230733b4 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/index.tsx
@@ -15,7 +15,7 @@ import {
   EuiButtonIcon,
 } from '@elastic/eui';
 import { isEmpty } from 'lodash';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { useTheme } from '../../../../../hooks/useTheme';
 import { FETCH_STATUS } from '../../../../../hooks/useFetcher';
 import { ITableColumn, ManagedTable } from '../../../../shared/ManagedTable';
 import { LoadingStatePrompt } from '../../../../shared/LoadingStatePrompt';
@@ -32,15 +32,14 @@ import { ConfirmDeleteModal } from './ConfirmDeleteModal';
 
 type Config = AgentConfigurationListAPIResponse[0];
 
-export function AgentConfigurationList({
-  status,
-  data,
-  refetch,
-}: {
+interface Props {
   status: FETCH_STATUS;
   data: Config[];
   refetch: () => void;
-}) {
+}
+
+export const AgentConfigurationList = ({ status, data, refetch }: Props) => {
+  const theme = useTheme();
   const [configToBeDeleted, setConfigToBeDeleted] = useState<Config | null>(
     null
   );
@@ -128,7 +127,9 @@ export function AgentConfigurationList({
                 )
           }
         >
-          <EuiHealth color={isApplied ? 'success' : theme.euiColorLightShade} />
+          <EuiHealth
+            color={isApplied ? 'success' : theme.eui.euiColorLightShade}
+          />
         </EuiToolTip>
       ),
     },
@@ -218,4 +219,4 @@ export function AgentConfigurationList({
       />
     </>
   );
-}
+};
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx
index 933cb3c8e8637..7bceeb9ac1652 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx
@@ -5,7 +5,6 @@
  */
 
 import { EuiSpacer, EuiTitle } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import { tint } from 'polished';
 import React, { Fragment } from 'react';
@@ -33,9 +32,9 @@ registerLanguage('sql', sql);
 
 const DatabaseStatement = styled.div`
   padding: ${px(units.half)} ${px(unit)};
-  background: ${tint(0.1, theme.euiColorWarning)};
+  background: ${({ theme }) => tint(0.1, theme.eui.euiColorWarning)};
   border-radius: ${borderRadius};
-  border: 1px solid ${theme.euiColorLightShade};
+  border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
   font-family: ${fontFamilyCode};
   font-size: ${fontSize};
 `;
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx
index 7b296ebc54eab..cfe174168ca31 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx
@@ -8,7 +8,6 @@ import React, { Fragment } from 'react';
 import styled from 'styled-components';
 
 import { EuiSpacer, EuiTitle } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import {
   borderRadius,
   fontFamilyCode,
@@ -21,9 +20,9 @@ import { Span } from '../../../../../../../../typings/es_schemas/ui/span';
 
 const ContextUrl = styled.div`
   padding: ${px(units.half)} ${px(unit)};
-  background: ${theme.euiColorLightestShade};
+  background: ${({ theme }) => theme.eui.euiColorLightestShade};
   border-radius: ${borderRadius};
-  border: 1px solid ${theme.euiColorLightShade};
+  border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
   font-family: ${fontFamilyCode};
   font-size: ${fontSize};
 `;
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
index 1226db7e36c57..a25ae71947f21 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
@@ -8,7 +8,6 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { EuiIcon, EuiText, EuiTitle, EuiToolTip } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import { isRumAgentName } from '../../../../../../../common/agent_name';
 import { px, unit, units } from '../../../../../../style/variables';
@@ -41,13 +40,13 @@ const Container = styled.div<IContainerStyleProps>`
   padding-bottom: ${px(units.plus)};
   margin-right: ${(props) => px(props.timelineMargins.right)};
   margin-left: ${(props) => px(props.timelineMargins.left)};
-  border-top: 1px solid ${theme.euiColorLightShade};
-  background-color: ${(props) =>
-    props.isSelected ? theme.euiColorLightestShade : 'initial'};
+  border-top: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
+  background-color: ${({ isSelected, theme }) =>
+    isSelected ? theme.eui.euiColorLightestShade : 'initial'};
   cursor: pointer;
 
   &:hover {
-    background-color: ${theme.euiColorLightestShade};
+    background-color: ${({ theme }) => theme.eui.euiColorLightestShade};
   }
 `;
 
diff --git a/x-pack/plugins/apm/public/components/shared/EuiTabLink.tsx b/x-pack/plugins/apm/public/components/shared/EuiTabLink.tsx
index 73fd2544a34ae..8538ea6a510ce 100644
--- a/x-pack/plugins/apm/public/components/shared/EuiTabLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/EuiTabLink.tsx
@@ -6,7 +6,6 @@
 import React from 'react';
 import cls from 'classnames';
 import styled from 'styled-components';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { px, unit } from '../../style/variables';
 
 // TODO: replace this component with EUITab w/ a href prop
@@ -28,8 +27,8 @@ const Wrapper = styled.div<{ isSelected: boolean }>`
   a {
     display: inline-block;
     padding: ${px(unit * 0.75)} ${px(unit)};
-    ${({ isSelected }) =>
-      !isSelected ? `color: ${theme.euiTextColor} !important;` : ''}
+    ${({ isSelected, theme }) =>
+      !isSelected ? `color: ${theme.eui.euiTextColor} !important;` : ''}
   }
 `;
 
diff --git a/x-pack/plugins/apm/public/components/shared/KeyValueTable/FormattedValue.tsx b/x-pack/plugins/apm/public/components/shared/KeyValueTable/FormattedValue.tsx
index ac4f8a2086bd5..54c46c5559a0d 100644
--- a/x-pack/plugins/apm/public/components/shared/KeyValueTable/FormattedValue.tsx
+++ b/x-pack/plugins/apm/public/components/shared/KeyValueTable/FormattedValue.tsx
@@ -4,14 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { isBoolean, isNumber, isObject } from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
 import { NOT_AVAILABLE_LABEL } from '../../../../common/i18n';
 
 const EmptyValue = styled.span`
-  color: ${theme.euiColorMediumShade};
+  color: ${({ theme }) => theme.eui.euiColorMediumShade};
   text-align: left;
 `;
 
diff --git a/x-pack/plugins/apm/public/components/shared/KeyValueTable/__test__/KeyValueTable.test.tsx b/x-pack/plugins/apm/public/components/shared/KeyValueTable/__test__/KeyValueTable.test.tsx
index 4384b21c06159..5a9e8809ea734 100644
--- a/x-pack/plugins/apm/public/components/shared/KeyValueTable/__test__/KeyValueTable.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/KeyValueTable/__test__/KeyValueTable.test.tsx
@@ -7,6 +7,7 @@
 import React from 'react';
 import { KeyValueTable } from '..';
 import { render } from '@testing-library/react';
+import { renderWithTheme } from '../../../../utils/testHelpers';
 
 function getKeys(output: ReturnType<typeof render>) {
   const keys = output.getAllByTestId('dot-key');
@@ -31,7 +32,7 @@ describe('KeyValueTable', () => {
       { key: 'nested.b.c', value: 'ccc' },
       { key: 'nested.a', value: 'aaa' },
     ];
-    const output = render(<KeyValueTable keyValuePairs={data} />);
+    const output = renderWithTheme(<KeyValueTable keyValuePairs={data} />);
     const rows = output.container.querySelectorAll('tr');
     expect(rows.length).toEqual(9);
 
diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestion.js b/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestion.js
index a4d68feffdc46..7a179c760af29 100644
--- a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestion.js
+++ b/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestion.js
@@ -16,32 +16,31 @@ import {
   unit,
 } from '../../../../style/variables';
 import { tint } from 'polished';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 
-function getIconColor(type) {
+function getIconColor(type, theme) {
   switch (type) {
     case 'field':
-      return theme.euiColorVis7;
+      return theme.eui.euiColorVis7;
     case 'value':
-      return theme.euiColorVis0;
+      return theme.eui.euiColorVis0;
     case 'operator':
-      return theme.euiColorVis1;
+      return theme.eui.euiColorVis1;
     case 'conjunction':
-      return theme.euiColorVis3;
+      return theme.eui.euiColorVis3;
     case 'recentSearch':
-      return theme.euiColorMediumShade;
+      return theme.eui.euiColorMediumShade;
   }
 }
 
 const Description = styled.div`
-  color: ${theme.euiColorDarkShade};
+  color: ${({ theme }) => theme.eui.euiColorDarkShade};
 
   p {
     display: inline;
 
     span {
       font-family: ${fontFamilyCode};
-      color: ${theme.euiColorFullShade};
+      color: ${({ theme }) => theme.eui.euiColorFullShade};
       padding: 0 ${px(units.quarter)};
       display: inline-block;
     }
@@ -53,25 +52,25 @@ const ListItem = styled.li`
   height: ${px(units.double)};
   align-items: center;
   display: flex;
-  background: ${(props) =>
-    props.selected ? theme.euiColorLightestShade : 'initial'};
+  background: ${({ selected, theme }) =>
+    selected ? theme.eui.euiColorLightestShade : 'initial'};
   cursor: pointer;
   border-radius: ${px(units.quarter)};
 
   ${Description} {
     p span {
-      background: ${(props) =>
-        props.selected
-          ? theme.euiColorEmptyShade
-          : theme.euiColorLightestShade};
+      background: ${({ selected, theme }) =>
+        selected
+          ? theme.eui.euiColorEmptyShade
+          : theme.eui.euiColorLightestShade};
     }
   }
 `;
 
 const Icon = styled.div`
   flex: 0 0 ${px(units.double)};
-  background: ${(props) => tint(0.1, getIconColor(props.type))};
-  color: ${(props) => getIconColor(props.type)};
+  background: ${({ type, theme }) => tint(0.1, getIconColor(type, theme))};
+  color: ${({ type, theme }) => getIconColor(type, theme)};
   width: 100%;
   height: 100%;
   text-align: center;
@@ -80,7 +79,7 @@ const Icon = styled.div`
 
 const TextValue = styled.div`
   flex: 0 0 ${px(unit * 16)};
-  color: ${theme.euiColorDarkestShade};
+  color: ${({ theme }) => theme.eui.euiColorDarkestShade};
   padding: 0 ${px(units.half)};
 `;
 
diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js b/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js
index fbc7cbcb78535..5e1434e792e10 100644
--- a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js
+++ b/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js
@@ -11,16 +11,15 @@ import { isEmpty } from 'lodash';
 import Suggestion from './Suggestion';
 import { units, px, unit } from '../../../../style/variables';
 import { tint } from 'polished';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 
 const List = styled.ul`
   width: 100%;
-  border: 1px solid ${theme.euiColorLightShade};
+  border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
   border-radius: ${px(units.quarter)};
   box-shadow: 0px ${px(units.quarter)} ${px(units.double)}
-    ${tint(0.1, theme.euiColorFullShade)};
+    ${({ theme }) => tint(0.1, theme.eui.euiColorFullShade)};
   position: absolute;
-  background: #fff;
+  background: ${({ theme }) => theme.eui.euiColorEmptyShade};
   z-index: 10;
   left: 0;
   max-height: ${px(unit * 20)};
diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx
index 45b32a82c2f8b..46fd5d925699b 100644
--- a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx
@@ -18,7 +18,6 @@ import {
   EuiFlexGroup,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import styled from 'styled-components';
 import { FilterBadgeList } from './FilterBadgeList';
 import { unit, px } from '../../../../style/variables';
@@ -39,9 +38,9 @@ const SelectContainer = styled.div`
 `;
 
 const Counter = styled.div`
-  border-radius: ${theme.euiBorderRadius};
-  background: ${theme.euiColorLightShade};
-  padding: 0 ${theme.paddingSizes.xs};
+  border-radius: ${({ theme }) => theme.eui.euiBorderRadius};
+  background: ${({ theme }) => theme.eui.euiColorLightShade};
+  padding: 0 ${({ theme }) => theme.eui.paddingSizes.xs};
 `;
 
 const ApplyButton = styled(EuiButton)`
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.test.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.test.tsx
index 7ffcce0c29eef..4d6305dd7534d 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.test.tsx
@@ -5,8 +5,9 @@
  */
 
 import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { shallow } from 'enzyme';
 import { CauseStacktrace } from './CauseStacktrace';
+import { mountWithTheme } from '../../../utils/testHelpers';
 
 describe('CauseStacktrace', () => {
   describe('render', () => {
@@ -15,7 +16,7 @@ describe('CauseStacktrace', () => {
         const props = { id: 'testId', message: 'testMessage' };
 
         expect(
-          mount(<CauseStacktrace {...props} />).find('CausedBy')
+          mountWithTheme(<CauseStacktrace {...props} />).find('CausedBy')
         ).toHaveLength(1);
       });
     });
@@ -28,7 +29,7 @@ describe('CauseStacktrace', () => {
         };
 
         expect(
-          mount(<CauseStacktrace {...props} />)
+          mountWithTheme(<CauseStacktrace {...props} />)
             .find('EuiTitle span')
             .text()
         ).toEqual('…');
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx
index 9b80ab648eca8..c70467c6d031f 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import { EuiAccordion, EuiTitle } from '@elastic/eui';
 import { px, unit } from '../../../style/variables';
@@ -15,18 +14,18 @@ import { IStackframe } from '../../../../typings/es_schemas/raw/fields/stackfram
 
 // @ts-ignore Styled Components has trouble inferring the types of the default props here.
 const Accordion = styled(EuiAccordion)`
-  border-top: ${theme.euiBorderThin};
+  border-top: ${({ theme }) => theme.eui.euiBorderThin};
 `;
 
 const CausedByContainer = styled('h5')`
-  padding: ${theme.spacerSizes.s} 0;
+  padding: ${({ theme }) => theme.eui.spacerSizes.s} 0;
 `;
 
 const CausedByHeading = styled('span')`
-  color: ${theme.textColors.subdued};
+  color: ${({ theme }) => theme.eui.textColors.subdued};
   display: block;
-  font-size: ${theme.euiFontSizeXS};
-  font-weight: ${theme.euiFontWeightBold};
+  font-size: ${({ theme }) => theme.eui.euiFontSizeXS};
+  font-weight: ${({ theme }) => theme.eui.euiFontWeightBold};
   text-transform: uppercase;
 `;
 
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx
index 6ce2c6b7fc8f4..edada6012d2e2 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { size } from 'lodash';
 import { tint } from 'polished';
 import React from 'react';
@@ -41,7 +40,7 @@ const LineHighlight = styled.div<{ lineNumber: number }>`
   height: ${px(units.eighth * 9)};
   top: ${(props) => px(props.lineNumber * LINE_HEIGHT)};
   pointer-events: none;
-  background-color: ${tint(0.1, theme.euiColorWarning)};
+  background-color: ${({ theme }) => tint(0.1, theme.eui.euiColorWarning)};
 `;
 
 const LineNumberContainer = styled.div<{ isLibraryFrame: boolean }>`
@@ -49,10 +48,10 @@ const LineNumberContainer = styled.div<{ isLibraryFrame: boolean }>`
   top: 0;
   left: 0;
   border-radius: ${borderRadius};
-  background: ${(props) =>
-    props.isLibraryFrame
-      ? theme.euiColorEmptyShade
-      : theme.euiColorLightestShade};
+  background: ${({ isLibraryFrame, theme }) =>
+    isLibraryFrame
+      ? theme.eui.euiColorEmptyShade
+      : theme.eui.euiColorLightestShade};
 `;
 
 const LineNumber = styled.div<{ highlight: boolean }>`
@@ -60,12 +59,12 @@ const LineNumber = styled.div<{ highlight: boolean }>`
   min-width: ${px(units.eighth * 21)};
   padding-left: ${px(units.half)};
   padding-right: ${px(units.quarter)};
-  color: ${theme.euiColorMediumShade};
+  color: ${({ theme }) => theme.eui.euiColorMediumShade};
   line-height: ${px(unit + units.eighth)};
   text-align: right;
-  border-right: 1px solid ${theme.euiColorLightShade};
-  background-color: ${(props) =>
-    props.highlight ? tint(0.1, theme.euiColorWarning) : null};
+  border-right: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
+  background-color: ${({ highlight, theme }) =>
+    highlight ? tint(0.1, theme.eui.euiColorWarning) : null};
 
   &:last-of-type {
     border-radius: 0 0 0 ${borderRadius};
@@ -76,7 +75,7 @@ const LineContainer = styled.div`
   overflow: auto;
   margin: 0 0 0 ${px(units.eighth * 21)};
   padding: 0;
-  background-color: ${theme.euiColorEmptyShade};
+  background-color: ${({ theme }) => theme.eui.euiColorEmptyShade};
 
   &:last-of-type {
     border-radius: 0 0 ${borderRadius} 0;
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/FrameHeading.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/FrameHeading.tsx
index 4467fe7ad615e..48580146c6fe1 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/FrameHeading.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/FrameHeading.tsx
@@ -4,25 +4,24 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import React, { Fragment } from 'react';
 import styled from 'styled-components';
 import { IStackframe } from '../../../../typings/es_schemas/raw/fields/stackframe';
 import { fontFamilyCode, fontSize, px, units } from '../../../style/variables';
 
 const FileDetails = styled.div`
-  color: ${theme.euiColorDarkShade};
+  color: ${({ theme }) => theme.eui.euiColorDarkShade};
   padding: ${px(units.half)} 0;
   font-family: ${fontFamilyCode};
   font-size: ${fontSize};
 `;
 
 const LibraryFrameFileDetail = styled.span`
-  color: ${theme.euiColorDarkShade};
+  color: ${({ theme }) => theme.eui.euiColorDarkShade};
 `;
 
 const AppFrameFileDetail = styled.span`
-  color: ${theme.euiColorFullShade};
+  color: ${({ theme }) => theme.eui.euiColorFullShade};
 `;
 
 interface Props {
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/Stackframe.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/Stackframe.tsx
index e62a4ecf3993d..0c60a9aaace07 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/Stackframe.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/Stackframe.tsx
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import React from 'react';
 import styled from 'styled-components';
 import { EuiAccordion } from '@elastic/eui';
@@ -25,12 +24,12 @@ const ContextContainer = styled.div<{ isLibraryFrame: boolean }>`
   position: relative;
   font-family: ${fontFamilyCode};
   font-size: ${fontSize};
-  border: 1px solid ${theme.euiColorLightShade};
+  border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
   border-radius: ${borderRadius};
-  background: ${(props) =>
-    props.isLibraryFrame
-      ? theme.euiColorEmptyShade
-      : theme.euiColorLightestShade};
+  background: ${({ isLibraryFrame, theme }) =>
+    isLibraryFrame
+      ? theme.eui.euiColorEmptyShade
+      : theme.eui.euiColorLightestShade};
 `;
 
 interface Props {
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/Variables.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/Variables.tsx
index ec5fb39f83f8c..4bd6d361d6714 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/Variables.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/Variables.tsx
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import styled from 'styled-components';
 import { EuiAccordion } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -15,7 +14,7 @@ import { KeyValueTable } from '../KeyValueTable';
 import { flattenObject } from '../../../utils/flattenObject';
 
 const VariablesContainer = styled.div`
-  background: ${theme.euiColorEmptyShade};
+  background: ${({ theme }) => theme.eui.euiColorEmptyShade};
   border-radius: 0 0 ${borderRadius} ${borderRadius};
   padding: ${px(units.half)} ${px(unit)};
 `;
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/Stackframe.test.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/Stackframe.test.tsx
index 478f9cfe921d9..1c5db4e82f069 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/Stackframe.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/Stackframe.test.tsx
@@ -4,9 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount, ReactWrapper, shallow } from 'enzyme';
 import React from 'react';
+import { ReactWrapper, shallow } from 'enzyme';
 import { IStackframe } from '../../../../../typings/es_schemas/raw/fields/stackframe';
+import { mountWithTheme } from '../../../../utils/testHelpers';
 import { Stackframe } from '../Stackframe';
 import stacktracesMock from './stacktraces.json';
 
@@ -15,7 +16,9 @@ describe('Stackframe', () => {
     let wrapper: ReactWrapper;
     beforeEach(() => {
       const stackframe = stacktracesMock[0];
-      wrapper = mount(<Stackframe id="test" stackframe={stackframe} />);
+      wrapper = mountWithTheme(
+        <Stackframe id="test" stackframe={stackframe} />
+      );
     });
 
     it('should render correctly', () => {
@@ -37,7 +40,9 @@ describe('Stackframe', () => {
     let wrapper: ReactWrapper;
     beforeEach(() => {
       const stackframe = { line: {} } as IStackframe;
-      wrapper = mount(<Stackframe id="test" stackframe={stackframe} />);
+      wrapper = mountWithTheme(
+        <Stackframe id="test" stackframe={stackframe} />
+      );
     });
 
     it('should render only FrameHeading', () => {
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap b/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap
index 0656134e2f1fc..86e6b188ef2a9 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap
@@ -383,8 +383,8 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "$$typeof": Symbol(react.forward_ref),
                                   "attrs": Array [],
                                   "componentStyle": ComponentStyle {
-                                    "baseHash": 1280172402,
-                                    "componentId": "sc-fzozJi",
+                                    "baseHash": -2021127760,
+                                    "componentId": "sc-fzoLsD",
                                     "isStatic": false,
                                     "rules": Array [
                                       "
@@ -401,7 +401,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "foldedComponentIds": Array [],
                                   "render": [Function],
                                   "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-fzozJi",
+                                  "styledComponentId": "sc-fzoLsD",
                                   "target": "code",
                                   "toString": [Function],
                                   "warnTooManyClasses": [Function],
@@ -413,8 +413,8 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "$$typeof": Symbol(react.forward_ref),
                                   "attrs": Array [],
                                   "componentStyle": ComponentStyle {
-                                    "baseHash": -1923298833,
-                                    "componentId": "sc-AxmLO",
+                                    "baseHash": 1280172402,
+                                    "componentId": "sc-fzozJi",
                                     "isStatic": false,
                                     "rules": Array [
                                       "
@@ -439,7 +439,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "foldedComponentIds": Array [],
                                   "render": [Function],
                                   "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-AxmLO",
+                                  "styledComponentId": "sc-fzozJi",
                                   "target": "pre",
                                   "toString": [Function],
                                   "warnTooManyClasses": [Function],
@@ -608,8 +608,8 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "$$typeof": Symbol(react.forward_ref),
                                   "attrs": Array [],
                                   "componentStyle": ComponentStyle {
-                                    "baseHash": 1280172402,
-                                    "componentId": "sc-fzozJi",
+                                    "baseHash": -2021127760,
+                                    "componentId": "sc-fzoLsD",
                                     "isStatic": false,
                                     "rules": Array [
                                       "
@@ -626,7 +626,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "foldedComponentIds": Array [],
                                   "render": [Function],
                                   "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-fzozJi",
+                                  "styledComponentId": "sc-fzoLsD",
                                   "target": "code",
                                   "toString": [Function],
                                   "warnTooManyClasses": [Function],
@@ -638,8 +638,8 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "$$typeof": Symbol(react.forward_ref),
                                   "attrs": Array [],
                                   "componentStyle": ComponentStyle {
-                                    "baseHash": -1923298833,
-                                    "componentId": "sc-AxmLO",
+                                    "baseHash": 1280172402,
+                                    "componentId": "sc-fzozJi",
                                     "isStatic": false,
                                     "rules": Array [
                                       "
@@ -664,7 +664,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "foldedComponentIds": Array [],
                                   "render": [Function],
                                   "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-AxmLO",
+                                  "styledComponentId": "sc-fzozJi",
                                   "target": "pre",
                                   "toString": [Function],
                                   "warnTooManyClasses": [Function],
@@ -834,8 +834,8 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "$$typeof": Symbol(react.forward_ref),
                                   "attrs": Array [],
                                   "componentStyle": ComponentStyle {
-                                    "baseHash": 1280172402,
-                                    "componentId": "sc-fzozJi",
+                                    "baseHash": -2021127760,
+                                    "componentId": "sc-fzoLsD",
                                     "isStatic": false,
                                     "rules": Array [
                                       "
@@ -852,7 +852,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "foldedComponentIds": Array [],
                                   "render": [Function],
                                   "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-fzozJi",
+                                  "styledComponentId": "sc-fzoLsD",
                                   "target": "code",
                                   "toString": [Function],
                                   "warnTooManyClasses": [Function],
@@ -864,8 +864,8 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "$$typeof": Symbol(react.forward_ref),
                                   "attrs": Array [],
                                   "componentStyle": ComponentStyle {
-                                    "baseHash": -1923298833,
-                                    "componentId": "sc-AxmLO",
+                                    "baseHash": 1280172402,
+                                    "componentId": "sc-fzozJi",
                                     "isStatic": false,
                                     "rules": Array [
                                       "
@@ -890,7 +890,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "foldedComponentIds": Array [],
                                   "render": [Function],
                                   "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-AxmLO",
+                                  "styledComponentId": "sc-fzozJi",
                                   "target": "pre",
                                   "toString": [Function],
                                   "warnTooManyClasses": [Function],
@@ -1070,8 +1070,8 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "$$typeof": Symbol(react.forward_ref),
                                   "attrs": Array [],
                                   "componentStyle": ComponentStyle {
-                                    "baseHash": 1280172402,
-                                    "componentId": "sc-fzozJi",
+                                    "baseHash": -2021127760,
+                                    "componentId": "sc-fzoLsD",
                                     "isStatic": false,
                                     "rules": Array [
                                       "
@@ -1088,7 +1088,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "foldedComponentIds": Array [],
                                   "render": [Function],
                                   "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-fzozJi",
+                                  "styledComponentId": "sc-fzoLsD",
                                   "target": "code",
                                   "toString": [Function],
                                   "warnTooManyClasses": [Function],
@@ -1100,8 +1100,8 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "$$typeof": Symbol(react.forward_ref),
                                   "attrs": Array [],
                                   "componentStyle": ComponentStyle {
-                                    "baseHash": -1923298833,
-                                    "componentId": "sc-AxmLO",
+                                    "baseHash": 1280172402,
+                                    "componentId": "sc-fzozJi",
                                     "isStatic": false,
                                     "rules": Array [
                                       "
@@ -1126,7 +1126,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "foldedComponentIds": Array [],
                                   "render": [Function],
                                   "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-AxmLO",
+                                  "styledComponentId": "sc-fzozJi",
                                   "target": "pre",
                                   "toString": [Function],
                                   "warnTooManyClasses": [Function],
@@ -1323,8 +1323,8 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "$$typeof": Symbol(react.forward_ref),
                                   "attrs": Array [],
                                   "componentStyle": ComponentStyle {
-                                    "baseHash": 1280172402,
-                                    "componentId": "sc-fzozJi",
+                                    "baseHash": -2021127760,
+                                    "componentId": "sc-fzoLsD",
                                     "isStatic": false,
                                     "rules": Array [
                                       "
@@ -1341,7 +1341,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "foldedComponentIds": Array [],
                                   "render": [Function],
                                   "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-fzozJi",
+                                  "styledComponentId": "sc-fzoLsD",
                                   "target": "code",
                                   "toString": [Function],
                                   "warnTooManyClasses": [Function],
@@ -1353,8 +1353,8 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "$$typeof": Symbol(react.forward_ref),
                                   "attrs": Array [],
                                   "componentStyle": ComponentStyle {
-                                    "baseHash": -1923298833,
-                                    "componentId": "sc-AxmLO",
+                                    "baseHash": 1280172402,
+                                    "componentId": "sc-fzozJi",
                                     "isStatic": false,
                                     "rules": Array [
                                       "
@@ -1379,7 +1379,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
                                   "foldedComponentIds": Array [],
                                   "render": [Function],
                                   "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-AxmLO",
+                                  "styledComponentId": "sc-fzozJi",
                                   "target": "pre",
                                   "toString": [Function],
                                   "warnTooManyClasses": [Function],
diff --git a/x-pack/plugins/apm/public/components/shared/StickyProperties/index.tsx b/x-pack/plugins/apm/public/components/shared/StickyProperties/index.tsx
index 8bfea721c854d..b9ed6d424d666 100644
--- a/x-pack/plugins/apm/public/components/shared/StickyProperties/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/StickyProperties/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { EuiToolTip } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import React from 'react';
 import styled from 'styled-components';
 import {
@@ -32,7 +31,7 @@ const TooltipFieldName = styled.span`
 const PropertyLabel = styled.div`
   margin-bottom: ${px(units.half)};
   font-size: ${fontSizes.small};
-  color: ${theme.euiColorMediumShade};
+  color: ${({ theme }) => theme.eui.euiColorMediumShade};
 
   span {
     cursor: help;
diff --git a/x-pack/plugins/apm/public/components/shared/Summary/ErrorCountSummaryItemBadge.tsx b/x-pack/plugins/apm/public/components/shared/Summary/ErrorCountSummaryItemBadge.tsx
index 436e0132148a0..b6ea6a714017d 100644
--- a/x-pack/plugins/apm/public/components/shared/Summary/ErrorCountSummaryItemBadge.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Summary/ErrorCountSummaryItemBadge.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
 import { EuiBadge } from '@elastic/eui';
-import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
+import { useTheme } from '../../../hooks/useTheme';
 import { px } from '../../../../public/style/variables';
 import { units } from '../../../style/variables';
 
@@ -19,12 +19,16 @@ const Badge = (styled(EuiBadge)`
   margin-top: ${px(units.eighth)};
 ` as unknown) as typeof EuiBadge;
 
-export const ErrorCountSummaryItemBadge = ({ count }: Props) => (
-  <Badge color={euiThemeLight.euiColorDanger}>
-    {i18n.translate('xpack.apm.transactionDetails.errorCount', {
-      defaultMessage:
-        '{errorCount, number} {errorCount, plural, one {Error} other {Errors}}',
-      values: { errorCount: count },
-    })}
-  </Badge>
-);
+export const ErrorCountSummaryItemBadge = ({ count }: Props) => {
+  const theme = useTheme();
+
+  return (
+    <Badge color={theme.eui.euiColorDanger}>
+      {i18n.translate('xpack.apm.transactionDetails.errorCount', {
+        defaultMessage:
+          '{errorCount, number} {errorCount, plural, one {Error} other {Errors}}',
+        values: { errorCount: count },
+      })}
+    </Badge>
+  );
+};
diff --git a/x-pack/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.test.tsx b/x-pack/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.test.tsx
index 09bf90f6d4b1d..e6a4f2f70708c 100644
--- a/x-pack/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.test.tsx
@@ -5,8 +5,8 @@
  */
 
 import React from 'react';
-import { shallow, render } from 'enzyme';
 import { UserAgentSummaryItem } from './UserAgentSummaryItem';
+import { mountWithTheme } from '../../../utils/testHelpers';
 
 describe('UserAgentSummaryItem', () => {
   describe('render', () => {
@@ -14,14 +14,14 @@ describe('UserAgentSummaryItem', () => {
 
     it('renders', () => {
       expect(() =>
-        shallow(<UserAgentSummaryItem {...props} />)
+        mountWithTheme(<UserAgentSummaryItem {...props} />)
       ).not.toThrowError();
     });
 
     describe('with a version', () => {
       it('shows the version', () => {
         const p = { ...props, version: '1.0' };
-        const wrapper = render(<UserAgentSummaryItem {...p} />);
+        const wrapper = mountWithTheme(<UserAgentSummaryItem {...p} />);
 
         expect(wrapper.text()).toContain('(1.0)');
       });
diff --git a/x-pack/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.tsx b/x-pack/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.tsx
index 1b565a60697ef..753d605e7b2cf 100644
--- a/x-pack/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.tsx
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { UserAgent } from '../../../../typings/es_schemas/raw/fields/user_agent';
@@ -14,7 +13,7 @@ import { UserAgent } from '../../../../typings/es_schemas/raw/fields/user_agent'
 type UserAgentSummaryItemProps = UserAgent;
 
 const Version = styled('span')`
-  font-size: ${theme.euiFontSizeS};
+  font-size: ${({ theme }) => theme.eui.euiFontSizeS};
 `;
 
 export function UserAgentSummaryItem({
diff --git a/x-pack/plugins/apm/public/components/shared/Summary/__test__/ErrorCountSummaryItemBadge.test.tsx b/x-pack/plugins/apm/public/components/shared/Summary/__test__/ErrorCountSummaryItemBadge.test.tsx
index 33f5752b6389b..26087e1fd85cc 100644
--- a/x-pack/plugins/apm/public/components/shared/Summary/__test__/ErrorCountSummaryItemBadge.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Summary/__test__/ErrorCountSummaryItemBadge.test.tsx
@@ -6,16 +6,19 @@
 
 import React from 'react';
 import { ErrorCountSummaryItemBadge } from '../ErrorCountSummaryItemBadge';
-import { render } from '@testing-library/react';
-import { expectTextsInDocument } from '../../../../utils/testHelpers';
+import {
+  expectTextsInDocument,
+  renderWithTheme,
+} from '../../../../utils/testHelpers';
 
 describe('ErrorCountSummaryItemBadge', () => {
   it('shows singular error message', () => {
-    const component = render(<ErrorCountSummaryItemBadge count={1} />);
+    const component = renderWithTheme(<ErrorCountSummaryItemBadge count={1} />);
     expectTextsInDocument(component, ['1 Error']);
   });
+
   it('shows plural error message', () => {
-    const component = render(<ErrorCountSummaryItemBadge count={2} />);
+    const component = renderWithTheme(<ErrorCountSummaryItemBadge count={2} />);
     expectTextsInDocument(component, ['2 Errors']);
   });
 });
diff --git a/x-pack/plugins/apm/public/components/shared/Summary/index.tsx b/x-pack/plugins/apm/public/components/shared/Summary/index.tsx
index ce6935d1858aa..55ac525d71192 100644
--- a/x-pack/plugins/apm/public/components/shared/Summary/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Summary/index.tsx
@@ -6,7 +6,6 @@
 import React from 'react';
 import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
 import styled from 'styled-components';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import { px, units } from '../../../../public/style/variables';
 import { Maybe } from '../../../../typings/common';
 
@@ -14,12 +13,9 @@ interface Props {
   items: Array<Maybe<React.ReactElement>>;
 }
 
-// TODO: Light/Dark theme (@see https://github.com/elastic/kibana/issues/44840)
-const theme = euiLightVars;
-
 const Item = styled(EuiFlexItem)`
   flex-wrap: nowrap;
-  border-right: 1px solid ${theme.euiColorLightShade};
+  border-right: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
   padding-right: ${px(units.half)};
   flex-flow: row nowrap;
   line-height: 1.5;
diff --git a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/AnnotationsPlot.tsx b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/AnnotationsPlot.tsx
index d95a4e4186287..ed57692d70a65 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/AnnotationsPlot.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/AnnotationsPlot.tsx
@@ -5,7 +5,6 @@
  */
 import React from 'react';
 import { VerticalGridLines } from 'react-vis';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import {
   EuiIcon,
   EuiToolTip,
@@ -14,6 +13,7 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { useTheme } from '../../../../hooks/useTheme';
 import { Maybe } from '../../../../../typings/common';
 import { Annotation } from '../../../../../common/annotations';
 import { PlotValues, SharedPlot } from './plotUtils';
@@ -26,16 +26,15 @@ interface Props {
   overlay: Maybe<HTMLElement>;
 }
 
-const style = {
-  stroke: theme.euiColorSecondary,
-  strokeDasharray: 'none',
-};
-
-export function AnnotationsPlot(props: Props) {
-  const { plotValues, annotations } = props;
-
+export const AnnotationsPlot = ({ plotValues, annotations }: Props) => {
+  const theme = useTheme();
   const tickValues = annotations.map((annotation) => annotation['@timestamp']);
 
+  const style = {
+    stroke: theme.eui.euiColorSecondary,
+    strokeDasharray: 'none',
+  };
+
   return (
     <>
       <SharedPlot plotValues={plotValues}>
@@ -65,10 +64,10 @@ export function AnnotationsPlot(props: Props) {
               </EuiFlexGroup>
             }
           >
-            <EuiIcon type="dot" color={theme.euiColorSecondary} />
+            <EuiIcon type="dot" color={theme.eui.euiColorSecondary} />
           </EuiToolTip>
         </div>
       ))}
     </>
   );
-}
+};
diff --git a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/Legends.js b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/Legends.js
index 87ab81e738eb8..2c4cc185dac7e 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/Legends.js
+++ b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/Legends.js
@@ -4,10 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import PropTypes from 'prop-types';
 import React from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Legend } from '../Legend';
+import { useTheme } from '../../../../hooks/useTheme';
 import {
   unit,
   units,
@@ -15,7 +16,6 @@ import {
   px,
   truncate,
 } from '../../../../style/variables';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import { EuiIcon } from '@elastic/eui';
 
@@ -36,7 +36,7 @@ const Container = styled.div`
 
 const LegendContent = styled.span`
   white-space: nowrap;
-  color: ${theme.euiColorMediumShade};
+  color: ${({ theme }) => theme.eui.euiColorMediumShade};
   display: flex;
 `;
 
@@ -47,13 +47,13 @@ const TruncatedLabel = styled.span`
 
 const SeriesValue = styled.span`
   margin-left: ${px(units.quarter)};
-  color: ${theme.euiColorFullShade};
+  color: ${({ theme }) => theme.eui.euiColorFullShade};
   display: inline-block;
 `;
 
 const MoreSeriesContainer = styled.div`
   font-size: ${fontSizes.small};
-  color: ${theme.euiColorMediumShade};
+  color: ${({ theme }) => theme.eui.euiColorMediumShade};
 `;
 
 function MoreSeries({ hiddenSeriesCount }) {
@@ -80,6 +80,8 @@ export default function Legends({
   showAnnotations,
   onAnnotationsToggle,
 }) {
+  const theme = useTheme();
+
   if (noHits && !hasAnnotations) {
     return null;
   }
@@ -90,6 +92,7 @@ export default function Legends({
         if (serie.hideLegend) {
           return null;
         }
+
         const text = (
           <LegendContent>
             {truncateLegends ? (
@@ -131,11 +134,11 @@ export default function Legends({
           }
           indicator={() => (
             <div style={{ marginRight: px(units.quarter) }}>
-              <EuiIcon type="annotation" color={theme.euiColorSecondary} />
+              <EuiIcon type="annotation" color={theme.eui.euiColorSecondary} />
             </div>
           )}
           disabled={!showAnnotations}
-          color={theme.euiColorSecondary}
+          color={theme.eui.euiColorSecondary}
         />
       )}
       <MoreSeries hiddenSeriesCount={hiddenSeriesCount} />
diff --git a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/CustomPlot.test.js b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/CustomPlot.test.js
index ad1d73f2b766b..d2e237b086bbc 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/CustomPlot.test.js
+++ b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/CustomPlot.test.js
@@ -4,10 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
 import moment from 'moment';
 import React from 'react';
-import { toJson } from '../../../../../utils/testHelpers';
+import { toJson, mountWithTheme } from '../../../../../utils/testHelpers';
 import { InnerCustomPlot } from '../index';
 import responseWithData from './responseWithData.json';
 import VoronoiPlot from '../VoronoiPlot';
@@ -30,7 +29,7 @@ describe('when response has data', () => {
     onHover = jest.fn();
     onMouseLeave = jest.fn();
     onSelectionEnd = jest.fn();
-    wrapper = mount(
+    wrapper = mountWithTheme(
       <InnerCustomPlot
         series={series}
         onHover={onHover}
@@ -274,7 +273,7 @@ describe('when response has no data', () => {
   beforeEach(() => {
     const series = getEmptySeries(1451606400000, 1451610000000);
 
-    wrapper = mount(
+    wrapper = mountWithTheme(
       <InnerCustomPlot
         annotations={annotations}
         series={series}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/Histogram.test.js b/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/Histogram.test.js
index 7eaeecca31b36..41f835fbd5b1a 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/Histogram.test.js
+++ b/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/Histogram.test.js
@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
 
 import d3 from 'd3';
 import { HistogramInner } from '../index';
@@ -14,7 +13,7 @@ import {
   getDurationFormatter,
   asInteger,
 } from '../../../../../utils/formatters';
-import { toJson } from '../../../../../utils/testHelpers';
+import { toJson, mountWithTheme } from '../../../../../utils/testHelpers';
 import { getFormattedBuckets } from '../../../../app/TransactionDetails/Distribution/index';
 
 describe('Histogram', () => {
@@ -26,7 +25,7 @@ describe('Histogram', () => {
     const xMax = d3.max(buckets, (d) => d.x);
     const timeFormatter = getDurationFormatter(xMax);
 
-    wrapper = mount(
+    wrapper = mountWithTheme(
       <HistogramInner
         buckets={buckets}
         bucketSize={response.bucketSize}
@@ -46,10 +45,6 @@ describe('Histogram', () => {
   });
 
   describe('Initially', () => {
-    it('should have default state', () => {
-      expect(wrapper.state()).toEqual({ hoveredBucket: {} });
-    });
-
     it('should have default markup', () => {
       expect(toJson(wrapper)).toMatchSnapshot();
     });
@@ -86,23 +81,6 @@ describe('Histogram', () => {
       expect(tooltips.prop('y')).toEqual(27.5);
     });
 
-    it('should update state with "hoveredBucket"', () => {
-      expect(wrapper.state()).toEqual({
-        hoveredBucket: {
-          samples: [
-            {
-              transactionId: '99c50a5b-44b4-4289-a3d1-a2815d128192',
-            },
-          ],
-          style: { cursor: 'pointer' },
-          xCenter: 869010,
-          x0: 811076,
-          x: 926944,
-          y: 49,
-        },
-      });
-    });
-
     it('should have correct markup for tooltip', () => {
       const tooltips = wrapper.find('Tooltip');
       expect(toJson(tooltips)).toMatchSnapshot();
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Legend/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/Legend/index.tsx
index 1626c62bfdf40..a00c46bcf324d 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Legend/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Legend/index.tsx
@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import React from 'react';
 import styled from 'styled-components';
+import { useTheme } from '../../../../hooks/useTheme';
 import { fontSizes, px, units } from '../../../../style/variables';
 
 export enum Shape {
@@ -20,11 +20,12 @@ interface ContainerProps {
   clickable: boolean;
   disabled: boolean;
 }
+
 const Container = styled.div<ContainerProps>`
   display: flex;
   align-items: center;
   font-size: ${(props) => props.fontSize};
-  color: ${theme.euiColorDarkShade};
+  color: ${({ theme }) => theme.eui.euiColorDarkShade};
   cursor: ${(props) => (props.clickable ? 'pointer' : 'initial')};
   opacity: ${(props) => (props.disabled ? 0.4 : 1)};
   user-select: none;
@@ -36,6 +37,7 @@ interface IndicatorProps {
   shape: Shape;
   withMargin: boolean;
 }
+
 export const Indicator = styled.span<IndicatorProps>`
   width: ${(props) => px(props.radius)};
   height: ${(props) => px(props.radius)};
@@ -61,7 +63,7 @@ interface Props {
 export const Legend: React.FC<Props> = ({
   onClick,
   text,
-  color = theme.euiColorVis1,
+  color,
   fontSize = fontSizes.small,
   radius = units.minus - 1,
   disabled = false,
@@ -70,6 +72,9 @@ export const Legend: React.FC<Props> = ({
   indicator,
   ...rest
 }) => {
+  const theme = useTheme();
+  const indicatorColor = color || theme.eui.euiColorVis1;
+
   return (
     <Container
       onClick={onClick}
@@ -82,7 +87,7 @@ export const Legend: React.FC<Props> = ({
         indicator()
       ) : (
         <Indicator
-          color={color}
+          color={indicatorColor}
           radius={radius}
           shape={shape}
           withMargin={!!text}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx
index 30887abd9cb9b..072b5b5bc7a96 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx
@@ -8,6 +8,7 @@ import { shallow } from 'enzyme';
 import React from 'react';
 import { AgentMarker } from './AgentMarker';
 import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
+import { EuiThemeProvider } from '../../../../../../../observability/public';
 
 describe('AgentMarker', () => {
   const mark = {
@@ -16,8 +17,14 @@ describe('AgentMarker', () => {
     type: 'agentMark',
     verticalLine: true,
   } as AgentMark;
+
   it('renders', () => {
-    const component = shallow(<AgentMarker mark={mark} />);
+    const component = shallow(
+      <EuiThemeProvider>
+        <AgentMarker mark={mark} />
+      </EuiThemeProvider>
+    );
+
     expect(component).toMatchSnapshot();
   });
 });
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx
index ffdbfe6cce7ec..d2dea39b83d82 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx
@@ -4,22 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiToolTip } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import React from 'react';
+import { EuiToolTip } from '@elastic/eui';
 import styled from 'styled-components';
+import { useTheme } from '../../../../../hooks/useTheme';
 import { px, units } from '../../../../../style/variables';
 import { asDuration } from '../../../../../utils/formatters';
 import { Legend } from '../../Legend';
 import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
 
 const NameContainer = styled.div`
-  border-bottom: 1px solid ${theme.euiColorMediumShade};
+  border-bottom: 1px solid ${({ theme }) => theme.eui.euiColorMediumShade};
   padding-bottom: ${px(units.half)};
 `;
 
 const TimeContainer = styled.div`
-  color: ${theme.euiColorMediumShade};
+  color: ${({ theme }) => theme.eui.euiColorMediumShade};
   padding-top: ${px(units.half)};
 `;
 
@@ -28,6 +28,8 @@ interface Props {
 }
 
 export const AgentMarker: React.FC<Props> = ({ mark }) => {
+  const theme = useTheme();
+
   return (
     <>
       <EuiToolTip
@@ -40,7 +42,7 @@ export const AgentMarker: React.FC<Props> = ({ mark }) => {
           </div>
         }
       >
-        <Legend clickable color={theme.euiColorMediumShade} />
+        <Legend clickable color={theme.eui.euiColorMediumShade} />
       </EuiToolTip>
     </>
   );
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx
index 7dc68910c6bed..922796afd39bf 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx
@@ -7,9 +7,12 @@
 import React from 'react';
 import { ErrorMarker } from './ErrorMarker';
 import { ErrorMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
-import { render, fireEvent } from '@testing-library/react';
+import { fireEvent } from '@testing-library/react';
 import { act } from '@testing-library/react-hooks';
-import { expectTextsInDocument } from '../../../../../utils/testHelpers';
+import {
+  expectTextsInDocument,
+  renderWithTheme,
+} from '../../../../../utils/testHelpers';
 
 describe('ErrorMarker', () => {
   const mark = ({
@@ -33,7 +36,7 @@ describe('ErrorMarker', () => {
   } as unknown) as ErrorMark;
 
   function openPopover(errorMark: ErrorMark) {
-    const component = render(<ErrorMarker mark={errorMark} />);
+    const component = renderWithTheme(<ErrorMarker mark={errorMark} />);
     act(() => {
       fireEvent.click(component.getByTestId('popover'));
     });
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx
index e3310c273a55b..d8e056deb769a 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx
@@ -4,10 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiPopover, EuiText } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import React, { useState } from 'react';
+import { EuiPopover, EuiText } from '@elastic/eui';
 import styled from 'styled-components';
+import { useTheme } from '../../../../../hooks/useTheme';
 import {
   TRACE_ID,
   TRANSACTION_ID,
@@ -54,6 +54,7 @@ function truncateMessage(errorMessage?: string) {
 }
 
 export const ErrorMarker: React.FC<Props> = ({ mark }) => {
+  const theme = useTheme();
   const { urlParams } = useUrlParams();
   const [isPopoverOpen, showPopover] = useState(false);
 
@@ -63,7 +64,7 @@ export const ErrorMarker: React.FC<Props> = ({ mark }) => {
     <Button
       data-test-subj="popover"
       clickable
-      color={theme.euiColorDanger}
+      color={theme.eui.euiColorDanger}
       shape={Shape.square}
       onClick={togglePopover}
     />
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__snapshots__/AgentMarker.test.tsx.snap b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__snapshots__/AgentMarker.test.tsx.snap
index 6ef402c7481b2..005510a6dafcc 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__snapshots__/AgentMarker.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__snapshots__/AgentMarker.test.tsx.snap
@@ -1,26 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AgentMarker renders 1`] = `
-<Fragment>
-  <EuiToolTip
-    content={
-      <div>
-        <ForwardRef(styled.div)>
-          agent
-        </ForwardRef(styled.div)>
-        <ForwardRef(styled.div)>
-          1,000 μs
-        </ForwardRef(styled.div)>
-      </div>
+<ThemeProvider
+  theme={[Function]}
+>
+  <AgentMarker
+    mark={
+      Object {
+        "id": "agent",
+        "offset": 1000,
+        "type": "agentMark",
+        "verticalLine": true,
+      }
     }
-    delay="regular"
-    id="agent"
-    position="top"
-  >
-    <Legend
-      clickable={true}
-      color="#98a2b3"
-    />
-  </EuiToolTip>
-</Fragment>
+  />
+</ThemeProvider>
 `;
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Timeline.test.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Timeline.test.tsx
index a0dffa571003e..03ddc3f656821 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Timeline.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Timeline.test.tsx
@@ -4,10 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
 import React from 'react';
 import { StickyContainer } from 'react-sticky';
-import { mockMoment, toJson } from '../../../../utils/testHelpers';
+import {
+  mountWithTheme,
+  mockMoment,
+  toJson,
+} from '../../../../utils/testHelpers';
 import { Timeline } from '.';
 
 describe('Timeline', () => {
@@ -50,7 +53,7 @@ describe('Timeline', () => {
       ],
     };
 
-    const wrapper = mount(
+    const wrapper = mountWithTheme(
       <StickyContainer>
         <Timeline {...props} />
       </StickyContainer>
@@ -74,7 +77,7 @@ describe('Timeline', () => {
     };
 
     const mountTimeline = () =>
-      mount(
+      mountWithTheme(
         <StickyContainer>
           <Timeline {...props} />
         </StickyContainer>
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx
index b6d2d8218c24d..a9c36634381d4 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx
@@ -4,11 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import theme from '@elastic/eui/dist/eui_theme_light.json';
-import { inRange } from 'lodash';
 import React, { ReactNode } from 'react';
+import { inRange } from 'lodash';
 import { Sticky } from 'react-sticky';
 import { XAxis, XYPlot } from 'react-vis';
+import { useTheme } from '../../../../hooks/useTheme';
 import { px } from '../../../../style/variables';
 import { getDurationFormatter } from '../../../../utils/formatters';
 import { Mark } from './';
@@ -42,11 +42,12 @@ interface TimelineAxisProps {
   topTraceDuration: number;
 }
 
-export function TimelineAxis({
+export const TimelineAxis = ({
   plotValues,
   marks = [],
   topTraceDuration,
-}: TimelineAxisProps) {
+}: TimelineAxisProps) => {
+  const theme = useTheme();
   const { margins, tickValues, width, xDomain, xMax, xScale } = plotValues;
   const tickFormatter = getDurationFormatter(xMax);
   const xAxisTickValues = getXAxisTickValues(tickValues, topTraceDuration);
@@ -59,7 +60,7 @@ export function TimelineAxis({
           <div
             style={{
               position: 'absolute',
-              borderBottom: `1px solid ${theme.euiColorMediumShade}`,
+              borderBottom: `1px solid ${theme.eui.euiColorMediumShade}`,
               height: px(margins.top),
               zIndex: 2,
               width: '100%',
@@ -85,7 +86,7 @@ export function TimelineAxis({
                 tickFormat={(time?: number) => tickFormatter(time).formatted}
                 tickPadding={20}
                 style={{
-                  text: { fill: theme.euiColorDarkShade },
+                  text: { fill: theme.eui.euiColorDarkShade },
                 }}
               />
 
@@ -106,4 +107,4 @@ export function TimelineAxis({
       }}
     </Sticky>
   );
-}
+};
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx
index 19d9eb48e0b37..0753cb318d3a4 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx
@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import theme from '@elastic/eui/dist/eui_theme_light.json';
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { VerticalGridLines, XYPlot } from 'react-vis';
+import { useTheme } from '../../../../hooks/useTheme';
 import { Mark } from '../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks';
 import { PlotValues } from './plotUtils';
 
@@ -16,54 +16,51 @@ interface VerticalLinesProps {
   topTraceDuration: number;
 }
 
-export class VerticalLines extends PureComponent<VerticalLinesProps> {
-  render() {
-    const { topTraceDuration, marks = [] } = this.props;
-    const {
-      width,
-      height,
-      margins,
-      xDomain,
-      tickValues,
-    } = this.props.plotValues;
+export const VerticalLines = ({
+  topTraceDuration,
+  plotValues,
+  marks = [],
+}: VerticalLinesProps) => {
+  const { width, height, margins, xDomain, tickValues } = plotValues;
 
-    const markTimes = marks
-      .filter((mark) => mark.verticalLine)
-      .map(({ offset }) => offset);
+  const markTimes = marks
+    .filter((mark) => mark.verticalLine)
+    .map(({ offset }) => offset);
 
-    return (
-      <div
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-        }}
+  const theme = useTheme();
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+      }}
+    >
+      <XYPlot
+        dontCheckIfEmpty
+        width={width}
+        height={height + margins.top}
+        margin={margins}
+        xDomain={xDomain}
       >
-        <XYPlot
-          dontCheckIfEmpty
-          width={width}
-          height={height + margins.top}
-          margin={margins}
-          xDomain={xDomain}
-        >
-          <VerticalGridLines
-            tickValues={tickValues}
-            style={{ stroke: theme.euiColorLightestShade }}
-          />
+        <VerticalGridLines
+          tickValues={tickValues}
+          style={{ stroke: theme.eui.euiColorLightestShade }}
+        />
 
+        <VerticalGridLines
+          tickValues={markTimes}
+          style={{ stroke: theme.eui.euiColorMediumShade }}
+        />
+
+        {topTraceDuration > 0 && (
           <VerticalGridLines
-            tickValues={markTimes}
-            style={{ stroke: theme.euiColorMediumShade }}
+            tickValues={[topTraceDuration]}
+            style={{ stroke: theme.eui.euiColorMediumShade }}
           />
-
-          {topTraceDuration > 0 && (
-            <VerticalGridLines
-              tickValues={[topTraceDuration]}
-              style={{ stroke: theme.euiColorMediumShade }}
-            />
-          )}
-        </XYPlot>
-      </div>
-    );
-  }
-}
+        )}
+      </XYPlot>
+    </div>
+  );
+};
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Tooltip/index.js b/x-pack/plugins/apm/public/components/shared/charts/Tooltip/index.js
index 6af7a7691974c..7ee0c6280526b 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Tooltip/index.js
+++ b/x-pack/plugins/apm/public/components/shared/charts/Tooltip/index.js
@@ -18,25 +18,24 @@ import {
   fontSizes,
 } from '../../../../style/variables';
 import { Legend } from '../Legend';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { asAbsoluteDateTime } from '../../../../utils/formatters';
 
 const TooltipElm = styled.div`
   margin: 0 ${px(unit)};
   transform: translateY(-50%);
-  border: 1px solid ${theme.euiColorLightShade};
-  background: ${theme.euiColorEmptyShade};
+  border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
+  background: ${({ theme }) => theme.eui.euiColorEmptyShade};
   border-radius: ${borderRadius};
   font-size: ${fontSize};
-  color: ${theme.euiColorFullShade};
+  color: ${({ theme }) => theme.eui.euiColorFullShade};
 `;
 
 const Header = styled.div`
-  background: ${theme.euiColorLightestShade};
-  border-bottom: 1px solid ${theme.euiColorLightShade};
+  background: ${({ theme }) => theme.eui.euiColorLightestShade};
+  border-bottom: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
   border-radius: ${borderRadius} ${borderRadius} 0 0;
   padding: ${px(units.half)};
-  color: ${theme.euiColorMediumShade};
+  color: ${({ theme }) => theme.eui.euiColorMediumShade};
 `;
 
 const Content = styled.div`
@@ -46,7 +45,7 @@ const Content = styled.div`
 `;
 
 const Footer = styled.div`
-  color: ${theme.euiColorMediumShade};
+  color: ${({ theme }) => theme.eui.euiColorMediumShade};
   margin: ${px(units.half)};
   font-size: ${fontSizes.small};
 `;
@@ -59,13 +58,13 @@ const LegendContainer = styled.div`
 `;
 
 const LegendGray = styled(Legend)`
-  color: ${theme.euiColorMediumShade};
+  color: ${({ theme }) => theme.eui.euiColorMediumShade};
   padding-bottom: 0;
   padding-right: ${px(units.half)};
 `;
 
 const Value = styled.div`
-  color: ${theme.euiColorDarkShade};
+  color: ${({ theme }) => theme.eui.euiColorDarkShade};
   font-size: ${fontSize};
 `;
 
diff --git a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/index.tsx
index ebd6061831f4e..a9a9343dde6be 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/index.tsx
@@ -13,8 +13,9 @@ import React, {
 } from 'react';
 import { Map, NavigationControl, Popup } from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import { shade, tint } from 'polished';
+import { EuiTheme } from '../../../../../../../observability/public';
+import { useTheme } from '../../../../../hooks/useTheme';
 import { ChoroplethToolTip } from './ChoroplethToolTip';
 
 interface ChoroplethItem {
@@ -47,8 +48,8 @@ const MAPBOX_STYLE =
 const GEOJSON_SOURCE =
   'https://vector.maps.elastic.co/files/world_countries_v1.geo.json?elastic_tile_service_tos=agree&my_app_name=ems-landing&my_app_version=7.2.0';
 
-export function getProgressionColor(scale: number) {
-  const baseColor = euiLightVars.euiColorPrimary;
+export function getProgressionColor(scale: number, theme: EuiTheme) {
+  const baseColor = theme.eui.euiColorPrimary;
   const adjustedScale = 0.75 * scale + 0.05; // prevents pure black & white as min/max colors.
   if (adjustedScale < 0.5) {
     return tint(adjustedScale * 2, baseColor);
@@ -66,8 +67,8 @@ const getMax = (items: ChoroplethItem[]) =>
   Math.max(...items.map((item) => item.value));
 
 export const ChoroplethMap: React.FC<Props> = (props) => {
+  const theme = useTheme();
   const { items } = props;
-
   const containerRef = useRef<HTMLDivElement>(null);
   const [map, setMap] = useState<Map | null>(null);
   const popupRef = useRef<Popup | null>(null);
@@ -215,7 +216,7 @@ export const ChoroplethMap: React.FC<Props> = (props) => {
 
     const stops = items.map(({ key, value }) => [
       key,
-      getProgressionColor(getValueScale(value)),
+      getProgressionColor(getValueScale(value), theme),
     ]);
 
     const fillColor: mapboxgl.FillPaint['fill-color'] = {
@@ -238,7 +239,7 @@ export const ChoroplethMap: React.FC<Props> = (props) => {
       },
       symbolLayer ? symbolLayer.id : undefined
     );
-  }, [map, items, getValueScale]);
+  }, [map, items, theme, getValueScale]);
 
   // side effect to only render the Popup when hovering a region with a matching item
   useEffect(() => {
diff --git a/x-pack/plugins/apm/public/hooks/useTheme.tsx b/x-pack/plugins/apm/public/hooks/useTheme.tsx
new file mode 100644
index 0000000000000..e372a764a9505
--- /dev/null
+++ b/x-pack/plugins/apm/public/hooks/useTheme.tsx
@@ -0,0 +1,14 @@
+/*
+ * 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 { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+import { EuiTheme } from '../../../observability/public';
+
+export function useTheme(): EuiTheme {
+  const theme = useContext(ThemeContext);
+  return theme;
+}
diff --git a/x-pack/plugins/apm/public/utils/testHelpers.tsx b/x-pack/plugins/apm/public/utils/testHelpers.tsx
index 2e833c231ecc1..e660ccbf17d3c 100644
--- a/x-pack/plugins/apm/public/utils/testHelpers.tsx
+++ b/x-pack/plugins/apm/public/utils/testHelpers.tsx
@@ -6,12 +6,12 @@
 
 /* global jest */
 
-import { ReactWrapper } from 'enzyme';
+import React from 'react';
+import { ReactWrapper, mount, MountRendererProps } from 'enzyme';
 import enzymeToJson from 'enzyme-to-json';
 import { Location } from 'history';
 import moment from 'moment';
 import { Moment } from 'moment-timezone';
-import React from 'react';
 import { render, waitForElement } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { MemoryRouter } from 'react-router-dom';
@@ -19,6 +19,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { APMConfig } from '../../server';
 import { LocationProvider } from '../context/LocationContext';
 import { PromiseReturnType } from '../../typings/common';
+import { EuiThemeProvider } from '../../../observability/public';
 import {
   ESFilter,
   ESSearchResponse,
@@ -181,3 +182,27 @@ export async function inspectSearchParams(
 }
 
 export type SearchParamsMock = PromiseReturnType<typeof inspectSearchParams>;
+
+export function renderWithTheme(
+  component: React.ReactNode,
+  params?: any,
+  { darkMode = false } = {}
+) {
+  return render(
+    <EuiThemeProvider darkMode={darkMode}>{component}</EuiThemeProvider>,
+    params
+  );
+}
+
+export function mountWithTheme(
+  tree: React.ReactElement<any>,
+  { darkMode = false } = {}
+) {
+  const WrappingThemeProvider = (props: any) => (
+    <EuiThemeProvider darkMode={darkMode}>{props.children}</EuiThemeProvider>
+  );
+
+  return mount(tree, {
+    wrappingComponent: WrappingThemeProvider,
+  } as MountRendererProps);
+}

From af7e2d24002729cc07b6a62d43b2d506e922b14e Mon Sep 17 00:00:00 2001
From: Kevin Logan <56395104+kevinlog@users.noreply.github.com>
Date: Fri, 19 Jun 2020 09:23:49 -0400
Subject: [PATCH 56/63] [Endpoint] add policy empty state (#69449)

---
 .../pages/policy/view/policy_list.test.tsx    |  12 +-
 .../pages/policy/view/policy_list.tsx         | 168 ++++++++++++++++--
 .../apps/endpoint/policy_list.ts              |  53 +++---
 .../page_objects/policy_page.ts               |   8 +
 4 files changed, 196 insertions(+), 45 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.test.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.test.tsx
index a2901ab6bfe5c..63a5cd0d67ae6 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.test.tsx
@@ -23,12 +23,18 @@ describe('when on the policies page', () => {
     render = () => mockedContext.render(<PolicyList />);
   });
 
-  it('should show a table', async () => {
+  it('should show the empty state', async () => {
     const renderResult = render();
-    const table = await renderResult.findByTestId('policyTable');
+    const table = await renderResult.findByTestId('emptyPolicyTable');
     expect(table).not.toBeNull();
   });
 
+  it('should display the onboarding steps', async () => {
+    const renderResult = render();
+    const onboardingSteps = await renderResult.findByTestId('onboardingSteps');
+    expect(onboardingSteps).not.toBeNull();
+  });
+
   describe('when list data loads', () => {
     let firstPolicyID: string;
     beforeEach(() => {
@@ -50,11 +56,13 @@ describe('when on the policies page', () => {
         });
       });
     });
+
     it('should display rows in the table', async () => {
       const renderResult = render();
       const rows = await renderResult.findAllByRole('row');
       expect(rows).toHaveLength(4);
     });
+
     it('should display policy name value as a link', async () => {
       const renderResult = render();
       const policyNameLink = (await renderResult.findAllByTestId('policyNameLink'))[0];
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
index 090a16a763664..2d4abd6de0e42 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useCallback, useEffect, useMemo, CSSProperties, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, CSSProperties, useState, MouseEvent } from 'react';
 import {
   EuiBasicTable,
   EuiText,
@@ -22,6 +22,9 @@ import {
   EuiCallOut,
   EuiSpacer,
   EuiButton,
+  EuiSteps,
+  EuiTitle,
+  EuiProgress,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -61,6 +64,10 @@ const NO_WRAP_TRUNCATE_STYLE: CSSProperties = Object.freeze({
   whiteSpace: 'nowrap',
 });
 
+const TEXT_ALIGN_CENTER: CSSProperties = Object.freeze({
+  textAlign: 'center',
+});
+
 const DangerEuiContextMenuItem = styled(EuiContextMenuItem)`
   color: ${(props) => props.theme.eui.textColors.danger};
 `;
@@ -410,24 +417,50 @@ export const PolicyList = React.memo(() => {
           </EuiButton>
         }
         bodyHeader={
-          <EuiText color="subdued" data-test-subj="policyTotalCount">
-            <FormattedMessage
-              id="xpack.securitySolution.endpoint.policyList.viewTitleTotalCount"
-              defaultMessage="{totalItemCount, plural, one {# Policy} other {# Policies}}"
-              values={{ totalItemCount }}
-            />
-          </EuiText>
+          policyItems &&
+          policyItems.length > 0 && (
+            <EuiText color="subdued" data-test-subj="policyTotalCount">
+              <FormattedMessage
+                id="xpack.securitySolution.endpoint.policyList.viewTitleTotalCount"
+                defaultMessage="{totalItemCount, plural, one {# Policy} other {# Policies}}"
+                values={{ totalItemCount }}
+              />
+            </EuiText>
+          )
         }
       >
-        <EuiBasicTable
-          items={useMemo(() => [...policyItems], [policyItems])}
-          columns={columns}
-          loading={loading}
-          pagination={paginationSetup}
-          onChange={handleTableChange}
-          data-test-subj="policyTable"
-          hasActions={false}
-        />
+        {useMemo(() => {
+          return (
+            <>
+              {policyItems && policyItems.length > 0 ? (
+                <EuiBasicTable
+                  items={[...policyItems]}
+                  columns={columns}
+                  loading={loading}
+                  pagination={paginationSetup}
+                  onChange={handleTableChange}
+                  data-test-subj="policyTable"
+                  hasActions={false}
+                />
+              ) : (
+                <EmptyPolicyTable
+                  loading={loading}
+                  onActionClick={handleCreatePolicyClick}
+                  actionDisabled={isFetchingPackageInfo}
+                  dataTestSubj="emptyPolicyTable"
+                />
+              )}
+            </>
+          );
+        }, [
+          policyItems,
+          loading,
+          isFetchingPackageInfo,
+          columns,
+          handleCreatePolicyClick,
+          handleTableChange,
+          paginationSetup,
+        ])}
         <SpyRoute />
       </ManagementPageView>
     </>
@@ -436,6 +469,107 @@ export const PolicyList = React.memo(() => {
 
 PolicyList.displayName = 'PolicyList';
 
+const EmptyPolicyTable = React.memo<{
+  loading: boolean;
+  onActionClick: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+  actionDisabled: boolean;
+  dataTestSubj: string;
+}>(({ loading, onActionClick, actionDisabled, dataTestSubj }) => {
+  const policySteps = useMemo(
+    () => [
+      {
+        title: i18n.translate('xpack.securitySolution.endpoint.policyList.stepOneTitle', {
+          defaultMessage: 'Head over to Ingest Manager.',
+        }),
+        children: (
+          <EuiText color="subdued" size="xs">
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.policyList.stepOne"
+              defaultMessage="Here, you’ll add the Elastic Endpoint Security Integration to your Agent Configuration."
+            />
+          </EuiText>
+        ),
+      },
+      {
+        title: i18n.translate('xpack.securitySolution.endpoint.policyList.stepTwoTitle', {
+          defaultMessage: 'We’ll create a recommended security policy for you.',
+        }),
+        children: (
+          <EuiText color="subdued" size="xs">
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.policyList.stepTwo"
+              defaultMessage="You can edit this policy in the “Policies” tab after you’ve added the Elastic Endpoint integration."
+            />
+          </EuiText>
+        ),
+      },
+      {
+        title: i18n.translate('xpack.securitySolution.endpoint.policyList.stepThreeTitle', {
+          defaultMessage: 'Enroll your agents through Fleet.',
+        }),
+        children: (
+          <EuiText color="subdued" size="xs">
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.policyList.stepThree"
+              defaultMessage="If you haven’t already, enroll your agents through Fleet using the same agent configuration."
+            />
+          </EuiText>
+        ),
+      },
+    ],
+    []
+  );
+  return (
+    <div data-test-subj={dataTestSubj}>
+      {loading ? (
+        <EuiProgress size="xs" color="accent" className="essentialAnimation" />
+      ) : (
+        <>
+          <EuiSpacer size="xxl" />
+          <EuiTitle size="m">
+            <h2 style={TEXT_ALIGN_CENTER}>
+              <FormattedMessage
+                id="xpack.securitySolution.endpoint.policyList.noPoliciesPrompt"
+                defaultMessage="Looks like you're not using Elastic Endpoint"
+              />
+            </h2>
+          </EuiTitle>
+          <EuiSpacer size="xxl" />
+          <EuiText textAlign="center" color="subdued" size="s">
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.policyList.noPoliciesInstructions"
+              defaultMessage="Elastic Endpoint Security gives you the power to keep your endpoints safe from attack, as well as unparalleled visibility into any threat in your environment."
+            />
+          </EuiText>
+          <EuiSpacer size="xxl" />
+          <EuiFlexGroup alignItems="center" justifyContent="center">
+            <EuiFlexItem grow={false}>
+              <EuiSteps steps={policySteps} data-test-subj={'onboardingSteps'} />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiFlexGroup alignItems="center" justifyContent="center">
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                fill
+                onClick={onActionClick}
+                isDisabled={actionDisabled}
+                data-test-subj="onboardingStartButton"
+              >
+                <FormattedMessage
+                  id="xpack.securitySolution.endpoint.policyList.emptyCreateNewButton"
+                  defaultMessage="Click here to get started"
+                />
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      )}
+    </div>
+  );
+});
+
+EmptyPolicyTable.displayName = 'EmptyPolicyTable';
+
 const ConfirmDelete = React.memo<{
   hostCount: number;
   isDeleting: boolean;
diff --git a/x-pack/test/security_solution_endpoint/apps/endpoint/policy_list.ts b/x-pack/test/security_solution_endpoint/apps/endpoint/policy_list.ts
index 1f5b6889f8fed..941a100416740 100644
--- a/x-pack/test/security_solution_endpoint/apps/endpoint/policy_list.ts
+++ b/x-pack/test/security_solution_endpoint/apps/endpoint/policy_list.ts
@@ -36,29 +36,8 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
       const createButtonTitle = await testSubjects.getVisibleText('headerCreateNewPolicyButton');
       expect(createButtonTitle).to.equal('Create new policy');
     });
-    it('shows policy count total', async () => {
-      const policyTotal = await testSubjects.getVisibleText('policyTotalCount');
-      expect(policyTotal).to.equal('0 Policies');
-    });
-    it('has correct table headers', async () => {
-      const allHeaderCells = await pageObjects.endpointPageUtils.tableHeaderVisibleText(
-        'policyTable'
-      );
-      expect(allHeaderCells).to.eql([
-        'Policy Name',
-        'Created By',
-        'Created Date',
-        'Last Updated By',
-        'Last Updated',
-        'Version',
-        'Actions',
-      ]);
-    });
-    it('should show empty table results message', async () => {
-      const [, [noItemsFoundMessage]] = await pageObjects.endpointPageUtils.tableData(
-        'policyTable'
-      );
-      expect(noItemsFoundMessage).to.equal('No items found');
+    it('shows empty state', async () => {
+      await testSubjects.existOrFail('emptyPolicyTable');
     });
 
     describe('and policies exists', () => {
@@ -76,6 +55,21 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         }
       });
 
+      it('has correct table headers', async () => {
+        const allHeaderCells = await pageObjects.endpointPageUtils.tableHeaderVisibleText(
+          'policyTable'
+        );
+        expect(allHeaderCells).to.eql([
+          'Policy Name',
+          'Created By',
+          'Created Date',
+          'Last Updated By',
+          'Last Updated',
+          'Version',
+          'Actions',
+        ]);
+      });
+
       it('should show policy on the list', async () => {
         const [, policyRow] = await pageObjects.endpointPageUtils.tableData('policyTable');
         // Validate row data with the exception of the Date columns - since those are initially
@@ -106,9 +100,8 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         await pageObjects.policy.launchAndFindDeleteModal();
         await testSubjects.existOrFail('policyListDeleteModal');
         await pageObjects.common.clickConfirmOnModal();
-        await pageObjects.endpoint.waitForTableToNotHaveData('policyTable');
-        const policyTotal = await testSubjects.getVisibleText('policyTotalCount');
-        expect(policyTotal).to.equal('0 Policies');
+        const emptyPolicyTable = await testSubjects.find('emptyPolicyTable');
+        expect(emptyPolicyTable).not.to.be(null);
       });
     });
 
@@ -148,5 +141,13 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         await policyTestResources.deletePolicyByName(newPolicyName);
       });
     });
+
+    describe('and user clicks on page header create button', () => {
+      it('should direct users to the ingest management integrations add datasource', async () => {
+        await pageObjects.policy.navigateToPolicyList();
+        await (await pageObjects.policy.findOnboardingStartButton()).click();
+        await pageObjects.ingestManagerCreateDatasource.ensureOnCreatePageOrFail();
+      });
+    });
   });
 }
diff --git a/x-pack/test/security_solution_endpoint/page_objects/policy_page.ts b/x-pack/test/security_solution_endpoint/page_objects/policy_page.ts
index a2b0f9a671039..3ffd7eb032c22 100644
--- a/x-pack/test/security_solution_endpoint/page_objects/policy_page.ts
+++ b/x-pack/test/security_solution_endpoint/page_objects/policy_page.ts
@@ -101,5 +101,13 @@ export function EndpointPolicyPageProvider({ getService, getPageObjects }: FtrPr
     async findDatasourceEndpointCustomConfiguration(onEditPage: boolean = false) {
       return await testSubjects.find(`endpointDatasourceConfig_${onEditPage ? 'edit' : 'create'}`);
     },
+
+    /**
+     * Finds and returns the onboarding button displayed in empty List pages
+     */
+    async findOnboardingStartButton() {
+      await testSubjects.waitForEnabled('onboardingStartButton');
+      return await testSubjects.find('onboardingStartButton');
+    },
   };
 }

From 7ec8836eab7c6597a97d189efeb0e1532b58caf6 Mon Sep 17 00:00:00 2001
From: Jonathan Buttner <56361221+jonathan-buttner@users.noreply.github.com>
Date: Fri, 19 Jun 2020 09:55:18 -0400
Subject: [PATCH 57/63] Fixing resolver alert generation (#69587)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../plugins/security_solution/common/endpoint/generate_data.ts   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/x-pack/plugins/security_solution/common/endpoint/generate_data.ts b/x-pack/plugins/security_solution/common/endpoint/generate_data.ts
index ad140e48d4c64..43ed9b98ad065 100644
--- a/x-pack/plugins/security_solution/common/endpoint/generate_data.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/generate_data.ts
@@ -652,6 +652,7 @@ export class EndpointDocGenerator {
     const ancestry = this.createAlertEventAncestry(
       options.ancestors,
       options.relatedEvents,
+      options.relatedAlerts,
       options.percentWithRelated,
       options.percentTerminated
     );

From 7c7191f79415bc6290f16cd3c4f55da9750b535f Mon Sep 17 00:00:00 2001
From: Jonathan Buttner <56361221+jonathan-buttner@users.noreply.github.com>
Date: Fri, 19 Jun 2020 10:00:08 -0400
Subject: [PATCH 58/63] [Security_Solution][Endpoint] Resolver leverage
 ancestry array for queries  (#69264)

* Adding alerts route

* Adding related alerts generator changes, tests, and script updates

* Fixing missed parameter

* Aligning the AlertEvent and ResolverEvent definition

* Fixing type errors

* Fixing import error

* Adding ancestry functionality in generator

* Creating some tests for ancestry field

* Making progress on the ancestry

* Fixing the ancestry verification

* Fixing existing tests

* Removing unused code and fixing test

* Adding more comments

* Fixing endgame queries

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../common/endpoint/generate_data.test.ts     |  36 +++--
 .../common/endpoint/generate_data.ts          |  48 ++++++-
 .../common/endpoint/models/event.ts           |   7 +
 .../common/endpoint/types.ts                  |  14 ++
 .../endpoint/routes/resolver/utils/fetch.ts   | 133 +++++++++++++-----
 .../api_integration/apis/endpoint/resolver.ts |  99 ++++++++-----
 6 files changed, 248 insertions(+), 89 deletions(-)

diff --git a/x-pack/plugins/security_solution/common/endpoint/generate_data.test.ts b/x-pack/plugins/security_solution/common/endpoint/generate_data.test.ts
index d7b653916970f..4516007580edc 100644
--- a/x-pack/plugins/security_solution/common/endpoint/generate_data.test.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/generate_data.test.ts
@@ -10,6 +10,7 @@ import {
   TreeNode,
   RelatedEventCategory,
   ECSCategory,
+  ANCESTRY_LIMIT,
 } from './generate_data';
 
 interface Node {
@@ -113,6 +114,7 @@ describe('data generator', () => {
         relatedEvents: 0,
         relatedAlerts: 0,
       });
+      tree.ancestry.delete(tree.origin.id);
     });
 
     it('creates an alert for the origin node but no other nodes', () => {
@@ -159,6 +161,30 @@ describe('data generator', () => {
       return (inRelated || inRelatedAlerts || inLifecycle) && event.process.entity_id === node.id;
     };
 
+    const verifyAncestry = (event: Event, genTree: Tree) => {
+      if (event.process.Ext.ancestry.length > 0) {
+        expect(event.process.parent?.entity_id).toBe(event.process.Ext.ancestry[0]);
+      }
+      for (let i = 0; i < event.process.Ext.ancestry.length; i++) {
+        const ancestor = event.process.Ext.ancestry[i];
+        const parent = genTree.children.get(ancestor) || genTree.ancestry.get(ancestor);
+        expect(ancestor).toBe(parent?.lifecycle[0].process.entity_id);
+
+        // the next ancestor should be the grandparent
+        if (i + 1 < event.process.Ext.ancestry.length) {
+          const grandparent = event.process.Ext.ancestry[i + 1];
+          expect(grandparent).toBe(parent?.lifecycle[0].process.parent?.entity_id);
+        }
+      }
+    };
+
+    it('has ancestry array defined', () => {
+      expect(tree.origin.lifecycle[0].process.Ext.ancestry.length).toBe(ANCESTRY_LIMIT);
+      for (const event of tree.allEvents) {
+        verifyAncestry(event, tree);
+      }
+    });
+
     it('has the right related events for each node', () => {
       const checkRelatedEvents = (node: TreeNode) => {
         expect(node.relatedEvents.length).toEqual(4);
@@ -185,8 +211,6 @@ describe('data generator', () => {
       for (const node of tree.children.values()) {
         checkRelatedEvents(node);
       }
-
-      checkRelatedEvents(tree.origin);
     });
 
     it('has the right number of related alerts for each node', () => {
@@ -202,7 +226,8 @@ describe('data generator', () => {
     });
 
     it('has the right number of ancestors', () => {
-      expect(tree.ancestry.size).toEqual(ancestors);
+      // +1 for the origin node
+      expect(tree.ancestry.size).toEqual(ancestors + 1);
     });
 
     it('has the right number of total children', () => {
@@ -239,10 +264,7 @@ describe('data generator', () => {
         const children = tree.children.get(event.process.entity_id);
         if (children) {
           expect(eventInNode(event, children)).toBeTruthy();
-          return;
         }
-
-        expect(eventInNode(event, tree.origin)).toBeTruthy();
       });
     });
 
@@ -260,8 +282,6 @@ describe('data generator', () => {
         total += nodeEventCount(node);
       }
 
-      total += nodeEventCount(tree.origin);
-
       expect(tree.allEvents.length).toEqual(total);
     });
   });
diff --git a/x-pack/plugins/security_solution/common/endpoint/generate_data.ts b/x-pack/plugins/security_solution/common/endpoint/generate_data.ts
index 43ed9b98ad065..ef9e8376827a0 100644
--- a/x-pack/plugins/security_solution/common/endpoint/generate_data.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/generate_data.ts
@@ -18,6 +18,16 @@ import {
 import { factory as policyFactory } from './models/policy_config';
 
 export type Event = AlertEvent | EndpointEvent;
+/**
+ * This value indicates the limit for the size of the ancestry array. The endpoint currently saves up to 20 values
+ * in its messages. To simulate a limit on the array size I'm using 2 here so that we can't rely on there being a large
+ * number like 20. The ancestry array contains entity_ids for the ancestors of a particular process.
+ *
+ * The array has a special format. The entity_ids towards the beginning of the array are closer ancestors and the
+ * values towards the end of the array are more distant ancestors (grandparents). Therefore
+ * ancestry_array[0] == process.parent.entity_id and ancestry_array[1] == process.parent.parent.entity_id
+ */
+export const ANCESTRY_LIMIT: number = 2;
 
 interface EventOptions {
   timestamp?: number;
@@ -26,6 +36,7 @@ interface EventOptions {
   eventType?: string;
   eventCategory?: string | string[];
   processName?: string;
+  ancestry?: string[];
   pid?: number;
   parentPid?: number;
   extensions?: object;
@@ -352,7 +363,8 @@ export class EndpointDocGenerator {
   public generateAlert(
     ts = new Date().getTime(),
     entityID = this.randomString(10),
-    parentEntityID?: string
+    parentEntityID?: string,
+    ancestryArray: string[] = []
   ): AlertEvent {
     return {
       ...this.commonInfo,
@@ -412,6 +424,9 @@ export class EndpointDocGenerator {
           sha256: 'fake sha256',
         },
         Ext: {
+          // simulate a finite ancestry array size, the endpoint limits the ancestry array to 20 entries we'll use
+          // 2 so that the backend can handle that case
+          ancestry: ancestryArray.slice(0, ANCESTRY_LIMIT),
           code_signature: [
             {
               trusted: false,
@@ -532,6 +547,9 @@ export class EndpointDocGenerator {
             }
           : undefined,
         name: processName,
+        // simulate a finite ancestry array size, the endpoint limits the ancestry array to 20 entries we'll use
+        // 2 so that the backend can handle that case
+        Ext: { ancestry: options.ancestry?.slice(0, ANCESTRY_LIMIT) || [] },
       },
       user: {
         domain: this.randomString(10),
@@ -589,9 +607,6 @@ export class EndpointDocGenerator {
       throw Error(`could not find origin while building tree: ${alert.process.entity_id}`);
     }
 
-    // remove the origin node from the ancestry array
-    ancestryNodes.delete(alert.process.entity_id);
-
     const children = Array.from(
       this.descendantsTreeGenerator(
         alert,
@@ -716,7 +731,7 @@ export class EndpointDocGenerator {
       }
     };
 
-    // generate related alerts for rootW
+    // generate related alerts for root
     const processDuration: number = 6 * 3600;
     if (this.randomN(100) < pctWithRelated) {
       addRelatedEvents(ancestor, processDuration, events);
@@ -741,6 +756,8 @@ export class EndpointDocGenerator {
       ancestor = this.generateEvent({
         timestamp,
         parentEntityID: ancestor.process.entity_id,
+        // add the parent to the ancestry array
+        ancestry: [ancestor.process.entity_id, ...ancestor.process.Ext.ancestry],
         parentPid: ancestor.process.pid,
         pid: this.randomN(5000),
       });
@@ -756,6 +773,7 @@ export class EndpointDocGenerator {
             parentEntityID: ancestor.process.parent?.entity_id,
             eventCategory: 'process',
             eventType: 'end',
+            ancestry: ancestor.process.Ext.ancestry,
           })
         );
       }
@@ -774,7 +792,12 @@ export class EndpointDocGenerator {
       }
     }
     events.push(
-      this.generateAlert(timestamp, ancestor.process.entity_id, ancestor.process.parent?.entity_id)
+      this.generateAlert(
+        timestamp,
+        ancestor.process.entity_id,
+        ancestor.process.parent?.entity_id,
+        ancestor.process.Ext.ancestry
+      )
     );
     return events;
   }
@@ -829,6 +852,10 @@ export class EndpointDocGenerator {
       const child = this.generateEvent({
         timestamp,
         parentEntityID: currentState.event.process.entity_id,
+        ancestry: [
+          currentState.event.process.entity_id,
+          ...currentState.event.process.Ext.ancestry,
+        ],
       });
 
       maxChildren = this.randomN(maxChildrenPerNode + 1);
@@ -850,6 +877,7 @@ export class EndpointDocGenerator {
           parentEntityID: child.process.parent?.entity_id,
           eventCategory: 'process',
           eventType: 'end',
+          ancestry: child.process.Ext.ancestry,
         });
       }
       if (this.randomN(100) < percentNodesWithRelated) {
@@ -894,6 +922,7 @@ export class EndpointDocGenerator {
           parentEntityID: node.process.parent?.entity_id,
           eventCategory: eventInfo.category,
           eventType: eventInfo.creationType,
+          ancestry: node.process.Ext.ancestry,
         });
       }
     }
@@ -912,7 +941,12 @@ export class EndpointDocGenerator {
   ) {
     for (let i = 0; i < relatedAlerts; i++) {
       const ts = node['@timestamp'] + this.randomN(alertCreationTime) * 1000;
-      yield this.generateAlert(ts, node.process.entity_id, node.process.parent?.entity_id);
+      yield this.generateAlert(
+        ts,
+        node.process.entity_id,
+        node.process.parent?.entity_id,
+        node.process.Ext.ancestry
+      );
     }
   }
 
diff --git a/x-pack/plugins/security_solution/common/endpoint/models/event.ts b/x-pack/plugins/security_solution/common/endpoint/models/event.ts
index 3f07bf77abf20..98f4b4336a1c8 100644
--- a/x-pack/plugins/security_solution/common/endpoint/models/event.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/models/event.ts
@@ -53,6 +53,13 @@ export function parentEntityId(event: ResolverEvent): string | undefined {
   return event.process.parent?.entity_id;
 }
 
+export function ancestryArray(event: ResolverEvent): string[] | undefined {
+  if (isLegacyEvent(event)) {
+    return undefined;
+  }
+  return event.process.Ext.ancestry;
+}
+
 /**
  * @param event The event to get the category for
  */
diff --git a/x-pack/plugins/security_solution/common/endpoint/types.ts b/x-pack/plugins/security_solution/common/endpoint/types.ts
index 0b93af741da22..f8cfb8f7c3bbc 100644
--- a/x-pack/plugins/security_solution/common/endpoint/types.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/types.ts
@@ -300,6 +300,12 @@ export interface AlertEvent {
     thread?: ThreadFields[];
     uptime: number;
     Ext: {
+      /*
+       * The array has a special format. The entity_ids towards the beginning of the array are closer ancestors and the
+       * values towards the end of the array are more distant ancestors (grandparents). Therefore
+       * ancestry_array[0] == process.parent.entity_id and ancestry_array[1] == process.parent.parent.entity_id
+       */
+      ancestry: string[];
       code_signature: Array<{
         subject_name: string;
         trusted: boolean;
@@ -469,6 +475,14 @@ export interface EndpointEvent {
       name?: string;
       pid?: number;
     };
+    /*
+     * The array has a special format. The entity_ids towards the beginning of the array are closer ancestors and the
+     * values towards the end of the array are more distant ancestors (grandparents). Therefore
+     * ancestry_array[0] == process.parent.entity_id and ancestry_array[1] == process.parent.parent.entity_id
+     */
+    Ext: {
+      ancestry: string[];
+    };
   };
   user?: {
     domain?: string;
diff --git a/x-pack/plugins/security_solution/server/endpoint/routes/resolver/utils/fetch.ts b/x-pack/plugins/security_solution/server/endpoint/routes/resolver/utils/fetch.ts
index da6d8e2cbde81..8d7c3d7b73158 100644
--- a/x-pack/plugins/security_solution/server/endpoint/routes/resolver/utils/fetch.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/routes/resolver/utils/fetch.ts
@@ -10,8 +10,14 @@ import {
   ResolverRelatedEvents,
   ResolverAncestry,
   ResolverRelatedAlerts,
+  LifecycleNode,
+  ResolverEvent,
 } from '../../../../../common/endpoint/types';
-import { entityId, parentEntityId } from '../../../../../common/endpoint/models/event';
+import {
+  entityId,
+  ancestryArray,
+  parentEntityId,
+} from '../../../../../common/endpoint/models/event';
 import { PaginationBuilder } from './pagination';
 import { Tree } from './tree';
 import { LifecycleQuery } from '../queries/lifecycle';
@@ -48,9 +54,21 @@ export class Fetcher {
    * @param limit upper limit of ancestors to retrieve
    */
   public async ancestors(limit: number): Promise<ResolverAncestry> {
-    const root = createAncestry();
-    await this.doAncestors(this.id, limit + 1, root);
-    return root;
+    const ancestryInfo = createAncestry();
+    const originNode = await this.getNode(this.id);
+    if (originNode) {
+      ancestryInfo.ancestors.push(originNode);
+      // If the request is only for the origin node then set next to its parent
+      ancestryInfo.nextAncestor = parentEntityId(originNode.lifecycle[0]) || null;
+      await this.doAncestors(
+        // limit the ancestors we're looking for to the number of levels
+        // the array could be up to length 20 but that could change
+        Fetcher.getAncestryAsArray(originNode.lifecycle[0]).slice(0, limit),
+        limit,
+        ancestryInfo
+      );
+    }
+    return ancestryInfo;
   }
 
   /**
@@ -89,7 +107,26 @@ export class Fetcher {
    * @param after a cursor to use as the starting point for retrieving alerts
    */
   public async alerts(limit: number, after?: string): Promise<ResolverRelatedAlerts> {
-    return this.doAlerts(limit, after);
+    const query = new AlertsQuery(
+      PaginationBuilder.createBuilder(limit, after),
+      this.indexPattern,
+      this.endpointID
+    );
+
+    const { totals, results } = await query.search(this.client, this.id);
+    if (results.length === 0) {
+      // return an empty set of results
+      return createRelatedAlerts(this.id);
+    }
+    if (!totals[this.id]) {
+      throw new Error(`Could not find the totals for related events entity_id: ${this.id}`);
+    }
+
+    return createRelatedAlerts(
+      this.id,
+      results,
+      PaginationBuilder.buildCursor(totals[this.id], results)
+    );
   }
 
   /**
@@ -102,29 +139,72 @@ export class Fetcher {
     return tree;
   }
 
+  private async getNode(entityID: string): Promise<LifecycleNode | undefined> {
+    const query = new LifecycleQuery(this.indexPattern, this.endpointID);
+    const results = await query.search(this.client, entityID);
+    if (results.length === 0) {
+      return;
+    }
+
+    return createLifecycle(entityID, results);
+  }
+
+  private static getAncestryAsArray(event: ResolverEvent): string[] {
+    const ancestors = ancestryArray(event);
+    if (ancestors) {
+      return ancestors;
+    }
+
+    const parentID = parentEntityId(event);
+    if (parentID) {
+      return [parentID];
+    }
+
+    return [];
+  }
+
   private async doAncestors(
-    curNodeID: string,
+    ancestors: string[],
     levels: number,
     ancestorInfo: ResolverAncestry
   ): Promise<void> {
-    if (levels === 0) {
-      ancestorInfo.nextAncestor = curNodeID;
+    if (levels <= 0) {
       return;
     }
 
     const query = new LifecycleQuery(this.indexPattern, this.endpointID);
-    const results = await query.search(this.client, curNodeID);
+    const results = await query.search(this.client, ancestors);
 
     if (results.length === 0) {
+      ancestorInfo.nextAncestor = null;
       return;
     }
-    ancestorInfo.ancestors.push(createLifecycle(curNodeID, results));
 
-    const next = parentEntityId(results[0]);
-    if (next === undefined) {
-      return;
-    }
-    await this.doAncestors(next, levels - 1, ancestorInfo);
+    // bucket the start and end events together for a single node
+    const ancestryNodes = results.reduce(
+      (nodes: Map<string, LifecycleNode>, ancestorEvent: ResolverEvent) => {
+        const nodeId = entityId(ancestorEvent);
+        let node = nodes.get(nodeId);
+        if (!node) {
+          node = createLifecycle(nodeId, []);
+        }
+
+        node.lifecycle.push(ancestorEvent);
+        return nodes.set(nodeId, node);
+      },
+      new Map()
+    );
+
+    // the order of this array is going to be weird, it will look like this
+    // [furthest grandparent...closer grandparent, next recursive call furthest grandparent...closer grandparent]
+    ancestorInfo.ancestors.push(...ancestryNodes.values());
+    ancestorInfo.nextAncestor = parentEntityId(results[0]) || null;
+    const levelsLeft = levels - ancestryNodes.size;
+    // the results come back in ascending order on timestamp so the first entry in the
+    // results should be the further ancestor (most distant grandparent)
+    const next = Fetcher.getAncestryAsArray(results[0]).slice(0, levelsLeft);
+    // the ancestry array currently only holds up to 20 values but we can't rely on that so keep recursing
+    await this.doAncestors(next, levelsLeft, ancestorInfo);
   }
 
   private async doEvents(limit: number, after?: string) {
@@ -150,29 +230,6 @@ export class Fetcher {
     );
   }
 
-  private async doAlerts(limit: number, after?: string) {
-    const query = new AlertsQuery(
-      PaginationBuilder.createBuilder(limit, after),
-      this.indexPattern,
-      this.endpointID
-    );
-
-    const { totals, results } = await query.search(this.client, this.id);
-    if (results.length === 0) {
-      // return an empty set of results
-      return createRelatedAlerts(this.id);
-    }
-    if (!totals[this.id]) {
-      throw new Error(`Could not find the totals for related events entity_id: ${this.id}`);
-    }
-
-    return createRelatedAlerts(
-      this.id,
-      results,
-      PaginationBuilder.buildCursor(totals[this.id], results)
-    );
-  }
-
   private async doChildren(
     cache: ChildrenNodesHelper,
     ids: string[],
diff --git a/x-pack/test/api_integration/apis/endpoint/resolver.ts b/x-pack/test/api_integration/apis/endpoint/resolver.ts
index 2bb52473508b3..c9356de07f711 100644
--- a/x-pack/test/api_integration/apis/endpoint/resolver.ts
+++ b/x-pack/test/api_integration/apis/endpoint/resolver.ts
@@ -41,25 +41,6 @@ const expectLifecycleNodeInMap = (node: LifecycleNode, nodeMap: Map<string, Tree
   compareArrays(genNode!.lifecycle, node.lifecycle, true);
 };
 
-/**
- * Verify that all the ancestor nodes including the origin are valid.
- *
- * @param origin the origin node for the tree
- * @param ancestors an array of ancestors
- * @param tree the generated resolver tree as the source of truth
- * @param verifyLastParent a boolean indicating whether to check the last ancestor. If the ancestors array intentionally
- *  does not contain all the ancestors, the last one will not have the parent
- */
-const verifyAncestryFromOrigin = (
-  origin: LifecycleNode,
-  ancestors: LifecycleNode[],
-  tree: Tree,
-  verifyLastParent: boolean
-) => {
-  compareArrays(tree.origin.lifecycle, origin.lifecycle, true);
-  verifyAncestry(ancestors, tree, verifyLastParent);
-};
-
 /**
  * Verify that all the ancestor nodes are valid and optionally have parents.
  *
@@ -79,14 +60,59 @@ const verifyAncestry = (ancestors: LifecycleNode[], tree: Tree, verifyLastParent
   expect(Object.keys(groupedAncestors).length).to.eql(ancestors.length);
   // make sure there aren't any nodes with the same parent entity_id
   expect(Object.keys(groupedAncestorsParent).length).to.eql(ancestors.length);
-  ancestors.forEach((node) => {
+
+  // make sure each of the ancestors' lifecycle events are in the generated tree
+  for (const node of ancestors) {
+    expectLifecycleNodeInMap(node, tree.ancestry);
+  }
+
+  // start at the origin which is always the first element of the array and make sure we have a connection
+  // using parent id between each of the nodes
+  let foundParents = 0;
+  let node = ancestors[0];
+  for (let i = 0; i < ancestors.length; i++) {
     const parentID = parentEntityId(node.lifecycle[0]);
-    // the last node generated will have `undefined` as the parent entity_id
-    if (parentID !== undefined && verifyLastParent) {
-      expect(groupedAncestors[parentID]).to.be.ok();
+    if (parentID !== undefined) {
+      const nextNode = groupedAncestors[parentID];
+      if (!nextNode) {
+        break;
+      }
+      // the grouped nodes should only have a single entry since each entity is unique
+      node = nextNode[0];
     }
-    expectLifecycleNodeInMap(node, tree.ancestry);
-  });
+    foundParents++;
+  }
+
+  if (verifyLastParent) {
+    expect(foundParents).to.eql(ancestors.length);
+  } else {
+    // if we only retrieved a portion of all the ancestors then the most distant grandparent's parent will not necessarily
+    // be in the results
+    expect(foundParents).to.eql(ancestors.length - 1);
+  }
+};
+
+/**
+ * Retrieves the most distant ancestor in the given array.
+ *
+ * @param ancestors an array of ancestor nodes
+ */
+const retrieveDistantAncestor = (ancestors: LifecycleNode[]) => {
+  // group the ancestors by their entity_id mapped to a lifecycle node
+  const groupedAncestors = _.groupBy(ancestors, (ancestor) => ancestor.entityID);
+  let node = ancestors[0];
+  for (let i = 0; i < ancestors.length; i++) {
+    const parentID = parentEntityId(node.lifecycle[0]);
+    if (parentID !== undefined) {
+      const nextNode = groupedAncestors[parentID];
+      if (nextNode) {
+        node = nextNode[0];
+      } else {
+        return node;
+      }
+    }
+  }
+  return node;
 };
 
 /**
@@ -398,6 +424,7 @@ export default function resolverAPIIntegrationTests({ getService }: FtrProviderC
             )
             .expect(200);
           expect(body.ancestors[0].lifecycle.length).to.eql(2);
+          expect(body.ancestors.length).to.eql(2);
           expect(body.nextAncestor).to.eql(null);
         });
 
@@ -425,9 +452,12 @@ export default function resolverAPIIntegrationTests({ getService }: FtrProviderC
       });
 
       describe('endpoint events', () => {
-        const getRootAndAncestry = (ancestry: ResolverAncestry) => {
-          return { root: ancestry.ancestors[0], ancestry: ancestry.ancestors.slice(1) };
-        };
+        it('should return the origin node at the front of the array', async () => {
+          const { body }: { body: ResolverAncestry } = await supertest
+            .get(`/api/endpoint/resolver/${tree.origin.id}/ancestry?ancestors=9`)
+            .expect(200);
+          expect(body.ancestors[0].entityID).to.eql(tree.origin.id);
+        });
 
         it('should return details for the root node', async () => {
           const { body }: { body: ResolverAncestry } = await supertest
@@ -435,8 +465,8 @@ export default function resolverAPIIntegrationTests({ getService }: FtrProviderC
             .expect(200);
           // the tree we generated had 5 ancestors + 1 origin node
           expect(body.ancestors.length).to.eql(6);
-          const ancestryInfo = getRootAndAncestry(body);
-          verifyAncestryFromOrigin(ancestryInfo.root, ancestryInfo.ancestry, tree, true);
+          expect(body.ancestors[0].entityID).to.eql(tree.origin.id);
+          verifyAncestry(body.ancestors, tree, true);
           expect(body.nextAncestor).to.eql(null);
         });
 
@@ -454,12 +484,9 @@ export default function resolverAPIIntegrationTests({ getService }: FtrProviderC
             .expect(200);
           // it should have 2 ancestors + 1 origin
           expect(body.ancestors.length).to.eql(3);
-          const ancestryInfo = getRootAndAncestry(body);
-          verifyAncestryFromOrigin(ancestryInfo.root, ancestryInfo.ancestry, tree, false);
-          expect(body.nextAncestor).to.eql(
-            // it should be the parent entity id on the last element of the ancestry array
-            parentEntityId(ancestryInfo.ancestry[ancestryInfo.ancestry.length - 1].lifecycle[0])
-          );
+          verifyAncestry(body.ancestors, tree, false);
+          const distantGrandparent = retrieveDistantAncestor(body.ancestors);
+          expect(body.nextAncestor).to.eql(parentEntityId(distantGrandparent.lifecycle[0]));
         });
 
         it('should handle multiple ancestor requests', async () => {

From 6fe244ecba3fb9deb7829ad66ac6f0db7584bef6 Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Fri, 19 Jun 2020 14:47:57 -0700
Subject: [PATCH 59/63] skip failing suite (#69595)

---
 .../security_solution/cypress/integration/search_bar.spec.ts   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/security_solution/cypress/integration/search_bar.spec.ts b/x-pack/plugins/security_solution/cypress/integration/search_bar.spec.ts
index 103d4d45b3a09..6428a855c8485 100644
--- a/x-pack/plugins/security_solution/cypress/integration/search_bar.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/search_bar.spec.ts
@@ -12,7 +12,8 @@ import { hostIpFilter } from '../objects/filter';
 import { HOSTS_PAGE } from '../urls/navigation';
 import { waitForAllHostsToBeLoaded } from '../tasks/hosts/all_hosts';
 
-describe('SearchBar', () => {
+// FAILING: https://github.com/elastic/kibana/issues/69595
+describe.skip('SearchBar', () => {
   before(() => {
     loginAndWaitForPage(HOSTS_PAGE);
     waitForAllHostsToBeLoaded();

From 9a41c1d0e714a47ffe968682067ddd81710abf0a Mon Sep 17 00:00:00 2001
From: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>
Date: Fri, 19 Jun 2020 18:47:47 -0400
Subject: [PATCH 60/63] [Endpoint] Fix flaky endpoints list unit test (#69591)

* Fix flaky endpoints list unit test
* un-skip test

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../management/pages/endpoint_hosts/view/index.test.tsx      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
index 68c4e96074181..a3e2a55fc7569 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
@@ -175,6 +175,9 @@ describe('when on the hosts page', () => {
           status: overallStatus,
         };
         policyResponse.Endpoint.policy.applied.actions.push(downloadModelAction);
+      } else {
+        // Else, make sure the status of the generated action matches what was passed in
+        downloadModelAction.status = overallStatus;
       }
 
       if (
@@ -371,7 +374,7 @@ describe('when on the hosts page', () => {
       });
     });
 
-    describe.skip('when showing host Policy Response panel', () => {
+    describe('when showing host Policy Response panel', () => {
       let renderResult: ReturnType<typeof render>;
       beforeEach(async () => {
         coreStart.http.post.mockImplementation(async (requestOptions) => {

From 02a3800c933d7316ad21d966876e5141d1466cc3 Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Sat, 20 Jun 2020 00:26:56 -0700
Subject: [PATCH 61/63] disable pageLoadMetrics job, it's gotten really flaky

---
 Jenkinsfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index 763ee95ddde99..db9d218db15ba 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -41,7 +41,7 @@ kibanaPipeline(timeoutMinutes: 155, checkPrChanges: true) {
             'xpack-ciGroup9': kibanaPipeline.xpackCiGroupProcess(9),
             'xpack-ciGroup10': kibanaPipeline.xpackCiGroupProcess(10),
             'xpack-accessibility': kibanaPipeline.functionalTestProcess('xpack-accessibility', './test/scripts/jenkins_xpack_accessibility.sh'),
-            'xpack-pageLoadMetrics': kibanaPipeline.functionalTestProcess('xpack-pageLoadMetrics', './test/scripts/jenkins_xpack_page_load_metrics.sh'),
+            // 'xpack-pageLoadMetrics': kibanaPipeline.functionalTestProcess('xpack-pageLoadMetrics', './test/scripts/jenkins_xpack_page_load_metrics.sh'),
             'xpack-securitySolutionCypress': { processNumber ->
               whenChanged(['x-pack/plugins/security_solution/', 'x-pack/test/security_solution_cypress/']) {
                 kibanaPipeline.functionalTestProcess('xpack-securitySolutionCypress', './test/scripts/jenkins_security_solution_cypress.sh')(processNumber)

From 73af8404e4d2cbdef8b7a5a2a6fad50f1a5f84ab Mon Sep 17 00:00:00 2001
From: Xavier Mouligneau <189600+XavierM@users.noreply.github.com>
Date: Sat, 20 Jun 2020 07:31:28 -0400
Subject: [PATCH 62/63] [SECURITY] Introduce kibana nav (#68862)

* Change the bootstrap of the app

* rename SiemPageName to SecurityPageName

* modify alerts routes

* modify cases routes

* modify hosts routes

* modify network routes

* modify overview routes

* modify timelines routes

* wip change management route

* change route for common

* some fixing from the first commit

* modify route for management

* update url format hook to use history

* bug when you click on external alerts from host or network

* improvement from josh feedback

* redirect siem to security solution

* a little clean up

* Fix types

* fix breadcrumbs

* fix unit test

* Update index.tsx

* Fix cypress

* bug remove timeline when you are in case configure

* Fix functionel test for management

* Fix redirect siem + ml

* fixes some cypress tests

* adds 'URL compatibility' test

* bring ml back to alerts

* review I

* Fix memory leak in timelines page

* fix storage bug for timeline search bar

* fix endpoint merge + functional test

* avoid timeline flyout toggle

* Fix link to ml score

* Fix breadcrumb

* Fix management url

* fix unit test

* fixes typecheck issue

* fixes remaining url cypress tests

* fixes timeline scenario

* fix link to details rule from timeline

* review remove absolute path for consistency

* Fixing resolver alert generation (#69587)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

* [Security_Solution][Endpoint] Resolver leverage ancestry array for queries  (#69264)

* Adding alerts route

* Adding related alerts generator changes, tests, and script updates

* Fixing missed parameter

* Aligning the AlertEvent and ResolverEvent definition

* Fixing type errors

* Fixing import error

* Adding ancestry functionality in generator

* Creating some tests for ancestry field

* Making progress on the ancestry

* Fixing the ancestry verification

* Fixing existing tests

* Removing unused code and fixing test

* Adding more comments

* Fixing endgame queries

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

* fix cypress test

* skip failing suite (#69595)

* [Endpoint] Fix flaky endpoints list unit test (#69591)

* Fix flaky endpoints list unit test
* un-skip test

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

* remove flaky test

Co-authored-by: patrykkopycinski <contact@patrykkopycinski.com>
Co-authored-by: Gloria Hornero <snootchie.boochies@gmail.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Jonathan Buttner <56361221+jonathan-buttner@users.noreply.github.com>
Co-authored-by: spalger <spalger@users.noreply.github.com>
Co-authored-by: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>
---
 .../security_solution/common/constants.ts     |   8 +
 .../cypress/integration/detections.spec.ts    |   8 +-
 .../integration/detections_timeline.spec.ts   |   4 +-
 .../integration/ml_conditional_links.spec.ts  |  26 +-
 .../cypress/integration/navigation.spec.ts    |  16 +-
 .../signal_detection_rules.spec.ts            |   4 +-
 .../signal_detection_rules_custom.spec.ts     |   6 +-
 .../signal_detection_rules_export.spec.ts     |   4 +-
 .../signal_detection_rules_ml.spec.ts         |   4 +-
 .../signal_detection_rules_prebuilt.spec.ts   |   6 +-
 .../integration/url_compatibility.spec.ts     |  17 +
 .../cypress/integration/url_state.spec.ts     |  24 +-
 .../cypress/screens/security_header.ts        |   4 +-
 .../cypress/urls/ml_conditional_links.ts      |  26 +-
 .../cypress/urls/navigation.ts                |  23 +-
 .../security_solution/cypress/urls/state.ts   |  16 +-
 .../components/activity_monitor/columns.tsx   |  97 -----
 .../activity_monitor/index.test.tsx           |  18 -
 .../components/activity_monitor/index.tsx     | 320 --------------
 .../components/activity_monitor/types.ts      |  29 --
 .../alerts_histogram_panel/index.test.tsx     |   9 +
 .../alerts_histogram_panel/index.tsx          |  25 +-
 .../load_empty_prompt.test.tsx                |   9 +
 .../pre_packaged_rules/load_empty_prompt.tsx  |  24 +-
 .../rules/rule_actions_overflow/index.tsx     |   4 +-
 .../rules/step_rule_actions/index.tsx         |  15 +-
 .../security_solution/public/alerts/index.ts  |   4 +-
 .../detection_engine.test.tsx                 |   2 +
 .../detection_engine/detection_engine.tsx     |  26 +-
 .../alerts/pages/detection_engine/index.tsx   |  28 +-
 .../detection_engine/rules/all/actions.tsx    |   7 +-
 .../detection_engine/rules/all/columns.tsx    |  33 +-
 .../detection_engine/rules/all/index.test.tsx |   9 +
 .../detection_engine/rules/all/index.tsx      |  10 +-
 .../rules/create/index.test.tsx               |   8 +
 .../detection_engine/rules/create/index.tsx   |  26 +-
 .../rules/details/index.test.tsx              |   2 +
 .../detection_engine/rules/details/index.tsx  |  31 +-
 .../rules/edit/index.test.tsx                 |   2 +
 .../detection_engine/rules/edit/index.tsx     |  33 +-
 .../detection_engine/rules/index.test.tsx     |   8 +
 .../pages/detection_engine/rules/index.tsx    |  29 +-
 .../detection_engine/rules/utils.test.ts      |   8 +-
 .../pages/detection_engine/rules/utils.ts     |  40 +-
 .../public/alerts/routes.tsx                  |  23 +-
 .../security_solution/public/app/app.tsx      | 142 +++---
 .../public/app/home/home_navigations.tsx      |  74 ++--
 .../public/app/home/index.tsx                 |  32 +-
 .../public/app/home/translations.ts           |   4 +
 .../security_solution/public/app/index.tsx    |  32 +-
 .../security_solution/public/app/routes.tsx   |   6 +-
 .../security_solution/public/app/types.ts     |  19 +-
 .../cases/components/all_cases/index.test.tsx |  12 +-
 .../cases/components/all_cases/index.tsx      |  34 +-
 .../components/all_cases_modal/index.test.tsx |   9 +
 .../components/case_view/actions.test.tsx     |   7 +
 .../cases/components/case_view/actions.tsx    |   7 +-
 .../cases/components/case_view/index.tsx      |   6 +-
 .../configure_cases/button.test.tsx           |  11 +-
 .../components/configure_cases/button.tsx     |  28 +-
 .../cases/components/create/index.test.tsx    |   8 +-
 .../public/cases/components/create/index.tsx  |  17 +-
 .../use_push_to_service/index.test.tsx        |   9 +
 .../components/use_push_to_service/index.tsx  |  29 +-
 .../user_action_markdown.test.tsx             |   2 +-
 .../user_action_tree/user_action_title.tsx    |   4 +-
 .../security_solution/public/cases/index.ts   |   4 +-
 .../public/cases/pages/case.tsx               |   3 +-
 .../public/cases/pages/case_details.tsx       |   9 +-
 .../public/cases/pages/configure_cases.tsx    |  10 +-
 .../public/cases/pages/create_case.tsx        |  10 +-
 .../public/cases/pages/index.tsx              |  17 +-
 .../public/cases/pages/utils.ts               |  25 +-
 .../security_solution/public/cases/routes.tsx |  17 +-
 .../draggable_wrapper_hover_content.test.tsx  |   2 +
 .../event_details/event_details.test.tsx      |   2 +
 .../event_fields_browser.test.tsx             |   2 +
 .../common/components/events_viewer/index.tsx |   1 +
 .../components/exceptions/viewer/index.tsx    |   2 +-
 .../__snapshots__/index.test.tsx.snap         |  19 -
 .../components/header_global/index.test.tsx   |  40 --
 .../common/components/header_global/index.tsx |  34 +-
 .../components/header_page/index.test.tsx     |  15 +-
 .../common/components/header_page/index.tsx   |  88 ++--
 .../components/link_to/__mocks__/index.ts     |  24 ++
 .../common/components/link_to/helpers.test.ts |   2 +-
 .../common/components/link_to/helpers.ts      |   5 +-
 .../public/common/components/link_to/index.ts |  44 +-
 .../common/components/link_to/link_to.tsx     | 126 ------
 .../components/link_to/redirect_to_case.tsx   |  40 +-
 .../link_to/redirect_to_detection_engine.tsx  |  64 +--
 .../components/link_to/redirect_to_hosts.tsx  |  53 +--
 .../link_to/redirect_to_management.tsx        |  15 -
 .../link_to/redirect_to_network.tsx           |  33 +-
 .../link_to/redirect_to_overview.tsx          |  16 +-
 .../link_to/redirect_to_timelines.tsx         |  33 +-
 .../components/link_to/redirect_wrapper.tsx   |  18 -
 .../common/components/links/index.test.tsx    |  23 +-
 .../public/common/components/links/index.tsx  | 124 ++++--
 .../ml_host_conditional_container.tsx         |  17 +-
 .../ml_network_conditional_container.tsx      |   9 +-
 .../ml/links/create_explorer_link.test.ts     |   2 +-
 ...lorer_link.ts => create_explorer_link.tsx} |  31 +-
 .../__snapshots__/anomaly_score.test.tsx.snap |  77 +++-
 .../create_descriptions_list.test.tsx.snap    |  77 +++-
 .../ml/score/create_description_list.tsx      |  11 +-
 .../get_anomalies_host_table_columns.tsx      |  16 +-
 .../get_anomalies_network_table_columns.tsx   |  16 +-
 .../__mocks__/use_get_url_search.ts           |   9 +
 .../navigation/breadcrumbs/index.test.ts      |  81 ++--
 .../navigation/breadcrumbs/index.ts           |  47 +-
 .../components/navigation/index.test.tsx      |  97 +++--
 .../common/components/navigation/index.tsx    |  12 +-
 .../navigation/tab_navigation/index.test.tsx  |  29 +-
 .../navigation/tab_navigation/index.tsx       |  49 ++-
 .../navigation/tab_navigation/types.ts        |   2 +
 .../common/components/navigation/types.ts     |  18 +
 .../components/news_feed/no_news/index.tsx    |  26 +-
 .../common/components/top_n/index.test.tsx    |   8 +
 .../common/components/top_n/top_n.test.tsx    |   8 +
 .../common/components/url_state/constants.ts  |   4 +-
 .../common/components/url_state/helpers.ts    |  33 +-
 .../components/url_state/index.test.tsx       |   8 +-
 .../url_state/index_mocked.test.tsx           |  12 +-
 .../components/url_state/test_dependencies.ts |  16 +-
 .../common/components/url_state/types.ts      |   4 +-
 .../components/url_state/use_url_state.tsx    |   4 +-
 .../common/lib/compose/kibana_compose.tsx     |   2 +-
 .../public/common/utils/route/index.test.tsx  |   8 +-
 .../public/common/utils/route/spy_routes.tsx  |   7 +-
 .../public/common/utils/route/types.ts        |   1 -
 .../utils/timeline/use_show_timeline.tsx      |  17 +-
 .../public/endpoint_alerts/index.ts           |   4 +-
 .../public/endpoint_alerts/routes.tsx         |  14 +-
 .../security_solution/public/helpers.ts       |  75 ++++
 .../components/hosts_table/index.test.tsx     |   2 +
 .../uncommon_process_table/index.test.tsx     |   2 +
 .../security_solution/public/hosts/index.ts   |   4 +-
 .../hosts/pages/details/details_tabs.test.tsx |   2 +-
 .../public/hosts/pages/details/index.tsx      |   3 +-
 .../public/hosts/pages/details/nav_tabs.tsx   |   9 +-
 .../public/hosts/pages/details/types.ts       |   2 -
 .../public/hosts/pages/details/utils.ts       |  22 +-
 .../public/hosts/pages/hosts.tsx              |   5 +-
 .../public/hosts/pages/hosts_tabs.tsx         |  12 +-
 .../public/hosts/pages/index.tsx              | 135 +++---
 .../public/hosts/pages/nav_tabs.tsx           |  10 +-
 .../public/hosts/pages/types.ts               |   5 +-
 .../security_solution/public/hosts/routes.tsx |  16 +-
 .../public/management/common/constants.ts     |   3 +-
 .../public/management/common/routing.ts       | 114 ++---
 .../components/management_page_view.tsx       |  21 +-
 .../public/management/index.ts                |   6 +-
 .../pages/endpoint_hosts/routes.tsx           |  14 +-
 .../store/host_pagination.test.ts             |   8 +-
 .../endpoint_hosts/store/middleware.test.ts   |   4 +-
 .../view/details/host_details.tsx             |  36 +-
 .../endpoint_hosts/view/details/index.tsx     |  22 +-
 .../pages/endpoint_hosts/view/index.test.tsx  |   8 +-
 .../pages/endpoint_hosts/view/index.tsx       |  55 ++-
 .../public/management/pages/index.tsx         |  13 +-
 .../policy/store/policy_list/index.test.ts    |   4 +-
 .../configure_datasource.tsx                  |   7 +-
 .../pages/policy/view/policy_details.test.tsx |  13 +-
 .../pages/policy/view/policy_details.tsx      |  15 +-
 .../pages/policy/view/policy_list.test.tsx    |   2 +-
 .../pages/policy/view/policy_list.tsx         |  28 +-
 .../public/management/routes.tsx              |  14 +-
 .../public/management/types.ts                |   4 +-
 .../network/components/ip/index.test.tsx      |   4 +-
 .../network_http_table/index.test.tsx         |   2 +
 .../network_top_n_flow_table/index.test.tsx   |   2 +
 .../source_destination/index.test.tsx         |   8 +
 .../source_destination_ip.test.tsx            |   2 +
 .../security_solution/public/network/index.ts |   4 +-
 .../public/network/pages/index.tsx            |  35 +-
 .../__snapshots__/index.test.tsx.snap         |   4 +-
 .../public/network/pages/ip_details/index.tsx |   3 +-
 .../public/network/pages/ip_details/utils.ts  |  25 +-
 .../network/pages/navigation/nav_tabs.tsx     |   9 +-
 .../pages/navigation/network_routes.tsx       |  12 +-
 .../public/network/pages/navigation/types.ts  |   3 +-
 .../public/network/pages/navigation/utils.ts  |   5 +-
 .../public/network/pages/network.tsx          |   3 +-
 .../public/network/routes.tsx                 |  19 +-
 .../alerts_by_category/index.test.tsx         |   2 +-
 .../components/alerts_by_category/index.tsx   |  32 +-
 .../components/event_counts/index.test.tsx    |   2 +
 .../components/events_by_dataset/index.tsx    |  32 +-
 .../components/overview_host/index.test.tsx   |   1 +
 .../components/overview_host/index.tsx        |  34 +-
 .../overview_network/index.test.tsx           |   1 +
 .../components/overview_network/index.tsx     |  35 +-
 .../components/recent_cases/index.tsx         |  33 +-
 .../recent_cases/no_cases/index.tsx           |  33 +-
 .../components/recent_cases/recent_cases.tsx  |  25 +-
 .../components/recent_timelines/index.tsx     |  62 ++-
 .../public/overview/index.ts                  |   4 +-
 .../public/overview/pages/overview.tsx        |   3 +-
 .../public/overview/routes.tsx                |  13 +-
 .../security_solution/public/plugin.tsx       | 404 ++++++++++++++----
 .../security_solution/public/sub_plugins.ts   |  34 ++
 .../timelines/components/flyout/index.tsx     |   2 +-
 .../components/netflow/index.test.tsx         |   2 +
 .../components/open_timeline/index.tsx        |  34 +-
 .../components/open_timeline/types.ts         |   1 +
 .../open_timeline/use_timeline_types.tsx      |  43 +-
 .../components/timeline/body/index.test.tsx   |   2 +
 .../auditd/generic_row_renderer.test.tsx      |   1 +
 .../body/renderers/formatted_field.test.tsx   |   1 +
 .../body/renderers/formatted_field.tsx        |  13 +-
 .../renderers/formatted_field_helpers.tsx     |  47 +-
 .../body/renderers/get_row_renderer.test.tsx  |   2 +
 .../netflow/netflow_row_renderer.test.tsx     |   2 +
 .../renderers/plain_column_renderer.test.tsx  |   2 +
 .../suricata/suricata_details.test.tsx        |   2 +
 .../suricata/suricata_row_renderer.test.tsx   |   2 +
 .../renderers/system/generic_details.test.tsx |   2 +
 .../system/generic_file_details.test.tsx      |   8 +
 .../system/generic_row_renderer.test.tsx      |   1 +
 .../body/renderers/zeek/zeek_details.test.tsx |   2 +
 .../renderers/zeek/zeek_row_renderer.test.tsx |   2 +
 .../components/timeline/index.test.tsx        |   1 +
 .../timelines/components/timeline/index.tsx   |   4 +-
 .../use_insert_timeline.tsx                   |   2 +-
 .../timeline/properties/helpers.tsx           |  21 +-
 .../timeline/properties/index.test.tsx        |   7 +-
 .../components/timeline/properties/index.tsx  |  14 +-
 .../timeline/selectable_timeline/index.tsx    |  32 +-
 .../components/timeline/timeline.test.tsx     |  10 +-
 .../public/timelines/containers/all/index.tsx |  12 +-
 .../public/timelines/index.ts                 |   4 +-
 .../public/timelines/pages/index.tsx          |  34 +-
 .../timelines/pages/timelines_page.test.tsx   |   6 +-
 .../public/timelines/pages/timelines_page.tsx |  16 +-
 .../public/timelines/routes.tsx               |  13 +-
 .../test/security_solution_endpoint/config.ts |   4 +-
 .../page_objects/endpoint_page.ts             |   7 +-
 .../page_objects/policy_page.ts               |  12 +-
 239 files changed, 2889 insertions(+), 2329 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/cypress/integration/url_compatibility.spec.ts
 delete mode 100644 x-pack/plugins/security_solution/public/alerts/components/activity_monitor/columns.tsx
 delete mode 100644 x-pack/plugins/security_solution/public/alerts/components/activity_monitor/index.test.tsx
 delete mode 100644 x-pack/plugins/security_solution/public/alerts/components/activity_monitor/index.tsx
 delete mode 100644 x-pack/plugins/security_solution/public/alerts/components/activity_monitor/types.ts
 delete mode 100644 x-pack/plugins/security_solution/public/common/components/header_global/__snapshots__/index.test.tsx.snap
 delete mode 100644 x-pack/plugins/security_solution/public/common/components/header_global/index.test.tsx
 create mode 100644 x-pack/plugins/security_solution/public/common/components/link_to/__mocks__/index.ts
 delete mode 100644 x-pack/plugins/security_solution/public/common/components/link_to/link_to.tsx
 delete mode 100644 x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_management.tsx
 delete mode 100644 x-pack/plugins/security_solution/public/common/components/link_to/redirect_wrapper.tsx
 rename x-pack/plugins/security_solution/public/common/components/ml/links/{create_explorer_link.ts => create_explorer_link.tsx} (55%)
 create mode 100644 x-pack/plugins/security_solution/public/common/components/navigation/__mocks__/use_get_url_search.ts
 create mode 100644 x-pack/plugins/security_solution/public/helpers.ts
 create mode 100644 x-pack/plugins/security_solution/public/sub_plugins.ts

diff --git a/x-pack/plugins/security_solution/common/constants.ts b/x-pack/plugins/security_solution/common/constants.ts
index d7f271535228c..0d162c068376f 100644
--- a/x-pack/plugins/security_solution/common/constants.ts
+++ b/x-pack/plugins/security_solution/common/constants.ts
@@ -34,6 +34,14 @@ export const DEFAULT_INTERVAL_VALUE = 300000; // ms
 export const DEFAULT_TIMEPICKER_QUICK_RANGES = 'timepicker:quickRanges';
 export const NO_ALERT_INDEX = 'no-alert-index-049FC71A-4C2C-446F-9901-37XMC5024C51';
 
+export const APP_OVERVIEW_PATH = `${APP_PATH}/overview`;
+export const APP_ALERTS_PATH = `${APP_PATH}/alerts`;
+export const APP_HOSTS_PATH = `${APP_PATH}/hosts`;
+export const APP_NETWORK_PATH = `${APP_PATH}/network`;
+export const APP_TIMELINES_PATH = `${APP_PATH}/timelines`;
+export const APP_CASES_PATH = `${APP_PATH}/cases`;
+export const APP_MANAGEMENT_PATH = `${APP_PATH}/management`;
+
 /** The comma-delimited list of Elasticsearch indices from which the SIEM app collects events */
 export const DEFAULT_INDEX_PATTERN = [
   'apm-*-transaction*',
diff --git a/x-pack/plugins/security_solution/cypress/integration/detections.spec.ts b/x-pack/plugins/security_solution/cypress/integration/detections.spec.ts
index 43acdd40dadcc..2e727be1fc9b4 100644
--- a/x-pack/plugins/security_solution/cypress/integration/detections.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/detections.spec.ts
@@ -28,13 +28,13 @@ import {
 import { esArchiverLoad } from '../tasks/es_archiver';
 import { loginAndWaitForPage } from '../tasks/login';
 
-import { DETECTIONS } from '../urls/navigation';
+import { ALERTS_URL } from '../urls/navigation';
 
 describe('Detections', () => {
   context('Closing alerts', () => {
     beforeEach(() => {
       esArchiverLoad('alerts');
-      loginAndWaitForPage(DETECTIONS);
+      loginAndWaitForPage(ALERTS_URL);
     });
 
     it('Closes and opens alerts', () => {
@@ -161,7 +161,7 @@ describe('Detections', () => {
   context('Opening alerts', () => {
     beforeEach(() => {
       esArchiverLoad('closed_alerts');
-      loginAndWaitForPage(DETECTIONS);
+      loginAndWaitForPage(ALERTS_URL);
     });
 
     it('Open one alert when more than one closed alerts are selected', () => {
@@ -207,7 +207,7 @@ describe('Detections', () => {
   context('Marking alerts as in-progress', () => {
     beforeEach(() => {
       esArchiverLoad('alerts');
-      loginAndWaitForPage(DETECTIONS);
+      loginAndWaitForPage(ALERTS_URL);
     });
 
     it('Mark one alert in progress when more than one open alerts are selected', () => {
diff --git a/x-pack/plugins/security_solution/cypress/integration/detections_timeline.spec.ts b/x-pack/plugins/security_solution/cypress/integration/detections_timeline.spec.ts
index d3ddb2ad71e30..91617981ab14c 100644
--- a/x-pack/plugins/security_solution/cypress/integration/detections_timeline.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/detections_timeline.spec.ts
@@ -15,12 +15,12 @@ import {
 import { esArchiverLoad, esArchiverUnload } from '../tasks/es_archiver';
 import { loginAndWaitForPage } from '../tasks/login';
 
-import { DETECTIONS } from '../urls/navigation';
+import { ALERTS_URL } from '../urls/navigation';
 
 describe('Detections timeline', () => {
   beforeEach(() => {
     esArchiverLoad('timeline_alerts');
-    loginAndWaitForPage(DETECTIONS);
+    loginAndWaitForPage(ALERTS_URL);
   });
 
   afterEach(() => {
diff --git a/x-pack/plugins/security_solution/cypress/integration/ml_conditional_links.spec.ts b/x-pack/plugins/security_solution/cypress/integration/ml_conditional_links.spec.ts
index 785df4a0c2f9e..0c3424576e4cf 100644
--- a/x-pack/plugins/security_solution/cypress/integration/ml_conditional_links.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/ml_conditional_links.spec.ts
@@ -101,7 +101,7 @@ describe('ml conditional links', () => {
     loginAndWaitForPageWithoutDateRange(mlNetworkSingleIpNullKqlQuery);
     cy.url().should(
       'include',
-      '/app/security#/network/ip/127.0.0.1/source?timerange=(global:(linkTo:!(timeline),timerange:(from:1566990000000,kind:absolute,to:1567000799999)),timeline:(linkTo:!(global),timerange:(from:1566990000000,kind:absolute,to:1567000799999)))'
+      '/app/security/network/ip/127.0.0.1/source?timerange=(global:(linkTo:!(timeline),timerange:(from:1566990000000,kind:absolute,to:1567000799999)),timeline:(linkTo:!(global),timerange:(from:1566990000000,kind:absolute,to:1567000799999)))'
     );
   });
 
@@ -109,7 +109,7 @@ describe('ml conditional links', () => {
     loginAndWaitForPageWithoutDateRange(mlNetworkSingleIpKqlQuery);
     cy.url().should(
       'include',
-      "/app/security#/network/ip/127.0.0.1/source?query=(language:kuery,query:'(process.name:%20%22conhost.exe%22%20or%20process.name:%20%22sc.exe%22)')&timerange=(global:(linkTo:!(timeline),timerange:(from:1566990000000,kind:absolute,to:1567000799999)),timeline:(linkTo:!(global),timerange:(from:1566990000000,kind:absolute,to:1567000799999)))"
+      '/app/security/network/ip/127.0.0.1/source?query=(language:kuery,query:%27(process.name:%20%22conhost.exe%22%20or%20process.name:%20%22sc.exe%22)%27)&timerange=(global:(linkTo:!(timeline),timerange:(from:1566990000000,kind:absolute,to:1567000799999)),timeline:(linkTo:!(global),timerange:(from:1566990000000,kind:absolute,to:1567000799999)))'
     );
   });
 
@@ -117,7 +117,7 @@ describe('ml conditional links', () => {
     loginAndWaitForPageWithoutDateRange(mlNetworkMultipleIpNullKqlQuery);
     cy.url().should(
       'include',
-      "app/security#/network/flows?query=(language:kuery,query:'((source.ip:%20%22127.0.0.1%22%20or%20destination.ip:%20%22127.0.0.1%22)%20or%20(source.ip:%20%22127.0.0.2%22%20or%20destination.ip:%20%22127.0.0.2%22))')&timerange=(global:(linkTo:!(timeline),timerange:(from:1566990000000,kind:absolute,to:1567000799999)),timeline:(linkTo:!(global),timerange:(from:1566990000000,kind:absolute,to:1567000799999))"
+      'app/security/network/flows?query=(language:kuery,query:%27((source.ip:%20%22127.0.0.1%22%20or%20destination.ip:%20%22127.0.0.1%22)%20or%20(source.ip:%20%22127.0.0.2%22%20or%20destination.ip:%20%22127.0.0.2%22))%27)&timerange=(global:(linkTo:!(timeline),timerange:(from:1566990000000,kind:absolute,to:1567000799999)),timeline:(linkTo:!(global),timerange:(from:1566990000000,kind:absolute,to:1567000799999))'
     );
   });
 
@@ -125,7 +125,7 @@ describe('ml conditional links', () => {
     loginAndWaitForPageWithoutDateRange(mlNetworkMultipleIpKqlQuery);
     cy.url().should(
       'include',
-      "/app/security#/network/flows?query=(language:kuery,query:'((source.ip:%20%22127.0.0.1%22%20or%20destination.ip:%20%22127.0.0.1%22)%20or%20(source.ip:%20%22127.0.0.2%22%20or%20destination.ip:%20%22127.0.0.2%22))%20and%20((process.name:%20%22conhost.exe%22%20or%20process.name:%20%22sc.exe%22))')&timerange=(global:(linkTo:!(timeline),timerange:(from:1566990000000,kind:absolute,to:1567000799999)),timeline:(linkTo:!(global),timerange:(from:1566990000000,kind:absolute,to:1567000799999)))"
+      '/app/security/network/flows?query=(language:kuery,query:%27((source.ip:%20%22127.0.0.1%22%20or%20destination.ip:%20%22127.0.0.1%22)%20or%20(source.ip:%20%22127.0.0.2%22%20or%20destination.ip:%20%22127.0.0.2%22))%20and%20((process.name:%20%22conhost.exe%22%20or%20process.name:%20%22sc.exe%22))%27)&timerange=(global:(linkTo:!(timeline),timerange:(from:1566990000000,kind:absolute,to:1567000799999)),timeline:(linkTo:!(global),timerange:(from:1566990000000,kind:absolute,to:1567000799999)))'
     );
   });
 
@@ -133,7 +133,7 @@ describe('ml conditional links', () => {
     loginAndWaitForPageWithoutDateRange(mlNetworkNullKqlQuery);
     cy.url().should(
       'include',
-      '/app/security#/network/flows?timerange=(global:(linkTo:!(timeline),timerange:(from:1566990000000,kind:absolute,to:1567000799999)),timeline:(linkTo:!(global),timerange:(from:1566990000000,kind:absolute,to:1567000799999)))'
+      '/app/security/network/flows?timerange=(global:(linkTo:!(timeline),timerange:(from:1566990000000,kind:absolute,to:1567000799999)),timeline:(linkTo:!(global),timerange:(from:1566990000000,kind:absolute,to:1567000799999)))'
     );
   });
 
@@ -141,7 +141,7 @@ describe('ml conditional links', () => {
     loginAndWaitForPageWithoutDateRange(mlNetworkKqlQuery);
     cy.url().should(
       'include',
-      "/app/security#/network/flows?query=(language:kuery,query:'(process.name:%20%22conhost.exe%22%20or%20process.name:%20%22sc.exe%22)')&timerange=(global:(linkTo:!(timeline),timerange:(from:1566990000000,kind:absolute,to:1567000799999)),timeline:(linkTo:!(global),timerange:(from:1566990000000,kind:absolute,to:1567000799999)))"
+      '/app/security/network/flows?query=(language:kuery,query:%27(process.name:%20%22conhost.exe%22%20or%20process.name:%20%22sc.exe%22)%27)&timerange=(global:(linkTo:!(timeline),timerange:(from:1566990000000,kind:absolute,to:1567000799999)),timeline:(linkTo:!(global),timerange:(from:1566990000000,kind:absolute,to:1567000799999)))'
     );
   });
 
@@ -149,7 +149,7 @@ describe('ml conditional links', () => {
     loginAndWaitForPageWithoutDateRange(mlHostSingleHostNullKqlQuery);
     cy.url().should(
       'include',
-      '/app/security#/hosts/siem-windows/anomalies?timerange=(global:(linkTo:!(timeline),timerange:(from:1559800800000,kind:absolute,to:1559887199999)),timeline:(linkTo:!(global),timerange:(from:1559800800000,kind:absolute,to:1559887199999)))'
+      '/app/security/hosts/siem-windows/anomalies?timerange=(global:(linkTo:!(timeline),timerange:(from:1559800800000,kind:absolute,to:1559887199999)),timeline:(linkTo:!(global),timerange:(from:1559800800000,kind:absolute,to:1559887199999)))'
     );
   });
 
@@ -157,7 +157,7 @@ describe('ml conditional links', () => {
     loginAndWaitForPageWithoutDateRange(mlHostSingleHostKqlQueryVariable);
     cy.url().should(
       'include',
-      '/app/security#/hosts/siem-windows/anomalies?timerange=(global:(linkTo:!(timeline),timerange:(from:1559800800000,kind:absolute,to:1559887199999)),timeline:(linkTo:!(global),timerange:(from:1559800800000,kind:absolute,to:1559887199999)))'
+      '/app/security/hosts/siem-windows/anomalies?timerange=(global:(linkTo:!(timeline),timerange:(from:1559800800000,kind:absolute,to:1559887199999)),timeline:(linkTo:!(global),timerange:(from:1559800800000,kind:absolute,to:1559887199999)))'
     );
   });
 
@@ -165,7 +165,7 @@ describe('ml conditional links', () => {
     loginAndWaitForPageWithoutDateRange(mlHostSingleHostKqlQuery);
     cy.url().should(
       'include',
-      "/app/security#/hosts/siem-windows/anomalies?query=(language:kuery,query:'(process.name:%20%22conhost.exe%22%20or%20process.name:%20%22sc.exe%22)')&timerange=(global:(linkTo:!(timeline),timerange:(from:1559800800000,kind:absolute,to:1559887199999)),timeline:(linkTo:!(global),timerange:(from:1559800800000,kind:absolute,to:1559887199999)))"
+      '/app/security/hosts/siem-windows/anomalies?query=(language:kuery,query:%27(process.name:%20%22conhost.exe%22%20or%20process.name:%20%22sc.exe%22)%27)&timerange=(global:(linkTo:!(timeline),timerange:(from:1559800800000,kind:absolute,to:1559887199999)),timeline:(linkTo:!(global),timerange:(from:1559800800000,kind:absolute,to:1559887199999)))'
     );
   });
 
@@ -173,7 +173,7 @@ describe('ml conditional links', () => {
     loginAndWaitForPageWithoutDateRange(mlHostMultiHostNullKqlQuery);
     cy.url().should(
       'include',
-      "/app/security#/hosts/anomalies?query=(language:kuery,query:'(host.name:%20%22siem-windows%22%20or%20host.name:%20%22siem-suricata%22)')&timerange=(global:(linkTo:!(timeline),timerange:(from:1559800800000,kind:absolute,to:1559887199999)),timeline:(linkTo:!(global),timerange:(from:1559800800000,kind:absolute,to:1559887199999)))"
+      '/app/security/hosts/anomalies?query=(language:kuery,query:%27(host.name:%20%22siem-windows%22%20or%20host.name:%20%22siem-suricata%22)%27)&timerange=(global:(linkTo:!(timeline),timerange:(from:1559800800000,kind:absolute,to:1559887199999)),timeline:(linkTo:!(global),timerange:(from:1559800800000,kind:absolute,to:1559887199999)))'
     );
   });
 
@@ -181,7 +181,7 @@ describe('ml conditional links', () => {
     loginAndWaitForPageWithoutDateRange(mlHostMultiHostKqlQuery);
     cy.url().should(
       'include',
-      "/app/security#/hosts/anomalies?query=(language:kuery,query:'(host.name:%20%22siem-windows%22%20or%20host.name:%20%22siem-suricata%22)%20and%20((process.name:%20%22conhost.exe%22%20or%20process.name:%20%22sc.exe%22))')&timerange=(global:(linkTo:!(timeline),timerange:(from:1559800800000,kind:absolute,to:1559887199999)),timeline:(linkTo:!(global),timerange:(from:1559800800000,kind:absolute,to:1559887199999)))"
+      '/app/security/hosts/anomalies?query=(language:kuery,query:%27(host.name:%20%22siem-windows%22%20or%20host.name:%20%22siem-suricata%22)%20and%20((process.name:%20%22conhost.exe%22%20or%20process.name:%20%22sc.exe%22))%27)&timerange=(global:(linkTo:!(timeline),timerange:(from:1559800800000,kind:absolute,to:1559887199999)),timeline:(linkTo:!(global),timerange:(from:1559800800000,kind:absolute,to:1559887199999)))'
     );
   });
 
@@ -189,7 +189,7 @@ describe('ml conditional links', () => {
     loginAndWaitForPageWithoutDateRange(mlHostVariableHostNullKqlQuery);
     cy.url().should(
       'include',
-      '/app/security#/hosts/anomalies?timerange=(global:(linkTo:!(timeline),timerange:(from:1559800800000,kind:absolute,to:1559887199999)),timeline:(linkTo:!(global),timerange:(from:1559800800000,kind:absolute,to:1559887199999)))'
+      '/app/security/hosts/anomalies?timerange=(global:(linkTo:!(timeline),timerange:(from:1559800800000,kind:absolute,to:1559887199999)),timeline:(linkTo:!(global),timerange:(from:1559800800000,kind:absolute,to:1559887199999)))'
     );
   });
 
@@ -197,7 +197,7 @@ describe('ml conditional links', () => {
     loginAndWaitForPageWithoutDateRange(mlHostVariableHostKqlQuery);
     cy.url().should(
       'include',
-      "/app/security#/hosts/anomalies?query=(language:kuery,query:'(process.name:%20%22conhost.exe%22%20or%20process.name:%20%22sc.exe%22)')&timerange=(global:(linkTo:!(timeline),timerange:(from:1559800800000,kind:absolute,to:1559887199999)),timeline:(linkTo:!(global),timerange:(from:1559800800000,kind:absolute,to:1559887199999)))"
+      '/app/security/hosts/anomalies?query=(language:kuery,query:%27(process.name:%20%22conhost.exe%22%20or%20process.name:%20%22sc.exe%22)%27)&timerange=(global:(linkTo:!(timeline),timerange:(from:1559800800000,kind:absolute,to:1559887199999)),timeline:(linkTo:!(global),timerange:(from:1559800800000,kind:absolute,to:1559887199999)))'
     );
   });
 });
diff --git a/x-pack/plugins/security_solution/cypress/integration/navigation.spec.ts b/x-pack/plugins/security_solution/cypress/integration/navigation.spec.ts
index 2014e34c11886..67b72982f44e0 100644
--- a/x-pack/plugins/security_solution/cypress/integration/navigation.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/navigation.spec.ts
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { DETECTIONS, HOSTS, NETWORK, OVERVIEW, TIMELINES } from '../screens/security_header';
+import { ALERTS, HOSTS, NETWORK, OVERVIEW, TIMELINES } from '../screens/security_header';
 
 import { loginAndWaitForPage } from '../tasks/login';
 import { navigateFromHeaderTo } from '../tasks/security_header';
@@ -16,26 +16,26 @@ describe('top-level navigation common to all pages in the Security app', () => {
   });
   it('navigates to the Overview page', () => {
     navigateFromHeaderTo(OVERVIEW);
-    cy.url().should('include', '/security#/overview');
+    cy.url().should('include', '/security/overview');
   });
 
   it('navigates to the Hosts page', () => {
     navigateFromHeaderTo(HOSTS);
-    cy.url().should('include', '/security#/hosts');
+    cy.url().should('include', '/security/hosts');
   });
 
   it('navigates to the Network page', () => {
     navigateFromHeaderTo(NETWORK);
-    cy.url().should('include', '/security#/network');
+    cy.url().should('include', '/security/network');
   });
 
-  it('navigates to the Detections page', () => {
-    navigateFromHeaderTo(DETECTIONS);
-    cy.url().should('include', '/security#/detections');
+  it('navigates to the Alerts page', () => {
+    navigateFromHeaderTo(ALERTS);
+    cy.url().should('include', '/security/alerts');
   });
 
   it('navigates to the Timelines page', () => {
     navigateFromHeaderTo(TIMELINES);
-    cy.url().should('include', '/security#/timelines');
+    cy.url().should('include', '/security/timelines');
   });
 });
diff --git a/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules.spec.ts b/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules.spec.ts
index e8f9411c149d4..72a86e3ffffc5 100644
--- a/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules.spec.ts
@@ -26,7 +26,7 @@ import {
   waitForRuleToBeActivated,
 } from '../tasks/alert_detection_rules';
 
-import { DETECTIONS } from '../urls/navigation';
+import { ALERTS_URL } from '../urls/navigation';
 
 describe('Detection rules', () => {
   before(() => {
@@ -38,7 +38,7 @@ describe('Detection rules', () => {
   });
 
   it('Sorts by activated rules', () => {
-    loginAndWaitForPageWithoutDateRange(DETECTIONS);
+    loginAndWaitForPageWithoutDateRange(ALERTS_URL);
     waitForAlertsPanelToBeLoaded();
     waitForAlertsIndexToBeCreated();
     goToManageAlertDetectionRules();
diff --git a/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules_custom.spec.ts b/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules_custom.spec.ts
index e5cec16c48a37..48d0c2e7238cd 100644
--- a/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules_custom.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules_custom.spec.ts
@@ -62,7 +62,7 @@ import {
 import { esArchiverLoad, esArchiverUnload } from '../tasks/es_archiver';
 import { loginAndWaitForPageWithoutDateRange } from '../tasks/login';
 
-import { DETECTIONS } from '../urls/navigation';
+import { ALERTS_URL } from '../urls/navigation';
 
 describe('Detection rules, custom', () => {
   before(() => {
@@ -74,7 +74,7 @@ describe('Detection rules, custom', () => {
   });
 
   it('Creates and activates a new custom rule', () => {
-    loginAndWaitForPageWithoutDateRange(DETECTIONS);
+    loginAndWaitForPageWithoutDateRange(ALERTS_URL);
     waitForAlertsPanelToBeLoaded();
     waitForAlertsIndexToBeCreated();
     goToManageAlertDetectionRules();
@@ -169,7 +169,7 @@ describe('Detection rules, custom', () => {
 describe('Deletes custom rules', () => {
   beforeEach(() => {
     esArchiverLoad('custom_rules');
-    loginAndWaitForPageWithoutDateRange(DETECTIONS);
+    loginAndWaitForPageWithoutDateRange(ALERTS_URL);
     waitForAlertsPanelToBeLoaded();
     waitForAlertsIndexToBeCreated();
     goToManageAlertDetectionRules();
diff --git a/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules_export.spec.ts b/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules_export.spec.ts
index 4a12990438999..edb559bf6a279 100644
--- a/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules_export.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules_export.spec.ts
@@ -13,7 +13,7 @@ import { esArchiverLoad, esArchiverUnload } from '../tasks/es_archiver';
 import { loginAndWaitForPageWithoutDateRange } from '../tasks/login';
 import { exportFirstRule } from '../tasks/alert_detection_rules';
 
-import { DETECTIONS } from '../urls/navigation';
+import { ALERTS_URL } from '../urls/navigation';
 
 const EXPECTED_EXPORTED_RULE_FILE_PATH = 'cypress/test_files/expected_rules_export.ndjson';
 
@@ -32,7 +32,7 @@ describe('Export rules', () => {
   });
 
   it('Exports a custom rule', () => {
-    loginAndWaitForPageWithoutDateRange(DETECTIONS);
+    loginAndWaitForPageWithoutDateRange(ALERTS_URL);
     waitForAlertsPanelToBeLoaded();
     waitForAlertsIndexToBeCreated();
     goToManageAlertDetectionRules();
diff --git a/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules_ml.spec.ts b/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules_ml.spec.ts
index fd2dff27ad359..3e0fc2e1b37fd 100644
--- a/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules_ml.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules_ml.spec.ts
@@ -58,7 +58,7 @@ import {
 import { esArchiverLoad, esArchiverUnload } from '../tasks/es_archiver';
 import { loginAndWaitForPageWithoutDateRange } from '../tasks/login';
 
-import { DETECTIONS } from '../urls/navigation';
+import { ALERTS_URL } from '../urls/navigation';
 
 describe('Detection rules, machine learning', () => {
   before(() => {
@@ -70,7 +70,7 @@ describe('Detection rules, machine learning', () => {
   });
 
   it('Creates and activates a new ml rule', () => {
-    loginAndWaitForPageWithoutDateRange(DETECTIONS);
+    loginAndWaitForPageWithoutDateRange(ALERTS_URL);
     waitForAlertsPanelToBeLoaded();
     waitForAlertsIndexToBeCreated();
     goToManageAlertDetectionRules();
diff --git a/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules_prebuilt.spec.ts b/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules_prebuilt.spec.ts
index 2cd087b2ca5e1..f819c91a77374 100644
--- a/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules_prebuilt.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/signal_detection_rules_prebuilt.spec.ts
@@ -31,7 +31,7 @@ import {
 import { esArchiverLoadEmptyKibana, esArchiverUnloadEmptyKibana } from '../tasks/es_archiver';
 import { loginAndWaitForPageWithoutDateRange } from '../tasks/login';
 
-import { DETECTIONS } from '../urls/navigation';
+import { ALERTS_URL } from '../urls/navigation';
 
 import { totalNumberOfPrebuiltRules } from '../objects/rule';
 
@@ -48,7 +48,7 @@ describe('Detection rules, prebuilt rules', () => {
     const expectedNumberOfRules = totalNumberOfPrebuiltRules;
     const expectedElasticRulesBtnText = `Elastic rules (${expectedNumberOfRules})`;
 
-    loginAndWaitForPageWithoutDateRange(DETECTIONS);
+    loginAndWaitForPageWithoutDateRange(ALERTS_URL);
     waitForAlertsPanelToBeLoaded();
     waitForAlertsIndexToBeCreated();
     goToManageAlertDetectionRules();
@@ -73,7 +73,7 @@ describe('Deleting prebuilt rules', () => {
     const expectedElasticRulesBtnText = `Elastic rules (${expectedNumberOfRules})`;
 
     esArchiverLoadEmptyKibana();
-    loginAndWaitForPageWithoutDateRange(DETECTIONS);
+    loginAndWaitForPageWithoutDateRange(ALERTS_URL);
     waitForAlertsPanelToBeLoaded();
     waitForAlertsIndexToBeCreated();
     goToManageAlertDetectionRules();
diff --git a/x-pack/plugins/security_solution/cypress/integration/url_compatibility.spec.ts b/x-pack/plugins/security_solution/cypress/integration/url_compatibility.spec.ts
new file mode 100644
index 0000000000000..911fd7e0f3483
--- /dev/null
+++ b/x-pack/plugins/security_solution/cypress/integration/url_compatibility.spec.ts
@@ -0,0 +1,17 @@
+/*
+ * 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 { loginAndWaitForPage } from '../tasks/login';
+
+import { DETECTIONS } from '../urls/navigation';
+
+describe('URL compatibility', () => {
+  it('Redirects to Alerts from old Detections URL', () => {
+    loginAndWaitForPage(DETECTIONS);
+
+    cy.url().should('include', '/security/alerts');
+  });
+});
diff --git a/x-pack/plugins/security_solution/cypress/integration/url_state.spec.ts b/x-pack/plugins/security_solution/cypress/integration/url_state.spec.ts
index 425ed23bdafec..1cefa7fe73d35 100644
--- a/x-pack/plugins/security_solution/cypress/integration/url_state.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/url_state.spec.ts
@@ -166,7 +166,10 @@ describe('url state', () => {
     loginAndWaitForPageWithoutDateRange(ABSOLUTE_DATE_RANGE.url);
     kqlSearch('source.ip: "10.142.0.9" {enter}');
 
-    cy.url().should('include', `query=(language:kuery,query:'source.ip:%20%2210.142.0.9%22%20')`);
+    cy.url().should(
+      'include',
+      `query=(language:kuery,query:%27source.ip:%20%2210.142.0.9%22%20%27)`
+    );
   });
 
   it('sets the url state when kql is set and check if href reflect this change', () => {
@@ -177,7 +180,7 @@ describe('url state', () => {
     cy.get(NETWORK).should(
       'have.attr',
       'href',
-      "#/link-to/network?query=(language:kuery,query:'source.ip:%20%2210.142.0.9%22%20')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1564691609186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1564691609186)))"
+      `/app/security/network?query=(language:kuery,query:'source.ip:%20%2210.142.0.9%22%20')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1564691609186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1564691609186)))`
     );
   });
 
@@ -190,12 +193,12 @@ describe('url state', () => {
     cy.get(HOSTS).should(
       'have.attr',
       'href',
-      "#/link-to/hosts?query=(language:kuery,query:'host.name:%20%22siem-kibana%22%20')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1577914409186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1577914409186)))"
+      `/app/security/hosts?query=(language:kuery,query:'host.name:%20%22siem-kibana%22%20')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1577914409186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1577914409186)))`
     );
     cy.get(NETWORK).should(
       'have.attr',
       'href',
-      "#/link-to/network?query=(language:kuery,query:'host.name:%20%22siem-kibana%22%20')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1577914409186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1577914409186)))"
+      `/app/security/network?query=(language:kuery,query:'host.name:%20%22siem-kibana%22%20')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1577914409186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1577914409186)))`
     );
     cy.get(HOSTS_NAMES).first().invoke('text').should('eq', 'siem-kibana');
 
@@ -206,21 +209,21 @@ describe('url state', () => {
     cy.get(ANOMALIES_TAB).should(
       'have.attr',
       'href',
-      "#/hosts/siem-kibana/anomalies?query=(language:kuery,query:'agent.type:%20%22auditbeat%22%20')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1577914409186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1577914409186)))"
+      "/app/security/hosts/siem-kibana/anomalies?query=(language:kuery,query:'agent.type:%20%22auditbeat%22%20')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1577914409186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1577914409186)))"
     );
     cy.get(BREADCRUMBS)
       .eq(1)
       .should(
         'have.attr',
         'href',
-        "#/link-to/hosts?query=(language:kuery,query:'agent.type:%20%22auditbeat%22%20')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1577914409186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1577914409186)))"
+        `/app/security/hosts?query=(language:kuery,query:'agent.type:%20%22auditbeat%22%20')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1577914409186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1577914409186)))`
       );
     cy.get(BREADCRUMBS)
       .eq(2)
       .should(
         'have.attr',
         'href',
-        "#/link-to/hosts/siem-kibana?query=(language:kuery,query:'agent.type:%20%22auditbeat%22%20')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1577914409186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1577914409186)))"
+        `/app/security/hosts/siem-kibana?query=(language:kuery,query:'agent.type:%20%22auditbeat%22%20')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1577914409186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1577914409186)))`
       );
   });
 
@@ -231,7 +234,7 @@ describe('url state', () => {
     cy.get(KQL_INPUT).should('have.attr', 'value', 'source.ip: "10.142.0.9"');
   });
 
-  it('sets and reads the url state for timeline by id', () => {
+  it.skip('sets and reads the url state for timeline by id', () => {
     loginAndWaitForPage(HOSTS_PAGE);
     openTimeline();
     executeTimelineKQL('host.name: *');
@@ -254,10 +257,11 @@ describe('url state', () => {
       const newTimelineId = matched && matched.length > 0 ? matched[0] : 'null';
       expect(matched).to.have.lengthOf(1);
       closeTimeline();
-      cy.visit('/app/kibana');
-      cy.visit(`/app/security#/overview?timeline\=(id:'${newTimelineId}',isOpen:!t)`);
+      cy.visit('/app/home');
+      cy.visit(`/app/security/timelines?timeline=(id:'${newTimelineId}',isOpen:!t)`);
       cy.contains('a', 'Security');
       cy.get(DATE_PICKER_APPLY_BUTTON_TIMELINE).invoke('text').should('not.equal', 'Updating');
+      cy.get(TIMELINE_TITLE).should('be.visible');
       cy.get(TIMELINE_TITLE).should('have.attr', 'value', timelineName);
     });
   });
diff --git a/x-pack/plugins/security_solution/cypress/screens/security_header.ts b/x-pack/plugins/security_solution/cypress/screens/security_header.ts
index c2dab051793c1..89deeee0426d0 100644
--- a/x-pack/plugins/security_solution/cypress/screens/security_header.ts
+++ b/x-pack/plugins/security_solution/cypress/screens/security_header.ts
@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export const BREADCRUMBS = '[data-test-subj="breadcrumbs"] a';
+export const ALERTS = '[data-test-subj="navigation-alerts"]';
 
-export const DETECTIONS = '[data-test-subj="navigation-detections"]';
+export const BREADCRUMBS = '[data-test-subj="breadcrumbs"] a';
 
 export const HOSTS = '[data-test-subj="navigation-hosts"]';
 
diff --git a/x-pack/plugins/security_solution/cypress/urls/ml_conditional_links.ts b/x-pack/plugins/security_solution/cypress/urls/ml_conditional_links.ts
index cfa18099e5888..655418fc98bf8 100644
--- a/x-pack/plugins/security_solution/cypress/urls/ml_conditional_links.ts
+++ b/x-pack/plugins/security_solution/cypress/urls/ml_conditional_links.ts
@@ -25,52 +25,52 @@
 
 // Single IP with a null for the Query:
 export const mlNetworkSingleIpNullKqlQuery =
-  "/app/security#/ml-network/ip/127.0.0.1?query=!n&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
+  "/app/siem#/ml-network/ip/127.0.0.1?query=!n&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
 
 // Single IP with a value for the Query:
 export const mlNetworkSingleIpKqlQuery =
-  "/app/security#/ml-network/ip/127.0.0.1?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
+  "/app/siem#/ml-network/ip/127.0.0.1?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
 
 // Multiple IPs with a null for the Query:
 export const mlNetworkMultipleIpNullKqlQuery =
-  "/app/security#/ml-network/ip/127.0.0.1,127.0.0.2?query=!n&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
+  "/app/siem#/ml-network/ip/127.0.0.1,127.0.0.2?query=!n&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
 
 // Multiple IPs with a value for the Query:
 export const mlNetworkMultipleIpKqlQuery =
-  "/app/security#/ml-network/ip/127.0.0.1,127.0.0.2?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
+  "/app/siem#/ml-network/ip/127.0.0.1,127.0.0.2?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
 
 // $ip$ with a null Query:
 export const mlNetworkNullKqlQuery =
-  "/app/security#/ml-network/ip/$ip$?query=!n&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
+  "/app/siem#/ml-network/ip/$ip$?query=!n&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
 
 // $ip$ with a value for the Query:
 export const mlNetworkKqlQuery =
-  "/app/security#/ml-network/ip/$ip$?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
+  "/app/siem#/ml-network/ip/$ip$?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
 
 // Single host name with a null for the Query:
 export const mlHostSingleHostNullKqlQuery =
-  "/app/security#/ml-hosts/siem-windows?query=!n&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
+  "/app/siem#/ml-hosts/siem-windows?query=!n&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
 
 // Single host name with a variable in the Query:
 export const mlHostSingleHostKqlQueryVariable =
-  "/app/security#/ml-hosts/siem-windows?query=(language:kuery,query:'process.name%20:%20%22$process.name$%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
+  "/app/siem#/ml-hosts/siem-windows?query=(language:kuery,query:'process.name%20:%20%22$process.name$%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
 
 // Single host name with a value for Query:
 export const mlHostSingleHostKqlQuery =
-  "/app/security#/ml-hosts/siem-windows?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
+  "/app/siem#/ml-hosts/siem-windows?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
 
 // Multiple host names with null for Query:
 export const mlHostMultiHostNullKqlQuery =
-  "/app/security#/ml-hosts/siem-windows,siem-suricata?query=!n&&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
+  "/app/siem#/ml-hosts/siem-windows,siem-suricata?query=!n&&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
 
 // Multiple host names with a value for Query:
 export const mlHostMultiHostKqlQuery =
-  "/app/security#/ml-hosts/siem-windows,siem-suricata?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
+  "/app/siem#/ml-hosts/siem-windows,siem-suricata?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
 
 // Undefined/null host name with a null for the KQL:
 export const mlHostVariableHostNullKqlQuery =
-  "/app/security#/ml-hosts/$host.name$?query=!n&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
+  "/app/siem#/ml-hosts/$host.name$?query=!n&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
 
 // Undefined/null host name but with a value for Query:
 export const mlHostVariableHostKqlQuery =
-  "/app/security#/ml-hosts/$host.name$?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
+  "/app/siem#/ml-hosts/$host.name$?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
diff --git a/x-pack/plugins/security_solution/cypress/urls/navigation.ts b/x-pack/plugins/security_solution/cypress/urls/navigation.ts
index 9bfe2e9e5102e..7978aebfb413b 100644
--- a/x-pack/plugins/security_solution/cypress/urls/navigation.ts
+++ b/x-pack/plugins/security_solution/cypress/urls/navigation.ts
@@ -4,16 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export const CASES = '/app/security#/case';
-export const DETECTIONS = 'app/security#/detections';
-export const HOSTS_PAGE = '/app/security#/hosts/allHosts';
+export const ALERTS_URL = 'app/security/alerts';
+export const CASES = '/app/security/cases';
+export const DETECTIONS = '/app/siem#/detections';
+export const HOSTS_PAGE = '/app/security/hosts/allHosts';
 export const HOSTS_PAGE_TAB_URLS = {
-  allHosts: '/app/security#/hosts/allHosts',
-  anomalies: '/app/security#/hosts/anomalies',
-  authentications: '/app/security#/hosts/authentications',
-  events: '/app/security#/hosts/events',
-  uncommonProcesses: '/app/security#/hosts/uncommonProcesses',
+  allHosts: '/app/security/hosts/allHosts',
+  anomalies: '/app/security/hosts/anomalies',
+  authentications: '/app/security/hosts/authentications',
+  events: '/app/security/hosts/events',
+  uncommonProcesses: '/app/security/hosts/uncommonProcesses',
 };
-export const NETWORK_PAGE = '/app/security#/network';
-export const OVERVIEW_PAGE = '/app/security#/overview';
-export const TIMELINES_PAGE = '/app/security#/timelines';
+export const NETWORK_PAGE = '/app/security/network';
+export const OVERVIEW_PAGE = '/app/security/overview';
+export const TIMELINES_PAGE = '/app/security/timelines';
diff --git a/x-pack/plugins/security_solution/cypress/urls/state.ts b/x-pack/plugins/security_solution/cypress/urls/state.ts
index 6de30fdafdaf8..bdd90c21fbedf 100644
--- a/x-pack/plugins/security_solution/cypress/urls/state.ts
+++ b/x-pack/plugins/security_solution/cypress/urls/state.ts
@@ -6,16 +6,16 @@
 
 export const ABSOLUTE_DATE_RANGE = {
   url:
-    '/app/security#/network/?timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1564691609186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1564691609186)))',
+    '/app/security/network/flows/?timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1564691609186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1564691609186)))',
 
   urlUnlinked:
-    '/app/security#/network/?timerange=(global:(linkTo:!(),timerange:(from:1564689809186,kind:absolute,to:1564691609186)),timeline:(linkTo:!(),timerange:(from:1564776209186,kind:absolute,to:1564779809186)))',
-  urlKqlNetworkNetwork: `/app/security#/network/?query=(language:kuery,query:'source.ip:%20"10.142.0.9"')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1564691609186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1564691609186)))`,
-  urlKqlNetworkHosts: `/app/security#/network/?query=(language:kuery,query:'source.ip:%20"10.142.0.9"')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1564691609186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1564691609186)))`,
-  urlKqlHostsNetwork: `/app/security#/hosts/allHosts?query=(language:kuery,query:'source.ip:%20"10.142.0.9"')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1564691609186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1564691609186)))`,
-  urlKqlHostsHosts: `/app/security#/hosts/allHosts?query=(language:kuery,query:'source.ip:%20"10.142.0.9"')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1564691609186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1564691609186)))`,
+    '/app/security/network/flows/?timerange=(global:(linkTo:!(),timerange:(from:1564689809186,kind:absolute,to:1564691609186)),timeline:(linkTo:!(),timerange:(from:1564776209186,kind:absolute,to:1564779809186)))',
+  urlKqlNetworkNetwork: `/app/security/network/flows/?query=(language:kuery,query:'source.ip:%20"10.142.0.9"')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1564691609186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1564691609186)))`,
+  urlKqlNetworkHosts: `/app/security/network/flows/?query=(language:kuery,query:'source.ip:%20"10.142.0.9"')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1564691609186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1564691609186)))`,
+  urlKqlHostsNetwork: `/app/security/hosts/allHosts?query=(language:kuery,query:'source.ip:%20"10.142.0.9"')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1564691609186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1564691609186)))`,
+  urlKqlHostsHosts: `/app/security/hosts/allHosts?query=(language:kuery,query:'source.ip:%20"10.142.0.9"')&timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1564691609186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1564691609186)))`,
   urlHost:
-    '/app/security#/hosts/authentications?timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1564691609186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1564691609186)))',
+    '/app/security/hosts/authentications?timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1564691609186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1564691609186)))',
   urlHostNew:
-    '/app/security#/hosts/authentications?timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1577914409186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1577914409186)))',
+    '/app/security/hosts/authentications?timerange=(global:(linkTo:!(timeline),timerange:(from:1564689809186,kind:absolute,to:1577914409186)),timeline:(linkTo:!(global),timerange:(from:1564689809186,kind:absolute,to:1577914409186)))',
 };
diff --git a/x-pack/plugins/security_solution/public/alerts/components/activity_monitor/columns.tsx b/x-pack/plugins/security_solution/public/alerts/components/activity_monitor/columns.tsx
deleted file mode 100644
index 51a5397637e7c..0000000000000
--- a/x-pack/plugins/security_solution/public/alerts/components/activity_monitor/columns.tsx
+++ /dev/null
@@ -1,97 +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.
- */
-
-/* eslint-disable react/display-name */
-
-import {
-  EuiIconTip,
-  EuiLink,
-  EuiTextColor,
-  EuiBasicTableColumn,
-  EuiTableActionsColumnType,
-} from '@elastic/eui';
-import React from 'react';
-import { getEmptyTagValue } from '../../../common/components/empty_value';
-import { ColumnTypes } from './types';
-
-const actions: EuiTableActionsColumnType<ColumnTypes>['actions'] = [
-  {
-    available: (item: ColumnTypes) => item.status === 'Running',
-    description: 'Stop',
-    icon: 'stop',
-    isPrimary: true,
-    name: 'Stop',
-    onClick: () => {},
-    type: 'icon',
-  },
-  {
-    available: (item: ColumnTypes) => item.status === 'Stopped',
-    description: 'Resume',
-    icon: 'play',
-    isPrimary: true,
-    name: 'Resume',
-    onClick: () => {},
-    type: 'icon',
-  },
-];
-
-// Michael: Are we able to do custom, in-table-header filters, as shown in my wireframes?
-export const columns: Array<EuiBasicTableColumn<ColumnTypes>> = [
-  {
-    field: 'rule' as const,
-    name: 'Rule',
-    render: (value: ColumnTypes['rule'], _: ColumnTypes) => (
-      <EuiLink href={value.href}>{value.name}</EuiLink>
-    ),
-    sortable: true,
-    truncateText: true,
-  },
-  {
-    field: 'ran' as const,
-    name: 'Ran',
-    render: (value: ColumnTypes['ran'], _: ColumnTypes) => '--',
-    sortable: true,
-    truncateText: true,
-  },
-  {
-    field: 'lookedBackTo' as const,
-    name: 'Looked back to',
-    render: (value: ColumnTypes['lookedBackTo'], _: ColumnTypes) => '--',
-    sortable: true,
-    truncateText: true,
-  },
-  {
-    field: 'status' as const,
-    name: 'Status',
-    sortable: true,
-    truncateText: true,
-  },
-  {
-    field: 'response' as const,
-    name: 'Response',
-    render: (value: ColumnTypes['response'], _: ColumnTypes) => {
-      return value === undefined ? (
-        getEmptyTagValue()
-      ) : (
-        <>
-          {value === 'Fail' ? (
-            <EuiTextColor color="danger">
-              {value} <EuiIconTip content="Full fail message here." type="iInCircle" />
-            </EuiTextColor>
-          ) : (
-            <EuiTextColor color="secondary">{value}</EuiTextColor>
-          )}
-        </>
-      );
-    },
-    sortable: true,
-    truncateText: true,
-  },
-  {
-    actions,
-    width: '40px',
-  },
-];
diff --git a/x-pack/plugins/security_solution/public/alerts/components/activity_monitor/index.test.tsx b/x-pack/plugins/security_solution/public/alerts/components/activity_monitor/index.test.tsx
deleted file mode 100644
index c5a4057b64ea7..0000000000000
--- a/x-pack/plugins/security_solution/public/alerts/components/activity_monitor/index.test.tsx
+++ /dev/null
@@ -1,18 +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 { shallow } from 'enzyme';
-
-import { ActivityMonitor } from './index';
-
-describe('activity_monitor', () => {
-  it('renders correctly', () => {
-    const wrapper = shallow(<ActivityMonitor />);
-
-    expect(wrapper.find('[title="Activity monitor"]')).toBeTruthy();
-  });
-});
diff --git a/x-pack/plugins/security_solution/public/alerts/components/activity_monitor/index.tsx b/x-pack/plugins/security_solution/public/alerts/components/activity_monitor/index.tsx
deleted file mode 100644
index c2b6b0f025e1d..0000000000000
--- a/x-pack/plugins/security_solution/public/alerts/components/activity_monitor/index.tsx
+++ /dev/null
@@ -1,320 +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 { EuiBasicTable, EuiPanel, EuiSpacer } from '@elastic/eui';
-import React, { useState, useCallback } from 'react';
-import { HeaderSection } from '../../../common/components/header_section';
-import {
-  UtilityBar,
-  UtilityBarAction,
-  UtilityBarGroup,
-  UtilityBarSection,
-  UtilityBarText,
-} from '../../../common/components/utility_bar';
-import { columns } from './columns';
-import { ColumnTypes, PageTypes, SortTypes } from './types';
-
-export const ActivityMonitor = React.memo(() => {
-  const sampleTableData: ColumnTypes[] = [
-    {
-      id: 1,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Running',
-    },
-    {
-      id: 2,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Stopped',
-    },
-    {
-      id: 3,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Fail',
-    },
-    {
-      id: 4,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 5,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 6,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 7,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 8,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 9,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 10,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 11,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 12,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 13,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 14,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 15,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 16,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 17,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 18,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 19,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 20,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 21,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-  ];
-
-  const [itemsTotalState] = useState<number>(sampleTableData.length);
-  const [pageState, setPageState] = useState<PageTypes>({ index: 0, size: 20 });
-  // const [selectedState, setSelectedState] = useState<ColumnTypes[]>([]);
-  const [sortState, setSortState] = useState<SortTypes>({ field: 'ran', direction: 'desc' });
-
-  const handleChange = useCallback(
-    ({ page, sort }: { page?: PageTypes; sort?: SortTypes }) => {
-      setPageState(page!);
-      setSortState(sort!);
-    },
-    [setPageState, setSortState]
-  );
-
-  return (
-    <>
-      <EuiSpacer />
-
-      <EuiPanel>
-        <HeaderSection title="Activity monitor" />
-        <UtilityBar border>
-          <UtilityBarSection>
-            <UtilityBarGroup>
-              <UtilityBarText>{'Showing: 39 activites'}</UtilityBarText>
-            </UtilityBarGroup>
-
-            <UtilityBarGroup>
-              <UtilityBarText>{'Selected: 2 activities'}</UtilityBarText>
-
-              <UtilityBarAction iconType="stop">{'Stop selected'}</UtilityBarAction>
-            </UtilityBarGroup>
-
-            <UtilityBarGroup>
-              <UtilityBarAction iconType="cross">{'Clear 7 filters'}</UtilityBarAction>
-            </UtilityBarGroup>
-          </UtilityBarSection>
-        </UtilityBar>
-        {
-          // @ts-ignore `Columns` interface differs from EUI's `column` type and is used all over this plugin, so ignore the differences instead of refactoring a lot of code
-        }
-        <EuiBasicTable
-          columns={columns}
-          isSelectable
-          itemId="id"
-          items={sampleTableData}
-          onChange={handleChange}
-          pagination={{
-            pageIndex: pageState.index,
-            pageSize: pageState.size,
-            totalItemCount: itemsTotalState,
-            pageSizeOptions: [5, 10, 20],
-          }}
-          selection={{
-            selectable: (item: ColumnTypes) => item.status !== 'Completed',
-            selectableMessage: (selectable: boolean) =>
-              selectable ? '' : 'Completed runs cannot be acted upon',
-            onSelectionChange: (selectedItems: ColumnTypes[]) => {
-              // setSelectedState(selectedItems);
-            },
-          }}
-          sorting={{
-            sort: sortState,
-          }}
-        />
-      </EuiPanel>
-    </>
-  );
-});
-ActivityMonitor.displayName = 'ActivityMonitor';
diff --git a/x-pack/plugins/security_solution/public/alerts/components/activity_monitor/types.ts b/x-pack/plugins/security_solution/public/alerts/components/activity_monitor/types.ts
deleted file mode 100644
index 816992ff940dd..0000000000000
--- a/x-pack/plugins/security_solution/public/alerts/components/activity_monitor/types.ts
+++ /dev/null
@@ -1,29 +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 interface RuleTypes {
-  href: string;
-  name: string;
-}
-
-export interface ColumnTypes {
-  id: number;
-  rule: RuleTypes;
-  ran: string;
-  lookedBackTo: string;
-  status: string;
-  response?: string | undefined;
-}
-
-export interface PageTypes {
-  index: number;
-  size: number;
-}
-
-export interface SortTypes {
-  field: keyof ColumnTypes;
-  direction: 'asc' | 'desc';
-}
diff --git a/x-pack/plugins/security_solution/public/alerts/components/alerts_histogram_panel/index.test.tsx b/x-pack/plugins/security_solution/public/alerts/components/alerts_histogram_panel/index.test.tsx
index 3376df76ac6ec..db783e6cc2f88 100644
--- a/x-pack/plugins/security_solution/public/alerts/components/alerts_histogram_panel/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/components/alerts_histogram_panel/index.test.tsx
@@ -9,6 +9,15 @@ import { shallow } from 'enzyme';
 
 import { AlertsHistogramPanel } from './index';
 
+jest.mock('react-router-dom', () => {
+  const originalModule = jest.requireActual('react-router-dom');
+  return {
+    ...originalModule,
+    createHref: jest.fn(),
+    useHistory: jest.fn(),
+  };
+});
+
 jest.mock('../../../common/lib/kibana');
 jest.mock('../../../common/components/navigation/use_get_url_search');
 
diff --git a/x-pack/plugins/security_solution/public/alerts/components/alerts_histogram_panel/index.tsx b/x-pack/plugins/security_solution/public/alerts/components/alerts_histogram_panel/index.tsx
index ed98a37775576..e6eb8afc1658f 100644
--- a/x-pack/plugins/security_solution/public/alerts/components/alerts_histogram_panel/index.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/components/alerts_histogram_panel/index.tsx
@@ -4,9 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { Position } from '@elastic/charts';
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSelect, EuiPanel } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSelect, EuiPanel } from '@elastic/eui';
 import numeral from '@elastic/numeral';
 import React, { memo, useCallback, useMemo, useState, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import { isEmpty } from 'lodash/fp';
 import uuid from 'uuid';
@@ -18,19 +19,19 @@ import { escapeDataProviderId } from '../../../common/components/drag_and_drop/h
 import { HeaderSection } from '../../../common/components/header_section';
 import { Filter, esQuery, Query } from '../../../../../../../src/plugins/data/public';
 import { useQueryAlerts } from '../../containers/detection_engine/alerts/use_query';
-import { getDetectionEngineUrl } from '../../../common/components/link_to';
+import { getDetectionEngineUrl, useFormatUrl } from '../../../common/components/link_to';
 import { defaultLegendColors } from '../../../common/components/matrix_histogram/utils';
 import { InspectButtonContainer } from '../../../common/components/inspect';
-import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
 import { MatrixLoader } from '../../../common/components/matrix_histogram/matrix_loader';
 import { MatrixHistogramOption } from '../../../common/components/matrix_histogram/types';
 import { useKibana, useUiSetting$ } from '../../../common/lib/kibana';
-import { navTabs } from '../../../app/home/home_navigations';
 import { alertsHistogramOptions } from './config';
 import { formatAlertsData, getAlertsHistogramQuery, showInitialLoadingSpinner } from './helpers';
 import { AlertsHistogram } from './alerts_histogram';
 import * as i18n from './translations';
 import { RegisterQuery, AlertsHistogramOption, AlertsAggregation, AlertsTotal } from './types';
+import { LinkButton } from '../../../common/components/links';
+import { SecurityPageName } from '../../../app/types';
 
 const DEFAULT_PANEL_HEIGHT = 300;
 
@@ -102,6 +103,7 @@ export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
     title = i18n.HISTOGRAM_HEADER,
     updateDateRange,
   }) => {
+    const history = useHistory();
     // create a unique, but stable (across re-renders) query id
     const uniqueQueryId = useMemo(() => `${DETECTIONS_HISTOGRAM_ID}-${uuid.v4()}`, []);
     const [isInitialLoading, setIsInitialLoading] = useState(true);
@@ -122,7 +124,7 @@ export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
       signalIndexName
     );
     const kibana = useKibana();
-    const urlSearch = useGetUrlSearch(navTabs.detections);
+    const { formatUrl, search: urlSearch } = useFormatUrl(SecurityPageName.alerts);
 
     const totalAlerts = useMemo(
       () =>
@@ -142,6 +144,13 @@ export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    const goToDetectionEngine = useCallback(
+      (ev) => {
+        ev.preventDefault();
+        history.push(getDetectionEngineUrl(urlSearch));
+      },
+      [history, urlSearch]
+    );
     const formattedAlertsData = useMemo(() => formatAlertsData(alertsData), [alertsData]);
 
     const legendItems: LegendItem[] = useMemo(
@@ -231,11 +240,13 @@ export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
       if (showLinkToAlerts) {
         return (
           <ViewAlertsFlexItem grow={false}>
-            <EuiButton href={getDetectionEngineUrl(urlSearch)}>{i18n.VIEW_ALERTS}</EuiButton>
+            <LinkButton onClick={goToDetectionEngine} href={formatUrl(getDetectionEngineUrl())}>
+              {i18n.VIEW_ALERTS}
+            </LinkButton>
           </ViewAlertsFlexItem>
         );
       }
-    }, [showLinkToAlerts, urlSearch]);
+    }, [showLinkToAlerts, goToDetectionEngine, formatUrl]);
 
     const titleText = useMemo(() => (onlyField == null ? title : i18n.TOP(onlyField)), [
       onlyField,
diff --git a/x-pack/plugins/security_solution/public/alerts/components/rules/pre_packaged_rules/load_empty_prompt.test.tsx b/x-pack/plugins/security_solution/public/alerts/components/rules/pre_packaged_rules/load_empty_prompt.test.tsx
index 8ace42fc5c3f9..77c7efec262fa 100644
--- a/x-pack/plugins/security_solution/public/alerts/components/rules/pre_packaged_rules/load_empty_prompt.test.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/components/rules/pre_packaged_rules/load_empty_prompt.test.tsx
@@ -9,6 +9,15 @@ import { shallow } from 'enzyme';
 
 import { PrePackagedRulesPrompt } from './load_empty_prompt';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    useHistory: jest.fn(),
+  }),
+}));
+
+jest.mock('../../../../common/components/link_to');
+
 describe('PrePackagedRulesPrompt', () => {
   it('renders correctly', () => {
     const wrapper = shallow(
diff --git a/x-pack/plugins/security_solution/public/alerts/components/rules/pre_packaged_rules/load_empty_prompt.tsx b/x-pack/plugins/security_solution/public/alerts/components/rules/pre_packaged_rules/load_empty_prompt.tsx
index cd88c4ce72af8..d82b930210ecd 100644
--- a/x-pack/plugins/security_solution/public/alerts/components/rules/pre_packaged_rules/load_empty_prompt.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/components/rules/pre_packaged_rules/load_empty_prompt.tsx
@@ -8,8 +8,12 @@ import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/e
 import React, { memo, useCallback } from 'react';
 import styled from 'styled-components';
 
-import { DETECTION_ENGINE_PAGE_NAME } from '../../../../common/components/link_to/redirect_to_detection_engine';
+import { useHistory } from 'react-router-dom';
+import { getCreateRuleUrl } from '../../../../common/components/link_to/redirect_to_detection_engine';
 import * as i18n from './translations';
+import { LinkButton } from '../../../../common/components/links';
+import { SecurityPageName } from '../../../../app/types';
+import { useFormatUrl } from '../../../../common/components/link_to';
 
 const EmptyPrompt = styled(EuiEmptyPrompt)`
   align-self: center; /* Corrects horizontal centering in IE11 */
@@ -28,9 +32,20 @@ const PrePackagedRulesPromptComponent: React.FC<PrePackagedRulesPromptProps> = (
   loading = false,
   userHasNoPermissions = true,
 }) => {
+  const history = useHistory();
   const handlePreBuiltCreation = useCallback(() => {
     createPrePackagedRules();
   }, [createPrePackagedRules]);
+  const { formatUrl } = useFormatUrl(SecurityPageName.alerts);
+
+  const goToCreateRule = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      history.push(getCreateRuleUrl());
+    },
+    [history]
+  );
+
   return (
     <EmptyPrompt
       iconType="securityAnalyticsApp"
@@ -51,13 +66,14 @@ const PrePackagedRulesPromptComponent: React.FC<PrePackagedRulesPromptProps> = (
             </EuiButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <LinkButton
               isDisabled={userHasNoPermissions}
-              href={`#${DETECTION_ENGINE_PAGE_NAME}/rules/create`}
+              onClick={goToCreateRule}
+              href={formatUrl(getCreateRuleUrl())}
               iconType="plusInCircle"
             >
               {i18n.CREATE_RULE_ACTION}
-            </EuiButton>
+            </LinkButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       }
diff --git a/x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/index.tsx b/x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/index.tsx
index 66f04c9bc6add..7be50552c34d8 100644
--- a/x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/index.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/index.tsx
@@ -25,7 +25,7 @@ import {
   duplicateRulesAction,
 } from '../../../pages/detection_engine/rules/all/actions';
 import { GenericDownloader } from '../../../../common/components/generic_downloader';
-import { DETECTION_ENGINE_PAGE_NAME } from '../../../../common/components/link_to/redirect_to_detection_engine';
+import { getRulesUrl } from '../../../../common/components/link_to/redirect_to_detection_engine';
 
 const MyEuiButtonIcon = styled(EuiButtonIcon)`
   &.euiButtonIcon {
@@ -56,7 +56,7 @@ const RuleActionsOverflowComponent = ({
   const [, dispatchToaster] = useStateToaster();
 
   const onRuleDeletedCallback = useCallback(() => {
-    history.push(`/${DETECTION_ENGINE_PAGE_NAME}/rules`);
+    history.push(getRulesUrl());
   }, [history]);
 
   const actions = useMemo(
diff --git a/x-pack/plugins/security_solution/public/alerts/components/rules/step_rule_actions/index.tsx b/x-pack/plugins/security_solution/public/alerts/components/rules/step_rule_actions/index.tsx
index 9334bd59bebf5..061b8b0f8c36e 100644
--- a/x-pack/plugins/security_solution/public/alerts/components/rules/step_rule_actions/index.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/components/rules/step_rule_actions/index.tsx
@@ -34,6 +34,8 @@ import { RuleActionsField } from '../rule_actions_field';
 import { useKibana } from '../../../../common/lib/kibana';
 import { getSchema } from './schema';
 import * as I18n from './translations';
+import { APP_ID } from '../../../../../common/constants';
+import { SecurityPageName } from '../../../../app/types';
 
 interface StepRuleActionsProps extends RuleStepProps {
   defaultValues?: ActionsStepRule | null;
@@ -84,9 +86,16 @@ const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
     schema,
   });
 
-  const kibanaAbsoluteUrl = useMemo(() => application.getUrlForApp('siem', { absolute: true }), [
-    application,
-  ]);
+  // TO DO need to make sure that logic is still valid
+  const kibanaAbsoluteUrl = useMemo(() => {
+    const url = application.getUrlForApp(`${APP_ID}:${SecurityPageName.alerts}`, {
+      absolute: true,
+    });
+    if (url != null && url.includes('app/security/alerts')) {
+      return url.replace('app/security/alerts', 'app/security');
+    }
+    return url;
+  }, [application]);
 
   const onSubmit = useCallback(
     async (enabled: boolean) => {
diff --git a/x-pack/plugins/security_solution/public/alerts/index.ts b/x-pack/plugins/security_solution/public/alerts/index.ts
index 1409ad4f54696..a2e377a732936 100644
--- a/x-pack/plugins/security_solution/public/alerts/index.ts
+++ b/x-pack/plugins/security_solution/public/alerts/index.ts
@@ -7,7 +7,7 @@
 import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 import { getTimelinesInStorageByIds } from '../timelines/containers/local_storage';
 import { TimelineIdLiteral, TimelineId } from '../../common/types/timeline';
-import { getAlertsRoutes } from './routes';
+import { AlertsRoutes } from './routes';
 import { SecuritySubPlugin } from '../app/types';
 
 const ALERTS_TIMELINE_IDS: TimelineIdLiteral[] = [
@@ -20,7 +20,7 @@ export class Alerts {
 
   public start(storage: Storage): SecuritySubPlugin {
     return {
-      routes: getAlertsRoutes(),
+      SubPluginRoutes: AlertsRoutes,
       storageTimelines: {
         timelineById: getTimelinesInStorageByIds(storage, ALERTS_TIMELINE_IDS),
       },
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/detection_engine.test.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/detection_engine.test.tsx
index de8a732839728..62b942d03591c 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/detection_engine.test.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/detection_engine.test.tsx
@@ -15,12 +15,14 @@ import { useUserInfo } from '../../components/user_info';
 
 jest.mock('../../components/user_info');
 jest.mock('../../../common/lib/kibana');
+jest.mock('../../../common/components/link_to');
 jest.mock('react-router-dom', () => {
   const originalModule = jest.requireActual('react-router-dom');
 
   return {
     ...originalModule,
     useParams: jest.fn(),
+    useHistory: jest.fn(),
   };
 });
 
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/detection_engine.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/detection_engine.tsx
index 9e1c9db168bda..05a0b4441bb3a 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/detection_engine.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/detection_engine.tsx
@@ -4,11 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButton, EuiSpacer } from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
 import React, { useCallback, useMemo } from 'react';
 import { StickyContainer } from 'react-sticky';
 import { connect, ConnectedProps } from 'react-redux';
 
+import { useHistory } from 'react-router-dom';
+import { SecurityPageName } from '../../../app/types';
 import { TimelineId } from '../../../../common/types/timeline';
 import { GlobalTime } from '../../../common/containers/global_time';
 import {
@@ -37,6 +39,8 @@ import { DetectionEngineNoIndex } from './detection_engine_no_signal_index';
 import { DetectionEngineHeaderPage } from '../../components/detection_engine_header_page';
 import { DetectionEngineUserUnauthenticated } from './detection_engine_user_unauthenticated';
 import * as i18n from './translations';
+import { LinkButton } from '../../../common/components/links';
+import { useFormatUrl } from '../../../common/components/link_to';
 
 export const DetectionEnginePageComponent: React.FC<PropsFromRedux> = ({
   filters,
@@ -52,8 +56,9 @@ export const DetectionEnginePageComponent: React.FC<PropsFromRedux> = ({
     signalIndexName,
     hasIndexWrite,
   } = useUserInfo();
-
+  const history = useHistory();
   const [lastAlerts] = useAlertInfo({});
+  const { formatUrl } = useFormatUrl(SecurityPageName.alerts);
 
   const updateDateRangeCallback = useCallback<UpdateDateRange>(
     ({ x }) => {
@@ -66,6 +71,14 @@ export const DetectionEnginePageComponent: React.FC<PropsFromRedux> = ({
     [setAbsoluteRangeDatePicker]
   );
 
+  const goToRules = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      history.push(getRulesUrl());
+    },
+    [history]
+  );
+
   const indexToAdd = useMemo(() => (signalIndexName == null ? [] : [signalIndexName]), [
     signalIndexName,
   ]);
@@ -111,14 +124,15 @@ export const DetectionEnginePageComponent: React.FC<PropsFromRedux> = ({
                   }
                   title={i18n.PAGE_TITLE}
                 >
-                  <EuiButton
+                  <LinkButton
                     fill
-                    href={getRulesUrl()}
+                    onClick={goToRules}
+                    href={formatUrl(getRulesUrl())}
                     iconType="gear"
                     data-test-subj="manage-alert-detection-rules"
                   >
                     {i18n.BUTTON_MANAGE_RULES}
-                  </EuiButton>
+                  </LinkButton>
                 </DetectionEngineHeaderPage>
 
                 <GlobalTime>
@@ -161,7 +175,7 @@ export const DetectionEnginePageComponent: React.FC<PropsFromRedux> = ({
           );
         }}
       </WithSource>
-      <SpyRoute />
+      <SpyRoute pageName={SecurityPageName.alerts} />
     </>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/index.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/index.tsx
index 1f9b1373d404d..914734aba4ec6 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/index.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { Redirect, Route, Switch, RouteComponentProps } from 'react-router-dom';
+import { Route, Switch, RouteComponentProps } from 'react-router-dom';
 
 import { ManageUserInfo } from '../../components/user_info';
 import { CreateRulePage } from './rules/create';
@@ -14,34 +14,26 @@ import { EditRulePage } from './rules/edit';
 import { RuleDetailsPage } from './rules/details';
 import { RulesPage } from './rules';
 
-const detectionEnginePath = `/:pageName(detections)`;
-
 type Props = Partial<RouteComponentProps<{}>> & { url: string };
 
 const DetectionEngineContainerComponent: React.FC<Props> = () => (
   <ManageUserInfo>
     <Switch>
-      <Route exact path={`${detectionEnginePath}`} strict>
-        <DetectionEnginePage />
+      <Route path="/rules/id/:detailName/edit">
+        <EditRulePage />
       </Route>
-      <Route exact path={`${detectionEnginePath}/rules`}>
-        <RulesPage />
+      <Route path="/rules/id/:detailName">
+        <RuleDetailsPage />
       </Route>
-      <Route exact path={`${detectionEnginePath}/rules/create`}>
+      <Route path="/rules/create">
         <CreateRulePage />
       </Route>
-      <Route exact path={`${detectionEnginePath}/rules/id/:detailName`}>
-        <RuleDetailsPage />
+      <Route path="/rules">
+        <RulesPage />
       </Route>
-      <Route exact path={`${detectionEnginePath}/rules/id/:detailName/edit`}>
-        <EditRulePage />
+      <Route exact path="" strict>
+        <DetectionEnginePage />
       </Route>
-      <Route
-        path="/detections/"
-        render={({ location: { search = '' } }) => (
-          <Redirect from="/detections/" to={`/detections/${search}`} />
-        )}
-      />
     </Switch>
   </ManageUserInfo>
 );
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/actions.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/actions.tsx
index d414321e4b775..5169ff009d63c 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/actions.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/actions.tsx
@@ -7,14 +7,14 @@
 import * as H from 'history';
 import React, { Dispatch } from 'react';
 
-import { DETECTION_ENGINE_PAGE_NAME } from '../../../../../common/components/link_to/redirect_to_detection_engine';
 import {
   deleteRules,
   duplicateRules,
   enableRules,
   Rule,
 } from '../../../../../alerts/containers/detection_engine/rules';
-import { Action } from './reducer';
+
+import { getEditRuleUrl } from '../../../../../common/components/link_to/redirect_to_detection_engine';
 
 import {
   ActionToaster,
@@ -26,9 +26,10 @@ import { track, METRIC_TYPE, TELEMETRY_EVENT } from '../../../../../common/lib/t
 
 import * as i18n from '../translations';
 import { bucketRulesResponse } from './helpers';
+import { Action } from './reducer';
 
 export const editRuleAction = (rule: Rule, history: H.History) => {
-  history.push(`/${DETECTION_ENGINE_PAGE_NAME}/rules/id/${rule.id}/edit`);
+  history.push(getEditRuleUrl(rule.id));
 };
 
 export const duplicateRulesAction = async (
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/columns.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/columns.tsx
index cf8a3fdb6f1e6..030f510b7aa37 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/columns.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/columns.tsx
@@ -8,7 +8,6 @@
 
 import {
   EuiBadge,
-  EuiLink,
   EuiBasicTableColumn,
   EuiTableActionsColumnType,
   EuiText,
@@ -39,6 +38,7 @@ import {
 import { Action } from './reducer';
 import { LocalizedDateTooltip } from '../../../../../common/components/localized_date_tooltip';
 import * as detectionI18n from '../../translations';
+import { LinkAnchor } from '../../../../../common/components/links';
 
 export const getActions = (
   dispatch: React.Dispatch<Action>,
@@ -87,10 +87,11 @@ export type RuleStatusRowItemType = RuleStatus & {
 };
 export type RulesColumns = EuiBasicTableColumn<Rule> | EuiTableActionsColumnType<Rule>;
 export type RulesStatusesColumns = EuiBasicTableColumn<RuleStatusRowItemType>;
-
+type FormatUrl = (path: string) => string;
 interface GetColumns {
   dispatch: React.Dispatch<Action>;
   dispatchToaster: Dispatch<ActionToaster>;
+  formatUrl: FormatUrl;
   history: H.History;
   hasMlPermissions: boolean;
   hasNoPermissions: boolean;
@@ -102,6 +103,7 @@ interface GetColumns {
 export const getColumns = ({
   dispatch,
   dispatchToaster,
+  formatUrl,
   history,
   hasMlPermissions,
   hasNoPermissions,
@@ -113,9 +115,16 @@ export const getColumns = ({
       field: 'name',
       name: i18n.COLUMN_RULE,
       render: (value: Rule['name'], item: Rule) => (
-        <EuiLink data-test-subj="ruleName" href={getRuleDetailsUrl(item.id)}>
+        <LinkAnchor
+          data-test-subj="ruleName"
+          onClick={(ev: { preventDefault: () => void }) => {
+            ev.preventDefault();
+            history.push(getRuleDetailsUrl(item.id));
+          }}
+          href={formatUrl(getRuleDetailsUrl(item.id))}
+        >
           {value}
-        </EuiLink>
+        </LinkAnchor>
       ),
       truncateText: true,
       width: '24%',
@@ -222,16 +231,26 @@ export const getColumns = ({
   return hasNoPermissions ? cols : [...cols, ...actions];
 };
 
-export const getMonitoringColumns = (): RulesStatusesColumns[] => {
+export const getMonitoringColumns = (
+  history: H.History,
+  formatUrl: FormatUrl
+): RulesStatusesColumns[] => {
   const cols: RulesStatusesColumns[] = [
     {
       field: 'name',
       name: i18n.COLUMN_RULE,
       render: (value: RuleStatus['current_status']['status'], item: RuleStatusRowItemType) => {
         return (
-          <EuiLink data-test-subj="ruleName" href={getRuleDetailsUrl(item.id)}>
+          <LinkAnchor
+            data-test-subj="ruleName"
+            onClick={(ev: { preventDefault: () => void }) => {
+              ev.preventDefault();
+              history.push(getRuleDetailsUrl(item.id));
+            }}
+            href={formatUrl(getRuleDetailsUrl(item.id))}
+          >
             {value}
-          </EuiLink>
+          </LinkAnchor>
         );
       },
       truncateText: true,
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/index.test.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/index.test.tsx
index 11909ae7d9c53..363550f1682e0 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/index.test.tsx
@@ -13,6 +13,15 @@ import { TestProviders } from '../../../../../common/mock';
 import { wait } from '../../../../../common/lib/helpers';
 import { AllRules } from './index';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    useHistory: jest.fn(),
+  }),
+}));
+
+jest.mock('../../../../../common/components/link_to');
+
 jest.mock('./reducer', () => {
   return {
     allRulesReducer: jest.fn().mockReturnValue(() => ({
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/index.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/index.tsx
index 80ef5681189c5..65f7bb63c74e4 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/index.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/index.tsx
@@ -49,6 +49,8 @@ import { allRulesReducer, State } from './reducer';
 import { RulesTableFilters } from './rules_table_filters/rules_table_filters';
 import { useMlCapabilities } from '../../../../../common/components/ml_popover/hooks/use_ml_capabilities';
 import { hasMlAdminPermissions } from '../../../../../../common/machine_learning/has_ml_admin_permissions';
+import { SecurityPageName } from '../../../../../app/types';
+import { useFormatUrl } from '../../../../../common/components/link_to';
 
 const SORT_FIELD = 'enabled';
 const initialState: State = {
@@ -140,6 +142,7 @@ export const AllRules = React.memo<AllRulesProps>(
     const [, dispatchToaster] = useStateToaster();
     const mlCapabilities = useMlCapabilities();
     const [allRulesTab, setAllRulesTab] = useState(AllRulesTabs.rules);
+    const { formatUrl } = useFormatUrl(SecurityPageName.alerts);
 
     // TODO: Refactor license check + hasMlAdminPermissions to common check
     const hasMlPermissions =
@@ -225,6 +228,7 @@ export const AllRules = React.memo<AllRulesProps>(
       return getColumns({
         dispatch,
         dispatchToaster,
+        formatUrl,
         history,
         hasMlPermissions,
         hasNoPermissions,
@@ -239,6 +243,7 @@ export const AllRules = React.memo<AllRulesProps>(
     }, [
       dispatch,
       dispatchToaster,
+      formatUrl,
       hasMlPermissions,
       history,
       loadingRuleIds,
@@ -246,7 +251,10 @@ export const AllRules = React.memo<AllRulesProps>(
       reFetchRulesData,
     ]);
 
-    const monitoringColumns = useMemo(() => getMonitoringColumns(), []);
+    const monitoringColumns = useMemo(() => getMonitoringColumns(history, formatUrl), [
+      history,
+      formatUrl,
+    ]);
 
     useEffect(() => {
       if (reFetchRulesData != null) {
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/create/index.test.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/create/index.test.tsx
index 7749e38578e90..cc39a26a8faca 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/create/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/create/index.test.tsx
@@ -11,6 +11,14 @@ import { TestProviders } from '../../../../../common/mock';
 import { CreateRulePage } from './index';
 import { useUserInfo } from '../../../../components/user_info';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    useHistory: jest.fn(),
+  }),
+}));
+
+jest.mock('../../../../../common/components/link_to');
 jest.mock('../../../../components/user_info');
 
 describe('CreateRulePage', () => {
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/create/index.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/create/index.tsx
index de7c99acee6e5..de3e23b11aaf8 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/create/index.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/create/index.tsx
@@ -6,12 +6,15 @@
 
 import { EuiButtonEmpty, EuiAccordion, EuiHorizontalRule, EuiPanel, EuiSpacer } from '@elastic/eui';
 import React, { useCallback, useRef, useState, useMemo } from 'react';
-import { Redirect } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import styled, { StyledComponent } from 'styled-components';
 
 import { usePersistRule } from '../../../../../alerts/containers/detection_engine/rules';
 
-import { DETECTION_ENGINE_PAGE_NAME } from '../../../../../common/components/link_to/redirect_to_detection_engine';
+import {
+  getRulesUrl,
+  getDetectionEngineUrl,
+} from '../../../../../common/components/link_to/redirect_to_detection_engine';
 import { WrapperPage } from '../../../../../common/components/wrapper_page';
 import { displaySuccessToast, useStateToaster } from '../../../../../common/components/toasters';
 import { SpyRoute } from '../../../../../common/utils/route/spy_routes';
@@ -35,6 +38,7 @@ import {
 } from '../types';
 import { formatRule } from './helpers';
 import * as i18n from './translations';
+import { SecurityPageName } from '../../../../../app/types';
 
 const stepsRuleOrder = [
   RuleStep.defineRule,
@@ -117,6 +121,7 @@ const CreateRulePageComponent: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [stepsData.current['define-rule'].data]
   );
+  const history = useHistory();
 
   const setStepData = useCallback(
     (step: RuleStep, data: unknown, isValid: boolean) => {
@@ -269,20 +274,27 @@ const CreateRulePageComponent: React.FC = () => {
   if (isSaved) {
     const ruleName = (stepsData.current[RuleStep.aboutRule].data as AboutStepRule).name;
     displaySuccessToast(i18n.SUCCESSFULLY_CREATED_RULES(ruleName), dispatchToaster);
-    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}/rules`} />;
+    history.replace(getRulesUrl());
+    return null;
   }
 
   if (redirectToDetections(isSignalIndexExists, isAuthenticated, hasEncryptionKey)) {
-    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}`} />;
+    history.replace(getDetectionEngineUrl());
+    return null;
   } else if (userHasNoPermissions(canUserCRUD)) {
-    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}/rules`} />;
+    history.replace(getRulesUrl());
+    return null;
   }
 
   return (
     <>
       <WrapperPage restrictWidth>
         <DetectionEngineHeaderPage
-          backOptions={{ href: '#detections/rules', text: i18n.BACK_TO_RULES }}
+          backOptions={{
+            href: getRulesUrl(),
+            text: i18n.BACK_TO_RULES,
+            pageId: SecurityPageName.alerts,
+          }}
           border
           isLoading={isLoading || loading}
           title={i18n.PAGE_TITLE}
@@ -423,7 +435,7 @@ const CreateRulePageComponent: React.FC = () => {
         </MyEuiPanel>
       </WrapperPage>
 
-      <SpyRoute />
+      <SpyRoute pageName={SecurityPageName.alerts} />
     </>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.test.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.test.tsx
index d755f972f2950..df6ea65ba52ba 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.test.tsx
@@ -14,6 +14,7 @@ import { setAbsoluteRangeDatePicker } from '../../../../../common/store/inputs/a
 import { useUserInfo } from '../../../../components/user_info';
 import { useParams } from 'react-router-dom';
 
+jest.mock('../../../../../common/components/link_to');
 jest.mock('../../../../components/user_info');
 jest.mock('react-router-dom', () => {
   const originalModule = jest.requireActual('react-router-dom');
@@ -21,6 +22,7 @@ jest.mock('react-router-dom', () => {
   return {
     ...originalModule,
     useParams: jest.fn(),
+    useHistory: jest.fn(),
   };
 });
 
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.tsx
index d06103bd887f7..90fd4bb225ec5 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.tsx
@@ -9,7 +9,6 @@
 // TODO: Disabling complexity is temporary till this component is refactored as part of lists UI integration
 
 import {
-  EuiButton,
   EuiLoadingSpinner,
   EuiFlexGroup,
   EuiFlexItem,
@@ -20,7 +19,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { FC, memo, useCallback, useMemo, useState } from 'react';
-import { Redirect, useParams } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
 import { StickyContainer } from 'react-sticky';
 import { connect, ConnectedProps } from 'react-redux';
 
@@ -31,7 +30,7 @@ import { FormattedDate } from '../../../../../common/components/formatted_date';
 import {
   getEditRuleUrl,
   getRulesUrl,
-  DETECTION_ENGINE_PAGE_NAME,
+  getDetectionEngineUrl,
 } from '../../../../../common/components/link_to/redirect_to_detection_engine';
 import { SiemSearchBar } from '../../../../../common/components/search_bar';
 import { WrapperPage } from '../../../../../common/components/wrapper_page';
@@ -73,6 +72,9 @@ import { FailureHistory } from './failure_history';
 import { RuleStatus } from '../../../../components/rules//rule_status';
 import { useMlCapabilities } from '../../../../../common/components/ml_popover/hooks/use_ml_capabilities';
 import { hasMlAdminPermissions } from '../../../../../../common/machine_learning/has_ml_admin_permissions';
+import { SecurityPageName } from '../../../../../app/types';
+import { LinkButton } from '../../../../../common/components/links';
+import { useFormatUrl } from '../../../../../common/components/link_to';
 import { ExceptionsViewer } from '../../../../../common/components/exceptions/viewer';
 import { ExceptionListType } from '../../../../../common/components/exceptions/types';
 
@@ -130,6 +132,8 @@ export const RuleDetailsPageComponent: FC<PropsFromRedux> = ({
         };
   const [lastAlerts] = useAlertInfo({ ruleId });
   const mlCapabilities = useMlCapabilities();
+  const history = useHistory();
+  const { formatUrl } = useFormatUrl(SecurityPageName.alerts);
 
   // TODO: Refactor license check + hasMlAdminPermissions to common check
   const hasMlPermissions =
@@ -243,8 +247,17 @@ export const RuleDetailsPageComponent: FC<PropsFromRedux> = ({
     [ruleEnabled, setRuleEnabled]
   );
 
+  const goToEditRule = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      history.push(getEditRuleUrl(ruleId ?? ''));
+    },
+    [history, ruleId]
+  );
+
   if (redirectToDetections(isSignalIndexExists, isAuthenticated, hasEncryptionKey)) {
-    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}`} />;
+    history.replace(getDetectionEngineUrl());
+    return null;
   }
 
   return (
@@ -266,6 +279,7 @@ export const RuleDetailsPageComponent: FC<PropsFromRedux> = ({
                       backOptions={{
                         href: getRulesUrl(),
                         text: i18n.BACK_TO_RULES,
+                        pageId: SecurityPageName.alerts,
                       }}
                       border
                       subtitle={subTitle}
@@ -309,13 +323,14 @@ export const RuleDetailsPageComponent: FC<PropsFromRedux> = ({
                         <EuiFlexItem grow={false}>
                           <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
                             <EuiFlexItem grow={false}>
-                              <EuiButton
-                                href={getEditRuleUrl(ruleId ?? '')}
+                              <LinkButton
+                                onClick={goToEditRule}
                                 iconType="controlsHorizontal"
                                 isDisabled={userHasNoPermissions(canUserCRUD) ?? true}
+                                href={formatUrl(getEditRuleUrl(ruleId ?? ''))}
                               >
                                 {ruleI18n.EDIT_RULE_SETTINGS}
-                              </EuiButton>
+                              </LinkButton>
                             </EuiFlexItem>
                             <EuiFlexItem grow={false}>
                               <RuleActionsOverflow
@@ -425,7 +440,7 @@ export const RuleDetailsPageComponent: FC<PropsFromRedux> = ({
         }}
       </WithSource>
 
-      <SpyRoute state={{ ruleName: rule?.name }} />
+      <SpyRoute pageName={SecurityPageName.alerts} state={{ ruleName: rule?.name }} />
     </>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/edit/index.test.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/edit/index.test.tsx
index 91bc2ce7bce25..d754329bdd97f 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/edit/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/edit/index.test.tsx
@@ -12,12 +12,14 @@ import { EditRulePage } from './index';
 import { useUserInfo } from '../../../../components/user_info';
 import { useParams } from 'react-router-dom';
 
+jest.mock('../../../../../common/components/link_to');
 jest.mock('../../../../components/user_info');
 jest.mock('react-router-dom', () => {
   const originalModule = jest.requireActual('react-router-dom');
 
   return {
     ...originalModule,
+    useHistory: jest.fn(),
     useParams: jest.fn(),
   };
 });
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/edit/index.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/edit/index.tsx
index 73e76165183c5..ba7444d8e8a52 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/edit/index.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/edit/index.tsx
@@ -17,11 +17,14 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Redirect, useParams } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
 
 import { useRule, usePersistRule } from '../../../../../alerts/containers/detection_engine/rules';
 import { WrapperPage } from '../../../../../common/components/wrapper_page';
-import { DETECTION_ENGINE_PAGE_NAME } from '../../../../../common/components/link_to/redirect_to_detection_engine';
+import {
+  getRuleDetailsUrl,
+  getDetectionEngineUrl,
+} from '../../../../../common/components/link_to/redirect_to_detection_engine';
 import { displaySuccessToast, useStateToaster } from '../../../../../common/components/toasters';
 import { SpyRoute } from '../../../../../common/utils/route/spy_routes';
 import { useUserInfo } from '../../../../components/user_info';
@@ -48,6 +51,7 @@ import {
   ActionsStepRule,
 } from '../types';
 import * as i18n from './translations';
+import { SecurityPageName } from '../../../../../app/types';
 
 interface StepRuleForm {
   isValid: boolean;
@@ -67,6 +71,7 @@ interface ActionsStepRuleForm extends StepRuleForm {
 }
 
 const EditRulePageComponent: FC = () => {
+  const history = useHistory();
   const [, dispatchToaster] = useStateToaster();
   const {
     loading: initLoading,
@@ -328,6 +333,14 @@ const EditRulePageComponent: FC = () => {
     [selectedTab, stepsForm.current]
   );
 
+  const goToDetailsRule = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      history.replace(getRuleDetailsUrl(ruleId ?? ''));
+    },
+    [history, ruleId]
+  );
+
   useEffect(() => {
     if (rule != null) {
       const { aboutRuleData, defineRuleData, scheduleRuleData, ruleActionsData } = getStepsData({
@@ -348,13 +361,16 @@ const EditRulePageComponent: FC = () => {
 
   if (isSaved) {
     displaySuccessToast(i18n.SUCCESSFULLY_SAVED_RULE(rule?.name ?? ''), dispatchToaster);
-    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}/rules/id/${ruleId}`} />;
+    history.replace(getRuleDetailsUrl(ruleId ?? ''));
+    return null;
   }
 
   if (redirectToDetections(isSignalIndexExists, isAuthenticated, hasEncryptionKey)) {
-    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}`} />;
+    history.replace(getDetectionEngineUrl());
+    return null;
   } else if (userHasNoPermissions(canUserCRUD)) {
-    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}/rules/id/${ruleId}`} />;
+    history.replace(getRuleDetailsUrl(ruleId ?? ''));
+    return null;
   }
 
   return (
@@ -362,8 +378,9 @@ const EditRulePageComponent: FC = () => {
       <WrapperPage restrictWidth>
         <DetectionEngineHeaderPage
           backOptions={{
-            href: `#/${DETECTION_ENGINE_PAGE_NAME}/rules/id/${ruleId}`,
+            href: getRuleDetailsUrl(ruleId ?? ''),
             text: `${i18n.BACK_TO} ${rule?.name ?? ''}`,
+            pageId: SecurityPageName.alerts,
           }}
           isLoading={isLoading}
           title={i18n.PAGE_TITLE}
@@ -410,7 +427,7 @@ const EditRulePageComponent: FC = () => {
           responsive={false}
         >
           <EuiFlexItem grow={false}>
-            <EuiButton iconType="cross" href={`#/${DETECTION_ENGINE_PAGE_NAME}/rules/id/${ruleId}`}>
+            <EuiButton iconType="cross" onClick={goToDetailsRule}>
               {i18n.CANCEL}
             </EuiButton>
           </EuiFlexItem>
@@ -429,7 +446,7 @@ const EditRulePageComponent: FC = () => {
         </EuiFlexGroup>
       </WrapperPage>
 
-      <SpyRoute state={{ ruleName: rule?.name }} />
+      <SpyRoute pageName={SecurityPageName.alerts} state={{ ruleName: rule?.name }} />
     </>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/index.test.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/index.test.tsx
index 29f875d113a42..1c947deb95f97 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/index.test.tsx
@@ -11,6 +11,14 @@ import { RulesPage } from './index';
 import { useUserInfo } from '../../../components/user_info';
 import { usePrePackagedRules } from '../../../../alerts/containers/detection_engine/rules';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    useHistory: jest.fn(),
+  }),
+}));
+
+jest.mock('../../../../common/components/link_to');
 jest.mock('../../../components/user_info');
 jest.mock('../../../../alerts/containers/detection_engine/rules');
 
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/index.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/index.tsx
index 4d36a24781727..7684f710952e6 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/index.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/index.tsx
@@ -6,14 +6,13 @@
 
 import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React, { useCallback, useRef, useState } from 'react';
-import { Redirect } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 import {
   usePrePackagedRules,
   importRules,
 } from '../../../../alerts/containers/detection_engine/rules';
 import {
-  DETECTION_ENGINE_PAGE_NAME,
   getDetectionEngineUrl,
   getCreateRuleUrl,
 } from '../../../../common/components/link_to/redirect_to_detection_engine';
@@ -28,10 +27,14 @@ import { ReadOnlyCallOut } from '../../../components/rules/read_only_callout';
 import { UpdatePrePackagedRulesCallOut } from '../../../components/rules/pre_packaged_rules/update_callout';
 import { getPrePackagedRuleStatus, redirectToDetections, userHasNoPermissions } from './helpers';
 import * as i18n from './translations';
+import { SecurityPageName } from '../../../../app/types';
+import { LinkButton } from '../../../../common/components/links';
+import { useFormatUrl } from '../../../../common/components/link_to';
 
 type Func = (refreshPrePackagedRule?: boolean) => void;
 
 const RulesPageComponent: React.FC = () => {
+  const history = useHistory();
   const [showImportModal, setShowImportModal] = useState(false);
   const refreshRulesData = useRef<null | Func>(null);
   const {
@@ -63,6 +66,7 @@ const RulesPageComponent: React.FC = () => {
     rulesNotInstalled,
     rulesNotUpdated
   );
+  const { formatUrl } = useFormatUrl(SecurityPageName.alerts);
 
   const handleRefreshRules = useCallback(async () => {
     if (refreshRulesData.current != null) {
@@ -87,8 +91,17 @@ const RulesPageComponent: React.FC = () => {
     refreshRulesData.current = refreshRule;
   }, []);
 
+  const goToNewRule = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      history.push(getCreateRuleUrl());
+    },
+    [history]
+  );
+
   if (redirectToDetections(isSignalIndexExists, isAuthenticated, hasEncryptionKey)) {
-    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}`} />;
+    history.replace(getDetectionEngineUrl());
+    return null;
   }
 
   return (
@@ -114,6 +127,7 @@ const RulesPageComponent: React.FC = () => {
           backOptions={{
             href: getDetectionEngineUrl(),
             text: i18n.BACK_TO_ALERTS,
+            pageId: SecurityPageName.alerts,
           }}
           title={i18n.PAGE_TITLE}
         >
@@ -155,15 +169,16 @@ const RulesPageComponent: React.FC = () => {
               </EuiButton>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton
+              <LinkButton
                 data-test-subj="create-new-rule"
                 fill
-                href={getCreateRuleUrl()}
+                onClick={goToNewRule}
+                href={formatUrl(getCreateRuleUrl())}
                 iconType="plusInCircle"
                 isDisabled={userHasNoPermissions(canUserCRUD) || loading}
               >
                 {i18n.ADD_NEW_RULE}
-              </EuiButton>
+              </LinkButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </DetectionEngineHeaderPage>
@@ -188,7 +203,7 @@ const RulesPageComponent: React.FC = () => {
         />
       </WrapperPage>
 
-      <SpyRoute />
+      <SpyRoute pageName={SecurityPageName.alerts} />
     </>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/utils.test.ts b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/utils.test.ts
index 3d2f2dc03946a..91de1467a8310 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/utils.test.ts
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/utils.test.ts
@@ -6,6 +6,9 @@
 
 import { getBreadcrumbs } from './utils';
 
+const getUrlForAppMock = (appId: string, options?: { path?: string; absolute?: boolean }) =>
+  `${appId}${options?.path ?? ''}`;
+
 describe('getBreadcrumbs', () => {
   it('returns default value for incorrect params', () => {
     expect(
@@ -17,8 +20,9 @@ describe('getBreadcrumbs', () => {
           search: '',
           pathName: 'pathName',
         },
-        []
+        [],
+        getUrlForAppMock
       )
-    ).toEqual([{ href: '#/link-to/detections', text: 'Alerts' }]);
+    ).toEqual([{ href: 'securitySolution:alerts', text: 'Alerts' }]);
   });
 });
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/utils.ts b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/utils.ts
index e5cdbd7123ff4..203a93acd849c 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/utils.ts
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/utils.ts
@@ -9,7 +9,6 @@ import { isEmpty } from 'lodash/fp';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChromeBreadcrumb } from '../../../../../../../../src/core/public';
 import {
-  getDetectionEngineUrl,
   getDetectionEngineTabUrl,
   getRulesUrl,
   getRuleDetailsUrl,
@@ -19,21 +18,28 @@ import {
 import * as i18nDetections from '../translations';
 import * as i18nRules from './translations';
 import { RouteSpyState } from '../../../../common/utils/route/types';
+import { GetUrlForApp } from '../../../../common/components/navigation/types';
+import { SecurityPageName } from '../../../../app/types';
+import { APP_ID } from '../../../../../common/constants';
 
-const getTabBreadcrumb = (pathname: string, search: string[]) => {
-  const tabPath = pathname.split('/')[2];
+const getTabBreadcrumb = (pathname: string, search: string[], getUrlForApp: GetUrlForApp) => {
+  const tabPath = pathname.split('/')[1];
 
   if (tabPath === 'alerts') {
     return {
       text: i18nDetections.ALERT,
-      href: `${getDetectionEngineTabUrl(tabPath)}${!isEmpty(search[0]) ? search[0] : ''}`,
+      href: getUrlForApp(`${APP_ID}:${SecurityPageName.alerts}`, {
+        path: getDetectionEngineTabUrl(tabPath, !isEmpty(search[0]) ? search[0] : ''),
+      }),
     };
   }
 
   if (tabPath === 'rules') {
     return {
       text: i18nRules.PAGE_TITLE,
-      href: `${getRulesUrl()}${!isEmpty(search[0]) ? search[0] : ''}`,
+      href: getUrlForApp(`${APP_ID}:${SecurityPageName.alerts}`, {
+        path: getRulesUrl(!isEmpty(search[0]) ? search[0] : ''),
+      }),
     };
   }
 };
@@ -44,15 +50,21 @@ const isRuleCreatePage = (pathname: string) =>
 const isRuleEditPage = (pathname: string) =>
   pathname.includes('/rules') && pathname.includes('/edit');
 
-export const getBreadcrumbs = (params: RouteSpyState, search: string[]): ChromeBreadcrumb[] => {
+export const getBreadcrumbs = (
+  params: RouteSpyState,
+  search: string[],
+  getUrlForApp: GetUrlForApp
+): ChromeBreadcrumb[] => {
   let breadcrumb = [
     {
       text: i18nDetections.PAGE_TITLE,
-      href: `${getDetectionEngineUrl()}${!isEmpty(search[0]) ? search[0] : ''}`,
+      href: getUrlForApp(`${APP_ID}:${SecurityPageName.alerts}`, {
+        path: !isEmpty(search[0]) ? search[0] : '',
+      }),
     },
   ];
 
-  const tabBreadcrumb = getTabBreadcrumb(params.pathName, search);
+  const tabBreadcrumb = getTabBreadcrumb(params.pathName, search, getUrlForApp);
 
   if (tabBreadcrumb) {
     breadcrumb = [...breadcrumb, tabBreadcrumb];
@@ -63,7 +75,9 @@ export const getBreadcrumbs = (params: RouteSpyState, search: string[]): ChromeB
       ...breadcrumb,
       {
         text: params.state.ruleName,
-        href: `${getRuleDetailsUrl(params.detailName)}${!isEmpty(search[1]) ? search[1] : ''}`,
+        href: getUrlForApp(`${APP_ID}:${SecurityPageName.alerts}`, {
+          path: getRuleDetailsUrl(params.detailName, !isEmpty(search[0]) ? search[0] : ''),
+        }),
       },
     ];
   }
@@ -73,7 +87,9 @@ export const getBreadcrumbs = (params: RouteSpyState, search: string[]): ChromeB
       ...breadcrumb,
       {
         text: i18nRules.ADD_PAGE_TITLE,
-        href: `${getCreateRuleUrl()}${!isEmpty(search[1]) ? search[1] : ''}`,
+        href: getUrlForApp(`${APP_ID}:${SecurityPageName.alerts}`, {
+          path: getCreateRuleUrl(!isEmpty(search[0]) ? search[0] : ''),
+        }),
       },
     ];
   }
@@ -83,7 +99,9 @@ export const getBreadcrumbs = (params: RouteSpyState, search: string[]): ChromeB
       ...breadcrumb,
       {
         text: i18nRules.EDIT_PAGE_TITLE,
-        href: `${getEditRuleUrl(params.detailName)}${!isEmpty(search[1]) ? search[1] : ''}`,
+        href: getUrlForApp(`${APP_ID}:${SecurityPageName.alerts}`, {
+          path: getEditRuleUrl(params.detailName, !isEmpty(search[0]) ? search[0] : ''),
+        }),
       },
     ];
   }
diff --git a/x-pack/plugins/security_solution/public/alerts/routes.tsx b/x-pack/plugins/security_solution/public/alerts/routes.tsx
index 897ba3269546f..8f542d1f88670 100644
--- a/x-pack/plugins/security_solution/public/alerts/routes.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/routes.tsx
@@ -5,16 +5,19 @@
  */
 
 import React from 'react';
-import { Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 
 import { DetectionEngineContainer } from './pages/detection_engine';
-import { SiemPageName } from '../app/types';
+import { NotFoundPage } from '../app/404';
 
-export const getAlertsRoutes = () => [
-  <Route
-    path={`/:pageName(${SiemPageName.detections})`}
-    render={({ location, match }) => (
-      <DetectionEngineContainer location={location} url={match.url} />
-    )}
-  />,
-];
+export const AlertsRoutes: React.FC = () => (
+  <Switch>
+    <Route
+      path="/"
+      render={({ location, match }) => (
+        <DetectionEngineContainer location={location} url={match.url} />
+      )}
+    />
+    <Route render={() => <NotFoundPage />} />
+  </Switch>
+);
diff --git a/x-pack/plugins/security_solution/public/app/app.tsx b/x-pack/plugins/security_solution/public/app/app.tsx
index b5696c889d16e..147efb9e0d2e2 100644
--- a/x-pack/plugins/security_solution/public/app/app.tsx
+++ b/x-pack/plugins/security_solution/public/app/app.tsx
@@ -4,90 +4,38 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { createHashHistory, History } from 'history';
+import { History } from 'history';
 import React, { memo, useMemo, FC } from 'react';
 import { ApolloProvider } from 'react-apollo';
-import { Store } from 'redux';
+import { Store, Action } from 'redux';
 import { Provider as ReduxStoreProvider } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
 
 import { EuiErrorBoundary } from '@elastic/eui';
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
-import { BehaviorSubject } from 'rxjs';
-import { pluck } from 'rxjs/operators';
 
-import { KibanaContextProvider, useKibana, useUiSetting$ } from '../common/lib/kibana';
-import { Storage } from '../../../../../src/plugins/kibana_utils/public';
-
-import { DEFAULT_DARK_MODE } from '../../common/constants';
+import { DEFAULT_DARK_MODE, APP_NAME } from '../../common/constants';
 import { ErrorToastDispatcher } from '../common/components/error_toast_dispatcher';
-import { compose } from '../common/lib/compose/kibana_compose';
-import { AppFrontendLibs, AppApolloClient } from '../common/lib/lib';
-import { StartServices } from '../types';
-import { PageRouter } from './routes';
-import { createStore, createInitialState } from '../common/store';
-import { GlobalToaster, ManageGlobalToaster } from '../common/components/toasters';
 import { MlCapabilitiesProvider } from '../common/components/ml/permissions/ml_capabilities_provider';
-import { ManageGlobalTimeline } from '../timelines/components/manage_timeline';
+import { GlobalToaster, ManageGlobalToaster } from '../common/components/toasters';
+import { AppFrontendLibs } from '../common/lib/lib';
+import { KibanaContextProvider, useKibana, useUiSetting$ } from '../common/lib/kibana';
+import { State } from '../common/store';
 
 import { ApolloClientContext } from '../common/utils/apollo_context';
-import { SecuritySubPlugins } from './types';
-
-interface AppPluginRootComponentProps {
-  apolloClient: AppApolloClient;
-  history: History;
-  store: Store;
-  subPluginRoutes: React.ReactElement[];
-  theme: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-}
-
-const AppPluginRootComponent: React.FC<AppPluginRootComponentProps> = ({
-  apolloClient,
-  theme,
-  store,
-  subPluginRoutes,
-  history,
-}) => (
-  <ManageGlobalToaster>
-    <ManageGlobalTimeline>
-      <ReduxStoreProvider store={store}>
-        <ApolloProvider client={apolloClient}>
-          <ApolloClientContext.Provider value={apolloClient}>
-            <ThemeProvider theme={theme}>
-              <MlCapabilitiesProvider>
-                <PageRouter history={history} subPluginRoutes={subPluginRoutes} />
-              </MlCapabilitiesProvider>
-            </ThemeProvider>
-            <ErrorToastDispatcher />
-            <GlobalToaster />
-          </ApolloClientContext.Provider>
-        </ApolloProvider>
-      </ReduxStoreProvider>
-    </ManageGlobalTimeline>
-  </ManageGlobalToaster>
-);
-
-const AppPluginRoot = memo(AppPluginRootComponent);
+import { ManageGlobalTimeline } from '../timelines/components/manage_timeline';
+import { StartServices } from '../types';
+import { PageRouter } from './routes';
 
 interface StartAppComponent extends AppFrontendLibs {
-  subPlugins: SecuritySubPlugins;
-  storage: Storage;
+  children: React.ReactNode;
+  history: History;
+  store: Store<State, Action>;
 }
 
-const StartAppComponent: FC<StartAppComponent> = ({ subPlugins, storage, ...libs }) => {
-  const { routes: subPluginRoutes, store: subPluginsStore } = subPlugins;
+const StartAppComponent: FC<StartAppComponent> = ({ children, apolloClient, history, store }) => {
   const { i18n } = useKibana().services;
-  const history = createHashHistory();
-  const libs$ = new BehaviorSubject(libs);
-
-  const store = createStore(
-    createInitialState(subPluginsStore.initialState),
-    subPluginsStore.reducer,
-    libs$.pipe(pluck('apolloClient')),
-    storage,
-    subPluginsStore.middlewares
-  );
 
   const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
   const theme = useMemo(
@@ -101,13 +49,23 @@ const StartAppComponent: FC<StartAppComponent> = ({ subPlugins, storage, ...libs
   return (
     <EuiErrorBoundary>
       <i18n.Context>
-        <AppPluginRoot
-          apolloClient={libs.apolloClient}
-          history={history}
-          store={store}
-          subPluginRoutes={subPluginRoutes}
-          theme={theme}
-        />
+        <ManageGlobalToaster>
+          <ManageGlobalTimeline>
+            <ReduxStoreProvider store={store}>
+              <ApolloProvider client={apolloClient}>
+                <ApolloClientContext.Provider value={apolloClient}>
+                  <ThemeProvider theme={theme}>
+                    <MlCapabilitiesProvider>
+                      <PageRouter history={history}>{children}</PageRouter>
+                    </MlCapabilitiesProvider>
+                  </ThemeProvider>
+                  <ErrorToastDispatcher />
+                  <GlobalToaster />
+                </ApolloClientContext.Provider>
+              </ApolloProvider>
+            </ReduxStoreProvider>
+          </ManageGlobalTimeline>
+        </ManageGlobalToaster>
       </i18n.Context>
     </EuiErrorBoundary>
   );
@@ -115,22 +73,30 @@ const StartAppComponent: FC<StartAppComponent> = ({ subPlugins, storage, ...libs
 
 const StartApp = memo(StartAppComponent);
 
-interface SiemAppComponentProps {
+interface SecurityAppComponentProps extends AppFrontendLibs {
+  children: React.ReactNode;
+  history: History;
   services: StartServices;
-  subPlugins: SecuritySubPlugins;
+  store: Store<State, Action>;
 }
 
-const SiemAppComponent: React.FC<SiemAppComponentProps> = ({ services, subPlugins }) => {
-  return (
-    <KibanaContextProvider
-      services={{
-        appName: 'siem',
-        ...services,
-      }}
-    >
-      <StartApp subPlugins={subPlugins} storage={services.storage} {...compose(services)} />
-    </KibanaContextProvider>
-  );
-};
+const SecurityAppComponent: React.FC<SecurityAppComponentProps> = ({
+  children,
+  apolloClient,
+  history,
+  services,
+  store,
+}) => (
+  <KibanaContextProvider
+    services={{
+      appName: APP_NAME,
+      ...services,
+    }}
+  >
+    <StartApp apolloClient={apolloClient} history={history} store={store}>
+      {children}
+    </StartApp>
+  </KibanaContextProvider>
+);
 
-export const SiemApp = memo(SiemAppComponent);
+export const SecurityApp = memo(SecurityAppComponent);
diff --git a/x-pack/plugins/security_solution/public/app/home/home_navigations.tsx b/x-pack/plugins/security_solution/public/app/home/home_navigations.tsx
index bb9e99326182f..88e9d4179a971 100644
--- a/x-pack/plugins/security_solution/public/app/home/home_navigations.tsx
+++ b/x-pack/plugins/security_solution/public/app/home/home_navigations.tsx
@@ -4,66 +4,68 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  getDetectionEngineUrl,
-  getOverviewUrl,
-  getNetworkUrl,
-  getTimelinesUrl,
-  getHostsUrl,
-  getCaseUrl,
-} from '../../common/components/link_to';
 import * as i18n from './translations';
-import { SiemPageName, SiemNavTab } from '../types';
-import { getManagementUrl } from '../../management';
+import { SecurityPageName } from '../types';
+import { SiemNavTab } from '../../common/components/navigation/types';
+import {
+  APP_OVERVIEW_PATH,
+  APP_ALERTS_PATH,
+  APP_HOSTS_PATH,
+  APP_NETWORK_PATH,
+  APP_TIMELINES_PATH,
+  APP_CASES_PATH,
+  APP_MANAGEMENT_PATH,
+} from '../../../common/constants';
 
 export const navTabs: SiemNavTab = {
-  [SiemPageName.overview]: {
-    id: SiemPageName.overview,
+  [SecurityPageName.overview]: {
+    id: SecurityPageName.overview,
     name: i18n.OVERVIEW,
-    href: getOverviewUrl(),
+    href: APP_OVERVIEW_PATH,
     disabled: false,
     urlKey: 'overview',
   },
-  [SiemPageName.hosts]: {
-    id: SiemPageName.hosts,
+  [SecurityPageName.alerts]: {
+    id: SecurityPageName.alerts,
+    name: i18n.Alerts,
+    href: APP_ALERTS_PATH,
+    disabled: false,
+    urlKey: 'alerts',
+  },
+  [SecurityPageName.hosts]: {
+    id: SecurityPageName.hosts,
     name: i18n.HOSTS,
-    href: getHostsUrl(),
+    href: APP_HOSTS_PATH,
     disabled: false,
     urlKey: 'host',
   },
-  [SiemPageName.network]: {
-    id: SiemPageName.network,
+  [SecurityPageName.network]: {
+    id: SecurityPageName.network,
     name: i18n.NETWORK,
-    href: getNetworkUrl(),
+    href: APP_NETWORK_PATH,
     disabled: false,
     urlKey: 'network',
   },
-  [SiemPageName.detections]: {
-    id: SiemPageName.detections,
-    name: i18n.DETECTION_ENGINE,
-    href: getDetectionEngineUrl(),
-    disabled: false,
-    urlKey: 'detections',
-  },
-  [SiemPageName.timelines]: {
-    id: SiemPageName.timelines,
+
+  [SecurityPageName.timelines]: {
+    id: SecurityPageName.timelines,
     name: i18n.TIMELINES,
-    href: getTimelinesUrl(),
+    href: APP_TIMELINES_PATH,
     disabled: false,
     urlKey: 'timeline',
   },
-  [SiemPageName.case]: {
-    id: SiemPageName.case,
+  [SecurityPageName.case]: {
+    id: SecurityPageName.case,
     name: i18n.CASE,
-    href: getCaseUrl(null),
+    href: APP_CASES_PATH,
     disabled: false,
     urlKey: 'case',
   },
-  [SiemPageName.management]: {
-    id: SiemPageName.management,
+  [SecurityPageName.management]: {
+    id: SecurityPageName.management,
     name: i18n.MANAGEMENT,
-    href: getManagementUrl({ name: 'default' }),
+    href: APP_MANAGEMENT_PATH,
     disabled: false,
-    urlKey: SiemPageName.management,
+    urlKey: SecurityPageName.management,
   },
 };
diff --git a/x-pack/plugins/security_solution/public/app/home/index.tsx b/x-pack/plugins/security_solution/public/app/home/index.tsx
index b5aae0b28c871..d8bdbd6e7ef5f 100644
--- a/x-pack/plugins/security_solution/public/app/home/index.tsx
+++ b/x-pack/plugins/security_solution/public/app/home/index.tsx
@@ -5,7 +5,6 @@
  */
 
 import React, { useMemo } from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { useThrottledResizeObserver } from '../../common/components/utils';
@@ -13,20 +12,14 @@ import { DragDropContextWrapper } from '../../common/components/drag_and_drop/dr
 import { Flyout } from '../../timelines/components/flyout';
 import { HeaderGlobal } from '../../common/components/header_global';
 import { HelpMenu } from '../../common/components/help_menu';
-import { LinkToPage } from '../../common/components/link_to';
-import { MlHostConditionalContainer } from '../../common/components/ml/conditional_links/ml_host_conditional_container';
-import { MlNetworkConditionalContainer } from '../../common/components/ml/conditional_links/ml_network_conditional_container';
 import { AutoSaveWarningMsg } from '../../timelines/components/timeline/auto_save_warning';
 import { UseUrlState } from '../../common/components/url_state';
 import {
   WithSource,
   indicesExistOrDataTemporarilyUnavailable,
 } from '../../common/containers/source';
-import { SpyRoute } from '../../common/utils/route/spy_routes';
 import { useShowTimeline } from '../../common/utils/timeline/use_show_timeline';
-import { NotFoundPage } from '../404';
 import { navTabs } from './home_navigations';
-import { SiemPageName } from '../types';
 
 const WrappedByAutoSizer = styled.div`
   height: 100%;
@@ -52,10 +45,10 @@ const calculateFlyoutHeight = ({
 }): number => Math.max(0, windowHeight - globalHeaderSize);
 
 interface HomePageProps {
-  subPlugins: JSX.Element[];
+  children: React.ReactNode;
 }
 
-export const HomePage: React.FC<HomePageProps> = ({ subPlugins }) => {
+export const HomePage: React.FC<HomePageProps> = ({ children }) => {
   const { ref: measureRef, height: windowHeight = 0 } = useThrottledResizeObserver();
   const flyoutHeight = useMemo(
     () =>
@@ -88,32 +81,13 @@ export const HomePage: React.FC<HomePageProps> = ({ subPlugins }) => {
                 </>
               )}
 
-              <Switch>
-                <Redirect exact from="/" to={`/${SiemPageName.overview}`} />
-                {subPlugins}
-                <Route path="/link-to" render={(props) => <LinkToPage {...props} />} />
-                <Route
-                  path="/ml-hosts"
-                  render={({ location, match }) => (
-                    <MlHostConditionalContainer location={location} url={match.url} />
-                  )}
-                />
-                <Route
-                  path="/ml-network"
-                  render={({ location, match }) => (
-                    <MlNetworkConditionalContainer location={location} url={match.url} />
-                  )}
-                />
-                <Route render={() => <NotFoundPage />} />
-              </Switch>
+              {children}
             </DragDropContextWrapper>
           )}
         </WithSource>
       </Main>
 
       <HelpMenu />
-
-      <SpyRoute />
     </WrappedByAutoSizer>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/app/home/translations.ts b/x-pack/plugins/security_solution/public/app/home/translations.ts
index ccf927eba20c9..f5a08e6395f1f 100644
--- a/x-pack/plugins/security_solution/public/app/home/translations.ts
+++ b/x-pack/plugins/security_solution/public/app/home/translations.ts
@@ -25,6 +25,10 @@ export const DETECTION_ENGINE = i18n.translate(
   }
 );
 
+export const Alerts = i18n.translate('xpack.securitySolution.navigation.alerts', {
+  defaultMessage: 'Alerts',
+});
+
 export const TIMELINES = i18n.translate('xpack.securitySolution.navigation.timelines', {
   defaultMessage: 'Timelines',
 });
diff --git a/x-pack/plugins/security_solution/public/app/index.tsx b/x-pack/plugins/security_solution/public/app/index.tsx
index 13d06bd1a98c2..0afd945af8597 100644
--- a/x-pack/plugins/security_solution/public/app/index.tsx
+++ b/x-pack/plugins/security_solution/public/app/index.tsx
@@ -5,19 +5,35 @@
  */
 
 import React from 'react';
+import { Store, Action } from 'redux';
 import { render, unmountComponentAtNode } from 'react-dom';
 
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { AppMountParameters } from '../../../../../src/core/public';
+import { State } from '../common/store';
 import { StartServices } from '../types';
-import { SiemApp } from './app';
-import { SecuritySubPlugins } from './types';
+import { SecurityApp } from './app';
+import { AppFrontendLibs } from '../common/lib/lib';
 
-export const renderApp = (
-  services: StartServices,
-  { element }: AppMountParameters,
-  subPlugins: SecuritySubPlugins
-) => {
-  render(<SiemApp services={services} subPlugins={subPlugins} />, element);
+interface RenderAppProps extends AppFrontendLibs, AppMountParameters {
+  services: StartServices;
+  store: Store<State, Action>;
+  SubPluginRoutes: React.FC;
+}
+
+export const renderApp = ({
+  apolloClient,
+  element,
+  history,
+  services,
+  store,
+  SubPluginRoutes,
+}: RenderAppProps) => {
+  render(
+    <SecurityApp apolloClient={apolloClient} history={history} services={services} store={store}>
+      <SubPluginRoutes />
+    </SecurityApp>,
+    element
+  );
   return () => unmountComponentAtNode(element);
 };
diff --git a/x-pack/plugins/security_solution/public/app/routes.tsx b/x-pack/plugins/security_solution/public/app/routes.tsx
index d1395813d39f4..fc0d4e1f4fa62 100644
--- a/x-pack/plugins/security_solution/public/app/routes.tsx
+++ b/x-pack/plugins/security_solution/public/app/routes.tsx
@@ -14,17 +14,17 @@ import { ManageRoutesSpy } from '../common/utils/route/manage_spy_routes';
 import { RouteCapture } from '../common/components/endpoint/route_capture';
 
 interface RouterProps {
+  children: React.ReactNode;
   history: History;
-  subPluginRoutes: JSX.Element[];
 }
 
-const PageRouterComponent: FC<RouterProps> = ({ history, subPluginRoutes }) => (
+const PageRouterComponent: FC<RouterProps> = ({ history, children }) => (
   <ManageRoutesSpy>
     <Router history={history}>
       <RouteCapture>
         <Switch>
           <Route path="/">
-            <HomePage subPlugins={subPluginRoutes} />
+            <HomePage>{children}</HomePage>
           </Route>
           <Route>
             <NotFoundPage />
diff --git a/x-pack/plugins/security_solution/public/app/types.ts b/x-pack/plugins/security_solution/public/app/types.ts
index 7a905b35710c9..4bd888e87bbdc 100644
--- a/x-pack/plugins/security_solution/public/app/types.ts
+++ b/x-pack/plugins/security_solution/public/app/types.ts
@@ -14,33 +14,20 @@ import {
   CombinedState,
 } from 'redux';
 
-import { NavTab } from '../common/components/navigation/types';
 import { State, SubPluginsInitReducer } from '../common/store';
 import { Immutable } from '../../common/endpoint/types';
 import { AppAction } from '../common/store/actions';
 import { TimelineState } from '../timelines/store/timeline/types';
 
-export enum SiemPageName {
+export enum SecurityPageName {
+  alerts = 'alerts',
   overview = 'overview',
   hosts = 'hosts',
   network = 'network',
-  detections = 'detections',
   timelines = 'timelines',
   case = 'case',
   management = 'management',
 }
-
-export type SiemNavTabKey =
-  | SiemPageName.overview
-  | SiemPageName.hosts
-  | SiemPageName.network
-  | SiemPageName.detections
-  | SiemPageName.timelines
-  | SiemPageName.case
-  | SiemPageName.management;
-
-export type SiemNavTab = Record<SiemNavTabKey, NavTab>;
-
 export interface SecuritySubPluginStore<K extends SecuritySubPluginKeyStore, T> {
   initialState: Record<K, T | undefined>;
   reducer: Record<K, Reducer<T, AnyAction>>;
@@ -48,7 +35,7 @@ export interface SecuritySubPluginStore<K extends SecuritySubPluginKeyStore, T>
 }
 
 export interface SecuritySubPlugin {
-  routes: React.ReactElement[];
+  SubPluginRoutes: React.FC;
   storageTimelines?: Pick<TimelineState, 'timelineById'>;
 }
 
diff --git a/x-pack/plugins/security_solution/public/cases/components/all_cases/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/all_cases/index.test.tsx
index bbb96f433d3c8..ed8ec432f7df5 100644
--- a/x-pack/plugins/security_solution/public/cases/components/all_cases/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/all_cases/index.test.tsx
@@ -29,6 +29,16 @@ const useGetCasesMock = useGetCases as jest.Mock;
 const useGetCasesStatusMock = useGetCasesStatus as jest.Mock;
 const useUpdateCasesMock = useUpdateCases as jest.Mock;
 
+jest.mock('react-router-dom', () => {
+  const originalModule = jest.requireActual('react-router-dom');
+  return {
+    ...originalModule,
+    useHistory: jest.fn(),
+  };
+});
+
+jest.mock('../../../common/components/link_to');
+
 describe('AllCases', () => {
   const dispatchResetIsDeleted = jest.fn();
   const dispatchResetIsUpdated = jest.fn();
@@ -98,7 +108,7 @@ describe('AllCases', () => {
       </TestProviders>
     );
     expect(wrapper.find(`a[data-test-subj="case-details-link"]`).first().prop('href')).toEqual(
-      `#/link-to/case/${useGetCasesMockState.data.cases[0].id}?timerange=(global:(linkTo:!(timeline),timerange:(from:0,fromStr:now-24h,kind:relative,to:1,toStr:now)),timeline:(linkTo:!(global),timerange:(from:0,fromStr:now-24h,kind:relative,to:1,toStr:now)))`
+      `/${useGetCasesMockState.data.cases[0].id}`
     );
     expect(wrapper.find(`a[data-test-subj="case-details-link"]`).first().text()).toEqual(
       useGetCasesMockState.data.cases[0].title
diff --git a/x-pack/plugins/security_solution/public/cases/components/all_cases/index.tsx b/x-pack/plugins/security_solution/public/cases/components/all_cases/index.tsx
index d27f383fb94e3..2de957039efe6 100644
--- a/x-pack/plugins/security_solution/public/cases/components/all_cases/index.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/all_cases/index.tsx
@@ -5,9 +5,9 @@
  */
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import {
   EuiBasicTable,
-  EuiButton,
   EuiContextMenuPanel,
   EuiEmptyPrompt,
   EuiFlexGroup,
@@ -27,7 +27,6 @@ import { useGetCases, UpdateCase } from '../../containers/use_get_cases';
 import { useGetCasesStatus } from '../../containers/use_get_cases_status';
 import { useDeleteCases } from '../../containers/use_delete_cases';
 import { EuiBasicTableOnChange } from '../../../alerts/pages/detection_engine/rules/types';
-import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
 import { Panel } from '../../../common/components/panel';
 import {
   UtilityBar,
@@ -36,13 +35,11 @@ import {
   UtilityBarSection,
   UtilityBarText,
 } from '../../../common/components/utility_bar';
-import { getCreateCaseUrl } from '../../../common/components/link_to';
+import { getCreateCaseUrl, useFormatUrl } from '../../../common/components/link_to';
 import { getBulkItems } from '../bulk_actions';
 import { CaseHeaderPage } from '../case_header_page';
 import { ConfirmDeleteCaseModal } from '../confirm_delete_case';
 import { OpenClosedStats } from '../open_closed_stats';
-import { navTabs } from '../../../app/home/home_navigations';
-
 import { getActions } from './actions';
 import { CasesTableFilters } from './table_filters';
 import { useUpdateCases } from '../../containers/use_bulk_update_case';
@@ -51,6 +48,8 @@ import { getActionLicenseError } from '../use_push_to_service/helpers';
 import { CaseCallOut } from '../callout';
 import { ConfigureCaseButton } from '../configure_cases/button';
 import { ERROR_PUSH_SERVICE_CALLOUT_TITLE } from '../use_push_to_service/translations';
+import { LinkButton } from '../../../common/components/links';
+import { SecurityPageName } from '../../../app/types';
 
 const Div = styled.div`
   margin-top: ${({ theme }) => theme.eui.paddingSizes.m};
@@ -88,7 +87,8 @@ interface AllCasesProps {
 }
 export const AllCases = React.memo<AllCasesProps>(
   ({ onRowClick = () => {}, isModal = false, userCanCrud }) => {
-    const urlSearch = useGetUrlSearch(navTabs.case);
+    const history = useHistory();
+    const { formatUrl, search: urlSearch } = useFormatUrl(SecurityPageName.case);
     const { actionLicense } = useGetActionLicense();
     const {
       countClosedCases,
@@ -231,6 +231,14 @@ export const AllCases = React.memo<AllCasesProps>(
       [dispatchUpdateCaseProperty, fetchCasesStatus]
     );
 
+    const goToCreateCase = useCallback(
+      (ev) => {
+        ev.preventDefault();
+        history.push(getCreateCaseUrl(urlSearch));
+      },
+      [history, urlSearch]
+    );
+
     const actions = useMemo(
       () =>
         getActions({
@@ -342,15 +350,16 @@ export const AllCases = React.memo<AllCasesProps>(
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton
+                <LinkButton
                   isDisabled={!userCanCrud}
                   fill
-                  href={getCreateCaseUrl(urlSearch)}
+                  onClick={goToCreateCase}
+                  href={formatUrl(getCreateCaseUrl())}
                   iconType="plusInCircle"
                   data-test-subj="createNewCaseBtn"
                 >
                   {i18n.CREATE_TITLE}
-                </EuiButton>
+                </LinkButton>
               </EuiFlexItem>
             </EuiFlexGroup>
           </CaseHeaderPage>
@@ -418,15 +427,16 @@ export const AllCases = React.memo<AllCasesProps>(
                     titleSize="xs"
                     body={i18n.NO_CASES_BODY}
                     actions={
-                      <EuiButton
+                      <LinkButton
                         isDisabled={!userCanCrud}
                         fill
                         size="s"
-                        href={getCreateCaseUrl(urlSearch)}
+                        onClick={goToCreateCase}
+                        href={formatUrl(getCreateCaseUrl())}
                         iconType="plusInCircle"
                       >
                         {i18n.ADD_NEW_CASE}
-                      </EuiButton>
+                      </LinkButton>
                     }
                   />
                 }
diff --git a/x-pack/plugins/security_solution/public/cases/components/all_cases_modal/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/all_cases_modal/index.test.tsx
index a24cb6a87de74..67b0f56367462 100644
--- a/x-pack/plugins/security_solution/public/cases/components/all_cases_modal/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/all_cases_modal/index.test.tsx
@@ -15,6 +15,15 @@ import { useGetCasesStatus } from '../../containers/use_get_cases_status';
 import { useUpdateCases } from '../../containers/use_bulk_update_case';
 import { EuiTableRow } from '@elastic/eui';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    useHistory: jest.fn(),
+  }),
+}));
+
+jest.mock('../../../common/components/link_to');
+
 jest.mock('../../containers/use_bulk_update_case');
 jest.mock('../../containers/use_delete_cases');
 jest.mock('../../containers/use_get_cases');
diff --git a/x-pack/plugins/security_solution/public/cases/components/case_view/actions.test.tsx b/x-pack/plugins/security_solution/public/cases/components/case_view/actions.test.tsx
index 2641ac68cf952..1721cb5f819f0 100644
--- a/x-pack/plugins/security_solution/public/cases/components/case_view/actions.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/case_view/actions.test.tsx
@@ -15,6 +15,13 @@ import * as i18n from './translations';
 jest.mock('../../containers/use_delete_cases');
 const useDeleteCasesMock = useDeleteCases as jest.Mock;
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    useHistory: jest.fn(),
+  }),
+}));
+
 describe('CaseView actions', () => {
   const handleOnDeleteConfirm = jest.fn();
   const handleToggleModal = jest.fn();
diff --git a/x-pack/plugins/security_solution/public/cases/components/case_view/actions.tsx b/x-pack/plugins/security_solution/public/cases/components/case_view/actions.tsx
index df1082ec48f91..6439972ccbb5a 100644
--- a/x-pack/plugins/security_solution/public/cases/components/case_view/actions.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/case_view/actions.tsx
@@ -6,11 +6,10 @@
 
 import { isEmpty } from 'lodash/fp';
 import React, { useMemo } from 'react';
-import { Redirect } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import * as i18n from './translations';
 import { useDeleteCases } from '../../containers/use_delete_cases';
 import { ConfirmDeleteCaseModal } from '../confirm_delete_case';
-import { SiemPageName } from '../../../app/types';
 import { PropertyActions } from '../property_actions';
 import { Case } from '../../containers/types';
 import { CaseService } from '../../containers/use_get_case_user_actions';
@@ -26,6 +25,7 @@ const CaseViewActionsComponent: React.FC<CaseViewActions> = ({
   currentExternalIncident,
   disabled = false,
 }) => {
+  const history = useHistory();
   // Delete case
   const {
     handleToggleModal,
@@ -69,7 +69,8 @@ const CaseViewActionsComponent: React.FC<CaseViewActions> = ({
   );
 
   if (isDeleted) {
-    return <Redirect to={`/${SiemPageName.case}`} />;
+    history.push('/');
+    return null;
   }
   return (
     <>
diff --git a/x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx b/x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx
index bb63cf633747b..3718249479b63 100644
--- a/x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx
@@ -37,6 +37,7 @@ import { useGetCaseUserActions } from '../../containers/use_get_case_user_action
 import { usePushToService } from '../use_push_to_service';
 import { EditConnector } from '../edit_connector';
 import { useConnectors } from '../../containers/configure/use_connectors';
+import { SecurityPageName } from '../../../app/types';
 
 interface Props {
   caseId: string;
@@ -70,7 +71,7 @@ export interface CaseProps extends Props {
 export const CaseComponent = React.memo<CaseProps>(
   ({ caseId, caseData, fetchCase, updateCase, userCanCrud }) => {
     const basePath = window.location.origin + useBasePath();
-    const caseLink = `${basePath}/app/security#/case/${caseId}`;
+    const caseLink = `${basePath}/app/security/cases/${caseId}`;
     const search = useGetUrlSearch(navTabs.case);
     const [initLoadingData, setInitLoadingData] = useState(true);
     const {
@@ -252,6 +253,7 @@ export const CaseComponent = React.memo<CaseProps>(
         href: getCaseUrl(search),
         text: i18n.BACK_TO_ALL,
         dataTestSubj: 'backToCases',
+        pageId: SecurityPageName.case,
       }),
       [search]
     );
@@ -356,7 +358,7 @@ export const CaseComponent = React.memo<CaseProps>(
             </EuiFlexGroup>
           </MyWrapper>
         </WhitePageWrapper>
-        <SpyRoute state={spyState} />
+        <SpyRoute state={spyState} pageName={SecurityPageName.case} />
       </>
     );
   }
diff --git a/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.test.tsx b/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.test.tsx
index aefe515f4bd4d..1315cf1c962e7 100644
--- a/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.test.tsx
@@ -12,6 +12,15 @@ import { ConfigureCaseButton, ConfigureCaseButtonProps } from './button';
 import { TestProviders } from '../../../common/mock';
 import { searchURL } from './__mock__';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    useHistory: jest.fn(),
+  }),
+}));
+
+jest.mock('../../../common/components/link_to');
+
 describe('Configuration button', () => {
   let wrapper: ReactWrapper;
   const props: ConfigureCaseButtonProps = {
@@ -35,7 +44,7 @@ describe('Configuration button', () => {
 
   test('it pass the correct props to the button', () => {
     expect(wrapper.find('[data-test-subj="configure-case-button"]').first().props()).toMatchObject({
-      href: `#/link-to/case/configure${searchURL}`,
+      href: `/configure`,
       iconType: 'controlsHorizontal',
       isDisabled: false,
       'aria-label': 'My label',
diff --git a/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.tsx b/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.tsx
index a6d78d4a2a620..44767471dd9e7 100644
--- a/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.tsx
@@ -4,9 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButton, EuiToolTip } from '@elastic/eui';
-import React, { memo, useMemo } from 'react';
-import { getConfigureCasesUrl } from '../../../common/components/link_to';
+import { EuiToolTip } from '@elastic/eui';
+import React, { memo, useCallback, useMemo } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { getConfigureCasesUrl, useFormatUrl } from '../../../common/components/link_to';
+import { LinkButton } from '../../../common/components/links';
+import { SecurityPageName } from '../../../app/types';
 
 export interface ConfigureCaseButtonProps {
   label: string;
@@ -25,19 +29,29 @@ const ConfigureCaseButtonComponent: React.FC<ConfigureCaseButtonProps> = ({
   titleTooltip,
   urlSearch,
 }: ConfigureCaseButtonProps) => {
+  const history = useHistory();
+  const { formatUrl } = useFormatUrl(SecurityPageName.case);
+  const goToCaseConfigure = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      history.push(getConfigureCasesUrl(urlSearch));
+    },
+    [history, urlSearch]
+  );
   const configureCaseButton = useMemo(
     () => (
-      <EuiButton
-        href={getConfigureCasesUrl(urlSearch)}
+      <LinkButton
+        onClick={goToCaseConfigure}
+        href={formatUrl(getConfigureCasesUrl())}
         iconType="controlsHorizontal"
         isDisabled={isDisabled}
         aria-label={label}
         data-test-subj="configure-case-button"
       >
         {label}
-      </EuiButton>
+      </LinkButton>
     ),
-    [label, isDisabled, urlSearch]
+    [label, isDisabled, formatUrl, goToCaseConfigure]
   );
   return showToolTip ? (
     <EuiToolTip
diff --git a/x-pack/plugins/security_solution/public/cases/components/create/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/create/index.test.tsx
index 78108f7d74658..25c12a53f2f5b 100644
--- a/x-pack/plugins/security_solution/public/cases/components/create/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/create/index.test.tsx
@@ -20,7 +20,7 @@ jest.mock('../../../timelines/components/timeline/insert_timeline_popover/use_in
 jest.mock('../../containers/use_post_case');
 import { useForm } from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form';
 import { wait } from '../../../common/lib/helpers';
-import { SiemPageName } from '../../../app/types';
+
 jest.mock(
   '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
 );
@@ -110,7 +110,7 @@ describe('Create case', () => {
       </TestProviders>
     );
     wrapper.find(`[data-test-subj="create-case-cancel"]`).first().simulate('click');
-    expect(mockHistory.replace.mock.calls[0][0].pathname).toEqual(`/${SiemPageName.case}`);
+    expect(mockHistory.push).toHaveBeenCalledWith('/');
   });
   it('should redirect to new case when caseData is there', () => {
     const sampleId = '777777';
@@ -122,9 +122,7 @@ describe('Create case', () => {
         </Router>
       </TestProviders>
     );
-    expect(mockHistory.replace.mock.calls[0][0].pathname).toEqual(
-      `/${SiemPageName.case}/${sampleId}`
-    );
+    expect(mockHistory.push).toHaveBeenNthCalledWith(1, '/777777');
   });
 
   it('should render spinner when loading', () => {
diff --git a/x-pack/plugins/security_solution/public/cases/components/create/index.tsx b/x-pack/plugins/security_solution/public/cases/components/create/index.tsx
index 1b65b2582c760..9f078c725c3cf 100644
--- a/x-pack/plugins/security_solution/public/cases/components/create/index.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/create/index.tsx
@@ -13,7 +13,7 @@ import {
   EuiPanel,
 } from '@elastic/eui';
 import styled, { css } from 'styled-components';
-import { Redirect } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 import { isEqual } from 'lodash/fp';
 import { CasePostRequest } from '../../../../../case/common/api';
@@ -30,9 +30,9 @@ import { schema } from './schema';
 import { InsertTimelinePopover } from '../../../timelines/components/timeline/insert_timeline_popover';
 import { useInsertTimeline } from '../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline';
 import * as i18n from '../../translations';
-import { SiemPageName } from '../../../app/types';
 import { MarkdownEditorForm } from '../../../common/components//markdown_editor/form';
 import { useGetTags } from '../../containers/use_get_tags';
+import { getCaseDetailsUrl } from '../../../common/components/link_to';
 
 export const CommonUseField = getUseField({ component: Field });
 
@@ -61,8 +61,8 @@ const initialCaseValue: CasePostRequest = {
 };
 
 export const Create = React.memo(() => {
+  const history = useHistory();
   const { caseData, isLoading, postCase } = usePostCase();
-  const [isCancel, setIsCancel] = useState(false);
   const { form } = useForm<CasePostRequest>({
     defaultValue: initialCaseValue,
     options: { stripEmptyFields: false },
@@ -98,15 +98,12 @@ export const Create = React.memo(() => {
   }, [form]);
 
   const handleSetIsCancel = useCallback(() => {
-    setIsCancel(true);
-  }, []);
+    history.push('/');
+  }, [history]);
 
   if (caseData != null && caseData.id) {
-    return <Redirect to={`/${SiemPageName.case}/${caseData.id}`} />;
-  }
-
-  if (isCancel) {
-    return <Redirect to={`/${SiemPageName.case}`} />;
+    history.push(getCaseDetailsUrl({ id: caseData.id }));
+    return null;
   }
 
   return (
diff --git a/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.test.tsx
index 4391db1a0a0a1..9dfeec3b26ba9 100644
--- a/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.test.tsx
@@ -14,6 +14,15 @@ import * as i18n from './translations';
 import { useGetActionLicense } from '../../containers/use_get_action_license';
 import { getKibanaConfigError, getLicenseError } from './helpers';
 import { connectorsMock } from '../../containers/configure/mock';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    useHistory: jest.fn(),
+  }),
+}));
+
+jest.mock('../../../common/components/link_to');
 jest.mock('../../containers/use_get_action_license');
 jest.mock('../../containers/use_post_push_to_service');
 jest.mock('../../containers/configure/api');
diff --git a/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.tsx b/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.tsx
index f18870787ded1..45b515ccacacd 100644
--- a/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.tsx
@@ -4,21 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButton, EuiLink, EuiToolTip } from '@elastic/eui';
+import { EuiButton, EuiToolTip } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useCallback, useMemo } from 'react';
+import { useHistory } from 'react-router-dom';
 
 import { Case } from '../../containers/types';
 import { useGetActionLicense } from '../../containers/use_get_action_license';
 import { usePostPushToService } from '../../containers/use_post_push_to_service';
-import { getConfigureCasesUrl } from '../../../common/components/link_to';
-import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
-import { navTabs } from '../../../app/home/home_navigations';
+import { getConfigureCasesUrl, useFormatUrl } from '../../../common/components/link_to';
 import { CaseCallOut } from '../callout';
 import { getLicenseError, getKibanaConfigError } from './helpers';
 import * as i18n from './translations';
 import { Connector } from '../../../../../case/common/api/cases';
 import { CaseServices } from '../../containers/use_get_case_user_actions';
+import { LinkAnchor } from '../../../common/components/links';
+import { SecurityPageName } from '../../../app/types';
 
 export interface UsePushToService {
   caseId: string;
@@ -48,8 +49,8 @@ export const usePushToService = ({
   userCanCrud,
   isValidConnector,
 }: UsePushToService): ReturnUsePushToService => {
-  const urlSearch = useGetUrlSearch(navTabs.case);
-
+  const history = useHistory();
+  const { formatUrl, search: urlSearch } = useFormatUrl(SecurityPageName.case);
   const { isLoading, postPushToService } = usePostPushToService();
 
   const { isLoading: loadingLicense, actionLicense } = useGetActionLicense();
@@ -66,6 +67,14 @@ export const usePushToService = ({
     }
   }, [caseId, caseServices, caseConnectorId, caseConnectorName, postPushToService, updateCase]);
 
+  const goToConfigureCases = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      history.push(getConfigureCasesUrl(urlSearch));
+    },
+    [history, urlSearch]
+  );
+
   const errorsMsg = useMemo(() => {
     let errors: Array<{
       title: string;
@@ -86,9 +95,13 @@ export const usePushToService = ({
               id="xpack.securitySolution.case.caseView.pushToServiceDisableByNoConnectors"
               values={{
                 link: (
-                  <EuiLink href={getConfigureCasesUrl(urlSearch)} target="_blank">
+                  <LinkAnchor
+                    onClick={goToConfigureCases}
+                    href={formatUrl(getConfigureCasesUrl())}
+                    target="_blank"
+                  >
                     {i18n.LINK_CONNECTOR_CONFIGURE}
-                  </EuiLink>
+                  </LinkAnchor>
                 ),
               }}
             />
diff --git a/x-pack/plugins/security_solution/public/cases/components/user_action_tree/user_action_markdown.test.tsx b/x-pack/plugins/security_solution/public/cases/components/user_action_tree/user_action_markdown.test.tsx
index ae9f1ec7469e4..b2d8ce9c891bc 100644
--- a/x-pack/plugins/security_solution/public/cases/components/user_action_tree/user_action_markdown.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/user_action_tree/user_action_markdown.test.tsx
@@ -18,7 +18,7 @@ const onSaveContent = jest.fn();
 
 const timelineId = '1e10f150-949b-11ea-b63c-2bc51864784c';
 const defaultProps = {
-  content: `A link to a timeline [timeline](http://localhost:5601/app/security#/timelines?timeline=(id:'${timelineId}',isOpen:!t))`,
+  content: `A link to a timeline [timeline](http://localhost:5601/app/security/timelines?timeline=(id:'${timelineId}',isOpen:!t))`,
   id: 'markdown-id',
   isEditable: false,
   onChangeEditable,
diff --git a/x-pack/plugins/security_solution/public/cases/components/user_action_tree/user_action_title.tsx b/x-pack/plugins/security_solution/public/cases/components/user_action_tree/user_action_title.tsx
index 307790194421d..0bd6100b05df6 100644
--- a/x-pack/plugins/security_solution/public/cases/components/user_action_tree/user_action_title.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/user_action_tree/user_action_title.tsx
@@ -23,7 +23,7 @@ import { LocalizedDateTooltip } from '../../../common/components/localized_date_
 import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
 import { navTabs } from '../../../app/home/home_navigations';
 import { PropertyActions } from '../property_actions';
-import { SiemPageName } from '../../../app/types';
+import { SecurityPageName } from '../../../app/types';
 import * as i18n from './translations';
 
 const MySpinner = styled(EuiLoadingSpinner)`
@@ -94,7 +94,7 @@ export const UserActionTitle = ({
 
   const handleAnchorLink = useCallback(() => {
     copy(
-      `${window.location.origin}${window.location.pathname}#${SiemPageName.case}/${caseId}/${id}${urlSearch}`
+      `${window.location.origin}${window.location.pathname}#${SecurityPageName.case}/${caseId}/${id}${urlSearch}`
     );
   }, [caseId, id, urlSearch]);
 
diff --git a/x-pack/plugins/security_solution/public/cases/index.ts b/x-pack/plugins/security_solution/public/cases/index.ts
index 1eb8c82532e21..3b3130152f383 100644
--- a/x-pack/plugins/security_solution/public/cases/index.ts
+++ b/x-pack/plugins/security_solution/public/cases/index.ts
@@ -5,14 +5,14 @@
  */
 
 import { SecuritySubPlugin } from '../app/types';
-import { getCasesRoutes } from './routes';
+import { CasesRoutes } from './routes';
 
 export class Cases {
   public setup() {}
 
   public start(): SecuritySubPlugin {
     return {
-      routes: getCasesRoutes(),
+      SubPluginRoutes: CasesRoutes,
     };
   }
 }
diff --git a/x-pack/plugins/security_solution/public/cases/pages/case.tsx b/x-pack/plugins/security_solution/public/cases/pages/case.tsx
index 03ebec34c2cdd..eb6da9579e4e8 100644
--- a/x-pack/plugins/security_solution/public/cases/pages/case.tsx
+++ b/x-pack/plugins/security_solution/public/cases/pages/case.tsx
@@ -13,6 +13,7 @@ import { AllCases } from '../components/all_cases';
 
 import { savedObjectReadOnly, CaseCallOut } from '../components/callout';
 import { CaseSavedObjectNoPermissions } from './saved_object_no_permissions';
+import { SecurityPageName } from '../../app/types';
 
 export const CasesPage = React.memo(() => {
   const userPermissions = useGetUserSavedObjectPermissions();
@@ -28,7 +29,7 @@ export const CasesPage = React.memo(() => {
         )}
         <AllCases userCanCrud={userPermissions?.crud ?? false} />
       </WrapperPage>
-      <SpyRoute />
+      <SpyRoute pageName={SecurityPageName.case} />
     </>
   ) : (
     <CaseSavedObjectNoPermissions />
diff --git a/x-pack/plugins/security_solution/public/cases/pages/case_details.tsx b/x-pack/plugins/security_solution/public/cases/pages/case_details.tsx
index 780de303c02d3..43c51b32bce0f 100644
--- a/x-pack/plugins/security_solution/public/cases/pages/case_details.tsx
+++ b/x-pack/plugins/security_solution/public/cases/pages/case_details.tsx
@@ -5,8 +5,10 @@
  */
 
 import React from 'react';
-import { useParams, Redirect } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
 
+import { SecurityPageName } from '../../app/types';
+import { SpyRoute } from '../../common/utils/route/spy_routes';
 import { WrapperPage } from '../../common/components/wrapper_page';
 import { useGetUrlSearch } from '../../common/components/navigation/use_get_url_search';
 import { useGetUserSavedObjectPermissions } from '../../common/lib/kibana';
@@ -16,12 +18,14 @@ import { CaseView } from '../components/case_view';
 import { savedObjectReadOnly, CaseCallOut } from '../components/callout';
 
 export const CaseDetailsPage = React.memo(() => {
+  const history = useHistory();
   const userPermissions = useGetUserSavedObjectPermissions();
   const { detailName: caseId } = useParams();
   const search = useGetUrlSearch(navTabs.case);
 
   if (userPermissions != null && !userPermissions.read) {
-    return <Redirect to={getCaseUrl(search)} />;
+    history.replace(getCaseUrl(search));
+    return null;
   }
 
   return caseId != null ? (
@@ -35,6 +39,7 @@ export const CaseDetailsPage = React.memo(() => {
         )}
         <CaseView caseId={caseId} userCanCrud={userPermissions?.crud ?? false} />
       </WrapperPage>
+      <SpyRoute pageName={SecurityPageName.case} />
     </>
   ) : null;
 });
diff --git a/x-pack/plugins/security_solution/public/cases/pages/configure_cases.tsx b/x-pack/plugins/security_solution/public/cases/pages/configure_cases.tsx
index f70ff859e8e7d..83354dabca1f2 100644
--- a/x-pack/plugins/security_solution/public/cases/pages/configure_cases.tsx
+++ b/x-pack/plugins/security_solution/public/cases/pages/configure_cases.tsx
@@ -5,9 +5,10 @@
  */
 
 import React, { useMemo } from 'react';
-import { Redirect } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { SecurityPageName } from '../../app/types';
 import { getCaseUrl } from '../../common/components/link_to';
 import { useGetUrlSearch } from '../../common/components/navigation/use_get_url_search';
 import { WrapperPage } from '../../common/components/wrapper_page';
@@ -20,6 +21,7 @@ import { WhitePageWrapper, SectionWrapper } from '../components/wrappers';
 import * as i18n from './translations';
 
 const ConfigureCasesPageComponent: React.FC = () => {
+  const history = useHistory();
   const userPermissions = useGetUserSavedObjectPermissions();
   const search = useGetUrlSearch(navTabs.case);
 
@@ -27,12 +29,14 @@ const ConfigureCasesPageComponent: React.FC = () => {
     () => ({
       href: getCaseUrl(search),
       text: i18n.BACK_TO_ALL,
+      pageId: SecurityPageName.case,
     }),
     [search]
   );
 
   if (userPermissions != null && !userPermissions.read) {
-    return <Redirect to={getCaseUrl(search)} />;
+    history.push(getCaseUrl(search));
+    return null;
   }
 
   const HeaderWrapper = styled.div`
@@ -51,7 +55,7 @@ const ConfigureCasesPageComponent: React.FC = () => {
           <ConfigureCases userCanCrud={userPermissions?.crud ?? false} />
         </WhitePageWrapper>
       </WrapperPage>
-      <SpyRoute />
+      <SpyRoute pageName={SecurityPageName.case} />
     </>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/cases/pages/create_case.tsx b/x-pack/plugins/security_solution/public/cases/pages/create_case.tsx
index c586a90e5ef9c..672f44bfe275f 100644
--- a/x-pack/plugins/security_solution/public/cases/pages/create_case.tsx
+++ b/x-pack/plugins/security_solution/public/cases/pages/create_case.tsx
@@ -5,8 +5,9 @@
  */
 
 import React, { useMemo } from 'react';
-import { Redirect } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
+import { SecurityPageName } from '../../app/types';
 import { getCaseUrl } from '../../common/components/link_to';
 import { useGetUrlSearch } from '../../common/components/navigation/use_get_url_search';
 import { WrapperPage } from '../../common/components/wrapper_page';
@@ -18,6 +19,7 @@ import { Create } from '../components/create';
 import * as i18n from './translations';
 
 export const CreateCasePage = React.memo(() => {
+  const history = useHistory();
   const userPermissions = useGetUserSavedObjectPermissions();
   const search = useGetUrlSearch(navTabs.case);
 
@@ -25,12 +27,14 @@ export const CreateCasePage = React.memo(() => {
     () => ({
       href: getCaseUrl(search),
       text: i18n.BACK_TO_ALL,
+      pageId: SecurityPageName.case,
     }),
     [search]
   );
 
   if (userPermissions != null && !userPermissions.crud) {
-    return <Redirect to={getCaseUrl(search)} />;
+    history.replace(getCaseUrl(search));
+    return null;
   }
 
   return (
@@ -39,7 +43,7 @@ export const CreateCasePage = React.memo(() => {
         <CaseHeaderPage backOptions={backOptions} title={i18n.CREATE_TITLE} />
         <Create />
       </WrapperPage>
-      <SpyRoute />
+      <SpyRoute pageName={SecurityPageName.case} />
     </>
   );
 });
diff --git a/x-pack/plugins/security_solution/public/cases/pages/index.tsx b/x-pack/plugins/security_solution/public/cases/pages/index.tsx
index 32f64d2690cba..814be240644fc 100644
--- a/x-pack/plugins/security_solution/public/cases/pages/index.tsx
+++ b/x-pack/plugins/security_solution/public/cases/pages/index.tsx
@@ -7,13 +7,12 @@
 import React from 'react';
 
 import { Route, Switch } from 'react-router-dom';
-import { SiemPageName } from '../../app/types';
 import { CaseDetailsPage } from './case_details';
 import { CasesPage } from './case';
 import { CreateCasePage } from './create_case';
 import { ConfigureCasesPage } from './configure_cases';
 
-const casesPagePath = `/:pageName(${SiemPageName.case})`;
+const casesPagePath = '';
 const caseDetailsPagePath = `${casesPagePath}/:detailName`;
 const caseDetailsPagePathWithCommentId = `${casesPagePath}/:detailName/:commentId`;
 const createCasePagePath = `${casesPagePath}/create`;
@@ -21,21 +20,21 @@ const configureCasesPagePath = `${casesPagePath}/configure`;
 
 const CaseContainerComponent: React.FC = () => (
   <Switch>
-    <Route strict exact path={casesPagePath}>
-      <CasesPage />
-    </Route>
-    <Route strict exact path={createCasePagePath}>
+    <Route path={createCasePagePath}>
       <CreateCasePage />
     </Route>
-    <Route strict exact path={configureCasesPagePath}>
+    <Route path={configureCasesPagePath}>
       <ConfigureCasesPage />
     </Route>
-    <Route strict path={caseDetailsPagePathWithCommentId}>
+    <Route path={caseDetailsPagePathWithCommentId}>
       <CaseDetailsPage />
     </Route>
-    <Route strict path={caseDetailsPagePath}>
+    <Route path={caseDetailsPagePath}>
       <CaseDetailsPage />
     </Route>
+    <Route strict exact path={casesPagePath}>
+      <CasesPage />
+    </Route>
   </Switch>
 );
 
diff --git a/x-pack/plugins/security_solution/public/cases/pages/utils.ts b/x-pack/plugins/security_solution/public/cases/pages/utils.ts
index 0b60d66756d0c..76308e6a1dd9b 100644
--- a/x-pack/plugins/security_solution/public/cases/pages/utils.ts
+++ b/x-pack/plugins/security_solution/public/cases/pages/utils.ts
@@ -8,17 +8,26 @@ import { isEmpty } from 'lodash/fp';
 
 import { ChromeBreadcrumb } from 'src/core/public';
 
-import { getCaseDetailsUrl, getCaseUrl, getCreateCaseUrl } from '../../common/components/link_to';
+import { getCaseDetailsUrl, getCreateCaseUrl } from '../../common/components/link_to';
 import { RouteSpyState } from '../../common/utils/route/types';
 import * as i18n from './translations';
+import { GetUrlForApp } from '../../common/components/navigation/types';
+import { APP_ID } from '../../../common/constants';
+import { SecurityPageName } from '../../app/types';
 
-export const getBreadcrumbs = (params: RouteSpyState, search: string[]): ChromeBreadcrumb[] => {
-  const queryParameters = !isEmpty(search[0]) ? search[0] : null;
+export const getBreadcrumbs = (
+  params: RouteSpyState,
+  search: string[],
+  getUrlForApp: GetUrlForApp
+): ChromeBreadcrumb[] => {
+  const queryParameters = !isEmpty(search[0]) ? search[0] : '';
 
   let breadcrumb = [
     {
       text: i18n.PAGE_TITLE,
-      href: getCaseUrl(queryParameters),
+      href: getUrlForApp(`${APP_ID}:${SecurityPageName.case}`, {
+        path: queryParameters,
+      }),
     },
   ];
   if (params.detailName === 'create') {
@@ -26,7 +35,9 @@ export const getBreadcrumbs = (params: RouteSpyState, search: string[]): ChromeB
       ...breadcrumb,
       {
         text: i18n.CREATE_BC_TITLE,
-        href: getCreateCaseUrl(queryParameters),
+        href: getUrlForApp(`${APP_ID}:${SecurityPageName.case}`, {
+          path: getCreateCaseUrl(queryParameters),
+        }),
       },
     ];
   } else if (params.detailName != null) {
@@ -34,7 +45,9 @@ export const getBreadcrumbs = (params: RouteSpyState, search: string[]): ChromeB
       ...breadcrumb,
       {
         text: params.state?.caseTitle ?? '',
-        href: getCaseDetailsUrl({ id: params.detailName, search: queryParameters }),
+        href: getUrlForApp(`${APP_ID}:${SecurityPageName.case}`, {
+          path: getCaseDetailsUrl({ id: params.detailName, search: queryParameters }),
+        }),
       },
     ];
   }
diff --git a/x-pack/plugins/security_solution/public/cases/routes.tsx b/x-pack/plugins/security_solution/public/cases/routes.tsx
index 698350e49bc3e..c321f83c693f3 100644
--- a/x-pack/plugins/security_solution/public/cases/routes.tsx
+++ b/x-pack/plugins/security_solution/public/cases/routes.tsx
@@ -5,13 +5,16 @@
  */
 
 import React from 'react';
-import { Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 
 import { Case } from './pages';
-import { SiemPageName } from '../app/types';
+import { NotFoundPage } from '../app/404';
 
-export const getCasesRoutes = () => [
-  <Route path={`/:pageName(${SiemPageName.case})`}>
-    <Case />
-  </Route>,
-];
+export const CasesRoutes: React.FC = () => (
+  <Switch>
+    <Route path="/">
+      <Case />
+    </Route>
+    <Route render={() => <NotFoundPage />} />
+  </Switch>
+);
diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx
index aa5efe3ccfe6a..e60d876617dca 100644
--- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx
@@ -22,6 +22,8 @@ import {
   timelineDefaults,
 } from '../../../timelines/components/manage_timeline';
 
+jest.mock('../link_to');
+
 jest.mock('../../lib/kibana');
 
 jest.mock('uuid', () => {
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx
index cb2cbcc62aba1..30c7d2a742b57 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx
@@ -15,6 +15,8 @@ import { mockBrowserFields } from '../../containers/source/mock';
 import { defaultHeaders } from '../../mock/header';
 import { useMountAppended } from '../../utils/use_mount_appended';
 
+jest.mock('../link_to');
+
 describe('EventDetails', () => {
   const mount = useMountAppended();
 
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.test.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.test.tsx
index 9f60d16a6f671..c0cc1c04488b2 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.test.tsx
@@ -14,6 +14,8 @@ import { mockBrowserFields } from '../../containers/source/mock';
 import { defaultHeaders } from '../../mock/header';
 import { useMountAppended } from '../../utils/use_mount_appended';
 
+jest.mock('../link_to');
+
 describe('EventFieldsBrowser', () => {
   const mount = useMountAppended();
 
diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
index 9f1d71108e2f1..1645db371802c 100644
--- a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
@@ -190,6 +190,7 @@ export const StatefulEventsViewer = connector(
     (prevProps, nextProps) =>
       prevProps.id === nextProps.id &&
       deepEqual(prevProps.columns, nextProps.columns) &&
+      deepEqual(prevProps.defaultIndices, nextProps.defaultIndices) &&
       deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
       prevProps.deletedEventIds === nextProps.deletedEventIds &&
       prevProps.end === nextProps.end &&
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.tsx
index 79ed8bb37949f..68a1e7220979d 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.tsx
@@ -243,7 +243,7 @@ const ExceptionsViewerComponent = ({
   // Used in utility bar info text
   const ruleSettingsUrl = useMemo((): string => {
     return services.application.getUrlForApp(
-      `security#/detections/rules/id/${encodeURI(ruleId)}/edit`
+      `security/detections/rules/id/${encodeURI(ruleId)}/edit`
     );
   }, [ruleId, services.application]);
 
diff --git a/x-pack/plugins/security_solution/public/common/components/header_global/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/header_global/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 25374c63fa897..0000000000000
--- a/x-pack/plugins/security_solution/public/common/components/header_global/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HeaderGlobal it renders 1`] = `
-<Wrapper
-  className="siemHeaderGlobal"
->
-  <EuiFlexGroup
-    alignItems="center"
-    justifyContent="spaceBetween"
-    wrap={true}
-  >
-    <WithSource
-      sourceId="default"
-    >
-      <Component />
-    </WithSource>
-  </EuiFlexGroup>
-</Wrapper>
-`;
diff --git a/x-pack/plugins/security_solution/public/common/components/header_global/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/header_global/index.test.tsx
deleted file mode 100644
index 809f0eeb811f4..0000000000000
--- a/x-pack/plugins/security_solution/public/common/components/header_global/index.test.tsx
+++ /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 { shallow } from 'enzyme';
-import React from 'react';
-
-import '../../mock/match_media';
-import { HeaderGlobal } from './index';
-
-jest.mock('react-router-dom', () => ({
-  useLocation: () => ({
-    pathname: '/app/siem#/hosts/allHosts',
-    hash: '',
-    search: '',
-    state: '',
-  }),
-  withRouter: () => jest.fn(),
-  generatePath: jest.fn(),
-}));
-
-// Test will fail because we will to need to mock some core services to make the test work
-// For now let's forget about SiemSearchBar
-jest.mock('../search_bar', () => ({
-  SiemSearchBar: () => null,
-}));
-
-describe('HeaderGlobal', () => {
-  beforeEach(() => {
-    jest.resetAllMocks();
-  });
-
-  test('it renders', () => {
-    const wrapper = shallow(<HeaderGlobal />);
-
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/x-pack/plugins/security_solution/public/common/components/header_global/index.tsx b/x-pack/plugins/security_solution/public/common/components/header_global/index.tsx
index c9085b5953817..de19c1903586a 100644
--- a/x-pack/plugins/security_solution/public/common/components/header_global/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/header_global/index.tsx
@@ -4,21 +4,23 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink } from '@elastic/eui';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
 import { pickBy } from 'lodash/fp';
-import React from 'react';
+import React, { useCallback } from 'react';
 import styled, { css } from 'styled-components';
 
-import { useLocation } from 'react-router-dom';
 import { gutterTimeline } from '../../lib/helpers';
 import { navTabs } from '../../../app/home/home_navigations';
-import { SiemPageName } from '../../../app/types';
-import { getOverviewUrl } from '../link_to';
+import { SecurityPageName } from '../../../app/types';
+import { getAppOverviewUrl } from '../link_to';
 import { MlPopover } from '../ml_popover/ml_popover';
 import { SiemNavigation } from '../navigation';
 import * as i18n from './translations';
 import { indicesExistOrDataTemporarilyUnavailable, WithSource } from '../../containers/source';
-import { ADD_DATA_PATH } from '../../../../common/constants';
+import { useGetUrlSearch } from '../navigation/use_get_url_search';
+import { useKibana } from '../../lib/kibana';
+import { APP_ID, ADD_DATA_PATH, APP_ALERTS_PATH } from '../../../../common/constants';
+import { LinkAnchor } from '../links';
 
 const Wrapper = styled.header`
   ${({ theme }) => css`
@@ -39,7 +41,15 @@ interface HeaderGlobalProps {
   hideDetectionEngine?: boolean;
 }
 export const HeaderGlobal = React.memo<HeaderGlobalProps>(({ hideDetectionEngine = false }) => {
-  const currentLocation = useLocation();
+  const search = useGetUrlSearch(navTabs.overview);
+  const { navigateToApp } = useKibana().services.application;
+  const goToOverview = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      navigateToApp(`${APP_ID}:${SecurityPageName.overview}`, { path: search });
+    },
+    [navigateToApp, search]
+  );
 
   return (
     <Wrapper className="siemHeaderGlobal">
@@ -50,9 +60,9 @@ export const HeaderGlobal = React.memo<HeaderGlobalProps>(({ hideDetectionEngine
               <FlexItem>
                 <EuiFlexGroup alignItems="center" responsive={false}>
                   <FlexItem grow={false}>
-                    <EuiLink href={getOverviewUrl()}>
+                    <LinkAnchor onClick={goToOverview} href={getAppOverviewUrl(search)}>
                       <EuiIcon aria-label={i18n.SIEM} type="securityAnalyticsApp" size="l" />
-                    </EuiLink>
+                    </LinkAnchor>
                   </FlexItem>
 
                   <FlexItem component="nav">
@@ -61,14 +71,14 @@ export const HeaderGlobal = React.memo<HeaderGlobalProps>(({ hideDetectionEngine
                         display="condensed"
                         navTabs={
                           hideDetectionEngine
-                            ? pickBy((_, key) => key !== SiemPageName.detections, navTabs)
+                            ? pickBy((_, key) => key !== SecurityPageName.alerts, navTabs)
                             : navTabs
                         }
                       />
                     ) : (
                       <SiemNavigation
                         display="condensed"
-                        navTabs={pickBy((_, key) => key === SiemPageName.overview, navTabs)}
+                        navTabs={pickBy((_, key) => key === SecurityPageName.overview, navTabs)}
                       />
                     )}
                   </FlexItem>
@@ -78,7 +88,7 @@ export const HeaderGlobal = React.memo<HeaderGlobalProps>(({ hideDetectionEngine
               <FlexItem grow={false}>
                 <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap>
                   {indicesExistOrDataTemporarilyUnavailable(indicesExist) &&
-                    currentLocation.pathname.includes(`/${SiemPageName.detections}/`) && (
+                    window.location.pathname.includes(APP_ALERTS_PATH) && (
                       <FlexItem grow={false}>
                         <MlPopover />
                       </FlexItem>
diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/header_page/index.test.tsx
index 29f227578ed96..ef838fc50d108 100644
--- a/x-pack/plugins/security_solution/public/common/components/header_page/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/header_page/index.test.tsx
@@ -11,6 +11,16 @@ import React from 'react';
 import { TestProviders } from '../../mock';
 import { HeaderPage } from './index';
 import { useMountAppended } from '../../utils/use_mount_appended';
+import { SecurityPageName } from '../../../app/types';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    useHistory: jest.fn(),
+  }),
+}));
+
+jest.mock('../link_to');
 
 describe('HeaderPage', () => {
   const mount = useMountAppended();
@@ -34,7 +44,10 @@ describe('HeaderPage', () => {
   test('it renders the back link when provided', () => {
     const wrapper = mount(
       <TestProviders>
-        <HeaderPage backOptions={{ href: '#', text: 'Test link' }} title="Test title" />
+        <HeaderPage
+          backOptions={{ href: '#', text: 'Test link', pageId: SecurityPageName.hosts }}
+          title="Test title"
+        />
       </TestProviders>
     );
 
diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx b/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx
index 3656b326e26d8..62880e7510cd2 100644
--- a/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx
@@ -5,13 +5,16 @@
  */
 
 import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiProgress } from '@elastic/eui';
-import React from 'react';
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
 import styled, { css } from 'styled-components';
 
 import { LinkIcon, LinkIconProps } from '../link_icon';
 import { Subtitle, SubtitleProps } from '../subtitle';
 import { Title } from './title';
 import { DraggableArguments, BadgeOptions, TitleProp } from './types';
+import { useFormatUrl } from '../link_to';
+import { SecurityPageName } from '../../../app/types';
 
 interface HeaderProps {
   border?: boolean;
@@ -61,6 +64,7 @@ interface BackOptions {
   href: LinkIconProps['href'];
   text: LinkIconProps['children'];
   dataTestSubj?: string;
+  pageId: SecurityPageName;
 }
 
 export interface HeaderPageProps extends HeaderProps {
@@ -86,42 +90,56 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
   title,
   titleNode,
   ...rest
-}) => (
-  <Header border={border} {...rest}>
-    <EuiFlexGroup alignItems="center">
-      <FlexItem>
-        {backOptions && (
-          <LinkBack>
-            <LinkIcon
-              dataTestSubj={backOptions.dataTestSubj}
-              href={backOptions.href}
-              iconType="arrowLeft"
-            >
-              {backOptions.text}
-            </LinkIcon>
-          </LinkBack>
-        )}
-
-        {titleNode || (
-          <Title
-            draggableArguments={draggableArguments}
-            title={title}
-            badgeOptions={badgeOptions}
-          />
-        )}
+}) => {
+  const history = useHistory();
+  const { formatUrl } = useFormatUrl(backOptions?.pageId ?? SecurityPageName.overview);
+  const goTo = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      if (backOptions) {
+        history.push(backOptions.href ?? '');
+      }
+    },
+    [backOptions, history]
+  );
+  return (
+    <Header border={border} {...rest}>
+      <EuiFlexGroup alignItems="center">
+        <FlexItem>
+          {backOptions && (
+            <LinkBack>
+              <LinkIcon
+                dataTestSubj={backOptions.dataTestSubj}
+                onClick={goTo}
+                href={formatUrl(backOptions.href ?? '')}
+                iconType="arrowLeft"
+              >
+                {backOptions.text}
+              </LinkIcon>
+            </LinkBack>
+          )}
 
-        {subtitle && <Subtitle data-test-subj="header-page-subtitle" items={subtitle} />}
-        {subtitle2 && <Subtitle data-test-subj="header-page-subtitle-2" items={subtitle2} />}
-        {border && isLoading && <EuiProgress size="xs" color="accent" />}
-      </FlexItem>
+          {titleNode || (
+            <Title
+              draggableArguments={draggableArguments}
+              title={title}
+              badgeOptions={badgeOptions}
+            />
+          )}
 
-      {children && (
-        <FlexItem data-test-subj="header-page-supplements" grow={false}>
-          {children}
+          {subtitle && <Subtitle data-test-subj="header-page-subtitle" items={subtitle} />}
+          {subtitle2 && <Subtitle data-test-subj="header-page-subtitle-2" items={subtitle2} />}
+          {border && isLoading && <EuiProgress size="xs" color="accent" />}
         </FlexItem>
-      )}
-    </EuiFlexGroup>
-  </Header>
-);
+
+        {children && (
+          <FlexItem data-test-subj="header-page-supplements" grow={false}>
+            {children}
+          </FlexItem>
+        )}
+      </EuiFlexGroup>
+    </Header>
+  );
+};
 
 export const HeaderPage = React.memo(HeaderPageComponent);
diff --git a/x-pack/plugins/security_solution/public/common/components/link_to/__mocks__/index.ts b/x-pack/plugins/security_solution/public/common/components/link_to/__mocks__/index.ts
new file mode 100644
index 0000000000000..6c9620e27fabf
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/link_to/__mocks__/index.ts
@@ -0,0 +1,24 @@
+/*
+ * 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 { SecurityPageName } from '../../../../app/types';
+
+export { getDetectionEngineUrl } from '../redirect_to_detection_engine';
+export { getAppOverviewUrl } from '../redirect_to_overview';
+export { getHostDetailsUrl, getHostsUrl } from '../redirect_to_hosts';
+export { getNetworkUrl, getIPDetailsUrl } from '../redirect_to_network';
+export { getTimelinesUrl, getTimelineTabsUrl } from '../redirect_to_timelines';
+export {
+  getCaseDetailsUrl,
+  getCaseUrl,
+  getCreateCaseUrl,
+  getConfigureCasesUrl,
+} from '../redirect_to_case';
+
+export const useFormatUrl = (page: SecurityPageName) => ({
+  formatUrl: (path: string) => path,
+  search: '',
+});
diff --git a/x-pack/plugins/security_solution/public/common/components/link_to/helpers.test.ts b/x-pack/plugins/security_solution/public/common/components/link_to/helpers.test.ts
index 14b367de674a2..97be9630c2198 100644
--- a/x-pack/plugins/security_solution/public/common/components/link_to/helpers.test.ts
+++ b/x-pack/plugins/security_solution/public/common/components/link_to/helpers.test.ts
@@ -14,6 +14,6 @@ describe('appendSearch', () => {
     expect(appendSearch(undefined)).toEqual('');
   });
   test('should return parameter if  parameter is defined', () => {
-    expect(appendSearch('helloWorld')).toEqual('helloWorld');
+    expect(appendSearch('helloWorld')).toEqual('?helloWorld');
   });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/link_to/helpers.ts b/x-pack/plugins/security_solution/public/common/components/link_to/helpers.ts
index 9d818ab3b6479..cf62547a0c720 100644
--- a/x-pack/plugins/security_solution/public/common/components/link_to/helpers.ts
+++ b/x-pack/plugins/security_solution/public/common/components/link_to/helpers.ts
@@ -4,4 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export const appendSearch = (search?: string) => (search != null ? `${search}` : '');
+import { isEmpty } from 'lodash/fp';
+
+export const appendSearch = (search?: string) =>
+  isEmpty(search) ? '' : `${search?.startsWith('?') ? search : `?${search}`}`;
diff --git a/x-pack/plugins/security_solution/public/common/components/link_to/index.ts b/x-pack/plugins/security_solution/public/common/components/link_to/index.ts
index c35a60766d7bd..140fa0e460172 100644
--- a/x-pack/plugins/security_solution/public/common/components/link_to/index.ts
+++ b/x-pack/plugins/security_solution/public/common/components/link_to/index.ts
@@ -4,25 +4,39 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { LinkToPage } from './link_to';
-export {
-  getDetectionEngineUrl,
-  RedirectToDetectionEnginePage,
-} from './redirect_to_detection_engine';
-export { getOverviewUrl, RedirectToOverviewPage } from './redirect_to_overview';
+import { isEmpty } from 'lodash/fp';
+import { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import { SecurityPageName } from '../../../app/types';
+import { useGetUrlSearch } from '../navigation/use_get_url_search';
+import { navTabs } from '../../../app/home/home_navigations';
+
+export { getDetectionEngineUrl } from './redirect_to_detection_engine';
+export { getAppOverviewUrl } from './redirect_to_overview';
 export { getHostDetailsUrl, getHostsUrl } from './redirect_to_hosts';
-export { getNetworkUrl, getIPDetailsUrl, RedirectToNetworkPage } from './redirect_to_network';
-export {
-  getTimelinesUrl,
-  getTimelineTabsUrl,
-  RedirectToTimelinesPage,
-} from './redirect_to_timelines';
+export { getNetworkUrl, getIPDetailsUrl } from './redirect_to_network';
+export { getTimelinesUrl, getTimelineTabsUrl } from './redirect_to_timelines';
 export {
   getCaseDetailsUrl,
   getCaseUrl,
   getCreateCaseUrl,
   getConfigureCasesUrl,
-  RedirectToCasePage,
-  RedirectToCreatePage,
-  RedirectToConfigureCasesPage,
 } from './redirect_to_case';
+
+export const useFormatUrl = (page: SecurityPageName) => {
+  const history = useHistory();
+  const search = useGetUrlSearch(navTabs[page]);
+  const formatUrl = useCallback(
+    (path: string) => {
+      const pathArr = path.split('?');
+      return history.createHref({
+        pathname: pathArr[0],
+        search: isEmpty(pathArr[1])
+          ? search
+          : `${pathArr[1]}${isEmpty(search) ? '' : `&${search}`}`,
+      });
+    },
+    [history, search]
+  );
+  return { formatUrl, search };
+};
diff --git a/x-pack/plugins/security_solution/public/common/components/link_to/link_to.tsx b/x-pack/plugins/security_solution/public/common/components/link_to/link_to.tsx
deleted file mode 100644
index 0294d175aef19..0000000000000
--- a/x-pack/plugins/security_solution/public/common/components/link_to/link_to.tsx
+++ /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 React from 'react';
-import { match as RouteMatch, Redirect, Route, Switch } from 'react-router-dom';
-
-import { SiemPageName } from '../../../app/types';
-import { HostsTableType } from '../../../hosts/store/model';
-import {
-  RedirectToCreateRulePage,
-  RedirectToDetectionEnginePage,
-  RedirectToEditRulePage,
-  RedirectToRuleDetailsPage,
-  RedirectToRulesPage,
-} from './redirect_to_detection_engine';
-import { RedirectToHostsPage, RedirectToHostDetailsPage } from './redirect_to_hosts';
-import { RedirectToNetworkPage } from './redirect_to_network';
-import { RedirectToOverviewPage } from './redirect_to_overview';
-import { RedirectToTimelinesPage } from './redirect_to_timelines';
-import {
-  RedirectToCasePage,
-  RedirectToCreatePage,
-  RedirectToConfigureCasesPage,
-} from './redirect_to_case';
-import { TimelineType } from '../../../../common/types/timeline';
-import { RedirectToManagementPage } from './redirect_to_management';
-
-interface LinkToPageProps {
-  match: RouteMatch<{}>;
-}
-
-export const LinkToPage = React.memo<LinkToPageProps>(({ match }) => (
-  <Switch>
-    <Route
-      component={RedirectToOverviewPage}
-      path={`${match.url}/:pageName(${SiemPageName.overview})`}
-    />
-    <Route
-      exact
-      component={RedirectToCasePage}
-      path={`${match.url}/:pageName(${SiemPageName.case})`}
-    />
-    <Route
-      exact
-      component={RedirectToCreatePage}
-      path={`${match.url}/:pageName(${SiemPageName.case})/create`}
-    />
-    <Route
-      exact
-      component={RedirectToConfigureCasesPage}
-      path={`${match.url}/:pageName(${SiemPageName.case})/configure`}
-    />
-    <Route
-      component={RedirectToCasePage}
-      path={`${match.url}/:pageName(${SiemPageName.case})/:detailName`}
-    />
-    <Route
-      component={RedirectToHostsPage}
-      exact
-      path={`${match.url}/:pageName(${SiemPageName.hosts})`}
-    />
-    <Route
-      component={RedirectToHostsPage}
-      path={`${match.url}/:pageName(${SiemPageName.hosts})/:tabName(${HostsTableType.hosts}|${HostsTableType.authentications}|${HostsTableType.uncommonProcesses}|${HostsTableType.anomalies}|${HostsTableType.events}|${HostsTableType.alerts})`}
-    />
-    <Route
-      component={RedirectToHostDetailsPage}
-      path={`${match.url}/:pageName(${SiemPageName.hosts})/:detailName/:tabName(${HostsTableType.authentications}|${HostsTableType.uncommonProcesses}|${HostsTableType.anomalies}|${HostsTableType.events}|${HostsTableType.alerts})`}
-    />
-    <Route
-      component={RedirectToHostDetailsPage}
-      path={`${match.url}/:pageName(${SiemPageName.hosts})/:detailName`}
-    />
-    <Route
-      component={RedirectToNetworkPage}
-      exact
-      path={`${match.url}/:pageName(${SiemPageName.network})`}
-    />
-    <Route
-      component={RedirectToNetworkPage}
-      path={`${match.url}/:pageName(${SiemPageName.network})/ip/:detailName/:flowTarget`}
-    />
-    <Route
-      component={RedirectToDetectionEnginePage}
-      exact
-      path={`${match.url}/:pageName(${SiemPageName.detections})`}
-    />
-    <Route
-      component={RedirectToRulesPage}
-      exact
-      path={`${match.url}/:pageName(${SiemPageName.detections})/rules`}
-    />
-    <Route
-      component={RedirectToCreateRulePage}
-      path={`${match.url}/:pageName(${SiemPageName.detections})/rules/create`}
-    />
-    <Route
-      component={RedirectToRuleDetailsPage}
-      exact
-      path={`${match.url}/:pageName(${SiemPageName.detections})/rules/id/:detailName`}
-    />
-    <Route
-      component={RedirectToEditRulePage}
-      path={`${match.url}/:pageName(${SiemPageName.detections})/rules/id/:detailName/edit`}
-    />
-    <Route
-      component={RedirectToTimelinesPage}
-      exact
-      path={`${match.url}/:pageName(${SiemPageName.timelines})`}
-    />
-    <Route
-      component={RedirectToTimelinesPage}
-      path={`${match.url}/:pageName(${SiemPageName.timelines})/:tabName(${TimelineType.default}|${TimelineType.template})`}
-    />
-    <Route
-      component={RedirectToManagementPage}
-      path={`${match.url}/:pageName(${SiemPageName.management})`}
-    />
-    <Redirect to="/" />
-  </Switch>
-));
-
-LinkToPage.displayName = 'LinkToPage';
diff --git a/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_case.tsx b/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_case.tsx
index e0c03519c6cbe..7005460999fc7 100644
--- a/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_case.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_case.tsx
@@ -4,41 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
 import { appendSearch } from './helpers';
-import { RedirectWrapper } from './redirect_wrapper';
-import { SiemPageName } from '../../../app/types';
 
-export type CaseComponentProps = RouteComponentProps<{
-  detailName: string;
-}>;
+export const getCaseUrl = (search: string | null) => `${appendSearch(search ?? undefined)}`;
 
-export const RedirectToCasePage = ({
-  match: {
-    params: { detailName },
-  },
-}: CaseComponentProps) => (
-  <RedirectWrapper
-    to={detailName ? `/${SiemPageName.case}/${detailName}` : `/${SiemPageName.case}`}
-  />
-);
+export const getCaseDetailsUrl = ({ id, search }: { id: string; search?: string | null }) =>
+  `/${encodeURIComponent(id)}${appendSearch(search ?? undefined)}`;
 
-export const RedirectToCreatePage = () => <RedirectWrapper to={`/${SiemPageName.case}/create`} />;
-export const RedirectToConfigureCasesPage = () => (
-  <RedirectWrapper to={`/${SiemPageName.case}/configure`} />
-);
+export const getCreateCaseUrl = (search?: string | null) =>
+  `/create${appendSearch(search ?? undefined)}`;
 
-const baseCaseUrl = `#/link-to/${SiemPageName.case}`;
-
-export const getCaseUrl = (search: string | null) =>
-  `${baseCaseUrl}${appendSearch(search ?? undefined)}`;
-
-export const getCaseDetailsUrl = ({ id, search }: { id: string; search: string | null }) =>
-  `${baseCaseUrl}/${encodeURIComponent(id)}${appendSearch(search ?? undefined)}`;
-
-export const getCreateCaseUrl = (search: string | null) =>
-  `${baseCaseUrl}/create${appendSearch(search ?? undefined)}`;
-
-export const getConfigureCasesUrl = (search: string) =>
-  `${baseCaseUrl}/configure${appendSearch(search ?? undefined)}`;
+export const getConfigureCasesUrl = (search?: string) =>
+  `/configure${appendSearch(search ?? undefined)}`;
diff --git a/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_detection_engine.tsx b/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_detection_engine.tsx
index e1a021192ab88..20e5367bfdde6 100644
--- a/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_detection_engine.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_detection_engine.tsx
@@ -4,65 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-
 import { appendSearch } from './helpers';
-import { RedirectWrapper } from './redirect_wrapper';
-
-export type DetectionEngineComponentProps = RouteComponentProps<{
-  detailName: string;
-  search: string;
-}>;
-
-export const DETECTION_ENGINE_PAGE_NAME = 'detections';
-
-export const RedirectToDetectionEnginePage = ({
-  location: { search },
-}: DetectionEngineComponentProps) => {
-  const to = `/${DETECTION_ENGINE_PAGE_NAME}${search}`;
-
-  return <RedirectWrapper to={to} />;
-};
 
-export const RedirectToRulesPage = ({ location: { search } }: DetectionEngineComponentProps) => {
-  return <RedirectWrapper to={`/${DETECTION_ENGINE_PAGE_NAME}/rules${search}`} />;
-};
+export const getDetectionEngineUrl = (search?: string) => `${appendSearch(search)}`;
 
-export const RedirectToCreateRulePage = ({
-  location: { search },
-}: DetectionEngineComponentProps) => {
-  return <RedirectWrapper to={`/${DETECTION_ENGINE_PAGE_NAME}/rules/create${search}`} />;
-};
+export const getDetectionEngineTabUrl = (tabPath: string, search?: string) =>
+  `/${tabPath}${appendSearch(search)}`;
 
-export const RedirectToRuleDetailsPage = ({
-  match: {
-    params: { detailName },
-  },
-  location: { search },
-}: DetectionEngineComponentProps) => {
-  return <RedirectWrapper to={`/${DETECTION_ENGINE_PAGE_NAME}/rules/id/${detailName}${search}`} />;
-};
+export const getRulesUrl = (search?: string) => `/rules${appendSearch(search)}`;
 
-export const RedirectToEditRulePage = ({
-  match: {
-    params: { detailName },
-  },
-  location: { search },
-}: DetectionEngineComponentProps) => {
-  return (
-    <RedirectWrapper to={`/${DETECTION_ENGINE_PAGE_NAME}/rules/id/${detailName}/edit${search}`} />
-  );
-};
+export const getCreateRuleUrl = (search?: string) => `/rules/create${appendSearch(search)}`;
 
-const baseDetectionEngineUrl = `#/link-to/${DETECTION_ENGINE_PAGE_NAME}`;
+export const getRuleDetailsUrl = (detailName: string, search?: string) =>
+  `/rules/id/${detailName}${appendSearch(search)}`;
 
-export const getDetectionEngineUrl = (search?: string) =>
-  `${baseDetectionEngineUrl}${appendSearch(search)}`;
-export const getDetectionEngineTabUrl = (tabPath: string) => `${baseDetectionEngineUrl}/${tabPath}`;
-export const getRulesUrl = () => `${baseDetectionEngineUrl}/rules`;
-export const getCreateRuleUrl = () => `${baseDetectionEngineUrl}/rules/create`;
-export const getRuleDetailsUrl = (detailName: string) =>
-  `${baseDetectionEngineUrl}/rules/id/${detailName}`;
-export const getEditRuleUrl = (detailName: string) =>
-  `${baseDetectionEngineUrl}/rules/id/${detailName}/edit`;
+export const getEditRuleUrl = (detailName: string, search?: string) =>
+  `/rules/id/${detailName}/edit${appendSearch(search)}`;
diff --git a/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_hosts.tsx b/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_hosts.tsx
index 0cfe8e655e255..5af24e5f7ce63 100644
--- a/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_hosts.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_hosts.tsx
@@ -4,55 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-
 import { HostsTableType } from '../../../hosts/store/model';
-import { SiemPageName } from '../../../app/types';
 
 import { appendSearch } from './helpers';
-import { RedirectWrapper } from './redirect_wrapper';
-
-export type HostComponentProps = RouteComponentProps<{
-  detailName: string;
-  tabName: HostsTableType;
-  search: string;
-}>;
-
-export const RedirectToHostsPage = ({
-  match: {
-    params: { tabName },
-  },
-  location: { search },
-}: HostComponentProps) => {
-  const defaultSelectedTab = HostsTableType.hosts;
-  const selectedTab = tabName ? tabName : defaultSelectedTab;
-  const to = `/${SiemPageName.hosts}/${selectedTab}${search}`;
-
-  return <RedirectWrapper to={to} />;
-};
-
-export const RedirectToHostDetailsPage = ({
-  match: {
-    params: { detailName, tabName },
-  },
-  location: { search },
-}: HostComponentProps) => {
-  const defaultSelectedTab = HostsTableType.authentications;
-  const selectedTab = tabName ? tabName : defaultSelectedTab;
-  const to = `/${SiemPageName.hosts}/${detailName}/${selectedTab}${search}`;
-  return <RedirectWrapper to={to} />;
-};
-
-const baseHostsUrl = `#/link-to/${SiemPageName.hosts}`;
 
-export const getHostsUrl = (search?: string) => `${baseHostsUrl}${appendSearch(search)}`;
+export const getHostsUrl = (search?: string) => `${appendSearch(search)}`;
 
 export const getTabsOnHostsUrl = (tabName: HostsTableType, search?: string) =>
-  `${baseHostsUrl}/${tabName}${appendSearch(search)}`;
+  `/${tabName}${appendSearch(search)}`;
 
-export const getHostDetailsUrl = (detailName: string) => `${baseHostsUrl}/${detailName}`;
+export const getHostDetailsUrl = (detailName: string, search?: string) =>
+  `/${detailName}${appendSearch(search)}`;
 
-export const getTabsOnHostDetailsUrl = (detailName: string, tabName: HostsTableType) => {
-  return `${baseHostsUrl}/${detailName}/${tabName}`;
-};
+export const getTabsOnHostDetailsUrl = (
+  detailName: string,
+  tabName: HostsTableType,
+  search?: string
+) => `/${detailName}/${tabName}${appendSearch(search)}`;
diff --git a/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_management.tsx b/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_management.tsx
deleted file mode 100644
index 595c203993bb7..0000000000000
--- a/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_management.tsx
+++ /dev/null
@@ -1,15 +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, { memo } from 'react';
-import { RedirectWrapper } from './redirect_wrapper';
-import { SiemPageName } from '../../../app/types';
-
-export const RedirectToManagementPage = memo(() => {
-  return <RedirectWrapper to={`/${SiemPageName.management}`} />;
-});
-
-RedirectToManagementPage.displayName = 'RedirectToManagementPage';
diff --git a/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_network.tsx b/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_network.tsx
index d72bacf511faa..8e2b47bd91dbc 100644
--- a/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_network.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_network.tsx
@@ -4,39 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-
-import { SiemPageName } from '../../../app/types';
 import { FlowTarget, FlowTargetSourceDest } from '../../../graphql/types';
 
 import { appendSearch } from './helpers';
-import { RedirectWrapper } from './redirect_wrapper';
-
-export type NetworkComponentProps = RouteComponentProps<{
-  detailName?: string;
-  flowTarget?: string;
-  search: string;
-}>;
 
-export const RedirectToNetworkPage = ({
-  match: {
-    params: { detailName, flowTarget },
-  },
-  location: { search },
-}: NetworkComponentProps) => (
-  <RedirectWrapper
-    to={
-      detailName
-        ? `/${SiemPageName.network}/ip/${detailName}/${flowTarget}${search}`
-        : `/${SiemPageName.network}${search}`
-    }
-  />
-);
+export const getNetworkUrl = (search?: string) => `${appendSearch(search)}`;
 
-const baseNetworkUrl = `#/link-to/${SiemPageName.network}`;
-export const getNetworkUrl = (search?: string) => `${baseNetworkUrl}${appendSearch(search)}`;
 export const getIPDetailsUrl = (
   detailName: string,
-  flowTarget?: FlowTarget | FlowTargetSourceDest
-) => `${baseNetworkUrl}/ip/${detailName}/${flowTarget || FlowTarget.source}`;
+  flowTarget?: FlowTarget | FlowTargetSourceDest,
+  search?: string
+) => `/ip/${detailName}/${flowTarget || FlowTarget.source}${appendSearch(search)}`;
diff --git a/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_overview.tsx b/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_overview.tsx
index 2043b820e6966..d0cf46bd90521 100644
--- a/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_overview.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_overview.tsx
@@ -4,17 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-import { RedirectWrapper } from './redirect_wrapper';
-import { SiemPageName } from '../../../app/types';
+import { APP_OVERVIEW_PATH } from '../../../../common/constants';
+import { appendSearch } from './helpers';
 
-export type OverviewComponentProps = RouteComponentProps<{
-  search: string;
-}>;
-
-export const RedirectToOverviewPage = ({ location: { search } }: OverviewComponentProps) => (
-  <RedirectWrapper to={`/${SiemPageName.overview}${search}`} />
-);
-
-export const getOverviewUrl = () => `#/link-to/${SiemPageName.overview}`;
+export const getAppOverviewUrl = (search?: string) => `${APP_OVERVIEW_PATH}${appendSearch(search)}`;
diff --git a/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_timelines.tsx b/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_timelines.tsx
index 3562153bea646..75a2fa1efa414 100644
--- a/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_timelines.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_timelines.tsx
@@ -4,37 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-
-import { SiemPageName } from '../../../app/types';
-
+import { TimelineTypeLiteral } from '../../../../common/types/timeline';
 import { appendSearch } from './helpers';
-import { RedirectWrapper } from './redirect_wrapper';
-import { TimelineTypeLiteral, TimelineType } from '../../../../common/types/timeline';
-
-export type TimelineComponentProps = RouteComponentProps<{
-  tabName: TimelineTypeLiteral;
-  search: string;
-}>;
-
-export const RedirectToTimelinesPage = ({
-  match: {
-    params: { tabName },
-  },
-  location: { search },
-}: TimelineComponentProps) => (
-  <RedirectWrapper
-    to={
-      tabName
-        ? `/${SiemPageName.timelines}/${tabName}${search}`
-        : `/${SiemPageName.timelines}/${TimelineType.default}${search}`
-    }
-  />
-);
 
-export const getTimelinesUrl = (search?: string) =>
-  `#/link-to/${SiemPageName.timelines}${appendSearch(search)}`;
+export const getTimelinesUrl = (search?: string) => `${appendSearch(search)}`;
 
 export const getTimelineTabsUrl = (tabName: TimelineTypeLiteral, search?: string) =>
-  `#/link-to/${SiemPageName.timelines}/${tabName}${appendSearch(search)}`;
+  `/${tabName}${appendSearch(search)}`;
diff --git a/x-pack/plugins/security_solution/public/common/components/link_to/redirect_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/link_to/redirect_wrapper.tsx
deleted file mode 100644
index 39f24e8351f63..0000000000000
--- a/x-pack/plugins/security_solution/public/common/components/link_to/redirect_wrapper.tsx
+++ /dev/null
@@ -1,18 +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 { Redirect } from 'react-router-dom';
-import { useScrollToTop } from '../scroll_to_top';
-
-export interface RedirectWrapperProps {
-  to: string;
-}
-
-export const RedirectWrapper = ({ to }: RedirectWrapperProps) => {
-  useScrollToTop();
-  return <Redirect to={to} />;
-};
diff --git a/x-pack/plugins/security_solution/public/common/components/links/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/links/index.test.tsx
index 9eff86bffb369..b6817c4cab1f2 100644
--- a/x-pack/plugins/security_solution/public/common/components/links/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/links/index.test.tsx
@@ -24,11 +24,20 @@ import {
   ExternalLink,
 } from '.';
 
+jest.mock('../link_to');
+
 jest.mock('../../../overview/components/events_by_dataset');
 
 jest.mock('../../lib/kibana', () => {
   return {
     useUiSetting$: jest.fn(),
+    useKibana: () => ({
+      services: {
+        application: {
+          navigateToApp: jest.fn(),
+        },
+      },
+    }),
   };
 });
 
@@ -41,17 +50,13 @@ describe('Custom Links', () => {
   describe('HostDetailsLink', () => {
     test('should render valid link to Host Details with hostName as the display text', () => {
       const wrapper = mount(<HostDetailsLink hostName={hostName} />);
-      expect(wrapper.find('EuiLink').prop('href')).toEqual(
-        `#/link-to/hosts/${encodeURIComponent(hostName)}`
-      );
+      expect(wrapper.find('EuiLink').prop('href')).toEqual(`/${encodeURIComponent(hostName)}`);
       expect(wrapper.text()).toEqual(hostName);
     });
 
     test('should render valid link to Host Details with child text as the display text', () => {
       const wrapper = mount(<HostDetailsLink hostName={hostName}>{hostName}</HostDetailsLink>);
-      expect(wrapper.find('EuiLink').prop('href')).toEqual(
-        `#/link-to/hosts/${encodeURIComponent(hostName)}`
-      );
+      expect(wrapper.find('EuiLink').prop('href')).toEqual(`/${encodeURIComponent(hostName)}`);
       expect(wrapper.text()).toEqual(hostName);
     });
   });
@@ -60,7 +65,7 @@ describe('Custom Links', () => {
     test('should render valid link to IP Details with ipv4 as the display text', () => {
       const wrapper = mount(<IPDetailsLink ip={ipv4} />);
       expect(wrapper.find('EuiLink').prop('href')).toEqual(
-        `#/link-to/network/ip/${encodeURIComponent(ipv4)}/source`
+        `/ip/${encodeURIComponent(ipv4)}/source`
       );
       expect(wrapper.text()).toEqual(ipv4);
     });
@@ -68,7 +73,7 @@ describe('Custom Links', () => {
     test('should render valid link to IP Details with child text as the display text', () => {
       const wrapper = mount(<IPDetailsLink ip={ipv4}>{hostName}</IPDetailsLink>);
       expect(wrapper.find('EuiLink').prop('href')).toEqual(
-        `#/link-to/network/ip/${encodeURIComponent(ipv4)}/source`
+        `/ip/${encodeURIComponent(ipv4)}/source`
       );
       expect(wrapper.text()).toEqual(hostName);
     });
@@ -76,7 +81,7 @@ describe('Custom Links', () => {
     test('should render valid link to IP Details with ipv6 as the display text', () => {
       const wrapper = mount(<IPDetailsLink ip={ipv6} />);
       expect(wrapper.find('EuiLink').prop('href')).toEqual(
-        `#/link-to/network/ip/${encodeURIComponent(ipv6Encoded)}/source`
+        `/ip/${encodeURIComponent(ipv6Encoded)}/source`
       );
       expect(wrapper.text()).toEqual(ipv6);
     });
diff --git a/x-pack/plugins/security_solution/public/common/components/links/index.tsx b/x-pack/plugins/security_solution/public/common/components/links/index.tsx
index 637f0d8d53057..3b92faff91517 100644
--- a/x-pack/plugins/security_solution/public/common/components/links/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/links/index.tsx
@@ -4,12 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiLink, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React, { useMemo } from 'react';
+import {
+  EuiButton,
+  EuiButtonProps,
+  EuiLink,
+  EuiLinkProps,
+  EuiToolTip,
+  EuiFlexGroup,
+  EuiFlexItem,
+  PropsForAnchor,
+  PropsForButton,
+} from '@elastic/eui';
+import React, { useMemo, useCallback } from 'react';
 import { isNil } from 'lodash/fp';
 import styled from 'styled-components';
 
-import { IP_REPUTATION_LINKS_SETTING } from '../../../../common/constants';
+import { IP_REPUTATION_LINKS_SETTING, APP_ID } from '../../../../common/constants';
 import {
   DefaultFieldRendererOverflow,
   DEFAULT_MORE_MAX_HEIGHT,
@@ -20,27 +30,53 @@ import {
   getHostDetailsUrl,
   getIPDetailsUrl,
   getCreateCaseUrl,
+  useFormatUrl,
 } from '../link_to';
 import { FlowTarget, FlowTargetSourceDest } from '../../../graphql/types';
-import { useUiSetting$ } from '../../lib/kibana';
+import { useUiSetting$, useKibana } from '../../lib/kibana';
 import { isUrlInvalid } from '../../utils/validators';
 import { ExternalLinkIcon } from '../external_link_icon';
-import { navTabs } from '../../../app/home/home_navigations';
-import { useGetUrlSearch } from '../navigation/use_get_url_search';
 
 import * as i18n from './translations';
+import { SecurityPageName } from '../../../app/types';
 
 export const DEFAULT_NUMBER_OF_LINK = 5;
 
+export const LinkButton: React.FC<
+  PropsForButton<EuiButtonProps> | PropsForAnchor<EuiButtonProps>
+> = ({ children, ...props }) => <EuiButton {...props}>{children}</EuiButton>;
+
+export const LinkAnchor: React.FC<EuiLinkProps> = ({ children, ...props }) => (
+  <EuiLink {...props}>{children}</EuiLink>
+);
+
 // Internal Links
 const HostDetailsLinkComponent: React.FC<{ children?: React.ReactNode; hostName: string }> = ({
   children,
   hostName,
-}) => (
-  <EuiLink href={getHostDetailsUrl(encodeURIComponent(hostName))}>
-    {children ? children : hostName}
-  </EuiLink>
-);
+}) => {
+  const { formatUrl, search } = useFormatUrl(SecurityPageName.hosts);
+  const { navigateToApp } = useKibana().services.application;
+  const goToHostDetails = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      navigateToApp(`${APP_ID}:${SecurityPageName.hosts}`, {
+        path: getHostDetailsUrl(encodeURIComponent(hostName), search),
+      });
+    },
+    [hostName, navigateToApp, search]
+  );
+
+  return (
+    <LinkAnchor
+      onClick={goToHostDetails}
+      href={formatUrl(getHostDetailsUrl(encodeURIComponent(hostName)))}
+    >
+      {children ? children : hostName}
+    </LinkAnchor>
+  );
+};
+export const HostDetailsLink = React.memo(HostDetailsLinkComponent);
 
 const whitelistUrlSchemes = ['http://', 'https://'];
 export const ExternalLink = React.memo<{
@@ -75,17 +111,32 @@ export const ExternalLink = React.memo<{
 
 ExternalLink.displayName = 'ExternalLink';
 
-export const HostDetailsLink = React.memo(HostDetailsLinkComponent);
-
 const IPDetailsLinkComponent: React.FC<{
   children?: React.ReactNode;
   ip: string;
   flowTarget?: FlowTarget | FlowTargetSourceDest;
-}> = ({ children, ip, flowTarget = FlowTarget.source }) => (
-  <EuiLink href={`${getIPDetailsUrl(encodeURIComponent(encodeIpv6(ip)), flowTarget)}`}>
-    {children ? children : ip}
-  </EuiLink>
-);
+}> = ({ children, ip, flowTarget = FlowTarget.source }) => {
+  const { formatUrl, search } = useFormatUrl(SecurityPageName.network);
+  const { navigateToApp } = useKibana().services.application;
+  const goToNetworkDetails = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      navigateToApp(`${APP_ID}:${SecurityPageName.network}`, {
+        path: getIPDetailsUrl(encodeURIComponent(encodeIpv6(ip)), flowTarget, search),
+      });
+    },
+    [flowTarget, ip, navigateToApp, search]
+  );
+
+  return (
+    <LinkAnchor
+      onClick={goToNetworkDetails}
+      href={formatUrl(getIPDetailsUrl(encodeURIComponent(encodeIpv6(ip))))}
+    >
+      {children ? children : ip}
+    </LinkAnchor>
+  );
+};
 
 export const IPDetailsLink = React.memo(IPDetailsLinkComponent);
 
@@ -94,24 +145,49 @@ const CaseDetailsLinkComponent: React.FC<{
   detailName: string;
   title?: string;
 }> = ({ children, detailName, title }) => {
-  const search = useGetUrlSearch(navTabs.case);
+  const { formatUrl, search } = useFormatUrl(SecurityPageName.case);
+  const { navigateToApp } = useKibana().services.application;
+  const goToCaseDetails = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      navigateToApp(`${APP_ID}:${SecurityPageName.case}`, {
+        path: getCaseDetailsUrl({ id: detailName, search }),
+      });
+    },
+    [detailName, navigateToApp, search]
+  );
 
   return (
-    <EuiLink
-      href={getCaseDetailsUrl({ id: detailName, search })}
+    <LinkAnchor
+      onClick={goToCaseDetails}
+      href={formatUrl(getCaseDetailsUrl({ id: detailName }))}
       data-test-subj="case-details-link"
       aria-label={i18n.CASE_DETAILS_LINK_ARIA(title ?? detailName)}
     >
       {children ? children : detailName}
-    </EuiLink>
+    </LinkAnchor>
   );
 };
 export const CaseDetailsLink = React.memo(CaseDetailsLinkComponent);
 CaseDetailsLink.displayName = 'CaseDetailsLink';
 
 export const CreateCaseLink = React.memo<{ children: React.ReactNode }>(({ children }) => {
-  const search = useGetUrlSearch(navTabs.case);
-  return <EuiLink href={getCreateCaseUrl(search)}>{children}</EuiLink>;
+  const { formatUrl, search } = useFormatUrl(SecurityPageName.case);
+  const { navigateToApp } = useKibana().services.application;
+  const goToCreateCase = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      navigateToApp(`${APP_ID}:${SecurityPageName.case}`, {
+        path: getCreateCaseUrl(search),
+      });
+    },
+    [navigateToApp, search]
+  );
+  return (
+    <LinkAnchor onClick={goToCreateCase} href={formatUrl(getCreateCaseUrl())}>
+      {children}
+    </LinkAnchor>
+  );
 });
 
 CreateCaseLink.displayName = 'CreateCaseLink';
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/conditional_links/ml_host_conditional_container.tsx b/x-pack/plugins/security_solution/public/common/components/ml/conditional_links/ml_host_conditional_container.tsx
index 6ca723c50c681..0f3e0f9171e6d 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/conditional_links/ml_host_conditional_container.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/conditional_links/ml_host_conditional_container.tsx
@@ -11,7 +11,6 @@ import { Redirect, Route, Switch, RouteComponentProps } from 'react-router-dom';
 import { addEntitiesToKql } from './add_entities_to_kql';
 import { replaceKQLParts } from './replace_kql_parts';
 import { emptyEntity, multipleEntities, getMultipleEntities } from './entity_helpers';
-import { SiemPageName } from '../../../../app/types';
 import { HostsTableType } from '../../../../hosts/store/model';
 
 import { url as urlUtils } from '../../../../../../../../src/plugins/kibana_utils/public';
@@ -42,7 +41,7 @@ export const MlHostConditionalContainer = React.memo<MlHostConditionalProps>(({
           sort: false,
           encode: false,
         });
-        return <Redirect to={`/${SiemPageName.hosts}?${reEncoded}`} />;
+        return <Redirect to={`?${reEncoded}`} />;
       }}
     />
     <Route
@@ -66,9 +65,7 @@ export const MlHostConditionalContainer = React.memo<MlHostConditionalProps>(({
             encode: false,
           });
 
-          return (
-            <Redirect to={`/${SiemPageName.hosts}/${HostsTableType.anomalies}?${reEncoded}`} />
-          );
+          return <Redirect to={`/${HostsTableType.anomalies}?${reEncoded}`} />;
         } else if (multipleEntities(hostName)) {
           const hosts: string[] = getMultipleEntities(hostName);
           queryStringDecoded.query = addEntitiesToKql(
@@ -81,20 +78,14 @@ export const MlHostConditionalContainer = React.memo<MlHostConditionalProps>(({
             encode: false,
           });
 
-          return (
-            <Redirect to={`/${SiemPageName.hosts}/${HostsTableType.anomalies}?${reEncoded}`} />
-          );
+          return <Redirect to={`/${HostsTableType.anomalies}?${reEncoded}`} />;
         } else {
           const reEncoded = stringify(urlUtils.encodeQuery(queryStringDecoded), {
             sort: false,
             encode: false,
           });
 
-          return (
-            <Redirect
-              to={`/${SiemPageName.hosts}/${hostName}/${HostsTableType.anomalies}?${reEncoded}`}
-            />
-          );
+          return <Redirect to={`/${hostName}/${HostsTableType.anomalies}?${reEncoded}`} />;
         }
       }}
     />
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/conditional_links/ml_network_conditional_container.tsx b/x-pack/plugins/security_solution/public/common/components/ml/conditional_links/ml_network_conditional_container.tsx
index 05049cd9b4ea5..60242276dcad7 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/conditional_links/ml_network_conditional_container.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/conditional_links/ml_network_conditional_container.tsx
@@ -11,7 +11,6 @@ import { Redirect, Route, Switch, RouteComponentProps } from 'react-router-dom';
 import { addEntitiesToKql } from './add_entities_to_kql';
 import { replaceKQLParts } from './replace_kql_parts';
 import { emptyEntity, getMultipleEntities, multipleEntities } from './entity_helpers';
-import { SiemPageName } from '../../../../app/types';
 
 import { url as urlUtils } from '../../../../../../../../src/plugins/kibana_utils/public';
 
@@ -43,7 +42,7 @@ export const MlNetworkConditionalContainer = React.memo<MlNetworkConditionalProp
           encode: false,
         });
 
-        return <Redirect to={`/${SiemPageName.network}?${reEncoded}`} />;
+        return <Redirect to={`?${reEncoded}`} />;
       }}
     />
     <Route
@@ -68,7 +67,7 @@ export const MlNetworkConditionalContainer = React.memo<MlNetworkConditionalProp
             encode: false,
           });
 
-          return <Redirect to={`/${SiemPageName.network}?${reEncoded}`} />;
+          return <Redirect to={`?${reEncoded}`} />;
         } else if (multipleEntities(ip)) {
           const ips: string[] = getMultipleEntities(ip);
           queryStringDecoded.query = addEntitiesToKql(
@@ -80,13 +79,13 @@ export const MlNetworkConditionalContainer = React.memo<MlNetworkConditionalProp
             sort: false,
             encode: false,
           });
-          return <Redirect to={`/${SiemPageName.network}?${reEncoded}`} />;
+          return <Redirect to={`?${reEncoded}`} />;
         } else {
           const reEncoded = stringify(urlUtils.encodeQuery(queryStringDecoded), {
             sort: false,
             encode: false,
           });
-          return <Redirect to={`/${SiemPageName.network}/ip/${ip}?${reEncoded}`} />;
+          return <Redirect to={`/ip/${ip}?${reEncoded}`} />;
         }
       }}
     />
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/links/create_explorer_link.test.ts b/x-pack/plugins/security_solution/public/common/components/ml/links/create_explorer_link.test.ts
index 387b0f1001881..4a25f82a94a61 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/links/create_explorer_link.test.ts
+++ b/x-pack/plugins/security_solution/public/common/components/ml/links/create_explorer_link.test.ts
@@ -22,7 +22,7 @@ describe('create_explorer_link', () => {
       new Date('3000').valueOf()
     );
     expect(entities).toEqual(
-      "ml#/explorer?_g=(ml:(jobIds:!(job-1)),refreshInterval:(display:Off,pause:!f,value:0),time:(from:'1970-01-01T00:00:00.000Z',mode:absolute,to:'3000-01-01T00:00:00.000Z'))&_a=(mlExplorerFilter:(),mlExplorerSwimlane:(),mlSelectLimit:(display:'10',val:10),mlShowCharts:!t)"
+      "#/explorer?_g=(ml:(jobIds:!(job-1)),refreshInterval:(display:Off,pause:!f,value:0),time:(from:'1970-01-01T00:00:00.000Z',mode:absolute,to:'3000-01-01T00:00:00.000Z'))&_a=(mlExplorerFilter:(),mlExplorerSwimlane:(),mlSelectLimit:(display:'10',val:10),mlShowCharts:!t)"
     );
   });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/links/create_explorer_link.ts b/x-pack/plugins/security_solution/public/common/components/ml/links/create_explorer_link.tsx
similarity index 55%
rename from x-pack/plugins/security_solution/public/common/components/ml/links/create_explorer_link.ts
rename to x-pack/plugins/security_solution/public/common/components/ml/links/create_explorer_link.tsx
index 4e3efeb05e414..e00f53a08a918 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/links/create_explorer_link.ts
+++ b/x-pack/plugins/security_solution/public/common/components/ml/links/create_explorer_link.tsx
@@ -4,13 +4,42 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiLink } from '@elastic/eui';
+import React from 'react';
 import { Anomaly } from '../types';
+import { useKibana } from '../../../lib/kibana';
+
+interface ExplorerLinkProps {
+  score: Anomaly;
+  startDate: number;
+  endDate: number;
+  linkName: React.ReactNode;
+}
+
+export const ExplorerLink: React.FC<ExplorerLinkProps> = ({
+  score,
+  startDate,
+  endDate,
+  linkName,
+}) => {
+  const { getUrlForApp } = useKibana().services.application;
+  return (
+    <EuiLink
+      href={`${getUrlForApp('ml', {
+        path: createExplorerLink(score, startDate, endDate),
+      })}`}
+      target="_blank"
+    >
+      {linkName}
+    </EuiLink>
+  );
+};
 
 export const createExplorerLink = (score: Anomaly, startDate: number, endDate: number): string => {
   const startDateIso = new Date(startDate).toISOString();
   const endDateIso = new Date(endDate).toISOString();
 
-  const JOB_PREFIX = `ml#/explorer?_g=(ml:(jobIds:!(${score.jobId}))`;
+  const JOB_PREFIX = `#/explorer?_g=(ml:(jobIds:!(${score.jobId}))`;
   const REFRESH_INTERVAL = `,refreshInterval:(display:Off,pause:!f,value:0),time:(from:'${startDateIso}',mode:absolute,to:'${endDateIso}'))`;
   const INTERVAL_SELECTION = `&_a=(mlExplorerFilter:(),mlExplorerSwimlane:(),mlSelectLimit:(display:'10',val:10),mlShowCharts:!t)`;
 
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
index 1cf35aac19043..249cc1fe5f896 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
@@ -125,12 +125,77 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
                 <EuiFlexItem
                   grow={false}
                 >
-                  <ForwardRef
-                    href="ml#/explorer?_g=(ml:(jobIds:!(job-1)),refreshInterval:(display:Off,pause:!f,value:0),time:(from:'1970-01-01T00:00:00.000Z',mode:absolute,to:'3000-01-01T00:00:00.000Z'))&_a=(mlExplorerFilter:(),mlExplorerSwimlane:(),mlSelectLimit:(display:'10',val:10),mlShowCharts:!t)"
-                    target="_blank"
-                  >
-                    View in Machine Learning
-                  </ForwardRef>
+                  <ExplorerLink
+                    endDate={32503680000000}
+                    linkName="View in Machine Learning"
+                    score={
+                      Object {
+                        "detectorIndex": 0,
+                        "entityName": "process.name",
+                        "entityValue": "du",
+                        "influencers": Array [
+                          Object {
+                            "host.name": "zeek-iowa",
+                          },
+                          Object {
+                            "process.name": "du",
+                          },
+                          Object {
+                            "user.name": "root",
+                          },
+                        ],
+                        "jobId": "job-1",
+                        "rowId": "1561157194802_0",
+                        "severity": 16.193669439507826,
+                        "source": Object {
+                          "actual": Array [
+                            1,
+                          ],
+                          "bucket_span": 900,
+                          "by_field_name": "process.name",
+                          "by_field_value": "du",
+                          "detector_index": 0,
+                          "function": "rare",
+                          "function_description": "rare",
+                          "influencers": Array [
+                            Object {
+                              "influencer_field_name": "user.name",
+                              "influencer_field_values": Array [
+                                "root",
+                              ],
+                            },
+                            Object {
+                              "influencer_field_name": "process.name",
+                              "influencer_field_values": Array [
+                                "du",
+                              ],
+                            },
+                            Object {
+                              "influencer_field_name": "host.name",
+                              "influencer_field_values": Array [
+                                "zeek-iowa",
+                              ],
+                            },
+                          ],
+                          "initial_record_score": 16.193669439507826,
+                          "is_interim": false,
+                          "job_id": "job-1",
+                          "multi_bucket_impact": 0,
+                          "partition_field_name": "host.name",
+                          "partition_field_value": "zeek-iowa",
+                          "probability": 0.024041164411288146,
+                          "record_score": 16.193669439507826,
+                          "result_type": "record",
+                          "timestamp": 1560664800000,
+                          "typical": Array [
+                            0.024041164411288146,
+                          ],
+                        },
+                        "time": 1560664800000,
+                      }
+                    }
+                    startDate={0}
+                  />
                 </EuiFlexItem>
               </ForwardRef>,
               "title": <React.Fragment>
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/create_descriptions_list.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/create_descriptions_list.test.tsx.snap
index 0a136eb31fd6d..2e771f9f045b8 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/create_descriptions_list.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/create_descriptions_list.test.tsx.snap
@@ -43,12 +43,77 @@ exports[`create_description_list renders correctly against snapshot 1`] = `
       <EuiFlexItem
         grow={false}
       >
-        <EuiLink
-          href="ml#/explorer?_g=(ml:(jobIds:!(job-1)),refreshInterval:(display:Off,pause:!f,value:0),time:(from:'1970-01-01T00:00:00.000Z',mode:absolute,to:'3000-01-01T00:00:00.000Z'))&_a=(mlExplorerFilter:(),mlExplorerSwimlane:(),mlSelectLimit:(display:'10',val:10),mlShowCharts:!t)"
-          target="_blank"
-        >
-          View in Machine Learning
-        </EuiLink>
+        <ExplorerLink
+          endDate={32503680000000}
+          linkName="View in Machine Learning"
+          score={
+            Object {
+              "detectorIndex": 0,
+              "entityName": "process.name",
+              "entityValue": "du",
+              "influencers": Array [
+                Object {
+                  "host.name": "zeek-iowa",
+                },
+                Object {
+                  "process.name": "du",
+                },
+                Object {
+                  "user.name": "root",
+                },
+              ],
+              "jobId": "job-1",
+              "rowId": "1561157194802_0",
+              "severity": 16.193669439507826,
+              "source": Object {
+                "actual": Array [
+                  1,
+                ],
+                "bucket_span": 900,
+                "by_field_name": "process.name",
+                "by_field_value": "du",
+                "detector_index": 0,
+                "function": "rare",
+                "function_description": "rare",
+                "influencers": Array [
+                  Object {
+                    "influencer_field_name": "user.name",
+                    "influencer_field_values": Array [
+                      "root",
+                    ],
+                  },
+                  Object {
+                    "influencer_field_name": "process.name",
+                    "influencer_field_values": Array [
+                      "du",
+                    ],
+                  },
+                  Object {
+                    "influencer_field_name": "host.name",
+                    "influencer_field_values": Array [
+                      "zeek-iowa",
+                    ],
+                  },
+                ],
+                "initial_record_score": 16.193669439507826,
+                "is_interim": false,
+                "job_id": "job-1",
+                "multi_bucket_impact": 0,
+                "partition_field_name": "host.name",
+                "partition_field_value": "zeek-iowa",
+                "probability": 0.024041164411288146,
+                "record_score": 16.193669439507826,
+                "result_type": "record",
+                "timestamp": 1560664800000,
+                "typical": Array [
+                  0.024041164411288146,
+                ],
+              },
+              "time": 1560664800000,
+            }
+          }
+          startDate={0}
+        />
       </EuiFlexItem>
     </EuiFlexGroup>
   </EuiDescriptionListDescription>
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/score/create_description_list.tsx b/x-pack/plugins/security_solution/public/common/components/ml/score/create_description_list.tsx
index 0651bc5874860..133f2407c45ed 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/score/create_description_list.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/score/create_description_list.tsx
@@ -14,7 +14,7 @@ import { getScoreString } from './score_health';
 import { PreferenceFormattedDate } from '../../formatted_date';
 import { createInfluencers } from './../influencers/create_influencers';
 import * as i18n from './translations';
-import { createExplorerLink } from '../links/create_explorer_link';
+import { ExplorerLink } from '../links/create_explorer_link';
 
 const LargeScore = styled(EuiText)`
   font-size: 45px;
@@ -51,9 +51,12 @@ export const createDescriptionList = (
         <EuiFlexGroup direction="column" gutterSize="none" responsive={false}>
           <EuiFlexItem grow={false}>{score.jobId}</EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiLink href={createExplorerLink(score, startDate, endDate)} target="_blank">
-              {i18n.VIEW_IN_MACHINE_LEARNING}
-            </EuiLink>
+            <ExplorerLink
+              score={score}
+              startDate={startDate}
+              endDate={endDate}
+              linkName={i18n.VIEW_IN_MACHINE_LEARNING}
+            />
           </EuiFlexItem>
         </EuiFlexGroup>
       ),
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_host_table_columns.tsx b/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_host_table_columns.tsx
index 53da31af4ad67..fc89189bf4f46 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_host_table_columns.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_host_table_columns.tsx
@@ -7,7 +7,7 @@
 /* eslint-disable react/display-name */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { Columns } from '../../paginated_table';
 import { AnomaliesByHost, Anomaly, NarrowDateRange } from '../types';
 import { getRowItemDraggable } from '../../tables/helpers';
@@ -18,7 +18,7 @@ import { HostDetailsLink } from '../../links';
 import * as i18n from './translations';
 import { getEntries } from '../get_entries';
 import { DraggableScore } from '../score/draggable_score';
-import { createExplorerLink } from '../links/create_explorer_link';
+import { ExplorerLink } from '../links/create_explorer_link';
 import { HostsType } from '../../../../hosts/store/model';
 import { escapeDataProviderId } from '../../drag_and_drop/helpers';
 import { FormattedRelativePreferenceDate } from '../../formatted_date';
@@ -55,12 +55,12 @@ export const getAnomaliesHostTableColumns = (
     field: 'anomaly.jobId',
     sortable: true,
     render: (jobId, anomaliesByHost) => (
-      <EuiLink
-        href={`${createExplorerLink(anomaliesByHost.anomaly, startDate, endDate)}`}
-        target="_blank"
-      >
-        {jobId}
-      </EuiLink>
+      <ExplorerLink
+        score={anomaliesByHost.anomaly}
+        startDate={startDate}
+        endDate={endDate}
+        linkName={jobId}
+      />
     ),
   },
   {
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_network_table_columns.tsx b/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_network_table_columns.tsx
index abd4eec8898e4..ce4269afbe5b2 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_network_table_columns.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_network_table_columns.tsx
@@ -7,7 +7,7 @@
 /* eslint-disable react/display-name */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import { Columns } from '../../paginated_table';
 import { Anomaly, AnomaliesByNetwork } from '../types';
@@ -19,7 +19,7 @@ import { IPDetailsLink } from '../../links';
 import * as i18n from './translations';
 import { getEntries } from '../get_entries';
 import { DraggableScore } from '../score/draggable_score';
-import { createExplorerLink } from '../links/create_explorer_link';
+import { ExplorerLink } from '../links/create_explorer_link';
 import { FormattedRelativePreferenceDate } from '../../formatted_date';
 import { NetworkType } from '../../../../network/store/model';
 import { escapeDataProviderId } from '../../drag_and_drop/helpers';
@@ -54,12 +54,12 @@ export const getAnomaliesNetworkTableColumns = (
     field: 'anomaly.jobId',
     sortable: true,
     render: (jobId, anomaliesByHost) => (
-      <EuiLink
-        href={`${createExplorerLink(anomaliesByHost.anomaly, startDate, endDate)}`}
-        target="_blank"
-      >
-        {jobId}
-      </EuiLink>
+      <ExplorerLink
+        score={anomaliesByHost.anomaly}
+        startDate={startDate}
+        endDate={endDate}
+        linkName={jobId}
+      />
     ),
   },
   {
diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/__mocks__/use_get_url_search.ts b/x-pack/plugins/security_solution/public/common/components/navigation/__mocks__/use_get_url_search.ts
new file mode 100644
index 0000000000000..d8a1db0aae70d
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/navigation/__mocks__/use_get_url_search.ts
@@ -0,0 +1,9 @@
+/*
+ * 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 { SearchNavTab } from '../types';
+
+export const useGetUrlSearch = (tab: SearchNavTab) => '';
diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.test.ts b/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.test.ts
index 8f1318aea3763..2c30f9a2e4ac3 100644
--- a/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.test.ts
+++ b/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.test.ts
@@ -38,28 +38,28 @@ const getMockObject = (
   navTabs: {
     hosts: {
       disabled: false,
-      href: '#/link-to/hosts',
+      href: '/app/security/hosts',
       id: 'hosts',
       name: 'Hosts',
       urlKey: 'host',
     },
     network: {
       disabled: false,
-      href: '#/link-to/network',
+      href: '/app/security/network',
       id: 'network',
       name: 'Network',
       urlKey: 'network',
     },
     overview: {
       disabled: false,
-      href: '#/link-to/overview',
+      href: '/app/security/overview',
       id: 'overview',
       name: 'Overview',
       urlKey: 'overview',
     },
     timelines: {
       disabled: false,
-      href: '#/link-to/timelines',
+      href: '/app/security/timelines',
       id: 'timelines',
       name: 'Timelines',
       urlKey: 'timeline',
@@ -99,6 +99,9 @@ const getMockObject = (
   },
 });
 
+const getUrlForAppMock = (appId: string, options?: { path?: string; absolute?: boolean }) =>
+  `${appId}${options?.path ?? ''}`;
+
 describe('Navigation Breadcrumbs', () => {
   const hostName = 'siem-kibana';
 
@@ -108,15 +111,18 @@ describe('Navigation Breadcrumbs', () => {
 
   describe('getBreadcrumbsForRoute', () => {
     test('should return Host breadcrumbs when supplied host pathname', () => {
-      const breadcrumbs = getBreadcrumbsForRoute(getMockObject('hosts', '/hosts', undefined));
+      const breadcrumbs = getBreadcrumbsForRoute(
+        getMockObject('hosts', '/', undefined),
+        getUrlForAppMock
+      );
       expect(breadcrumbs).toEqual([
         {
-          href: '#/link-to/overview',
+          href: '/app/security/overview',
           text: 'Security',
         },
         {
           href:
-            '#/link-to/hosts?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
+            'securitySolution:hosts?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
           text: 'Hosts',
         },
         {
@@ -127,13 +133,16 @@ describe('Navigation Breadcrumbs', () => {
     });
 
     test('should return Network breadcrumbs when supplied network pathname', () => {
-      const breadcrumbs = getBreadcrumbsForRoute(getMockObject('network', '/network', undefined));
+      const breadcrumbs = getBreadcrumbsForRoute(
+        getMockObject('network', '/', undefined),
+        getUrlForAppMock
+      );
       expect(breadcrumbs).toEqual([
-        { text: 'Security', href: '#/link-to/overview' },
+        { text: 'Security', href: '/app/security/overview' },
         {
           text: 'Network',
           href:
-            '#/link-to/network?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
+            'securitySolution:network?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
         },
         {
           text: 'Flows',
@@ -144,61 +153,75 @@ describe('Navigation Breadcrumbs', () => {
 
     test('should return Timelines breadcrumbs when supplied timelines pathname', () => {
       const breadcrumbs = getBreadcrumbsForRoute(
-        getMockObject('timelines', '/timelines', undefined)
+        getMockObject('timelines', '/', undefined),
+        getUrlForAppMock
       );
       expect(breadcrumbs).toEqual([
-        { text: 'Security', href: '#/link-to/overview' },
-        { text: 'Timelines', href: '#/link-to/timelines' },
+        { text: 'Security', href: '/app/security/overview' },
+        {
+          text: 'Timelines',
+          href:
+            'securitySolution:timelines?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
+        },
       ]);
     });
 
     test('should return Host Details breadcrumbs when supplied a pathname with hostName', () => {
-      const breadcrumbs = getBreadcrumbsForRoute(getMockObject('hosts', '/hosts', hostName));
+      const breadcrumbs = getBreadcrumbsForRoute(
+        getMockObject('hosts', '/', hostName),
+        getUrlForAppMock
+      );
       expect(breadcrumbs).toEqual([
-        { text: 'Security', href: '#/link-to/overview' },
+        { text: 'Security', href: '/app/security/overview' },
         {
           text: 'Hosts',
           href:
-            '#/link-to/hosts?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
+            'securitySolution:hosts?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
         },
         {
           text: 'siem-kibana',
           href:
-            '#/link-to/hosts/siem-kibana?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
+            'securitySolution:hosts/siem-kibana?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
         },
         { text: 'Authentications', href: '' },
       ]);
     });
 
     test('should return IP Details breadcrumbs when supplied pathname with ipv4', () => {
-      const breadcrumbs = getBreadcrumbsForRoute(getMockObject('network', '/network', ipv4));
+      const breadcrumbs = getBreadcrumbsForRoute(
+        getMockObject('network', '/', ipv4),
+        getUrlForAppMock
+      );
       expect(breadcrumbs).toEqual([
-        { text: 'Security', href: '#/link-to/overview' },
+        { text: 'Security', href: '/app/security/overview' },
         {
           text: 'Network',
           href:
-            '#/link-to/network?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
+            'securitySolution:network?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
         },
         {
           text: ipv4,
-          href: `#/link-to/network/ip/${ipv4}/source?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))`,
+          href: `securitySolution:network/ip/${ipv4}/source?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))`,
         },
         { text: 'Flows', href: '' },
       ]);
     });
 
     test('should return IP Details breadcrumbs when supplied pathname with ipv6', () => {
-      const breadcrumbs = getBreadcrumbsForRoute(getMockObject('network', '/network', ipv6Encoded));
+      const breadcrumbs = getBreadcrumbsForRoute(
+        getMockObject('network', '/', ipv6Encoded),
+        getUrlForAppMock
+      );
       expect(breadcrumbs).toEqual([
-        { text: 'Security', href: '#/link-to/overview' },
+        { text: 'Security', href: '/app/security/overview' },
         {
           text: 'Network',
           href:
-            '#/link-to/network?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
+            'securitySolution:network?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
         },
         {
           text: ipv6,
-          href: `#/link-to/network/ip/${ipv6Encoded}/source?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))`,
+          href: `securitySolution:network/ip/${ipv6Encoded}/source?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))`,
         },
         { text: 'Flows', href: '' },
       ]);
@@ -207,18 +230,18 @@ describe('Navigation Breadcrumbs', () => {
 
   describe('setBreadcrumbs()', () => {
     test('should call chrome breadcrumb service with correct breadcrumbs', () => {
-      setBreadcrumbs(getMockObject('hosts', '/hosts', hostName), chromeMock);
+      setBreadcrumbs(getMockObject('hosts', '/', hostName), chromeMock, getUrlForAppMock);
       expect(setBreadcrumbsMock).toBeCalledWith([
-        { text: 'Security', href: '#/link-to/overview' },
+        { text: 'Security', href: '/app/security/overview' },
         {
           text: 'Hosts',
           href:
-            '#/link-to/hosts?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
+            'securitySolution:hosts?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
         },
         {
           text: 'siem-kibana',
           href:
-            '#/link-to/hosts/siem-kibana?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
+            'securitySolution:hosts/siem-kibana?timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))',
         },
         { text: 'Authentications', href: '' },
       ]);
diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.ts b/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.ts
index a202407b1270c..5c1c68b802726 100644
--- a/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.ts
+++ b/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.ts
@@ -15,24 +15,25 @@ import { getBreadcrumbs as getIPDetailsBreadcrumbs } from '../../../../network/p
 import { getBreadcrumbs as getCaseDetailsBreadcrumbs } from '../../../../cases/pages/utils';
 import { getBreadcrumbs as getDetectionRulesBreadcrumbs } from '../../../../alerts/pages/detection_engine/rules/utils';
 import { getBreadcrumbs as getTimelinesBreadcrumbs } from '../../../../timelines/pages';
-import { SiemPageName } from '../../../../app/types';
+import { SecurityPageName } from '../../../../app/types';
 import {
   RouteSpyState,
   HostRouteSpyState,
   NetworkRouteSpyState,
   TimelineRouteSpyState,
 } from '../../../utils/route/types';
-import { getOverviewUrl } from '../../link_to';
+import { getAppOverviewUrl } from '../../link_to';
 
 import { TabNavigationProps } from '../tab_navigation/types';
 import { getSearch } from '../helpers';
-import { SearchNavTab } from '../types';
+import { GetUrlForApp, SearchNavTab } from '../types';
 
 export const setBreadcrumbs = (
   spyState: RouteSpyState & TabNavigationProps,
-  chrome: StartServices['chrome']
+  chrome: StartServices['chrome'],
+  getUrlForApp: GetUrlForApp
 ) => {
-  const breadcrumbs = getBreadcrumbsForRoute(spyState);
+  const breadcrumbs = getBreadcrumbsForRoute(spyState, getUrlForApp);
   if (breadcrumbs) {
     chrome.setBreadcrumbs(breadcrumbs);
   }
@@ -41,27 +42,28 @@ export const setBreadcrumbs = (
 export const siemRootBreadcrumb: ChromeBreadcrumb[] = [
   {
     text: APP_NAME,
-    href: getOverviewUrl(),
+    href: getAppOverviewUrl(),
   },
 ];
 
 const isNetworkRoutes = (spyState: RouteSpyState): spyState is NetworkRouteSpyState =>
-  spyState != null && spyState.pageName === SiemPageName.network;
+  spyState != null && spyState.pageName === SecurityPageName.network;
 
 const isHostsRoutes = (spyState: RouteSpyState): spyState is HostRouteSpyState =>
-  spyState != null && spyState.pageName === SiemPageName.hosts;
+  spyState != null && spyState.pageName === SecurityPageName.hosts;
 
 const isTimelinesRoutes = (spyState: RouteSpyState): spyState is TimelineRouteSpyState =>
-  spyState != null && spyState.pageName === SiemPageName.timelines;
+  spyState != null && spyState.pageName === SecurityPageName.timelines;
 
 const isCaseRoutes = (spyState: RouteSpyState): spyState is RouteSpyState =>
-  spyState != null && spyState.pageName === SiemPageName.case;
+  spyState != null && spyState.pageName === SecurityPageName.case;
 
-const isDetectionsRoutes = (spyState: RouteSpyState) =>
-  spyState != null && spyState.pageName === SiemPageName.detections;
+const isAlertsRoutes = (spyState: RouteSpyState) =>
+  spyState != null && spyState.pageName === SecurityPageName.alerts;
 
 export const getBreadcrumbsForRoute = (
-  object: RouteSpyState & TabNavigationProps
+  object: RouteSpyState & TabNavigationProps,
+  getUrlForApp: GetUrlForApp
 ): ChromeBreadcrumb[] | null => {
   const spyState: RouteSpyState = omit('navTabs', object);
   if (isHostsRoutes(spyState) && object.navTabs) {
@@ -77,7 +79,8 @@ export const getBreadcrumbsForRoute = (
         urlStateKeys.reduce(
           (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
           []
-        )
+        ),
+        getUrlForApp
       ),
     ];
   }
@@ -94,12 +97,13 @@ export const getBreadcrumbsForRoute = (
         urlStateKeys.reduce(
           (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
           []
-        )
+        ),
+        getUrlForApp
       ),
     ];
   }
-  if (isDetectionsRoutes(spyState) && object.navTabs) {
-    const tempNav: SearchNavTab = { urlKey: 'detections', isDetailPage: false };
+  if (isAlertsRoutes(spyState) && object.navTabs) {
+    const tempNav: SearchNavTab = { urlKey: 'alerts', isDetailPage: false };
     let urlStateKeys = [getOr(tempNav, spyState.pageName, object.navTabs)];
     if (spyState.tabName != null) {
       urlStateKeys = [...urlStateKeys, getOr(tempNav, spyState.tabName, object.navTabs)];
@@ -112,7 +116,8 @@ export const getBreadcrumbsForRoute = (
         urlStateKeys.reduce(
           (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
           []
-        )
+        ),
+        getUrlForApp
       ),
     ];
   }
@@ -130,7 +135,8 @@ export const getBreadcrumbsForRoute = (
         urlStateKeys.reduce(
           (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
           []
-        )
+        ),
+        getUrlForApp
       ),
     ];
   }
@@ -148,7 +154,8 @@ export const getBreadcrumbsForRoute = (
         urlStateKeys.reduce(
           (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
           []
-        )
+        ),
+        getUrlForApp
       ),
     ];
   }
diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/navigation/index.test.tsx
index fd96885e5bc10..69e6ef8688c4d 100644
--- a/x-pack/plugins/security_solution/public/common/components/navigation/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/navigation/index.test.tsx
@@ -15,14 +15,36 @@ import { HostsTableType } from '../../../hosts/store/model';
 import { RouteSpyState } from '../../utils/route/types';
 import { SiemNavigationProps, SiemNavigationComponentProps } from './types';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    useHistory: jest.fn(),
+  }),
+}));
+
 jest.mock('./breadcrumbs', () => ({
   setBreadcrumbs: jest.fn(),
 }));
+const mockGetUrlForApp = jest.fn();
+jest.mock('../../lib/kibana', () => {
+  return {
+    useKibana: () => ({
+      services: {
+        chrome: undefined,
+        application: {
+          navigateToApp: jest.fn(),
+          getUrlForApp: mockGetUrlForApp,
+        },
+      },
+    }),
+  };
+});
+jest.mock('../link_to');
 
 describe('SIEM Navigation', () => {
   const mockProps: SiemNavigationComponentProps & SiemNavigationProps & RouteSpyState = {
     pageName: 'hosts',
-    pathName: '/hosts',
+    pathName: '/',
     detailName: undefined,
     search: '',
     tabName: HostsTableType.authentications,
@@ -65,63 +87,64 @@ describe('SIEM Navigation', () => {
       {
         detailName: undefined,
         navTabs: {
+          alerts: {
+            disabled: false,
+            href: '/app/security/alerts',
+            id: 'alerts',
+            name: 'Alerts',
+            urlKey: 'alerts',
+          },
           case: {
             disabled: false,
-            href: '#/link-to/case',
+            href: '/app/security/cases',
             id: 'case',
             name: 'Cases',
             urlKey: 'case',
           },
           management: {
             disabled: false,
-            href: '#/management',
+            href: '/app/security/management',
             id: 'management',
             name: 'Management',
             urlKey: 'management',
           },
-          detections: {
-            disabled: false,
-            href: '#/link-to/detections',
-            id: 'detections',
-            name: 'Detections',
-            urlKey: 'detections',
-          },
           hosts: {
             disabled: false,
-            href: '#/link-to/hosts',
+            href: '/app/security/hosts',
             id: 'hosts',
             name: 'Hosts',
             urlKey: 'host',
           },
           network: {
             disabled: false,
-            href: '#/link-to/network',
+            href: '/app/security/network',
             id: 'network',
             name: 'Network',
             urlKey: 'network',
           },
           overview: {
             disabled: false,
-            href: '#/link-to/overview',
+            href: '/app/security/overview',
             id: 'overview',
             name: 'Overview',
             urlKey: 'overview',
           },
           timelines: {
             disabled: false,
-            href: '#/link-to/timelines',
+            href: '/app/security/timelines',
             id: 'timelines',
             name: 'Timelines',
             urlKey: 'timeline',
           },
         },
         pageName: 'hosts',
-        pathName: '/hosts',
+        pathName: '/',
         search: '',
         state: undefined,
         tabName: 'authentications',
         query: { query: '', language: 'kuery' },
         filters: [],
+        flowTarget: undefined,
         savedQuery: undefined,
         timeline: {
           id: '',
@@ -150,79 +173,82 @@ describe('SIEM Navigation', () => {
           },
         },
       },
-      undefined
+      undefined,
+      mockGetUrlForApp
     );
   });
   test('it calls setBreadcrumbs with correct path on update', () => {
     wrapper.setProps({
       pageName: 'network',
-      pathName: '/network',
+      pathName: '/',
       tabName: undefined,
     });
     wrapper.update();
     expect(setBreadcrumbs).toHaveBeenNthCalledWith(
-      1,
+      2,
       {
         detailName: undefined,
         filters: [],
+        flowTarget: undefined,
         navTabs: {
+          alerts: {
+            disabled: false,
+            href: '/app/security/alerts',
+            id: 'alerts',
+            name: 'Alerts',
+            urlKey: 'alerts',
+          },
           case: {
             disabled: false,
-            href: '#/link-to/case',
+            href: '/app/security/cases',
             id: 'case',
             name: 'Cases',
             urlKey: 'case',
           },
-          detections: {
-            disabled: false,
-            href: '#/link-to/detections',
-            id: 'detections',
-            name: 'Detections',
-            urlKey: 'detections',
-          },
+
           hosts: {
             disabled: false,
-            href: '#/link-to/hosts',
+            href: '/app/security/hosts',
             id: 'hosts',
             name: 'Hosts',
             urlKey: 'host',
           },
           management: {
             disabled: false,
-            href: '#/management',
+            href: '/app/security/management',
             id: 'management',
             name: 'Management',
             urlKey: 'management',
           },
           network: {
             disabled: false,
-            href: '#/link-to/network',
+            href: '/app/security/network',
             id: 'network',
             name: 'Network',
             urlKey: 'network',
           },
           overview: {
             disabled: false,
-            href: '#/link-to/overview',
+            href: '/app/security/overview',
             id: 'overview',
             name: 'Overview',
             urlKey: 'overview',
           },
           timelines: {
             disabled: false,
-            href: '#/link-to/timelines',
+            href: '/app/security/timelines',
             id: 'timelines',
             name: 'Timelines',
             urlKey: 'timeline',
           },
         },
-        pageName: 'hosts',
-        pathName: '/hosts',
+        pageName: 'network',
+        pathName: '/',
         query: { language: 'kuery', query: '' },
         savedQuery: undefined,
         search: '',
         state: undefined,
-        tabName: 'authentications',
+        tabName: undefined,
         timeline: { id: '', isOpen: false },
         timerange: {
           global: {
@@ -247,7 +273,8 @@ describe('SIEM Navigation', () => {
           },
         },
       },
-      undefined
+      undefined,
+      mockGetUrlForApp
     );
   });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/index.tsx b/x-pack/plugins/security_solution/public/common/components/navigation/index.tsx
index 0cbff9e70eff7..5ee35e7da0f3e 100644
--- a/x-pack/plugins/security_solution/public/common/components/navigation/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/navigation/index.tsx
@@ -31,10 +31,13 @@ export const SiemNavigationComponent: React.FC<
   flowTarget,
   state,
 }) => {
-  const { chrome } = useKibana().services;
+  const {
+    chrome,
+    application: { getUrlForApp },
+  } = useKibana().services;
 
   useEffect(() => {
-    if (pathName) {
+    if (pathName || pageName) {
       setBreadcrumbs(
         {
           query: urlState.query,
@@ -51,11 +54,12 @@ export const SiemNavigationComponent: React.FC<
           timeline: urlState.timeline,
           state,
         },
-        chrome
+        chrome,
+        getUrlForApp
       );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chrome, pathName, search, navTabs, urlState, state]);
+  }, [chrome, pageName, pathName, search, navTabs, urlState, state]);
 
   return (
     <TabNavigation
diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.test.tsx
index b9572caece94f..99d6f7840a7d5 100644
--- a/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.test.tsx
@@ -8,7 +8,7 @@ import { mount } from 'enzyme';
 import React from 'react';
 
 import { navTabs } from '../../../../app/home/home_navigations';
-import { SiemPageName } from '../../../../app/types';
+import { SecurityPageName } from '../../../../app/types';
 import { navTabsHostDetails } from '../../../../hosts/pages/details/nav_tabs';
 import { HostsTableType } from '../../../../hosts/store/model';
 import { RouteSpyState } from '../../../utils/route/types';
@@ -16,8 +16,18 @@ import { CONSTANTS } from '../../url_state/constants';
 import { TabNavigationComponent } from './';
 import { TabNavigationProps } from './types';
 
+jest.mock('../../../lib/kibana');
+jest.mock('../../link_to');
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    push: jest.fn(),
+  }),
+}));
+
 describe('Tab Navigation', () => {
-  const pageName = SiemPageName.hosts;
+  const pageName = SecurityPageName.hosts;
   const hostName = 'siem-window';
   const tabName = HostsTableType.authentications;
   const pathName = `/${pageName}/${hostName}/${tabName}`;
@@ -76,13 +86,6 @@ describe('Tab Navigation', () => {
       wrapper.update();
       expect(networkTab().prop('isSelected')).toBeTruthy();
     });
-    test('it carries the url state in the link', () => {
-      const wrapper = mount(<TabNavigationComponent {...mockProps} />);
-      const firstTab = wrapper.find('EuiTab[data-test-subj="navigation-network"]');
-      expect(firstTab.props().href).toBe(
-        "#/link-to/network?query=(language:kuery,query:'host.name:%22siem-es%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))"
-      );
-    });
   });
 
   describe('Table Navigation', () => {
@@ -137,8 +140,8 @@ describe('Tab Navigation', () => {
         wrapper.find(`[data-test-subj="navigation-${HostsTableType.events}"]`).first();
       expect(tableNavigationTab().prop('isSelected')).toBeFalsy();
       wrapper.setProps({
-        pageName: SiemPageName.hosts,
-        pathName: `/${SiemPageName.hosts}`,
+        pageName: SecurityPageName.hosts,
+        pathName: `/${SecurityPageName.hosts}`,
         tabName: HostsTableType.events,
       });
       wrapper.update();
@@ -149,9 +152,7 @@ describe('Tab Navigation', () => {
       const firstTab = wrapper.find(
         `EuiTab[data-test-subj="navigation-${HostsTableType.authentications}"]`
       );
-      expect(firstTab.props().href).toBe(
-        `#/${pageName}/${hostName}/${HostsTableType.authentications}?query=(language:kuery,query:'host.name:%22siem-es%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))`
-      );
+      expect(firstTab.props().href).toBe('/siem-window/authentications');
     });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.tsx b/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.tsx
index 15dff1ca82d81..217ad0e58570f 100644
--- a/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.tsx
@@ -6,30 +6,54 @@
 import { EuiTab, EuiTabs } from '@elastic/eui';
 import { getOr } from 'lodash/fp';
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import { useHistory } from 'react-router-dom';
 
+import { APP_ID } from '../../../../../common/constants';
 import { track, METRIC_TYPE, TELEMETRY_EVENT } from '../../../lib/telemetry';
 import { getSearch } from '../helpers';
 import { TabNavigationProps, TabNavigationItemProps } from './types';
+import { useKibana } from '../../../lib/kibana';
+import { SecurityPageName } from '../../../../app/types';
+import { useFormatUrl } from '../../link_to';
 
 const TabNavigationItemComponent = ({
+  disabled,
   href,
   hrefWithSearch,
   id,
-  disabled,
   name,
   isSelected,
+  pageId,
+  urlSearch,
 }: TabNavigationItemProps) => {
-  const handleClick = useCallback(() => {
-    track(METRIC_TYPE.CLICK, `${TELEMETRY_EVENT.TAB_CLICKED}${id}`);
-  }, [id]);
-
+  const history = useHistory();
+  const { navigateToApp, getUrlForApp } = useKibana().services.application;
+  const { formatUrl } = useFormatUrl(((pageId ?? id) as unknown) as SecurityPageName);
+  const handleClick = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      if (id in SecurityPageName && pageId == null) {
+        navigateToApp(`${APP_ID}:${id}`, { path: urlSearch });
+      } else {
+        history.push(hrefWithSearch);
+      }
+      track(METRIC_TYPE.CLICK, `${TELEMETRY_EVENT.TAB_CLICKED}${id}`);
+    },
+    [history, hrefWithSearch, id, navigateToApp, pageId, urlSearch]
+  );
+  const appHref =
+    pageId != null
+      ? formatUrl(href)
+      : getUrlForApp(`${APP_ID}:${id}`, {
+          path: urlSearch,
+        });
   return (
     <EuiTab
-      data-href={href}
+      data-href={appHref}
       data-test-subj={`navigation-${id}`}
       disabled={disabled}
-      href={hrefWithSearch}
       isSelected={isSelected}
+      href={appHref}
       onClick={handleClick}
     >
       {name}
@@ -47,7 +71,11 @@ export const TabNavigationComponent = (props: TabNavigationProps) => {
       getOr(
         '',
         'id',
-        Object.values(navTabs).find((item) => tabName === item.id || pageName === item.id)
+        Object.values(navTabs).find(
+          (item) =>
+            (tabName === item.id && item.pageId != null) ||
+            (pageName === item.id && item.pageId == null)
+        )
       ),
     [pageName, tabName, navTabs]
   );
@@ -67,6 +95,7 @@ export const TabNavigationComponent = (props: TabNavigationProps) => {
       Object.values(navTabs).map((tab) => {
         const isSelected = selectedTabId === tab.id;
         const { query, filters, savedQuery, timerange, timeline } = props;
+        const search = getSearch(tab, { query, filters, savedQuery, timerange, timeline });
         const hrefWithSearch =
           tab.href + getSearch(tab, { query, filters, savedQuery, timerange, timeline });
 
@@ -75,10 +104,12 @@ export const TabNavigationComponent = (props: TabNavigationProps) => {
             key={`navigation-${tab.id}`}
             id={tab.id}
             href={tab.href}
+            hrefWithSearch={hrefWithSearch}
             name={tab.name}
             disabled={tab.disabled}
-            hrefWithSearch={hrefWithSearch}
+            pageId={tab.pageId}
             isSelected={isSelected}
+            urlSearch={search}
           />
         );
       }),
diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/types.ts b/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/types.ts
index a283691cfe0df..7f72e37c74d56 100644
--- a/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/types.ts
+++ b/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/types.ts
@@ -30,4 +30,6 @@ export interface TabNavigationItemProps {
   disabled: boolean;
   name: string;
   isSelected: boolean;
+  urlSearch: string;
+  pageId?: string;
 }
diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/types.ts b/x-pack/plugins/security_solution/public/common/components/navigation/types.ts
index f0256813c29e7..80302be18355c 100644
--- a/x-pack/plugins/security_solution/public/common/components/navigation/types.ts
+++ b/x-pack/plugins/security_solution/public/common/components/navigation/types.ts
@@ -9,6 +9,7 @@ import { HostsTableType } from '../../../hosts/store/model';
 import { UrlInputsModel } from '../../store/inputs/model';
 import { TimelineUrl } from '../../../timelines/store/timeline/model';
 import { CONSTANTS, UrlStateType } from '../url_state/constants';
+import { SecurityPageName } from '../../../app/types';
 
 export interface SiemNavigationProps {
   display?: 'default' | 'condensed';
@@ -37,4 +38,21 @@ export interface NavTab {
   disabled: boolean;
   urlKey: UrlStateType;
   isDetailPage?: boolean;
+  pageId?: SecurityPageName;
 }
+
+export type SiemNavTabKey =
+  | SecurityPageName.overview
+  | SecurityPageName.hosts
+  | SecurityPageName.network
+  | SecurityPageName.alerts
+  | SecurityPageName.timelines
+  | SecurityPageName.case
+  | SecurityPageName.management;
+
+export type SiemNavTab = Record<SiemNavTabKey, NavTab>;
+
+export type GetUrlForApp = (
+  appId: string,
+  options?: { path?: string; absolute?: boolean }
+) => string;
diff --git a/x-pack/plugins/security_solution/public/common/components/news_feed/no_news/index.tsx b/x-pack/plugins/security_solution/public/common/components/news_feed/no_news/index.tsx
index 8061a8f9799e3..d626433de1b63 100644
--- a/x-pack/plugins/security_solution/public/common/components/news_feed/no_news/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/news_feed/no_news/index.tsx
@@ -8,17 +8,21 @@ import { EuiLink, EuiText } from '@elastic/eui';
 import React from 'react';
 
 import * as i18n from '../translations';
+import { useBasePath } from '../../../lib/kibana';
 
-export const NoNews = React.memo(() => (
-  <>
-    <EuiText color="subdued" size="s">
-      {i18n.NO_NEWS_MESSAGE}{' '}
-      <EuiLink href={'/app/management/kibana/settings'}>
-        {i18n.ADVANCED_SETTINGS_LINK_TITLE}
-      </EuiLink>
-      {'.'}
-    </EuiText>
-  </>
-));
+export const NoNews = React.memo(() => {
+  const basePath = useBasePath();
+  return (
+    <>
+      <EuiText color="subdued" size="s">
+        {i18n.NO_NEWS_MESSAGE}{' '}
+        <EuiLink href={`${basePath}/app/management/kibana/settings`}>
+          {i18n.ADVANCED_SETTINGS_LINK_TITLE}
+        </EuiLink>
+        {'.'}
+      </EuiText>
+    </>
+  );
+});
 
 NoNews.displayName = 'NoNews';
diff --git a/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx
index 1c24c325dc9ec..d545de9e7a6b7 100644
--- a/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx
@@ -26,6 +26,14 @@ import {
   timelineDefaults,
 } from '../../../timelines/components/manage_timeline';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    useHistory: jest.fn(),
+  }),
+}));
+
+jest.mock('../link_to');
 jest.mock('../../lib/kibana');
 jest.mock('../../../timelines/store/timeline/actions');
 
diff --git a/x-pack/plugins/security_solution/public/common/components/top_n/top_n.test.tsx b/x-pack/plugins/security_solution/public/common/components/top_n/top_n.test.tsx
index 5e1476f62216b..62960d4fae71b 100644
--- a/x-pack/plugins/security_solution/public/common/components/top_n/top_n.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/top_n/top_n.test.tsx
@@ -13,7 +13,15 @@ import { setAbsoluteRangeDatePicker } from '../../store/inputs/actions';
 import { allEvents, defaultOptions } from './helpers';
 import { TopN } from './top_n';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    useHistory: jest.fn(),
+  }),
+}));
+
 jest.mock('../../lib/kibana');
+jest.mock('../link_to');
 
 jest.mock('uuid', () => {
   return {
diff --git a/x-pack/plugins/security_solution/public/common/components/url_state/constants.ts b/x-pack/plugins/security_solution/public/common/components/url_state/constants.ts
index 1faff2594ce80..71faec88e85a0 100644
--- a/x-pack/plugins/security_solution/public/common/components/url_state/constants.ts
+++ b/x-pack/plugins/security_solution/public/common/components/url_state/constants.ts
@@ -8,7 +8,7 @@ export enum CONSTANTS {
   appQuery = 'query',
   caseDetails = 'case.details',
   casePage = 'case.page',
-  detectionsPage = 'detections.page',
+  alertsPage = 'alerts.page',
   filters = 'filters',
   hostsDetails = 'hosts.details',
   hostsPage = 'hosts.page',
@@ -25,7 +25,7 @@ export enum CONSTANTS {
 
 export type UrlStateType =
   | 'case'
-  | 'detections'
+  | 'alerts'
   | 'host'
   | 'network'
   | 'overview'
diff --git a/x-pack/plugins/security_solution/public/common/components/url_state/helpers.ts b/x-pack/plugins/security_solution/public/common/components/url_state/helpers.ts
index 8f13e4dd0cdcf..c270a99d3c51e 100644
--- a/x-pack/plugins/security_solution/public/common/components/url_state/helpers.ts
+++ b/x-pack/plugins/security_solution/public/common/components/url_state/helpers.ts
@@ -12,7 +12,7 @@ import * as H from 'history';
 import { Query, Filter } from '../../../../../../../src/plugins/data/public';
 import { url } from '../../../../../../../src/plugins/kibana_utils/public';
 
-import { SiemPageName } from '../../../app/types';
+import { SecurityPageName } from '../../../app/types';
 import { inputsSelectors, State } from '../../store';
 import { UrlInputsModel } from '../../store/inputs/model';
 import { TimelineUrl } from '../../../timelines/store/timeline/model';
@@ -84,17 +84,17 @@ export const replaceQueryStringInLocation = (
 };
 
 export const getUrlType = (pageName: string): UrlStateType => {
-  if (pageName === SiemPageName.overview) {
+  if (pageName === SecurityPageName.overview) {
     return 'overview';
-  } else if (pageName === SiemPageName.hosts) {
+  } else if (pageName === SecurityPageName.hosts) {
     return 'host';
-  } else if (pageName === SiemPageName.network) {
+  } else if (pageName === SecurityPageName.network) {
     return 'network';
-  } else if (pageName === SiemPageName.detections) {
-    return 'detections';
-  } else if (pageName === SiemPageName.timelines) {
+  } else if (pageName === SecurityPageName.alerts) {
+    return 'alerts';
+  } else if (pageName === SecurityPageName.timelines) {
     return 'timeline';
-  } else if (pageName === SiemPageName.case) {
+  } else if (pageName === SecurityPageName.case) {
     return 'case';
   }
   return 'overview';
@@ -114,19 +114,20 @@ export const makeMapStateToProps = () => {
   const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
   const getGlobalFiltersQuerySelector = inputsSelectors.globalFiltersQuerySelector();
   const getGlobalSavedQuerySelector = inputsSelectors.globalSavedQuerySelector();
-  const getTimelines = timelineSelectors.getTimelines();
+  const getTimeline = timelineSelectors.getTimelineByIdSelector();
   const mapStateToProps = (state: State) => {
     const inputState = getInputsSelector(state);
     const { linkTo: globalLinkTo, timerange: globalTimerange } = inputState.global;
     const { linkTo: timelineLinkTo, timerange: timelineTimerange } = inputState.timeline;
 
-    const timeline = Object.entries(getTimelines(state)).reduce(
-      (obj, [timelineId, timelineObj]) => ({
-        id: timelineObj.savedObjectId != null ? timelineObj.savedObjectId : '',
-        isOpen: timelineObj.show,
-      }),
-      { id: '', isOpen: false }
-    );
+    const flyoutTimeline = getTimeline(state, 'timeline-1');
+    const timeline =
+      flyoutTimeline != null
+        ? {
+            id: flyoutTimeline.savedObjectId != null ? flyoutTimeline.savedObjectId : '',
+            isOpen: flyoutTimeline.show,
+          }
+        : { id: '', isOpen: false };
 
     let searchAttr: {
       [CONSTANTS.appQuery]?: Query;
diff --git a/x-pack/plugins/security_solution/public/common/components/url_state/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/url_state/index.test.tsx
index 138ab08e894a5..20374affbdf89 100644
--- a/x-pack/plugins/security_solution/public/common/components/url_state/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/url_state/index.test.tsx
@@ -8,7 +8,7 @@ import { mount } from 'enzyme';
 import React from 'react';
 
 import { HookWrapper } from '../../mock';
-import { SiemPageName } from '../../../app/types';
+import { SecurityPageName } from '../../../app/types';
 import { RouteSpyState } from '../../utils/route/types';
 import { CONSTANTS } from './constants';
 import {
@@ -26,7 +26,7 @@ import { wait } from '../../lib/helpers';
 let mockProps: UrlStateContainerPropTypes;
 
 const mockRouteSpy: RouteSpyState = {
-  pageName: SiemPageName.network,
+  pageName: SecurityPageName.network,
   detailName: undefined,
   tabName: undefined,
   search: '',
@@ -186,14 +186,14 @@ describe('UrlStateContainer', () => {
             page: CONSTANTS.hostsPage,
             examplePath: '/hosts',
             namespaceLower: 'hosts',
-            pageName: SiemPageName.hosts,
+            pageName: SecurityPageName.hosts,
             detailName: undefined,
           }).relativeTimeSearch.undefinedQuery,
         });
         wrapper.update();
         await wait();
 
-        if (CONSTANTS.detectionsPage === page) {
+        if (CONSTANTS.alertsPage === page) {
           expect(mockSetRelativeRangeDatePicker.mock.calls[3][0]).toEqual({
             from: 11223344556677,
             fromStr: 'now-1d/d',
diff --git a/x-pack/plugins/security_solution/public/common/components/url_state/index_mocked.test.tsx b/x-pack/plugins/security_solution/public/common/components/url_state/index_mocked.test.tsx
index 1650e3bea2022..f7502661da308 100644
--- a/x-pack/plugins/security_solution/public/common/components/url_state/index_mocked.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/url_state/index_mocked.test.tsx
@@ -8,7 +8,7 @@ import { mount } from 'enzyme';
 import React from 'react';
 
 import { HookWrapper } from '../../mock/hook_wrapper';
-import { SiemPageName } from '../../../app/types';
+import { SecurityPageName } from '../../../app/types';
 
 import { CONSTANTS } from './constants';
 import { getFilterQuery, getMockPropsObj, mockHistory, testCases } from './test_dependencies';
@@ -42,7 +42,7 @@ describe('UrlStateContainer - lodash.throttle mocked to test update url', () =>
         page: CONSTANTS.networkPage,
         examplePath: '/network',
         namespaceLower: 'network',
-        pageName: SiemPageName.network,
+        pageName: SecurityPageName.network,
         detailName: undefined,
       }).noSearch.definedQuery;
       const wrapper = mount(
@@ -93,7 +93,7 @@ describe('UrlStateContainer - lodash.throttle mocked to test update url', () =>
         page: CONSTANTS.networkPage,
         examplePath: '/network',
         namespaceLower: 'network',
-        pageName: SiemPageName.network,
+        pageName: SecurityPageName.network,
         detailName: undefined,
       }).noSearch.undefinedQuery;
       const wrapper = mount(
@@ -124,7 +124,7 @@ describe('UrlStateContainer - lodash.throttle mocked to test update url', () =>
         page: CONSTANTS.networkPage,
         examplePath: '/network',
         namespaceLower: 'network',
-        pageName: SiemPageName.network,
+        pageName: SecurityPageName.network,
         detailName: undefined,
       }).noSearch.undefinedQuery;
 
@@ -187,14 +187,14 @@ describe('UrlStateContainer - lodash.throttle mocked to test update url', () =>
             page: CONSTANTS.hostsPage,
             examplePath: '/hosts',
             namespaceLower: 'hosts',
-            pageName: SiemPageName.hosts,
+            pageName: SecurityPageName.hosts,
             detailName: undefined,
           }).noSearch.undefinedQuery;
           const updatedProps = getMockPropsObj({
             page: CONSTANTS.networkPage,
             examplePath: '/network',
             namespaceLower: 'network',
-            pageName: SiemPageName.network,
+            pageName: SecurityPageName.network,
             detailName: undefined,
           }).noSearch.definedQuery;
           const wrapper = mount(
diff --git a/x-pack/plugins/security_solution/public/common/components/url_state/test_dependencies.ts b/x-pack/plugins/security_solution/public/common/components/url_state/test_dependencies.ts
index 0c69e24fb7476..dec1672b076eb 100644
--- a/x-pack/plugins/security_solution/public/common/components/url_state/test_dependencies.ts
+++ b/x-pack/plugins/security_solution/public/common/components/url_state/test_dependencies.ts
@@ -7,7 +7,7 @@
 import { ActionCreator } from 'typescript-fsa';
 import { DispatchUpdateTimeline } from '../../../timelines/components/open_timeline/types';
 import { navTabs } from '../../../app/home/home_navigations';
-import { SiemPageName } from '../../../app/types';
+import { SecurityPageName } from '../../../app/types';
 import { inputsActions } from '../../store/actions';
 
 import { CONSTANTS } from './constants';
@@ -71,7 +71,7 @@ export const mockHistory = {
 };
 
 export const defaultProps: UrlStateContainerPropTypes = {
-  pageName: SiemPageName.network,
+  pageName: SecurityPageName.network,
   detailName: undefined,
   tabName: HostsTableType.authentications,
   search: '',
@@ -292,7 +292,7 @@ export const testCases: Array<[
     /* namespaceUpper */ 'Network',
     /* pathName */ '/network',
     /* type */ networkModel.NetworkType.page,
-    /* pageName */ SiemPageName.network,
+    /* pageName */ SecurityPageName.network,
     /* detailName */ undefined,
   ],
   [
@@ -301,7 +301,7 @@ export const testCases: Array<[
     /* namespaceUpper */ 'Hosts',
     /* pathName */ '/hosts',
     /* type */ hostsModel.HostsType.page,
-    /* pageName */ SiemPageName.hosts,
+    /* pageName */ SecurityPageName.hosts,
     /* detailName */ undefined,
   ],
   [
@@ -310,7 +310,7 @@ export const testCases: Array<[
     /* namespaceUpper */ 'Hosts',
     /* pathName */ '/hosts/siem-es',
     /* type */ hostsModel.HostsType.details,
-    /* pageName */ SiemPageName.hosts,
+    /* pageName */ SecurityPageName.hosts,
     /* detailName */ 'host-test',
   ],
   [
@@ -319,7 +319,7 @@ export const testCases: Array<[
     /* namespaceUpper */ 'Network',
     /* pathName */ '/network/ip/100.90.80',
     /* type */ networkModel.NetworkType.details,
-    /* pageName */ SiemPageName.network,
+    /* pageName */ SecurityPageName.network,
     /* detailName */ '100.90.80',
   ],
   [
@@ -328,7 +328,7 @@ export const testCases: Array<[
     /* namespaceUpper */ 'Overview',
     /* pathName */ '/overview',
     /* type */ null,
-    /* pageName */ SiemPageName.overview,
+    /* pageName */ SecurityPageName.overview,
     /* detailName */ undefined,
   ],
   [
@@ -337,7 +337,7 @@ export const testCases: Array<[
     /* namespaceUpper */ 'Timeline',
     /* pathName */ '/timeline',
     /* type */ null,
-    /* pageName */ SiemPageName.timelines,
+    /* pageName */ SecurityPageName.timelines,
     /* detailName */ undefined,
   ],
 ];
diff --git a/x-pack/plugins/security_solution/public/common/components/url_state/types.ts b/x-pack/plugins/security_solution/public/common/components/url_state/types.ts
index 8881a82e5cd1c..8ca43cb576d32 100644
--- a/x-pack/plugins/security_solution/public/common/components/url_state/types.ts
+++ b/x-pack/plugins/security_solution/public/common/components/url_state/types.ts
@@ -32,7 +32,7 @@ export const ALL_URL_STATE_KEYS: KeyUrlState[] = [
 ];
 
 export const URL_STATE_KEYS: Record<UrlStateType, KeyUrlState[]> = {
-  detections: [
+  alerts: [
     CONSTANTS.appQuery,
     CONSTANTS.filters,
     CONSTANTS.savedQuery,
@@ -80,7 +80,7 @@ export const URL_STATE_KEYS: Record<UrlStateType, KeyUrlState[]> = {
 export type LocationTypes =
   | CONSTANTS.caseDetails
   | CONSTANTS.casePage
-  | CONSTANTS.detectionsPage
+  | CONSTANTS.alertsPage
   | CONSTANTS.hostsDetails
   | CONSTANTS.hostsPage
   | CONSTANTS.networkDetails
diff --git a/x-pack/plugins/security_solution/public/common/components/url_state/use_url_state.tsx b/x-pack/plugins/security_solution/public/common/components/url_state/use_url_state.tsx
index ef60967e70ac3..221df436402dd 100644
--- a/x-pack/plugins/security_solution/public/common/components/url_state/use_url_state.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/url_state/use_url_state.tsx
@@ -27,7 +27,7 @@ import {
   ALL_URL_STATE_KEYS,
   UrlStateToRedux,
 } from './types';
-import { SiemPageName } from '../../../app/types';
+import { SecurityPageName } from '../../../app/types';
 
 function usePrevious(value: PreviousLocationUrlState) {
   const ref = useRef<PreviousLocationUrlState>(value);
@@ -203,7 +203,7 @@ export const useUrlStateHooks = ({
         }
       });
     } else if (pathName !== prevProps.pathName) {
-      handleInitialize(type, pageName === SiemPageName.detections);
+      handleInitialize(type, pageName === SecurityPageName.alerts);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isInitializing, history, pathName, pageName, prevProps, urlState]);
diff --git a/x-pack/plugins/security_solution/public/common/lib/compose/kibana_compose.tsx b/x-pack/plugins/security_solution/public/common/lib/compose/kibana_compose.tsx
index f7c7c65318482..47834f148c910 100644
--- a/x-pack/plugins/security_solution/public/common/lib/compose/kibana_compose.tsx
+++ b/x-pack/plugins/security_solution/public/common/lib/compose/kibana_compose.tsx
@@ -14,7 +14,7 @@ import introspectionQueryResultData from '../../../graphql/introspection.json';
 import { AppFrontendLibs } from '../lib';
 import { getLinks } from './helpers';
 
-export function compose(core: CoreStart): AppFrontendLibs {
+export function composeLibs(core: CoreStart): AppFrontendLibs {
   const cache = new InMemoryCache({
     dataIdFromObject: () => null,
     fragmentMatcher: new IntrospectionFragmentMatcher({
diff --git a/x-pack/plugins/security_solution/public/common/utils/route/index.test.tsx b/x-pack/plugins/security_solution/public/common/utils/route/index.test.tsx
index 95e40b0f66301..7246259f5afa1 100644
--- a/x-pack/plugins/security_solution/public/common/utils/route/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/utils/route/index.test.tsx
@@ -71,13 +71,13 @@ describe('Spy Routes', () => {
               path: pathname,
               url: pathname,
               params: {
-                pageName: undefined,
                 detailName: '',
                 tabName: HostsTableType.hosts,
                 search: '',
                 flowTarget: undefined,
               },
             }}
+            pageName={undefined}
           />
         </ManageRoutesSpy>
       );
@@ -103,13 +103,13 @@ describe('Spy Routes', () => {
               path: pathname,
               url: pathname,
               params: {
-                pageName: 'hosts',
                 detailName: undefined,
                 tabName: HostsTableType.hosts,
                 search: '?IdoNotWantToSeeYou="true"',
                 flowTarget: undefined,
               },
             }}
+            pageName="hosts"
           />
         </ManageRoutesSpy>
       );
@@ -124,9 +124,9 @@ describe('Spy Routes', () => {
       expect(dispatchMock.mock.calls[1]).toEqual([
         {
           route: {
+            pageName: 'hosts',
             detailName: undefined,
             history: mockHistory,
-            pageName: 'hosts',
             pathName: pathname,
             tabName: HostsTableType.hosts,
           },
@@ -154,13 +154,13 @@ describe('Spy Routes', () => {
             path: pathname,
             url: pathname,
             params: {
-              pageName: 'hosts',
               detailName: undefined,
               tabName: HostsTableType.hosts,
               search: '?IdoNotWantToSeeYou="true"',
               flowTarget: undefined,
             },
           }}
+          pageName="hosts"
         />
       );
 
diff --git a/x-pack/plugins/security_solution/public/common/utils/route/spy_routes.tsx b/x-pack/plugins/security_solution/public/common/utils/route/spy_routes.tsx
index 072bbcf31c900..589436b945a65 100644
--- a/x-pack/plugins/security_solution/public/common/utils/route/spy_routes.tsx
+++ b/x-pack/plugins/security_solution/public/common/utils/route/spy_routes.tsx
@@ -12,13 +12,16 @@ import deepEqual from 'fast-deep-equal';
 import { SpyRouteProps } from './types';
 import { useRouteSpy } from './use_route_spy';
 
-export const SpyRouteComponent = memo<SpyRouteProps & { location: H.Location }>(
+export const SpyRouteComponent = memo<
+  SpyRouteProps & { location: H.Location; pageName: string | undefined }
+>(
   ({
     location: { pathname, search },
     history,
     match: {
-      params: { pageName, detailName, tabName, flowTarget },
+      params: { detailName, tabName, flowTarget },
     },
+    pageName,
     state,
   }) => {
     const [isInitializing, setIsInitializing] = useState(true);
diff --git a/x-pack/plugins/security_solution/public/common/utils/route/types.ts b/x-pack/plugins/security_solution/public/common/utils/route/types.ts
index 912da545a66a3..8656f20c92959 100644
--- a/x-pack/plugins/security_solution/public/common/utils/route/types.ts
+++ b/x-pack/plugins/security_solution/public/common/utils/route/types.ts
@@ -60,7 +60,6 @@ export interface ManageRoutesSpyProps {
 }
 
 export type SpyRouteProps = RouteComponentProps<{
-  pageName: string | undefined;
   detailName: string | undefined;
   tabName: HostsTableType | undefined;
   search: string;
diff --git a/x-pack/plugins/security_solution/public/common/utils/timeline/use_show_timeline.tsx b/x-pack/plugins/security_solution/public/common/utils/timeline/use_show_timeline.tsx
index 37c6a6583f0fb..fde3f6f8b222d 100644
--- a/x-pack/plugins/security_solution/public/common/utils/timeline/use_show_timeline.tsx
+++ b/x-pack/plugins/security_solution/public/common/utils/timeline/use_show_timeline.tsx
@@ -4,21 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useLocation } from 'react-router-dom';
-
 import { useState, useEffect } from 'react';
-import { SiemPageName } from '../../../app/types';
+import { useRouteSpy } from '../route/use_route_spy';
 
-const hideTimelineForRoutes = [`/${SiemPageName.case}/configure`];
+const hideTimelineForRoutes = [`/cases/configure`];
 
 export const useShowTimeline = () => {
-  const currentLocation = useLocation();
+  const [{ pageName, pathName }] = useRouteSpy();
+
   const [showTimeline, setShowTimeline] = useState(
-    !hideTimelineForRoutes.includes(currentLocation.pathname)
+    !hideTimelineForRoutes.includes(window.location.pathname)
   );
 
   useEffect(() => {
-    if (hideTimelineForRoutes.includes(currentLocation.pathname)) {
+    if (
+      hideTimelineForRoutes.filter((route) => window.location.pathname.includes(route)).length > 0
+    ) {
       if (showTimeline) {
         setShowTimeline(false);
       }
@@ -26,7 +27,7 @@ export const useShowTimeline = () => {
       setShowTimeline(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentLocation.pathname]);
+  }, [pageName, pathName]);
 
   return [showTimeline];
 };
diff --git a/x-pack/plugins/security_solution/public/endpoint_alerts/index.ts b/x-pack/plugins/security_solution/public/endpoint_alerts/index.ts
index e7e45b95ceb91..a755b53728e1a 100644
--- a/x-pack/plugins/security_solution/public/endpoint_alerts/index.ts
+++ b/x-pack/plugins/security_solution/public/endpoint_alerts/index.ts
@@ -6,7 +6,7 @@
 
 import { Reducer } from 'redux';
 import { SecuritySubPluginWithStore } from '../app/types';
-import { endpointAlertsRoutes } from './routes';
+import { EndpointAlertsRoutes } from './routes';
 import { alertListReducer } from './store/reducer';
 import { AlertListState } from '../../common/endpoint_alerts/types';
 import { alertMiddlewareFactory } from './store/middleware';
@@ -47,7 +47,7 @@ export class EndpointAlerts {
     ];
 
     return {
-      routes: endpointAlertsRoutes(),
+      SubPluginRoutes: EndpointAlertsRoutes,
       store: {
         initialState: { alertList: undefined },
         /**
diff --git a/x-pack/plugins/security_solution/public/endpoint_alerts/routes.tsx b/x-pack/plugins/security_solution/public/endpoint_alerts/routes.tsx
index d62ef20c384dc..acc6a82e29a2c 100644
--- a/x-pack/plugins/security_solution/public/endpoint_alerts/routes.tsx
+++ b/x-pack/plugins/security_solution/public/endpoint_alerts/routes.tsx
@@ -5,12 +5,14 @@
  */
 
 import React from 'react';
-import { Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 
 import { AlertIndex } from './view';
 
-export const endpointAlertsRoutes = () => [
-  <Route path="/:pageName(endpoint-alerts)">
-    <AlertIndex />
-  </Route>,
-];
+export const EndpointAlertsRoutes: React.FC = () => (
+  <Switch>
+    <Route path="/:pageName(endpoint-alerts)">
+      <AlertIndex />
+    </Route>
+  </Switch>
+);
diff --git a/x-pack/plugins/security_solution/public/helpers.ts b/x-pack/plugins/security_solution/public/helpers.ts
new file mode 100644
index 0000000000000..0dd66d06b78be
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/helpers.ts
@@ -0,0 +1,75 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { CoreStart } from '../../../../src/core/public';
+import { APP_ID } from '../common/constants';
+import { SecurityPageName } from './app/types';
+
+export const manageOldSiemRoutes = async (coreStart: CoreStart) => {
+  const { application } = coreStart;
+  const hashPath = window.location.hash.split('?');
+  const search = hashPath.length >= 1 ? hashPath[1] : '';
+  const pageRoute = hashPath.length > 0 ? hashPath[0].split('/') : [];
+  const pageName = pageRoute.length >= 1 ? pageRoute[1] : '';
+  const path = `/${pageRoute.slice(2).join('/') ?? ''}?${search}`;
+
+  switch (pageName) {
+    case SecurityPageName.overview:
+      application.navigateToApp(`${APP_ID}:${SecurityPageName.overview}`, {
+        replace: true,
+        path,
+      });
+      break;
+    case 'ml-hosts':
+      application.navigateToApp(`${APP_ID}:${SecurityPageName.hosts}`, {
+        replace: true,
+        path: `/ml-hosts${path}`,
+      });
+      break;
+    case SecurityPageName.hosts:
+      application.navigateToApp(`${APP_ID}:${SecurityPageName.hosts}`, {
+        replace: true,
+        path,
+      });
+      break;
+    case 'ml-network':
+      application.navigateToApp(`${APP_ID}:${SecurityPageName.network}`, {
+        replace: true,
+        path: `/ml-network${path}`,
+      });
+      break;
+    case SecurityPageName.network:
+      application.navigateToApp(`${APP_ID}:${SecurityPageName.network}`, {
+        replace: true,
+        path,
+      });
+      break;
+    case SecurityPageName.timelines:
+      application.navigateToApp(`${APP_ID}:${SecurityPageName.timelines}`, {
+        replace: true,
+        path,
+      });
+      break;
+    case SecurityPageName.case:
+      application.navigateToApp(`${APP_ID}:${SecurityPageName.case}`, {
+        replace: true,
+        path,
+      });
+      break;
+    case 'detections':
+      application.navigateToApp(`${APP_ID}:${SecurityPageName.alerts}`, {
+        replace: true,
+        path,
+      });
+      break;
+    default:
+      application.navigateToApp(`${APP_ID}:${SecurityPageName.overview}`, {
+        replace: true,
+        path: `?${search}`,
+      });
+      break;
+  }
+};
diff --git a/x-pack/plugins/security_solution/public/hosts/components/hosts_table/index.test.tsx b/x-pack/plugins/security_solution/public/hosts/components/hosts_table/index.test.tsx
index 1168f4f7454c8..1231c35f21460 100644
--- a/x-pack/plugins/security_solution/public/hosts/components/hosts_table/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/components/hosts_table/index.test.tsx
@@ -33,6 +33,8 @@ jest.mock('../../../common/components/query_bar', () => ({
   QueryBar: () => null,
 }));
 
+jest.mock('../../../common/components/link_to');
+
 describe('Hosts Table', () => {
   const loadPage = jest.fn();
   const state: State = mockGlobalState;
diff --git a/x-pack/plugins/security_solution/public/hosts/components/uncommon_process_table/index.test.tsx b/x-pack/plugins/security_solution/public/hosts/components/uncommon_process_table/index.test.tsx
index 7528c148f2456..a21d932e837df 100644
--- a/x-pack/plugins/security_solution/public/hosts/components/uncommon_process_table/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/components/uncommon_process_table/index.test.tsx
@@ -18,6 +18,8 @@ import { mockData } from './mock';
 import { HostsType } from '../../store/model';
 import * as i18n from './translations';
 
+jest.mock('../../../common/components/link_to');
+
 describe('Uncommon Process Table Component', () => {
   const loadPage = jest.fn();
   const mount = useMountAppended();
diff --git a/x-pack/plugins/security_solution/public/hosts/index.ts b/x-pack/plugins/security_solution/public/hosts/index.ts
index 90d5f54a027d7..d7ee1a53b798d 100644
--- a/x-pack/plugins/security_solution/public/hosts/index.ts
+++ b/x-pack/plugins/security_solution/public/hosts/index.ts
@@ -8,7 +8,7 @@ import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 import { TimelineIdLiteral, TimelineId } from '../../common/types/timeline';
 import { SecuritySubPluginWithStore } from '../app/types';
 import { getTimelinesInStorageByIds } from '../timelines/containers/local_storage';
-import { getHostsRoutes } from './routes';
+import { HostsRoutes } from './routes';
 import { initialHostsState, hostsReducer, HostsState } from './store';
 
 const HOST_TIMELINE_IDS: TimelineIdLiteral[] = [
@@ -21,7 +21,7 @@ export class Hosts {
 
   public start(storage: Storage): SecuritySubPluginWithStore<'hosts', HostsState> {
     return {
-      routes: getHostsRoutes(),
+      SubPluginRoutes: HostsRoutes,
       storageTimelines: {
         timelineById: getTimelinesInStorageByIds(storage, HOST_TIMELINE_IDS),
       },
diff --git a/x-pack/plugins/security_solution/public/hosts/pages/details/details_tabs.test.tsx b/x-pack/plugins/security_solution/public/hosts/pages/details/details_tabs.test.tsx
index fa76dc93375e0..936789625a4dd 100644
--- a/x-pack/plugins/security_solution/public/hosts/pages/details/details_tabs.test.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/pages/details/details_tabs.test.tsx
@@ -71,7 +71,7 @@ describe('body', () => {
     test(`it should pass expected object properties to ${componentName}`, () => {
       const wrapper = mount(
         <TestProviders>
-          <MemoryRouter initialEntries={[`/hosts/host-1/${path}`]}>
+          <MemoryRouter initialEntries={[`/host-1/${path}`]}>
             <HostDetailsTabs
               from={0}
               isInitializing={false}
diff --git a/x-pack/plugins/security_solution/public/hosts/pages/details/index.tsx b/x-pack/plugins/security_solution/public/hosts/pages/details/index.tsx
index a5fabf4d515f8..e3f00a377d272 100644
--- a/x-pack/plugins/security_solution/public/hosts/pages/details/index.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/pages/details/index.tsx
@@ -9,6 +9,7 @@ import React, { useEffect, useCallback, useMemo } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { StickyContainer } from 'react-sticky';
 
+import { SecurityPageName } from '../../../app/types';
 import { UpdateDateRange } from '../../../common/components/charts/common';
 import { FiltersGlobal } from '../../../common/components/filters_global';
 import { HeaderPage } from '../../../common/components/header_page';
@@ -209,7 +210,7 @@ const HostDetailsComponent = React.memo<HostDetailsProps & PropsFromRedux>(
           }}
         </WithSource>
 
-        <SpyRoute />
+        <SpyRoute pageName={SecurityPageName.hosts} />
       </>
     );
   }
diff --git a/x-pack/plugins/security_solution/public/hosts/pages/details/nav_tabs.tsx b/x-pack/plugins/security_solution/public/hosts/pages/details/nav_tabs.tsx
index 4d04d16580a63..0d30ef32e5d98 100644
--- a/x-pack/plugins/security_solution/public/hosts/pages/details/nav_tabs.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/pages/details/nav_tabs.tsx
@@ -8,10 +8,10 @@ import { omit } from 'lodash/fp';
 import * as i18n from '../translations';
 import { HostDetailsNavTab } from './types';
 import { HostsTableType } from '../../store/model';
-import { SiemPageName } from '../../../app/types';
+import { SecurityPageName } from '../../../app/types';
 
 const getTabsOnHostDetailsUrl = (hostName: string, tabName: HostsTableType) =>
-  `#/${SiemPageName.hosts}/${hostName}/${tabName}`;
+  `/${hostName}/${tabName}`;
 
 export const navTabsHostDetails = (
   hostName: string,
@@ -25,6 +25,7 @@ export const navTabsHostDetails = (
       disabled: false,
       urlKey: 'host',
       isDetailPage: true,
+      pageId: SecurityPageName.hosts,
     },
     [HostsTableType.uncommonProcesses]: {
       id: HostsTableType.uncommonProcesses,
@@ -33,6 +34,7 @@ export const navTabsHostDetails = (
       disabled: false,
       urlKey: 'host',
       isDetailPage: true,
+      pageId: SecurityPageName.hosts,
     },
     [HostsTableType.anomalies]: {
       id: HostsTableType.anomalies,
@@ -41,6 +43,7 @@ export const navTabsHostDetails = (
       disabled: false,
       urlKey: 'host',
       isDetailPage: true,
+      pageId: SecurityPageName.hosts,
     },
     [HostsTableType.events]: {
       id: HostsTableType.events,
@@ -49,6 +52,7 @@ export const navTabsHostDetails = (
       disabled: false,
       urlKey: 'host',
       isDetailPage: true,
+      pageId: SecurityPageName.hosts,
     },
     [HostsTableType.alerts]: {
       id: HostsTableType.alerts,
@@ -56,6 +60,7 @@ export const navTabsHostDetails = (
       href: getTabsOnHostDetailsUrl(hostName, HostsTableType.alerts),
       disabled: false,
       urlKey: 'host',
+      pageId: SecurityPageName.hosts,
     },
   };
 
diff --git a/x-pack/plugins/security_solution/public/hosts/pages/details/types.ts b/x-pack/plugins/security_solution/public/hosts/pages/details/types.ts
index f145abed2d8ff..aa6288d473c91 100644
--- a/x-pack/plugins/security_solution/public/hosts/pages/details/types.ts
+++ b/x-pack/plugins/security_solution/public/hosts/pages/details/types.ts
@@ -7,7 +7,6 @@
 import { ActionCreator } from 'typescript-fsa';
 import { Query, IIndexPattern, Filter } from 'src/plugins/data/public';
 import { InputsModelId } from '../../../common/store/inputs/constants';
-import { HostComponentProps } from '../../../common/components/link_to/redirect_to_hosts';
 import { HostsTableType } from '../../store/model';
 import { HostsQueryProps } from '../types';
 import { NavTab } from '../../../common/components/navigation/types';
@@ -40,7 +39,6 @@ export interface HostDetailsProps extends HostsQueryProps {
 
 export type HostDetailsComponentProps = HostDetailsComponentReduxProps &
   HostDetailsComponentDispatchProps &
-  HostComponentProps &
   HostsQueryProps;
 
 type KeyHostDetailsNavTabWithoutMlPermission = HostsTableType.authentications &
diff --git a/x-pack/plugins/security_solution/public/hosts/pages/details/utils.ts b/x-pack/plugins/security_solution/public/hosts/pages/details/utils.ts
index d45cb3368b4e1..5c5c7283eee47 100644
--- a/x-pack/plugins/security_solution/public/hosts/pages/details/utils.ts
+++ b/x-pack/plugins/security_solution/public/hosts/pages/details/utils.ts
@@ -10,13 +10,13 @@ import { get, isEmpty } from 'lodash/fp';
 import { ChromeBreadcrumb } from '../../../../../../../src/core/public';
 import { hostsModel } from '../../store';
 import { HostsTableType } from '../../store/model';
-import {
-  getHostsUrl,
-  getHostDetailsUrl,
-} from '../../../common/components/link_to/redirect_to_hosts';
+import { getHostDetailsUrl } from '../../../common/components/link_to/redirect_to_hosts';
 
 import * as i18n from '../translations';
 import { HostRouteSpyState } from '../../../common/utils/route/types';
+import { GetUrlForApp } from '../../../common/components/navigation/types';
+import { APP_ID } from '../../../../common/constants';
+import { SecurityPageName } from '../../../app/types';
 
 export const type = hostsModel.HostsType.details;
 
@@ -29,11 +29,17 @@ const TabNameMappedToI18nKey: Record<HostsTableType, string> = {
   [HostsTableType.alerts]: i18n.NAVIGATION_ALERTS_TITLE,
 };
 
-export const getBreadcrumbs = (params: HostRouteSpyState, search: string[]): ChromeBreadcrumb[] => {
+export const getBreadcrumbs = (
+  params: HostRouteSpyState,
+  search: string[],
+  getUrlForApp: GetUrlForApp
+): ChromeBreadcrumb[] => {
   let breadcrumb = [
     {
       text: i18n.PAGE_TITLE,
-      href: `${getHostsUrl()}${!isEmpty(search[0]) ? search[0] : ''}`,
+      href: getUrlForApp(`${APP_ID}:${SecurityPageName.hosts}`, {
+        path: !isEmpty(search[0]) ? search[0] : '',
+      }),
     },
   ];
 
@@ -42,7 +48,9 @@ export const getBreadcrumbs = (params: HostRouteSpyState, search: string[]): Chr
       ...breadcrumb,
       {
         text: params.detailName,
-        href: `${getHostDetailsUrl(params.detailName)}${!isEmpty(search[1]) ? search[1] : ''}`,
+        href: getUrlForApp(`${APP_ID}:${SecurityPageName.hosts}`, {
+          path: getHostDetailsUrl(params.detailName, !isEmpty(search[0]) ? search[0] : ''),
+        }),
       },
     ];
   }
diff --git a/x-pack/plugins/security_solution/public/hosts/pages/hosts.tsx b/x-pack/plugins/security_solution/public/hosts/pages/hosts.tsx
index f7583f65a4fcd..f6429544f855e 100644
--- a/x-pack/plugins/security_solution/public/hosts/pages/hosts.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/pages/hosts.tsx
@@ -8,8 +8,9 @@ import { EuiSpacer } from '@elastic/eui';
 import React, { useCallback } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { StickyContainer } from 'react-sticky';
-
 import { useParams } from 'react-router-dom';
+
+import { SecurityPageName } from '../../app/types';
 import { UpdateDateRange } from '../../common/components/charts/common';
 import { FiltersGlobal } from '../../common/components/filters_global';
 import { HeaderPage } from '../../common/components/header_page';
@@ -158,7 +159,7 @@ export const HostsComponent = React.memo<HostsComponentProps & PropsFromRedux>(
           }}
         </WithSource>
 
-        <SpyRoute />
+        <SpyRoute pageName={SecurityPageName.hosts} />
       </>
     );
   }
diff --git a/x-pack/plugins/security_solution/public/hosts/pages/hosts_tabs.tsx b/x-pack/plugins/security_solution/public/hosts/pages/hosts_tabs.tsx
index 549c198a43526..e2a0ba0f1fe6c 100644
--- a/x-pack/plugins/security_solution/public/hosts/pages/hosts_tabs.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/pages/hosts_tabs.tsx
@@ -70,22 +70,22 @@ export const HostsTabs = memo<HostsTabsProps>(
 
     return (
       <Switch>
-        <Route path={`${hostsPagePath}/:tabName(${HostsTableType.hosts})`}>
+        <Route path={`/:tabName(${HostsTableType.hosts})`}>
           <HostsQueryTabBody {...tabProps} />
         </Route>
-        <Route path={`${hostsPagePath}/:tabName(${HostsTableType.authentications})`}>
+        <Route path={`/:tabName(${HostsTableType.authentications})`}>
           <AuthenticationsQueryTabBody {...tabProps} />
         </Route>
-        <Route path={`${hostsPagePath}/:tabName(${HostsTableType.uncommonProcesses})`}>
+        <Route path={`/:tabName(${HostsTableType.uncommonProcesses})`}>
           <UncommonProcessQueryTabBody {...tabProps} />
         </Route>
-        <Route path={`${hostsPagePath}/:tabName(${HostsTableType.anomalies})`}>
+        <Route path={`/:tabName(${HostsTableType.anomalies})`}>
           <AnomaliesQueryTabBody {...tabProps} AnomaliesTableComponent={AnomaliesHostTable} />
         </Route>
-        <Route path={`${hostsPagePath}/:tabName(${HostsTableType.events})`}>
+        <Route path={`/:tabName(${HostsTableType.events})`}>
           <EventsQueryTabBody {...tabProps} />
         </Route>
-        <Route path={`${hostsPagePath}/:tabName(${HostsTableType.alerts})`}>
+        <Route path={`/:tabName(${HostsTableType.alerts})`}>
           <HostAlertsQueryTabBody {...tabProps} />
         </Route>
       </Switch>
diff --git a/x-pack/plugins/security_solution/public/hosts/pages/index.tsx b/x-pack/plugins/security_solution/public/hosts/pages/index.tsx
index 336abc60e5ba1..c2285cf0a97e1 100644
--- a/x-pack/plugins/security_solution/public/hosts/pages/index.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/pages/index.tsx
@@ -5,18 +5,18 @@
  */
 
 import React from 'react';
-import { Redirect, Route, Switch, RouteComponentProps } from 'react-router-dom';
+import { Route, Switch, RouteComponentProps, useHistory } from 'react-router-dom';
 
 import { HostDetails } from './details';
 import { HostsTableType } from '../store/model';
 
+import { MlHostConditionalContainer } from '../../common/components/ml/conditional_links/ml_host_conditional_container';
 import { GlobalTime } from '../../common/containers/global_time';
-import { SiemPageName } from '../../app/types';
 import { Hosts } from './hosts';
 import { hostsPagePath, hostDetailsPagePath } from './types';
 
-const getHostsTabPath = (pagePath: string) =>
-  `${pagePath}/:tabName(` +
+const getHostsTabPath = () =>
+  `/:tabName(` +
   `${HostsTableType.hosts}|` +
   `${HostsTableType.authentications}|` +
   `${HostsTableType.uncommonProcesses}|` +
@@ -34,62 +34,75 @@ const getHostDetailsTabPath = (pagePath: string) =>
 
 type Props = Partial<RouteComponentProps<{}>> & { url: string };
 
-export const HostsContainer = React.memo<Props>(({ url }) => (
-  <GlobalTime>
-    {({ to, from, setQuery, deleteQuery, isInitializing }) => (
-      <Switch>
-        <Route
-          strict
-          exact
-          path={getHostsTabPath(hostsPagePath)}
-          render={() => (
-            <Hosts
-              hostsPagePath={hostsPagePath}
-              from={from}
-              to={to}
-              setQuery={setQuery}
-              isInitializing={isInitializing}
-              deleteQuery={deleteQuery}
-            />
-          )}
-        />
-        <Route
-          strict
-          path={getHostDetailsTabPath(hostsPagePath)}
-          render={({
-            match: {
-              params: { detailName },
-            },
-          }) => (
-            <HostDetails
-              hostDetailsPagePath={hostDetailsPagePath}
-              detailName={detailName}
-              from={from}
-              to={to}
-              setQuery={setQuery}
-              isInitializing={isInitializing}
-              deleteQuery={deleteQuery}
-            />
-          )}
-        />
-        <Route
-          path={hostDetailsPagePath}
-          render={({
-            match: {
-              params: { detailName },
-            },
-            location: { search = '' },
-          }) => <Redirect to={`${url}/${detailName}/${HostsTableType.authentications}${search}`} />}
-        />
-        <Route
-          path={`${hostsPagePath}/`}
-          render={({ location: { search = '' } }) => (
-            <Redirect to={`/${SiemPageName.hosts}/${HostsTableType.hosts}${search}`} />
-          )}
-        />
-      </Switch>
-    )}
-  </GlobalTime>
-));
+export const HostsContainer = React.memo<Props>(({ url }) => {
+  const history = useHistory();
+  return (
+    <GlobalTime>
+      {({ to, from, setQuery, deleteQuery, isInitializing }) => (
+        <Switch>
+          <Route
+            path="/ml-hosts"
+            render={({ location, match }) => (
+              <MlHostConditionalContainer location={location} url={match.url} />
+            )}
+          />
+          <Route
+            path={getHostsTabPath()}
+            render={() => (
+              <Hosts
+                hostsPagePath={hostsPagePath}
+                from={from}
+                to={to}
+                setQuery={setQuery}
+                isInitializing={isInitializing}
+                deleteQuery={deleteQuery}
+              />
+            )}
+          />
+          <Route
+            path={getHostDetailsTabPath(hostsPagePath)}
+            render={({
+              match: {
+                params: { detailName },
+              },
+            }) => (
+              <HostDetails
+                hostDetailsPagePath={hostDetailsPagePath}
+                detailName={detailName}
+                from={from}
+                to={to}
+                setQuery={setQuery}
+                isInitializing={isInitializing}
+                deleteQuery={deleteQuery}
+              />
+            )}
+          />
+          <Route
+            path={hostDetailsPagePath}
+            render={({
+              match: {
+                params: { detailName },
+              },
+              location: { search = '' },
+            }) => {
+              history.replace(`${detailName}/${HostsTableType.authentications}${search}`);
+              return null;
+            }}
+          />
+
+          <Route
+            exact
+            strict
+            path=""
+            render={({ location: { search = '' } }) => {
+              history.replace(`${HostsTableType.hosts}${search}`);
+              return null;
+            }}
+          />
+        </Switch>
+      )}
+    </GlobalTime>
+  );
+});
 
 HostsContainer.displayName = 'HostsContainer';
diff --git a/x-pack/plugins/security_solution/public/hosts/pages/nav_tabs.tsx b/x-pack/plugins/security_solution/public/hosts/pages/nav_tabs.tsx
index 9bab3f7efe74a..dd1d3b1508925 100644
--- a/x-pack/plugins/security_solution/public/hosts/pages/nav_tabs.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/pages/nav_tabs.tsx
@@ -8,9 +8,9 @@ import { omit } from 'lodash/fp';
 import * as i18n from './translations';
 import { HostsTableType } from '../store/model';
 import { HostsNavTab } from './navigation/types';
-import { SiemPageName } from '../../app/types';
+import { SecurityPageName } from '../../app/types';
 
-const getTabsOnHostsUrl = (tabName: HostsTableType) => `#/${SiemPageName.hosts}/${tabName}`;
+const getTabsOnHostsUrl = (tabName: HostsTableType) => `/${tabName}`;
 
 export const navTabsHosts = (hasMlUserPermissions: boolean): HostsNavTab => {
   const hostsNavTabs = {
@@ -20,6 +20,7 @@ export const navTabsHosts = (hasMlUserPermissions: boolean): HostsNavTab => {
       href: getTabsOnHostsUrl(HostsTableType.hosts),
       disabled: false,
       urlKey: 'host',
+      pageId: SecurityPageName.hosts,
     },
     [HostsTableType.authentications]: {
       id: HostsTableType.authentications,
@@ -27,6 +28,7 @@ export const navTabsHosts = (hasMlUserPermissions: boolean): HostsNavTab => {
       href: getTabsOnHostsUrl(HostsTableType.authentications),
       disabled: false,
       urlKey: 'host',
+      pageId: SecurityPageName.hosts,
     },
     [HostsTableType.uncommonProcesses]: {
       id: HostsTableType.uncommonProcesses,
@@ -34,6 +36,7 @@ export const navTabsHosts = (hasMlUserPermissions: boolean): HostsNavTab => {
       href: getTabsOnHostsUrl(HostsTableType.uncommonProcesses),
       disabled: false,
       urlKey: 'host',
+      pageId: SecurityPageName.hosts,
     },
     [HostsTableType.anomalies]: {
       id: HostsTableType.anomalies,
@@ -41,6 +44,7 @@ export const navTabsHosts = (hasMlUserPermissions: boolean): HostsNavTab => {
       href: getTabsOnHostsUrl(HostsTableType.anomalies),
       disabled: false,
       urlKey: 'host',
+      pageId: SecurityPageName.hosts,
     },
     [HostsTableType.events]: {
       id: HostsTableType.events,
@@ -48,6 +52,7 @@ export const navTabsHosts = (hasMlUserPermissions: boolean): HostsNavTab => {
       href: getTabsOnHostsUrl(HostsTableType.events),
       disabled: false,
       urlKey: 'host',
+      pageId: SecurityPageName.hosts,
     },
     [HostsTableType.alerts]: {
       id: HostsTableType.alerts,
@@ -55,6 +60,7 @@ export const navTabsHosts = (hasMlUserPermissions: boolean): HostsNavTab => {
       href: getTabsOnHostsUrl(HostsTableType.alerts),
       disabled: false,
       urlKey: 'host',
+      pageId: SecurityPageName.hosts,
     },
   };
 
diff --git a/x-pack/plugins/security_solution/public/hosts/pages/types.ts b/x-pack/plugins/security_solution/public/hosts/pages/types.ts
index 229349f390ecd..ffd17b0ef46f6 100644
--- a/x-pack/plugins/security_solution/public/hosts/pages/types.ts
+++ b/x-pack/plugins/security_solution/public/hosts/pages/types.ts
@@ -7,13 +7,12 @@
 import { IIndexPattern } from 'src/plugins/data/public';
 import { ActionCreator } from 'typescript-fsa';
 
-import { SiemPageName } from '../../app/types';
 import { hostsModel } from '../store';
 import { GlobalTimeArgs } from '../../common/containers/global_time';
 import { InputsModelId } from '../../common/store/inputs/constants';
 
-export const hostsPagePath = `/:pageName(${SiemPageName.hosts})`;
-export const hostDetailsPagePath = `${hostsPagePath}/:detailName`;
+export const hostsPagePath = '/';
+export const hostDetailsPagePath = `/:detailName`;
 
 export type HostsTabsProps = HostsComponentProps & {
   filterQuery: string;
diff --git a/x-pack/plugins/security_solution/public/hosts/routes.tsx b/x-pack/plugins/security_solution/public/hosts/routes.tsx
index 93585fa0f8394..e6b815cfb5036 100644
--- a/x-pack/plugins/security_solution/public/hosts/routes.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/routes.tsx
@@ -5,14 +5,14 @@
  */
 
 import React from 'react';
-import { Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 
 import { HostsContainer } from './pages';
-import { SiemPageName } from '../app/types';
+import { NotFoundPage } from '../app/404';
 
-export const getHostsRoutes = () => [
-  <Route
-    path={`/:pageName(${SiemPageName.hosts})`}
-    render={({ match }) => <HostsContainer url={match.url} />}
-  />,
-];
+export const HostsRoutes = () => (
+  <Switch>
+    <Route path="/" render={({ match }) => <HostsContainer url={match.url} />} />
+    <Route render={() => <NotFoundPage />} />
+  </Switch>
+);
diff --git a/x-pack/plugins/security_solution/public/management/common/constants.ts b/x-pack/plugins/security_solution/public/management/common/constants.ts
index 95293ccc9cf8c..7456be1d6784d 100644
--- a/x-pack/plugins/security_solution/public/management/common/constants.ts
+++ b/x-pack/plugins/security_solution/public/management/common/constants.ts
@@ -3,11 +3,10 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { SiemPageName } from '../../app/types';
 import { ManagementStoreGlobalNamespace, ManagementSubTab } from '../types';
 
 // --[ ROUTING ]---------------------------------------------------------------------------
-export const MANAGEMENT_ROUTING_ROOT_PATH = `/:pageName(${SiemPageName.management})`;
+export const MANAGEMENT_ROUTING_ROOT_PATH = '';
 export const MANAGEMENT_ROUTING_ENDPOINTS_PATH = `${MANAGEMENT_ROUTING_ROOT_PATH}/:tabName(${ManagementSubTab.endpoints})`;
 export const MANAGEMENT_ROUTING_POLICIES_PATH = `${MANAGEMENT_ROUTING_ROOT_PATH}/:tabName(${ManagementSubTab.policies})`;
 export const MANAGEMENT_ROUTING_POLICY_DETAILS_PATH = `${MANAGEMENT_ROUTING_ROOT_PATH}/:tabName(${ManagementSubTab.policies})/:policyId`;
diff --git a/x-pack/plugins/security_solution/public/management/common/routing.ts b/x-pack/plugins/security_solution/public/management/common/routing.ts
index bc204535e5abc..92eb7717318d3 100644
--- a/x-pack/plugins/security_solution/public/management/common/routing.ts
+++ b/x-pack/plugins/security_solution/public/management/common/routing.ts
@@ -4,17 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { isEmpty } from 'lodash/fp';
 import { generatePath } from 'react-router-dom';
 // eslint-disable-next-line import/no-nodejs-modules
 import querystring from 'querystring';
+
 import {
   MANAGEMENT_ROUTING_ENDPOINTS_PATH,
   MANAGEMENT_ROUTING_POLICIES_PATH,
   MANAGEMENT_ROUTING_POLICY_DETAILS_PATH,
-  MANAGEMENT_ROUTING_ROOT_PATH,
 } from './constants';
 import { ManagementSubTab } from '../types';
-import { SiemPageName } from '../../app/types';
+import { appendSearch } from '../../common/components/link_to/helpers';
 import { HostIndexUIQueryParams } from '../pages/endpoint_hosts/types';
 
 // Taken from: https://github.com/microsoft/TypeScript/issues/12936#issuecomment-559034150
@@ -34,76 +35,49 @@ const querystringStringify: <ExpectedType extends object, ArgType>(
 type EndpointDetailsUrlProps = Omit<HostIndexUIQueryParams, 'selected_host'> &
   Required<Pick<HostIndexUIQueryParams, 'selected_host'>>;
 
-/**
- * Input props for the `getManagementUrl()` method
- */
-export type GetManagementUrlProps = {
-  /**
-   * Exclude the URL prefix (everything to the left of where the router was mounted.
-   * This may be needed when interacting with react-router (ex. to do `history.push()` or
-   * validations against matched path)
-   */
-  excludePrefix?: boolean;
-} & (
-  | ({ name: 'default' | 'endpointList' } & HostIndexUIQueryParams)
-  | ({ name: 'endpointDetails' | 'endpointPolicyResponse' } & EndpointDetailsUrlProps)
-  | { name: 'policyList' }
-  | { name: 'policyDetails'; policyId: string }
-);
-
-// Prefix is (almost) everything to the left of where the Router was mounted. In SIEM, since
-// we're using Hash router, thats the `#`.
-const URL_PREFIX = '#';
-
-/**
- * Returns a URL string for a given Management page view
- * @param props
- */
-export const getManagementUrl = (props: GetManagementUrlProps): string => {
-  let url = props.excludePrefix ? '' : URL_PREFIX;
-
-  if (props.name === 'default' || props.name === 'endpointList') {
-    const { name, excludePrefix, ...queryParams } = props;
-    const urlQueryParams = querystringStringify<HostIndexUIQueryParams, typeof queryParams>(
-      queryParams
-    );
-
-    if (name === 'endpointList') {
-      url += generatePath(MANAGEMENT_ROUTING_ENDPOINTS_PATH, {
-        pageName: SiemPageName.management,
-        tabName: ManagementSubTab.endpoints,
-      });
-    } else {
-      url += generatePath(MANAGEMENT_ROUTING_ROOT_PATH, {
-        pageName: SiemPageName.management,
-      });
-    }
+export const getEndpointListPath = (
+  props: { name: 'default' | 'endpointList' } & HostIndexUIQueryParams,
+  search?: string
+) => {
+  const { name, ...queryParams } = props;
+  const urlQueryParams = querystringStringify<HostIndexUIQueryParams, typeof queryParams>(
+    queryParams
+  );
+  const urlSearch = `${urlQueryParams && !isEmpty(search) ? '&' : ''}${search ?? ''}`;
 
-    if (urlQueryParams) {
-      url += `?${urlQueryParams}`;
-    }
-  } else if (props.name === 'endpointDetails' || props.name === 'endpointPolicyResponse') {
-    const { name, excludePrefix, ...queryParams } = props;
-    queryParams.show = (props.name === 'endpointPolicyResponse'
-      ? 'policy_response'
-      : '') as HostIndexUIQueryParams['show'];
-
-    url += `${generatePath(MANAGEMENT_ROUTING_ENDPOINTS_PATH, {
-      pageName: SiemPageName.management,
+  if (name === 'endpointList') {
+    return `${generatePath(MANAGEMENT_ROUTING_ENDPOINTS_PATH, {
       tabName: ManagementSubTab.endpoints,
-    })}?${querystringStringify<EndpointDetailsUrlProps, typeof queryParams>(queryParams)}`;
-  } else if (props.name === 'policyList') {
-    url += generatePath(MANAGEMENT_ROUTING_POLICIES_PATH, {
-      pageName: SiemPageName.management,
-      tabName: ManagementSubTab.policies,
-    });
-  } else if (props.name === 'policyDetails') {
-    url += generatePath(MANAGEMENT_ROUTING_POLICY_DETAILS_PATH, {
-      pageName: SiemPageName.management,
-      tabName: ManagementSubTab.policies,
-      policyId: props.policyId,
-    });
+    })}${appendSearch(`${urlQueryParams ? `${urlQueryParams}${urlSearch}` : urlSearch}`)}`;
   }
+  return `${appendSearch(`${urlQueryParams ? `${urlQueryParams}${urlSearch}` : urlSearch}`)}`;
+};
 
-  return url;
+export const getEndpointDetailsPath = (
+  props: { name: 'endpointDetails' | 'endpointPolicyResponse' } & EndpointDetailsUrlProps,
+  search?: string
+) => {
+  const { name, ...queryParams } = props;
+  queryParams.show = (props.name === 'endpointPolicyResponse'
+    ? 'policy_response'
+    : '') as HostIndexUIQueryParams['show'];
+  const urlQueryParams = querystringStringify<EndpointDetailsUrlProps, typeof queryParams>(
+    queryParams
+  );
+  const urlSearch = `${urlQueryParams && !isEmpty(search) ? '&' : ''}${search ?? ''}`;
+
+  return `${generatePath(MANAGEMENT_ROUTING_ENDPOINTS_PATH, {
+    tabName: ManagementSubTab.endpoints,
+  })}${appendSearch(`${urlQueryParams ? `${urlQueryParams}${urlSearch}` : urlSearch}`)}`;
 };
+
+export const getPoliciesPath = (search?: string) =>
+  `${generatePath(MANAGEMENT_ROUTING_POLICIES_PATH, {
+    tabName: ManagementSubTab.policies,
+  })}${appendSearch(search)}`;
+
+export const getPolicyDetailPath = (policyId: string, search?: string) =>
+  `${generatePath(MANAGEMENT_ROUTING_POLICY_DETAILS_PATH, {
+    tabName: ManagementSubTab.policies,
+    policyId,
+  })}${appendSearch(search)}`;
diff --git a/x-pack/plugins/security_solution/public/management/components/management_page_view.tsx b/x-pack/plugins/security_solution/public/management/components/management_page_view.tsx
index 8f7e0e06fb7a1..c3dbb93b369a9 100644
--- a/x-pack/plugins/security_solution/public/management/components/management_page_view.tsx
+++ b/x-pack/plugins/security_solution/public/management/components/management_page_view.tsx
@@ -9,10 +9,21 @@ import { i18n } from '@kbn/i18n';
 import { useParams } from 'react-router-dom';
 import { PageView, PageViewProps } from '../../common/components/endpoint/page_view';
 import { ManagementSubTab } from '../types';
-import { getManagementUrl } from '..';
+import { SecurityPageName } from '../../app/types';
+import { useFormatUrl } from '../../common/components/link_to';
+import { getEndpointListPath, getPoliciesPath } from '../common/routing';
+import { useNavigateByRouterEventHandler } from '../../common/hooks/endpoint/use_navigate_by_router_event_handler';
 
 export const ManagementPageView = memo<Omit<PageViewProps, 'tabs'>>((options) => {
+  const { formatUrl, search } = useFormatUrl(SecurityPageName.management);
   const { tabName } = useParams<{ tabName: ManagementSubTab }>();
+
+  const goToEndpoint = useNavigateByRouterEventHandler(
+    getEndpointListPath({ name: 'endpointList' }, search)
+  );
+
+  const goToPolicies = useNavigateByRouterEventHandler(getPoliciesPath(search));
+
   const tabs = useMemo((): PageViewProps['tabs'] | undefined => {
     if (options.viewType === 'details') {
       return undefined;
@@ -24,7 +35,8 @@ export const ManagementPageView = memo<Omit<PageViewProps, 'tabs'>>((options) =>
         }),
         id: ManagementSubTab.endpoints,
         isSelected: tabName === ManagementSubTab.endpoints,
-        href: getManagementUrl({ name: 'endpointList' }),
+        href: formatUrl(getEndpointListPath({ name: 'endpointList' })),
+        onClick: goToEndpoint,
       },
       {
         name: i18n.translate('xpack.securitySolution.managementTabs.policies', {
@@ -32,10 +44,11 @@ export const ManagementPageView = memo<Omit<PageViewProps, 'tabs'>>((options) =>
         }),
         id: ManagementSubTab.policies,
         isSelected: tabName === ManagementSubTab.policies,
-        href: getManagementUrl({ name: 'policyList' }),
+        href: formatUrl(getPoliciesPath()),
+        onClick: goToPolicies,
       },
     ];
-  }, [options.viewType, tabName]);
+  }, [formatUrl, goToEndpoint, goToPolicies, options.viewType, tabName]);
   return <PageView {...options} tabs={tabs} />;
 });
 
diff --git a/x-pack/plugins/security_solution/public/management/index.ts b/x-pack/plugins/security_solution/public/management/index.ts
index d6a723e5340bf..902ed085bd369 100644
--- a/x-pack/plugins/security_solution/public/management/index.ts
+++ b/x-pack/plugins/security_solution/public/management/index.ts
@@ -6,7 +6,7 @@
 
 import { CoreStart } from 'kibana/public';
 import { Reducer, CombinedState } from 'redux';
-import { managementRoutes } from './routes';
+import { ManagementRoutes } from './routes';
 import { StartPlugins } from '../types';
 import { SecuritySubPluginWithStore } from '../app/types';
 import { managementReducer } from './store/reducer';
@@ -14,8 +14,6 @@ import { AppAction } from '../common/store/actions';
 import { managementMiddlewareFactory } from './store/middleware';
 import { ManagementState } from './types';
 
-export { getManagementUrl } from './common/routing';
-
 /**
  * Internally, our state is sometimes immutable, ignore that in our external
  * interface.
@@ -40,7 +38,7 @@ export class Management {
     plugins: StartPlugins
   ): SecuritySubPluginWithStore<'management', ManagementState> {
     return {
-      routes: managementRoutes(),
+      SubPluginRoutes: ManagementRoutes,
       store: {
         initialState: {
           management: undefined,
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/routes.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/routes.tsx
index 4ff9ecfaeab0e..3f92358b93d56 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/routes.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/routes.tsx
@@ -5,12 +5,14 @@
  */
 
 import React from 'react';
-import { Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 
 import { HostList } from './view';
 
-export const endpointHostsRoutes = () => [
-  <Route path="/:pageName(endpoint-hosts)">
-    <HostList />
-  </Route>,
-];
+export const EndpointHostsRoutes: React.FC = () => (
+  <Switch>
+    <Route path="/:pageName(endpoint-hosts)">
+      <HostList />
+    </Route>
+  </Switch>
+);
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/host_pagination.test.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/host_pagination.test.ts
index b8eaa39c77752..ae2ce9facc837 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/host_pagination.test.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/host_pagination.test.ts
@@ -24,7 +24,7 @@ import {
   MiddlewareActionSpyHelper,
   createSpyMiddleware,
 } from '../../../../common/store/test_utils';
-import { getManagementUrl } from '../../..';
+import { getEndpointListPath } from '../../../common/routing';
 
 describe('host list pagination: ', () => {
   let fakeCoreStart: jest.Mocked<CoreStart>;
@@ -56,9 +56,7 @@ describe('host list pagination: ', () => {
     queryParams = () => uiQueryParams(store.getState());
 
     historyPush = (nextQueryParams: HostIndexUIQueryParams): void => {
-      return history.push(
-        getManagementUrl({ name: 'endpointList', excludePrefix: true, ...nextQueryParams })
-      );
+      return history.push(getEndpointListPath({ name: 'endpointList', ...nextQueryParams }));
     };
   });
 
@@ -72,7 +70,7 @@ describe('host list pagination: ', () => {
         type: 'userChangedUrl',
         payload: {
           ...history.location,
-          pathname: getManagementUrl({ name: 'endpointList', excludePrefix: true }),
+          pathname: getEndpointListPath({ name: 'endpointList' }),
         },
       });
       await waitForAction('serverReturnedHostList');
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.test.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.test.ts
index a6cd2ca3afac4..e62c53e061a33 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.test.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.test.ts
@@ -21,7 +21,7 @@ import { listData } from './selectors';
 import { HostState } from '../types';
 import { hostListReducer } from './reducer';
 import { hostMiddlewareFactory } from './middleware';
-import { getManagementUrl } from '../../..';
+import { getEndpointListPath } from '../../../common/routing';
 
 describe('host list middleware', () => {
   let fakeCoreStart: jest.Mocked<CoreStart>;
@@ -60,7 +60,7 @@ describe('host list middleware', () => {
       type: 'userChangedUrl',
       payload: {
         ...history.location,
-        pathname: getManagementUrl({ name: 'endpointList', excludePrefix: true }),
+        pathname: getEndpointListPath({ name: 'endpointList' }),
       },
     });
     await waitForAction('serverReturnedHostList');
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/host_details.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/host_details.tsx
index f31b54b93851f..b7e90c19799c7 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/host_details.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/host_details.tsx
@@ -25,7 +25,9 @@ import { POLICY_STATUS_TO_HEALTH_COLOR } from '../host_constants';
 import { FormattedDateAndTime } from '../../../../../common/components/endpoint/formatted_date_time';
 import { useNavigateByRouterEventHandler } from '../../../../../common/hooks/endpoint/use_navigate_by_router_event_handler';
 import { LinkToApp } from '../../../../../common/components/endpoint/link_to_app';
-import { getManagementUrl } from '../../../..';
+import { getEndpointDetailsPath, getPolicyDetailPath } from '../../../../common/routing';
+import { SecurityPageName } from '../../../../../app/types';
+import { useFormatUrl } from '../../../../../common/components/link_to';
 
 const HostIds = styled(EuiListGroupItem)`
   margin-top: 0;
@@ -51,6 +53,8 @@ export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
   const policyStatus = useHostSelector(
     policyResponseStatus
   ) as keyof typeof POLICY_STATUS_TO_HEALTH_COLOR;
+  const { formatUrl } = useFormatUrl(SecurityPageName.management);
+
   const detailsResultsUpper = useMemo(() => {
     return [
       {
@@ -77,35 +81,29 @@ export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
   const [policyResponseUri, policyResponseRoutePath] = useMemo(() => {
     const { selected_host, show, ...currentUrlParams } = queryParams;
     return [
-      getManagementUrl({
+      formatUrl(
+        getEndpointDetailsPath({
+          name: 'endpointPolicyResponse',
+          ...currentUrlParams,
+          selected_host: details.host.id,
+        })
+      ),
+      getEndpointDetailsPath({
         name: 'endpointPolicyResponse',
         ...currentUrlParams,
         selected_host: details.host.id,
       }),
-      getManagementUrl({
-        name: 'endpointPolicyResponse',
-        excludePrefix: true,
-        ...currentUrlParams,
-        selected_host: details.host.id,
-      }),
     ];
-  }, [details.host.id, queryParams]);
+  }, [details.host.id, formatUrl, queryParams]);
 
   const policyStatusClickHandler = useNavigateByRouterEventHandler(policyResponseRoutePath);
 
   const [policyDetailsRoutePath, policyDetailsRouteUrl] = useMemo(() => {
     return [
-      getManagementUrl({
-        name: 'policyDetails',
-        policyId: details.Endpoint.policy.applied.id,
-        excludePrefix: true,
-      }),
-      getManagementUrl({
-        name: 'policyDetails',
-        policyId: details.Endpoint.policy.applied.id,
-      }),
+      getPolicyDetailPath(details.Endpoint.policy.applied.id),
+      formatUrl(getPolicyDetailPath(details.Endpoint.policy.applied.id)),
     ];
-  }, [details.Endpoint.policy.applied.id]);
+  }, [details.Endpoint.policy.applied.id, formatUrl]);
 
   const policyDetailsClickHandler = useNavigateByRouterEventHandler(policyDetailsRoutePath);
 
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx
index ed853e24d7c31..3d44b73858e90 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx
@@ -38,7 +38,9 @@ import { PolicyResponse } from './policy_response';
 import { HostMetadata } from '../../../../../../common/endpoint/types';
 import { FlyoutSubHeader, FlyoutSubHeaderProps } from './components/flyout_sub_header';
 import { useNavigateByRouterEventHandler } from '../../../../../common/hooks/endpoint/use_navigate_by_router_event_handler';
-import { getManagementUrl } from '../../../..';
+import { getEndpointListPath } from '../../../../common/routing';
+import { SecurityPageName } from '../../../../../app/types';
+import { useFormatUrl } from '../../../../../common/components/link_to';
 
 export const HostDetailsFlyout = memo(() => {
   const history = useHistory();
@@ -116,21 +118,23 @@ const PolicyResponseFlyoutPanel = memo<{
   const responseAttentionCount = useHostSelector(policyResponseFailedOrWarningActionCount);
   const loading = useHostSelector(policyResponseLoading);
   const error = useHostSelector(policyResponseError);
+  const { formatUrl } = useFormatUrl(SecurityPageName.management);
   const [detailsUri, detailsRoutePath] = useMemo(
     () => [
-      getManagementUrl({
+      formatUrl(
+        getEndpointListPath({
+          name: 'endpointList',
+          ...queryParams,
+          selected_host: hostMeta.host.id,
+        })
+      ),
+      getEndpointListPath({
         name: 'endpointList',
         ...queryParams,
         selected_host: hostMeta.host.id,
       }),
-      getManagementUrl({
-        name: 'endpointList',
-        excludePrefix: true,
-        ...queryParams,
-        selected_host: hostMeta.host.id,
-      }),
     ],
-    [hostMeta.host.id, queryParams]
+    [hostMeta.host.id, formatUrl, queryParams]
   );
   const backToDetailsClickHandler = useNavigateByRouterEventHandler(detailsRoutePath);
   const backButtonProp = useMemo((): FlyoutSubHeaderProps['backButton'] => {
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
index a3e2a55fc7569..224411c5f7ec0 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
@@ -252,7 +252,7 @@ describe('when on the hosts page', () => {
       const policyDetailsLink = await renderResult.findByTestId('policyDetailsValue');
       expect(policyDetailsLink).not.toBeNull();
       expect(policyDetailsLink.getAttribute('href')).toEqual(
-        `#/management/policy/${hostDetails.metadata.Endpoint.policy.applied.id}`
+        `/policy/${hostDetails.metadata.Endpoint.policy.applied.id}`
       );
     });
 
@@ -268,7 +268,7 @@ describe('when on the hosts page', () => {
       });
       const changedUrlAction = await userChangedUrlChecker;
       expect(changedUrlAction.payload.pathname).toEqual(
-        `/management/policy/${hostDetails.metadata.Endpoint.policy.applied.id}`
+        `/policy/${hostDetails.metadata.Endpoint.policy.applied.id}`
       );
     });
 
@@ -277,7 +277,7 @@ describe('when on the hosts page', () => {
       const policyStatusLink = await renderResult.findByTestId('policyStatusValue');
       expect(policyStatusLink).not.toBeNull();
       expect(policyStatusLink.getAttribute('href')).toEqual(
-        '#/management/endpoints?page_index=0&page_size=10&selected_host=1&show=policy_response'
+        '/endpoints?page_index=0&page_size=10&selected_host=1&show=policy_response'
       );
     });
 
@@ -489,7 +489,7 @@ describe('when on the hosts page', () => {
         const subHeaderBackLink = await renderResult.findByTestId('flyoutSubHeaderBackButton');
         expect(subHeaderBackLink.textContent).toBe('Endpoint Details');
         expect(subHeaderBackLink.getAttribute('href')).toBe(
-          '#/management/endpoints?page_index=0&page_size=10&selected_host=1'
+          '/endpoints?page_index=0&page_size=10&selected_host=1'
         );
       });
 
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
index 149819480855b..45a33f76ee0c5 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
@@ -32,8 +32,14 @@ import { CreateStructuredSelector } from '../../../../common/store';
 import { Immutable, HostInfo } from '../../../../../common/endpoint/types';
 import { SpyRoute } from '../../../../common/utils/route/spy_routes';
 import { ManagementPageView } from '../../../components/management_page_view';
-import { getManagementUrl } from '../../..';
 import { FormattedDate } from '../../../../common/components/formatted_date';
+import { SecurityPageName } from '../../../../app/types';
+import {
+  getEndpointListPath,
+  getEndpointDetailsPath,
+  getPolicyDetailPath,
+} from '../../../common/routing';
+import { useFormatUrl } from '../../../../common/components/link_to';
 
 const HostListNavLink = memo<{
   name: string;
@@ -70,6 +76,7 @@ export const HostList = () => {
     uiQueryParams: queryParams,
     hasSelectedHost,
   } = useHostSelector(selector);
+  const { formatUrl, search } = useFormatUrl(SecurityPageName.management);
 
   const paginationSetup = useMemo(() => {
     return {
@@ -86,9 +93,8 @@ export const HostList = () => {
       const { index, size } = page;
       // FIXME: PT: if host details is open, table is not displaying correct number of rows
       history.push(
-        getManagementUrl({
+        getEndpointListPath({
           name: 'endpointList',
-          excludePrefix: true,
           ...queryParams,
           page_index: JSON.stringify(index),
           page_size: JSON.stringify(size),
@@ -110,17 +116,15 @@ export const HostList = () => {
           defaultMessage: 'Hostname',
         }),
         render: ({ hostname, id }: HostInfo['metadata']['host']) => {
-          const toRoutePath = getManagementUrl({
-            ...queryParams,
-            name: 'endpointDetails',
-            selected_host: id,
-            excludePrefix: true,
-          });
-          const toRouteUrl = getManagementUrl({
-            ...queryParams,
-            name: 'endpointDetails',
-            selected_host: id,
-          });
+          const toRoutePath = getEndpointDetailsPath(
+            {
+              ...queryParams,
+              name: 'endpointDetails',
+              selected_host: id,
+            },
+            search
+          );
+          const toRouteUrl = formatUrl(toRoutePath);
           return (
             <HostListNavLink
               name={hostname}
@@ -161,15 +165,8 @@ export const HostList = () => {
         truncateText: true,
         // eslint-disable-next-line react/display-name
         render: (policy: HostInfo['metadata']['Endpoint']['policy']['applied']) => {
-          const toRoutePath = getManagementUrl({
-            name: 'policyDetails',
-            policyId: policy.id,
-            excludePrefix: true,
-          });
-          const toRouteUrl = getManagementUrl({
-            name: 'policyDetails',
-            policyId: policy.id,
-          });
+          const toRoutePath = getPolicyDetailPath(policy.id);
+          const toRouteUrl = formatUrl(toRoutePath);
           return (
             <HostListNavLink
               name={policy.name}
@@ -187,15 +184,11 @@ export const HostList = () => {
         }),
         // eslint-disable-next-line react/display-name
         render: (policy: HostInfo['metadata']['Endpoint']['policy']['applied'], item: HostInfo) => {
-          const toRoutePath = getManagementUrl({
-            name: 'endpointPolicyResponse',
-            selected_host: item.metadata.host.id,
-            excludePrefix: true,
-          });
-          const toRouteUrl = getManagementUrl({
+          const toRoutePath = getEndpointDetailsPath({
             name: 'endpointPolicyResponse',
             selected_host: item.metadata.host.id,
           });
+          const toRouteUrl = formatUrl(toRoutePath);
           return (
             <EuiHealth
               color={POLICY_STATUS_TO_HEALTH_COLOR[policy.status]}
@@ -257,7 +250,7 @@ export const HostList = () => {
         },
       },
     ];
-  }, [queryParams]);
+  }, [formatUrl, queryParams, search]);
 
   return (
     <ManagementPageView
@@ -285,7 +278,7 @@ export const HostList = () => {
         pagination={paginationSetup}
         onChange={onTableChange}
       />
-      <SpyRoute />
+      <SpyRoute pageName={SecurityPageName.management} />
     </ManagementPageView>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/management/pages/index.tsx b/x-pack/plugins/security_solution/public/management/pages/index.tsx
index 588b267763234..0e81b75d651ba 100644
--- a/x-pack/plugins/security_solution/public/management/pages/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/index.tsx
@@ -5,7 +5,8 @@
  */
 
 import React, { memo } from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { useHistory, Route, Switch } from 'react-router-dom';
+
 import { PolicyContainer } from './policy';
 import {
   MANAGEMENT_ROUTING_ENDPOINTS_PATH,
@@ -14,9 +15,10 @@ import {
 } from '../common/constants';
 import { NotFoundPage } from '../../app/404';
 import { EndpointsContainer } from './endpoint_hosts';
-import { getManagementUrl } from '..';
+import { getEndpointListPath } from '../common/routing';
 
 export const ManagementContainer = memo(() => {
+  const history = useHistory();
   return (
     <Switch>
       <Route path={MANAGEMENT_ROUTING_ENDPOINTS_PATH} component={EndpointsContainer} />
@@ -24,9 +26,10 @@ export const ManagementContainer = memo(() => {
       <Route
         path={MANAGEMENT_ROUTING_ROOT_PATH}
         exact
-        render={() => (
-          <Redirect to={getManagementUrl({ name: 'endpointList', excludePrefix: true })} />
-        )}
+        render={() => {
+          history.replace(getEndpointListPath({ name: 'endpointList' }));
+          return null;
+        }}
       />
       <Route path="*" component={NotFoundPage} />
     </Switch>
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_list/index.test.ts b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_list/index.test.ts
index ce81c58893a7b..c24c47becc0b5 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_list/index.test.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_list/index.test.ts
@@ -26,10 +26,10 @@ import {
   createSpyMiddleware,
   MiddlewareActionSpyHelper,
 } from '../../../../../common/store/test_utils';
-import { getManagementUrl } from '../../../../common/routing';
+import { getPoliciesPath } from '../../../../common/routing';
 
 describe('policy list store concerns', () => {
-  const policyListPathUrl = getManagementUrl({ name: 'policyList', excludePrefix: true });
+  const policyListPathUrl = getPoliciesPath();
   let fakeCoreStart: ReturnType<typeof coreMock.createStart>;
   let depsStart: DepsStartMock;
   let store: Store;
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx
index 5e721cadfa823..20346cb720acb 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx
@@ -13,7 +13,7 @@ import {
   CustomConfigureDatasourceContent,
   CustomConfigureDatasourceProps,
 } from '../../../../../../../ingest_manager/public';
-import { getManagementUrl } from '../../../..';
+import { getPolicyDetailPath } from '../../../../common/routing';
 
 /**
  * Exports Endpoint-specific datasource configuration instructions
@@ -24,10 +24,7 @@ export const ConfigureEndpointDatasource = memo<CustomConfigureDatasourceContent
     const { services } = useKibana();
     let policyUrl = '';
     if (from === 'edit' && datasourceId) {
-      policyUrl = getManagementUrl({
-        name: 'policyDetails',
-        policyId: datasourceId,
-      });
+      policyUrl = getPolicyDetailPath(datasourceId);
     }
 
     return (
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx
index 01e12e6c767a6..315e3d29b6df2 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx
@@ -10,18 +10,13 @@ import { mount } from 'enzyme';
 import { PolicyDetails } from './policy_details';
 import { EndpointDocGenerator } from '../../../../../common/endpoint/generate_data';
 import { createAppRootMockRenderer } from '../../../../common/mock/endpoint';
-import { getManagementUrl } from '../../../common/routing';
+import { getPolicyDetailPath, getPoliciesPath } from '../../../common/routing';
 
 describe('Policy Details', () => {
   type FindReactWrapperResponse = ReturnType<ReturnType<typeof render>['find']>;
 
-  const policyDetailsPathUrl = getManagementUrl({
-    name: 'policyDetails',
-    policyId: '1',
-    excludePrefix: true,
-  });
-  const policyListPathUrl = getManagementUrl({ name: 'policyList', excludePrefix: true });
-  const policyListPathUrlWithPrefix = getManagementUrl({ name: 'policyList' });
+  const policyDetailsPathUrl = getPolicyDetailPath('1');
+  const policyListPathUrl = getPoliciesPath();
   const sleep = (ms = 100) => new Promise((wakeup) => setTimeout(wakeup, ms));
   const generator = new EndpointDocGenerator();
   const { history, AppWrapper, coreStart } = createAppRootMockRenderer();
@@ -97,7 +92,7 @@ describe('Policy Details', () => {
 
       const backToListButton = pageHeaderLeft.find('EuiButtonEmpty');
       expect(backToListButton.prop('iconType')).toBe('arrowLeft');
-      expect(backToListButton.prop('href')).toBe(policyListPathUrlWithPrefix);
+      expect(backToListButton.prop('href')).toBe(policyListPathUrl);
       expect(backToListButton.text()).toBe('Back to policy list');
 
       const pageTitle = pageHeaderLeft.find('[data-test-subj="pageViewHeaderLeftTitle"]');
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx
index d1f7da91bd6fa..6a48ae735180f 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx
@@ -38,11 +38,14 @@ import { useNavigateByRouterEventHandler } from '../../../../common/hooks/endpoi
 import { PageViewHeaderTitle } from '../../../../common/components/endpoint/page_view';
 import { ManagementPageView } from '../../../components/management_page_view';
 import { SpyRoute } from '../../../../common/utils/route/spy_routes';
-import { getManagementUrl } from '../../../common/routing';
+import { SecurityPageName } from '../../../../app/types';
+import { getPoliciesPath } from '../../../common/routing';
+import { useFormatUrl } from '../../../../common/components/link_to';
 
 export const PolicyDetails = React.memo(() => {
   const dispatch = useDispatch<(action: AppAction) => void>();
   const { notifications } = useKibana();
+  const { formatUrl, search } = useFormatUrl(SecurityPageName.management);
 
   // Store values
   const policyItem = usePolicyDetailsSelector(policyDetails);
@@ -89,9 +92,7 @@ export const PolicyDetails = React.memo(() => {
     }
   }, [notifications.toasts, policyName, policyUpdateStatus]);
 
-  const handleBackToListOnClick = useNavigateByRouterEventHandler(
-    getManagementUrl({ name: 'policyList', excludePrefix: true })
-  );
+  const handleBackToListOnClick = useNavigateByRouterEventHandler(getPoliciesPath());
 
   const handleSaveOnClick = useCallback(() => {
     setShowConfirm(true);
@@ -121,7 +122,7 @@ export const PolicyDetails = React.memo(() => {
             <span data-test-subj="policyDetailsIdNotFoundMessage">{policyApiError?.message}</span>
           </EuiCallOut>
         ) : null}
-        <SpyRoute />
+        <SpyRoute pageName={SecurityPageName.management} />
       </ManagementPageView>
     );
   }
@@ -133,7 +134,7 @@ export const PolicyDetails = React.memo(() => {
         iconType="arrowLeft"
         contentProps={{ style: { paddingLeft: '0' } }}
         onClick={handleBackToListOnClick}
-        href={getManagementUrl({ name: 'policyList' })}
+        href={formatUrl(getPoliciesPath(search))}
       >
         <FormattedMessage
           id="xpack.securitySolution.endpoint.policy.details.backToListTitle"
@@ -226,7 +227,7 @@ export const PolicyDetails = React.memo(() => {
         <EuiSpacer size="l" />
         <LinuxEvents />
       </ManagementPageView>
-      <SpyRoute />
+      <SpyRoute pageName={SecurityPageName.management} />
     </>
   );
 });
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.test.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.test.tsx
index 63a5cd0d67ae6..acce5c8f78350 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.test.tsx
@@ -39,7 +39,7 @@ describe('when on the policies page', () => {
     let firstPolicyID: string;
     beforeEach(() => {
       reactTestingLibrary.act(() => {
-        history.push('/management/policy');
+        history.push('/policy');
         reactTestingLibrary.act(() => {
           const policyListData = mockPolicyResultList({ total: 3 });
           firstPolicyID = policyListData.items[0].id;
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
index 2d4abd6de0e42..4532408332d6e 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
@@ -42,8 +42,10 @@ import { useNavigateByRouterEventHandler } from '../../../../common/hooks/endpoi
 import { LinkToApp } from '../../../../common/components/endpoint/link_to_app';
 import { ManagementPageView } from '../../../components/management_page_view';
 import { SpyRoute } from '../../../../common/utils/route/spy_routes';
-import { getManagementUrl } from '../../../common/routing';
 import { FormattedDateAndTime } from '../../../../common/components/endpoint/formatted_date_time';
+import { SecurityPageName } from '../../../../app/types';
+import { useFormatUrl } from '../../../../common/components/link_to';
+import { getPolicyDetailPath, getPoliciesPath } from '../../../common/routing';
 import { useNavigateToAppEventHandler } from '../../../../common/hooks/endpoint/use_navigate_to_app_event_handler';
 import { CreateDatasourceRouteState } from '../../../../../../ingest_manager/public';
 import { useEndpointPackageInfo } from './ingest_hooks';
@@ -127,6 +129,7 @@ export const PolicyList = React.memo(() => {
   const { services, notifications } = useKibana();
   const history = useHistory();
   const location = useLocation();
+  const { formatUrl, search } = useFormatUrl(SecurityPageName.management);
 
   const [showDelete, setShowDelete] = useState<boolean>(false);
   const [policyIdToDelete, setPolicyIdToDelete] = useState<string>('');
@@ -155,14 +158,9 @@ export const PolicyList = React.memo(() => {
       // of the cancel and submit buttons and redirect the user back to endpoint policy
       path: `#/integrations${packageInfo ? `/endpoint-${packageInfo.version}/add-datasource` : ''}`,
       state: {
-        onCancelNavigateTo: [
-          'securitySolution',
-          { path: getManagementUrl({ name: 'policyList' }) },
-        ],
-        onCancelUrl: services.application?.getUrlForApp('securitySolution', {
-          path: getManagementUrl({ name: 'policyList' }),
-        }),
-        onSaveNavigateTo: ['securitySolution', { path: getManagementUrl({ name: 'policyList' }) }],
+        onCancelNavigateTo: ['securitySolution:management', { path: getPoliciesPath() }],
+        onCancelUrl: formatUrl(getPoliciesPath()),
+        onSaveNavigateTo: ['securitySolution:management', { path: getPoliciesPath() }],
       },
     }
   );
@@ -265,12 +263,8 @@ export const PolicyList = React.memo(() => {
         }),
         // eslint-disable-next-line react/display-name
         render: (name: string, item: Immutable<PolicyData>) => {
-          const routePath = getManagementUrl({
-            name: 'policyDetails',
-            policyId: item.id,
-            excludePrefix: true,
-          });
-          const routeUrl = getManagementUrl({ name: 'policyDetails', policyId: item.id });
+          const routePath = getPolicyDetailPath(item.id, search);
+          const routeUrl = formatUrl(routePath);
           return (
             <EuiFlexGroup gutterSize="s" alignItems="baseline" style={{ minWidth: 0 }}>
               <EuiFlexItem grow={false} style={NO_WRAP_TRUNCATE_STYLE}>
@@ -382,7 +376,7 @@ export const PolicyList = React.memo(() => {
         ],
       },
     ],
-    [services.application, handleDeleteOnClick]
+    [services.application, handleDeleteOnClick, formatUrl, search]
   );
 
   return (
@@ -461,7 +455,7 @@ export const PolicyList = React.memo(() => {
           handleTableChange,
           paginationSetup,
         ])}
-        <SpyRoute />
+        <SpyRoute pageName={SecurityPageName.management} />
       </ManagementPageView>
     </>
   );
diff --git a/x-pack/plugins/security_solution/public/management/routes.tsx b/x-pack/plugins/security_solution/public/management/routes.tsx
index 12727ea97458e..209d7dd6dbcde 100644
--- a/x-pack/plugins/security_solution/public/management/routes.tsx
+++ b/x-pack/plugins/security_solution/public/management/routes.tsx
@@ -5,14 +5,16 @@
  */
 
 import React from 'react';
-import { Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 import { ManagementContainer } from './pages';
-import { MANAGEMENT_ROUTING_ROOT_PATH } from './common/constants';
+import { NotFoundPage } from '../app/404';
 
 /**
  * Returns the React Router Routes for the management area
  */
-export const managementRoutes = () => [
-  // Mounts the Management interface on `/management`
-  <Route path={MANAGEMENT_ROUTING_ROOT_PATH} component={ManagementContainer} />,
-];
+export const ManagementRoutes = () => (
+  <Switch>
+    <Route path="/" component={ManagementContainer} />
+    <Route render={() => <NotFoundPage />} />
+  </Switch>
+);
diff --git a/x-pack/plugins/security_solution/public/management/types.ts b/x-pack/plugins/security_solution/public/management/types.ts
index fd6b9f6e6a824..854e9faa0204d 100644
--- a/x-pack/plugins/security_solution/public/management/types.ts
+++ b/x-pack/plugins/security_solution/public/management/types.ts
@@ -5,7 +5,7 @@
  */
 
 import { CombinedState } from 'redux';
-import { SiemPageName } from '../app/types';
+import { SecurityPageName } from '../app/types';
 import { PolicyListState, PolicyDetailsState } from './pages/policy/types';
 import { HostState } from './pages/endpoint_hosts/types';
 
@@ -33,7 +33,7 @@ export enum ManagementSubTab {
  * The URL route params for the Management Policy List section
  */
 export interface ManagementRoutePolicyListParams {
-  pageName: SiemPageName.management;
+  pageName: SecurityPageName.management;
   tabName: ManagementSubTab.policies;
 }
 
diff --git a/x-pack/plugins/security_solution/public/network/components/ip/index.test.tsx b/x-pack/plugins/security_solution/public/network/components/ip/index.test.tsx
index 8d53e75b81afc..d949610264883 100644
--- a/x-pack/plugins/security_solution/public/network/components/ip/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/ip/index.test.tsx
@@ -12,6 +12,8 @@ import { useMountAppended } from '../../../common/utils/use_mount_appended';
 
 import { Ip } from '.';
 
+jest.mock('../../../common/components/link_to');
+
 describe('Port', () => {
   const mount = useMountAppended();
 
@@ -42,6 +44,6 @@ describe('Port', () => {
     expect(
       wrapper.find('[data-test-subj="draggable-content-destination.ip"]').find('a').first().props()
         .href
-    ).toEqual('#/link-to/network/ip/10.1.2.3/source');
+    ).toEqual('/ip/10.1.2.3/source');
   });
 });
diff --git a/x-pack/plugins/security_solution/public/network/components/network_http_table/index.test.tsx b/x-pack/plugins/security_solution/public/network/components/network_http_table/index.test.tsx
index 39fad58ca3528..ac37aaf309155 100644
--- a/x-pack/plugins/security_solution/public/network/components/network_http_table/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/network_http_table/index.test.tsx
@@ -24,6 +24,8 @@ import { networkModel } from '../../store';
 import { NetworkHttpTable } from '.';
 import { mockData } from './mock';
 
+jest.mock('../../../common/components/link_to');
+
 describe('NetworkHttp Table Component', () => {
   const loadPage = jest.fn();
   const state: State = mockGlobalState;
diff --git a/x-pack/plugins/security_solution/public/network/components/network_top_n_flow_table/index.test.tsx b/x-pack/plugins/security_solution/public/network/components/network_top_n_flow_table/index.test.tsx
index 4de04f673d879..b14d411810dee 100644
--- a/x-pack/plugins/security_solution/public/network/components/network_top_n_flow_table/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/network_top_n_flow_table/index.test.tsx
@@ -24,6 +24,8 @@ import { networkModel } from '../../store';
 import { NetworkTopNFlowTable } from '.';
 import { mockData } from './mock';
 
+jest.mock('../../../common/components/link_to');
+
 describe('NetworkTopNFlow Table Component', () => {
   const loadPage = jest.fn();
   const state: State = mockGlobalState;
diff --git a/x-pack/plugins/security_solution/public/network/components/source_destination/index.test.tsx b/x-pack/plugins/security_solution/public/network/components/source_destination/index.test.tsx
index 3016e34dfd73c..cefe2821b5244 100644
--- a/x-pack/plugins/security_solution/public/network/components/source_destination/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/source_destination/index.test.tsx
@@ -95,6 +95,14 @@ const getSourceDestinationInstance = () => (
   />
 );
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    createHref: jest.fn(),
+    push: jest.fn(),
+  }),
+}));
+
 describe('SourceDestination', () => {
   const mount = useMountAppended();
 
diff --git a/x-pack/plugins/security_solution/public/network/components/source_destination/source_destination_ip.test.tsx b/x-pack/plugins/security_solution/public/network/components/source_destination/source_destination_ip.test.tsx
index 3c1668bbb3419..d9d926fb52d10 100644
--- a/x-pack/plugins/security_solution/public/network/components/source_destination/source_destination_ip.test.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/source_destination/source_destination_ip.test.tsx
@@ -35,6 +35,8 @@ import {
   SOURCE_GEO_REGION_NAME_FIELD_NAME,
 } from './geo_fields';
 
+jest.mock('../../../common/components/link_to');
+
 describe('SourceDestinationIp', () => {
   const mount = useMountAppended();
 
diff --git a/x-pack/plugins/security_solution/public/network/index.ts b/x-pack/plugins/security_solution/public/network/index.ts
index 63291ad2d2396..bd8148f339d69 100644
--- a/x-pack/plugins/security_solution/public/network/index.ts
+++ b/x-pack/plugins/security_solution/public/network/index.ts
@@ -6,7 +6,7 @@
 
 import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 import { SecuritySubPluginWithStore } from '../app/types';
-import { getNetworkRoutes } from './routes';
+import { NetworkRoutes } from './routes';
 import { initialNetworkState, networkReducer, NetworkState } from './store';
 import { TimelineId } from '../../common/types/timeline';
 import { getTimelinesInStorageByIds } from '../timelines/containers/local_storage';
@@ -16,7 +16,7 @@ export class Network {
 
   public start(storage: Storage): SecuritySubPluginWithStore<'network', NetworkState> {
     return {
-      routes: getNetworkRoutes(),
+      SubPluginRoutes: NetworkRoutes,
       storageTimelines: {
         timelineById: getTimelinesInStorageByIds(storage, [TimelineId.networkPageExternalAlerts]),
       },
diff --git a/x-pack/plugins/security_solution/public/network/pages/index.tsx b/x-pack/plugins/security_solution/public/network/pages/index.tsx
index c6f13c118c309..c7a8a5f705dfe 100644
--- a/x-pack/plugins/security_solution/public/network/pages/index.tsx
+++ b/x-pack/plugins/security_solution/public/network/pages/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { Redirect, Route, Switch, RouteComponentProps } from 'react-router-dom';
+import { Route, Switch, RouteComponentProps, useHistory } from 'react-router-dom';
 
 import { useMlCapabilities } from '../../common/components/ml_popover/hooks/use_ml_capabilities';
 import { hasMlUserPermissions } from '../../../common/machine_learning/has_ml_user_permissions';
@@ -14,23 +14,24 @@ import { FlowTarget } from '../../graphql/types';
 import { IPDetails } from './ip_details';
 import { Network } from './network';
 import { GlobalTime } from '../../common/containers/global_time';
-import { SiemPageName } from '../../app/types';
 import { getNetworkRoutePath } from './navigation';
 import { NetworkRouteType } from './navigation/types';
+import { MlNetworkConditionalContainer } from '../../common/components/ml/conditional_links/ml_network_conditional_container';
 
 type Props = Partial<RouteComponentProps<{}>> & { url: string };
 
-const networkPagePath = `/:pageName(${SiemPageName.network})`;
-const ipDetailsPageBasePath = `${networkPagePath}/ip/:detailName`;
+const networkPagePath = '';
+const ipDetailsPageBasePath = `/ip/:detailName`;
 
 const NetworkContainerComponent: React.FC<Props> = () => {
+  const history = useHistory();
   const capabilities = useMlCapabilities();
   const capabilitiesFetched = capabilities.capabilitiesFetched;
   const userHasMlUserPermissions = useMemo(() => hasMlUserPermissions(capabilities), [
     capabilities,
   ]);
   const networkRoutePath = useMemo(
-    () => getNetworkRoutePath(networkPagePath, capabilitiesFetched, userHasMlUserPermissions),
+    () => getNetworkRoutePath(capabilitiesFetched, userHasMlUserPermissions),
     [capabilitiesFetched, userHasMlUserPermissions]
   );
 
@@ -38,6 +39,12 @@ const NetworkContainerComponent: React.FC<Props> = () => {
     <GlobalTime>
       {({ to, from, setQuery, deleteQuery, isInitializing }) => (
         <Switch>
+          <Route
+            path="/ml-network"
+            render={({ location, match }) => (
+              <MlNetworkConditionalContainer location={location} url={match.url} />
+            )}
+          />
           <Route
             strict
             path={networkRoutePath}
@@ -79,17 +86,17 @@ const NetworkContainerComponent: React.FC<Props> = () => {
               match: {
                 params: { detailName },
               },
-            }) => (
-              <Redirect
-                to={`/${SiemPageName.network}/ip/${detailName}/${FlowTarget.source}${search}`}
-              />
-            )}
+            }) => {
+              history.replace(`ip/${detailName}/${FlowTarget.source}${search}`);
+              return null;
+            }}
           />
           <Route
-            path={`/${SiemPageName.network}/`}
-            render={({ location: { search = '' } }) => (
-              <Redirect to={`/${SiemPageName.network}/${NetworkRouteType.flows}${search}`} />
-            )}
+            path="/"
+            render={({ location: { search = '' } }) => {
+              history.replace(`${NetworkRouteType.flows}${search}`);
+              return null;
+            }}
           />
         </Switch>
       )}
diff --git a/x-pack/plugins/security_solution/public/network/pages/ip_details/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/network/pages/ip_details/__snapshots__/index.test.tsx.snap
index e7598ef03d786..6e76ff00a8141 100644
--- a/x-pack/plugins/security_solution/public/network/pages/ip_details/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/network/pages/ip_details/__snapshots__/index.test.tsx.snap
@@ -8,6 +8,8 @@ exports[`Ip Details it matches the snapshot 1`] = `
   >
     <Component />
   </WithSource>
-  <withRouter(undefined) />
+  <withRouter(undefined)
+    pageName="network"
+  />
 </Fragment>
 `;
diff --git a/x-pack/plugins/security_solution/public/network/pages/ip_details/index.tsx b/x-pack/plugins/security_solution/public/network/pages/ip_details/index.tsx
index 9ae09d6c6cec7..face3f8904794 100644
--- a/x-pack/plugins/security_solution/public/network/pages/ip_details/index.tsx
+++ b/x-pack/plugins/security_solution/public/network/pages/ip_details/index.tsx
@@ -45,6 +45,7 @@ import { UsersQueryTable } from './users_query_table';
 import { AnomaliesQueryTabBody } from '../../../common/containers/anomalies/anomalies_query_tab_body';
 import { esQuery } from '../../../../../../../src/plugins/data/public';
 import { networkModel } from '../../store';
+import { SecurityPageName } from '../../../app/types';
 export { getBreadcrumbs } from './utils';
 
 const IpOverviewManage = manageQuery(IpOverview);
@@ -273,7 +274,7 @@ export const IPDetailsComponent: React.FC<IPDetailsComponentProps & PropsFromRed
         }}
       </WithSource>
 
-      <SpyRoute />
+      <SpyRoute pageName={SecurityPageName.network} />
     </>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/network/pages/ip_details/utils.ts b/x-pack/plugins/security_solution/public/network/pages/ip_details/utils.ts
index b1f986f20778f..640b9d9818cdd 100644
--- a/x-pack/plugins/security_solution/public/network/pages/ip_details/utils.ts
+++ b/x-pack/plugins/security_solution/public/network/pages/ip_details/utils.ts
@@ -9,14 +9,14 @@ import { get, isEmpty } from 'lodash/fp';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChromeBreadcrumb } from '../../../../../../../src/core/public';
 import { decodeIpv6 } from '../../../common/lib/helpers';
-import {
-  getNetworkUrl,
-  getIPDetailsUrl,
-} from '../../../common/components/link_to/redirect_to_network';
+import { getIPDetailsUrl } from '../../../common/components/link_to/redirect_to_network';
 import { networkModel } from '../../store';
 import * as i18n from '../translations';
 import { NetworkRouteType } from '../navigation/types';
 import { NetworkRouteSpyState } from '../../../common/utils/route/types';
+import { GetUrlForApp } from '../../../common/components/navigation/types';
+import { APP_ID } from '../../../../common/constants';
+import { SecurityPageName } from '../../../app/types';
 
 export const type = networkModel.NetworkType.details;
 const TabNameMappedToI18nKey: Record<NetworkRouteType, string> = {
@@ -30,12 +30,15 @@ const TabNameMappedToI18nKey: Record<NetworkRouteType, string> = {
 
 export const getBreadcrumbs = (
   params: NetworkRouteSpyState,
-  search: string[]
+  search: string[],
+  getUrlForApp: GetUrlForApp
 ): ChromeBreadcrumb[] => {
   let breadcrumb = [
     {
       text: i18n.PAGE_TITLE,
-      href: `${getNetworkUrl()}${!isEmpty(search[0]) ? search[0] : ''}`,
+      href: getUrlForApp(`${APP_ID}:${SecurityPageName.network}`, {
+        path: !isEmpty(search[0]) ? search[0] : '',
+      }),
     },
   ];
   if (params.detailName != null) {
@@ -43,9 +46,13 @@ export const getBreadcrumbs = (
       ...breadcrumb,
       {
         text: decodeIpv6(params.detailName),
-        href: `${getIPDetailsUrl(params.detailName, params.flowTarget)}${
-          !isEmpty(search[1]) ? search[1] : ''
-        }`,
+        href: getUrlForApp(`${APP_ID}:${SecurityPageName.network}`, {
+          path: getIPDetailsUrl(
+            params.detailName,
+            params.flowTarget,
+            !isEmpty(search[0]) ? search[0] : ''
+          ),
+        }),
       },
     ];
   }
diff --git a/x-pack/plugins/security_solution/public/network/pages/navigation/nav_tabs.tsx b/x-pack/plugins/security_solution/public/network/pages/navigation/nav_tabs.tsx
index 61f1a5aacb9c0..a563d44012ea2 100644
--- a/x-pack/plugins/security_solution/public/network/pages/navigation/nav_tabs.tsx
+++ b/x-pack/plugins/security_solution/public/network/pages/navigation/nav_tabs.tsx
@@ -7,8 +7,9 @@
 import { omit } from 'lodash/fp';
 import * as i18n from '../translations';
 import { NetworkNavTab, NetworkRouteType } from './types';
+import { SecurityPageName } from '../../../app/types';
 
-const getTabsOnNetworkUrl = (tabName: NetworkRouteType) => `#/network/${tabName}`;
+const getTabsOnNetworkUrl = (tabName: NetworkRouteType) => `/${tabName}`;
 
 export const navTabsNetwork = (hasMlUserPermissions: boolean): NetworkNavTab => {
   const networkNavTabs = {
@@ -18,6 +19,7 @@ export const navTabsNetwork = (hasMlUserPermissions: boolean): NetworkNavTab =>
       href: getTabsOnNetworkUrl(NetworkRouteType.flows),
       disabled: false,
       urlKey: 'network',
+      pageId: SecurityPageName.network,
     },
     [NetworkRouteType.dns]: {
       id: NetworkRouteType.dns,
@@ -25,6 +27,7 @@ export const navTabsNetwork = (hasMlUserPermissions: boolean): NetworkNavTab =>
       href: getTabsOnNetworkUrl(NetworkRouteType.dns),
       disabled: false,
       urlKey: 'network',
+      pageId: SecurityPageName.network,
     },
     [NetworkRouteType.http]: {
       id: NetworkRouteType.http,
@@ -32,6 +35,7 @@ export const navTabsNetwork = (hasMlUserPermissions: boolean): NetworkNavTab =>
       href: getTabsOnNetworkUrl(NetworkRouteType.http),
       disabled: false,
       urlKey: 'network',
+      pageId: SecurityPageName.network,
     },
     [NetworkRouteType.tls]: {
       id: NetworkRouteType.tls,
@@ -39,6 +43,7 @@ export const navTabsNetwork = (hasMlUserPermissions: boolean): NetworkNavTab =>
       href: getTabsOnNetworkUrl(NetworkRouteType.tls),
       disabled: false,
       urlKey: 'network',
+      pageId: SecurityPageName.network,
     },
     [NetworkRouteType.anomalies]: {
       id: NetworkRouteType.anomalies,
@@ -46,6 +51,7 @@ export const navTabsNetwork = (hasMlUserPermissions: boolean): NetworkNavTab =>
       href: getTabsOnNetworkUrl(NetworkRouteType.anomalies),
       disabled: false,
       urlKey: 'network',
+      pageId: SecurityPageName.network,
     },
     [NetworkRouteType.alerts]: {
       id: NetworkRouteType.alerts,
@@ -53,6 +59,7 @@ export const navTabsNetwork = (hasMlUserPermissions: boolean): NetworkNavTab =>
       href: getTabsOnNetworkUrl(NetworkRouteType.alerts),
       disabled: false,
       urlKey: 'network',
+      pageId: SecurityPageName.network,
     },
   };
 
diff --git a/x-pack/plugins/security_solution/public/network/pages/navigation/network_routes.tsx b/x-pack/plugins/security_solution/public/network/pages/navigation/network_routes.tsx
index 08ed0d9769be8..e1e84b3ef4271 100644
--- a/x-pack/plugins/security_solution/public/network/pages/navigation/network_routes.tsx
+++ b/x-pack/plugins/security_solution/public/network/pages/navigation/network_routes.tsx
@@ -100,10 +100,10 @@ export const NetworkRoutes = React.memo<NetworkRoutesProps>(
 
     return (
       <Switch>
-        <Route path={`${networkPagePath}/:tabName(${NetworkRouteType.dns})`}>
+        <Route path={`/:tabName(${NetworkRouteType.dns})`}>
           <DnsQueryTabBody {...tabProps} />
         </Route>
-        <Route path={`${networkPagePath}/:tabName(${NetworkRouteType.flows})`}>
+        <Route path={`/:tabName(${NetworkRouteType.flows})`}>
           <>
             <ConditionalFlexGroup direction="column">
               <EuiFlexItem>
@@ -129,19 +129,19 @@ export const NetworkRoutes = React.memo<NetworkRoutesProps>(
             </ConditionalFlexGroup>
           </>
         </Route>
-        <Route path={`${networkPagePath}/:tabName(${NetworkRouteType.http})`}>
+        <Route path={`/:tabName(${NetworkRouteType.http})`}>
           <HttpQueryTabBody {...tabProps} />
         </Route>
-        <Route path={`${networkPagePath}/:tabName(${NetworkRouteType.tls})`}>
+        <Route path={`/:tabName(${NetworkRouteType.tls})`}>
           <TlsQueryTabBody {...tabProps} flowTarget={FlowTargetSourceDest.source} />
         </Route>
-        <Route path={`${networkPagePath}/:tabName(${NetworkRouteType.anomalies})`}>
+        <Route path={`/:tabName(${NetworkRouteType.anomalies})`}>
           <AnomaliesQueryTabBody
             {...anomaliesProps}
             AnomaliesTableComponent={AnomaliesNetworkTable}
           />
         </Route>
-        <Route path={`${networkPagePath}/:tabName(${NetworkRouteType.alerts})`}>
+        <Route path={`/:tabName(${NetworkRouteType.alerts})`}>
           <NetworkAlertsQueryTabBody {...tabProps} />
         </Route>
       </Switch>
diff --git a/x-pack/plugins/security_solution/public/network/pages/navigation/types.ts b/x-pack/plugins/security_solution/public/network/pages/navigation/types.ts
index 0f48aad57b3a8..433ed7fffd741 100644
--- a/x-pack/plugins/security_solution/public/network/pages/navigation/types.ts
+++ b/x-pack/plugins/security_solution/public/network/pages/navigation/types.ts
@@ -67,11 +67,10 @@ export enum NetworkRouteType {
   anomalies = 'anomalies',
   tls = 'tls',
   http = 'http',
-  alerts = 'alerts',
+  alerts = 'external-alerts',
 }
 
 export type GetNetworkRoutePath = (
-  pagePath: string,
   capabilitiesFetched: boolean,
   hasMlUserPermission: boolean
 ) => string;
diff --git a/x-pack/plugins/security_solution/public/network/pages/navigation/utils.ts b/x-pack/plugins/security_solution/public/network/pages/navigation/utils.ts
index 24c2011fd3800..25a91db4eef9b 100644
--- a/x-pack/plugins/security_solution/public/network/pages/navigation/utils.ts
+++ b/x-pack/plugins/security_solution/public/network/pages/navigation/utils.ts
@@ -7,16 +7,15 @@
 import { GetNetworkRoutePath, NetworkRouteType } from './types';
 
 export const getNetworkRoutePath: GetNetworkRoutePath = (
-  pagePath,
   capabilitiesFetched,
   hasMlUserPermission
 ) => {
   if (capabilitiesFetched && !hasMlUserPermission) {
-    return `${pagePath}/:tabName(${NetworkRouteType.flows}|${NetworkRouteType.dns}|${NetworkRouteType.http}|${NetworkRouteType.tls}|${NetworkRouteType.alerts})`;
+    return `/:tabName(${NetworkRouteType.flows}|${NetworkRouteType.dns}|${NetworkRouteType.http}|${NetworkRouteType.tls}|${NetworkRouteType.alerts})`;
   }
 
   return (
-    `${pagePath}/:tabName(` +
+    `/:tabName(` +
     `${NetworkRouteType.flows}|` +
     `${NetworkRouteType.dns}|` +
     `${NetworkRouteType.anomalies}|` +
diff --git a/x-pack/plugins/security_solution/public/network/pages/network.tsx b/x-pack/plugins/security_solution/public/network/pages/network.tsx
index 2f7a97ed3d19e..845a6bbd95dd6 100644
--- a/x-pack/plugins/security_solution/public/network/pages/network.tsx
+++ b/x-pack/plugins/security_solution/public/network/pages/network.tsx
@@ -11,6 +11,7 @@ import { useParams } from 'react-router-dom';
 import { StickyContainer } from 'react-sticky';
 
 import { esQuery } from '../../../../../../src/plugins/data/public';
+import { SecurityPageName } from '../../app/types';
 import { UpdateDateRange } from '../../common/components/charts/common';
 import { EmbeddedMap } from '../components/embeddables/embedded_map';
 import { FiltersGlobal } from '../../common/components/filters_global';
@@ -175,7 +176,7 @@ const NetworkComponent = React.memo<NetworkComponentProps & PropsFromRedux>(
           }}
         </WithSource>
 
-        <SpyRoute />
+        <SpyRoute pageName={SecurityPageName.network} />
       </>
     );
   }
diff --git a/x-pack/plugins/security_solution/public/network/routes.tsx b/x-pack/plugins/security_solution/public/network/routes.tsx
index 6f3fd28ec53b7..d6d725512bdb7 100644
--- a/x-pack/plugins/security_solution/public/network/routes.tsx
+++ b/x-pack/plugins/security_solution/public/network/routes.tsx
@@ -5,14 +5,17 @@
  */
 
 import React from 'react';
-import { Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 
 import { NetworkContainer } from './pages';
-import { SiemPageName } from '../app/types';
+import { NotFoundPage } from '../app/404';
 
-export const getNetworkRoutes = () => [
-  <Route
-    path={`/:pageName(${SiemPageName.network})`}
-    render={({ location, match }) => <NetworkContainer location={location} url={match.url} />}
-  />,
-];
+export const NetworkRoutes = () => (
+  <Switch>
+    <Route
+      path="/"
+      render={({ location, match }) => <NetworkContainer location={location} url={match.url} />}
+    />
+    <Route render={() => <NotFoundPage />} />
+  </Switch>
+);
diff --git a/x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.test.tsx b/x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.test.tsx
index ba82c7f92855d..1aa114608b479 100644
--- a/x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.test.tsx
@@ -17,8 +17,8 @@ import { mockIndexPattern, TestProviders } from '../../../common/mock';
 
 import { AlertsByCategory } from '.';
 
+jest.mock('../../../common/components/link_to');
 jest.mock('../../../common/lib/kibana');
-
 jest.mock('../../../common/containers/matrix_histogram', () => {
   return {
     useQuery: jest.fn(),
diff --git a/x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.tsx b/x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.tsx
index fe66ae2624c2a..03e8279f01db7 100644
--- a/x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.tsx
@@ -4,12 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButton } from '@elastic/eui';
 import numeral from '@elastic/numeral';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useCallback } from 'react';
 import { Position } from '@elastic/charts';
 
-import { DEFAULT_NUMBER_FORMAT } from '../../../../common/constants';
+import { DEFAULT_NUMBER_FORMAT, APP_ID } from '../../../../common/constants';
 import { SHOWING, UNIT } from '../../../common/components/alerts_viewer/translations';
 import { MatrixHistogramContainer } from '../../../common/components/matrix_histogram';
 import { useKibana, useUiSetting$ } from '../../../common/lib/kibana';
@@ -29,9 +28,10 @@ import {
   histogramConfigs,
 } from '../../../common/components/alerts_viewer/histogram_configs';
 import { MatrixHisrogramConfigs } from '../../../common/components/matrix_histogram/types';
-import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
-import { navTabs } from '../../../app/home/home_navigations';
 import { getTabsOnHostsUrl } from '../../../common/components/link_to/redirect_to_hosts';
+import { SecurityPageName } from '../../../app/types';
+import { useFormatUrl } from '../../../common/components/link_to';
+import { LinkButton } from '../../../common/components/links';
 
 const ID = 'alertsByCategoryOverview';
 
@@ -75,19 +75,31 @@ const AlertsByCategoryComponent: React.FC<Props> = ({
   }, []);
 
   const kibana = useKibana();
+  const { formatUrl, search: urlSearch } = useFormatUrl(SecurityPageName.hosts);
+  const { navigateToApp } = kibana.services.application;
   const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
-  const urlSearch = useGetUrlSearch(navTabs.hosts);
+
+  const goToHostAlerts = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      navigateToApp(`${APP_ID}:${SecurityPageName.hosts}`, {
+        path: getTabsOnHostsUrl(HostsTableType.alerts, urlSearch),
+      });
+    },
+    [navigateToApp, urlSearch]
+  );
 
   const alertsCountViewAlertsButton = useMemo(
     () => (
-      <EuiButton
+      <LinkButton
         data-test-subj="view-alerts"
-        href={getTabsOnHostsUrl(HostsTableType.alerts, urlSearch)}
+        onClick={goToHostAlerts}
+        href={formatUrl(getTabsOnHostsUrl(HostsTableType.alerts))}
       >
         {i18n.VIEW_ALERTS}
-      </EuiButton>
+      </LinkButton>
     ),
-    [urlSearch]
+    [goToHostAlerts, formatUrl]
   );
 
   const alertsByCategoryHistogramConfigs: MatrixHisrogramConfigs = useMemo(
diff --git a/x-pack/plugins/security_solution/public/overview/components/event_counts/index.test.tsx b/x-pack/plugins/security_solution/public/overview/components/event_counts/index.test.tsx
index 49fe609e0cf91..95dd65f559470 100644
--- a/x-pack/plugins/security_solution/public/overview/components/event_counts/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/event_counts/index.test.tsx
@@ -13,6 +13,8 @@ import { mockIndexPattern, TestProviders } from '../../../common/mock';
 
 import { EventCounts } from '.';
 
+jest.mock('../../../common/components/link_to');
+
 describe('EventCounts', () => {
   const from = 1579553397080;
   const to = 1579639797080;
diff --git a/x-pack/plugins/security_solution/public/overview/components/events_by_dataset/index.tsx b/x-pack/plugins/security_solution/public/overview/components/events_by_dataset/index.tsx
index 0065e5a61b3ff..fe3f9f8ecda33 100644
--- a/x-pack/plugins/security_solution/public/overview/components/events_by_dataset/index.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/events_by_dataset/index.tsx
@@ -5,12 +5,11 @@
  */
 
 import { Position } from '@elastic/charts';
-import { EuiButton } from '@elastic/eui';
 import numeral from '@elastic/numeral';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useCallback } from 'react';
 import uuid from 'uuid';
 
-import { DEFAULT_NUMBER_FORMAT } from '../../../../common/constants';
+import { DEFAULT_NUMBER_FORMAT, APP_ID } from '../../../../common/constants';
 import { SHOWING, UNIT } from '../../../common/components/events_viewer/translations';
 import { getTabsOnHostsUrl } from '../../../common/components/link_to/redirect_to_hosts';
 import { MatrixHistogramContainer } from '../../../common/components/matrix_histogram';
@@ -18,8 +17,6 @@ import {
   MatrixHisrogramConfigs,
   MatrixHistogramOption,
 } from '../../../common/components/matrix_histogram/types';
-import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
-import { navTabs } from '../../../app/home/home_navigations';
 import { eventsStackByOptions } from '../../../hosts/pages/navigation';
 import { convertToBuildEsQuery } from '../../../common/lib/keury';
 import { useKibana, useUiSetting$ } from '../../../common/lib/kibana';
@@ -35,6 +32,9 @@ import { HostsTableType, HostsType } from '../../../hosts/store/model';
 import { InputsModelId } from '../../../common/store/inputs/constants';
 
 import * as i18n from '../../pages/translations';
+import { SecurityPageName } from '../../../app/types';
+import { useFormatUrl } from '../../../common/components/link_to';
+import { LinkButton } from '../../../common/components/links';
 
 const NO_FILTERS: Filter[] = [];
 const DEFAULT_QUERY: Query = { query: '', language: 'kuery' };
@@ -95,16 +95,30 @@ const EventsByDatasetComponent: React.FC<Props> = ({
   }, [deleteQuery, uniqueQueryId]);
 
   const kibana = useKibana();
+  const { formatUrl, search: urlSearch } = useFormatUrl(SecurityPageName.hosts);
+  const { navigateToApp } = kibana.services.application;
   const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
-  const urlSearch = useGetUrlSearch(navTabs.hosts);
+
+  const goToHostEvents = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      navigateToApp(`${APP_ID}:${SecurityPageName.hosts}`, {
+        path: getTabsOnHostsUrl(HostsTableType.events, urlSearch),
+      });
+    },
+    [navigateToApp, urlSearch]
+  );
 
   const eventsCountViewEventsButton = useMemo(
     () => (
-      <EuiButton href={getTabsOnHostsUrl(HostsTableType.events, urlSearch)}>
+      <LinkButton
+        onClick={goToHostEvents}
+        href={formatUrl(getTabsOnHostsUrl(HostsTableType.events))}
+      >
         {i18n.VIEW_EVENTS}
-      </EuiButton>
+      </LinkButton>
     ),
-    [urlSearch]
+    [goToHostEvents, formatUrl]
   );
 
   const filterQuery = useMemo(
diff --git a/x-pack/plugins/security_solution/public/overview/components/overview_host/index.test.tsx b/x-pack/plugins/security_solution/public/overview/components/overview_host/index.test.tsx
index 8b04c329731ab..d29efa2d44c15 100644
--- a/x-pack/plugins/security_solution/public/overview/components/overview_host/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/overview_host/index.test.tsx
@@ -25,6 +25,7 @@ import { GetOverviewHostQuery } from '../../../graphql/types';
 import { wait } from '../../../common/lib/helpers';
 
 jest.mock('../../../common/lib/kibana');
+jest.mock('../../../common/components/link_to');
 
 const startDate = 1579553397080;
 const endDate = 1579639797080;
diff --git a/x-pack/plugins/security_solution/public/overview/components/overview_host/index.tsx b/x-pack/plugins/security_solution/public/overview/components/overview_host/index.tsx
index 4fb37a9979245..195bb4fa0807a 100644
--- a/x-pack/plugins/security_solution/public/overview/components/overview_host/index.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/overview_host/index.tsx
@@ -5,23 +5,23 @@
  */
 
 import { isEmpty } from 'lodash/fp';
-import { EuiButton, EuiFlexItem, EuiPanel } from '@elastic/eui';
+import { EuiFlexItem, EuiPanel } from '@elastic/eui';
 import numeral from '@elastic/numeral';
 import { FormattedMessage } from '@kbn/i18n/react';
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 
-import { DEFAULT_NUMBER_FORMAT } from '../../../../common/constants';
+import { DEFAULT_NUMBER_FORMAT, APP_ID } from '../../../../common/constants';
 import { ESQuery } from '../../../../common/typed_json';
 import { ID as OverviewHostQueryId, OverviewHostQuery } from '../../containers/overview_host';
 import { HeaderSection } from '../../../common/components/header_section';
-import { useUiSetting$ } from '../../../common/lib/kibana';
-import { getHostsUrl } from '../../../common/components/link_to';
+import { useUiSetting$, useKibana } from '../../../common/lib/kibana';
+import { getHostsUrl, useFormatUrl } from '../../../common/components/link_to';
 import { getOverviewHostStats, OverviewHostStats } from '../overview_host_stats';
 import { manageQuery } from '../../../common/components/page/manage_query';
 import { inputsModel } from '../../../common/store/inputs';
 import { InspectButtonContainer } from '../../../common/components/inspect';
-import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
-import { navTabs } from '../../../app/home/home_navigations';
+import { SecurityPageName } from '../../../app/types';
+import { LinkButton } from '../../../common/components/links';
 
 export interface OwnProps {
   startDate: number;
@@ -49,18 +49,30 @@ const OverviewHostComponent: React.FC<OverviewHostProps> = ({
   startDate,
   setQuery,
 }) => {
+  const { formatUrl, search: urlSearch } = useFormatUrl(SecurityPageName.hosts);
+  const { navigateToApp } = useKibana().services.application;
   const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
-  const urlSearch = useGetUrlSearch(navTabs.hosts);
+
+  const goToHost = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      navigateToApp(`${APP_ID}:${SecurityPageName.hosts}`, {
+        path: getHostsUrl(urlSearch),
+      });
+    },
+    [navigateToApp, urlSearch]
+  );
+
   const hostPageButton = useMemo(
     () => (
-      <EuiButton href={getHostsUrl(urlSearch)}>
+      <LinkButton onClick={goToHost} href={formatUrl(getHostsUrl())}>
         <FormattedMessage
           id="xpack.securitySolution.overview.hostsAction"
           defaultMessage="View hosts"
         />
-      </EuiButton>
+      </LinkButton>
     ),
-    [urlSearch]
+    [goToHost, formatUrl]
   );
   return (
     <EuiFlexItem>
diff --git a/x-pack/plugins/security_solution/public/overview/components/overview_network/index.test.tsx b/x-pack/plugins/security_solution/public/overview/components/overview_network/index.test.tsx
index 2fcf6f83f0ae0..b4b685465dbda 100644
--- a/x-pack/plugins/security_solution/public/overview/components/overview_network/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/overview_network/index.test.tsx
@@ -22,6 +22,7 @@ import { overviewNetworkQuery } from '../../containers/overview_network/index.gq
 import { GetOverviewHostQuery } from '../../../graphql/types';
 import { wait } from '../../../common/lib/helpers';
 
+jest.mock('../../../common/components/link_to');
 jest.mock('../../../common/lib/kibana');
 
 const startDate = 1579553397080;
diff --git a/x-pack/plugins/security_solution/public/overview/components/overview_network/index.tsx b/x-pack/plugins/security_solution/public/overview/components/overview_network/index.tsx
index 94a3c13e39947..31544eaa2d3b0 100644
--- a/x-pack/plugins/security_solution/public/overview/components/overview_network/index.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/overview_network/index.tsx
@@ -5,15 +5,15 @@
  */
 
 import { isEmpty } from 'lodash/fp';
-import { EuiButton, EuiFlexItem, EuiPanel } from '@elastic/eui';
+import { EuiFlexItem, EuiPanel } from '@elastic/eui';
 import numeral from '@elastic/numeral';
 import { FormattedMessage } from '@kbn/i18n/react';
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 
-import { DEFAULT_NUMBER_FORMAT } from '../../../../common/constants';
+import { DEFAULT_NUMBER_FORMAT, APP_ID } from '../../../../common/constants';
 import { ESQuery } from '../../../../common/typed_json';
 import { HeaderSection } from '../../../common/components/header_section';
-import { useUiSetting$ } from '../../../common/lib/kibana';
+import { useUiSetting$, useKibana } from '../../../common/lib/kibana';
 import { manageQuery } from '../../../common/components/page/manage_query';
 import {
   ID as OverviewNetworkQueryId,
@@ -21,10 +21,10 @@ import {
 } from '../../containers/overview_network';
 import { inputsModel } from '../../../common/store/inputs';
 import { getOverviewNetworkStats, OverviewNetworkStats } from '../overview_network_stats';
-import { getNetworkUrl } from '../../../common/components/link_to';
+import { getNetworkUrl, useFormatUrl } from '../../../common/components/link_to';
 import { InspectButtonContainer } from '../../../common/components/inspect';
-import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
-import { navTabs } from '../../../app/home/home_navigations';
+import { SecurityPageName } from '../../../app/types';
+import { LinkButton } from '../../../common/components/links';
 
 export interface OverviewNetworkProps {
   startDate: number;
@@ -51,19 +51,32 @@ const OverviewNetworkComponent: React.FC<OverviewNetworkProps> = ({
   startDate,
   setQuery,
 }) => {
+  const { formatUrl, search: urlSearch } = useFormatUrl(SecurityPageName.hosts);
+  const { navigateToApp } = useKibana().services.application;
   const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
-  const urlSearch = useGetUrlSearch(navTabs.network);
+
+  const goToNetwork = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      navigateToApp(`${APP_ID}:${SecurityPageName.hosts}`, {
+        path: getNetworkUrl(urlSearch),
+      });
+    },
+    [navigateToApp, urlSearch]
+  );
+
   const networkPageButton = useMemo(
     () => (
-      <EuiButton href={getNetworkUrl(urlSearch)}>
+      <LinkButton onClick={goToNetwork} href={formatUrl(getNetworkUrl())}>
         <FormattedMessage
           id="xpack.securitySolution.overview.networkAction"
           defaultMessage="View network"
         />
-      </EuiButton>
+      </LinkButton>
     ),
-    [urlSearch]
+    [goToNetwork, formatUrl]
   );
+
   return (
     <EuiFlexItem>
       <InspectButtonContainer>
diff --git a/x-pack/plugins/security_solution/public/overview/components/recent_cases/index.tsx b/x-pack/plugins/security_solution/public/overview/components/recent_cases/index.tsx
index 03c1754f1b8d5..2618ad950a77a 100644
--- a/x-pack/plugins/security_solution/public/overview/components/recent_cases/index.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/recent_cases/index.tsx
@@ -4,18 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiHorizontalRule, EuiLink, EuiText } from '@elastic/eui';
-import React, { useEffect, useMemo, useRef } from 'react';
+import { EuiHorizontalRule, EuiText } from '@elastic/eui';
+import React, { useEffect, useMemo, useRef, useCallback } from 'react';
 
 import { FilterOptions, QueryParams } from '../../../cases/containers/types';
 import { DEFAULT_QUERY_PARAMS, useGetCases } from '../../../cases/containers/use_get_cases';
-import { getCaseUrl } from '../../../common/components/link_to/redirect_to_case';
-import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
-import { navTabs } from '../../../app/home/home_navigations';
 import { LoadingPlaceholders } from '../loading_placeholders';
 import { NoCases } from './no_cases';
 import { RecentCases } from './recent_cases';
 import * as i18n from './translations';
+import { useKibana } from '../../../common/lib/kibana';
+import { APP_ID } from '../../../../common/constants';
+import { SecurityPageName } from '../../../app/types';
+import { useFormatUrl } from '../../../common/components/link_to';
+import { LinkAnchor } from '../../../common/components/links';
 
 const usePrevious = (value: FilterOptions) => {
   const ref = useRef();
@@ -34,16 +36,31 @@ const queryParams: QueryParams = {
 
 const StatefulRecentCasesComponent = React.memo(
   ({ filterOptions }: { filterOptions: FilterOptions }) => {
+    const { formatUrl } = useFormatUrl(SecurityPageName.case);
+    const { navigateToApp } = useKibana().services.application;
     const previousFilterOptions = usePrevious(filterOptions);
     const { data, loading, setFilters } = useGetCases(queryParams);
     const isLoadingCases = useMemo(
       () => loading.indexOf('cases') > -1 || loading.indexOf('caseUpdate') > -1,
       [loading]
     );
-    const search = useGetUrlSearch(navTabs.case);
+
+    const goToCases = useCallback(
+      (ev) => {
+        ev.preventDefault();
+        navigateToApp(`${APP_ID}:${SecurityPageName.case}`);
+      },
+      [navigateToApp]
+    );
+
     const allCasesLink = useMemo(
-      () => <EuiLink href={getCaseUrl(search)}>{i18n.VIEW_ALL_CASES}</EuiLink>,
-      [search]
+      () => (
+        <LinkAnchor onClick={goToCases} href={formatUrl('')}>
+          {' '}
+          {i18n.VIEW_ALL_CASES}
+        </LinkAnchor>
+      ),
+      [goToCases, formatUrl]
     );
 
     useEffect(() => {
diff --git a/x-pack/plugins/security_solution/public/overview/components/recent_cases/no_cases/index.tsx b/x-pack/plugins/security_solution/public/overview/components/recent_cases/no_cases/index.tsx
index e29223ca07e65..40969a6e1df4a 100644
--- a/x-pack/plugins/security_solution/public/overview/components/recent_cases/no_cases/index.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/recent_cases/no_cases/index.tsx
@@ -4,20 +4,37 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiLink } from '@elastic/eui';
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 
+import { APP_ID } from '../../../../../common/constants';
 import { getCreateCaseUrl } from '../../../../common/components/link_to/redirect_to_case';
-import { useGetUrlSearch } from '../../../../common/components/navigation/use_get_url_search';
-import { navTabs } from '../../../../app/home/home_navigations';
-
+import { LinkAnchor } from '../../../../common/components/links';
+import { useFormatUrl } from '../../../../common/components/link_to';
 import * as i18n from '../translations';
+import { useKibana } from '../../../../common/lib/kibana';
+import { SecurityPageName } from '../../../../app/types';
 
 const NoCasesComponent = () => {
-  const urlSearch = useGetUrlSearch(navTabs.case);
+  const { formatUrl, search } = useFormatUrl(SecurityPageName.case);
+  const { navigateToApp } = useKibana().services.application;
+
+  const goToCreateCase = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      navigateToApp(`${APP_ID}:${SecurityPageName.hosts}`, {
+        path: getCreateCaseUrl(search),
+      });
+    },
+    [navigateToApp, search]
+  );
   const newCaseLink = useMemo(
-    () => <EuiLink href={getCreateCaseUrl(urlSearch)}>{` ${i18n.START_A_NEW_CASE}`}</EuiLink>,
-    [urlSearch]
+    () => (
+      <LinkAnchor
+        onClick={goToCreateCase}
+        href={formatUrl(getCreateCaseUrl())}
+      >{` ${i18n.START_A_NEW_CASE}`}</LinkAnchor>
+    ),
+    [formatUrl, goToCreateCase]
   );
 
   return (
diff --git a/x-pack/plugins/security_solution/public/overview/components/recent_cases/recent_cases.tsx b/x-pack/plugins/security_solution/public/overview/components/recent_cases/recent_cases.tsx
index 9618ddb05716d..5867a9d859f04 100644
--- a/x-pack/plugins/security_solution/public/overview/components/recent_cases/recent_cases.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/recent_cases/recent_cases.tsx
@@ -4,18 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
 
 import { Case } from '../../../cases/containers/types';
 import { getCaseDetailsUrl } from '../../../common/components/link_to/redirect_to_case';
 import { Markdown } from '../../../common/components/markdown';
-import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
-import { navTabs } from '../../../app/home/home_navigations';
+import { useFormatUrl } from '../../../common/components/link_to';
 import { IconWithCount } from '../recent_timelines/counts';
-
+import { LinkAnchor } from '../../../common/components/links';
 import * as i18n from './translations';
+import { useKibana } from '../../../common/lib/kibana';
+import { APP_ID } from '../../../../common/constants';
+import { SecurityPageName } from '../../../app/types';
 
 const MarkdownContainer = styled.div`
   max-height: 150px;
@@ -24,7 +26,8 @@ const MarkdownContainer = styled.div`
 `;
 
 const RecentCasesComponent = ({ cases }: { cases: Case[] }) => {
-  const search = useGetUrlSearch(navTabs.case);
+  const { formatUrl, search } = useFormatUrl(SecurityPageName.case);
+  const { navigateToApp } = useKibana().services.application;
 
   return (
     <>
@@ -32,7 +35,17 @@ const RecentCasesComponent = ({ cases }: { cases: Case[] }) => {
         <EuiFlexGroup key={c.id} gutterSize="none" justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <EuiText size="s">
-              <EuiLink href={getCaseDetailsUrl({ id: c.id, search })}>{c.title}</EuiLink>
+              <LinkAnchor
+                onClick={(ev: { preventDefault: () => void }) => {
+                  ev.preventDefault();
+                  navigateToApp(`${APP_ID}:${SecurityPageName.case}`, {
+                    path: getCaseDetailsUrl({ id: c.id, search }),
+                  });
+                }}
+                href={formatUrl(getCaseDetailsUrl({ id: c.id }))}
+              >
+                {c.title}
+              </LinkAnchor>
             </EuiText>
 
             <IconWithCount count={c.totalComment} icon={'editorComment'} tooltip={i18n.COMMENTS} />
diff --git a/x-pack/plugins/security_solution/public/overview/components/recent_timelines/index.tsx b/x-pack/plugins/security_solution/public/overview/components/recent_timelines/index.tsx
index ab76219b3cc00..9c149a850bec9 100644
--- a/x-pack/plugins/security_solution/public/overview/components/recent_timelines/index.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/recent_timelines/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import ApolloClient from 'apollo-client';
-import { EuiHorizontalRule, EuiLink, EuiText } from '@elastic/eui';
+import { EuiHorizontalRule, EuiText } from '@elastic/eui';
 import React, { useCallback, useMemo, useEffect } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { Dispatch } from 'redux';
@@ -23,10 +23,12 @@ import { updateIsLoading as dispatchUpdateIsLoading } from '../../../timelines/s
 import { RecentTimelines } from './recent_timelines';
 import * as i18n from './translations';
 import { FilterMode } from './types';
-import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
-import { navTabs } from '../../../app/home/home_navigations';
-import { getTimelinesUrl } from '../../../common/components/link_to/redirect_to_timelines';
 import { LoadingPlaceholders } from '../loading_placeholders';
+import { useKibana } from '../../../common/lib/kibana';
+import { SecurityPageName } from '../../../app/types';
+import { APP_ID } from '../../../../common/constants';
+import { useFormatUrl } from '../../../common/components/link_to';
+import { LinkAnchor } from '../../../common/components/links';
 
 interface OwnProps {
   apolloClient: ApolloClient<{}>;
@@ -39,6 +41,8 @@ const PAGE_SIZE = 3;
 
 const StatefulRecentTimelinesComponent = React.memo<Props>(
   ({ apolloClient, filterBy, updateIsLoading, updateTimeline }) => {
+    const { formatUrl } = useFormatUrl(SecurityPageName.timelines);
+    const { navigateToApp } = useKibana().services.application;
     const onOpenTimeline: OnOpenTimeline = useCallback(
       ({ duplicate, timelineId }: { duplicate: boolean; timelineId: string }) => {
         queryTimelineById({
@@ -52,12 +56,24 @@ const StatefulRecentTimelinesComponent = React.memo<Props>(
       [apolloClient, updateIsLoading, updateTimeline]
     );
 
+    const goToTimelines = useCallback(
+      (ev) => {
+        ev.preventDefault();
+        navigateToApp(`${APP_ID}:${SecurityPageName.timelines}`);
+      },
+      [navigateToApp]
+    );
+
     const noTimelinesMessage =
       filterBy === 'favorites' ? i18n.NO_FAVORITE_TIMELINES : i18n.NO_TIMELINES;
-    const urlSearch = useGetUrlSearch(navTabs.timelines);
+
     const linkAllTimelines = useMemo(
-      () => <EuiLink href={getTimelinesUrl(urlSearch)}>{i18n.VIEW_ALL_TIMELINES}</EuiLink>,
-      [urlSearch]
+      () => (
+        <LinkAnchor onClick={goToTimelines} href={formatUrl('')}>
+          {i18n.VIEW_ALL_TIMELINES}
+        </LinkAnchor>
+      ),
+      [goToTimelines, formatUrl]
     );
     const loadingPlaceholders = useMemo(
       () => (
@@ -68,22 +84,24 @@ const StatefulRecentTimelinesComponent = React.memo<Props>(
 
     const { fetchAllTimeline, timelines, loading } = useGetAllTimeline();
 
-    useEffect(() => {
-      fetchAllTimeline({
-        pageInfo: {
-          pageIndex: 1,
-          pageSize: PAGE_SIZE,
-        },
-        search: '',
-        sort: {
-          sortField: SortFieldTimeline.updated,
-          sortOrder: Direction.desc,
-        },
-        onlyUserFavorite: filterBy === 'favorites',
-        timelineType: TimelineType.default,
-      });
+    useEffect(
+      () =>
+        fetchAllTimeline({
+          pageInfo: {
+            pageIndex: 1,
+            pageSize: PAGE_SIZE,
+          },
+          search: '',
+          sort: {
+            sortField: SortFieldTimeline.updated,
+            sortOrder: Direction.desc,
+          },
+          onlyUserFavorite: filterBy === 'favorites',
+          timelineType: TimelineType.default,
+        }),
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filterBy]);
+      [filterBy]
+    );
 
     return (
       <>
diff --git a/x-pack/plugins/security_solution/public/overview/index.ts b/x-pack/plugins/security_solution/public/overview/index.ts
index bdf855b3851c8..dad9d0c1dc1f6 100644
--- a/x-pack/plugins/security_solution/public/overview/index.ts
+++ b/x-pack/plugins/security_solution/public/overview/index.ts
@@ -5,14 +5,14 @@
  */
 
 import { SecuritySubPlugin } from '../app/types';
-import { getOverviewRoutes } from './routes';
+import { OverviewRoutes } from './routes';
 
 export class Overview {
   public setup() {}
 
   public start(): SecuritySubPlugin {
     return {
-      routes: getOverviewRoutes(),
+      SubPluginRoutes: OverviewRoutes,
     };
   }
 }
diff --git a/x-pack/plugins/security_solution/public/overview/pages/overview.tsx b/x-pack/plugins/security_solution/public/overview/pages/overview.tsx
index 57a82f6f254f2..543dafd50c8e0 100644
--- a/x-pack/plugins/security_solution/public/overview/pages/overview.tsx
+++ b/x-pack/plugins/security_solution/public/overview/pages/overview.tsx
@@ -28,6 +28,7 @@ import { SignalsByCategory } from '../components/signals_by_category';
 import { inputsSelectors, State } from '../../common/store';
 import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from '../../common/store/inputs/actions';
 import { SpyRoute } from '../../common/utils/route/spy_routes';
+import { SecurityPageName } from '../../app/types';
 
 const DEFAULT_QUERY: Query = { query: '', language: 'kuery' };
 const NO_FILTERS: Filter[] = [];
@@ -120,7 +121,7 @@ const OverviewComponent: React.FC<PropsFromRedux> = ({
       }
     </WithSource>
 
-    <SpyRoute />
+    <SpyRoute pageName={SecurityPageName.overview} />
   </>
 );
 
diff --git a/x-pack/plugins/security_solution/public/overview/routes.tsx b/x-pack/plugins/security_solution/public/overview/routes.tsx
index fc41227b27c04..ff26475d7b259 100644
--- a/x-pack/plugins/security_solution/public/overview/routes.tsx
+++ b/x-pack/plugins/security_solution/public/overview/routes.tsx
@@ -5,11 +5,14 @@
  */
 
 import React from 'react';
-import { Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 
 import { Overview } from './pages';
-import { SiemPageName } from '../app/types';
+import { NotFoundPage } from '../app/404';
 
-export const getOverviewRoutes = () => [
-  <Route path={`/:pageName(${SiemPageName.overview})`} render={() => <Overview />} />,
-];
+export const OverviewRoutes = () => (
+  <Switch>
+    <Route path="/" render={() => <Overview />} />
+    <Route render={() => <NotFoundPage />} />
+  </Switch>
+);
diff --git a/x-pack/plugins/security_solution/public/plugin.tsx b/x-pack/plugins/security_solution/public/plugin.tsx
index b9eef9f799d3b..58f0a0ddb749e 100644
--- a/x-pack/plugins/security_solution/public/plugin.tsx
+++ b/x-pack/plugins/security_solution/public/plugin.tsx
@@ -5,6 +5,9 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { Store, Action } from 'redux';
+import { BehaviorSubject } from 'rxjs';
+import { pluck } from 'rxjs/operators';
 
 import {
   AppMountParameters,
@@ -20,11 +23,26 @@ import { initTelemetry } from './common/lib/telemetry';
 import { KibanaServices } from './common/lib/kibana/services';
 import { serviceNowActionType, jiraActionType } from './common/lib/connectors';
 import { PluginSetup, PluginStart, SetupPlugins, StartPlugins, StartServices } from './types';
-import { APP_ID, APP_NAME, APP_ICON, APP_PATH } from '../common/constants';
+import {
+  APP_ID,
+  APP_ICON,
+  APP_ALERTS_PATH,
+  APP_HOSTS_PATH,
+  APP_OVERVIEW_PATH,
+  APP_NETWORK_PATH,
+  APP_TIMELINES_PATH,
+  APP_MANAGEMENT_PATH,
+  APP_CASES_PATH,
+} from '../common/constants';
 import { ConfigureEndpointDatasource } from './management/pages/policy/view/ingest_manager_integration/configure_datasource';
 
+import { State, createStore, createInitialState } from './common/store';
+import { SecurityPageName } from './app/types';
+import { manageOldSiemRoutes } from './helpers';
+
 export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, StartPlugins> {
   private kibanaVersion: string;
+  private store!: Store<State, Action>;
 
   constructor(initializerContext: PluginInitializerContext) {
     this.kibanaVersion = initializerContext.env.packageInfo.version;
@@ -42,7 +60,7 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
         defaultMessage: 'Explore security metrics and logs for events and alerts',
       }),
       icon: APP_ICON,
-      path: APP_PATH,
+      path: APP_OVERVIEW_PATH,
       showOnHomePage: true,
       category: FeatureCatalogueCategory.DATA,
     });
@@ -50,90 +68,237 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
     plugins.triggers_actions_ui.actionTypeRegistry.register(serviceNowActionType());
     plugins.triggers_actions_ui.actionTypeRegistry.register(jiraActionType());
 
-    const mountSecurityApp = async (params: AppMountParameters) => {
+    const mountSecurityFactory = async () => {
       const storage = new Storage(localStorage);
       const [coreStart, startPlugins] = await core.getStartServices();
-      const { renderApp } = await import('./app');
+      if (this.store == null) {
+        await this.buildStore(coreStart, startPlugins, storage);
+      }
+
       const services = {
         ...coreStart,
         ...startPlugins,
-        security: plugins.security,
         storage,
+        security: plugins.security,
       } as StartServices;
-
-      const alertsSubPlugin = new (await import('./alerts')).Alerts();
-      const casesSubPlugin = new (await import('./cases')).Cases();
-      const hostsSubPlugin = new (await import('./hosts')).Hosts();
-      const networkSubPlugin = new (await import('./network')).Network();
-      const overviewSubPlugin = new (await import('./overview')).Overview();
-      const timelinesSubPlugin = new (await import('./timelines')).Timelines();
-      const endpointAlertsSubPlugin = new (await import('./endpoint_alerts')).EndpointAlerts();
-      const managementSubPlugin = new (await import('./management')).Management();
-
-      const alertsStart = alertsSubPlugin.start(storage);
-      const casesStart = casesSubPlugin.start();
-      const hostsStart = hostsSubPlugin.start(storage);
-      const networkStart = networkSubPlugin.start(storage);
-      const overviewStart = overviewSubPlugin.start();
-      const timelinesStart = timelinesSubPlugin.start();
-      const endpointAlertsStart = endpointAlertsSubPlugin.start(coreStart, startPlugins);
-      const managementSubPluginStart = managementSubPlugin.start(coreStart, startPlugins);
-
-      const timelineInitialState = {
-        timeline: {
-          ...timelinesStart.store.initialState.timeline!,
-          timelineById: {
-            ...timelinesStart.store.initialState.timeline!.timelineById,
-            ...alertsStart.storageTimelines!.timelineById,
-            ...hostsStart.storageTimelines!.timelineById,
-            ...networkStart.storageTimelines!.timelineById,
-          },
-        },
-      };
-
-      return renderApp(services, params, {
-        routes: [
-          ...alertsStart.routes,
-          ...casesStart.routes,
-          ...hostsStart.routes,
-          ...networkStart.routes,
-          ...overviewStart.routes,
-          ...timelinesStart.routes,
-          ...endpointAlertsStart.routes,
-          ...managementSubPluginStart.routes,
-        ],
-        store: {
-          initialState: {
-            ...hostsStart.store.initialState,
-            ...networkStart.store.initialState,
-            ...timelineInitialState,
-            ...endpointAlertsStart.store.initialState,
-            ...managementSubPluginStart.store.initialState,
-          },
-          reducer: {
-            ...hostsStart.store.reducer,
-            ...networkStart.store.reducer,
-            ...timelinesStart.store.reducer,
-            ...endpointAlertsStart.store.reducer,
-            ...managementSubPluginStart.store.reducer,
-          },
-          middlewares: [
-            ...(endpointAlertsStart.store.middleware ?? []),
-            ...(managementSubPluginStart.store.middleware ?? []),
-          ],
-        },
-      });
+      return { coreStart, startPlugins, services, store: this.store, storage };
     };
 
+    // Waiting for https://github.com/elastic/kibana/issues/69110
+    // core.application.register({
+    //   id: APP_ID,
+    //   title: 'Security',
+    //   appRoute: APP_PATH,
+    //   navLinkStatus: AppNavLinkStatus.hidden,
+    //   mount: async (params: AppMountParameters) => {
+    //     const [{ application }] = await core.getStartServices();
+    //     application.navigateToApp(`${APP_ID}:${SecurityPageName.overview}`, { replace: true });
+    //     return () => true;
+    //   },
+    // });
+
     core.application.register({
-      id: APP_ID,
-      title: APP_NAME,
+      id: `${APP_ID}:${SecurityPageName.overview}`,
+      title: i18n.translate('xpack.securitySolution.overviewPage.title', {
+        defaultMessage: 'Overview',
+      }),
       order: 9000,
       euiIconType: APP_ICON,
       category: DEFAULT_APP_CATEGORIES.security,
-      appRoute: APP_PATH,
-      async mount(params: AppMountParameters) {
-        return mountSecurityApp(params);
+      appRoute: APP_OVERVIEW_PATH,
+      mount: async (params: AppMountParameters) => {
+        const [
+          { coreStart, store, services },
+          { renderApp, composeLibs },
+          { overviewSubPlugin },
+        ] = await Promise.all([
+          mountSecurityFactory(),
+          this.downloadAssets(),
+          this.downloadSubPlugins(),
+        ]);
+        return renderApp({
+          ...composeLibs(coreStart),
+          ...params,
+          services,
+          store,
+          SubPluginRoutes: overviewSubPlugin.start().SubPluginRoutes,
+        });
+      },
+    });
+
+    core.application.register({
+      id: `${APP_ID}:${SecurityPageName.alerts}`,
+      title: i18n.translate('xpack.securitySolution.alertsPage.title', {
+        defaultMessage: 'Alerts',
+      }),
+      order: 9001,
+      euiIconType: APP_ICON,
+      category: DEFAULT_APP_CATEGORIES.security,
+      appRoute: APP_ALERTS_PATH,
+      mount: async (params: AppMountParameters) => {
+        const [
+          { coreStart, store, services, storage },
+          { renderApp, composeLibs },
+          { alertsSubPlugin },
+        ] = await Promise.all([
+          mountSecurityFactory(),
+          this.downloadAssets(),
+          this.downloadSubPlugins(),
+        ]);
+        return renderApp({
+          ...composeLibs(coreStart),
+          ...params,
+          services,
+          store,
+          SubPluginRoutes: alertsSubPlugin.start(storage).SubPluginRoutes,
+        });
+      },
+    });
+
+    core.application.register({
+      id: `${APP_ID}:${SecurityPageName.hosts}`,
+      title: 'Hosts',
+      order: 9002,
+      euiIconType: APP_ICON,
+      category: DEFAULT_APP_CATEGORIES.security,
+      appRoute: APP_HOSTS_PATH,
+      mount: async (params: AppMountParameters) => {
+        const [
+          { coreStart, store, services, storage },
+          { renderApp, composeLibs },
+          { hostsSubPlugin },
+        ] = await Promise.all([
+          mountSecurityFactory(),
+          this.downloadAssets(),
+          this.downloadSubPlugins(),
+        ]);
+        return renderApp({
+          ...composeLibs(coreStart),
+          ...params,
+          services,
+          store,
+          SubPluginRoutes: hostsSubPlugin.start(storage).SubPluginRoutes,
+        });
+      },
+    });
+
+    core.application.register({
+      id: `${APP_ID}:${SecurityPageName.network}`,
+      title: 'Network',
+      order: 9002,
+      euiIconType: APP_ICON,
+      category: DEFAULT_APP_CATEGORIES.security,
+      appRoute: APP_NETWORK_PATH,
+      mount: async (params: AppMountParameters) => {
+        const [
+          { coreStart, store, services, storage },
+          { renderApp, composeLibs },
+          { networkSubPlugin },
+        ] = await Promise.all([
+          mountSecurityFactory(),
+          this.downloadAssets(),
+          this.downloadSubPlugins(),
+        ]);
+        return renderApp({
+          ...composeLibs(coreStart),
+          ...params,
+          services,
+          store,
+          SubPluginRoutes: networkSubPlugin.start(storage).SubPluginRoutes,
+        });
+      },
+    });
+
+    core.application.register({
+      id: `${APP_ID}:${SecurityPageName.timelines}`,
+      title: 'Timelines',
+      order: 9002,
+      euiIconType: APP_ICON,
+      category: DEFAULT_APP_CATEGORIES.security,
+      appRoute: APP_TIMELINES_PATH,
+      mount: async (params: AppMountParameters) => {
+        const [
+          { coreStart, store, services },
+          { renderApp, composeLibs },
+          { timelinesSubPlugin },
+        ] = await Promise.all([
+          mountSecurityFactory(),
+          this.downloadAssets(),
+          this.downloadSubPlugins(),
+        ]);
+        return renderApp({
+          ...composeLibs(coreStart),
+          ...params,
+          services,
+          store,
+          SubPluginRoutes: timelinesSubPlugin.start().SubPluginRoutes,
+        });
+      },
+    });
+
+    core.application.register({
+      id: `${APP_ID}:${SecurityPageName.case}`,
+      title: 'Cases',
+      order: 9002,
+      euiIconType: APP_ICON,
+      category: DEFAULT_APP_CATEGORIES.security,
+      appRoute: APP_CASES_PATH,
+      mount: async (params: AppMountParameters) => {
+        const [
+          { coreStart, store, services },
+          { renderApp, composeLibs },
+          { casesSubPlugin },
+        ] = await Promise.all([
+          mountSecurityFactory(),
+          this.downloadAssets(),
+          this.downloadSubPlugins(),
+        ]);
+        return renderApp({
+          ...composeLibs(coreStart),
+          ...params,
+          services,
+          store,
+          SubPluginRoutes: casesSubPlugin.start().SubPluginRoutes,
+        });
+      },
+    });
+
+    core.application.register({
+      id: `${APP_ID}:${SecurityPageName.management}`,
+      title: 'Management',
+      order: 9002,
+      euiIconType: APP_ICON,
+      category: DEFAULT_APP_CATEGORIES.security,
+      appRoute: APP_MANAGEMENT_PATH,
+      mount: async (params: AppMountParameters) => {
+        const [
+          { coreStart, startPlugins, store, services },
+          { renderApp, composeLibs },
+          { managementSubPlugin },
+        ] = await Promise.all([
+          mountSecurityFactory(),
+          this.downloadAssets(),
+          this.downloadSubPlugins(),
+        ]);
+        return renderApp({
+          ...composeLibs(coreStart),
+          ...params,
+          services,
+          store,
+          SubPluginRoutes: managementSubPlugin.start(coreStart, startPlugins).SubPluginRoutes,
+        });
+      },
+    });
+
+    core.application.register({
+      id: 'siem',
+      appRoute: 'app/siem',
+      title: 'SIEM',
+      navLinkStatus: 3,
+      mount: async (params: AppMountParameters) => {
+        const [coreStart] = await core.getStartServices();
+        manageOldSiemRoutes(coreStart);
+        return () => true;
       },
     });
 
@@ -150,4 +315,97 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
   public stop() {
     return {};
   }
+
+  private async downloadAssets() {
+    const [{ renderApp }, { composeLibs }] = await Promise.all([
+      import('./app'),
+      import('./common/lib/compose/kibana_compose'),
+    ]);
+
+    return {
+      renderApp,
+      composeLibs,
+    };
+  }
+
+  private async downloadSubPlugins() {
+    const {
+      alertsSubPlugin,
+      casesSubPlugin,
+      hostsSubPlugin,
+      networkSubPlugin,
+      overviewSubPlugin,
+      timelinesSubPlugin,
+      endpointAlertsSubPlugin,
+      managementSubPlugin,
+    } = await import('./sub_plugins');
+
+    return {
+      alertsSubPlugin,
+      casesSubPlugin,
+      hostsSubPlugin,
+      networkSubPlugin,
+      overviewSubPlugin,
+      timelinesSubPlugin,
+      endpointAlertsSubPlugin,
+      managementSubPlugin,
+    };
+  }
+
+  private async buildStore(coreStart: CoreStart, startPlugins: StartPlugins, storage: Storage) {
+    const { composeLibs } = await this.downloadAssets();
+
+    const {
+      alertsSubPlugin,
+      hostsSubPlugin,
+      networkSubPlugin,
+      timelinesSubPlugin,
+      endpointAlertsSubPlugin,
+      managementSubPlugin,
+    } = await this.downloadSubPlugins();
+
+    const libs$ = new BehaviorSubject(composeLibs(coreStart));
+
+    const alertsStart = alertsSubPlugin.start(storage);
+    const hostsStart = hostsSubPlugin.start(storage);
+    const networkStart = networkSubPlugin.start(storage);
+    const timelinesStart = timelinesSubPlugin.start();
+    const endpointAlertsStart = endpointAlertsSubPlugin.start(coreStart, startPlugins);
+    const managementSubPluginStart = managementSubPlugin.start(coreStart, startPlugins);
+
+    const timelineInitialState = {
+      timeline: {
+        ...timelinesStart.store.initialState.timeline!,
+        timelineById: {
+          ...timelinesStart.store.initialState.timeline!.timelineById,
+          ...alertsStart.storageTimelines!.timelineById,
+          ...hostsStart.storageTimelines!.timelineById,
+          ...networkStart.storageTimelines!.timelineById,
+        },
+      },
+    };
+
+    this.store = createStore(
+      createInitialState({
+        ...hostsStart.store.initialState,
+        ...networkStart.store.initialState,
+        ...timelineInitialState,
+        ...endpointAlertsStart.store.initialState,
+        ...managementSubPluginStart.store.initialState,
+      }),
+      {
+        ...hostsStart.store.reducer,
+        ...networkStart.store.reducer,
+        ...timelinesStart.store.reducer,
+        ...endpointAlertsStart.store.reducer,
+        ...managementSubPluginStart.store.reducer,
+      },
+      libs$.pipe(pluck('apolloClient')),
+      storage,
+      [
+        ...(endpointAlertsStart.store.middleware ?? []),
+        ...(managementSubPluginStart.store.middleware ?? []),
+      ]
+    );
+  }
 }
diff --git a/x-pack/plugins/security_solution/public/sub_plugins.ts b/x-pack/plugins/security_solution/public/sub_plugins.ts
new file mode 100644
index 0000000000000..553184727db2b
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/sub_plugins.ts
@@ -0,0 +1,34 @@
+/*
+ * 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 { Alerts } from './alerts';
+import { Cases } from './cases';
+import { Hosts } from './hosts';
+import { Network } from './network';
+import { Overview } from './overview';
+import { Timelines } from './timelines';
+import { EndpointAlerts } from './endpoint_alerts';
+import { Management } from './management';
+
+const alertsSubPlugin = new Alerts();
+const casesSubPlugin = new Cases();
+const hostsSubPlugin = new Hosts();
+const networkSubPlugin = new Network();
+const overviewSubPlugin = new Overview();
+const timelinesSubPlugin = new Timelines();
+const endpointAlertsSubPlugin = new EndpointAlerts();
+const managementSubPlugin = new Management();
+
+export {
+  alertsSubPlugin,
+  casesSubPlugin,
+  hostsSubPlugin,
+  networkSubPlugin,
+  overviewSubPlugin,
+  timelinesSubPlugin,
+  endpointAlertsSubPlugin,
+  managementSubPlugin,
+};
diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/index.tsx
index c556c2d53f7c2..38b3068f3d3aa 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/flyout/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/index.tsx
@@ -44,7 +44,7 @@ interface OwnProps {
 type Props = OwnProps & ProsFromRedux;
 
 export const FlyoutComponent = React.memo<Props>(
-  ({ dataProviders, flyoutHeight, show, showTimeline, timelineId, usersViewing, width }) => {
+  ({ dataProviders, flyoutHeight, show = true, showTimeline, timelineId, usersViewing, width }) => {
     const handleClose = useCallback(() => showTimeline({ id: timelineId, show: false }), [
       showTimeline,
       timelineId,
diff --git a/x-pack/plugins/security_solution/public/timelines/components/netflow/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/netflow/index.test.tsx
index 2615d5057347e..24f8d910b4feb 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/netflow/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/netflow/index.test.tsx
@@ -120,6 +120,8 @@ const getNetflowInstance = () => (
   />
 );
 
+jest.mock('../../../common/components/link_to');
+
 describe('Netflow', () => {
   const mount = useMountAppended();
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.tsx
index 344f10dfdb35e..24dee1460810f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.tsx
@@ -109,19 +109,25 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
     const { timelineType, timelineTabs, timelineFilters } = useTimelineTypes();
     const { fetchAllTimeline, timelines, loading, totalCount } = useGetAllTimeline();
 
-    const refetch = useCallback(() => {
-      fetchAllTimeline({
-        pageInfo: {
-          pageIndex: pageIndex + 1,
-          pageSize,
-        },
-        search,
-        sort: { sortField: sortField as SortFieldTimeline, sortOrder: sortDirection as Direction },
-        onlyUserFavorite: onlyFavorites,
-        timelineType,
-      });
+    const refetch = useCallback(
+      () =>
+        fetchAllTimeline({
+          pageInfo: {
+            pageIndex: pageIndex + 1,
+            pageSize,
+          },
+          search,
+          sort: {
+            sortField: sortField as SortFieldTimeline,
+            sortOrder: sortDirection as Direction,
+          },
+          onlyUserFavorite: onlyFavorites,
+          timelineType,
+        }),
+
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [pageIndex, pageSize, search, sortField, sortDirection, timelineType, onlyFavorites]);
+      [pageIndex, pageSize, search, sortField, sortDirection, timelineType, onlyFavorites]
+    );
 
     /** Invoked when the user presses enters to submit the text in the search input */
     const onQueryChange: OnQueryChange = useCallback((query: EuiSearchBarQuery) => {
@@ -251,9 +257,7 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
       focusInput();
     }, []);
 
-    useEffect(() => {
-      refetch();
-    }, [refetch]);
+    useEffect(() => refetch(), [refetch]);
 
     return !isModal ? (
       <OpenTimeline
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/types.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/types.ts
index 105f1adf05a62..e1515a3a79254 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/types.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/types.ts
@@ -200,4 +200,5 @@ export interface TimelineTab {
   name: string;
   disabled: boolean;
   href: string;
+  onClick: (ev: { preventDefault: () => void }) => void;
 }
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_types.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_types.tsx
index afc66e337d7b2..56c67b0c294a2 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_types.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_types.tsx
@@ -4,14 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { useState, useCallback, useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
 import { EuiTabs, EuiTab, EuiSpacer, EuiFilterButton } from '@elastic/eui';
 
 import { TimelineTypeLiteralWithNull, TimelineType } from '../../../../common/types/timeline';
-
-import { getTimelineTabsUrl } from '../../../common/components/link_to';
-import { navTabs } from '../../../app/home/home_navigations';
-import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
+import { SecurityPageName } from '../../../app/types';
+import { getTimelineTabsUrl, useFormatUrl } from '../../../common/components/link_to';
 import * as i18n from './translations';
 import { TimelineTabsStyle, TimelineTab } from './types';
 
@@ -20,12 +18,29 @@ export const useTimelineTypes = (): {
   timelineTabs: JSX.Element;
   timelineFilters: JSX.Element;
 } => {
-  const urlSearch = useGetUrlSearch(navTabs.timelines);
+  const history = useHistory();
+  const { formatUrl, search: urlSearch } = useFormatUrl(SecurityPageName.timelines);
   const { tabName } = useParams<{ pageName: string; tabName: string }>();
   const [timelineType, setTimelineTypes] = useState<TimelineTypeLiteralWithNull>(
     tabName === TimelineType.default || tabName === TimelineType.template ? tabName : null
   );
 
+  const goToTimeline = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      history.push(getTimelineTabsUrl(TimelineType.default, urlSearch));
+    },
+    [history, urlSearch]
+  );
+
+  const goToTemplateTimeline = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      history.push(getTimelineTabsUrl(TimelineType.template, urlSearch));
+    },
+    [history, urlSearch]
+  );
+
   const getFilterOrTabs: (timelineTabsStyle: TimelineTabsStyle) => TimelineTab[] = (
     timelineTabsStyle: TimelineTabsStyle
   ) => [
@@ -35,8 +50,9 @@ export const useTimelineTypes = (): {
         timelineTabsStyle === TimelineTabsStyle.filter
           ? i18n.FILTER_TIMELINES(i18n.TAB_TIMELINES)
           : i18n.TAB_TIMELINES,
-      href: getTimelineTabsUrl(TimelineType.default, urlSearch),
+      href: formatUrl(getTimelineTabsUrl(TimelineType.default, urlSearch)),
       disabled: false,
+      onClick: goToTimeline,
     },
     {
       id: TimelineType.template,
@@ -44,8 +60,9 @@ export const useTimelineTypes = (): {
         timelineTabsStyle === TimelineTabsStyle.filter
           ? i18n.FILTER_TIMELINES(i18n.TAB_TEMPLATES)
           : i18n.TAB_TEMPLATES,
-      href: getTimelineTabsUrl(TimelineType.template, urlSearch),
+      href: formatUrl(getTimelineTabsUrl(TimelineType.template, urlSearch)),
       disabled: false,
+      onClick: goToTemplateTimeline,
     },
   ];
 
@@ -70,7 +87,10 @@ export const useTimelineTypes = (): {
               disabled={tab.disabled}
               key={`timeline-${TimelineTabsStyle.tab}-${tab.id}`}
               href={tab.href}
-              onClick={onFilterClicked.bind(null, TimelineTabsStyle.tab, tab.id)}
+              onClick={(ev) => {
+                tab.onClick(ev);
+                onFilterClicked(TimelineTabsStyle.tab, tab.id);
+              }}
             >
               {tab.name}
             </EuiTab>
@@ -89,7 +109,10 @@ export const useTimelineTypes = (): {
           <EuiFilterButton
             hasActiveFilters={tab.id === timelineType}
             key={`timeline-${TimelineTabsStyle.filter}-${tab.id}`}
-            onClick={onFilterClicked.bind(null, TimelineTabsStyle.filter, tab.id)}
+            onClick={(ev: { preventDefault: () => void }) => {
+              tab.onClick(ev);
+              onFilterClicked.bind(null, TimelineTabsStyle.filter, tab.id);
+            }}
           >
             {tab.name}
           </EuiFilterButton>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
index 67a13b2f1ff15..9ced194aceb35 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
@@ -24,6 +24,8 @@ const mockSort: Sort = {
   sortDirection: Direction.desc,
 };
 
+jest.mock('../../../../common/components/link_to');
+
 jest.mock(
   'react-visibility-sensor',
   () => ({ children }: { children: (args: { isVisible: boolean }) => React.ReactNode }) =>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/auditd/generic_row_renderer.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/auditd/generic_row_renderer.test.tsx
index ae5e7e2ef789b..aec463f531448 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/auditd/generic_row_renderer.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/auditd/generic_row_renderer.test.tsx
@@ -19,6 +19,7 @@ import {
   createGenericFileRowRenderer,
 } from './generic_row_renderer';
 
+jest.mock('../../../../../../common/components/link_to');
 jest.mock('../../../../../../overview/components/events_by_dataset');
 
 describe('GenericRowRenderer', () => {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.test.tsx
index 64f4656e7e790..3e055682d27a4 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.test.tsx
@@ -16,6 +16,7 @@ import { FormattedFieldValue } from './formatted_field';
 import { HOST_NAME_FIELD_NAME } from './constants';
 
 jest.mock('../../../../../common/lib/kibana');
+jest.mock('../../../../../common/components/link_to');
 
 describe('Events', () => {
   const mount = useMountAppended();
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.tsx
index aaac3e7f7f4d5..b2588e19800a6 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.tsx
@@ -30,7 +30,7 @@ import {
   RULE_REFERENCE_FIELD_NAME,
   SIGNAL_RULE_NAME_FIELD_NAME,
 } from './constants';
-import { renderRuleName, renderEventModule, renderRulReference } from './formatted_field_helpers';
+import { RenderRuleName, renderEventModule, renderRulReference } from './formatted_field_helpers';
 
 // simple black-list to prevent dragging and dropping fields such as message name
 const columnNamesNotDraggable = [MESSAGE_FIELD_NAME];
@@ -95,7 +95,16 @@ const FormattedFieldValueComponent: React.FC<{
       <Bytes contextId={contextId} eventId={eventId} fieldName={fieldName} value={`${value}`} />
     );
   } else if (fieldName === SIGNAL_RULE_NAME_FIELD_NAME) {
-    return renderRuleName({ contextId, eventId, fieldName, linkValue, truncate, value });
+    return (
+      <RenderRuleName
+        contextId={contextId}
+        eventId={eventId}
+        fieldName={fieldName}
+        linkValue={linkValue}
+        truncate={truncate}
+        value={value}
+      />
+    );
   } else if (fieldName === EVENT_MODULE_FIELD_NAME) {
     return renderEventModule({ contextId, eventId, fieldName, linkValue, truncate, value });
   } else if (fieldName === RULE_REFERENCE_FIELD_NAME) {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_helpers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_helpers.tsx
index b24c262c8a2e2..81820e2253fc9 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_helpers.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_helpers.tsx
@@ -6,7 +6,7 @@
 
 import { EuiLink, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiToolTip } from '@elastic/eui';
 import { isString, isEmpty } from 'lodash/fp';
-import React from 'react';
+import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
 import { DefaultDraggable } from '../../../../../common/components/draggables';
@@ -18,31 +18,49 @@ import { isUrlInvalid } from '../../../../../common/utils/validators';
 import endPointSvg from '../../../../../common/utils/logo_endpoint/64_color.svg';
 
 import * as i18n from './translations';
+import { SecurityPageName } from '../../../../../app/types';
+import { useFormatUrl } from '../../../../../common/components/link_to';
+import { useKibana } from '../../../../../common/lib/kibana';
+import { APP_ID } from '../../../../../../common/constants';
+import { LinkAnchor } from '../../../../../common/components/links';
 
 const EventModuleFlexItem = styled(EuiFlexItem)`
   width: 100%;
 `;
 
-export const renderRuleName = ({
-  contextId,
-  eventId,
-  fieldName,
-  linkValue,
-  truncate,
-  value,
-}: {
+interface RenderRuleNameProps {
   contextId: string;
   eventId: string;
   fieldName: string;
   linkValue: string | null | undefined;
   truncate?: boolean;
   value: string | number | null | undefined;
+}
+
+export const RenderRuleName: React.FC<RenderRuleNameProps> = ({
+  contextId,
+  eventId,
+  fieldName,
+  linkValue,
+  truncate,
+  value,
 }) => {
   const ruleName = `${value}`;
   const ruleId = linkValue;
-
+  const { search } = useFormatUrl(SecurityPageName.alerts);
+  const { navigateToApp, getUrlForApp } = useKibana().services.application;
   const content = truncate ? <TruncatableText>{value}</TruncatableText> : value;
 
+  const goToRuleDetails = useCallback(
+    (ev) => {
+      ev.preventDefault();
+      navigateToApp(`${APP_ID}:${SecurityPageName.alerts}`, {
+        path: getRuleDetailsUrl(ruleId ?? '', search),
+      });
+    },
+    [navigateToApp, ruleId, search]
+  );
+
   return isString(value) && ruleName.length > 0 && ruleId != null ? (
     <DefaultDraggable
       field={fieldName}
@@ -50,7 +68,14 @@ export const renderRuleName = ({
       tooltipContent={value}
       value={value}
     >
-      <EuiLink href={getRuleDetailsUrl(ruleId)}>{content}</EuiLink>
+      <LinkAnchor
+        onClick={goToRuleDetails}
+        href={getUrlForApp(`${APP_ID}:${SecurityPageName.alerts}`, {
+          path: getRuleDetailsUrl(ruleId, search),
+        })}
+      >
+        {content}
+      </LinkAnchor>
     </DefaultDraggable>
   ) : (
     getEmptyTagValue()
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_row_renderer.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_row_renderer.test.tsx
index 3222f8a2362db..0b3ea0ce6e430 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_row_renderer.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_row_renderer.test.tsx
@@ -17,6 +17,8 @@ import { useMountAppended } from '../../../../../common/utils/use_mount_appended
 import { rowRenderers } from '.';
 import { getRowRenderer } from './get_row_renderer';
 
+jest.mock('../../../../../common/components/link_to');
+
 describe('get_column_renderer', () => {
   let nonSuricata: Ecs;
   let suricata: Ecs;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/netflow_row_renderer.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/netflow_row_renderer.test.tsx
index 7e51c717ebe8c..5140b9abc60ef 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/netflow_row_renderer.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/netflow_row_renderer.test.tsx
@@ -24,6 +24,8 @@ export const justIdAndTimestamp: Ecs = {
   timestamp: '2018-11-12T19:03:25.936Z',
 };
 
+jest.mock('../../../../../../common/components/link_to');
+
 describe('netflowRowRenderer', () => {
   const mount = useMountAppended();
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/plain_column_renderer.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/plain_column_renderer.test.tsx
index 2448540f27e23..b7c2cb7032cc2 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/plain_column_renderer.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/plain_column_renderer.test.tsx
@@ -16,6 +16,8 @@ import { useMountAppended } from '../../../../../common/utils/use_mount_appended
 import { plainColumnRenderer } from './plain_column_renderer';
 import { getValues, deleteItemIdx, findItem } from './helpers';
 
+jest.mock('../../../../../common/components/link_to');
+
 describe('plain_column_renderer', () => {
   const mount = useMountAppended();
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/suricata/suricata_details.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/suricata/suricata_details.test.tsx
index d5040cb252370..14f147c61fca3 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/suricata/suricata_details.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/suricata/suricata_details.test.tsx
@@ -13,6 +13,8 @@ import { TestProviders } from '../../../../../../common/mock/test_providers';
 import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 import { SuricataDetails } from './suricata_details';
 
+jest.mock('../../../../../../common/components/link_to');
+
 describe('SuricataDetails', () => {
   const mount = useMountAppended();
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/suricata/suricata_row_renderer.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/suricata/suricata_row_renderer.test.tsx
index a10cd9dc97f6d..d36d24f41224c 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/suricata/suricata_row_renderer.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/suricata/suricata_row_renderer.test.tsx
@@ -15,6 +15,8 @@ import { TestProviders } from '../../../../../../common/mock/test_providers';
 import { suricataRowRenderer } from './suricata_row_renderer';
 import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 
+jest.mock('../../../../../../common/components/link_to');
+
 describe('suricata_row_renderer', () => {
   const mount = useMountAppended();
   let nonSuricata: Ecs;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/system/generic_details.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/system/generic_details.test.tsx
index e622c91e8b870..8efd8e1944331 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/system/generic_details.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/system/generic_details.test.tsx
@@ -13,6 +13,8 @@ import { mockTimelineData, TestProviders } from '../../../../../../common/mock';
 import { SystemGenericDetails, SystemGenericLine } from './generic_details';
 import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 
+jest.mock('../../../../../../common/components/link_to');
+
 describe('SystemGenericDetails', () => {
   const mount = useMountAppended();
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/system/generic_file_details.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/system/generic_file_details.test.tsx
index 61cc7f32567ef..5f4f5a5da352e 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/system/generic_file_details.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/system/generic_file_details.test.tsx
@@ -13,6 +13,14 @@ import { mockTimelineData, TestProviders } from '../../../../../../common/mock';
 import { SystemGenericFileDetails, SystemGenericFileLine } from './generic_file_details';
 import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    createHref: jest.fn(),
+    push: jest.fn(),
+  }),
+}));
+
 describe('SystemGenericFileDetails', () => {
   const mount = useMountAppended();
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/system/generic_row_renderer.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/system/generic_row_renderer.test.tsx
index 26cccc82896ea..bb997b9689270 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/system/generic_row_renderer.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/system/generic_row_renderer.test.tsx
@@ -48,6 +48,7 @@ import {
 } from './generic_row_renderer';
 import * as i18n from './translations';
 
+jest.mock('../../../../../../common/components/link_to');
 jest.mock('../../../../../../overview/components/events_by_dataset');
 
 describe('GenericRowRenderer', () => {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/zeek/zeek_details.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/zeek/zeek_details.test.tsx
index d82a0fcb6e644..04b0e6e5fcfae 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/zeek/zeek_details.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/zeek/zeek_details.test.tsx
@@ -11,6 +11,8 @@ import { mockTimelineData, TestProviders } from '../../../../../../common/mock';
 import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 import { ZeekDetails } from './zeek_details';
 
+jest.mock('../../../../../../common/components/link_to');
+
 describe('ZeekDetails', () => {
   const mount = useMountAppended();
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/zeek/zeek_row_renderer.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/zeek/zeek_row_renderer.test.tsx
index 2197ccb0ce2e0..2eed6aaf20335 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/zeek/zeek_row_renderer.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/zeek/zeek_row_renderer.test.tsx
@@ -14,6 +14,8 @@ import { mockTimelineData, TestProviders } from '../../../../../../common/mock';
 import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 import { zeekRowRenderer } from './zeek_row_renderer';
 
+jest.mock('../../../../../../common/components/link_to');
+
 describe('zeek_row_renderer', () => {
   const mount = useMountAppended();
   let nonZeek: Ecs;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.test.tsx
index 3110129867628..b11f6dfdf9d87 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.test.tsx
@@ -70,6 +70,7 @@ describe('StatefulTimeline', () => {
       filters: [],
       id: 'foo',
       isLive: false,
+      isTimelineExists: false,
       itemsPerPage: 5,
       itemsPerPageOptions: [5, 10, 20],
       kqlMode: 'search',
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx
index b53a34041a689..51cfe8ae33b05 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx
@@ -43,6 +43,7 @@ const StatefulTimelineComponent = React.memo<Props>(
     filters,
     id,
     isLive,
+    isTimelineExists,
     itemsPerPage,
     itemsPerPageOptions,
     kqlMode,
@@ -151,7 +152,7 @@ const StatefulTimelineComponent = React.memo<Props>(
     );
 
     useEffect(() => {
-      if (createTimeline != null) {
+      if (createTimeline != null && !isTimelineExists) {
         createTimeline({ id, columns: defaultHeaders, show: false });
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -248,6 +249,7 @@ const makeMapStateToProps = () => {
       filters: timelineFilter,
       id,
       isLive: input.policy.kind === 'interval',
+      isTimelineExists: getTimeline(state, id) != null,
       itemsPerPage,
       itemsPerPageOptions,
       kqlMode,
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/use_insert_timeline.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/use_insert_timeline.tsx
index 6269bc1b4a1a3..c3def9c4cbb29 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/use_insert_timeline.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/use_insert_timeline.tsx
@@ -17,7 +17,7 @@ export const useInsertTimeline = <T extends FormData>(form: FormHook<T>, fieldNa
   });
   const handleOnTimelineChange = useCallback(
     (title: string, id: string | null) => {
-      const builtLink = `${basePath}/app/security#/timelines?timeline=(id:'${id}',isOpen:!t)`;
+      const builtLink = `${basePath}/app/security/timelines?timeline=(id:'${id}',isOpen:!t)`;
       const currentValue = form.getFormData()[fieldName];
       const newValue: string = [
         currentValue.slice(0, cursorPosition.start),
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx
index 4d5c16dc30b8e..f2e7d26c9e851 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx
@@ -23,14 +23,17 @@ import styled from 'styled-components';
 import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { APP_ID } from '../../../../../common/constants';
 import {
   TimelineTypeLiteral,
   TimelineStatus,
   TimelineType,
 } from '../../../../../common/types/timeline';
-
-import { SiemPageName } from '../../../../app/types';
+import { navTabs } from '../../../../app/home/home_navigations';
+import { SecurityPageName } from '../../../../app/types';
 import { timelineSelectors } from '../../../../timelines/store/timeline';
+import { useGetUrlSearch } from '../../../../common/components/navigation/use_get_url_search';
+import { getCreateCaseUrl } from '../../../../common/components/link_to';
 import { State } from '../../../../common/store';
 import { useKibana } from '../../../../common/lib/kibana';
 import { Note } from '../../../../common/lib/note';
@@ -145,16 +148,15 @@ interface NewCaseProps {
 export const NewCase = React.memo<NewCaseProps>(
   ({ onClosePopover, timelineId, timelineStatus, timelineTitle }) => {
     const history = useHistory();
+    const urlSearch = useGetUrlSearch(navTabs.case);
     const dispatch = useDispatch();
     const { savedObjectId } = useSelector((state: State) =>
       timelineSelectors.selectTimeline(state, timelineId)
     );
+    const { navigateToApp } = useKibana().services.application;
 
     const handleClick = useCallback(() => {
       onClosePopover();
-      history.push({
-        pathname: `/${SiemPageName.case}/create`,
-      });
       dispatch(
         setInsertTimeline({
           timelineId,
@@ -162,8 +164,15 @@ export const NewCase = React.memo<NewCaseProps>(
           timelineTitle: timelineTitle.length > 0 ? timelineTitle : i18n.UNTITLED_TIMELINE,
         })
       );
+      navigateToApp(`${APP_ID}:${SecurityPageName.case}`, {
+        path: getCreateCaseUrl(urlSearch),
+      });
+      history.push({
+        pathname: `/${SecurityPageName.case}/create`,
+      });
+
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [dispatch, onClosePopover, history, timelineId, timelineTitle]);
+    }, [dispatch, navigateToApp, onClosePopover, history, timelineId, timelineTitle, urlSearch]);
 
     return (
       <EuiButtonEmpty
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.test.tsx
index c67efe204eb0e..37e8507d0a1ab 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.test.tsx
@@ -17,12 +17,14 @@ import {
 import { createStore, State } from '../../../../common/store';
 import { useThrottledResizeObserver } from '../../../../common/components/utils';
 import { Properties, showDescriptionThreshold, showNotesThreshold } from '.';
-import { SiemPageName } from '../../../../app/types';
+import { SecurityPageName } from '../../../../app/types';
 import { setInsertTimeline } from '../../../store/timeline/actions';
 export { nextTick } from '../../../../../../../test_utils';
 
 import { act } from 'react-dom/test-utils';
 
+jest.mock('../../../../common/components/link_to');
+
 jest.mock('../../../../common/lib/kibana', () => {
   const originalModule = jest.requireActual('../../../../common/lib/kibana');
   return {
@@ -35,6 +37,7 @@ jest.mock('../../../../common/lib/kibana', () => {
               crud: true,
             },
           },
+          navigateToApp: jest.fn(),
         },
       },
     }),
@@ -340,7 +343,7 @@ describe('Properties', () => {
     wrapper.find('[data-test-subj="settings-gear"]').at(0).simulate('click');
     wrapper.find('[data-test-subj="attach-timeline-case"]').first().simulate('click');
 
-    expect(mockHistoryPush).toBeCalledWith({ pathname: `/${SiemPageName.case}/create` });
+    expect(mockHistoryPush).toBeCalledWith({ pathname: `/${SecurityPageName.case}/create` });
     expect(mockDispatch).toBeCalledWith(
       setInsertTimeline({
         timelineId: defaultProps.timelineId,
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.tsx
index be79c0773bf88..602a7c8191c7a 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.tsx
@@ -7,7 +7,6 @@
 import React, { useState, useCallback, useMemo } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
 import { TimelineStatus, TimelineTypeLiteral } from '../../../../../common/types/timeline';
 import { useThrottledResizeObserver } from '../../../../common/components/utils';
 import { Note } from '../../../../common/lib/note';
@@ -19,11 +18,14 @@ import { TimelineProperties } from './styles';
 import { PropertiesRight } from './properties_right';
 import { PropertiesLeft } from './properties_left';
 import { AllCasesModal } from '../../../../cases/components/all_cases_modal';
-import { SiemPageName } from '../../../../app/types';
+import { SecurityPageName } from '../../../../app/types';
 import * as i18n from './translations';
 import { State } from '../../../../common/store';
 import { timelineSelectors } from '../../../store/timeline';
 import { setInsertTimeline } from '../../../store/timeline/actions';
+import { useKibana } from '../../../../common/lib/kibana';
+import { APP_ID } from '../../../../../common/constants';
+import { getCaseDetailsUrl } from '../../../../common/components/link_to';
 
 type CreateTimeline = ({
   id,
@@ -91,6 +93,7 @@ export const Properties = React.memo<Props>(
     updateTitle,
     usersViewing,
   }) => {
+    const { navigateToApp } = useKibana().services.application;
     const { ref, width = 0 } = useThrottledResizeObserver(300);
     const [showActions, setShowActions] = useState(false);
     const [showNotes, setShowNotes] = useState(false);
@@ -110,7 +113,6 @@ export const Properties = React.memo<Props>(
     const [showCaseModal, setShowCaseModal] = useState(false);
     const onCloseCaseModal = useCallback(() => setShowCaseModal(false), []);
     const onOpenCaseModal = useCallback(() => setShowCaseModal(true), []);
-    const history = useHistory();
     const currentTimeline = useSelector((state: State) =>
       timelineSelectors.selectTimeline(state, timelineId)
     );
@@ -118,8 +120,8 @@ export const Properties = React.memo<Props>(
     const onRowClick = useCallback(
       (id: string) => {
         onCloseCaseModal();
-        history.push({
-          pathname: `/${SiemPageName.case}/${id}`,
+        navigateToApp(`${APP_ID}:${SecurityPageName.case}`, {
+          path: getCaseDetailsUrl({ id }),
         });
         dispatch(
           setInsertTimeline({
@@ -129,7 +131,7 @@ export const Properties = React.memo<Props>(
           })
         );
       },
-      [onCloseCaseModal, currentTimeline, dispatch, history, timelineId, title]
+      [navigateToApp, onCloseCaseModal, currentTimeline, dispatch, timelineId, title]
     );
 
     const datePickerWidth = useMemo(
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx
index 2e12ebad2f99d..76c3a647a9439 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx
@@ -244,22 +244,24 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
     },
   };
 
-  useEffect(() => {
-    fetchAllTimeline({
-      pageInfo: {
-        pageIndex: 1,
-        pageSize,
-      },
-      search: searchTimelineValue,
-      sort: {
-        sortField: SortFieldTimeline.updated,
-        sortOrder: Direction.desc,
-      },
-      onlyUserFavorite: onlyFavorites,
-      timelineType,
-    });
+  useEffect(
+    () =>
+      fetchAllTimeline({
+        pageInfo: {
+          pageIndex: 1,
+          pageSize,
+        },
+        search: searchTimelineValue,
+        sort: {
+          sortField: SortFieldTimeline.updated,
+          sortOrder: Direction.desc,
+        },
+        onlyUserFavorite: onlyFavorites,
+        timelineType,
+      }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [onlyFavorites, pageSize, searchTimelineValue, timelineType]);
+    [onlyFavorites, pageSize, searchTimelineValue, timelineType]
+  );
 
   return (
     <EuiSelectableContainer isLoading={loading}>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx
index 2447ebf47463f..96703941f616e 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx
@@ -32,19 +32,15 @@ jest.mock('use-resize-observer/polyfilled');
 
 mockUseResizeObserver.mockImplementation(() => ({}));
 
-jest.mock('react-router-dom', () => {
-  const originalModule = jest.requireActual('react-router-dom');
-  return {
-    ...originalModule,
-    useHistory: jest.fn(),
-  };
-});
 jest.mock('../../../common/lib/kibana', () => {
   const originalModule = jest.requireActual('../../../common/lib/kibana');
   return {
     ...originalModule,
     useKibana: jest.fn().mockReturnValue({
       services: {
+        application: {
+          navigateToApp: jest.fn(),
+        },
         uiSettings: {
           get: jest.fn(),
         },
diff --git a/x-pack/plugins/security_solution/public/timelines/containers/all/index.tsx b/x-pack/plugins/security_solution/public/timelines/containers/all/index.tsx
index 19112221cbfd0..f025cf15181c3 100644
--- a/x-pack/plugins/security_solution/public/timelines/containers/all/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/containers/all/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getOr, noop } from 'lodash/fp';
+import { getOr } from 'lodash/fp';
 import memoizeOne from 'memoize-one';
 import { useCallback, useState, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
@@ -86,15 +86,14 @@ export const useGetAllTimeline = (): AllTimelinesArgs => {
   const dispatch = useDispatch();
   const apolloClient = useApolloClient();
   const [, dispatchToaster] = useStateToaster();
-  const [allTimelines, setAllTimelines] = useState<AllTimelinesArgs>({
-    fetchAllTimeline: noop,
+  const [allTimelines, setAllTimelines] = useState<Omit<AllTimelinesArgs, 'fetchAllTimeline'>>({
     loading: false,
     totalCount: 0,
     timelines: [],
   });
 
   const fetchAllTimeline = useCallback(
-    async ({ onlyUserFavorite, pageInfo, search, sort, timelineType }: AllTimelinesVariables) => {
+    ({ onlyUserFavorite, pageInfo, search, sort, timelineType }: AllTimelinesVariables) => {
       let didCancel = false;
       const abortCtrl = new AbortController();
 
@@ -139,7 +138,6 @@ export const useGetAllTimeline = (): AllTimelinesArgs => {
                 })
               );
               setAllTimelines({
-                fetchAllTimeline,
                 loading: false,
                 totalCount,
                 timelines: getAllTimeline(JSON.stringify(variables), timelines as TimelineResult[]),
@@ -154,7 +152,6 @@ export const useGetAllTimeline = (): AllTimelinesArgs => {
               dispatchToaster,
             });
             setAllTimelines({
-              fetchAllTimeline,
               loading: false,
               totalCount: 0,
               timelines: [],
@@ -168,8 +165,7 @@ export const useGetAllTimeline = (): AllTimelinesArgs => {
         abortCtrl.abort();
       };
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [apolloClient, allTimelines]
+    [apolloClient, allTimelines, dispatch, dispatchToaster]
   );
 
   useEffect(() => {
diff --git a/x-pack/plugins/security_solution/public/timelines/index.ts b/x-pack/plugins/security_solution/public/timelines/index.ts
index 5cce258b10d16..dde98e2b9edff 100644
--- a/x-pack/plugins/security_solution/public/timelines/index.ts
+++ b/x-pack/plugins/security_solution/public/timelines/index.ts
@@ -5,7 +5,7 @@
  */
 
 import { SecuritySubPluginWithStore } from '../app/types';
-import { getTimelinesRoutes } from './routes';
+import { TimelinesRoutes } from './routes';
 import { initialTimelineState, timelineReducer } from './store/timeline/reducer';
 import { TimelineState } from './store/timeline/types';
 
@@ -14,7 +14,7 @@ export class Timelines {
 
   public start(): SecuritySubPluginWithStore<'timeline', TimelineState> {
     return {
-      routes: getTimelinesRoutes(),
+      SubPluginRoutes: TimelinesRoutes,
       store: {
         initialState: { timeline: initialTimelineState },
         reducer: { timeline: timelineReducer },
diff --git a/x-pack/plugins/security_solution/public/timelines/pages/index.tsx b/x-pack/plugins/security_solution/public/timelines/pages/index.tsx
index 73494fb585b30..91f1980309cd0 100644
--- a/x-pack/plugins/security_solution/public/timelines/pages/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/pages/index.tsx
@@ -4,24 +4,25 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { isEmpty } from 'lodash/fp';
 import React from 'react';
-import { ApolloConsumer } from 'react-apollo';
-import { Switch, Route, Redirect } from 'react-router-dom';
+import { Switch, Route, useHistory } from 'react-router-dom';
 
 import { ChromeBreadcrumb } from '../../../../../../src/core/public';
 
 import { TimelineType } from '../../../common/types/timeline';
 import { TAB_TIMELINES, TAB_TEMPLATES } from '../components/open_timeline/translations';
-import { getTimelinesUrl } from '../../common/components/link_to';
 import { TimelineRouteSpyState } from '../../common/utils/route/types';
 
-import { SiemPageName } from '../../app/types';
-
 import { TimelinesPage } from './timelines_page';
 import { PAGE_TITLE } from './translations';
 import { appendSearch } from '../../common/components/link_to/helpers';
-const timelinesPagePath = `/:pageName(${SiemPageName.timelines})/:tabName(${TimelineType.default}|${TimelineType.template})`;
-const timelinesDefaultPath = `/${SiemPageName.timelines}/${TimelineType.default}`;
+import { GetUrlForApp } from '../../common/components/navigation/types';
+import { APP_ID } from '../../../common/constants';
+import { SecurityPageName } from '../../app/types';
+
+const timelinesPagePath = `/:tabName(${TimelineType.default}|${TimelineType.template})`;
+const timelinesDefaultPath = `/${TimelineType.default}`;
 
 const TabNameMappedToI18nKey: Record<string, string> = {
   [TimelineType.default]: TAB_TIMELINES,
@@ -30,12 +31,15 @@ const TabNameMappedToI18nKey: Record<string, string> = {
 
 export const getBreadcrumbs = (
   params: TimelineRouteSpyState,
-  search: string[]
+  search: string[],
+  getUrlForApp: GetUrlForApp
 ): ChromeBreadcrumb[] => {
   let breadcrumb = [
     {
       text: PAGE_TITLE,
-      href: `${getTimelinesUrl(appendSearch(search[1]))}`,
+      href: getUrlForApp(`${APP_ID}:${SecurityPageName.timelines}`, {
+        path: !isEmpty(search[0]) ? search[0] : '',
+      }),
     },
   ];
 
@@ -53,16 +57,18 @@ export const getBreadcrumbs = (
 };
 
 export const Timelines = React.memo(() => {
+  const history = useHistory();
   return (
     <Switch>
       <Route exact path={timelinesPagePath}>
-        <ApolloConsumer>{(client) => <TimelinesPage apolloClient={client} />}</ApolloConsumer>
+        <TimelinesPage />
       </Route>
       <Route
-        path={`/${SiemPageName.timelines}/`}
-        render={({ location: { search = '' } }) => (
-          <Redirect to={`${timelinesDefaultPath}${appendSearch(search)}`} />
-        )}
+        path="/"
+        render={({ location: { search = '' } }) => {
+          history.replace(`${timelinesDefaultPath}${appendSearch(search)}`);
+          return null;
+        }}
       />
     </Switch>
   );
diff --git a/x-pack/plugins/security_solution/public/timelines/pages/timelines_page.test.tsx b/x-pack/plugins/security_solution/public/timelines/pages/timelines_page.test.tsx
index 3a5e3b56e5cc4..1bd5874394df3 100644
--- a/x-pack/plugins/security_solution/public/timelines/pages/timelines_page.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/pages/timelines_page.test.tsx
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import ApolloClient from 'apollo-client';
 import { shallow, ShallowWrapper } from 'enzyme';
 import React from 'react';
 
@@ -21,7 +20,6 @@ jest.mock('../../common/lib/kibana', () => {
 });
 
 describe('TimelinesPageComponent', () => {
-  const mockAppollloClient = {} as ApolloClient<object>;
   let wrapper: ShallowWrapper;
 
   describe('If the user is authorized', () => {
@@ -37,7 +35,7 @@ describe('TimelinesPageComponent', () => {
           },
         },
       });
-      wrapper = shallow(<TimelinesPageComponent apolloClient={mockAppollloClient} />);
+      wrapper = shallow(<TimelinesPageComponent />);
     });
 
     afterAll(() => {
@@ -89,7 +87,7 @@ describe('TimelinesPageComponent', () => {
           },
         },
       });
-      wrapper = shallow(<TimelinesPageComponent apolloClient={mockAppollloClient} />);
+      wrapper = shallow(<TimelinesPageComponent />);
     });
 
     afterAll(() => {
diff --git a/x-pack/plugins/security_solution/public/timelines/pages/timelines_page.tsx b/x-pack/plugins/security_solution/public/timelines/pages/timelines_page.tsx
index 95a2e4f5fd0ee..089a928403b0b 100644
--- a/x-pack/plugins/security_solution/public/timelines/pages/timelines_page.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/pages/timelines_page.tsx
@@ -5,7 +5,6 @@
  */
 
 import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import ApolloClient from 'apollo-client';
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 
@@ -15,6 +14,7 @@ import { HeaderPage } from '../../common/components/header_page';
 import { WrapperPage } from '../../common/components/wrapper_page';
 import { useKibana } from '../../common/lib/kibana';
 import { SpyRoute } from '../../common/utils/route/spy_routes';
+import { useApolloClient } from '../../common/utils/apollo_context';
 
 import { StatefulOpenTimeline } from '../components/open_timeline';
 import { NEW_TEMPLATE_TIMELINE } from '../components/timeline/properties/translations';
@@ -22,25 +22,21 @@ import { NewTemplateTimeline } from '../components/timeline/properties/new_templ
 import { NewTimeline } from '../components/timeline/properties/helpers';
 
 import * as i18n from './translations';
+import { SecurityPageName } from '../../app/types';
 
 const TimelinesContainer = styled.div`
   width: 100%;
 `;
 
-interface TimelinesProps<TCache = object> {
-  apolloClient: ApolloClient<TCache>;
-}
-
-type OwnProps = TimelinesProps;
-
 export const DEFAULT_SEARCH_RESULTS_PER_PAGE = 10;
 
-export const TimelinesPageComponent: React.FC<OwnProps> = ({ apolloClient }) => {
+export const TimelinesPageComponent: React.FC = () => {
   const [importDataModalToggle, setImportDataModalToggle] = useState<boolean>(false);
   const onImportTimelineBtnClick = useCallback(() => {
     setImportDataModalToggle(true);
   }, [setImportDataModalToggle]);
 
+  const apolloClient = useApolloClient();
   const uiCapabilities = useKibana().services.application.capabilities;
   const capabilitiesCanUserCRUD: boolean = !!uiCapabilities.siem.crud;
 
@@ -87,7 +83,7 @@ export const TimelinesPageComponent: React.FC<OwnProps> = ({ apolloClient }) =>
 
         <TimelinesContainer>
           <StatefulOpenTimeline
-            apolloClient={apolloClient}
+            apolloClient={apolloClient!}
             defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
             isModal={false}
             importDataModalToggle={importDataModalToggle && capabilitiesCanUserCRUD}
@@ -98,7 +94,7 @@ export const TimelinesPageComponent: React.FC<OwnProps> = ({ apolloClient }) =>
         </TimelinesContainer>
       </WrapperPage>
 
-      <SpyRoute />
+      <SpyRoute pageName={SecurityPageName.timelines} />
     </>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/timelines/routes.tsx b/x-pack/plugins/security_solution/public/timelines/routes.tsx
index 50b8e1b8a7118..4d1d5f603d217 100644
--- a/x-pack/plugins/security_solution/public/timelines/routes.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/routes.tsx
@@ -5,11 +5,14 @@
  */
 
 import React from 'react';
-import { Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 
 import { Timelines } from './pages';
-import { SiemPageName } from '../app/types';
+import { NotFoundPage } from '../app/404';
 
-export const getTimelinesRoutes = () => [
-  <Route path={`/:pageName(${SiemPageName.timelines})`} render={() => <Timelines />} />,
-];
+export const TimelinesRoutes = () => (
+  <Switch>
+    <Route path="/" render={() => <Timelines />} />
+    <Route render={() => <NotFoundPage />} />
+  </Switch>
+);
diff --git a/x-pack/test/security_solution_endpoint/config.ts b/x-pack/test/security_solution_endpoint/config.ts
index b6c8e52386cb9..f02a6bdcd51ed 100644
--- a/x-pack/test/security_solution_endpoint/config.ts
+++ b/x-pack/test/security_solution_endpoint/config.ts
@@ -22,8 +22,8 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
     services,
     apps: {
       ...xpackFunctionalConfig.get('apps'),
-      endpoint: {
-        pathname: '/app/endpoint',
+      ['securitySolutionManagement']: {
+        pathname: '/app/security/management',
       },
     },
     kbnTestServer: {
diff --git a/x-pack/test/security_solution_endpoint/page_objects/endpoint_page.ts b/x-pack/test/security_solution_endpoint/page_objects/endpoint_page.ts
index 830c5ec5a42d1..7339903d74a0b 100644
--- a/x-pack/test/security_solution_endpoint/page_objects/endpoint_page.ts
+++ b/x-pack/test/security_solution_endpoint/page_objects/endpoint_page.ts
@@ -17,9 +17,10 @@ export function EndpointPageProvider({ getService, getPageObjects }: FtrProvider
      * Navigate to the Endpoints list page
      */
     async navigateToEndpointList(searchParams?: string) {
-      await pageObjects.common.navigateToApp('securitySolution', {
-        hash: `/management/endpoints${searchParams ? `?${searchParams}` : ''}`,
-      });
+      await pageObjects.common.navigateToUrlWithBrowserHistory(
+        'securitySolutionManagement',
+        `/endpoints${searchParams ? `?${searchParams}` : ''}`
+      );
       await pageObjects.header.waitUntilLoadingHasFinished();
     },
 
diff --git a/x-pack/test/security_solution_endpoint/page_objects/policy_page.ts b/x-pack/test/security_solution_endpoint/page_objects/policy_page.ts
index 3ffd7eb032c22..d07c4e70f2687 100644
--- a/x-pack/test/security_solution_endpoint/page_objects/policy_page.ts
+++ b/x-pack/test/security_solution_endpoint/page_objects/policy_page.ts
@@ -15,7 +15,10 @@ export function EndpointPolicyPageProvider({ getService, getPageObjects }: FtrPr
      * Navigates to the Endpoint Policy List
      */
     async navigateToPolicyList() {
-      await pageObjects.common.navigateToApp('securitySolution', { hash: '/management/policy' });
+      await pageObjects.common.navigateToUrlWithBrowserHistory(
+        'securitySolutionManagement',
+        '/policy'
+      );
       await pageObjects.header.waitUntilLoadingHasFinished();
     },
 
@@ -51,9 +54,10 @@ export function EndpointPolicyPageProvider({ getService, getPageObjects }: FtrPr
      * @param policyId
      */
     async navigateToPolicyDetails(policyId: string) {
-      await pageObjects.common.navigateToApp('securitySolution', {
-        hash: `/management/policy/${policyId}`,
-      });
+      await pageObjects.common.navigateToUrlWithBrowserHistory(
+        'securitySolutionManagement',
+        `/policy/${policyId}`
+      );
       await pageObjects.header.waitUntilLoadingHasFinished();
     },
 

From cc4c1729d14dc4cb9409b53b4ceeab297a5a42f8 Mon Sep 17 00:00:00 2001
From: patrykkopycinski <patryk.kopycinski@elastic.co>
Date: Sat, 20 Jun 2020 21:05:09 +0200
Subject: [PATCH 63/63] Bump jest related packages (#58095)

---
 package.json                                  |   15 +-
 packages/eslint-config-kibana/package.json    |    2 +-
 packages/kbn-dev-utils/package.json           |    2 +-
 .../serializers/absolute_path_serializer.ts   |    2 +-
 packages/kbn-optimizer/package.json           |    4 +-
 .../basic_optimization.test.ts                |    2 +-
 packages/kbn-pm/dist/index.js                 |  123 +-
 packages/kbn-pm/package.json                  |    2 +-
 .../kbn-pm/src/commands/bootstrap.test.ts     |    8 +-
 .../strip_ansi_snapshot_serializer.ts         |    6 +-
 .../__snapshots__/projects_tree.test.ts.snap  |   12 +-
 .../utils/link_project_executables.test.ts    |    6 +-
 packages/kbn-spec-to-console/package.json     |    2 +-
 packages/kbn-storybook/package.json           |    2 +-
 packages/kbn-test/package.json                |    2 +-
 .../add_messages_to_report.test.ts            |    2 +-
 .../form/text_input/text_input.test.js        |   20 +-
 packages/kbn-ui-shared-deps/package.json      |    2 +-
 .../application_service.test.mocks.ts         |   12 +-
 .../application_service.test.tsx              |   72 +-
 .../collapsible_nav.test.tsx.snap             |   32 +-
 .../header/__snapshots__/header.test.tsx.snap |   18 +-
 .../core_app/errors/url_overflow.test.ts      |   20 +-
 .../fatal_errors_screen.test.tsx.snap         |    2 +-
 .../fatal_errors/fatal_errors_screen.test.tsx |  179 +-
 .../cluster_client.test.mocks.ts              |   13 +-
 .../version_check/ensure_es_version.test.ts   |    2 +-
 src/core/server/http/http_config.test.ts      |   12 +-
 src/core/server/http/http_tools.test.ts       |   13 +-
 .../__snapshots__/pattern_layout.test.ts.snap |   12 +-
 .../import/validate_references.test.ts        |  442 ++---
 src/core/server/status/test_utils.ts          |    2 +-
 .../create_or_upgrade.test.ts                 |    3 +-
 .../strip_ansi_snapshot_serializer.ts         |    6 +-
 src/dev/jest/cli.js                           |    4 +-
 src/dev/jest/config.js                        |    1 +
 src/dev/jest/setup/react_testing_library.js   |    2 +-
 .../utils/streams/filter_stream.test.ts       |   64 +-
 .../field/__snapshots__/field.test.tsx.snap   |   44 +-
 .../form/__snapshots__/form.test.tsx.snap     |   16 +-
 .../dashboard_listing.test.js.snap            |   20 +-
 .../embeddables/embeddable_renderer.test.tsx  |    1 -
 .../instruction_set.test.js.snap              |   20 +-
 .../saved_objects_installer.test.js.snap      |   12 +-
 .../__snapshots__/empty_state.test.tsx.snap   |    8 +-
 .../__snapshots__/time_field.test.tsx.snap    |   20 +-
 .../__snapshots__/call_outs.test.tsx.snap     |    4 +-
 .../bytes/__snapshots__/bytes.test.tsx.snap   |    4 +-
 .../date/__snapshots__/date.test.tsx.snap     |    4 +-
 .../__snapshots__/date_nanos.test.tsx.snap    |    4 +-
 .../number/__snapshots__/number.test.tsx.snap |    4 +-
 .../__snapshots__/percent.test.tsx.snap       |    4 +-
 .../url/__snapshots__/url.test.tsx.snap       |   32 +-
 .../warning_call_out.test.tsx.snap            |    8 +-
 .../__snapshots__/flyout.test.tsx.snap        |   12 +-
 .../saved_objects_table.test.mocks.ts         |   22 +-
 .../url_panel_content.test.tsx.snap           |   32 +-
 .../opt_in_message.test.tsx.snap              |    4 +-
 .../opted_in_notice_banner.test.tsx.snap      |    8 +-
 .../public/services/telemetry_sender.test.ts  |   22 +-
 ...telemetry_management_section.test.tsx.snap |    8 +-
 .../vislib/components/legend/legend.test.tsx  |   12 +-
 .../public/wizard/new_vis_modal.test.tsx      |   15 +-
 src/test_utils/public/testbed/types.ts        |   12 +-
 tsconfig.json                                 |    4 +-
 x-pack/dev-tools/jest/create_jest_config.js   |    2 +
 x-pack/dev-tools/jest/index.js                |    4 +-
 x-pack/dev-tools/jest/setup/setup_test.js     |    1 +
 x-pack/package.json                           |   21 +-
 .../app/APMIndicesPermission/index.test.tsx   |   23 +-
 .../__test__/__snapshots__/List.test.js.snap  |    4 +-
 .../__test__/ServiceOverview.test.tsx         |    4 +-
 .../app/Settings/ApmIndices/index.test.tsx    |    5 +-
 .../CustomLinkFlyout/LinkPreview.test.tsx     |    4 +-
 .../CustomizeUI/CustomLink/index.test.tsx     |   31 +-
 .../app/TraceLink/__test__/TraceLink.test.tsx |   18 +-
 .../StickyProperties.test.js.snap             |   16 +-
 .../__test__/TransactionActionMenu.test.tsx   |    7 +-
 .../__snapshots__/CustomPlot.test.js.snap     |   16 +-
 .../plugins/apm/public/utils/testHelpers.tsx  |    1 -
 .../shape_picker.stories.storyshot            |    4 +-
 .../shape_picker_popover.stories.storyshot    |    4 +-
 .../shape_preview.stories.storyshot           |    4 +-
 .../__snapshots__/shareable.test.tsx.snap     |   30 +-
 .../__tests__/__snapshots__/app.test.tsx.snap |    6 +-
 .../mocks/breadcrumbs.mock.ts                 |   12 +-
 .../mocks/track_ui_metric.mock.ts             |   18 +-
 .../flyout_edit_drilldown/menu_item.test.tsx  |    1 -
 .../services/search_service.test.mocks.ts     |   12 +-
 .../extend_index_management.test.js.snap      |    4 +-
 .../template_clone.test.tsx                   |   48 +-
 .../template_create.test.tsx                  |   48 +-
 .../template_edit.test.tsx                    |   48 +-
 .../datatypes/text_datatype.test.tsx          |    8 +-
 .../client_integration/edit_field.test.tsx    |    2 +-
 .../helpers/mappings_editor.helpers.tsx       |   74 +-
 .../load_mappings_provider.test.tsx           |   40 +-
 .../ingest_pipelines_clone.test.tsx           |   28 +-
 .../ingest_pipelines_create.test.tsx          |   28 +-
 .../ingest_pipelines_edit.test.tsx            |   28 +-
 .../pipeline_processors_editor.helpers.tsx    |   70 +-
 .../__jest__/upload_license.test.tsx          |   10 +-
 .../dynamic_size_property.test.tsx.snap       |    4 +-
 .../__snapshots__/view.test.js.snap           |    2 +-
 .../rule_editor_flyout.test.js.snap           |   12 +-
 .../rule_action_panel.test.js.snap            |   12 +-
 .../validate_job_view.test.js.snap            |    8 +-
 .../__snapshots__/overrides.test.js.snap      |    4 +-
 .../explorer/explorer_swimlane.test.tsx       |   11 +
 .../list/__snapshots__/header.test.js.snap    |    4 +-
 .../logs/__snapshots__/logs.test.js.snap      |   16 +-
 .../logs/__snapshots__/reason.test.js.snap    |   32 +-
 .../flyout/__snapshots__/flyout.test.js.snap  |  104 +-
 .../plugins/monitoring/server/config.test.ts  |   12 +-
 .../remote_cluster_form.test.js.snap          |   16 +-
 .../access_agreement_page.test.tsx            |    4 -
 .../components/login_form/login_form.test.tsx |    4 -
 .../authentication/login/login_page.test.tsx  |    4 -
 .../authentication/logout/logout_app.test.ts  |    5 -
 .../api_keys_grid_page.test.tsx.snap          |    4 +-
 .../elasticsearch_privileges.test.tsx.snap    |    8 +-
 .../nav_control_component.test.tsx            |    8 +-
 .../public/session/session_expired.test.ts    |   23 +-
 .../load_empty_prompt.test.tsx                |   16 +-
 .../__snapshots__/index.test.tsx.snap         |    2 +-
 .../detection_engine/rules/all/index.test.tsx |   16 +-
 .../rules/create/index.test.tsx               |   16 +-
 .../detection_engine/rules/index.test.tsx     |   16 +-
 .../components/all_cases_modal/index.test.tsx |   16 +-
 .../components/case_view/actions.test.tsx     |   16 +-
 .../configure_cases/button.test.tsx           |   16 +-
 .../use_push_to_service/index.test.tsx        |   16 +-
 .../common/components/charts/common.test.tsx  |    4 +-
 .../__snapshots__/index.test.tsx.snap         |    4 +-
 .../components/header_page/index.test.tsx     |   16 +-
 .../__snapshots__/anomaly_score.test.tsx.snap |   26 +-
 .../popover_description.test.tsx.snap         |    4 +-
 .../upgrade_contents.test.tsx.snap            |    4 +-
 .../components/navigation/index.test.tsx      |   16 +-
 .../navigation/tab_navigation/index.test.tsx  |   16 +-
 .../super_date_picker/index.test.tsx          |   38 -
 .../common/components/top_n/index.test.tsx    |   16 +-
 .../common/components/top_n/top_n.test.tsx    |   16 +-
 .../flow_target_select.test.tsx.snap          |   16 +-
 .../source_destination/index.test.tsx         |   18 +-
 .../__snapshots__/index.test.tsx.snap         |   16 +-
 .../__snapshots__/index.test.tsx.snap         |   12 +-
 .../components/fields_browser/index.test.tsx  |    2 +-
 .../header_with_close_button/index.test.tsx   |   42 +-
 .../__snapshots__/new_note.test.tsx.snap      |    8 +-
 .../body/column_headers/header/index.test.tsx |    2 +-
 .../components/timeline/body/index.test.tsx   |    2 +-
 .../system/generic_file_details.test.tsx      |   18 +-
 .../components/timeline/index.test.tsx        |   12 +-
 .../timeline/properties/index.test.tsx        |   36 +-
 .../__jest__/client_integration/home.test.ts  |    4 +-
 .../space_identifier.test.tsx.snap            |    4 +-
 .../enabled_features.test.tsx.snap            |    4 +-
 .../nav_control_popover.test.tsx.snap         |    4 +-
 .../public/app/hooks/use_index_data.test.tsx  |    1 -
 .../step_create/step_create_form.test.tsx     |    1 -
 .../step_define/step_define_form.test.tsx     |    1 -
 .../step_define/step_define_summary.test.tsx  |    1 -
 .../components/health_check.test.tsx          |    1 -
 .../lib/check_action_type_enabled.test.tsx    |  106 +-
 .../action_wizard/action_wizard.test.tsx      |    1 -
 ...onnected_flyout_manage_drilldowns.test.tsx |    1 -
 .../list_manage_drilldowns.test.tsx           |    1 -
 .../__snapshots__/checkup_tab.test.tsx.snap   |   16 +-
 .../lib/reindexing/reindex_actions.test.ts    |    6 +-
 .../__snapshots__/ml_flyout.test.tsx.snap     |    4 +-
 .../__snapshots__/doc_link_body.test.tsx.snap |    4 +-
 .../__snapshots__/ping_list.test.tsx.snap     |    4 +-
 .../__tests__/location_availability.test.tsx  |    5 +-
 .../data_or_index_missing.test.tsx.snap       |    4 +-
 .../__snapshots__/empty_state.test.tsx.snap   |   12 +-
 .../__tests__/filter_popover.test.tsx         |    2 +-
 .../watch_create_threshold.test.tsx           |   60 +-
 .../client_integration/watch_edit.test.ts     |   28 +-
 x-pack/test_utils/jest/config.js              |    2 +
 x-pack/test_utils/testbed/types.ts            |   14 +-
 x-pack/tsconfig.json                          |    4 +-
 x-pack/typings/jest.d.ts                      |   20 -
 yarn.lock                                     | 1635 ++++++++++-------
 184 files changed, 2721 insertions(+), 2165 deletions(-)

diff --git a/package.json b/package.json
index 06dfb4cdfe387..3eaa1fb05e906 100644
--- a/package.json
+++ b/package.json
@@ -259,7 +259,7 @@
     "reselect": "^4.0.0",
     "resize-observer-polyfill": "^1.5.0",
     "rison-node": "1.0.2",
-    "rxjs": "^6.5.3",
+    "rxjs": "^6.5.5",
     "script-loader": "0.7.2",
     "seedrandom": "^3.0.5",
     "semver": "^5.5.0",
@@ -346,7 +346,7 @@
     "@types/history": "^4.7.3",
     "@types/hoek": "^4.1.3",
     "@types/inert": "^5.1.2",
-    "@types/jest": "24.0.19",
+    "@types/jest": "^25.2.3",
     "@types/joi": "^13.4.2",
     "@types/jquery": "^3.3.31",
     "@types/js-yaml": "^3.11.1",
@@ -391,6 +391,7 @@
     "@types/supertest-as-promised": "^2.0.38",
     "@types/tar": "^4.0.3",
     "@types/testing-library__dom": "^6.10.0",
+    "@types/testing-library__jest-dom": "^5.7.0",
     "@types/testing-library__react": "^9.1.2",
     "@types/testing-library__react-hooks": "^3.1.0",
     "@types/type-detect": "^4.0.1",
@@ -403,7 +404,7 @@
     "archiver": "^3.1.1",
     "axe-core": "^3.4.1",
     "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
+    "babel-jest": "^25.5.1",
     "babel-plugin-istanbul": "^6.0.0",
     "backport": "5.4.1",
     "chai": "3.5.0",
@@ -423,7 +424,7 @@
     "eslint-plugin-ban": "^1.4.0",
     "eslint-plugin-cypress": "^2.8.1",
     "eslint-plugin-import": "^2.19.1",
-    "eslint-plugin-jest": "^23.3.0",
+    "eslint-plugin-jest": "^23.10.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-mocha": "^6.2.2",
     "eslint-plugin-no-unsanitized": "^3.0.2",
@@ -452,8 +453,10 @@
     "intl-messageformat-parser": "^1.4.0",
     "is-path-inside": "^2.1.0",
     "istanbul-instrumenter-loader": "3.0.1",
-    "jest": "^24.9.0",
-    "jest-cli": "^24.9.0",
+    "jest": "^25.5.4",
+    "jest-environment-jsdom-thirteen": "^1.0.1",
+    "jest-circus": "^25.5.4",
+    "jest-cli": "^25.5.4",
     "jest-raw-loader": "^1.0.1",
     "jimp": "^0.9.6",
     "json5": "^1.0.1",
diff --git a/packages/eslint-config-kibana/package.json b/packages/eslint-config-kibana/package.json
index 9bc8ed3019e54..e14423d681a4e 100644
--- a/packages/eslint-config-kibana/package.json
+++ b/packages/eslint-config-kibana/package.json
@@ -23,7 +23,7 @@
     "eslint-plugin-ban": "^1.4.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-import": "^2.19.1",
-    "eslint-plugin-jest": "^23.3.0",
+    "eslint-plugin-jest": "^23.10.0",
     "eslint-plugin-mocha": "^6.2.2",
     "eslint-plugin-no-unsanitized": "^3.0.2",
     "eslint-plugin-prefer-object-spread": "^1.2.1",
diff --git a/packages/kbn-dev-utils/package.json b/packages/kbn-dev-utils/package.json
index dedc2707f5b5b..d95cd1d404a1b 100644
--- a/packages/kbn-dev-utils/package.json
+++ b/packages/kbn-dev-utils/package.json
@@ -18,7 +18,7 @@
     "getopts": "^2.2.5",
     "load-json-file": "^6.2.0",
     "moment": "^2.24.0",
-    "rxjs": "^6.5.3",
+    "rxjs": "^6.5.5",
     "tree-kill": "^1.2.2",
     "tslib": "^2.0.0"
   },
diff --git a/packages/kbn-dev-utils/src/serializers/absolute_path_serializer.ts b/packages/kbn-dev-utils/src/serializers/absolute_path_serializer.ts
index 9edc63dd7d842..af55622c76198 100644
--- a/packages/kbn-dev-utils/src/serializers/absolute_path_serializer.ts
+++ b/packages/kbn-dev-utils/src/serializers/absolute_path_serializer.ts
@@ -21,7 +21,7 @@ import { REPO_ROOT } from '../repo_root';
 
 export function createAbsolutePathSerializer(rootPath: string = REPO_ROOT) {
   return {
-    print: (value: string) => value.replace(rootPath, '<absolute path>').replace(/\\/g, '/'),
+    serialize: (value: string) => value.replace(rootPath, '<absolute path>').replace(/\\/g, '/'),
     test: (value: any) => typeof value === 'string' && value.startsWith(rootPath),
   };
 }
diff --git a/packages/kbn-optimizer/package.json b/packages/kbn-optimizer/package.json
index c7bf1dd60985d..c11bd1b646933 100644
--- a/packages/kbn-optimizer/package.json
+++ b/packages/kbn-optimizer/package.json
@@ -31,7 +31,7 @@
     "execa": "^4.0.2",
     "file-loader": "^4.2.0",
     "istanbul-instrumenter-loader": "^3.0.1",
-    "jest-diff": "^25.1.0",
+    "jest-diff": "^25.5.0",
     "json-stable-stringify": "^1.0.1",
     "loader-utils": "^1.2.3",
     "node-sass": "^4.13.0",
@@ -39,7 +39,7 @@
     "postcss-loader": "^3.0.0",
     "raw-loader": "^3.1.0",
     "resolve-url-loader": "^3.1.1",
-    "rxjs": "^6.5.3",
+    "rxjs": "^6.5.5",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
     "terser-webpack-plugin": "^2.1.2",
diff --git a/packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts b/packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts
index 4de1eedd5fc7b..7966a522d6809 100644
--- a/packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts
+++ b/packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts
@@ -33,7 +33,7 @@ const MOCK_REPO_SRC = Path.resolve(__dirname, '../__fixtures__/mock_repo');
 const MOCK_REPO_DIR = Path.resolve(TMP_DIR, 'mock_repo');
 
 expect.addSnapshotSerializer({
-  print: (value: string) => value.split(REPO_ROOT).join('<absolute path>').replace(/\\/g, '/'),
+  serialize: (value: string) => value.split(REPO_ROOT).join('<absolute path>').replace(/\\/g, '/'),
   test: (value: any) => typeof value === 'string' && value.includes(REPO_ROOT),
 });
 
diff --git a/packages/kbn-pm/dist/index.js b/packages/kbn-pm/dist/index.js
index f6d008c9bf9be..69611ed3f5c5e 100644
--- a/packages/kbn-pm/dist/index.js
+++ b/packages/kbn-pm/dist/index.js
@@ -986,10 +986,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _internal_util_pipe__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(24);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "pipe", function() { return _internal_util_pipe__WEBPACK_IMPORTED_MODULE_17__["pipe"]; });
 
-/* harmony import */ var _internal_util_noop__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(25);
+/* harmony import */ var _internal_util_noop__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(60);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "noop", function() { return _internal_util_noop__WEBPACK_IMPORTED_MODULE_18__["noop"]; });
 
-/* harmony import */ var _internal_util_identity__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(60);
+/* harmony import */ var _internal_util_identity__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(25);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "identity", function() { return _internal_util_identity__WEBPACK_IMPORTED_MODULE_19__["identity"]; });
 
 /* harmony import */ var _internal_util_isObservable__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(61);
@@ -2163,8 +2163,8 @@ var observable = /*@__PURE__*/ (function () { return typeof Symbol === 'function
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "pipe", function() { return pipe; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "pipeFromArray", function() { return pipeFromArray; });
-/* harmony import */ var _noop__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(25);
-/** PURE_IMPORTS_START _noop PURE_IMPORTS_END */
+/* harmony import */ var _identity__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(25);
+/** PURE_IMPORTS_START _identity PURE_IMPORTS_END */
 
 function pipe() {
     var fns = [];
@@ -2174,8 +2174,8 @@ function pipe() {
     return pipeFromArray(fns);
 }
 function pipeFromArray(fns) {
-    if (!fns) {
-        return _noop__WEBPACK_IMPORTED_MODULE_0__["noop"];
+    if (fns.length === 0) {
+        return _identity__WEBPACK_IMPORTED_MODULE_0__["identity"];
     }
     if (fns.length === 1) {
         return fns[0];
@@ -2193,10 +2193,12 @@ function pipeFromArray(fns) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "noop", function() { return noop; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "identity", function() { return identity; });
 /** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function noop() { }
-//# sourceMappingURL=noop.js.map
+function identity(x) {
+    return x;
+}
+//# sourceMappingURL=identity.js.map
 
 
 /***/ }),
@@ -3848,26 +3850,34 @@ var AsapAction = /*@__PURE__*/ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Immediate", function() { return Immediate; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TestTools", function() { return TestTools; });
 /** PURE_IMPORTS_START  PURE_IMPORTS_END */
 var nextHandle = 1;
-var tasksByHandle = {};
-function runIfPresent(handle) {
-    var cb = tasksByHandle[handle];
-    if (cb) {
-        cb();
+var RESOLVED = /*@__PURE__*/ (function () { return /*@__PURE__*/ Promise.resolve(); })();
+var activeHandles = {};
+function findAndClearHandle(handle) {
+    if (handle in activeHandles) {
+        delete activeHandles[handle];
+        return true;
     }
+    return false;
 }
 var Immediate = {
     setImmediate: function (cb) {
         var handle = nextHandle++;
-        tasksByHandle[handle] = cb;
-        Promise.resolve().then(function () { return runIfPresent(handle); });
+        activeHandles[handle] = true;
+        RESOLVED.then(function () { return findAndClearHandle(handle) && cb(); });
         return handle;
     },
     clearImmediate: function (handle) {
-        delete tasksByHandle[handle];
+        findAndClearHandle(handle);
     },
 };
+var TestTools = {
+    pending: function () {
+        return Object.keys(activeHandles).length;
+    }
+};
 //# sourceMappingURL=Immediate.js.map
 
 
@@ -4169,12 +4179,10 @@ var VirtualAction = /*@__PURE__*/ (function (_super) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "identity", function() { return identity; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "noop", function() { return noop; });
 /** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function identity(x) {
-    return x;
-}
-//# sourceMappingURL=identity.js.map
+function noop() { }
+//# sourceMappingURL=noop.js.map
 
 
 /***/ }),
@@ -4728,17 +4736,17 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-function subscribeToResult(outerSubscriber, result, outerValue, outerIndex, destination) {
-    if (destination === void 0) {
-        destination = new _InnerSubscriber__WEBPACK_IMPORTED_MODULE_0__["InnerSubscriber"](outerSubscriber, outerValue, outerIndex);
+function subscribeToResult(outerSubscriber, result, outerValue, outerIndex, innerSubscriber) {
+    if (innerSubscriber === void 0) {
+        innerSubscriber = new _InnerSubscriber__WEBPACK_IMPORTED_MODULE_0__["InnerSubscriber"](outerSubscriber, outerValue, outerIndex);
     }
-    if (destination.closed) {
+    if (innerSubscriber.closed) {
         return undefined;
     }
     if (result instanceof _Observable__WEBPACK_IMPORTED_MODULE_2__["Observable"]) {
-        return result.subscribe(destination);
+        return result.subscribe(innerSubscriber);
     }
-    return Object(_subscribeTo__WEBPACK_IMPORTED_MODULE_1__["subscribeTo"])(result)(destination);
+    return Object(_subscribeTo__WEBPACK_IMPORTED_MODULE_1__["subscribeTo"])(result)(innerSubscriber);
 }
 //# sourceMappingURL=subscribeToResult.js.map
 
@@ -5010,7 +5018,7 @@ function concatAll() {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "mergeAll", function() { return mergeAll; });
 /* harmony import */ var _mergeMap__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(82);
-/* harmony import */ var _util_identity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(60);
+/* harmony import */ var _util_identity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(25);
 /** PURE_IMPORTS_START _mergeMap,_util_identity PURE_IMPORTS_END */
 
 
@@ -5108,10 +5116,13 @@ var MergeMapSubscriber = /*@__PURE__*/ (function (_super) {
         this._innerSub(result, value, index);
     };
     MergeMapSubscriber.prototype._innerSub = function (ish, value, index) {
-        var innerSubscriber = new _InnerSubscriber__WEBPACK_IMPORTED_MODULE_3__["InnerSubscriber"](this, undefined, undefined);
+        var innerSubscriber = new _InnerSubscriber__WEBPACK_IMPORTED_MODULE_3__["InnerSubscriber"](this, value, index);
         var destination = this.destination;
         destination.add(innerSubscriber);
-        Object(_util_subscribeToResult__WEBPACK_IMPORTED_MODULE_1__["subscribeToResult"])(this, ish, value, index, innerSubscriber);
+        var innerSubscription = Object(_util_subscribeToResult__WEBPACK_IMPORTED_MODULE_1__["subscribeToResult"])(this, ish, undefined, undefined, innerSubscriber);
+        if (innerSubscription !== innerSubscriber) {
+            destination.add(innerSubscription);
+        }
     };
     MergeMapSubscriber.prototype._complete = function () {
         this.hasCompleted = true;
@@ -5607,7 +5618,7 @@ function fromEventPattern(addHandler, removeHandler, resultSelector) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "generate", function() { return generate; });
 /* harmony import */ var _Observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
-/* harmony import */ var _util_identity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(60);
+/* harmony import */ var _util_identity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(25);
 /* harmony import */ var _util_isScheduler__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(45);
 /** PURE_IMPORTS_START _Observable,_util_identity,_util_isScheduler PURE_IMPORTS_END */
 
@@ -5866,7 +5877,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "NEVER", function() { return NEVER; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "never", function() { return never; });
 /* harmony import */ var _Observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
-/* harmony import */ var _util_noop__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(25);
+/* harmony import */ var _util_noop__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(60);
 /** PURE_IMPORTS_START _Observable,_util_noop PURE_IMPORTS_END */
 
 
@@ -51184,7 +51195,10 @@ var CatchSubscriber = /*@__PURE__*/ (function (_super) {
             this._unsubscribeAndRecycle();
             var innerSubscriber = new _InnerSubscriber__WEBPACK_IMPORTED_MODULE_2__["InnerSubscriber"](this, undefined, undefined);
             this.add(innerSubscriber);
-            Object(_util_subscribeToResult__WEBPACK_IMPORTED_MODULE_3__["subscribeToResult"])(this, result, undefined, undefined, innerSubscriber);
+            var innerSubscription = Object(_util_subscribeToResult__WEBPACK_IMPORTED_MODULE_3__["subscribeToResult"])(this, result, undefined, undefined, innerSubscriber);
+            if (innerSubscription !== innerSubscriber) {
+                this.add(innerSubscription);
+            }
         }
     };
     return CatchSubscriber;
@@ -52408,10 +52422,13 @@ var ExhaustMapSubscriber = /*@__PURE__*/ (function (_super) {
         this._innerSub(result, value, index);
     };
     ExhaustMapSubscriber.prototype._innerSub = function (result, value, index) {
-        var innerSubscriber = new _InnerSubscriber__WEBPACK_IMPORTED_MODULE_2__["InnerSubscriber"](this, undefined, undefined);
+        var innerSubscriber = new _InnerSubscriber__WEBPACK_IMPORTED_MODULE_2__["InnerSubscriber"](this, value, index);
         var destination = this.destination;
         destination.add(innerSubscriber);
-        Object(_util_subscribeToResult__WEBPACK_IMPORTED_MODULE_3__["subscribeToResult"])(this, result, value, index, innerSubscriber);
+        var innerSubscription = Object(_util_subscribeToResult__WEBPACK_IMPORTED_MODULE_3__["subscribeToResult"])(this, result, undefined, undefined, innerSubscriber);
+        if (innerSubscription !== innerSubscriber) {
+            destination.add(innerSubscription);
+        }
     };
     ExhaustMapSubscriber.prototype._complete = function () {
         this.hasCompleted = true;
@@ -52696,7 +52713,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _take__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(419);
 /* harmony import */ var _defaultIfEmpty__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(409);
 /* harmony import */ var _throwIfEmpty__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(418);
-/* harmony import */ var _util_identity__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(60);
+/* harmony import */ var _util_identity__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(25);
 /** PURE_IMPORTS_START _util_EmptyError,_filter,_take,_defaultIfEmpty,_throwIfEmpty,_util_identity PURE_IMPORTS_END */
 
 
@@ -52804,7 +52821,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _takeLast__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(432);
 /* harmony import */ var _throwIfEmpty__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(418);
 /* harmony import */ var _defaultIfEmpty__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(409);
-/* harmony import */ var _util_identity__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(60);
+/* harmony import */ var _util_identity__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(25);
 /** PURE_IMPORTS_START _util_EmptyError,_filter,_takeLast,_throwIfEmpty,_defaultIfEmpty,_util_identity PURE_IMPORTS_END */
 
 
@@ -53230,10 +53247,13 @@ var MergeScanSubscriber = /*@__PURE__*/ (function (_super) {
         }
     };
     MergeScanSubscriber.prototype._innerSub = function (ish, value, index) {
-        var innerSubscriber = new _InnerSubscriber__WEBPACK_IMPORTED_MODULE_3__["InnerSubscriber"](this, undefined, undefined);
+        var innerSubscriber = new _InnerSubscriber__WEBPACK_IMPORTED_MODULE_3__["InnerSubscriber"](this, value, index);
         var destination = this.destination;
         destination.add(innerSubscriber);
-        Object(_util_subscribeToResult__WEBPACK_IMPORTED_MODULE_1__["subscribeToResult"])(this, ish, value, index, innerSubscriber);
+        var innerSubscription = Object(_util_subscribeToResult__WEBPACK_IMPORTED_MODULE_1__["subscribeToResult"])(this, ish, undefined, undefined, innerSubscriber);
+        if (innerSubscription !== innerSubscriber) {
+            destination.add(innerSubscription);
+        }
     };
     MergeScanSubscriber.prototype._complete = function () {
         this.hasCompleted = true;
@@ -53420,7 +53440,10 @@ var OnErrorResumeNextSubscriber = /*@__PURE__*/ (function (_super) {
             var innerSubscriber = new _InnerSubscriber__WEBPACK_IMPORTED_MODULE_4__["InnerSubscriber"](this, undefined, undefined);
             var destination = this.destination;
             destination.add(innerSubscriber);
-            Object(_util_subscribeToResult__WEBPACK_IMPORTED_MODULE_5__["subscribeToResult"])(this, next, undefined, undefined, innerSubscriber);
+            var innerSubscription = Object(_util_subscribeToResult__WEBPACK_IMPORTED_MODULE_5__["subscribeToResult"])(this, next, undefined, undefined, innerSubscriber);
+            if (innerSubscription !== innerSubscriber) {
+                destination.add(innerSubscription);
+            }
         }
         else {
             this.destination.complete();
@@ -54258,6 +54281,7 @@ function shareReplayOperator(_a) {
                 },
                 complete: function () {
                     isComplete = true;
+                    subscription = undefined;
                     subject.complete();
                 },
             });
@@ -54497,7 +54521,11 @@ var SkipUntilSubscriber = /*@__PURE__*/ (function (_super) {
         var innerSubscriber = new _InnerSubscriber__WEBPACK_IMPORTED_MODULE_2__["InnerSubscriber"](_this, undefined, undefined);
         _this.add(innerSubscriber);
         _this.innerSubscription = innerSubscriber;
-        Object(_util_subscribeToResult__WEBPACK_IMPORTED_MODULE_3__["subscribeToResult"])(_this, notifier, undefined, undefined, innerSubscriber);
+        var innerSubscription = Object(_util_subscribeToResult__WEBPACK_IMPORTED_MODULE_3__["subscribeToResult"])(_this, notifier, undefined, undefined, innerSubscriber);
+        if (innerSubscription !== innerSubscriber) {
+            _this.add(innerSubscription);
+            _this.innerSubscription = innerSubscription;
+        }
         return _this;
     }
     SkipUntilSubscriber.prototype._next = function (value) {
@@ -54706,7 +54734,7 @@ var SubscribeOnObservable = /*@__PURE__*/ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "switchAll", function() { return switchAll; });
 /* harmony import */ var _switchMap__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(470);
-/* harmony import */ var _util_identity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(60);
+/* harmony import */ var _util_identity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(25);
 /** PURE_IMPORTS_START _switchMap,_util_identity PURE_IMPORTS_END */
 
 
@@ -54776,10 +54804,13 @@ var SwitchMapSubscriber = /*@__PURE__*/ (function (_super) {
         if (innerSubscription) {
             innerSubscription.unsubscribe();
         }
-        var innerSubscriber = new _InnerSubscriber__WEBPACK_IMPORTED_MODULE_2__["InnerSubscriber"](this, undefined, undefined);
+        var innerSubscriber = new _InnerSubscriber__WEBPACK_IMPORTED_MODULE_2__["InnerSubscriber"](this, value, index);
         var destination = this.destination;
         destination.add(innerSubscriber);
-        this.innerSubscription = Object(_util_subscribeToResult__WEBPACK_IMPORTED_MODULE_3__["subscribeToResult"])(this, result, value, index, innerSubscriber);
+        this.innerSubscription = Object(_util_subscribeToResult__WEBPACK_IMPORTED_MODULE_3__["subscribeToResult"])(this, result, undefined, undefined, innerSubscriber);
+        if (this.innerSubscription !== innerSubscriber) {
+            destination.add(this.innerSubscription);
+        }
     };
     SwitchMapSubscriber.prototype._complete = function () {
         var innerSubscription = this.innerSubscription;
@@ -54950,7 +54981,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "tap", function() { return tap; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);
 /* harmony import */ var _Subscriber__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
-/* harmony import */ var _util_noop__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(25);
+/* harmony import */ var _util_noop__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(60);
 /* harmony import */ var _util_isFunction__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(13);
 /** PURE_IMPORTS_START tslib,_Subscriber,_util_noop,_util_isFunction PURE_IMPORTS_END */
 
diff --git a/packages/kbn-pm/package.json b/packages/kbn-pm/package.json
index d9ff0be55bde5..3e7ed49c61314 100644
--- a/packages/kbn-pm/package.json
+++ b/packages/kbn-pm/package.json
@@ -53,7 +53,7 @@
     "ora": "^1.4.0",
     "prettier": "^2.0.5",
     "read-pkg": "^5.2.0",
-    "rxjs": "^6.5.3",
+    "rxjs": "^6.5.5",
     "spawn-sync": "^1.0.15",
     "string-replace-loader": "^2.2.0",
     "strip-ansi": "^4.0.0",
diff --git a/packages/kbn-pm/src/commands/bootstrap.test.ts b/packages/kbn-pm/src/commands/bootstrap.test.ts
index c69427e8b3c74..97505a66a1fff 100644
--- a/packages/kbn-pm/src/commands/bootstrap.test.ts
+++ b/packages/kbn-pm/src/commands/bootstrap.test.ts
@@ -127,13 +127,13 @@ test('handles dependencies of dependencies', async () => {
   expect(mockInstallInDir.mock.calls).toMatchSnapshot('install in dir');
   expect(logWriter.messages).toMatchInlineSnapshot(`
     Array [
-      " info [kibana] running yarn",
+       info [kibana] running yarn,
       "",
       "",
-      " info [bar] running yarn",
+       info [bar] running yarn,
       "",
       "",
-      " info [foo] running yarn",
+       info [foo] running yarn,
       "",
       "",
     ]
@@ -174,7 +174,7 @@ test('does not run installer if no deps in package', async () => {
   expect(mockInstallInDir.mock.calls).toMatchSnapshot('install in dir');
   expect(logWriter.messages).toMatchInlineSnapshot(`
     Array [
-      " info [kibana] running yarn",
+       info [kibana] running yarn,
       "",
       "",
     ]
diff --git a/packages/kbn-pm/src/test_helpers/strip_ansi_snapshot_serializer.ts b/packages/kbn-pm/src/test_helpers/strip_ansi_snapshot_serializer.ts
index bf8bd129c0bbf..d5b73dfd4d5ee 100644
--- a/packages/kbn-pm/src/test_helpers/strip_ansi_snapshot_serializer.ts
+++ b/packages/kbn-pm/src/test_helpers/strip_ansi_snapshot_serializer.ts
@@ -20,9 +20,9 @@
 import hasAnsi from 'has-ansi';
 import stripAnsi from 'strip-ansi';
 
-export const stripAnsiSnapshotSerializer = {
-  print(value: string, serialize: (val: string) => string) {
-    return serialize(stripAnsi(value));
+export const stripAnsiSnapshotSerializer: jest.SnapshotSerializerPlugin = {
+  serialize(value: string) {
+    return stripAnsi(value);
   },
 
   test(value: any) {
diff --git a/packages/kbn-pm/src/utils/__snapshots__/projects_tree.test.ts.snap b/packages/kbn-pm/src/utils/__snapshots__/projects_tree.test.ts.snap
index 12cbc704b4803..9993e2eaf377a 100644
--- a/packages/kbn-pm/src/utils/__snapshots__/projects_tree.test.ts.snap
+++ b/packages/kbn-pm/src/utils/__snapshots__/projects_tree.test.ts.snap
@@ -1,29 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`handles projects outside root folder 1`] = `
-"kibana
+kibana
 ├── packages
 │   ├── bar
 │   └── foo
 └── ../plugins
     ├── baz
     ├── quux
-    └── zorge"
+    └── zorge
 `;
 
 exports[`handles projects with root folder 1`] = `
-"kibana
+kibana
 └── packages
     ├── bar
-    └── foo"
+    └── foo
 `;
 
 exports[`handles projects within projects outside root folder 1`] = `
-"kibana
+kibana
 ├── packages
 │   ├── bar
 │   └── foo
 └── ../kibana-extra/additional_projects (with-additional-projects)
     ├── packages/baz
-    └── plugins/quux"
+    └── plugins/quux
 `;
diff --git a/packages/kbn-pm/src/utils/link_project_executables.test.ts b/packages/kbn-pm/src/utils/link_project_executables.test.ts
index f5c19d569f6b8..a98d2caa30343 100644
--- a/packages/kbn-pm/src/utils/link_project_executables.test.ts
+++ b/packages/kbn-pm/src/utils/link_project_executables.test.ts
@@ -115,9 +115,9 @@ describe('bin script points to a file', () => {
     expect(getFsMockCalls()).toMatchSnapshot('fs module calls');
     expect(logWriter.messages).toMatchInlineSnapshot(`
       Array [
-        " debg Linking package executables",
-        " debg [foo] bar -> ../bar/bin/bar.js",
-        " debg [baz] bar -> ../bar/bin/bar.js",
+         debg Linking package executables,
+         debg [foo] bar -> ../bar/bin/bar.js,
+         debg [baz] bar -> ../bar/bin/bar.js,
       ]
     `);
   });
diff --git a/packages/kbn-spec-to-console/package.json b/packages/kbn-spec-to-console/package.json
index ebbf244eb2e10..5423bc3fd4ecd 100644
--- a/packages/kbn-spec-to-console/package.json
+++ b/packages/kbn-spec-to-console/package.json
@@ -17,7 +17,7 @@
   },
   "homepage": "https://github.com/jbudz/spec-to-console#readme",
   "devDependencies": {
-    "jest": "^24.9.0",
+    "jest": "^25.5.4",
     "prettier": "^2.0.5"
   },
   "dependencies": {
diff --git a/packages/kbn-storybook/package.json b/packages/kbn-storybook/package.json
index 72308fa31287f..4f035c3334b86 100644
--- a/packages/kbn-storybook/package.json
+++ b/packages/kbn-storybook/package.json
@@ -23,7 +23,7 @@
     "mini-css-extract-plugin": "0.7.0",
     "normalize-path": "3.0.0",
     "react-docgen-typescript-loader": "3.1.0",
-    "rxjs": "6.5.2",
+    "rxjs": "6.5.5",
     "serve-static": "1.14.1",
     "styled-components": "^5.1.0",
     "webpack": "^4.41.5"
diff --git a/packages/kbn-test/package.json b/packages/kbn-test/package.json
index fa30a88b79b08..042de2617565e 100644
--- a/packages/kbn-test/package.json
+++ b/packages/kbn-test/package.json
@@ -30,7 +30,7 @@
     "joi": "^13.5.2",
     "parse-link-header": "^1.0.1",
     "puppeteer": "^3.3.0",
-    "rxjs": "^6.5.3",
+    "rxjs": "^6.5.5",
     "strip-ansi": "^5.2.0",
     "tar-fs": "^1.16.3",
     "tmp": "^0.1.0",
diff --git a/packages/kbn-test/src/failed_tests_reporter/add_messages_to_report.test.ts b/packages/kbn-test/src/failed_tests_reporter/add_messages_to_report.test.ts
index 7cbeb18a5ebd4..f8f279151e07f 100644
--- a/packages/kbn-test/src/failed_tests_reporter/add_messages_to_report.test.ts
+++ b/packages/kbn-test/src/failed_tests_reporter/add_messages_to_report.test.ts
@@ -26,7 +26,7 @@ import { createPatch } from 'diff';
 // turns out Jest can't encode xml diffs in their JUnit reports...
 expect.addSnapshotSerializer({
   test: (v) => typeof v === 'string' && (v.includes('<') || v.includes('>')),
-  print: (v) => v.replace(/</g, '‹').replace(/>/g, '›').replace(/^\s+$/gm, ''),
+  serialize: (v) => v.replace(/</g, '‹').replace(/>/g, '›').replace(/^\s+$/gm, ''),
 });
 
 jest.mock('fs', () => {
diff --git a/packages/kbn-ui-framework/src/components/form/text_input/text_input.test.js b/packages/kbn-ui-framework/src/components/form/text_input/text_input.test.js
index 41d3726582fb5..2e614c3f17611 100644
--- a/packages/kbn-ui-framework/src/components/form/text_input/text_input.test.js
+++ b/packages/kbn-ui-framework/src/components/form/text_input/text_input.test.js
@@ -45,18 +45,34 @@ describe('KuiTextInput', () => {
     });
 
     describe('autoFocus', () => {
+      /* eslint-disable no-console */
+      // Silence until enzyme fixed https://github.com/enzymejs/enzyme/issues/2337
+      const originalError = console.error;
+      beforeAll(() => {
+        console.error = jest.fn();
+      });
+      afterAll(() => {
+        console.error = originalError;
+      });
+      /* eslint-enable no-console */
+
       test('sets focus on the element', () => {
         const component = mount(
-          <KuiTextInput autoFocus onChange={() => {}} data-test-subj="input" />
+          <KuiTextInput autoFocus={true} onChange={() => {}} data-test-subj="input" />,
+          { attachTo: document.body }
         );
 
         expect(findTestSubject(component, 'input').getDOMNode()).toBe(document.activeElement);
+        component.unmount();
       });
 
       test('does not focus the element by default', () => {
-        const component = mount(<KuiTextInput onChange={() => {}} data-test-subj="input" />);
+        const component = mount(<KuiTextInput onChange={() => {}} data-test-subj="input" />, {
+          attachTo: document.body,
+        });
 
         expect(findTestSubject(component, 'input').getDOMNode()).not.toBe(document.activeElement);
+        component.unmount();
       });
     });
 
diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json
index ffe40a8fe1c10..1cc04afad5669 100644
--- a/packages/kbn-ui-shared-deps/package.json
+++ b/packages/kbn-ui-shared-deps/package.json
@@ -29,7 +29,7 @@
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "regenerator-runtime": "^0.13.3",
-    "rxjs": "^6.5.3",
+    "rxjs": "^6.5.5",
     "symbol-observable": "^1.2.0",
     "whatwg-fetch": "^3.0.0"
   },
diff --git a/src/core/public/application/application_service.test.mocks.ts b/src/core/public/application/application_service.test.mocks.ts
index 727295237d741..11c69c1971fd1 100644
--- a/src/core/public/application/application_service.test.mocks.ts
+++ b/src/core/public/application/application_service.test.mocks.ts
@@ -37,7 +37,11 @@ jest.doMock('history', () => ({
 }));
 
 export const parseAppUrlMock = jest.fn();
-jest.doMock('./utils', () => ({
-  ...jest.requireActual('./utils'),
-  parseAppUrl: parseAppUrlMock,
-}));
+jest.doMock('./utils', () => {
+  const original = jest.requireActual('./utils');
+
+  return {
+    ...original,
+    parseAppUrl: parseAppUrlMock,
+  };
+});
diff --git a/src/core/public/application/integration_tests/application_service.test.tsx b/src/core/public/application/integration_tests/application_service.test.tsx
index e3cd0761c3244..b0419d276dfa1 100644
--- a/src/core/public/application/integration_tests/application_service.test.tsx
+++ b/src/core/public/application/integration_tests/application_service.test.tsx
@@ -147,44 +147,52 @@ describe('ApplicationService', () => {
     });
   });
 
-  it('redirects to full path when navigating to legacy app', async () => {
-    const redirectTo = jest.fn();
-    const reloadSpy = jest.spyOn(window.location, 'reload').mockImplementation(() => {});
-
-    // In the real application, we use a BrowserHistory instance configured with `basename`. However, in tests we must
-    // use MemoryHistory which does not support `basename`. In order to emulate this behavior, we will wrap this
-    // instance with a ScopedHistory configured with a basepath.
-    history.push(setupDeps.http.basePath.get()); // ScopedHistory constructor will fail if underlying history is not currently at basePath.
-    const { register, registerLegacyApp } = service.setup({
-      ...setupDeps,
-      redirectTo,
-      history: new ScopedHistory(history, setupDeps.http.basePath.get()),
+  describe('redirects', () => {
+    beforeAll(() => {
+      Object.defineProperty(window, 'location', {
+        value: {
+          reload: jest.fn(),
+        },
+      });
     });
 
-    register(Symbol(), {
-      id: 'app1',
-      title: 'App1',
-      mount: ({ onAppLeave }: AppMountParameters) => {
-        onAppLeave((actions) => actions.default());
-        return () => undefined;
-      },
-    });
-    registerLegacyApp({
-      id: 'myLegacyTestApp',
-      appUrl: '/app/myLegacyTestApp',
-      title: 'My Legacy Test App',
-    });
+    it('to full path when navigating to legacy app', async () => {
+      const redirectTo = jest.fn();
+
+      // In the real application, we use a BrowserHistory instance configured with `basename`. However, in tests we must
+      // use MemoryHistory which does not support `basename`. In order to emulate this behavior, we will wrap this
+      // instance with a ScopedHistory configured with a basepath.
+      history.push(setupDeps.http.basePath.get()); // ScopedHistory constructor will fail if underlying history is not currently at basePath.
+      const { register, registerLegacyApp } = service.setup({
+        ...setupDeps,
+        redirectTo,
+        history: new ScopedHistory(history, setupDeps.http.basePath.get()),
+      });
+
+      register(Symbol(), {
+        id: 'app1',
+        title: 'App1',
+        mount: ({ onAppLeave }: AppMountParameters) => {
+          onAppLeave((actions) => actions.default());
+          return () => undefined;
+        },
+      });
+      registerLegacyApp({
+        id: 'myLegacyTestApp',
+        appUrl: '/app/myLegacyTestApp',
+        title: 'My Legacy Test App',
+      });
 
-    const { navigateToApp, getComponent } = await service.start(startDeps);
+      const { navigateToApp, getComponent } = await service.start(startDeps);
 
-    update = createRenderer(getComponent());
+      update = createRenderer(getComponent());
 
-    await navigate('/test/app/app1');
-    await act(() => navigateToApp('myLegacyTestApp', { path: '#/some-path' }));
+      await navigate('/test/app/app1');
+      await act(() => navigateToApp('myLegacyTestApp', { path: '#/some-path' }));
 
-    expect(redirectTo).toHaveBeenCalledWith('/test/app/myLegacyTestApp#/some-path');
-    expect(reloadSpy).toHaveBeenCalled();
-    reloadSpy.mockRestore();
+      expect(redirectTo).toHaveBeenCalledWith('/test/app/myLegacyTestApp#/some-path');
+      expect(window.location.reload).toHaveBeenCalled();
+    });
   });
 
   describe('leaving an application that registered an app leave handler', () => {
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 60963c0acb990..9239811df2065 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
@@ -410,6 +410,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                       >
                         <div
                           class="euiFlexItem euiFlexItem--flexGrowZero"
+                          style="flex-shrink: 0;"
                         >
                           <div
                             class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
@@ -1054,6 +1055,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                         >
                           <div
                             class="euiFlexItem euiFlexItem--flexGrowZero"
+                            style="flex-shrink: 0;"
                           >
                             <div
                               class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
@@ -1811,7 +1813,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                       arrowDisplay="right"
                       buttonClassName="euiCollapsibleNavGroup__heading"
                       buttonContent={
-                        <ForwardRef
+                        <EuiFlexGroup
                           alignItems="center"
                           gutterSize="m"
                           responsive={false}
@@ -1828,7 +1830,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                               </h3>
                             </EuiTitle>
                           </EuiFlexItem>
-                        </ForwardRef>
+                        </EuiFlexGroup>
                       }
                       className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
                       data-test-subj="collapsibleNavGroup-recentlyViewed"
@@ -2054,7 +2056,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                           arrowDisplay="right"
                           buttonClassName="euiCollapsibleNavGroup__heading"
                           buttonContent={
-                            <ForwardRef
+                            <EuiFlexGroup
                               alignItems="center"
                               gutterSize="m"
                               responsive={false}
@@ -2079,7 +2081,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                                   </h3>
                                 </EuiTitle>
                               </EuiFlexItem>
-                            </ForwardRef>
+                            </EuiFlexGroup>
                           }
                           className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
                           data-test-subj="collapsibleNavGroup-kibana"
@@ -2341,7 +2343,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                           arrowDisplay="right"
                           buttonClassName="euiCollapsibleNavGroup__heading"
                           buttonContent={
-                            <ForwardRef
+                            <EuiFlexGroup
                               alignItems="center"
                               gutterSize="m"
                               responsive={false}
@@ -2366,7 +2368,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                                   </h3>
                                 </EuiTitle>
                               </EuiFlexItem>
-                            </ForwardRef>
+                            </EuiFlexGroup>
                           }
                           className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
                           data-test-subj="collapsibleNavGroup-observability"
@@ -2589,7 +2591,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                           arrowDisplay="right"
                           buttonClassName="euiCollapsibleNavGroup__heading"
                           buttonContent={
-                            <ForwardRef
+                            <EuiFlexGroup
                               alignItems="center"
                               gutterSize="m"
                               responsive={false}
@@ -2614,7 +2616,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                                   </h3>
                                 </EuiTitle>
                               </EuiFlexItem>
-                            </ForwardRef>
+                            </EuiFlexGroup>
                           }
                           className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
                           data-test-subj="collapsibleNavGroup-security"
@@ -2797,7 +2799,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                           arrowDisplay="right"
                           buttonClassName="euiCollapsibleNavGroup__heading"
                           buttonContent={
-                            <ForwardRef
+                            <EuiFlexGroup
                               alignItems="center"
                               gutterSize="m"
                               responsive={false}
@@ -2814,7 +2816,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                                   </h3>
                                 </EuiTitle>
                               </EuiFlexItem>
-                            </ForwardRef>
+                            </EuiFlexGroup>
                           }
                           className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
                           data-test-subj="collapsibleNavGroup-management"
@@ -3783,7 +3785,7 @@ exports[`CollapsibleNav renders the default nav 2`] = `
                       arrowDisplay="right"
                       buttonClassName="euiCollapsibleNavGroup__heading"
                       buttonContent={
-                        <ForwardRef
+                        <EuiFlexGroup
                           alignItems="center"
                           gutterSize="m"
                           responsive={false}
@@ -3800,7 +3802,7 @@ exports[`CollapsibleNav renders the default nav 2`] = `
                               </h3>
                             </EuiTitle>
                           </EuiFlexItem>
-                        </ForwardRef>
+                        </EuiFlexGroup>
                       }
                       className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
                       data-test-subj="collapsibleNavGroup-recentlyViewed"
@@ -4377,6 +4379,7 @@ exports[`CollapsibleNav renders the default nav 3`] = `
                       >
                         <div
                           class="euiFlexItem euiFlexItem--flexGrowZero"
+                          style="flex-shrink: 0;"
                         >
                           <div
                             class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
@@ -4566,6 +4569,7 @@ exports[`CollapsibleNav renders the default nav 3`] = `
                         >
                           <div
                             class="euiFlexItem euiFlexItem--flexGrowZero"
+                            style="flex-shrink: 0;"
                           >
                             <div
                               class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
@@ -4868,7 +4872,7 @@ exports[`CollapsibleNav renders the default nav 3`] = `
                       arrowDisplay="right"
                       buttonClassName="euiCollapsibleNavGroup__heading"
                       buttonContent={
-                        <ForwardRef
+                        <EuiFlexGroup
                           alignItems="center"
                           gutterSize="m"
                           responsive={false}
@@ -4885,7 +4889,7 @@ exports[`CollapsibleNav renders the default nav 3`] = `
                               </h3>
                             </EuiTitle>
                           </EuiFlexItem>
-                        </ForwardRef>
+                        </EuiFlexGroup>
                       }
                       className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
                       data-test-subj="collapsibleNavGroup-recentlyViewed"
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 41f1ece34c415..455921ba38a86 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
@@ -4302,7 +4302,7 @@ exports[`Header renders 2`] = `
                     <EuiPopover
                       anchorPosition="downRight"
                       button={
-                        <ForwardRef
+                        <EuiHeaderSectionItemButton
                           aria-expanded={false}
                           aria-haspopup="true"
                           aria-label="Help menu"
@@ -4312,7 +4312,7 @@ exports[`Header renders 2`] = `
                             size="m"
                             type="help"
                           />
-                        </ForwardRef>
+                        </EuiHeaderSectionItemButton>
                       }
                       closePopover={[Function]}
                       data-test-subj="helpMenuButton"
@@ -8405,7 +8405,7 @@ exports[`Header renders 3`] = `
                     <EuiPopover
                       anchorPosition="downRight"
                       button={
-                        <ForwardRef
+                        <EuiHeaderSectionItemButton
                           aria-expanded={false}
                           aria-haspopup="true"
                           aria-label="Help menu"
@@ -8415,7 +8415,7 @@ exports[`Header renders 3`] = `
                             size="m"
                             type="help"
                           />
-                        </ForwardRef>
+                        </EuiHeaderSectionItemButton>
                       }
                       closePopover={[Function]}
                       data-test-subj="helpMenuButton"
@@ -8849,6 +8849,7 @@ exports[`Header renders 3`] = `
                           >
                             <div
                               class="euiFlexItem euiFlexItem--flexGrowZero"
+                              style="flex-shrink: 0;"
                             >
                               <div
                                 class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
@@ -9081,6 +9082,7 @@ exports[`Header renders 3`] = `
                             >
                               <div
                                 class="euiFlexItem euiFlexItem--flexGrowZero"
+                                style="flex-shrink: 0;"
                               >
                                 <div
                                   class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
@@ -9426,7 +9428,7 @@ exports[`Header renders 3`] = `
                           arrowDisplay="right"
                           buttonClassName="euiCollapsibleNavGroup__heading"
                           buttonContent={
-                            <ForwardRef
+                            <EuiFlexGroup
                               alignItems="center"
                               gutterSize="m"
                               responsive={false}
@@ -9443,7 +9445,7 @@ exports[`Header renders 3`] = `
                                   </h3>
                                 </EuiTitle>
                               </EuiFlexItem>
-                            </ForwardRef>
+                            </EuiFlexGroup>
                           }
                           className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
                           data-test-subj="collapsibleNavGroup-recentlyViewed"
@@ -13579,7 +13581,7 @@ exports[`Header renders 4`] = `
                     <EuiPopover
                       anchorPosition="downRight"
                       button={
-                        <ForwardRef
+                        <EuiHeaderSectionItemButton
                           aria-expanded={false}
                           aria-haspopup="true"
                           aria-label="Help menu"
@@ -13589,7 +13591,7 @@ exports[`Header renders 4`] = `
                             size="m"
                             type="help"
                           />
-                        </ForwardRef>
+                        </EuiHeaderSectionItemButton>
                       }
                       closePopover={[Function]}
                       data-test-subj="helpMenuButton"
diff --git a/src/core/public/core_app/errors/url_overflow.test.ts b/src/core/public/core_app/errors/url_overflow.test.ts
index 115bf53aa2a84..3d21c4817be03 100644
--- a/src/core/public/core_app/errors/url_overflow.test.ts
+++ b/src/core/public/core_app/errors/url_overflow.test.ts
@@ -35,7 +35,6 @@ describe('url overflow detection', () => {
   let history: History;
   let toasts: jest.Mocked<IToasts>;
   let uiSettings: jest.Mocked<IUiSettingsClient>;
-  let assignSpy: jest.SpyInstance<void, [string]>;
   let unlisten: any;
 
   beforeEach(() => {
@@ -44,8 +43,11 @@ describe('url overflow detection', () => {
     toasts = notificationServiceMock.createStartContract().toasts;
     uiSettings = uiSettingsServiceMock.createStartContract();
 
-    // No-op mock impl to avoid jsdom warning about navigation not being implemented
-    assignSpy = jest.spyOn(window.location, 'assign').mockImplementation(() => {});
+    Object.defineProperty(window, 'location', {
+      value: {
+        assign: jest.fn(),
+      },
+    });
 
     unlisten = setupUrlOverflowDetection({
       basePath,
@@ -57,19 +59,19 @@ describe('url overflow detection', () => {
 
   afterEach(() => {
     unlisten();
-    assignSpy.mockRestore();
+    jest.clearAllMocks();
   });
 
   it('redirects to error page when URL is too long', () => {
     history.push(longUrl);
-    expect(assignSpy).toHaveBeenCalledWith('/app/error?errorType=urlOverflow');
+    expect(window.location.assign).toHaveBeenCalledWith('/app/error?errorType=urlOverflow');
   });
 
   it('displays a toast if URL exceeds warning threshold', () => {
     const warningUrl = '/' + 'a'.repeat(URL_WARNING_LENGTH);
     history.push(warningUrl);
     expect(history.location.pathname).toEqual(warningUrl);
-    expect(assignSpy).not.toHaveBeenCalled();
+    expect(window.location.assign).not.toHaveBeenCalled();
     expect(toasts.addWarning).toHaveBeenCalledWith(
       expect.objectContaining({
         title: 'The URL is big and Kibana might stop working',
@@ -102,7 +104,7 @@ describe('url overflow detection', () => {
   it('does not redirect or show warning if URL is not too long', () => {
     history.push('/regular-length-url');
     expect(history.location.pathname).toEqual('/regular-length-url');
-    expect(assignSpy).not.toHaveBeenCalled();
+    expect(window.location.assign).not.toHaveBeenCalled();
     expect(toasts.addWarning).not.toHaveBeenCalled();
   });
 
@@ -110,7 +112,7 @@ describe('url overflow detection', () => {
     uiSettings.get.mockReturnValue(true);
     history.push(longUrl);
     expect(history.location.pathname).toEqual(longUrl);
-    expect(assignSpy).not.toHaveBeenCalled();
+    expect(window.location.assign).not.toHaveBeenCalled();
     expect(toasts.addWarning).not.toHaveBeenCalled();
   });
 
@@ -121,7 +123,7 @@ describe('url overflow detection', () => {
     history.push(longErrorUrl);
     expect(history.location.pathname).toEqual('/app/error');
     expect(history.location.search).toEqual(`?q=${longQueryParam}`);
-    expect(assignSpy).not.toHaveBeenCalled();
+    expect(window.location.assign).not.toHaveBeenCalled();
     expect(toasts.addWarning).not.toHaveBeenCalled();
   });
 });
diff --git a/src/core/public/fatal_errors/__snapshots__/fatal_errors_screen.test.tsx.snap b/src/core/public/fatal_errors/__snapshots__/fatal_errors_screen.test.tsx.snap
index b9a4f775c2b56..7b7debc128fb1 100644
--- a/src/core/public/fatal_errors/__snapshots__/fatal_errors_screen.test.tsx.snap
+++ b/src/core/public/fatal_errors/__snapshots__/fatal_errors_screen.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`rendering render matches snapshot 1`] = `
+exports[`FatalErrorsScreen rendering render matches snapshot 1`] = `
 <EuiPage
   style={
     Object {
diff --git a/src/core/public/fatal_errors/fatal_errors_screen.test.tsx b/src/core/public/fatal_errors/fatal_errors_screen.test.tsx
index bdca3b18742d9..35a9cbc48f6c1 100644
--- a/src/core/public/fatal_errors/fatal_errors_screen.test.tsx
+++ b/src/core/public/fatal_errors/fatal_errors_screen.test.tsx
@@ -25,112 +25,123 @@ import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 
 import { FatalErrorsScreen } from './fatal_errors_screen';
 
-const errorInfoFoo = {
-  message: 'foo',
-  stack: 'Error: foo\n  stack...foo.js:1:1',
-};
-const errorInfoBar = {
-  message: 'bar',
-  stack: 'Error: bar\n  stack...bar.js:1:1',
-};
-
-const defaultProps = {
-  buildNumber: 123,
-  kibanaVersion: 'bar',
-  errorInfo$: Rx.of(errorInfoFoo, errorInfoBar),
-};
-
-const noop = () => {
-  // noop
-};
-
-afterEach(() => {
-  jest.restoreAllMocks();
-});
-
-describe('reloading', () => {
-  it('refreshes the page if a `hashchange` event is emitted', () => {
-    const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
-
-    const locationReloadSpy = jest.spyOn(window.location, 'reload').mockImplementation(noop);
+describe('FatalErrorsScreen', () => {
+  const errorInfoFoo = {
+    message: 'foo',
+    stack: 'Error: foo\n  stack...foo.js:1:1',
+  };
+  const errorInfoBar = {
+    message: 'bar',
+    stack: 'Error: bar\n  stack...bar.js:1:1',
+  };
+
+  const defaultProps = {
+    buildNumber: 123,
+    kibanaVersion: 'bar',
+    errorInfo$: Rx.of(errorInfoFoo, errorInfoBar),
+  };
+
+  const noop = () => {
+    // noop
+  };
 
-    shallowWithIntl(<FatalErrorsScreen {...defaultProps} />);
-    expect(addEventListenerSpy).toHaveBeenCalledTimes(1);
-    expect(addEventListenerSpy).toHaveBeenCalledWith('hashchange', expect.any(Function), undefined);
-
-    expect(locationReloadSpy).not.toHaveBeenCalled();
-    const [, handler] = addEventListenerSpy.mock.calls[0];
-    (handler as jest.Mock)();
-    expect(locationReloadSpy).toHaveBeenCalledTimes(1);
+  beforeAll(() => {
+    Object.defineProperty(window, 'location', {
+      value: {
+        reload: jest.fn(),
+      },
+    });
   });
-});
 
-describe('rendering', () => {
-  it('render matches snapshot', () => {
-    expect(shallowWithIntl(<FatalErrorsScreen {...defaultProps} />)).toMatchSnapshot();
+  describe('reloading', () => {
+    it('refreshes the page if a `hashchange` event is emitted', () => {
+      const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+
+      shallowWithIntl(<FatalErrorsScreen {...defaultProps} />);
+      expect(addEventListenerSpy).toHaveBeenCalledTimes(1);
+      expect(addEventListenerSpy).toHaveBeenCalledWith(
+        'hashchange',
+        expect.any(Function),
+        undefined
+      );
+
+      expect(window.location.reload).not.toHaveBeenCalled();
+      const [, handler] = (window as any).addEventListener.mock.calls[0];
+      (handler as jest.Mock)();
+      expect(window.location.reload).toHaveBeenCalledTimes(1);
+    });
   });
 
-  it('rerenders when errorInfo$ emits more errors', () => {
-    const errorInfo$ = new Rx.ReplaySubject<typeof errorInfoFoo>();
+  describe('rendering', () => {
+    it('render matches snapshot', () => {
+      expect(shallowWithIntl(<FatalErrorsScreen {...defaultProps} />)).toMatchSnapshot();
+    });
+
+    it('rerenders when errorInfo$ emits more errors', () => {
+      const errorInfo$ = new Rx.ReplaySubject<typeof errorInfoFoo>();
 
-    const el = shallowWithIntl(<FatalErrorsScreen {...defaultProps} errorInfo$={errorInfo$} />);
+      const el = shallowWithIntl(<FatalErrorsScreen {...defaultProps} errorInfo$={errorInfo$} />);
 
-    expect(el.find(EuiCallOut)).toHaveLength(0);
+      expect(el.find(EuiCallOut)).toHaveLength(0);
 
-    errorInfo$.next(errorInfoFoo);
-    el.update(); // allow setState() to cause a render
+      errorInfo$.next(errorInfoFoo);
+      el.update(); // allow setState() to cause a render
 
-    expect(el.find(EuiCallOut)).toHaveLength(1);
+      expect(el.find(EuiCallOut)).toHaveLength(1);
 
-    errorInfo$.next(errorInfoBar);
-    el.update(); // allow setState() to cause a render
+      errorInfo$.next(errorInfoBar);
+      el.update(); // allow setState() to cause a render
 
-    expect(el.find(EuiCallOut)).toHaveLength(2);
+      expect(el.find(EuiCallOut)).toHaveLength(2);
+    });
   });
-});
 
-describe('buttons', () => {
-  beforeAll(() => {
-    Object.assign(window, {
-      localStorage: {
-        clear: jest.fn(),
-      },
-      sessionStorage: {
-        clear: jest.fn(),
-      },
+  describe('buttons', () => {
+    beforeAll(() => {
+      delete (window as any).localStorage;
+      delete (window as any).sessionStorage;
+
+      Object.assign(window, {
+        localStorage: {
+          clear: jest.fn(),
+        },
+        sessionStorage: {
+          clear: jest.fn(),
+        },
+      });
     });
-  });
 
-  afterAll(() => {
-    delete (window as any).localStorage;
-    delete (window as any).sessionStorage;
-  });
+    afterAll(() => {
+      delete (window as any).localStorage;
+      delete (window as any).sessionStorage;
+    });
 
-  describe('"Clear your session"', () => {
-    it('clears localStorage, sessionStorage, the location.hash, and reloads the page', () => {
-      window.location.hash = '/foo/bar';
-      jest.spyOn(window.location, 'reload').mockImplementation(noop);
+    describe('"Clear your session"', () => {
+      it('clears localStorage, sessionStorage, the location.hash, and reloads the page', () => {
+        window.location.hash = '/foo/bar';
+        jest.spyOn(window.location, 'reload').mockImplementation(noop);
 
-      const el = mountWithIntl(<FatalErrorsScreen {...defaultProps} />);
-      const button = el.find('button').find(testSubjSelector('clearSession'));
-      button.simulate('click');
+        const el = mountWithIntl(<FatalErrorsScreen {...defaultProps} />);
+        const button = el.find('button').find(testSubjSelector('clearSession'));
+        button.simulate('click');
 
-      expect(window.localStorage.clear).toHaveBeenCalled();
-      expect(window.sessionStorage.clear).toHaveBeenCalled();
-      expect(window.location.reload).toHaveBeenCalled();
-      expect(window.location.hash).toBe('');
+        expect(window.localStorage.clear).toHaveBeenCalled();
+        expect(window.sessionStorage.clear).toHaveBeenCalled();
+        expect(window.location.reload).toHaveBeenCalled();
+        expect(window.location.hash).toBe('');
+      });
     });
-  });
 
-  describe('"Go back"', () => {
-    it('calls window.history.back()', () => {
-      jest.spyOn(window.history, 'back').mockImplementation(noop);
+    describe('"Go back"', () => {
+      it('calls window.history.back()', () => {
+        jest.spyOn(window.history, 'back').mockImplementation(noop);
 
-      const el = mountWithIntl(<FatalErrorsScreen {...defaultProps} />);
-      const button = el.find('button').find(testSubjSelector('goBack'));
-      button.simulate('click');
+        const el = mountWithIntl(<FatalErrorsScreen {...defaultProps} />);
+        const button = el.find('button').find(testSubjSelector('goBack'));
+        button.simulate('click');
 
-      expect(window.history.back).toHaveBeenCalled();
+        expect(window.history.back).toHaveBeenCalled();
+      });
     });
   });
 });
diff --git a/src/core/server/elasticsearch/cluster_client.test.mocks.ts b/src/core/server/elasticsearch/cluster_client.test.mocks.ts
index 4a8553d1d5f99..6873117aecc35 100644
--- a/src/core/server/elasticsearch/cluster_client.test.mocks.ts
+++ b/src/core/server/elasticsearch/cluster_client.test.mocks.ts
@@ -18,11 +18,14 @@
  */
 
 export const MockClient = jest.fn();
-jest.mock('elasticsearch', () => ({
-  // Jest types don't include `requireActual` right now.
-  ...jest.requireActual('elasticsearch'),
-  Client: MockClient,
-}));
+jest.mock('elasticsearch', () => {
+  const original = jest.requireActual('elasticsearch');
+
+  return {
+    ...original,
+    Client: MockClient,
+  };
+});
 
 export const MockScopedClusterClient = jest.fn();
 jest.mock('./scoped_cluster_client', () => ({
diff --git a/src/core/server/elasticsearch/version_check/ensure_es_version.test.ts b/src/core/server/elasticsearch/version_check/ensure_es_version.test.ts
index a4cf0ffd58088..a2090ed111ca1 100644
--- a/src/core/server/elasticsearch/version_check/ensure_es_version.test.ts
+++ b/src/core/server/elasticsearch/version_check/ensure_es_version.test.ts
@@ -118,7 +118,7 @@ describe('pollEsNodesVersion', () => {
     });
 
   beforeEach(() => {
-    callWithInternalUser.mockClear();
+    callWithInternalUser.mockReset();
   });
 
   it('returns iscCompatible=false and keeps polling when a poll request throws', (done) => {
diff --git a/src/core/server/http/http_config.test.ts b/src/core/server/http/http_config.test.ts
index 0976bfd56682e..eaf66219d08dc 100644
--- a/src/core/server/http/http_config.test.ts
+++ b/src/core/server/http/http_config.test.ts
@@ -24,10 +24,14 @@ import { CspConfig } from '../csp';
 const validHostnames = ['www.example.com', '8.8.8.8', '::1', 'localhost'];
 const invalidHostname = 'asdf$%^';
 
-jest.mock('os', () => ({
-  ...jest.requireActual('os'),
-  hostname: () => 'kibana-hostname',
-}));
+jest.mock('os', () => {
+  const original = jest.requireActual('os');
+
+  return {
+    ...original,
+    hostname: () => 'kibana-hostname',
+  };
+});
 
 test('has defaults for config', () => {
   const httpSchema = config.schema;
diff --git a/src/core/server/http/http_tools.test.ts b/src/core/server/http/http_tools.test.ts
index 79a1e32d1b51e..7d5a7277a767a 100644
--- a/src/core/server/http/http_tools.test.ts
+++ b/src/core/server/http/http_tools.test.ts
@@ -17,11 +17,14 @@
  * under the License.
  */
 
-jest.mock('fs', () => ({
-  // Hapi Inert patches native methods
-  ...jest.requireActual('fs'),
-  readFileSync: jest.fn(),
-}));
+jest.mock('fs', () => {
+  const original = jest.requireActual('fs');
+  return {
+    // Hapi Inert patches native methods
+    ...original,
+    readFileSync: jest.fn(),
+  };
+});
 
 import supertest from 'supertest';
 import { Request, ResponseToolkit } from 'hapi';
diff --git a/src/core/server/logging/layouts/__snapshots__/pattern_layout.test.ts.snap b/src/core/server/logging/layouts/__snapshots__/pattern_layout.test.ts.snap
index 1bf13204873a6..8988f3019d509 100644
--- a/src/core/server/logging/layouts/__snapshots__/pattern_layout.test.ts.snap
+++ b/src/core/server/logging/layouts/__snapshots__/pattern_layout.test.ts.snap
@@ -24,17 +24,17 @@ exports[`\`format()\` correctly formats record with full pattern. 5`] = `"[2012-
 
 exports[`\`format()\` correctly formats record with full pattern. 6`] = `"[2012-02-01T14:30:22.011Z][TRACE][context-6] message-6"`;
 
-exports[`\`format()\` correctly formats record with highlighting. 1`] = `"[2012-02-01T14:30:22.011Z][FATAL][context-1] Some error stack"`;
+exports[`\`format()\` correctly formats record with highlighting. 1`] = `[2012-02-01T14:30:22.011Z][FATAL][context-1] Some error stack`;
 
-exports[`\`format()\` correctly formats record with highlighting. 2`] = `"[2012-02-01T14:30:22.011Z][ERROR][context-2] message-2"`;
+exports[`\`format()\` correctly formats record with highlighting. 2`] = `[2012-02-01T14:30:22.011Z][ERROR][context-2] message-2`;
 
-exports[`\`format()\` correctly formats record with highlighting. 3`] = `"[2012-02-01T14:30:22.011Z][WARN ][context-3] message-3"`;
+exports[`\`format()\` correctly formats record with highlighting. 3`] = `[2012-02-01T14:30:22.011Z][WARN ][context-3] message-3`;
 
-exports[`\`format()\` correctly formats record with highlighting. 4`] = `"[2012-02-01T14:30:22.011Z][DEBUG][context-4] message-4"`;
+exports[`\`format()\` correctly formats record with highlighting. 4`] = `[2012-02-01T14:30:22.011Z][DEBUG][context-4] message-4`;
 
-exports[`\`format()\` correctly formats record with highlighting. 5`] = `"[2012-02-01T14:30:22.011Z][INFO ][context-5] message-5"`;
+exports[`\`format()\` correctly formats record with highlighting. 5`] = `[2012-02-01T14:30:22.011Z][INFO ][context-5] message-5`;
 
-exports[`\`format()\` correctly formats record with highlighting. 6`] = `"[2012-02-01T14:30:22.011Z][TRACE][context-6] message-6"`;
+exports[`\`format()\` correctly formats record with highlighting. 6`] = `[2012-02-01T14:30:22.011Z][TRACE][context-6] message-6`;
 
 exports[`allows specifying the PID in custom pattern 1`] = `"5355-context-1-Some error stack"`;
 
diff --git a/src/core/server/saved_objects/import/validate_references.test.ts b/src/core/server/saved_objects/import/validate_references.test.ts
index 6642cf149eda9..a9dce65b97d72 100644
--- a/src/core/server/saved_objects/import/validate_references.test.ts
+++ b/src/core/server/saved_objects/import/validate_references.test.ts
@@ -87,31 +87,31 @@ describe('getNonExistingReferenceAsKeys()', () => {
     const result = await getNonExistingReferenceAsKeys(savedObjects, savedObjectsClient);
     expect(result).toEqual([]);
     expect(savedObjectsClient.bulkGet).toMatchInlineSnapshot(`
-[MockFunction] {
-  "calls": Array [
-    Array [
-      Array [
-        Object {
-          "fields": Array [
-            "id",
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [
+              Object {
+                "fields": Array [
+                  "id",
+                ],
+                "id": "1",
+                "type": "index-pattern",
+              },
+            ],
+            Object {
+              "namespace": undefined,
+            },
           ],
-          "id": "1",
-          "type": "index-pattern",
-        },
-      ],
-      Object {
-        "namespace": undefined,
-      },
-    ],
-  ],
-  "results": Array [
-    Object {
-      "type": "return",
-      "value": Promise {},
-    },
-  ],
-}
-`);
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": Promise {},
+          },
+        ],
+      }
+    `);
   });
 
   test(`doesn't handle saved object types outside of ENFORCED_TYPES`, async () => {
@@ -186,38 +186,38 @@ describe('getNonExistingReferenceAsKeys()', () => {
     const result = await getNonExistingReferenceAsKeys(savedObjects, savedObjectsClient);
     expect(result).toEqual(['index-pattern:1', 'search:3']);
     expect(savedObjectsClient.bulkGet).toMatchInlineSnapshot(`
-[MockFunction] {
-  "calls": Array [
-    Array [
-      Array [
-        Object {
-          "fields": Array [
-            "id",
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [
+              Object {
+                "fields": Array [
+                  "id",
+                ],
+                "id": "1",
+                "type": "index-pattern",
+              },
+              Object {
+                "fields": Array [
+                  "id",
+                ],
+                "id": "3",
+                "type": "search",
+              },
+            ],
+            Object {
+              "namespace": undefined,
+            },
           ],
-          "id": "1",
-          "type": "index-pattern",
-        },
-        Object {
-          "fields": Array [
-            "id",
-          ],
-          "id": "3",
-          "type": "search",
-        },
-      ],
-      Object {
-        "namespace": undefined,
-      },
-    ],
-  ],
-  "results": Array [
-    Object {
-      "type": "return",
-      "value": Promise {},
-    },
-  ],
-}
-`);
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": Promise {},
+          },
+        ],
+      }
+    `);
   });
 });
 
@@ -231,11 +231,11 @@ describe('validateReferences()', () => {
   test('returns empty when no objects are passed in', async () => {
     const result = await validateReferences([], savedObjectsClient);
     expect(result).toMatchInlineSnapshot(`
-Object {
-  "errors": Array [],
-  "filteredObjects": Array [],
-}
-`);
+      Object {
+        "errors": Array [],
+        "filteredObjects": Array [],
+      }
+    `);
     expect(savedObjectsClient.bulkGet).toHaveBeenCalledTimes(0);
   });
 
@@ -343,111 +343,111 @@ Object {
     ];
     const result = await validateReferences(savedObjects, savedObjectsClient);
     expect(result).toMatchInlineSnapshot(`
-Object {
-  "errors": Array [
-    Object {
-      "error": Object {
-        "blocking": Array [],
-        "references": Array [
+      Object {
+        "errors": Array [
           Object {
-            "id": "3",
-            "type": "index-pattern",
+            "error": Object {
+              "blocking": Array [],
+              "references": Array [
+                Object {
+                  "id": "3",
+                  "type": "index-pattern",
+                },
+              ],
+              "type": "missing_references",
+            },
+            "id": "2",
+            "title": "My Visualization 2",
+            "type": "visualization",
           },
-        ],
-        "type": "missing_references",
-      },
-      "id": "2",
-      "title": "My Visualization 2",
-      "type": "visualization",
-    },
-    Object {
-      "error": Object {
-        "blocking": Array [],
-        "references": Array [
           Object {
-            "id": "5",
-            "type": "index-pattern",
-          },
-          Object {
-            "id": "6",
-            "type": "index-pattern",
+            "error": Object {
+              "blocking": Array [],
+              "references": Array [
+                Object {
+                  "id": "5",
+                  "type": "index-pattern",
+                },
+                Object {
+                  "id": "6",
+                  "type": "index-pattern",
+                },
+                Object {
+                  "id": "7",
+                  "type": "search",
+                },
+              ],
+              "type": "missing_references",
+            },
+            "id": "4",
+            "title": "My Visualization 4",
+            "type": "visualization",
           },
+        ],
+        "filteredObjects": Array [
           Object {
-            "id": "7",
-            "type": "search",
+            "attributes": Object {},
+            "id": "1",
+            "references": Array [],
+            "type": "visualization",
           },
         ],
-        "type": "missing_references",
-      },
-      "id": "4",
-      "title": "My Visualization 4",
-      "type": "visualization",
-    },
-  ],
-  "filteredObjects": Array [
-    Object {
-      "attributes": Object {},
-      "id": "1",
-      "references": Array [],
-      "type": "visualization",
-    },
-  ],
-}
-`);
+      }
+    `);
     expect(savedObjectsClient.bulkGet).toMatchInlineSnapshot(`
-[MockFunction] {
-  "calls": Array [
-    Array [
-      Array [
-        Object {
-          "fields": Array [
-            "id",
-          ],
-          "id": "3",
-          "type": "index-pattern",
-        },
-        Object {
-          "fields": Array [
-            "id",
-          ],
-          "id": "5",
-          "type": "index-pattern",
-        },
-        Object {
-          "fields": Array [
-            "id",
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [
+              Object {
+                "fields": Array [
+                  "id",
+                ],
+                "id": "3",
+                "type": "index-pattern",
+              },
+              Object {
+                "fields": Array [
+                  "id",
+                ],
+                "id": "5",
+                "type": "index-pattern",
+              },
+              Object {
+                "fields": Array [
+                  "id",
+                ],
+                "id": "6",
+                "type": "index-pattern",
+              },
+              Object {
+                "fields": Array [
+                  "id",
+                ],
+                "id": "7",
+                "type": "search",
+              },
+              Object {
+                "fields": Array [
+                  "id",
+                ],
+                "id": "8",
+                "type": "search",
+              },
+            ],
+            Object {
+              "namespace": undefined,
+            },
           ],
-          "id": "6",
-          "type": "index-pattern",
-        },
-        Object {
-          "fields": Array [
-            "id",
-          ],
-          "id": "7",
-          "type": "search",
-        },
-        Object {
-          "fields": Array [
-            "id",
-          ],
-          "id": "8",
-          "type": "search",
-        },
-      ],
-      Object {
-        "namespace": undefined,
-      },
-    ],
-  ],
-  "results": Array [
-    Object {
-      "type": "return",
-      "value": Promise {},
-    },
-  ],
-}
-`);
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": Promise {},
+          },
+        ],
+      }
+    `);
   });
 
   test(`doesn't return errors when references exist in Elasticsearch`, async () => {
@@ -477,24 +477,24 @@ Object {
     ];
     const result = await validateReferences(savedObjects, savedObjectsClient);
     expect(result).toMatchInlineSnapshot(`
-Object {
-  "errors": Array [],
-  "filteredObjects": Array [
-    Object {
-      "attributes": Object {},
-      "id": "2",
-      "references": Array [
-        Object {
-          "id": "1",
-          "name": "ref_0",
-          "type": "index-pattern",
-        },
-      ],
-      "type": "visualization",
-    },
-  ],
-}
-`);
+      Object {
+        "errors": Array [],
+        "filteredObjects": Array [
+          Object {
+            "attributes": Object {},
+            "id": "2",
+            "references": Array [
+              Object {
+                "id": "1",
+                "name": "ref_0",
+                "type": "index-pattern",
+              },
+            ],
+            "type": "visualization",
+          },
+        ],
+      }
+    `);
     expect(savedObjectsClient.bulkGet).toHaveBeenCalledTimes(1);
   });
 
@@ -521,30 +521,30 @@ Object {
     ];
     const result = await validateReferences(savedObjects, savedObjectsClient);
     expect(result).toMatchInlineSnapshot(`
-Object {
-  "errors": Array [],
-  "filteredObjects": Array [
-    Object {
-      "attributes": Object {},
-      "id": "1",
-      "references": Array [],
-      "type": "index-pattern",
-    },
-    Object {
-      "attributes": Object {},
-      "id": "2",
-      "references": Array [
-        Object {
-          "id": "1",
-          "name": "ref_0",
-          "type": "index-pattern",
-        },
-      ],
-      "type": "visualization",
-    },
-  ],
-}
-`);
+      Object {
+        "errors": Array [],
+        "filteredObjects": Array [
+          Object {
+            "attributes": Object {},
+            "id": "1",
+            "references": Array [],
+            "type": "index-pattern",
+          },
+          Object {
+            "attributes": Object {},
+            "id": "2",
+            "references": Array [
+              Object {
+                "id": "1",
+                "name": "ref_0",
+                "type": "index-pattern",
+              },
+            ],
+            "type": "visualization",
+          },
+        ],
+      }
+    `);
     expect(savedObjectsClient.bulkGet).toHaveBeenCalledTimes(0);
   });
 
@@ -570,29 +570,29 @@ Object {
     ];
     const result = await validateReferences(savedObjects, savedObjectsClient);
     expect(result).toMatchInlineSnapshot(`
-Object {
-  "errors": Array [],
-  "filteredObjects": Array [
-    Object {
-      "attributes": Object {},
-      "id": "1",
-      "references": Array [
-        Object {
-          "id": "2",
-          "name": "ref_0",
-          "type": "visualization",
-        },
-        Object {
-          "id": "3",
-          "name": "ref_1",
-          "type": "other-type",
-        },
-      ],
-      "type": "dashboard",
-    },
-  ],
-}
-`);
+      Object {
+        "errors": Array [],
+        "filteredObjects": Array [
+          Object {
+            "attributes": Object {},
+            "id": "1",
+            "references": Array [
+              Object {
+                "id": "2",
+                "name": "ref_0",
+                "type": "visualization",
+              },
+              Object {
+                "id": "3",
+                "name": "ref_1",
+                "type": "other-type",
+              },
+            ],
+            "type": "dashboard",
+          },
+        ],
+      }
+    `);
     expect(savedObjectsClient.bulkGet).toHaveBeenCalledTimes(0);
   });
 
diff --git a/src/core/server/status/test_utils.ts b/src/core/server/status/test_utils.ts
index 765fa8771f375..737b34e2128b2 100644
--- a/src/core/server/status/test_utils.ts
+++ b/src/core/server/status/test_utils.ts
@@ -21,5 +21,5 @@ import { ServiceStatusLevels, ServiceStatusLevel } from './types';
 
 export const ServiceStatusLevelSnapshotSerializer: jest.SnapshotSerializerPlugin = {
   test: (val: any) => Object.values(ServiceStatusLevels).includes(val),
-  print: (val: ServiceStatusLevel) => val.toString(),
+  serialize: (val: ServiceStatusLevel) => val.toString(),
 };
diff --git a/src/core/server/ui_settings/create_or_upgrade_saved_config/integration_tests/create_or_upgrade.test.ts b/src/core/server/ui_settings/create_or_upgrade_saved_config/integration_tests/create_or_upgrade.test.ts
index 49d8137a65d39..adf36e4491b79 100644
--- a/src/core/server/ui_settings/create_or_upgrade_saved_config/integration_tests/create_or_upgrade.test.ts
+++ b/src/core/server/ui_settings/create_or_upgrade_saved_config/integration_tests/create_or_upgrade.test.ts
@@ -87,7 +87,6 @@ describe('createOrUpgradeSavedConfig()', () => {
   }, 30000);
 
   it('upgrades the previous version on each increment', async function () {
-    jest.setTimeout(30000);
     // ------------------------------------
     // upgrade to 5.4.0
     await createOrUpgradeSavedConfig({
@@ -211,5 +210,5 @@ describe('createOrUpgradeSavedConfig()', () => {
       '5.4.0': true,
       '5.4.0-rc1': true,
     });
-  });
+  }, 30000);
 });
diff --git a/src/core/test_helpers/strip_ansi_snapshot_serializer.ts b/src/core/test_helpers/strip_ansi_snapshot_serializer.ts
index bf8bd129c0bbf..d5b73dfd4d5ee 100644
--- a/src/core/test_helpers/strip_ansi_snapshot_serializer.ts
+++ b/src/core/test_helpers/strip_ansi_snapshot_serializer.ts
@@ -20,9 +20,9 @@
 import hasAnsi from 'has-ansi';
 import stripAnsi from 'strip-ansi';
 
-export const stripAnsiSnapshotSerializer = {
-  print(value: string, serialize: (val: string) => string) {
-    return serialize(stripAnsi(value));
+export const stripAnsiSnapshotSerializer: jest.SnapshotSerializerPlugin = {
+  serialize(value: string) {
+    return stripAnsi(value);
   },
 
   test(value: any) {
diff --git a/src/dev/jest/cli.js b/src/dev/jest/cli.js
index 1d63bb143fe16..40627c4bece74 100644
--- a/src/dev/jest/cli.js
+++ b/src/dev/jest/cli.js
@@ -17,6 +17,6 @@
  * under the License.
  */
 
-import jest from 'jest';
+import { run } from 'jest';
 
-jest.run(process.argv.slice(2));
+run(process.argv.slice(2));
diff --git a/src/dev/jest/config.js b/src/dev/jest/config.js
index 04b07748c4052..18fc7ebaa2af4 100644
--- a/src/dev/jest/config.js
+++ b/src/dev/jest/config.js
@@ -81,6 +81,7 @@ export default {
   coverageReporters: !!process.env.CODE_COVERAGE ? ['json'] : ['html', 'text'],
   moduleFileExtensions: ['js', 'json', 'ts', 'tsx', 'node'],
   modulePathIgnorePatterns: ['__fixtures__/', 'target/'],
+  testEnvironment: 'jest-environment-jsdom-thirteen',
   testMatch: ['**/*.test.{js,ts,tsx}'],
   testPathIgnorePatterns: [
     '<rootDir>/packages/kbn-ui-framework/(dist|doc_site|generator-kui)/',
diff --git a/src/dev/jest/setup/react_testing_library.js b/src/dev/jest/setup/react_testing_library.js
index 879292b540ba6..41f58354844a3 100644
--- a/src/dev/jest/setup/react_testing_library.js
+++ b/src/dev/jest/setup/react_testing_library.js
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 /**
  * Have to import "/pure" here to not register afterEach() hook clean up
  * in the very beginning. There are couple tests which fail with clean up hook.
diff --git a/src/legacy/utils/streams/filter_stream.test.ts b/src/legacy/utils/streams/filter_stream.test.ts
index 7f4901f31c173..28b7f2588628e 100644
--- a/src/legacy/utils/streams/filter_stream.test.ts
+++ b/src/legacy/utils/streams/filter_stream.test.ts
@@ -31,34 +31,34 @@ describe('createFilterStream()', () => {
     await createPromiseFromStreams([createListStream(['a', 'b', 'c']), createFilterStream(filter)]);
 
     expect(filter).toMatchInlineSnapshot(`
-[MockFunction] {
-  "calls": Array [
-    Array [
-      "a",
-    ],
-    Array [
-      "b",
-    ],
-    Array [
-      "c",
-    ],
-  ],
-  "results": Array [
-    Object {
-      "type": "return",
-      "value": true,
-    },
-    Object {
-      "type": "return",
-      "value": true,
-    },
-    Object {
-      "type": "return",
-      "value": true,
-    },
-  ],
-}
-`);
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            "a",
+          ],
+          Array [
+            "b",
+          ],
+          Array [
+            "c",
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": true,
+          },
+          Object {
+            "type": "return",
+            "value": true,
+          },
+          Object {
+            "type": "return",
+            "value": true,
+          },
+        ],
+      }
+    `);
   });
 
   test('send the filtered values on the output stream', async () => {
@@ -69,9 +69,9 @@ describe('createFilterStream()', () => {
     ]);
 
     expect(result).toMatchInlineSnapshot(`
-Array [
-  2,
-]
-`);
+      Array [
+        2,
+      ]
+    `);
   });
 });
diff --git a/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap b/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap
index 88f30e03df052..da18eb70e5874 100644
--- a/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap
+++ b/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap
@@ -381,7 +381,7 @@ exports[`Field for array setting should render user value if there is user value
     helpText={
       <span>
         <span>
-          <ForwardRef
+          <EuiLink
             aria-label="Reset array test setting to default"
             data-test-subj="advancedSetting-resetField-array:test:setting"
             onClick={[Function]}
@@ -391,7 +391,7 @@ exports[`Field for array setting should render user value if there is user value
               id="advancedSettings.field.resetToDefaultLinkText"
               values={Object {}}
             />
-          </ForwardRef>
+          </EuiLink>
              
         </span>
       </span>
@@ -818,7 +818,7 @@ exports[`Field for boolean setting should render user value if there is user val
     helpText={
       <span>
         <span>
-          <ForwardRef
+          <EuiLink
             aria-label="Reset boolean test setting to default"
             data-test-subj="advancedSetting-resetField-boolean:test:setting"
             onClick={[Function]}
@@ -828,7 +828,7 @@ exports[`Field for boolean setting should render user value if there is user val
               id="advancedSettings.field.resetToDefaultLinkText"
               values={Object {}}
             />
-          </ForwardRef>
+          </EuiLink>
              
         </span>
       </span>
@@ -1236,7 +1236,7 @@ exports[`Field for image setting should render user value if there is user value
     helpText={
       <span>
         <span>
-          <ForwardRef
+          <EuiLink
             aria-label="Reset image test setting to default"
             data-test-subj="advancedSetting-resetField-image:test:setting"
             onClick={[Function]}
@@ -1246,11 +1246,11 @@ exports[`Field for image setting should render user value if there is user value
               id="advancedSettings.field.resetToDefaultLinkText"
               values={Object {}}
             />
-          </ForwardRef>
+          </EuiLink>
              
         </span>
         <span>
-          <ForwardRef
+          <EuiLink
             aria-label="Change image test setting"
             data-test-subj="advancedSetting-changeImage-image:test:setting"
             onClick={[Function]}
@@ -1260,7 +1260,7 @@ exports[`Field for image setting should render user value if there is user value
               id="advancedSettings.field.changeImageLinkText"
               values={Object {}}
             />
-          </ForwardRef>
+          </EuiLink>
         </span>
       </span>
     }
@@ -1620,7 +1620,7 @@ exports[`Field for json setting should render default value if there is no user
     helpText={
       <span>
         <span>
-          <ForwardRef
+          <EuiLink
             aria-label="Reset json test setting to default"
             data-test-subj="advancedSetting-resetField-json:test:setting"
             onClick={[Function]}
@@ -1630,7 +1630,7 @@ exports[`Field for json setting should render default value if there is no user
               id="advancedSettings.field.resetToDefaultLinkText"
               values={Object {}}
             />
-          </ForwardRef>
+          </EuiLink>
              
         </span>
       </span>
@@ -1831,7 +1831,7 @@ exports[`Field for json setting should render user value if there is user value
     helpText={
       <span>
         <span>
-          <ForwardRef
+          <EuiLink
             aria-label="Reset json test setting to default"
             data-test-subj="advancedSetting-resetField-json:test:setting"
             onClick={[Function]}
@@ -1841,7 +1841,7 @@ exports[`Field for json setting should render user value if there is user value
               id="advancedSettings.field.resetToDefaultLinkText"
               values={Object {}}
             />
-          </ForwardRef>
+          </EuiLink>
              
         </span>
       </span>
@@ -2358,7 +2358,7 @@ exports[`Field for markdown setting should render user value if there is user va
     helpText={
       <span>
         <span>
-          <ForwardRef
+          <EuiLink
             aria-label="Reset markdown test setting to default"
             data-test-subj="advancedSetting-resetField-markdown:test:setting"
             onClick={[Function]}
@@ -2368,7 +2368,7 @@ exports[`Field for markdown setting should render user value if there is user va
               id="advancedSettings.field.resetToDefaultLinkText"
               values={Object {}}
             />
-          </ForwardRef>
+          </EuiLink>
              
         </span>
       </span>
@@ -2785,7 +2785,7 @@ exports[`Field for number setting should render user value if there is user valu
     helpText={
       <span>
         <span>
-          <ForwardRef
+          <EuiLink
             aria-label="Reset number test setting to default"
             data-test-subj="advancedSetting-resetField-number:test:setting"
             onClick={[Function]}
@@ -2795,7 +2795,7 @@ exports[`Field for number setting should render user value if there is user valu
               id="advancedSettings.field.resetToDefaultLinkText"
               values={Object {}}
             />
-          </ForwardRef>
+          </EuiLink>
              
         </span>
       </span>
@@ -3272,7 +3272,7 @@ exports[`Field for select setting should render user value if there is user valu
     helpText={
       <span>
         <span>
-          <ForwardRef
+          <EuiLink
             aria-label="Reset select test setting to default"
             data-test-subj="advancedSetting-resetField-select:test:setting"
             onClick={[Function]}
@@ -3282,7 +3282,7 @@ exports[`Field for select setting should render user value if there is user valu
               id="advancedSettings.field.resetToDefaultLinkText"
               values={Object {}}
             />
-          </ForwardRef>
+          </EuiLink>
              
         </span>
       </span>
@@ -3695,7 +3695,7 @@ exports[`Field for string setting should render user value if there is user valu
     helpText={
       <span>
         <span>
-          <ForwardRef
+          <EuiLink
             aria-label="Reset string test setting to default"
             data-test-subj="advancedSetting-resetField-string:test:setting"
             onClick={[Function]}
@@ -3705,7 +3705,7 @@ exports[`Field for string setting should render user value if there is user valu
               id="advancedSettings.field.resetToDefaultLinkText"
               values={Object {}}
             />
-          </ForwardRef>
+          </EuiLink>
              
         </span>
       </span>
@@ -4102,7 +4102,7 @@ exports[`Field for stringWithValidation setting should render user value if ther
     helpText={
       <span>
         <span>
-          <ForwardRef
+          <EuiLink
             aria-label="Reset string test validation setting to default"
             data-test-subj="advancedSetting-resetField-string:test-validation:setting"
             onClick={[Function]}
@@ -4112,7 +4112,7 @@ exports[`Field for stringWithValidation setting should render user value if ther
               id="advancedSettings.field.resetToDefaultLinkText"
               values={Object {}}
             />
-          </ForwardRef>
+          </EuiLink>
              
         </span>
       </span>
diff --git a/src/plugins/advanced_settings/public/management_app/components/form/__snapshots__/form.test.tsx.snap b/src/plugins/advanced_settings/public/management_app/components/form/__snapshots__/form.test.tsx.snap
index bce9cb67537db..e38ccb6866ab6 100644
--- a/src/plugins/advanced_settings/public/management_app/components/form/__snapshots__/form.test.tsx.snap
+++ b/src/plugins/advanced_settings/public/management_app/components/form/__snapshots__/form.test.tsx.snap
@@ -155,7 +155,7 @@ exports[`Form should not render no settings message when instructed not to 1`] =
                   id="advancedSettings.form.searchResultText"
                   values={
                     Object {
-                      "clearSearch": <ForwardRef
+                      "clearSearch": <EuiLink
                         onClick={[Function]}
                       >
                         <em>
@@ -165,7 +165,7 @@ exports[`Form should not render no settings message when instructed not to 1`] =
                             values={Object {}}
                           />
                         </em>
-                      </ForwardRef>,
+                      </EuiLink>,
                       "settingsCount": 9,
                     }
                   }
@@ -367,7 +367,7 @@ exports[`Form should render no settings message when there are no settings 1`] =
                   id="advancedSettings.form.searchResultText"
                   values={
                     Object {
-                      "clearSearch": <ForwardRef
+                      "clearSearch": <EuiLink
                         onClick={[Function]}
                       >
                         <em>
@@ -377,7 +377,7 @@ exports[`Form should render no settings message when there are no settings 1`] =
                             values={Object {}}
                           />
                         </em>
-                      </ForwardRef>,
+                      </EuiLink>,
                       "settingsCount": 9,
                     }
                   }
@@ -579,7 +579,7 @@ exports[`Form should render normally 1`] = `
                   id="advancedSettings.form.searchResultText"
                   values={
                     Object {
-                      "clearSearch": <ForwardRef
+                      "clearSearch": <EuiLink
                         onClick={[Function]}
                       >
                         <em>
@@ -589,7 +589,7 @@ exports[`Form should render normally 1`] = `
                             values={Object {}}
                           />
                         </em>
-                      </ForwardRef>,
+                      </EuiLink>,
                       "settingsCount": 9,
                     }
                   }
@@ -791,7 +791,7 @@ exports[`Form should render read-only when saving is disabled 1`] = `
                   id="advancedSettings.form.searchResultText"
                   values={
                     Object {
-                      "clearSearch": <ForwardRef
+                      "clearSearch": <EuiLink
                         onClick={[Function]}
                       >
                         <em>
@@ -801,7 +801,7 @@ exports[`Form should render read-only when saving is disabled 1`] = `
                             values={Object {}}
                           />
                         </em>
-                      </ForwardRef>,
+                      </EuiLink>,
                       "settingsCount": 9,
                     }
                   }
diff --git a/src/plugins/dashboard/public/application/listing/__snapshots__/dashboard_listing.test.js.snap b/src/plugins/dashboard/public/application/listing/__snapshots__/dashboard_listing.test.js.snap
index 54da8e383b47a..7985d34b117f5 100644
--- a/src/plugins/dashboard/public/application/listing/__snapshots__/dashboard_listing.test.js.snap
+++ b/src/plugins/dashboard/public/application/listing/__snapshots__/dashboard_listing.test.js.snap
@@ -101,7 +101,7 @@ exports[`after fetch initialFilter 1`] = `
                   id="dashboard.listing.createNewDashboard.newToKibanaDescription"
                   values={
                     Object {
-                      "sampleDataInstallLink": <ForwardRef
+                      "sampleDataInstallLink": <EuiLink
                         onClick={[Function]}
                       >
                         <FormattedMessage
@@ -109,7 +109,7 @@ exports[`after fetch initialFilter 1`] = `
                           id="dashboard.listing.createNewDashboard.sampleDataInstallLinkText"
                           values={Object {}}
                         />
-                      </ForwardRef>,
+                      </EuiLink>,
                     }
                   }
                 />
@@ -202,7 +202,7 @@ exports[`after fetch renders call to action when no dashboards exist 1`] = `
                   id="dashboard.listing.createNewDashboard.newToKibanaDescription"
                   values={
                     Object {
-                      "sampleDataInstallLink": <ForwardRef
+                      "sampleDataInstallLink": <EuiLink
                         onClick={[Function]}
                       >
                         <FormattedMessage
@@ -210,7 +210,7 @@ exports[`after fetch renders call to action when no dashboards exist 1`] = `
                           id="dashboard.listing.createNewDashboard.sampleDataInstallLinkText"
                           values={Object {}}
                         />
-                      </ForwardRef>,
+                      </EuiLink>,
                     }
                   }
                 />
@@ -303,7 +303,7 @@ exports[`after fetch renders table rows 1`] = `
                   id="dashboard.listing.createNewDashboard.newToKibanaDescription"
                   values={
                     Object {
-                      "sampleDataInstallLink": <ForwardRef
+                      "sampleDataInstallLink": <EuiLink
                         onClick={[Function]}
                       >
                         <FormattedMessage
@@ -311,7 +311,7 @@ exports[`after fetch renders table rows 1`] = `
                           id="dashboard.listing.createNewDashboard.sampleDataInstallLinkText"
                           values={Object {}}
                         />
-                      </ForwardRef>,
+                      </EuiLink>,
                     }
                   }
                 />
@@ -404,7 +404,7 @@ exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
                   id="dashboard.listing.createNewDashboard.newToKibanaDescription"
                   values={
                     Object {
-                      "sampleDataInstallLink": <ForwardRef
+                      "sampleDataInstallLink": <EuiLink
                         onClick={[Function]}
                       >
                         <FormattedMessage
@@ -412,7 +412,7 @@ exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
                           id="dashboard.listing.createNewDashboard.sampleDataInstallLinkText"
                           values={Object {}}
                         />
-                      </ForwardRef>,
+                      </EuiLink>,
                     }
                   }
                 />
@@ -505,7 +505,7 @@ exports[`renders empty page in before initial fetch to avoid flickering 1`] = `
                   id="dashboard.listing.createNewDashboard.newToKibanaDescription"
                   values={
                     Object {
-                      "sampleDataInstallLink": <ForwardRef
+                      "sampleDataInstallLink": <EuiLink
                         onClick={[Function]}
                       >
                         <FormattedMessage
@@ -513,7 +513,7 @@ exports[`renders empty page in before initial fetch to avoid flickering 1`] = `
                           id="dashboard.listing.createNewDashboard.sampleDataInstallLinkText"
                           values={Object {}}
                         />
-                      </ForwardRef>,
+                      </EuiLink>,
                     }
                   }
                 />
diff --git a/src/plugins/embeddable/public/lib/embeddables/embeddable_renderer.test.tsx b/src/plugins/embeddable/public/lib/embeddables/embeddable_renderer.test.tsx
index 18d064601eaed..51213288e47a7 100644
--- a/src/plugins/embeddable/public/lib/embeddables/embeddable_renderer.test.tsx
+++ b/src/plugins/embeddable/public/lib/embeddables/embeddable_renderer.test.tsx
@@ -20,7 +20,6 @@
 import React from 'react';
 import { wait } from '@testing-library/dom';
 import { cleanup, render } from '@testing-library/react/pure';
-import '@testing-library/jest-dom/extend-expect';
 import {
   HelloWorldEmbeddable,
   HelloWorldEmbeddableFactoryDefinition,
diff --git a/src/plugins/home/public/application/components/tutorial/__snapshots__/instruction_set.test.js.snap b/src/plugins/home/public/application/components/tutorial/__snapshots__/instruction_set.test.js.snap
index 9409963ff95aa..a9f9823047c0b 100644
--- a/src/plugins/home/public/application/components/tutorial/__snapshots__/instruction_set.test.js.snap
+++ b/src/plugins/home/public/application/components/tutorial/__snapshots__/instruction_set.test.js.snap
@@ -150,7 +150,7 @@ exports[`statusCheckState checking status 1`] = `
         },
         Object {
           "children": <React.Fragment>
-            <ForwardRef
+            <EuiFlexGroup
               alignItems="center"
               justifyContent="spaceBetween"
             >
@@ -169,7 +169,7 @@ exports[`statusCheckState checking status 1`] = `
                   custom btn label
                 </EuiButton>
               </EuiFlexItem>
-            </ForwardRef>
+            </EuiFlexGroup>
             <EuiSpacer
               size="s"
             />
@@ -257,7 +257,7 @@ exports[`statusCheckState failed status check - error 1`] = `
         },
         Object {
           "children": <React.Fragment>
-            <ForwardRef
+            <EuiFlexGroup
               alignItems="center"
               justifyContent="spaceBetween"
             >
@@ -276,7 +276,7 @@ exports[`statusCheckState failed status check - error 1`] = `
                   custom btn label
                 </EuiButton>
               </EuiFlexItem>
-            </ForwardRef>
+            </EuiFlexGroup>
             <EuiSpacer
               size="s"
             />
@@ -368,7 +368,7 @@ exports[`statusCheckState failed status check - no data 1`] = `
         },
         Object {
           "children": <React.Fragment>
-            <ForwardRef
+            <EuiFlexGroup
               alignItems="center"
               justifyContent="spaceBetween"
             >
@@ -387,7 +387,7 @@ exports[`statusCheckState failed status check - no data 1`] = `
                   custom btn label
                 </EuiButton>
               </EuiFlexItem>
-            </ForwardRef>
+            </EuiFlexGroup>
             <EuiSpacer
               size="s"
             />
@@ -479,7 +479,7 @@ exports[`statusCheckState initial state - no check has been attempted 1`] = `
         },
         Object {
           "children": <React.Fragment>
-            <ForwardRef
+            <EuiFlexGroup
               alignItems="center"
               justifyContent="spaceBetween"
             >
@@ -498,7 +498,7 @@ exports[`statusCheckState initial state - no check has been attempted 1`] = `
                   custom btn label
                 </EuiButton>
               </EuiFlexItem>
-            </ForwardRef>
+            </EuiFlexGroup>
             <EuiSpacer
               size="s"
             />
@@ -586,7 +586,7 @@ exports[`statusCheckState successful status check 1`] = `
         },
         Object {
           "children": <React.Fragment>
-            <ForwardRef
+            <EuiFlexGroup
               alignItems="center"
               justifyContent="spaceBetween"
             >
@@ -605,7 +605,7 @@ exports[`statusCheckState successful status check 1`] = `
                   custom btn label
                 </EuiButton>
               </EuiFlexItem>
-            </ForwardRef>
+            </EuiFlexGroup>
             <EuiSpacer
               size="s"
             />
diff --git a/src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap b/src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
index 595ad14bb0fe3..1e7b3d5c6284c 100644
--- a/src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
+++ b/src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
@@ -120,7 +120,7 @@ exports[`bulkCreate should display error message when bulkCreate request fails 1
       Array [
         Object {
           "children": <React.Fragment>
-            <ForwardRef
+            <EuiFlexGroup
               alignItems="center"
               justifyContent="spaceBetween"
             >
@@ -142,7 +142,7 @@ exports[`bulkCreate should display error message when bulkCreate request fails 1
                   Load Kibana objects
                 </EuiButton>
               </EuiFlexItem>
-            </ForwardRef>
+            </EuiFlexGroup>
             <EuiSpacer
               size="s"
             />
@@ -421,7 +421,7 @@ exports[`bulkCreate should display success message when bulkCreate is successful
       Array [
         Object {
           "children": <React.Fragment>
-            <ForwardRef
+            <EuiFlexGroup
               alignItems="center"
               justifyContent="spaceBetween"
             >
@@ -443,7 +443,7 @@ exports[`bulkCreate should display success message when bulkCreate is successful
                   Load Kibana objects
                 </EuiButton>
               </EuiFlexItem>
-            </ForwardRef>
+            </EuiFlexGroup>
             <EuiSpacer
               size="s"
             />
@@ -627,7 +627,7 @@ exports[`renders 1`] = `
     Array [
       Object {
         "children": <React.Fragment>
-          <ForwardRef
+          <EuiFlexGroup
             alignItems="center"
             justifyContent="spaceBetween"
           >
@@ -649,7 +649,7 @@ exports[`renders 1`] = `
                 Load Kibana objects
               </EuiButton>
             </EuiFlexItem>
-          </ForwardRef>
+          </EuiFlexGroup>
           <EuiSpacer
             size="s"
           />
diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/empty_state/__snapshots__/empty_state.test.tsx.snap b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/empty_state/__snapshots__/empty_state.test.tsx.snap
index 4ebb5db05753b..bb94a7aa0b4de 100644
--- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/empty_state/__snapshots__/empty_state.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/empty_state/__snapshots__/empty_state.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`EmptyState should render normally 1`] = `
         id="indexPatternManagement.createIndexPattern.emptyStateLabel.emptyStateDetail"
         values={
           Object {
-            "getStartedLink": <ForwardRef
+            "getStartedLink": <EuiLink
               href="/app/home#/tutorial_directory/sampleData"
             >
               <FormattedMessage
@@ -26,8 +26,8 @@ exports[`EmptyState should render normally 1`] = `
                 id="indexPatternManagement.createIndexPattern.emptyStateLabel.getStartedLink"
                 values={Object {}}
               />
-            </ForwardRef>,
-            "learnHowLink": <ForwardRef
+            </EuiLink>,
+            "learnHowLink": <EuiLink
               href="/app/home#/tutorial_directory"
             >
               <FormattedMessage
@@ -35,7 +35,7 @@ exports[`EmptyState should render normally 1`] = `
                 id="indexPatternManagement.createIndexPattern.emptyStateLabel.learnHowLink"
                 values={Object {}}
               />
-            </ForwardRef>,
+            </EuiLink>,
             "needToIndex": <EuiTextColor
               color="subdued"
             >
diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_time_field/components/time_field/__snapshots__/time_field.test.tsx.snap b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_time_field/components/time_field/__snapshots__/time_field.test.tsx.snap
index 7d056433f55df..886a4ccad39cc 100644
--- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_time_field/components/time_field/__snapshots__/time_field.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_time_field/components/time_field/__snapshots__/time_field.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`TimeField should render a loading state 1`] = `
       </div>
     }
     label={
-      <ForwardRef
+      <EuiFlexGroup
         alignItems="center"
         gutterSize="xs"
         justifyContent="spaceBetween"
@@ -50,7 +50,7 @@ exports[`TimeField should render a loading state 1`] = `
             size="s"
           />
         </EuiFlexItem>
-      </ForwardRef>
+      </EuiFlexGroup>
     }
     labelType="label"
   >
@@ -98,7 +98,7 @@ exports[`TimeField should render a selected time field 1`] = `
       </div>
     }
     label={
-      <ForwardRef
+      <EuiFlexGroup
         alignItems="center"
         gutterSize="xs"
         justifyContent="spaceBetween"
@@ -117,7 +117,7 @@ exports[`TimeField should render a selected time field 1`] = `
         <EuiFlexItem
           grow={false}
         >
-          <ForwardRef
+          <EuiLink
             className="timeFieldRefreshButton"
             onClick={[Function]}
           >
@@ -126,9 +126,9 @@ exports[`TimeField should render a selected time field 1`] = `
               id="indexPatternManagement.createIndexPattern.stepTime.refreshButton"
               values={Object {}}
             />
-          </ForwardRef>
+          </EuiLink>
         </EuiFlexItem>
-      </ForwardRef>
+      </EuiFlexGroup>
     }
     labelType="label"
   >
@@ -179,7 +179,7 @@ exports[`TimeField should render normally 1`] = `
       </div>
     }
     label={
-      <ForwardRef
+      <EuiFlexGroup
         alignItems="center"
         gutterSize="xs"
         justifyContent="spaceBetween"
@@ -198,7 +198,7 @@ exports[`TimeField should render normally 1`] = `
         <EuiFlexItem
           grow={false}
         >
-          <ForwardRef
+          <EuiLink
             className="timeFieldRefreshButton"
             onClick={[Function]}
           >
@@ -207,9 +207,9 @@ exports[`TimeField should render normally 1`] = `
               id="indexPatternManagement.createIndexPattern.stepTime.refreshButton"
               values={Object {}}
             />
-          </ForwardRef>
+          </EuiLink>
         </EuiFlexItem>
-      </ForwardRef>
+      </EuiFlexGroup>
     }
     labelType="label"
   >
diff --git a/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/call_outs/__snapshots__/call_outs.test.tsx.snap b/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/call_outs/__snapshots__/call_outs.test.tsx.snap
index 75ed855123524..5671ee173c8b0 100644
--- a/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/call_outs/__snapshots__/call_outs.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/call_outs/__snapshots__/call_outs.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`CallOuts should render normally 1`] = `
         values={
           Object {
             "deprecatedLangsInUse": "php",
-            "link": <ForwardRef
+            "link": <EuiLink
               href="http://www.elastic.co/painlessDocs"
             >
               <FormattedMessage
@@ -28,7 +28,7 @@ exports[`CallOuts should render normally 1`] = `
                 id="indexPatternManagement.editIndexPattern.scripted.deprecationLangLabel.painlessDescription"
                 values={Object {}}
               />
-            </ForwardRef>,
+            </EuiLink>,
           }
         }
       />
diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/bytes/__snapshots__/bytes.test.tsx.snap b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/bytes/__snapshots__/bytes.test.tsx.snap
index f3e529a8a1e1b..69ea6c481d49b 100644
--- a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/bytes/__snapshots__/bytes.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/bytes/__snapshots__/bytes.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`BytesFormatEditor should render normally 1`] = `
     hasEmptyLabelSpace={false}
     helpText={
       <span>
-        <ForwardRef
+        <EuiLink
           href="https://adamwdraper.github.io/Numeral-js/"
           target="_blank"
         >
@@ -23,7 +23,7 @@ exports[`BytesFormatEditor should render normally 1`] = `
           <EuiIcon
             type="link"
           />
-        </ForwardRef>
+        </EuiLink>
       </span>
     }
     isInvalid={false}
diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/date/__snapshots__/date.test.tsx.snap b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/date/__snapshots__/date.test.tsx.snap
index a4d780c59ca74..48a7c3e013b1a 100644
--- a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/date/__snapshots__/date.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/date/__snapshots__/date.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`DateFormatEditor should render normally 1`] = `
     hasEmptyLabelSpace={false}
     helpText={
       <span>
-        <ForwardRef
+        <EuiLink
           href="https://momentjs.com/"
           target="_blank"
         >
@@ -23,7 +23,7 @@ exports[`DateFormatEditor should render normally 1`] = `
           <EuiIcon
             type="link"
           />
-        </ForwardRef>
+        </EuiLink>
       </span>
     }
     isInvalid={false}
diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/date_nanos/__snapshots__/date_nanos.test.tsx.snap b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/date_nanos/__snapshots__/date_nanos.test.tsx.snap
index 8c6397ea3adeb..540c8ece9e35b 100644
--- a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/date_nanos/__snapshots__/date_nanos.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/date_nanos/__snapshots__/date_nanos.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`DateFormatEditor should render normally 1`] = `
     hasEmptyLabelSpace={false}
     helpText={
       <span>
-        <ForwardRef
+        <EuiLink
           href="https://momentjs.com/"
           target="_blank"
         >
@@ -23,7 +23,7 @@ exports[`DateFormatEditor should render normally 1`] = `
           <EuiIcon
             type="link"
           />
-        </ForwardRef>
+        </EuiLink>
       </span>
     }
     isInvalid={false}
diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/number/__snapshots__/number.test.tsx.snap b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/number/__snapshots__/number.test.tsx.snap
index 42c2323e56979..c73b5e7186547 100644
--- a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/number/__snapshots__/number.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/number/__snapshots__/number.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`NumberFormatEditor should render normally 1`] = `
     hasEmptyLabelSpace={false}
     helpText={
       <span>
-        <ForwardRef
+        <EuiLink
           href="https://adamwdraper.github.io/Numeral-js/"
           target="_blank"
         >
@@ -23,7 +23,7 @@ exports[`NumberFormatEditor should render normally 1`] = `
           <EuiIcon
             type="link"
           />
-        </ForwardRef>
+        </EuiLink>
       </span>
     }
     isInvalid={false}
diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/percent/__snapshots__/percent.test.tsx.snap b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/percent/__snapshots__/percent.test.tsx.snap
index ac512402b4d41..16ce8ca9643ef 100644
--- a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/percent/__snapshots__/percent.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/percent/__snapshots__/percent.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`PercentFormatEditor should render normally 1`] = `
     hasEmptyLabelSpace={false}
     helpText={
       <span>
-        <ForwardRef
+        <EuiLink
           href="https://adamwdraper.github.io/Numeral-js/"
           target="_blank"
         >
@@ -23,7 +23,7 @@ exports[`PercentFormatEditor should render normally 1`] = `
           <EuiIcon
             type="link"
           />
-        </ForwardRef>
+        </EuiLink>
       </span>
     }
     isInvalid={false}
diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/url/__snapshots__/url.test.tsx.snap b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/url/__snapshots__/url.test.tsx.snap
index aa69b8da6cf60..f862d0ebe8477 100644
--- a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/url/__snapshots__/url.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/url/__snapshots__/url.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`UrlFormatEditor should render label template help 1`] = `
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
     helpText={
-      <ForwardRef
+      <EuiLink
         onClick={[Function]}
       >
         <FormattedMessage
@@ -61,7 +61,7 @@ exports[`UrlFormatEditor should render label template help 1`] = `
           id="indexPatternManagement.url.template.helpLinkText"
           values={Object {}}
         />
-      </ForwardRef>
+      </EuiLink>
     }
     isInvalid={false}
     label={
@@ -86,7 +86,7 @@ exports[`UrlFormatEditor should render label template help 1`] = `
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
     helpText={
-      <ForwardRef
+      <EuiLink
         onClick={[Function]}
       >
         <FormattedMessage
@@ -94,7 +94,7 @@ exports[`UrlFormatEditor should render label template help 1`] = `
           id="indexPatternManagement.url.labelTemplateHelpText"
           values={Object {}}
         />
-      </ForwardRef>
+      </EuiLink>
     }
     isInvalid={false}
     label={
@@ -172,7 +172,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
     helpText={
-      <ForwardRef
+      <EuiLink
         onClick={[Function]}
       >
         <FormattedMessage
@@ -180,7 +180,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
           id="indexPatternManagement.url.template.helpLinkText"
           values={Object {}}
         />
-      </ForwardRef>
+      </EuiLink>
     }
     isInvalid={false}
     label={
@@ -205,7 +205,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
     helpText={
-      <ForwardRef
+      <EuiLink
         onClick={[Function]}
       >
         <FormattedMessage
@@ -213,7 +213,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
           id="indexPatternManagement.url.labelTemplateHelpText"
           values={Object {}}
         />
-      </ForwardRef>
+      </EuiLink>
     }
     isInvalid={false}
     label={
@@ -291,7 +291,7 @@ exports[`UrlFormatEditor should render url template help 1`] = `
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
     helpText={
-      <ForwardRef
+      <EuiLink
         onClick={[Function]}
       >
         <FormattedMessage
@@ -299,7 +299,7 @@ exports[`UrlFormatEditor should render url template help 1`] = `
           id="indexPatternManagement.url.template.helpLinkText"
           values={Object {}}
         />
-      </ForwardRef>
+      </EuiLink>
     }
     isInvalid={false}
     label={
@@ -324,7 +324,7 @@ exports[`UrlFormatEditor should render url template help 1`] = `
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
     helpText={
-      <ForwardRef
+      <EuiLink
         onClick={[Function]}
       >
         <FormattedMessage
@@ -332,7 +332,7 @@ exports[`UrlFormatEditor should render url template help 1`] = `
           id="indexPatternManagement.url.labelTemplateHelpText"
           values={Object {}}
         />
-      </ForwardRef>
+      </EuiLink>
     }
     isInvalid={false}
     label={
@@ -411,7 +411,7 @@ exports[`UrlFormatEditor should render width and height fields if image 1`] = `
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
     helpText={
-      <ForwardRef
+      <EuiLink
         onClick={[Function]}
       >
         <FormattedMessage
@@ -419,7 +419,7 @@ exports[`UrlFormatEditor should render width and height fields if image 1`] = `
           id="indexPatternManagement.url.template.helpLinkText"
           values={Object {}}
         />
-      </ForwardRef>
+      </EuiLink>
     }
     isInvalid={false}
     label={
@@ -444,7 +444,7 @@ exports[`UrlFormatEditor should render width and height fields if image 1`] = `
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
     helpText={
-      <ForwardRef
+      <EuiLink
         onClick={[Function]}
       >
         <FormattedMessage
@@ -452,7 +452,7 @@ exports[`UrlFormatEditor should render width and height fields if image 1`] = `
           id="indexPatternManagement.url.labelTemplateHelpText"
           values={Object {}}
         />
-      </ForwardRef>
+      </EuiLink>
     }
     isInvalid={false}
     label={
diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/scripting_call_outs/__snapshots__/warning_call_out.test.tsx.snap b/src/plugins/index_pattern_management/public/components/field_editor/components/scripting_call_outs/__snapshots__/warning_call_out.test.tsx.snap
index 2652e6b8ddd04..f63fb0709f6b3 100644
--- a/src/plugins/index_pattern_management/public/components/field_editor/components/scripting_call_outs/__snapshots__/warning_call_out.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/field_editor/components/scripting_call_outs/__snapshots__/warning_call_out.test.tsx.snap
@@ -60,7 +60,7 @@ exports[`ScriptingWarningCallOut should render normally 1`] = `
               id="indexPatternManagement.warningCallOutLabel.callOutDetail"
               values={
                 Object {
-                  "scripFields": <ForwardRef
+                  "scripFields": <EuiLink
                     href="https://www.elastic.co/guide/en/elasticsearch/reference/mocked-test-branch/search-request-script-fields.html"
                     target="_blank"
                   >
@@ -73,8 +73,8 @@ exports[`ScriptingWarningCallOut should render normally 1`] = `
                     <EuiIcon
                       type="link"
                     />
-                  </ForwardRef>,
-                  "scriptsInAggregation": <ForwardRef
+                  </EuiLink>,
+                  "scriptsInAggregation": <EuiLink
                     href="https://www.elastic.co/guide/en/elasticsearch/reference/mocked-test-branch/search-aggregations.html#_values_source"
                     target="_blank"
                   >
@@ -87,7 +87,7 @@ exports[`ScriptingWarningCallOut should render normally 1`] = `
                     <EuiIcon
                       type="link"
                     />
-                  </ForwardRef>,
+                  </EuiLink>,
                 }
               }
             >
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/flyout.test.tsx.snap b/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/flyout.test.tsx.snap
index b7bd9368e8b1c..9f43ecdf0673a 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/flyout.test.tsx.snap
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/flyout.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`Flyout conflicts should allow conflict resolution 1`] = `
             id="savedObjectsManagement.objectsTable.flyout.indexPatternConflictsDescription"
             values={
               Object {
-                "indexPatternLink": <ForwardRef
+                "indexPatternLink": <EuiLink
                   href=""
                 >
                   <FormattedMessage
@@ -51,7 +51,7 @@ exports[`Flyout conflicts should allow conflict resolution 1`] = `
                     id="savedObjectsManagement.objectsTable.flyout.indexPatternConflictsCalloutLinkText"
                     values={Object {}}
                   />
-                </ForwardRef>,
+                </EuiLink>,
               }
             }
           />
@@ -383,7 +383,7 @@ exports[`Flyout legacy conflicts should allow conflict resolution 1`] = `
             id="savedObjectsManagement.objectsTable.flyout.indexPatternConflictsDescription"
             values={
               Object {
-                "indexPatternLink": <ForwardRef
+                "indexPatternLink": <EuiLink
                   href=""
                 >
                   <FormattedMessage
@@ -391,7 +391,7 @@ exports[`Flyout legacy conflicts should allow conflict resolution 1`] = `
                     id="savedObjectsManagement.objectsTable.flyout.indexPatternConflictsCalloutLinkText"
                     values={Object {}}
                   />
-                </ForwardRef>,
+                </EuiLink>,
               }
             }
           />
@@ -545,7 +545,7 @@ Array [
         id="savedObjectsManagement.objectsTable.flyout.indexPatternConflictsDescription"
         values={
           Object {
-            "indexPatternLink": <ForwardRef
+            "indexPatternLink": <EuiLink
               href=""
             >
               <FormattedMessage
@@ -553,7 +553,7 @@ Array [
                 id="savedObjectsManagement.objectsTable.flyout.indexPatternConflictsCalloutLinkText"
                 values={Object {}}
               />
-            </ForwardRef>,
+            </EuiLink>,
           }
         }
       />
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.test.mocks.ts b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.test.mocks.ts
index 6b4659a6b5a13..97120fe7dc6b8 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.test.mocks.ts
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.test.mocks.ts
@@ -22,15 +22,19 @@ jest.doMock('@elastic/filesaver', () => ({
   saveAs: saveAsMock,
 }));
 
-jest.doMock('lodash', () => ({
-  ...jest.requireActual('lodash'),
-  debounce: (func: Function) => {
-    function debounced(this: any, ...args: any[]) {
-      return func.apply(this, args);
-    }
-    return debounced;
-  },
-}));
+jest.doMock('lodash', () => {
+  const original = jest.requireActual('lodash');
+
+  return {
+    ...original,
+    debounce: (func: Function) => {
+      function debounced(this: any, ...args: any[]) {
+        return func.apply(this, args);
+      }
+      return debounced;
+    },
+  };
+});
 
 export const findObjectsMock = jest.fn();
 jest.doMock('../../lib/find_objects', () => ({
diff --git a/src/plugins/share/public/components/__snapshots__/url_panel_content.test.tsx.snap b/src/plugins/share/public/components/__snapshots__/url_panel_content.test.tsx.snap
index cae7aa96a7c0e..9a7191519131c 100644
--- a/src/plugins/share/public/components/__snapshots__/url_panel_content.test.tsx.snap
+++ b/src/plugins/share/public/components/__snapshots__/url_panel_content.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`share url panel content render 1`] = `
             Object {
               "data-test-subj": "exportAsSnapshot",
               "id": "snapshot",
-              "label": <ForwardRef
+              "label": <EuiFlexGroup
                 gutterSize="none"
                 responsive={false}
               >
@@ -71,13 +71,13 @@ exports[`share url panel content render 1`] = `
                     position="bottom"
                   />
                 </EuiFlexItem>
-              </ForwardRef>,
+              </EuiFlexGroup>,
             },
             Object {
               "data-test-subj": "exportAsSavedObject",
               "disabled": true,
               "id": "savedObject",
-              "label": <ForwardRef
+              "label": <EuiFlexGroup
                 gutterSize="none"
                 responsive={false}
               >
@@ -108,7 +108,7 @@ exports[`share url panel content render 1`] = `
                     position="bottom"
                   />
                 </EuiFlexItem>
-              </ForwardRef>,
+              </EuiFlexGroup>,
             },
           ]
         }
@@ -202,7 +202,7 @@ exports[`share url panel content should enable saved object export option when o
             Object {
               "data-test-subj": "exportAsSnapshot",
               "id": "snapshot",
-              "label": <ForwardRef
+              "label": <EuiFlexGroup
                 gutterSize="none"
                 responsive={false}
               >
@@ -233,13 +233,13 @@ exports[`share url panel content should enable saved object export option when o
                     position="bottom"
                   />
                 </EuiFlexItem>
-              </ForwardRef>,
+              </EuiFlexGroup>,
             },
             Object {
               "data-test-subj": "exportAsSavedObject",
               "disabled": false,
               "id": "savedObject",
-              "label": <ForwardRef
+              "label": <EuiFlexGroup
                 gutterSize="none"
                 responsive={false}
               >
@@ -270,7 +270,7 @@ exports[`share url panel content should enable saved object export option when o
                     position="bottom"
                   />
                 </EuiFlexItem>
-              </ForwardRef>,
+              </EuiFlexGroup>,
             },
           ]
         }
@@ -364,7 +364,7 @@ exports[`share url panel content should hide short url section when allowShortUr
             Object {
               "data-test-subj": "exportAsSnapshot",
               "id": "snapshot",
-              "label": <ForwardRef
+              "label": <EuiFlexGroup
                 gutterSize="none"
                 responsive={false}
               >
@@ -395,13 +395,13 @@ exports[`share url panel content should hide short url section when allowShortUr
                     position="bottom"
                   />
                 </EuiFlexItem>
-              </ForwardRef>,
+              </EuiFlexGroup>,
             },
             Object {
               "data-test-subj": "exportAsSavedObject",
               "disabled": false,
               "id": "savedObject",
-              "label": <ForwardRef
+              "label": <EuiFlexGroup
                 gutterSize="none"
                 responsive={false}
               >
@@ -432,7 +432,7 @@ exports[`share url panel content should hide short url section when allowShortUr
                     position="bottom"
                   />
                 </EuiFlexItem>
-              </ForwardRef>,
+              </EuiFlexGroup>,
             },
           ]
         }
@@ -481,7 +481,7 @@ exports[`should show url param extensions 1`] = `
             Object {
               "data-test-subj": "exportAsSnapshot",
               "id": "snapshot",
-              "label": <ForwardRef
+              "label": <EuiFlexGroup
                 gutterSize="none"
                 responsive={false}
               >
@@ -512,13 +512,13 @@ exports[`should show url param extensions 1`] = `
                     position="bottom"
                   />
                 </EuiFlexItem>
-              </ForwardRef>,
+              </EuiFlexGroup>,
             },
             Object {
               "data-test-subj": "exportAsSavedObject",
               "disabled": false,
               "id": "savedObject",
-              "label": <ForwardRef
+              "label": <EuiFlexGroup
                 gutterSize="none"
                 responsive={false}
               >
@@ -549,7 +549,7 @@ exports[`should show url param extensions 1`] = `
                     position="bottom"
                   />
                 </EuiFlexItem>
-              </ForwardRef>,
+              </EuiFlexGroup>,
             },
           ]
         }
diff --git a/src/plugins/telemetry/public/components/__snapshots__/opt_in_message.test.tsx.snap b/src/plugins/telemetry/public/components/__snapshots__/opt_in_message.test.tsx.snap
index 7fa69a7409c6a..4c151e44cbfea 100644
--- a/src/plugins/telemetry/public/components/__snapshots__/opt_in_message.test.tsx.snap
+++ b/src/plugins/telemetry/public/components/__snapshots__/opt_in_message.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`OptInMessage renders as expected 1`] = `
     id="telemetry.telemetryBannerDescription"
     values={
       Object {
-        "privacyStatementLink": <ForwardRef
+        "privacyStatementLink": <EuiLink
           href="https://www.elastic.co/legal/privacy-statement"
           rel="noopener"
           target="_blank"
@@ -17,7 +17,7 @@ exports[`OptInMessage renders as expected 1`] = `
             id="telemetry.welcomeBanner.telemetryConfigDetailsDescription.telemetryPrivacyStatementLinkText"
             values={Object {}}
           />
-        </ForwardRef>,
+        </EuiLink>,
       }
     }
   />
diff --git a/src/plugins/telemetry/public/components/__snapshots__/opted_in_notice_banner.test.tsx.snap b/src/plugins/telemetry/public/components/__snapshots__/opted_in_notice_banner.test.tsx.snap
index dd774d956dc10..62998da73d6f9 100644
--- a/src/plugins/telemetry/public/components/__snapshots__/opted_in_notice_banner.test.tsx.snap
+++ b/src/plugins/telemetry/public/components/__snapshots__/opted_in_notice_banner.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`OptInDetailsComponent renders as expected 1`] = `
     id="telemetry.telemetryOptedInNoticeDescription"
     values={
       Object {
-        "disableLink": <ForwardRef
+        "disableLink": <EuiLink
           href="management/kibana/settings"
           onClick={[Function]}
         >
@@ -18,8 +18,8 @@ exports[`OptInDetailsComponent renders as expected 1`] = `
             id="telemetry.telemetryOptedInDisableUsage"
             values={Object {}}
           />
-        </ForwardRef>,
-        "privacyStatementLink": <ForwardRef
+        </EuiLink>,
+        "privacyStatementLink": <EuiLink
           href="https://www.elastic.co/legal/privacy-statement"
           onClick={[Function]}
           rel="noopener"
@@ -30,7 +30,7 @@ exports[`OptInDetailsComponent renders as expected 1`] = `
             id="telemetry.telemetryOptedInPrivacyStatement"
             values={Object {}}
           />
-        </ForwardRef>,
+        </EuiLink>,
       }
     }
   />
diff --git a/src/plugins/telemetry/public/services/telemetry_sender.test.ts b/src/plugins/telemetry/public/services/telemetry_sender.test.ts
index e9f5765c10412..9d052254c46cf 100644
--- a/src/plugins/telemetry/public/services/telemetry_sender.test.ts
+++ b/src/plugins/telemetry/public/services/telemetry_sender.test.ts
@@ -26,18 +26,22 @@ class LocalStorageMock implements Partial<Storage> {
   getItem = jest.fn();
   setItem = jest.fn();
 }
+const mockLocalStorage = new LocalStorageMock();
+const originalLocalStorage = window.localStorage;
+Object.defineProperty(window, 'localStorage', {
+  value: mockLocalStorage,
+});
 
 describe('TelemetrySender', () => {
-  let originalLocalStorage: Storage;
-  let mockLocalStorage: LocalStorageMock;
-  beforeAll(() => {
-    originalLocalStorage = window.localStorage;
+  beforeEach(() => {
+    mockLocalStorage.getItem.mockClear();
+    mockLocalStorage.setItem.mockClear();
   });
-
-  // @ts-ignore
-  beforeEach(() => (window.localStorage = mockLocalStorage = new LocalStorageMock()));
-  // @ts-ignore
-  afterAll(() => (window.localStorage = originalLocalStorage));
+  afterAll(() =>
+    Object.defineProperty(window, 'localStorage', {
+      value: originalLocalStorage,
+    })
+  );
 
   describe('constructor', () => {
     it('defaults lastReport if unset', () => {
diff --git a/src/plugins/telemetry_management_section/public/components/__snapshots__/telemetry_management_section.test.tsx.snap b/src/plugins/telemetry_management_section/public/components/__snapshots__/telemetry_management_section.test.tsx.snap
index c392d8ce64205..dd4ee61fd1148 100644
--- a/src/plugins/telemetry_management_section/public/components/__snapshots__/telemetry_management_section.test.tsx.snap
+++ b/src/plugins/telemetry_management_section/public/components/__snapshots__/telemetry_management_section.test.tsx.snap
@@ -65,7 +65,7 @@ exports[`TelemetryManagementSectionComponent renders as expected 1`] = `
                   id="telemetry.telemetryConfigAndLinkDescription"
                   values={
                     Object {
-                      "privacyStatementLink": <ForwardRef
+                      "privacyStatementLink": <EuiLink
                         href="https://www.elastic.co/legal/privacy-statement"
                         target="_blank"
                       >
@@ -74,13 +74,13 @@ exports[`TelemetryManagementSectionComponent renders as expected 1`] = `
                           id="telemetry.readOurUsageDataPrivacyStatementLinkText"
                           values={Object {}}
                         />
-                      </ForwardRef>,
+                      </EuiLink>,
                     }
                   }
                 />
               </p>
               <p>
-                <ForwardRef
+                <EuiLink
                   onClick={[Function]}
                 >
                   <FormattedMessage
@@ -88,7 +88,7 @@ exports[`TelemetryManagementSectionComponent renders as expected 1`] = `
                     id="telemetry.seeExampleOfWhatWeCollectLinkText"
                     values={Object {}}
                   />
-                </ForwardRef>
+                </EuiLink>
               </p>
             </React.Fragment>,
             "displayName": "Provide usage statistics",
diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx
index c203642f353c5..65d148cfc5ef4 100644
--- a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx
+++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx
@@ -26,10 +26,14 @@ import { EuiButtonGroup } from '@elastic/eui';
 import { VisLegend, VisLegendProps } from './legend';
 import { legendColors } from './models';
 
-jest.mock('@elastic/eui', () => ({
-  ...jest.requireActual('@elastic/eui'),
-  htmlIdGenerator: jest.fn().mockReturnValue(() => 'legendId'),
-}));
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+
+  return {
+    ...original,
+    htmlIdGenerator: jest.fn().mockReturnValue(() => 'legendId'),
+  };
+});
 
 jest.mock('../../../services', () => ({
   getDataActions: () => ({
diff --git a/src/plugins/visualizations/public/wizard/new_vis_modal.test.tsx b/src/plugins/visualizations/public/wizard/new_vis_modal.test.tsx
index eb64f84ca59c4..57e30631becbc 100644
--- a/src/plugins/visualizations/public/wizard/new_vis_modal.test.tsx
+++ b/src/plugins/visualizations/public/wizard/new_vis_modal.test.tsx
@@ -24,7 +24,6 @@ import { NewVisModal } from './new_vis_modal';
 import { ApplicationStart, SavedObjectsStart } from '../../../../core/public';
 
 describe('NewVisModal', () => {
-  const { location } = window;
   const defaultVisTypeParams = {
     hidden: false,
     visualization: class Controller {
@@ -65,12 +64,16 @@ describe('NewVisModal', () => {
   const settingsGet = jest.fn();
   const uiSettings: any = { get: settingsGet };
 
-  beforeEach(() => {
-    jest.clearAllMocks();
+  beforeAll(() => {
+    Object.defineProperty(window, 'location', {
+      value: {
+        assign: jest.fn(),
+      },
+    });
   });
 
-  afterAll(() => {
-    window.location = location;
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
 
   it('should render as expected', () => {
@@ -105,7 +108,6 @@ describe('NewVisModal', () => {
 
   describe('open editor', () => {
     it('should open the editor for visualizations without search', () => {
-      window.location.assign = jest.fn();
       const wrapper = mountWithIntl(
         <NewVisModal
           isOpen={true}
@@ -123,7 +125,6 @@ describe('NewVisModal', () => {
     });
 
     it('passes through editor params to the editor URL', () => {
-      window.location.assign = jest.fn();
       const wrapper = mountWithIntl(
         <NewVisModal
           isOpen={true}
diff --git a/src/test_utils/public/testbed/types.ts b/src/test_utils/public/testbed/types.ts
index 8e9effba94268..39422fa68081b 100644
--- a/src/test_utils/public/testbed/types.ts
+++ b/src/test_utils/public/testbed/types.ts
@@ -97,18 +97,22 @@ export interface TestBed<T = string> {
      * For the <EuiSuperSelect /> you need to mock it like this
      *
      ```typescript
-     jest.mock('@elastic/eui', () => ({
-        ...jest.requireActual('@elastic/eui'),
+    jest.mock('@elastic/eui', () => {
+      const original = jest.requireActual('@elastic/eui');
+
+      return {
+        ...original,
         EuiSuperSelect: (props: any) => (
           <input
             data-test-subj={props['data-test-subj'] || 'mockSuperSelect'}
             value={props.valueOfSelected}
-            onChange={e => {
+            onChange={(e) => {
               props.onChange(e.target.value);
             }}
           />
         ),
-      }));
+      };
+    });
      ```
      * @param select The form select. Can either be a data-test-subj or a reactWrapper (can be a nested path. e.g. "myForm.myInput").
      * @param value The value to set
diff --git a/tsconfig.json b/tsconfig.json
index 811b05abeb648..66906fb18bb80 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -53,7 +53,9 @@
       "node",
       "jest",
       "react",
-      "flot"
+      "flot",
+      "jest-styled-components",
+      "@testing-library/jest-dom"
     ]
   },
   "include": [
diff --git a/x-pack/dev-tools/jest/create_jest_config.js b/x-pack/dev-tools/jest/create_jest_config.js
index 4bf03828bb461..5e0062fc3a6c6 100644
--- a/x-pack/dev-tools/jest/create_jest_config.js
+++ b/x-pack/dev-tools/jest/create_jest_config.js
@@ -58,7 +58,9 @@ export function createJestConfig({ kibanaDirectory, rootDir, xPackKibanaDirector
       `${kibanaDirectory}/src/dev/jest/setup/mocks.js`,
       `${kibanaDirectory}/src/dev/jest/setup/react_testing_library.js`,
     ],
+    testEnvironment: 'jest-environment-jsdom-thirteen',
     testMatch: ['**/*.test.{js,ts,tsx}'],
+    testRunner: 'jest-circus/runner',
     transform: {
       '^.+\\.(js|tsx?)$': `${kibanaDirectory}/src/dev/jest/babel_transform.js`,
       '^.+\\.html?$': 'jest-raw-loader',
diff --git a/x-pack/dev-tools/jest/index.js b/x-pack/dev-tools/jest/index.js
index 2f831e33cdd11..c22f8625c5778 100644
--- a/x-pack/dev-tools/jest/index.js
+++ b/x-pack/dev-tools/jest/index.js
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import jest from 'jest';
+import { run } from 'jest';
 import { resolve } from 'path';
 
 import { createJestConfig } from './create_jest_config';
@@ -21,5 +21,5 @@ export function runJest() {
 
   const argv = [...process.argv.slice(2), '--config', config];
 
-  return jest.run(argv);
+  return run(argv);
 }
diff --git a/x-pack/dev-tools/jest/setup/setup_test.js b/x-pack/dev-tools/jest/setup/setup_test.js
index 533ea58a561ac..0f044717ac789 100644
--- a/x-pack/dev-tools/jest/setup/setup_test.js
+++ b/x-pack/dev-tools/jest/setup/setup_test.js
@@ -10,3 +10,4 @@
 */
 
 import 'jest-styled-components';
+import '@testing-library/jest-dom';
diff --git a/x-pack/package.json b/x-pack/package.json
index b40a1e4364251..ad8c12d41000c 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -47,7 +47,7 @@
     "@storybook/theming": "^5.2.6",
     "@testing-library/react": "^9.3.2",
     "@testing-library/react-hooks": "^3.2.1",
-    "@testing-library/jest-dom": "4.2.0",
+    "@testing-library/jest-dom": "^5.8.0",
     "@types/angular": "^1.6.56",
     "@types/archiver": "^3.0.0",
     "@types/base64-js": "^1.2.5",
@@ -74,11 +74,11 @@
     "@types/hapi__wreck": "^15.0.1",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/history": "^4.7.3",
-    "@types/jest": "24.0.19",
+    "@types/jest": "^25.2.3",
     "@types/joi": "^13.4.2",
     "@types/js-search": "^1.4.0",
     "@types/js-yaml": "^3.11.1",
-    "@types/jsdom": "^12.2.4",
+    "@types/jsdom": "^16.2.3",
     "@types/json-stable-stringify": "^1.0.32",
     "@types/jsonwebtoken": "^7.2.8",
     "@types/lodash": "^3.10.1",
@@ -111,6 +111,7 @@
     "@types/styled-components": "^5.1.0",
     "@types/supertest": "^2.0.5",
     "@types/tar-fs": "^1.16.1",
+    "@types/testing-library__jest-dom": "^5.7.0",
     "@types/tinycolor2": "^1.4.1",
     "@types/use-resize-observer": "^6.0.0",
     "@types/uuid": "^3.4.4",
@@ -121,10 +122,11 @@
     "@welldone-software/why-did-you-render": "^4.0.0",
     "abab": "^1.0.4",
     "axios": "^0.19.0",
-    "babel-jest": "^24.9.0",
+    "babel-jest": "^25.5.1",
     "babel-plugin-require-context-hook": "npm:babel-plugin-require-context-hook-babel7@1.0.0",
     "base64-js": "^1.3.1",
     "base64url": "^3.0.1",
+    "canvas": "^2.6.1",
     "chalk": "^2.4.2",
     "chance": "1.0.18",
     "cheerio": "0.22.0",
@@ -149,10 +151,11 @@
     "gulp": "4.0.2",
     "hapi": "^17.5.3",
     "hoist-non-react-statics": "^3.3.2",
-    "jest": "^24.9.0",
-    "jest-cli": "^24.9.0",
+    "jest": "^25.5.4",
+    "jest-circus": "^25.5.4",
+    "jest-cli": "^25.5.4",
     "jest-styled-components": "^7.0.2",
-    "jsdom": "^15.2.1",
+    "jsdom": "13.1.0",
     "loader-utils": "^1.2.3",
     "madge": "3.4.4",
     "marge": "^1.0.1",
@@ -168,7 +171,7 @@
     "proxyquire": "1.8.0",
     "react-docgen-typescript-loader": "^3.1.1",
     "react-test-renderer": "^16.12.0",
-    "rxjs-marbles": "^5.0.3",
+    "rxjs-marbles": "^5.0.6",
     "sass-loader": "^8.0.2",
     "sass-resources-loader": "^2.0.1",
     "simple-git": "1.116.0",
@@ -347,7 +350,7 @@
     "reselect": "^4.0.0",
     "resize-observer-polyfill": "^1.5.0",
     "rison-node": "0.3.1",
-    "rxjs": "^6.5.3",
+    "rxjs": "^6.5.5",
     "semver": "5.7.0",
     "set-value": "^3.0.2",
     "squel": "^5.13.0",
diff --git a/x-pack/plugins/apm/public/components/app/APMIndicesPermission/index.test.tsx b/x-pack/plugins/apm/public/components/app/APMIndicesPermission/index.test.tsx
index f42ae4596c3a9..f5d3edf98662e 100644
--- a/x-pack/plugins/apm/public/components/app/APMIndicesPermission/index.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/APMIndicesPermission/index.test.tsx
@@ -17,21 +17,23 @@ import { MockApmPluginContextWrapper } from '../../../context/ApmPluginContext/M
 
 describe('APMIndicesPermission', () => {
   it('returns empty component when api status is loading', () => {
-    spyOn(hooks, 'useFetcher').and.returnValue({
+    jest.spyOn(hooks, 'useFetcher').mockReturnValue({
       status: hooks.FETCH_STATUS.LOADING,
+      refetch: jest.fn(),
     });
     const component = shallow(<APMIndicesPermission />);
     expect(component.isEmptyRender()).toBeTruthy();
   });
   it('returns empty component when api status is pending', () => {
-    spyOn(hooks, 'useFetcher').and.returnValue({
+    jest.spyOn(hooks, 'useFetcher').mockReturnValue({
       status: hooks.FETCH_STATUS.PENDING,
+      refetch: jest.fn(),
     });
     const component = shallow(<APMIndicesPermission />);
     expect(component.isEmptyRender()).toBeTruthy();
   });
   it('renders missing permission page', () => {
-    spyOn(hooks, 'useFetcher').and.returnValue({
+    jest.spyOn(hooks, 'useFetcher').mockReturnValue({
       status: hooks.FETCH_STATUS.SUCCESS,
       data: {
         has_all_requested: false,
@@ -39,6 +41,7 @@ describe('APMIndicesPermission', () => {
           'apm-*': { read: false },
         },
       },
+      refetch: jest.fn(),
     });
     const component = render(
       <MockApmPluginContextWrapper>
@@ -53,12 +56,13 @@ describe('APMIndicesPermission', () => {
   });
 
   it('shows children component when no index is returned', () => {
-    spyOn(hooks, 'useFetcher').and.returnValue({
+    jest.spyOn(hooks, 'useFetcher').mockReturnValue({
       status: hooks.FETCH_STATUS.SUCCESS,
       data: {
         has_all_requested: false,
         index: {},
       },
+      refetch: jest.fn(),
     });
     const component = render(
       <MockApmPluginContextWrapper>
@@ -72,12 +76,13 @@ describe('APMIndicesPermission', () => {
   });
 
   it('shows children component when indices have read privileges', () => {
-    spyOn(hooks, 'useFetcher').and.returnValue({
+    jest.spyOn(hooks, 'useFetcher').mockReturnValue({
       status: hooks.FETCH_STATUS.SUCCESS,
       data: {
         has_all_requested: true,
         index: {},
       },
+      refetch: jest.fn(),
     });
     const component = render(
       <MockApmPluginContextWrapper>
@@ -91,7 +96,7 @@ describe('APMIndicesPermission', () => {
   });
 
   it('dismesses the warning by clicking on the escape hatch', () => {
-    spyOn(hooks, 'useFetcher').and.returnValue({
+    jest.spyOn(hooks, 'useFetcher').mockReturnValue({
       status: hooks.FETCH_STATUS.SUCCESS,
       data: {
         has_all_requested: false,
@@ -102,6 +107,7 @@ describe('APMIndicesPermission', () => {
           'apm-span-*': { read: true },
         },
       },
+      refetch: jest.fn(),
     });
     const component = render(
       <MockApmPluginContextWrapper>
@@ -122,7 +128,10 @@ describe('APMIndicesPermission', () => {
   });
 
   it("shows children component when api doesn't return value", () => {
-    spyOn(hooks, 'useFetcher').and.returnValue({});
+    jest.spyOn(hooks, 'useFetcher').mockReturnValue({
+      status: hooks.FETCH_STATUS.SUCCESS,
+      refetch: jest.fn(),
+    });
     const component = render(
       <MockApmPluginContextWrapper>
         <APMIndicesPermission>
diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/__test__/__snapshots__/List.test.js.snap b/x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/__test__/__snapshots__/List.test.js.snap
index 904e16f92f4a0..146f6f58031bb 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/__test__/__snapshots__/List.test.js.snap
+++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/__test__/__snapshots__/List.test.js.snap
@@ -7,11 +7,11 @@ exports[`ServiceOverview -> List should render columns correctly 1`] = `
   id="service-name-tooltip"
   position="top"
 >
-  <ForwardRef(Styled(TransactionOverviewLink))
+  <Styled(TransactionOverviewLink)
     serviceName="opbeans-python"
   >
     opbeans-python
-  </ForwardRef(Styled(TransactionOverviewLink))>
+  </Styled(TransactionOverviewLink)>
 </EuiToolTip>
 `;
 
diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx
index 949efa2b8dfc0..78d78c6909c57 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx
@@ -59,11 +59,13 @@ describe('Service Overview -> View', () => {
     global.sessionStorage = new SessionStorageMock();
 
     // mock urlParams
-    spyOn(urlParamsHooks, 'useUrlParams').and.returnValue({
+    jest.spyOn(urlParamsHooks, 'useUrlParams').mockReturnValue({
       urlParams: {
         start: 'myStart',
         end: 'myEnd',
       },
+      refreshTimeRange: jest.fn(),
+      uiFilters: {},
     });
 
     jest.spyOn(useLocalUIFilters, 'useLocalUIFilters').mockReturnValue({
diff --git a/x-pack/plugins/apm/public/components/app/Settings/ApmIndices/index.test.tsx b/x-pack/plugins/apm/public/components/app/Settings/ApmIndices/index.test.tsx
index b1c7ab3d19889..68e75d595363d 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/ApmIndices/index.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/ApmIndices/index.test.tsx
@@ -12,9 +12,10 @@ import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContex
 
 describe('ApmIndices', () => {
   it('should not get stuck in infinite loop', () => {
-    const spy = spyOn(hooks, 'useFetcher').and.returnValue({
+    const spy = jest.spyOn(hooks, 'useFetcher').mockReturnValue({
       data: undefined,
-      status: 'loading',
+      status: hooks.FETCH_STATUS.LOADING,
+      refetch: jest.fn(),
     });
     const { getByText } = render(
       <MockApmPluginContextWrapper>
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkPreview.test.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkPreview.test.tsx
index 7b98f978f0f2f..62aa08c223bde 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkPreview.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkPreview.test.tsx
@@ -15,9 +15,9 @@ import {
 import * as apmApi from '../../../../../../services/rest/createCallApmApi';
 
 describe('LinkPreview', () => {
-  let callApmApiSpy: jasmine.Spy;
+  let callApmApiSpy: jest.SpyInstance<any, never>;
   beforeAll(() => {
-    callApmApiSpy = spyOn(apmApi, 'callApmApi').and.returnValue({
+    callApmApiSpy = jest.spyOn(apmApi, 'callApmApi').mockReturnValue({
       transaction: { id: 'foo' },
     });
   });
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.test.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.test.tsx
index 6b27fbdaaf66b..d633d466b6614 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.test.tsx
@@ -35,9 +35,9 @@ const data = [
 ];
 
 describe('CustomLink', () => {
-  let callApmApiSpy: jasmine.Spy;
+  let callApmApiSpy: jest.SpyInstance<any, never>;
   beforeAll(() => {
-    callApmApiSpy = spyOn(apmApi, 'callApmApi').and.returnValue({});
+    callApmApiSpy = jest.spyOn(apmApi, 'callApmApi').mockReturnValue({});
   });
   afterAll(() => {
     jest.resetAllMocks();
@@ -54,9 +54,10 @@ describe('CustomLink', () => {
   });
   describe('empty prompt', () => {
     beforeAll(() => {
-      spyOn(hooks, 'useFetcher').and.returnValue({
+      jest.spyOn(hooks, 'useFetcher').mockReturnValue({
         data: [],
-        status: 'success',
+        status: hooks.FETCH_STATUS.SUCCESS,
+        refetch: jest.fn(),
       });
     });
 
@@ -75,9 +76,10 @@ describe('CustomLink', () => {
 
   describe('overview', () => {
     beforeAll(() => {
-      spyOn(hooks, 'useFetcher').and.returnValue({
+      jest.spyOn(hooks, 'useFetcher').mockReturnValue({
         data,
-        status: 'success',
+        status: hooks.FETCH_STATUS.SUCCESS,
+        refetch: jest.fn(),
       });
     });
 
@@ -120,18 +122,16 @@ describe('CustomLink', () => {
 
   describe('Flyout', () => {
     const refetch = jest.fn();
-    let saveCustomLinkSpy: Function;
+    let saveCustomLinkSpy: jest.SpyInstance;
+
     beforeAll(() => {
-      saveCustomLinkSpy = spyOn(saveCustomLink, 'saveCustomLink');
-      spyOn(hooks, 'useFetcher').and.returnValue({
+      saveCustomLinkSpy = jest.spyOn(saveCustomLink, 'saveCustomLink');
+      jest.spyOn(hooks, 'useFetcher').mockReturnValue({
         data,
-        status: 'success',
+        status: hooks.FETCH_STATUS.SUCCESS,
         refetch,
       });
     });
-    afterEach(() => {
-      jest.resetAllMocks();
-    });
 
     const openFlyout = async () => {
       const component = render(
@@ -268,9 +268,10 @@ describe('CustomLink', () => {
 
   describe('invalid license', () => {
     beforeAll(() => {
-      spyOn(hooks, 'useFetcher').and.returnValue({
+      jest.spyOn(hooks, 'useFetcher').mockReturnValue({
         data: [],
-        status: 'success',
+        status: hooks.FETCH_STATUS.SUCCESS,
+        refetch: jest.fn(),
       });
     });
     it('shows license prompt when user has a basic license', () => {
diff --git a/x-pack/plugins/apm/public/components/app/TraceLink/__test__/TraceLink.test.tsx b/x-pack/plugins/apm/public/components/app/TraceLink/__test__/TraceLink.test.tsx
index 0488815308aab..bbaf6340e18f7 100644
--- a/x-pack/plugins/apm/public/components/app/TraceLink/__test__/TraceLink.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/TraceLink/__test__/TraceLink.test.tsx
@@ -36,16 +36,19 @@ describe('TraceLink', () => {
   });
 
   it('renders trace page when transaction is not found', () => {
-    spyOn(urlParamsHooks, 'useUrlParams').and.returnValue({
+    jest.spyOn(urlParamsHooks, 'useUrlParams').mockReturnValue({
       urlParams: {
         traceIdLink: '123',
         rangeFrom: 'now-24h',
         rangeTo: 'now',
       },
+      refreshTimeRange: jest.fn(),
+      uiFilters: {},
     });
-    spyOn(hooks, 'useFetcher').and.returnValue({
+    jest.spyOn(hooks, 'useFetcher').mockReturnValue({
       data: { transaction: undefined },
-      status: 'success',
+      status: hooks.FETCH_STATUS.SUCCESS,
+      refetch: jest.fn(),
     });
 
     const component = shallow(<TraceLink />);
@@ -56,12 +59,14 @@ describe('TraceLink', () => {
 
   describe('transaction page', () => {
     beforeAll(() => {
-      spyOn(urlParamsHooks, 'useUrlParams').and.returnValue({
+      jest.spyOn(urlParamsHooks, 'useUrlParams').mockReturnValue({
         urlParams: {
           traceIdLink: '123',
           rangeFrom: 'now-24h',
           rangeTo: 'now',
         },
+        refreshTimeRange: jest.fn(),
+        uiFilters: {},
       });
     });
     it('renders with date range params', () => {
@@ -74,9 +79,10 @@ describe('TraceLink', () => {
         },
         trace: { id: 123 },
       };
-      spyOn(hooks, 'useFetcher').and.returnValue({
+      jest.spyOn(hooks, 'useFetcher').mockReturnValue({
         data: { transaction },
-        status: 'success',
+        status: hooks.FETCH_STATUS.SUCCESS,
+        refetch: jest.fn(),
       });
       const component = shallow(<TraceLink />);
       expect(component.prop('to')).toEqual(
diff --git a/x-pack/plugins/apm/public/components/shared/StickyProperties/__snapshots__/StickyProperties.test.js.snap b/x-pack/plugins/apm/public/components/shared/StickyProperties/__snapshots__/StickyProperties.test.js.snap
index 82c3d8dc3ccb0..020d5952c03e4 100644
--- a/x-pack/plugins/apm/public/components/shared/StickyProperties/__snapshots__/StickyProperties.test.js.snap
+++ b/x-pack/plugins/apm/public/components/shared/StickyProperties/__snapshots__/StickyProperties.test.js.snap
@@ -24,9 +24,9 @@ exports[`StickyProperties should render entire component 1`] = `
     <PropertyLabel>
       <EuiToolTip
         content={
-          <ForwardRef(styled.span)>
+          <styled.span>
             url.full
-          </ForwardRef(styled.span)>
+          </styled.span>
         }
         delay="regular"
         position="top"
@@ -59,9 +59,9 @@ exports[`StickyProperties should render entire component 1`] = `
     <PropertyLabel>
       <EuiToolTip
         content={
-          <ForwardRef(styled.span)>
+          <styled.span>
             http.request.method
-          </ForwardRef(styled.span)>
+          </styled.span>
         }
         delay="regular"
         position="top"
@@ -88,9 +88,9 @@ exports[`StickyProperties should render entire component 1`] = `
     <PropertyLabel>
       <EuiToolTip
         content={
-          <ForwardRef(styled.span)>
+          <styled.span>
             error.exception.handled
-          </ForwardRef(styled.span)>
+          </styled.span>
         }
         delay="regular"
         position="top"
@@ -117,9 +117,9 @@ exports[`StickyProperties should render entire component 1`] = `
     <PropertyLabel>
       <EuiToolTip
         content={
-          <ForwardRef(styled.span)>
+          <styled.span>
             user.id
-          </ForwardRef(styled.span)>
+          </styled.span>
         }
         delay="regular"
         position="top"
diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/TransactionActionMenu.test.tsx b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/TransactionActionMenu.test.tsx
index bad9292f3e768..ec546b5c6280f 100644
--- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/TransactionActionMenu.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/TransactionActionMenu.test.tsx
@@ -63,9 +63,10 @@ const renderTransaction = async (
 
 describe('TransactionActionMenu component', () => {
   beforeAll(() => {
-    spyOn(hooks, 'useFetcher').and.returnValue({
+    jest.spyOn(hooks, 'useFetcher').mockReturnValue({
       data: [],
-      status: 'success',
+      status: hooks.FETCH_STATUS.SUCCESS,
+      refetch: jest.fn(),
     });
   });
   afterAll(() => {
@@ -257,7 +258,7 @@ describe('TransactionActionMenu component', () => {
   describe('Custom links', () => {
     beforeAll(() => {
       // Mocks callApmAPI because it's going to be used to fecth the transaction in the custom links flyout.
-      spyOn(apmApi, 'callApmApi').and.returnValue({});
+      jest.spyOn(apmApi, 'callApmApi').mockReturnValue({});
     });
     afterAll(() => {
       jest.resetAllMocks();
diff --git a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap
index 6c5a200fb6f27..8101b01a83b08 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap
+++ b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap
@@ -6,28 +6,28 @@ Array [
     "color": "#6092c0",
     "disabled": undefined,
     "onClick": [Function],
-    "text": <ForwardRef(styled.span)>
+    "text": <styled.span>
       Avg.
-      <ForwardRef(styled.span)>
+      <styled.span>
         468 ms
-      </ForwardRef(styled.span)>
-    </ForwardRef(styled.span)>,
+      </styled.span>
+    </styled.span>,
   },
   Object {
     "color": "#d6bf57",
     "disabled": undefined,
     "onClick": [Function],
-    "text": <ForwardRef(styled.span)>
+    "text": <styled.span>
       95th percentile
-    </ForwardRef(styled.span)>,
+    </styled.span>,
   },
   Object {
     "color": "#da8b45",
     "disabled": undefined,
     "onClick": [Function],
-    "text": <ForwardRef(styled.span)>
+    "text": <styled.span>
       99th percentile
-    </ForwardRef(styled.span)>,
+    </styled.span>,
   },
 ]
 `;
diff --git a/x-pack/plugins/apm/public/utils/testHelpers.tsx b/x-pack/plugins/apm/public/utils/testHelpers.tsx
index e660ccbf17d3c..8e7f987966783 100644
--- a/x-pack/plugins/apm/public/utils/testHelpers.tsx
+++ b/x-pack/plugins/apm/public/utils/testHelpers.tsx
@@ -13,7 +13,6 @@ import { Location } from 'history';
 import moment from 'moment';
 import { Moment } from 'moment-timezone';
 import { render, waitForElement } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import { MemoryRouter } from 'react-router-dom';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { APMConfig } from '../../server';
diff --git a/x-pack/plugins/canvas/public/components/shape_picker/__examples__/__snapshots__/shape_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/shape_picker/__examples__/__snapshots__/shape_picker.stories.storyshot
index 0297566738463..93e80450de40f 100644
--- a/x-pack/plugins/canvas/public/components/shape_picker/__examples__/__snapshots__/shape_picker.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/shape_picker/__examples__/__snapshots__/shape_picker.stories.storyshot
@@ -17,7 +17,7 @@ exports[`Storyshots components/Shapes/ShapePicker default 1`] = `
         dangerouslySetInnerHTML={
           Object {
             "__html": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2.5 -2.5 105 105\\" fill=\\"none\\" stroke=\\"black\\">
-      <polygon points=\\"0,40 60,40 60,20 95,50 60,80 60,60 0,60\\"></polygon>
+      <polygon points=\\"0,40 60,40 60,20 95,50 60,80 60,60 0,60\\"/>
     </svg>",
           }
         }
@@ -37,7 +37,7 @@ exports[`Storyshots components/Shapes/ShapePicker default 1`] = `
         dangerouslySetInnerHTML={
           Object {
             "__html": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2.5 -2.5 105 105\\" fill=\\"none\\" stroke=\\"black\\">
-      <rect x=\\"0\\" y=\\"0\\" width=\\"100\\" height=\\"100\\"></rect>
+      <rect x=\\"0\\" y=\\"0\\" width=\\"100\\" height=\\"100\\"/>
     </svg>",
           }
         }
diff --git a/x-pack/plugins/canvas/public/components/shape_picker_popover/__examples__/__snapshots__/shape_picker_popover.stories.storyshot b/x-pack/plugins/canvas/public/components/shape_picker_popover/__examples__/__snapshots__/shape_picker_popover.stories.storyshot
index a23452a43ae1e..939440750c288 100644
--- a/x-pack/plugins/canvas/public/components/shape_picker_popover/__examples__/__snapshots__/shape_picker_popover.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/shape_picker_popover/__examples__/__snapshots__/shape_picker_popover.stories.storyshot
@@ -66,7 +66,7 @@ exports[`Storyshots components/Shapes/ShapePickerPopover interactive 1`] = `
           dangerouslySetInnerHTML={
             Object {
               "__html": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2.5 -2.5 105 105\\" fill=\\"none\\" stroke=\\"black\\">
-      <rect x=\\"0\\" y=\\"0\\" width=\\"100\\" height=\\"100\\"></rect>
+      <rect x=\\"0\\" y=\\"0\\" width=\\"100\\" height=\\"100\\"/>
     </svg>",
             }
           }
@@ -108,7 +108,7 @@ exports[`Storyshots components/Shapes/ShapePickerPopover shape selected 1`] = `
           dangerouslySetInnerHTML={
             Object {
               "__html": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2.5 -2.5 105 105\\" fill=\\"none\\" stroke=\\"black\\">
-      <rect x=\\"0\\" y=\\"0\\" width=\\"100\\" height=\\"100\\"></rect>
+      <rect x=\\"0\\" y=\\"0\\" width=\\"100\\" height=\\"100\\"/>
     </svg>",
             }
           }
diff --git a/x-pack/plugins/canvas/public/components/shape_preview/__examples__/__snapshots__/shape_preview.stories.storyshot b/x-pack/plugins/canvas/public/components/shape_preview/__examples__/__snapshots__/shape_preview.stories.storyshot
index 602353a187ca9..8c7ff2e92b86d 100644
--- a/x-pack/plugins/canvas/public/components/shape_preview/__examples__/__snapshots__/shape_preview.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/shape_preview/__examples__/__snapshots__/shape_preview.stories.storyshot
@@ -6,7 +6,7 @@ exports[`Storyshots components/Shapes/ShapePreview arrow 1`] = `
   dangerouslySetInnerHTML={
     Object {
       "__html": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2.5 -2.5 105 105\\" fill=\\"none\\" stroke=\\"black\\">
-      <polygon points=\\"0,40 60,40 60,20 95,50 60,80 60,60 0,60\\"></polygon>
+      <polygon points=\\"0,40 60,40 60,20 95,50 60,80 60,60 0,60\\"/>
     </svg>",
     }
   }
@@ -19,7 +19,7 @@ exports[`Storyshots components/Shapes/ShapePreview square 1`] = `
   dangerouslySetInnerHTML={
     Object {
       "__html": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2.5 -2.5 105 105\\" fill=\\"none\\" stroke=\\"black\\">
-      <rect x=\\"0\\" y=\\"0\\" width=\\"100\\" height=\\"100\\"></rect>
+      <rect x=\\"0\\" y=\\"0\\" width=\\"100\\" height=\\"100\\"/>
     </svg>",
     }
   }
diff --git a/x-pack/plugins/canvas/shareable_runtime/api/__tests__/__snapshots__/shareable.test.tsx.snap b/x-pack/plugins/canvas/shareable_runtime/api/__tests__/__snapshots__/shareable.test.tsx.snap
index 0b55f2c322761..9de76f984e453 100644
--- a/x-pack/plugins/canvas/shareable_runtime/api/__tests__/__snapshots__/shareable.test.tsx.snap
+++ b/x-pack/plugins/canvas/shareable_runtime/api/__tests__/__snapshots__/shareable.test.tsx.snap
@@ -3,59 +3,59 @@
 exports[`Canvas Shareable Workpad API Placed successfully with default properties 1`] = `"<div kbn-canvas-shareable=\\"canvas\\" kbn-canvas-url=\\"workpad.json\\"></div>"`;
 
 exports[`Canvas Shareable Workpad API Placed successfully with default properties 2`] = `
-"<div class=\\"kbnCanvas\\"><style>html body .kbnCanvas { height: 720px; width: 1080px; }</style><div class=\\"root\\" style=\\"height: 768px; width: 1080px;\\"><div class=\\"container\\" style=\\"height: 720px; width: 1080px;\\"><div class=\\"page\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+"<div class=\\"kbnCanvas\\"><style>html body .kbnCanvas { height: 720px; width: 1080px; }</style><div class=\\"root\\" style=\\"height: 768px; width: 1080px;\\"><div class=\\"container\\" style=\\"height: 720px; width: 1080px;\\"><div class=\\"page\\" style=\\"height: 720px; transform: scale3d(1, 1, 1); width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
 `;
 
 exports[`Canvas Shareable Workpad API Placed successfully with height specified 1`] = `"<div kbn-canvas-shareable=\\"canvas\\" kbn-canvas-height=\\"350\\" kbn-canvas-url=\\"workpad.json\\"></div>"`;
 
 exports[`Canvas Shareable Workpad API Placed successfully with height specified 2`] = `
-"<div class=\\"kbnCanvas\\"><style>html body .kbnCanvas { height: 350px; width: 525px; }</style><div class=\\"root\\" style=\\"height: 398px; width: 525px;\\"><div class=\\"container\\" style=\\"height: 350px; width: 525px;\\"><div class=\\"page\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+"<div class=\\"kbnCanvas\\"><style>html body .kbnCanvas { height: 350px; width: 525px; }</style><div class=\\"root\\" style=\\"height: 398px; width: 525px;\\"><div class=\\"container\\" style=\\"height: 350px; width: 525px;\\"><div class=\\"page\\" style=\\"height: 720px; transform: scale3d(0.48611111111111116, 0.4861111111111111, 1); width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
 `;
 
 exports[`Canvas Shareable Workpad API Placed successfully with page specified 1`] = `"<div kbn-canvas-shareable=\\"canvas\\" kbn-canvas-page=\\"0\\" kbn-canvas-url=\\"workpad.json\\"></div>"`;
 
 exports[`Canvas Shareable Workpad API Placed successfully with page specified 2`] = `
-"<div class=\\"kbnCanvas\\"><style>html body .kbnCanvas { height: 720px; width: 1080px; }</style><div class=\\"root\\" style=\\"height: 768px; width: 1080px;\\"><div class=\\"container\\" style=\\"height: 720px; width: 1080px;\\"><div class=\\"page\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+"<div class=\\"kbnCanvas\\"><style>html body .kbnCanvas { height: 720px; width: 1080px; }</style><div class=\\"root\\" style=\\"height: 768px; width: 1080px;\\"><div class=\\"container\\" style=\\"height: 720px; width: 1080px;\\"><div class=\\"page\\" style=\\"height: 720px; transform: scale3d(1, 1, 1); width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
 `;
 
 exports[`Canvas Shareable Workpad API Placed successfully with width and height specified 1`] = `"<div kbn-canvas-shareable=\\"canvas\\" kbn-canvas-width=\\"350\\" kbn-canvas-height=\\"350\\" kbn-canvas-url=\\"workpad.json\\"></div>"`;
 
 exports[`Canvas Shareable Workpad API Placed successfully with width and height specified 2`] = `
-"<div class=\\"kbnCanvas\\"><style>html body .kbnCanvas { height: 350px; width: 350px; }</style><div class=\\"root\\" style=\\"height: 398px; width: 350px;\\"><div class=\\"container\\" style=\\"height: 350px; width: 350px;\\"><div class=\\"page\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+"<div class=\\"kbnCanvas\\"><style>html body .kbnCanvas { height: 350px; width: 350px; }</style><div class=\\"root\\" style=\\"height: 398px; width: 350px;\\"><div class=\\"container\\" style=\\"height: 350px; width: 350px;\\"><div class=\\"page\\" style=\\"height: 720px; transform: scale3d(0.32407407407407407, 0.32407407407407407, 1); width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
 `;
 
 exports[`Canvas Shareable Workpad API Placed successfully with width specified 1`] = `"<div kbn-canvas-shareable=\\"canvas\\" kbn-canvas-width=\\"400\\" kbn-canvas-url=\\"workpad.json\\"></div>"`;
 
 exports[`Canvas Shareable Workpad API Placed successfully with width specified 2`] = `
-"<div class=\\"kbnCanvas\\"><style>html body .kbnCanvas { height: 267px; width: 400px; }</style><div class=\\"root\\" style=\\"height: 315px; width: 400px;\\"><div class=\\"container\\" style=\\"height: 267px; width: 400px;\\"><div class=\\"page\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+"<div class=\\"kbnCanvas\\"><style>html body .kbnCanvas { height: 267px; width: 400px; }</style><div class=\\"root\\" style=\\"height: 315px; width: 400px;\\"><div class=\\"container\\" style=\\"height: 267px; width: 400px;\\"><div class=\\"page\\" style=\\"height: 720px; transform: scale3d(0.37037037037037035, 0.37037037037037035, 1); width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
 `;
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/__tests__/__snapshots__/app.test.tsx.snap b/x-pack/plugins/canvas/shareable_runtime/components/__tests__/__snapshots__/app.test.tsx.snap
index 6de8ad9f38baf..991d5d6ce42f0 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/__tests__/__snapshots__/app.test.tsx.snap
+++ b/x-pack/plugins/canvas/shareable_runtime/components/__tests__/__snapshots__/app.test.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<App /> App renders properly 1`] = `
-"<div class=\\"root\\" style=\\"height: 768px; width: 1080px;\\"><div class=\\"container\\" style=\\"height: 720px; width: 1080px;\\"><div class=\\"page\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+"<div class=\\"root\\" style=\\"height: 768px; width: 1080px;\\"><div class=\\"container\\" style=\\"height: 720px; width: 1080px;\\"><div class=\\"page\\" style=\\"height: 720px; transform: scale3d(1, 1, 1); width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div>"
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div>"
 `;
diff --git a/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/mocks/breadcrumbs.mock.ts b/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/mocks/breadcrumbs.mock.ts
index 60a196254d408..0c5a7ca79e272 100644
--- a/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/mocks/breadcrumbs.mock.ts
+++ b/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/mocks/breadcrumbs.mock.ts
@@ -4,7 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-jest.mock('../../../app/services/breadcrumbs', () => ({
-  ...jest.requireActual('../../../app/services/breadcrumbs'),
-  setBreadcrumbs: jest.fn(),
-}));
+jest.mock('../../../app/services/breadcrumbs', () => {
+  const original = jest.requireActual('../../../app/services/breadcrumbs');
+
+  return {
+    ...original,
+    setBreadcrumbs: jest.fn(),
+  };
+});
diff --git a/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/mocks/track_ui_metric.mock.ts b/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/mocks/track_ui_metric.mock.ts
index 5460b482cd579..46cfda8cc6727 100644
--- a/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/mocks/track_ui_metric.mock.ts
+++ b/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/mocks/track_ui_metric.mock.ts
@@ -4,10 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-jest.mock('../../../app/services/track_ui_metric', () => ({
-  ...jest.requireActual('../../../app/services/track_ui_metric'),
-  trackUiMetric: jest.fn(),
-  trackUserRequest: (request: Promise<any>) => {
-    return request.then((response) => response);
-  },
-}));
+jest.mock('../../../app/services/track_ui_metric', () => {
+  const original = jest.requireActual('../../../app/services/track_ui_metric');
+
+  return {
+    ...original,
+    trackUiMetric: jest.fn(),
+    trackUserRequest: (request: Promise<any>) => {
+      return request.then((response) => response);
+    },
+  };
+});
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/menu_item.test.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/menu_item.test.tsx
index 9a4ecb2d4bfb0..771b15e46ad25 100644
--- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/menu_item.test.tsx
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/menu_item.test.tsx
@@ -10,7 +10,6 @@ import { MenuItem } from './menu_item';
 import { createStateContainer } from '../../../../../../../../src/plugins/kibana_utils/public';
 import { UiActionsEnhancedDynamicActionManager as DynamicActionManager } from '../../../../../../ui_actions_enhanced/public';
 import { EnhancedEmbeddable } from '../../../../../../embeddable_enhanced/public';
-import '@testing-library/jest-dom';
 
 afterEach(cleanup);
 
diff --git a/x-pack/plugins/global_search/public/services/search_service.test.mocks.ts b/x-pack/plugins/global_search/public/services/search_service.test.mocks.ts
index ce406e27c4a72..1caabd6a1681c 100644
--- a/x-pack/plugins/global_search/public/services/search_service.test.mocks.ts
+++ b/x-pack/plugins/global_search/public/services/search_service.test.mocks.ts
@@ -10,7 +10,11 @@ jest.doMock('./fetch_server_results', () => ({
 }));
 
 export const getDefaultPreferenceMock = jest.fn();
-jest.doMock('./utils', () => ({
-  ...jest.requireActual('./utils'),
-  getDefaultPreference: getDefaultPreferenceMock,
-}));
+jest.doMock('./utils', () => {
+  const original = jest.requireActual('./utils');
+
+  return {
+    ...original,
+    getDefaultPreference: getDefaultPreferenceMock,
+  };
+});
diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.js.snap b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.js.snap
index 9441ffd731524..38dd49a286b58 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.js.snap
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.js.snap
@@ -495,7 +495,7 @@ exports[`extend index management ilm summary extension should return extension w
                   <EuiPopover
                     anchorPosition="downCenter"
                     button={
-                      <ForwardRef
+                      <EuiLink
                         onClick={[Function]}
                       >
                         <FormattedMessage
@@ -503,7 +503,7 @@ exports[`extend index management ilm summary extension should return extension w
                           id="xpack.indexLifecycleMgmt.indexLifecycleMgmtSummary.showPhaseDefinitionButton"
                           values={Object {}}
                         />
-                      </ForwardRef>
+                      </EuiLink>
                     }
                     closePopover={[Function]}
                     display="inlineBlock"
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_clone.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_clone.test.tsx
index 6250ef0dc247d..ccb729db44f9b 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_clone.test.tsx
+++ b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_clone.test.tsx
@@ -14,28 +14,32 @@ import { TEMPLATE_NAME, INDEX_PATTERNS as DEFAULT_INDEX_PATTERNS, MAPPINGS } fro
 import { setup } from './template_clone.helpers';
 import { TemplateFormTestBed } from './template_form.helpers';
 
-jest.mock('@elastic/eui', () => ({
-  ...jest.requireActual('@elastic/eui'),
-  // Mocking EuiComboBox, as it utilizes "react-virtualized" for rendering search suggestions,
-  // which does not produce a valid component wrapper
-  EuiComboBox: (props: any) => (
-    <input
-      data-test-subj="mockComboBox"
-      onChange={async (syntheticEvent: any) => {
-        props.onChange([syntheticEvent['0']]);
-      }}
-    />
-  ),
-  // Mocking EuiCodeEditor, which uses React Ace under the hood
-  EuiCodeEditor: (props: any) => (
-    <input
-      data-test-subj="mockCodeEditor"
-      onChange={(syntheticEvent: any) => {
-        props.onChange(syntheticEvent.jsonString);
-      }}
-    />
-  ),
-}));
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+
+  return {
+    ...original,
+    // Mocking EuiComboBox, as it utilizes "react-virtualized" for rendering search suggestions,
+    // which does not produce a valid component wrapper
+    EuiComboBox: (props: any) => (
+      <input
+        data-test-subj="mockComboBox"
+        onChange={async (syntheticEvent: any) => {
+          props.onChange([syntheticEvent['0']]);
+        }}
+      />
+    ),
+    // Mocking EuiCodeEditor, which uses React Ace under the hood
+    EuiCodeEditor: (props: any) => (
+      <input
+        data-test-subj="mockCodeEditor"
+        onChange={(syntheticEvent: any) => {
+          props.onChange(syntheticEvent.jsonString);
+        }}
+      />
+    ),
+  };
+});
 
 // FLAKY: https://github.com/elastic/kibana/issues/59849
 describe.skip('<TemplateClone />', () => {
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx
index 50b35fc76721a..07a27e2414aed 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx
+++ b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx
@@ -20,28 +20,32 @@ import {
 import { setup } from './template_create.helpers';
 import { TemplateFormTestBed } from './template_form.helpers';
 
-jest.mock('@elastic/eui', () => ({
-  ...jest.requireActual('@elastic/eui'),
-  // Mocking EuiComboBox, as it utilizes "react-virtualized" for rendering search suggestions,
-  // which does not produce a valid component wrapper
-  EuiComboBox: (props: any) => (
-    <input
-      data-test-subj="mockComboBox"
-      onChange={(syntheticEvent: any) => {
-        props.onChange([syntheticEvent['0']]);
-      }}
-    />
-  ),
-  // Mocking EuiCodeEditor, which uses React Ace under the hood
-  EuiCodeEditor: (props: any) => (
-    <input
-      data-test-subj="mockCodeEditor"
-      onChange={(syntheticEvent: any) => {
-        props.onChange(syntheticEvent.jsonString);
-      }}
-    />
-  ),
-}));
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+
+  return {
+    ...original,
+    // Mocking EuiComboBox, as it utilizes "react-virtualized" for rendering search suggestions,
+    // which does not produce a valid component wrapper
+    EuiComboBox: (props: any) => (
+      <input
+        data-test-subj="mockComboBox"
+        onChange={(syntheticEvent: any) => {
+          props.onChange([syntheticEvent['0']]);
+        }}
+      />
+    ),
+    // Mocking EuiCodeEditor, which uses React Ace under the hood
+    EuiCodeEditor: (props: any) => (
+      <input
+        data-test-subj="mockCodeEditor"
+        onChange={(syntheticEvent: any) => {
+          props.onChange(syntheticEvent.jsonString);
+        }}
+      />
+    ),
+  };
+});
 
 const TEXT_MAPPING_FIELD = {
   name: 'text_datatype',
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_edit.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_edit.test.tsx
index 88067d479f7e7..9f0e81454f0af 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_edit.test.tsx
+++ b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_edit.test.tsx
@@ -25,28 +25,32 @@ const MAPPING = {
   },
 };
 
-jest.mock('@elastic/eui', () => ({
-  ...jest.requireActual('@elastic/eui'),
-  // Mocking EuiComboBox, as it utilizes "react-virtualized" for rendering search suggestions,
-  // which does not produce a valid component wrapper
-  EuiComboBox: (props: any) => (
-    <input
-      data-test-subj="mockComboBox"
-      onChange={(syntheticEvent: any) => {
-        props.onChange([syntheticEvent['0']]);
-      }}
-    />
-  ),
-  // Mocking EuiCodeEditor, which uses React Ace under the hood
-  EuiCodeEditor: (props: any) => (
-    <input
-      data-test-subj="mockCodeEditor"
-      onChange={(syntheticEvent: any) => {
-        props.onChange(syntheticEvent.jsonString);
-      }}
-    />
-  ),
-}));
+jest.mock('@elastic/eui', () => {
+  const origial = jest.requireActual('@elastic/eui');
+
+  return {
+    ...origial,
+    // Mocking EuiComboBox, as it utilizes "react-virtualized" for rendering search suggestions,
+    // which does not produce a valid component wrapper
+    EuiComboBox: (props: any) => (
+      <input
+        data-test-subj="mockComboBox"
+        onChange={(syntheticEvent: any) => {
+          props.onChange([syntheticEvent['0']]);
+        }}
+      />
+    ),
+    // Mocking EuiCodeEditor, which uses React Ace under the hood
+    EuiCodeEditor: (props: any) => (
+      <input
+        data-test-subj="mockCodeEditor"
+        onChange={(syntheticEvent: any) => {
+          props.onChange(syntheticEvent.jsonString);
+        }}
+      />
+    ),
+  };
+});
 
 // FLAKY: https://github.com/elastic/kibana/issues/65567
 describe.skip('<TemplateEdit />', () => {
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/text_datatype.test.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/text_datatype.test.tsx
index 5f6d3a6e7b459..ed60414d198f1 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/text_datatype.test.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/text_datatype.test.tsx
@@ -82,7 +82,7 @@ describe.skip('Mappings editor: text datatype', () => {
 
     ({ data } = await getMappingsEditorData(component));
     expect(data).toEqual(updatedMappings);
-  });
+  }, 10000);
 
   test('analyzer parameter: default values', async () => {
     const defaultMappings = {
@@ -210,7 +210,7 @@ describe.skip('Mappings editor: text datatype', () => {
     expect(indexAnalyzerValue).toBe('standard');
     expect(searchAnalyzerValue).toBe('simple');
     expect(searchQuoteAnalyzerValue).toBe('whitespace');
-  }, 10000);
+  }, 50000);
 
   test('analyzer parameter: custom analyzer (external plugin)', async () => {
     const defaultMappings = {
@@ -303,7 +303,7 @@ describe.skip('Mappings editor: text datatype', () => {
     };
 
     expect(data).toEqual(updatedMappings);
-  });
+  }, 100000);
 
   test('analyzer parameter: custom analyzer (from index settings)', async () => {
     const indexSettings = {
@@ -394,5 +394,5 @@ describe.skip('Mappings editor: text datatype', () => {
     };
 
     expect(data).toEqual(updatedMappings);
-  });
+  }, 50000);
 });
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/edit_field.test.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/edit_field.test.tsx
index d6d1510f12005..4f9d8a960a1a2 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/edit_field.test.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/edit_field.test.tsx
@@ -109,5 +109,5 @@ describe('Mappings editor: edit field', () => {
     };
 
     expect(data).toEqual(updatedMappings);
-  });
+  }, 50000);
 });
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.tsx
index bef2d5c79be99..638bbfd925ffb 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.tsx
@@ -11,41 +11,45 @@ import { registerTestBed, TestBed } from '../../../../../../../../../test_utils'
 import { getChildFieldsName } from '../../../lib';
 import { MappingsEditor } from '../../../mappings_editor';
 
-jest.mock('@elastic/eui', () => ({
-  ...jest.requireActual('@elastic/eui'),
-  // Mocking EuiComboBox, as it utilizes "react-virtualized" for rendering search suggestions,
-  // which does not produce a valid component wrapper
-  EuiComboBox: (props: any) => (
-    <input
-      data-test-subj={props['data-test-subj'] || 'mockComboBox'}
-      data-currentvalue={props.selectedOptions}
-      onChange={async (syntheticEvent: any) => {
-        props.onChange([syntheticEvent['0']]);
-      }}
-    />
-  ),
-  // Mocking EuiCodeEditor, which uses React Ace under the hood
-  EuiCodeEditor: (props: any) => (
-    <input
-      data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
-      data-currentvalue={props.value}
-      onChange={(e: any) => {
-        props.onChange(e.jsonContent);
-      }}
-    />
-  ),
-  // Mocking EuiSuperSelect to be able to easily change its value
-  // with a `myWrapper.simulate('change', { target: { value: 'someValue' } })`
-  EuiSuperSelect: (props: any) => (
-    <input
-      data-test-subj={props['data-test-subj'] || 'mockSuperSelect'}
-      value={props.valueOfSelected}
-      onChange={(e) => {
-        props.onChange(e.target.value);
-      }}
-    />
-  ),
-}));
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+
+  return {
+    ...original,
+    // Mocking EuiComboBox, as it utilizes "react-virtualized" for rendering search suggestions,
+    // which does not produce a valid component wrapper
+    EuiComboBox: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj'] || 'mockComboBox'}
+        data-currentvalue={props.selectedOptions}
+        onChange={async (syntheticEvent: any) => {
+          props.onChange([syntheticEvent['0']]);
+        }}
+      />
+    ),
+    // Mocking EuiCodeEditor, which uses React Ace under the hood
+    EuiCodeEditor: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
+        data-currentvalue={props.value}
+        onChange={(e: any) => {
+          props.onChange(e.jsonContent);
+        }}
+      />
+    ),
+    // Mocking EuiSuperSelect to be able to easily change its value
+    // with a `myWrapper.simulate('change', { target: { value: 'someValue' } })`
+    EuiSuperSelect: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj'] || 'mockSuperSelect'}
+        value={props.valueOfSelected}
+        onChange={(e) => {
+          props.onChange(e.target.value);
+        }}
+      />
+    ),
+  };
+});
 
 export interface DomFields {
   [key: string]: {
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.test.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.test.tsx
index 86bc0900f1678..88a7e9252d6dd 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.test.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.test.tsx
@@ -6,23 +6,31 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
-jest.mock('@elastic/eui', () => ({
-  ...jest.requireActual('@elastic/eui'),
-  // Mocking EuiCodeEditor, which uses React Ace under the hood
-  EuiCodeEditor: (props: any) => (
-    <input
-      data-test-subj="mockCodeEditor"
-      onChange={(syntheticEvent: any) => {
-        props.onChange(syntheticEvent.jsonString);
-      }}
-    />
-  ),
-}));
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
 
-jest.mock('lodash', () => ({
-  ...jest.requireActual('lodash'),
-  debounce: (fn: any) => fn,
-}));
+  return {
+    ...original,
+    // Mocking EuiCodeEditor, which uses React Ace under the hood
+    EuiCodeEditor: (props: any) => (
+      <input
+        data-test-subj="mockCodeEditor"
+        onChange={(syntheticEvent: any) => {
+          props.onChange(syntheticEvent.jsonString);
+        }}
+      />
+    ),
+  };
+});
+
+jest.mock('lodash', () => {
+  const original = jest.requireActual('lodash');
+
+  return {
+    ...original,
+    debounce: (fn: any) => fn,
+  };
+});
 
 import { registerTestBed, TestBed } from '../../../../../../../../test_utils';
 import { LoadMappingsProvider } from './load_mappings_provider';
diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx
index 81ee1435be5bd..f8e0030441ba0 100644
--- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx
@@ -11,18 +11,22 @@ import { PIPELINE_TO_CLONE, PipelinesCloneTestBed } from './helpers/pipelines_cl
 
 const { setup } = pageHelpers.pipelinesClone;
 
-jest.mock('@elastic/eui', () => ({
-  ...jest.requireActual('@elastic/eui'),
-  // Mocking EuiCodeEditor, which uses React Ace under the hood
-  EuiCodeEditor: (props: any) => (
-    <input
-      data-test-subj={props['data-test-subj']}
-      onChange={(syntheticEvent: any) => {
-        props.onChange(syntheticEvent.jsonString);
-      }}
-    />
-  ),
-}));
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+
+  return {
+    ...original,
+    // Mocking EuiCodeEditor, which uses React Ace under the hood
+    EuiCodeEditor: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj']}
+        onChange={(syntheticEvent: any) => {
+          props.onChange(syntheticEvent.jsonString);
+        }}
+      />
+    ),
+  };
+});
 
 // FLAKY: https://github.com/elastic/kibana/issues/66856
 describe.skip('<PipelinesClone />', () => {
diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx
index 4318062491df8..2cfccbdc6d578 100644
--- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx
@@ -11,18 +11,22 @@ import { PipelinesCreateTestBed } from './helpers/pipelines_create.helpers';
 
 const { setup } = pageHelpers.pipelinesCreate;
 
-jest.mock('@elastic/eui', () => ({
-  ...jest.requireActual('@elastic/eui'),
-  // Mocking EuiCodeEditor, which uses React Ace under the hood
-  EuiCodeEditor: (props: any) => (
-    <input
-      data-test-subj={props['data-test-subj']}
-      onChange={(syntheticEvent: any) => {
-        props.onChange(syntheticEvent.jsonString);
-      }}
-    />
-  ),
-}));
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+
+  return {
+    ...original,
+    // Mocking EuiCodeEditor, which uses React Ace under the hood
+    EuiCodeEditor: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj']}
+        onChange={(syntheticEvent: any) => {
+          props.onChange(syntheticEvent.jsonString);
+        }}
+      />
+    ),
+  };
+});
 
 describe('<PipelinesCreate />', () => {
   let testBed: PipelinesCreateTestBed;
diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_edit.test.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_edit.test.tsx
index 477eec83f876d..6c89216e34733 100644
--- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_edit.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_edit.test.tsx
@@ -11,18 +11,22 @@ import { PIPELINE_TO_EDIT, PipelinesEditTestBed } from './helpers/pipelines_edit
 
 const { setup } = pageHelpers.pipelinesEdit;
 
-jest.mock('@elastic/eui', () => ({
-  ...jest.requireActual('@elastic/eui'),
-  // Mocking EuiCodeEditor, which uses React Ace under the hood
-  EuiCodeEditor: (props: any) => (
-    <input
-      data-test-subj={props['data-test-subj']}
-      onChange={(syntheticEvent: any) => {
-        props.onChange(syntheticEvent.jsonString);
-      }}
-    />
-  ),
-}));
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+
+  return {
+    ...original,
+    // Mocking EuiCodeEditor, which uses React Ace under the hood
+    EuiCodeEditor: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj']}
+        onChange={(syntheticEvent: any) => {
+          props.onChange(syntheticEvent.jsonString);
+        }}
+      />
+    ),
+  };
+});
 
 describe('<PipelinesEdit />', () => {
   let testBed: PipelinesEditTestBed;
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx
index 97c74e0b2231f..320ccd0cbe8c0 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx
@@ -8,37 +8,45 @@ import React from 'react';
 import { registerTestBed, TestBed } from '../../../../../../../test_utils';
 import { PipelineProcessorsEditor, Props } from '../pipeline_processors_editor.container';
 
-jest.mock('@elastic/eui', () => ({
-  ...jest.requireActual('@elastic/eui'),
-  // Mocking EuiComboBox, as it utilizes "react-virtualized" for rendering search suggestions,
-  // which does not produce a valid component wrapper
-  EuiComboBox: (props: any) => (
-    <input
-      data-test-subj={props['data-test-subj'] || 'mockComboBox'}
-      data-currentvalue={props.selectedOptions}
-      onChange={async (syntheticEvent: any) => {
-        props.onChange([syntheticEvent['0']]);
-      }}
-    />
-  ),
-  // Mocking EuiCodeEditor, which uses React Ace under the hood
-  EuiCodeEditor: (props: any) => (
-    <input
-      data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
-      data-currentvalue={props.value}
-      onChange={(e: any) => {
-        props.onChange(e.jsonContent);
-      }}
-    />
-  ),
-}));
-
-jest.mock('react-virtualized', () => ({
-  ...jest.requireActual('react-virtualized'),
-  AutoSizer: ({ children }: { children: any }) => (
-    <div>{children({ height: 500, width: 500 })}</div>
-  ),
-}));
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+
+  return {
+    ...original,
+    // Mocking EuiComboBox, as it utilizes "react-virtualized" for rendering search suggestions,
+    // which does not produce a valid component wrapper
+    EuiComboBox: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj'] || 'mockComboBox'}
+        data-currentvalue={props.selectedOptions}
+        onChange={async (syntheticEvent: any) => {
+          props.onChange([syntheticEvent['0']]);
+        }}
+      />
+    ),
+    // Mocking EuiCodeEditor, which uses React Ace under the hood
+    EuiCodeEditor: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
+        data-currentvalue={props.value}
+        onChange={(e: any) => {
+          props.onChange(e.jsonContent);
+        }}
+      />
+    ),
+  };
+});
+
+jest.mock('react-virtualized', () => {
+  const original = jest.requireActual('react-virtualized');
+
+  return {
+    ...original,
+    AutoSizer: ({ children }: { children: any }) => (
+      <div>{children({ height: 500, width: 500 })}</div>
+    ),
+  };
+});
 
 const testBedSetup = registerTestBed<TestSubject>(PipelineProcessorsEditor, {
   doMountAsync: false,
diff --git a/x-pack/plugins/license_management/__jest__/upload_license.test.tsx b/x-pack/plugins/license_management/__jest__/upload_license.test.tsx
index f76376b3fceff..947907c7dcc9c 100644
--- a/x-pack/plugins/license_management/__jest__/upload_license.test.tsx
+++ b/x-pack/plugins/license_management/__jest__/upload_license.test.tsx
@@ -29,8 +29,6 @@ import {
   // @ts-ignore
 } from './api_responses';
 
-window.location.reload = () => {};
-
 let store: any = null;
 let component: any = null;
 const history = scopedHistoryMock.create();
@@ -60,6 +58,14 @@ const thunkServices = {
 };
 
 describe('UploadLicense', () => {
+  beforeAll(() => {
+    Object.defineProperty(window, 'location', {
+      value: {
+        reload: jest.fn(),
+      },
+    });
+  });
+
   beforeEach(() => {
     store = licenseManagementStore({}, thunkServices);
     component = (
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_size_property.test.tsx.snap b/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_size_property.test.tsx.snap
index 11138bf337043..9dc0e99669c79 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_size_property.test.tsx.snap
+++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_size_property.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`renderLegendDetailRow Should render as range 1`] = `
 <RangedStyleLegendRow
   fieldLabel="foobar_label"
   header={
-    <ForwardRef
+    <EuiFlexGroup
       alignItems="center"
       gutterSize="xs"
       justifyContent="spaceBetween"
@@ -64,7 +64,7 @@ exports[`renderLegendDetailRow Should render as range 1`] = `
           />
         </EuiFlexItem>
       </React.Fragment>
-    </ForwardRef>
+    </EuiFlexGroup>
   }
   maxLabel="100_format"
   minLabel="0_format"
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/__snapshots__/view.test.js.snap b/x-pack/plugins/maps/public/connected_components/layer_panel/__snapshots__/view.test.js.snap
index 4aaffef201b35..a9216e4817762 100644
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/__snapshots__/view.test.js.snap
+++ b/x-pack/plugins/maps/public/connected_components/layer_panel/__snapshots__/view.test.js.snap
@@ -11,7 +11,7 @@ exports[`LayerPanel is rendered 1`] = `
         "get": [Function],
         "remove": [Function],
         "set": [Function],
-        "store": undefined,
+        "store": Storage {},
       },
     }
   }
diff --git a/x-pack/plugins/ml/public/application/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap b/x-pack/plugins/ml/public/application/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap
index f3acc7074d277..6717e8fa5a51f 100644
--- a/x-pack/plugins/ml/public/application/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap
+++ b/x-pack/plugins/ml/public/application/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap
@@ -95,7 +95,7 @@ exports[`RuleEditorFlyout renders the flyout after adding a condition to a rule
             id="xpack.ml.ruleEditor.ruleEditorFlyout.rulesDescription"
             values={
               Object {
-                "learnMoreLink": <ForwardRef
+                "learnMoreLink": <EuiLink
                   href="https://www.elastic.co/guide/en/machine-learning/jest-metadata-mock-branch/ml-rules.html"
                   target="_blank"
                 >
@@ -104,7 +104,7 @@ exports[`RuleEditorFlyout renders the flyout after adding a condition to a rule
                     id="xpack.ml.ruleEditor.ruleEditorFlyout.rulesDescription.learnMoreLinkText"
                     values={Object {}}
                   />
-                </ForwardRef>,
+                </EuiLink>,
               }
             }
           />
@@ -354,7 +354,7 @@ exports[`RuleEditorFlyout renders the flyout after setting the rule to edit 1`]
             id="xpack.ml.ruleEditor.ruleEditorFlyout.rulesDescription"
             values={
               Object {
-                "learnMoreLink": <ForwardRef
+                "learnMoreLink": <EuiLink
                   href="https://www.elastic.co/guide/en/machine-learning/jest-metadata-mock-branch/ml-rules.html"
                   target="_blank"
                 >
@@ -363,7 +363,7 @@ exports[`RuleEditorFlyout renders the flyout after setting the rule to edit 1`]
                     id="xpack.ml.ruleEditor.ruleEditorFlyout.rulesDescription.learnMoreLinkText"
                     values={Object {}}
                   />
-                </ForwardRef>,
+                </EuiLink>,
               }
             }
           />
@@ -599,7 +599,7 @@ exports[`RuleEditorFlyout renders the flyout for creating a rule with conditions
             id="xpack.ml.ruleEditor.ruleEditorFlyout.rulesDescription"
             values={
               Object {
-                "learnMoreLink": <ForwardRef
+                "learnMoreLink": <EuiLink
                   href="https://www.elastic.co/guide/en/machine-learning/jest-metadata-mock-branch/ml-rules.html"
                   target="_blank"
                 >
@@ -608,7 +608,7 @@ exports[`RuleEditorFlyout renders the flyout for creating a rule with conditions
                     id="xpack.ml.ruleEditor.ruleEditorFlyout.rulesDescription.learnMoreLinkText"
                     values={Object {}}
                   />
-                </ForwardRef>,
+                </EuiLink>,
               }
             }
           />
diff --git a/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/rule_action_panel.test.js.snap b/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/rule_action_panel.test.js.snap
index b512f6d7c014c..d54f3c710b584 100644
--- a/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/rule_action_panel.test.js.snap
+++ b/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/rule_action_panel.test.js.snap
@@ -47,7 +47,7 @@ exports[`RuleActionPanel renders panel for rule with a condition 1`] = `
           />,
         },
         Object {
-          "description": <ForwardRef
+          "description": <EuiLink
             onClick={[Function]}
           >
             <FormattedMessage
@@ -55,7 +55,7 @@ exports[`RuleActionPanel renders panel for rule with a condition 1`] = `
               id="xpack.ml.ruleEditor.ruleActionPanel.editRuleLinkText"
               values={Object {}}
             />
-          </ForwardRef>,
+          </EuiLink>,
           "title": "",
         },
         Object {
@@ -101,7 +101,7 @@ exports[`RuleActionPanel renders panel for rule with a condition and scope, valu
           />,
         },
         Object {
-          "description": <ForwardRef
+          "description": <EuiLink
             onClick={[Function]}
           >
             <FormattedMessage
@@ -109,7 +109,7 @@ exports[`RuleActionPanel renders panel for rule with a condition and scope, valu
               id="xpack.ml.ruleEditor.ruleActionPanel.editRuleLinkText"
               values={Object {}}
             />
-          </ForwardRef>,
+          </EuiLink>,
           "title": "",
         },
         Object {
@@ -143,7 +143,7 @@ exports[`RuleActionPanel renders panel for rule with scope, value in filter list
           />,
         },
         Object {
-          "description": <ForwardRef
+          "description": <EuiLink
             onClick={[Function]}
           >
             <FormattedMessage
@@ -151,7 +151,7 @@ exports[`RuleActionPanel renders panel for rule with scope, value in filter list
               id="xpack.ml.ruleEditor.ruleActionPanel.editRuleLinkText"
               values={Object {}}
             />
-          </ForwardRef>,
+          </EuiLink>,
           "title": <FormattedMessage
             defaultMessage="Actions"
             id="xpack.ml.ruleEditor.ruleActionPanel.actionsTitle"
diff --git a/x-pack/plugins/ml/public/application/components/validate_job/__snapshots__/validate_job_view.test.js.snap b/x-pack/plugins/ml/public/application/components/validate_job/__snapshots__/validate_job_view.test.js.snap
index f7752a1ae25a1..cbbf84b9e51ec 100644
--- a/x-pack/plugins/ml/public/application/components/validate_job/__snapshots__/validate_job_view.test.js.snap
+++ b/x-pack/plugins/ml/public/application/components/validate_job/__snapshots__/validate_job_view.test.js.snap
@@ -59,7 +59,7 @@ exports[`ValidateJob renders button and modal with a message 1`] = `
           id="xpack.ml.validateJob.modal.linkToJobTipsText"
           values={
             Object {
-              "mlJobTipsLink": <ForwardRef
+              "mlJobTipsLink": <EuiLink
                 href="https://www.elastic.co/guide/en/machine-learning/jest-metadata-mock-branch/create-jobs.html#job-tips"
                 target="_blank"
               >
@@ -68,7 +68,7 @@ exports[`ValidateJob renders button and modal with a message 1`] = `
                   id="xpack.ml.validateJob.modal.linkToJobTipsText.mlJobTipsLinkText"
                   values={Object {}}
                 />
-              </ForwardRef>,
+              </EuiLink>,
             }
           }
         />
@@ -149,7 +149,7 @@ exports[`ValidateJob renders the button and modal with a success message 1`] = `
           id="xpack.ml.validateJob.modal.linkToJobTipsText"
           values={
             Object {
-              "mlJobTipsLink": <ForwardRef
+              "mlJobTipsLink": <EuiLink
                 href="https://www.elastic.co/guide/en/machine-learning/jest-metadata-mock-branch/create-jobs.html#job-tips"
                 target="_blank"
               >
@@ -158,7 +158,7 @@ exports[`ValidateJob renders the button and modal with a success message 1`] = `
                   id="xpack.ml.validateJob.modal.linkToJobTipsText.mlJobTipsLinkText"
                   values={Object {}}
                 />
-              </ForwardRef>,
+              </EuiLink>,
             }
           }
         />
diff --git a/x-pack/plugins/ml/public/application/datavisualizer/file_based/components/edit_flyout/__snapshots__/overrides.test.js.snap b/x-pack/plugins/ml/public/application/datavisualizer/file_based/components/edit_flyout/__snapshots__/overrides.test.js.snap
index 59481cb086566..24c9dc85979e7 100644
--- a/x-pack/plugins/ml/public/application/datavisualizer/file_based/components/edit_flyout/__snapshots__/overrides.test.js.snap
+++ b/x-pack/plugins/ml/public/application/datavisualizer/file_based/components/edit_flyout/__snapshots__/overrides.test.js.snap
@@ -83,12 +83,12 @@ exports[`Overrides render overrides 1`] = `
       <EuiText
         size="xs"
       >
-        <ForwardRef
+        <EuiLink
           href="https://www.elastic.co/guide/en/elasticsearch/reference/jest-metadata-mock-branch/search-aggregations-bucket-daterange-aggregation.html#date-format-pattern"
           target="_blank"
         >
           See more on accepted formats
-        </ForwardRef>
+        </EuiLink>
       </EuiText>
     }
     label={
diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.test.tsx b/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.test.tsx
index 8a5dbc40db394..df450a33a52df 100644
--- a/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.test.tsx
+++ b/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.test.tsx
@@ -16,6 +16,17 @@ import { TimeBuckets as TimeBucketsClass } from '../util/time_buckets';
 import { ChartTooltipService } from '../components/chart_tooltip';
 import { OverallSwimlaneData } from './explorer_utils';
 
+jest.mock('d3', () => {
+  const original = jest.requireActual('d3');
+
+  return {
+    ...original,
+    transform: jest.fn().mockReturnValue({
+      translate: jest.fn().mockReturnValue(0),
+    }),
+  };
+});
+
 jest.mock('./explorer_dashboard_service', () => ({
   dragSelect$: {
     subscribe: jest.fn(() => ({
diff --git a/x-pack/plugins/ml/public/application/settings/calendars/list/__snapshots__/header.test.js.snap b/x-pack/plugins/ml/public/application/settings/calendars/list/__snapshots__/header.test.js.snap
index 0b39841ed61e4..c31ddc173f909 100644
--- a/x-pack/plugins/ml/public/application/settings/calendars/list/__snapshots__/header.test.js.snap
+++ b/x-pack/plugins/ml/public/application/settings/calendars/list/__snapshots__/header.test.js.snap
@@ -88,7 +88,7 @@ exports[`CalendarListsHeader renders header 1`] = `
           values={
             Object {
               "br": <br />,
-              "learnMoreLink": <ForwardRef
+              "learnMoreLink": <EuiLink
                 href="https://www.elastic.co/guide/en/machine-learning/jest-metadata-mock-branch/ml-calendars.html"
                 target="_blank"
               >
@@ -97,7 +97,7 @@ exports[`CalendarListsHeader renders header 1`] = `
                   id="xpack.ml.settings.calendars.listHeader.calendarsDescription.learnMoreLinkText"
                   values={Object {}}
                 />
-              </ForwardRef>,
+              </EuiLink>,
             }
           }
         />
diff --git a/x-pack/plugins/monitoring/public/components/logs/__snapshots__/logs.test.js.snap b/x-pack/plugins/monitoring/public/components/logs/__snapshots__/logs.test.js.snap
index a8eebdaf6aa39..28389ef3c3211 100644
--- a/x-pack/plugins/monitoring/public/components/logs/__snapshots__/logs.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/logs/__snapshots__/logs.test.js.snap
@@ -12,11 +12,11 @@ exports[`Logs should render a link to filter by cluster uuid 1`] = `
       id="xpack.monitoring.logs.listing.linkText"
       values={
         Object {
-          "link": <ForwardRef
+          "link": <EuiLink
             href="/app/logs/link-to/internal-stack-monitoring/logs?filter=elasticsearch.cluster.uuid:12345"
           >
             Logs
-          </ForwardRef>,
+          </EuiLink>,
         }
       }
     />
@@ -36,11 +36,11 @@ exports[`Logs should render a link to filter by cluster uuid and index uuid 1`]
       id="xpack.monitoring.logs.listing.linkText"
       values={
         Object {
-          "link": <ForwardRef
+          "link": <EuiLink
             href="/app/logs/link-to/internal-stack-monitoring/logs?filter=elasticsearch.cluster.uuid:12345 and elasticsearch.index.name:6789"
           >
             Logs
-          </ForwardRef>,
+          </EuiLink>,
         }
       }
     />
@@ -60,11 +60,11 @@ exports[`Logs should render a link to filter by cluster uuid and node uuid 1`] =
       id="xpack.monitoring.logs.listing.linkText"
       values={
         Object {
-          "link": <ForwardRef
+          "link": <EuiLink
             href="/app/logs/link-to/internal-stack-monitoring/logs?filter=elasticsearch.cluster.uuid:12345 and elasticsearch.node.id:6789"
           >
             Logs
-          </ForwardRef>,
+          </EuiLink>,
         }
       }
     />
@@ -286,11 +286,11 @@ exports[`Logs should render normally 1`] = `
         id="xpack.monitoring.logs.listing.linkText"
         values={
           Object {
-            "link": <ForwardRef
+            "link": <EuiLink
               href="/app/logs/link-to/internal-stack-monitoring/logs"
             >
               Logs
-            </ForwardRef>,
+            </EuiLink>,
           }
         }
       />
diff --git a/x-pack/plugins/monitoring/public/components/logs/__snapshots__/reason.test.js.snap b/x-pack/plugins/monitoring/public/components/logs/__snapshots__/reason.test.js.snap
index de4b888a48545..b63fe7047e96c 100644
--- a/x-pack/plugins/monitoring/public/components/logs/__snapshots__/reason.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/logs/__snapshots__/reason.test.js.snap
@@ -12,7 +12,7 @@ exports[`Logs should render a default message 1`] = `
       id="xpack.monitoring.logs.reason.defaultMessage"
       values={
         Object {
-          "link": <ForwardRef
+          "link": <EuiLink
             href="https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-installation.html"
             target="_blank"
           >
@@ -21,7 +21,7 @@ exports[`Logs should render a default message 1`] = `
               id="xpack.monitoring.logs.reason.defaultMessageLink"
               values={Object {}}
             />
-          </ForwardRef>,
+          </EuiLink>,
         }
       }
     />
@@ -41,12 +41,12 @@ exports[`Logs should render with a bad indices reason 1`] = `
       id="xpack.monitoring.logs.reason.correctIndexNameMessage"
       values={
         Object {
-          "link": <ForwardRef
+          "link": <EuiLink
             href="https://www.elastic.co/guide/en/kibana/current/monitor-troubleshooting.html"
             target="_blank"
           >
             Click here for more information
-          </ForwardRef>,
+          </EuiLink>,
         }
       }
     />
@@ -66,12 +66,12 @@ exports[`Logs should render with a no cluster found reason 1`] = `
       id="xpack.monitoring.logs.reason.noClusterMessage"
       values={
         Object {
-          "link": <ForwardRef
+          "link": <EuiLink
             href="https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-module-elasticsearch.html"
             target="_blank"
           >
             setup
-          </ForwardRef>,
+          </EuiLink>,
         }
       }
     />
@@ -91,12 +91,12 @@ exports[`Logs should render with a no index found reason 1`] = `
       id="xpack.monitoring.logs.reason.noIndexMessage"
       values={
         Object {
-          "link": <ForwardRef
+          "link": <EuiLink
             href="https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-module-elasticsearch.html"
             target="_blank"
           >
             setup
-          </ForwardRef>,
+          </EuiLink>,
         }
       }
     />
@@ -116,12 +116,12 @@ exports[`Logs should render with a no index pattern found reason 1`] = `
       id="xpack.monitoring.logs.reason.noIndexPatternMessage"
       values={
         Object {
-          "link": <ForwardRef
+          "link": <EuiLink
             href="https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-installation.html"
             target="_blank"
           >
             Filebeat
-          </ForwardRef>,
+          </EuiLink>,
         }
       }
     />
@@ -141,12 +141,12 @@ exports[`Logs should render with a no node found reason 1`] = `
       id="xpack.monitoring.logs.reason.noNodeMessage"
       values={
         Object {
-          "link": <ForwardRef
+          "link": <EuiLink
             href="https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-module-elasticsearch.html"
             target="_blank"
           >
             setup
-          </ForwardRef>,
+          </EuiLink>,
         }
       }
     />
@@ -166,12 +166,12 @@ exports[`Logs should render with a no structured logs reason 1`] = `
       id="xpack.monitoring.logs.reason.notUsingStructuredLogsMessage"
       values={
         Object {
-          "link": <ForwardRef
+          "link": <EuiLink
             href="https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-module-elasticsearch.html"
             target="_blank"
           >
             points to JSON logs
-          </ForwardRef>,
+          </EuiLink>,
           "varPaths": <Monospace>
             var.paths
           </Monospace>,
@@ -194,12 +194,12 @@ exports[`Logs should render with a no type found reason 1`] = `
       id="xpack.monitoring.logs.reason.noTypeMessage"
       values={
         Object {
-          "link": <ForwardRef
+          "link": <EuiLink
             href="https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-module-elasticsearch.html"
             target="_blank"
           >
             these directions
-          </ForwardRef>,
+          </EuiLink>,
         }
       }
     />
diff --git a/x-pack/plugins/monitoring/public/components/metricbeat_migration/flyout/__snapshots__/flyout.test.js.snap b/x-pack/plugins/monitoring/public/components/metricbeat_migration/flyout/__snapshots__/flyout.test.js.snap
index a4b2ea8c25020..c5507efb989de 100644
--- a/x-pack/plugins/monitoring/public/components/metricbeat_migration/flyout/__snapshots__/flyout.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/metricbeat_migration/flyout/__snapshots__/flyout.test.js.snap
@@ -155,7 +155,7 @@ exports[`Flyout apm part two should show instructions to migrate to metricbeat 1
         Object {
           "children": <EuiText>
             <p>
-              <ForwardRef
+              <EuiLink
                 href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html"
                 target="_blank"
               >
@@ -164,7 +164,7 @@ exports[`Flyout apm part two should show instructions to migrate to metricbeat 1
                   id="xpack.monitoring.metricbeatMigration.apmInstructions.installMetricbeatLinkText"
                   values={Object {}}
                 />
-              </ForwardRef>
+              </EuiLink>
             </p>
           </EuiText>,
           "title": "Install Metricbeat on the same server as the APM server",
@@ -214,7 +214,7 @@ exports[`Flyout apm part two should show instructions to migrate to metricbeat 1
                         Object {
                           "link": <React.Fragment>
                              
-                            <ForwardRef
+                            <EuiLink
                               href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-configuration.html"
                               target="_blank"
                             >
@@ -223,7 +223,7 @@ exports[`Flyout apm part two should show instructions to migrate to metricbeat 1
                                 id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
                                 values={Object {}}
                               />
-                            </ForwardRef>
+                            </EuiLink>
                           </React.Fragment>,
                         }
                       }
@@ -281,7 +281,7 @@ exports[`Flyout apm part two should show instructions to migrate to metricbeat 1
                         Object {
                           "link": <React.Fragment>
                              
-                            <ForwardRef
+                            <EuiLink
                               href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-configuration.html"
                               target="_blank"
                             >
@@ -290,7 +290,7 @@ exports[`Flyout apm part two should show instructions to migrate to metricbeat 1
                                 id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
                                 values={Object {}}
                               />
-                            </ForwardRef>
+                            </EuiLink>
                           </React.Fragment>,
                         }
                       }
@@ -305,7 +305,7 @@ exports[`Flyout apm part two should show instructions to migrate to metricbeat 1
         Object {
           "children": <EuiText>
             <p>
-              <ForwardRef
+              <EuiLink
                 href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-starting.html"
                 target="_blank"
               >
@@ -314,7 +314,7 @@ exports[`Flyout apm part two should show instructions to migrate to metricbeat 1
                   id="xpack.monitoring.metricbeatMigration.apmInstructions.startMetricbeatLinkText"
                   values={Object {}}
                 />
-              </ForwardRef>
+              </EuiLink>
             </p>
           </EuiText>,
           "title": "Start Metricbeat",
@@ -494,7 +494,7 @@ exports[`Flyout beats part two should show instructions to migrate to metricbeat
         Object {
           "children": <EuiText>
             <p>
-              <ForwardRef
+              <EuiLink
                 href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html"
                 target="_blank"
               >
@@ -503,7 +503,7 @@ exports[`Flyout beats part two should show instructions to migrate to metricbeat
                   id="xpack.monitoring.metricbeatMigration.beatsInstructions.installMetricbeatLinkText"
                   values={Object {}}
                 />
-              </ForwardRef>
+              </EuiLink>
             </p>
           </EuiText>,
           "title": "Install Metricbeat on the same server as this beat",
@@ -553,7 +553,7 @@ exports[`Flyout beats part two should show instructions to migrate to metricbeat
                       values={
                         Object {
                           "beatType": "beat",
-                          "link": <ForwardRef
+                          "link": <EuiLink
                             href="https://www.elastic.co/guide/en/beats/metricbeat/current/http-endpoint.html"
                             target="_blank"
                           >
@@ -566,7 +566,7 @@ exports[`Flyout beats part two should show instructions to migrate to metricbeat
                                 }
                               }
                             />
-                          </ForwardRef>,
+                          </EuiLink>,
                         }
                       }
                     />
@@ -590,7 +590,7 @@ exports[`Flyout beats part two should show instructions to migrate to metricbeat
                         Object {
                           "link": <React.Fragment>
                              
-                            <ForwardRef
+                            <EuiLink
                               href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-configuration.html"
                               target="_blank"
                             >
@@ -599,7 +599,7 @@ exports[`Flyout beats part two should show instructions to migrate to metricbeat
                                 id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
                                 values={Object {}}
                               />
-                            </ForwardRef>
+                            </EuiLink>
                           </React.Fragment>,
                         }
                       }
@@ -657,7 +657,7 @@ exports[`Flyout beats part two should show instructions to migrate to metricbeat
                         Object {
                           "link": <React.Fragment>
                              
-                            <ForwardRef
+                            <EuiLink
                               href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-configuration.html"
                               target="_blank"
                             >
@@ -666,7 +666,7 @@ exports[`Flyout beats part two should show instructions to migrate to metricbeat
                                 id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
                                 values={Object {}}
                               />
-                            </ForwardRef>
+                            </EuiLink>
                           </React.Fragment>,
                         }
                       }
@@ -681,7 +681,7 @@ exports[`Flyout beats part two should show instructions to migrate to metricbeat
         Object {
           "children": <EuiText>
             <p>
-              <ForwardRef
+              <EuiLink
                 href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-starting.html"
                 target="_blank"
               >
@@ -690,7 +690,7 @@ exports[`Flyout beats part two should show instructions to migrate to metricbeat
                   id="xpack.monitoring.metricbeatMigration.beatsInstructions.startMetricbeatLinkText"
                   values={Object {}}
                 />
-              </ForwardRef>
+              </EuiLink>
             </p>
           </EuiText>,
           "title": "Start Metricbeat",
@@ -859,7 +859,7 @@ exports[`Flyout elasticsearch part two should show instructions to migrate to me
         Object {
           "children": <EuiText>
             <p>
-              <ForwardRef
+              <EuiLink
                 href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html"
                 target="_blank"
               >
@@ -868,7 +868,7 @@ exports[`Flyout elasticsearch part two should show instructions to migrate to me
                   id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.installMetricbeatLinkText"
                   values={Object {}}
                 />
-              </ForwardRef>
+              </EuiLink>
             </p>
           </EuiText>,
           "title": "Install Metricbeat on the same server as Elasticsearch",
@@ -926,7 +926,7 @@ exports[`Flyout elasticsearch part two should show instructions to migrate to me
                         Object {
                           "link": <React.Fragment>
                              
-                            <ForwardRef
+                            <EuiLink
                               href="https://www.elastic.co/guide/en/elasticsearch/reference/current/configuring-metricbeat.html"
                               target="_blank"
                             >
@@ -935,7 +935,7 @@ exports[`Flyout elasticsearch part two should show instructions to migrate to me
                                 id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
                                 values={Object {}}
                               />
-                            </ForwardRef>
+                            </EuiLink>
                           </React.Fragment>,
                         }
                       }
@@ -993,7 +993,7 @@ exports[`Flyout elasticsearch part two should show instructions to migrate to me
                         Object {
                           "link": <React.Fragment>
                              
-                            <ForwardRef
+                            <EuiLink
                               href="https://www.elastic.co/guide/en/elasticsearch/reference/current/configuring-metricbeat.html"
                               target="_blank"
                             >
@@ -1002,7 +1002,7 @@ exports[`Flyout elasticsearch part two should show instructions to migrate to me
                                 id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
                                 values={Object {}}
                               />
-                            </ForwardRef>
+                            </EuiLink>
                           </React.Fragment>,
                         }
                       }
@@ -1017,7 +1017,7 @@ exports[`Flyout elasticsearch part two should show instructions to migrate to me
         Object {
           "children": <EuiText>
             <p>
-              <ForwardRef
+              <EuiLink
                 href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-starting.html"
                 target="_blank"
               >
@@ -1026,7 +1026,7 @@ exports[`Flyout elasticsearch part two should show instructions to migrate to me
                   id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.startMetricbeatLinkText"
                   values={Object {}}
                 />
-              </ForwardRef>
+              </EuiLink>
             </p>
           </EuiText>,
           "title": "Start Metricbeat",
@@ -1210,7 +1210,7 @@ exports[`Flyout kibana part two should show instructions to migrate to metricbea
         Object {
           "children": <EuiText>
             <p>
-              <ForwardRef
+              <EuiLink
                 href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html"
                 target="_blank"
               >
@@ -1219,7 +1219,7 @@ exports[`Flyout kibana part two should show instructions to migrate to metricbea
                   id="xpack.monitoring.metricbeatMigration.kibanaInstructions.installMetricbeatLinkText"
                   values={Object {}}
                 />
-              </ForwardRef>
+              </EuiLink>
             </p>
           </EuiText>,
           "title": "Install Metricbeat on the same server as Kibana",
@@ -1269,7 +1269,7 @@ exports[`Flyout kibana part two should show instructions to migrate to metricbea
                         Object {
                           "link": <React.Fragment>
                              
-                            <ForwardRef
+                            <EuiLink
                               href="https://www.elastic.co/guide/en/kibana/current/monitoring-metricbeat.html"
                               target="_blank"
                             >
@@ -1278,7 +1278,7 @@ exports[`Flyout kibana part two should show instructions to migrate to metricbea
                                 id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
                                 values={Object {}}
                               />
-                            </ForwardRef>
+                            </EuiLink>
                           </React.Fragment>,
                         }
                       }
@@ -1336,7 +1336,7 @@ exports[`Flyout kibana part two should show instructions to migrate to metricbea
                         Object {
                           "link": <React.Fragment>
                              
-                            <ForwardRef
+                            <EuiLink
                               href="https://www.elastic.co/guide/en/kibana/current/monitoring-metricbeat.html"
                               target="_blank"
                             >
@@ -1345,7 +1345,7 @@ exports[`Flyout kibana part two should show instructions to migrate to metricbea
                                 id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
                                 values={Object {}}
                               />
-                            </ForwardRef>
+                            </EuiLink>
                           </React.Fragment>,
                         }
                       }
@@ -1360,7 +1360,7 @@ exports[`Flyout kibana part two should show instructions to migrate to metricbea
         Object {
           "children": <EuiText>
             <p>
-              <ForwardRef
+              <EuiLink
                 href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-starting.html"
                 target="_blank"
               >
@@ -1369,7 +1369,7 @@ exports[`Flyout kibana part two should show instructions to migrate to metricbea
                   id="xpack.monitoring.metricbeatMigration.kibanaInstructions.startMetricbeatLinkText"
                   values={Object {}}
                 />
-              </ForwardRef>
+              </EuiLink>
             </p>
           </EuiText>,
           "title": "Start Metricbeat",
@@ -1544,7 +1544,7 @@ exports[`Flyout logstash part two should show instructions to migrate to metricb
         Object {
           "children": <EuiText>
             <p>
-              <ForwardRef
+              <EuiLink
                 href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html"
                 target="_blank"
               >
@@ -1553,7 +1553,7 @@ exports[`Flyout logstash part two should show instructions to migrate to metricb
                   id="xpack.monitoring.metricbeatMigration.logstashInstructions.installMetricbeatLinkText"
                   values={Object {}}
                 />
-              </ForwardRef>
+              </EuiLink>
             </p>
           </EuiText>,
           "title": "Install Metricbeat on the same server as Logstash",
@@ -1603,7 +1603,7 @@ exports[`Flyout logstash part two should show instructions to migrate to metricb
                         Object {
                           "link": <React.Fragment>
                              
-                            <ForwardRef
+                            <EuiLink
                               href="https://www.elastic.co/guide/en/logstash/current/monitoring-with-metricbeat.html"
                               target="_blank"
                             >
@@ -1612,7 +1612,7 @@ exports[`Flyout logstash part two should show instructions to migrate to metricb
                                 id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
                                 values={Object {}}
                               />
-                            </ForwardRef>
+                            </EuiLink>
                           </React.Fragment>,
                         }
                       }
@@ -1670,7 +1670,7 @@ exports[`Flyout logstash part two should show instructions to migrate to metricb
                         Object {
                           "link": <React.Fragment>
                              
-                            <ForwardRef
+                            <EuiLink
                               href="https://www.elastic.co/guide/en/logstash/current/monitoring-with-metricbeat.html"
                               target="_blank"
                             >
@@ -1679,7 +1679,7 @@ exports[`Flyout logstash part two should show instructions to migrate to metricb
                                 id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
                                 values={Object {}}
                               />
-                            </ForwardRef>
+                            </EuiLink>
                           </React.Fragment>,
                         }
                       }
@@ -1694,7 +1694,7 @@ exports[`Flyout logstash part two should show instructions to migrate to metricb
         Object {
           "children": <EuiText>
             <p>
-              <ForwardRef
+              <EuiLink
                 href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-starting.html"
                 target="_blank"
               >
@@ -1703,7 +1703,7 @@ exports[`Flyout logstash part two should show instructions to migrate to metricb
                   id="xpack.monitoring.metricbeatMigration.logstashInstructions.startMetricbeatLinkText"
                   values={Object {}}
                 />
-              </ForwardRef>
+              </EuiLink>
             </p>
           </EuiText>,
           "title": "Start Metricbeat",
@@ -1821,7 +1821,7 @@ exports[`Flyout should render the beat type for beats for the enabling metricbea
         Object {
           "children": <EuiText>
             <p>
-              <ForwardRef
+              <EuiLink
                 href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html"
                 target="_blank"
               >
@@ -1830,7 +1830,7 @@ exports[`Flyout should render the beat type for beats for the enabling metricbea
                   id="xpack.monitoring.metricbeatMigration.beatsInstructions.installMetricbeatLinkText"
                   values={Object {}}
                 />
-              </ForwardRef>
+              </EuiLink>
             </p>
           </EuiText>,
           "title": "Install Metricbeat on the same server as this filebeat",
@@ -1880,7 +1880,7 @@ exports[`Flyout should render the beat type for beats for the enabling metricbea
                       values={
                         Object {
                           "beatType": "filebeat",
-                          "link": <ForwardRef
+                          "link": <EuiLink
                             href="https://www.elastic.co/guide/en/beats/filebeat/current/http-endpoint.html"
                             target="_blank"
                           >
@@ -1893,7 +1893,7 @@ exports[`Flyout should render the beat type for beats for the enabling metricbea
                                 }
                               }
                             />
-                          </ForwardRef>,
+                          </EuiLink>,
                         }
                       }
                     />
@@ -1917,7 +1917,7 @@ exports[`Flyout should render the beat type for beats for the enabling metricbea
                         Object {
                           "link": <React.Fragment>
                              
-                            <ForwardRef
+                            <EuiLink
                               href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-configuration.html"
                               target="_blank"
                             >
@@ -1926,7 +1926,7 @@ exports[`Flyout should render the beat type for beats for the enabling metricbea
                                 id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
                                 values={Object {}}
                               />
-                            </ForwardRef>
+                            </EuiLink>
                           </React.Fragment>,
                         }
                       }
@@ -1984,7 +1984,7 @@ exports[`Flyout should render the beat type for beats for the enabling metricbea
                         Object {
                           "link": <React.Fragment>
                              
-                            <ForwardRef
+                            <EuiLink
                               href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-configuration.html"
                               target="_blank"
                             >
@@ -1993,7 +1993,7 @@ exports[`Flyout should render the beat type for beats for the enabling metricbea
                                 id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
                                 values={Object {}}
                               />
-                            </ForwardRef>
+                            </EuiLink>
                           </React.Fragment>,
                         }
                       }
@@ -2008,7 +2008,7 @@ exports[`Flyout should render the beat type for beats for the enabling metricbea
         Object {
           "children": <EuiText>
             <p>
-              <ForwardRef
+              <EuiLink
                 href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-starting.html"
                 target="_blank"
               >
@@ -2017,7 +2017,7 @@ exports[`Flyout should render the beat type for beats for the enabling metricbea
                   id="xpack.monitoring.metricbeatMigration.beatsInstructions.startMetricbeatLinkText"
                   values={Object {}}
                 />
-              </ForwardRef>
+              </EuiLink>
             </p>
           </EuiText>,
           "title": "Start Metricbeat",
diff --git a/x-pack/plugins/monitoring/server/config.test.ts b/x-pack/plugins/monitoring/server/config.test.ts
index 6a57f667312c6..16d52f684109e 100644
--- a/x-pack/plugins/monitoring/server/config.test.ts
+++ b/x-pack/plugins/monitoring/server/config.test.ts
@@ -4,10 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { createConfig, configSchema } from './config';
-jest.mock('fs', () => ({
-  ...jest.requireActual('fs'),
-  readFileSync: jest.fn().mockImplementation((path: string) => `contents-of-${path}`),
-}));
+jest.mock('fs', () => {
+  const original = jest.requireActual('fs');
+
+  return {
+    ...original,
+    readFileSync: jest.fn().mockImplementation((path: string) => `contents-of-${path}`),
+  };
+});
 
 describe('config schema', () => {
   it('generates proper defaults', () => {
diff --git a/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap b/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
index bcc9a3f14d48b..e4c8159f59828 100644
--- a/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
+++ b/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
@@ -703,7 +703,7 @@ exports[`RemoteClusterForm proxy mode renders correct connection settings when u
                         id="xpack.remoteClusters.remoteClusterForm.fieldServerNameHelpText"
                         values={
                           Object {
-                            "learnMoreLink": <ForwardRef
+                            "learnMoreLink": <EuiLink
                               target="_blank"
                             >
                               <FormattedMessage
@@ -711,7 +711,7 @@ exports[`RemoteClusterForm proxy mode renders correct connection settings when u
                                 id="xpack.remoteClusters.remoteClusterForm.fieldServerNameHelpText.learnMoreLinkLabel"
                                 values={Object {}}
                               />
-                            </ForwardRef>,
+                            </EuiLink>,
                           }
                         }
                       />
@@ -812,7 +812,7 @@ exports[`RemoteClusterForm proxy mode renders correct connection settings when u
                               id="xpack.remoteClusters.remoteClusterForm.fieldServerNameHelpText"
                               values={
                                 Object {
-                                  "learnMoreLink": <ForwardRef
+                                  "learnMoreLink": <EuiLink
                                     target="_blank"
                                   >
                                     <FormattedMessage
@@ -820,7 +820,7 @@ exports[`RemoteClusterForm proxy mode renders correct connection settings when u
                                       id="xpack.remoteClusters.remoteClusterForm.fieldServerNameHelpText.learnMoreLinkLabel"
                                       values={Object {}}
                                     />
-                                  </ForwardRef>,
+                                  </EuiLink>,
                                 }
                               }
                             >
@@ -976,7 +976,7 @@ exports[`RemoteClusterForm proxy mode renders correct connection settings when u
                 id="xpack.remoteClusters.remoteClusterForm.sectionSkipUnavailableDescription"
                 values={
                   Object {
-                    "learnMoreLink": <ForwardRef
+                    "learnMoreLink": <EuiLink
                       target="_blank"
                     >
                       <FormattedMessage
@@ -984,7 +984,7 @@ exports[`RemoteClusterForm proxy mode renders correct connection settings when u
                         id="xpack.remoteClusters.remoteClusterForm.sectionSkipUnavailableDescription.learnMoreLinkLabel"
                         values={Object {}}
                       />
-                    </ForwardRef>,
+                    </EuiLink>,
                     "optionName": <strong>
                       <FormattedMessage
                         defaultMessage="Skip if unavailable"
@@ -1069,7 +1069,7 @@ exports[`RemoteClusterForm proxy mode renders correct connection settings when u
                               id="xpack.remoteClusters.remoteClusterForm.sectionSkipUnavailableDescription"
                               values={
                                 Object {
-                                  "learnMoreLink": <ForwardRef
+                                  "learnMoreLink": <EuiLink
                                     target="_blank"
                                   >
                                     <FormattedMessage
@@ -1077,7 +1077,7 @@ exports[`RemoteClusterForm proxy mode renders correct connection settings when u
                                       id="xpack.remoteClusters.remoteClusterForm.sectionSkipUnavailableDescription.learnMoreLinkLabel"
                                       values={Object {}}
                                     />
-                                  </ForwardRef>,
+                                  </EuiLink>,
                                   "optionName": <strong>
                                     <FormattedMessage
                                       defaultMessage="Skip if unavailable"
diff --git a/x-pack/plugins/security/public/authentication/access_agreement/access_agreement_page.test.tsx b/x-pack/plugins/security/public/authentication/access_agreement/access_agreement_page.test.tsx
index 89b7489d45ebb..478b1513697a0 100644
--- a/x-pack/plugins/security/public/authentication/access_agreement/access_agreement_page.test.tsx
+++ b/x-pack/plugins/security/public/authentication/access_agreement/access_agreement_page.test.tsx
@@ -21,10 +21,6 @@ describe('AccessAgreementPage', () => {
     });
   });
 
-  afterAll(() => {
-    delete (window as any).location;
-  });
-
   it('renders as expected when state is available', async () => {
     const coreStartMock = coreMock.createStart();
     coreStartMock.http.get.mockResolvedValue({ accessAgreement: 'This is [link](../link)' });
diff --git a/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.test.tsx b/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.test.tsx
index 9675be2a4d6a7..39131f9f4499f 100644
--- a/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.test.tsx
+++ b/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.test.tsx
@@ -47,10 +47,6 @@ describe('LoginForm', () => {
     });
   });
 
-  afterAll(() => {
-    delete (window as any).location;
-  });
-
   it('renders as expected', () => {
     const coreStartMock = coreMock.createStart();
     expect(
diff --git a/x-pack/plugins/security/public/authentication/login/login_page.test.tsx b/x-pack/plugins/security/public/authentication/login/login_page.test.tsx
index ab107e46dfff6..5370c981f2b65 100644
--- a/x-pack/plugins/security/public/authentication/login/login_page.test.tsx
+++ b/x-pack/plugins/security/public/authentication/login/login_page.test.tsx
@@ -48,10 +48,6 @@ describe('LoginPage', () => {
     resetHttpMock();
   });
 
-  afterAll(() => {
-    delete (window as any).location;
-  });
-
   describe('page', () => {
     it('renders as expected', async () => {
       const coreStartMock = coreMock.createStart();
diff --git a/x-pack/plugins/security/public/authentication/logout/logout_app.test.ts b/x-pack/plugins/security/public/authentication/logout/logout_app.test.ts
index c17a0c2ca27b1..279500d14f211 100644
--- a/x-pack/plugins/security/public/authentication/logout/logout_app.test.ts
+++ b/x-pack/plugins/security/public/authentication/logout/logout_app.test.ts
@@ -21,11 +21,6 @@ describe('logoutApp', () => {
     });
   });
 
-  afterAll(() => {
-    delete (window as any).sessionStorage;
-    delete (window as any).location;
-  });
-
   it('properly registers application', () => {
     const coreSetupMock = coreMock.createSetup();
 
diff --git a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/__snapshots__/api_keys_grid_page.test.tsx.snap b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/__snapshots__/api_keys_grid_page.test.tsx.snap
index 6d1e0054078bd..050af4bd20a47 100644
--- a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/__snapshots__/api_keys_grid_page.test.tsx.snap
+++ b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/__snapshots__/api_keys_grid_page.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`APIKeysGridPage renders a callout when API keys are not enabled 1`] = `
             id="xpack.security.management.apiKeys.table.apiKeysDisabledErrorDescription"
             values={
               Object {
-                "link": <ForwardRef
+                "link": <EuiLink
                   href="https://www.elastic.co/guide/en/elasticsearch/reference/mocked-test-branch/security-settings.html#api-key-service-settings"
                   target="_blank"
                 >
@@ -70,7 +70,7 @@ exports[`APIKeysGridPage renders a callout when API keys are not enabled 1`] = `
                     id="xpack.security.management.apiKeys.table.apiKeysDisabledErrorLinkText"
                     values={Object {}}
                   />
-                </ForwardRef>,
+                </EuiLink>,
               }
             }
           >
diff --git a/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap b/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap
index 46fb9b8572679..1c020685c246d 100644
--- a/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap
+++ b/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`it renders without crashing 1`] = `
           id="xpack.security.management.editRole.elasticSearchPrivileges.manageRoleActionsDescription"
           values={Object {}}
         />
-        <ForwardRef
+        <EuiLink
           className="editRole__learnMore"
           href="https://www.elastic.co/guide/en/elasticsearch/reference/mocked-test-branch/security-privileges.html#privileges-list-cluster"
           target="_blank"
@@ -23,7 +23,7 @@ exports[`it renders without crashing 1`] = `
             id="xpack.security.management.editRole.elasticSearchPrivileges.learnMoreLinkText"
             values={Object {}}
           />
-        </ForwardRef>
+        </EuiLink>
       </p>
     }
     title={
@@ -76,7 +76,7 @@ exports[`it renders without crashing 1`] = `
           id="xpack.security.management.editRole.elasticSearchPrivileges.howToBeSubmittedOnBehalfOfOtherUsersDescription"
           values={Object {}}
         />
-        <ForwardRef
+        <EuiLink
           className="editRole__learnMore"
           href="https://www.elastic.co/guide/en/elasticsearch/reference/mocked-test-branch/security-privileges.html#_run_as_privilege"
           target="_blank"
@@ -86,7 +86,7 @@ exports[`it renders without crashing 1`] = `
             id="xpack.security.management.editRole.elasticSearchPrivileges.learnMoreLinkText"
             values={Object {}}
           />
-        </ForwardRef>
+        </EuiLink>
       </p>
     }
     title={
diff --git a/x-pack/plugins/security/public/nav_control/nav_control_component.test.tsx b/x-pack/plugins/security/public/nav_control/nav_control_component.test.tsx
index ad69fa7ce0d3a..c1c6a9f69b6ec 100644
--- a/x-pack/plugins/security/public/nav_control/nav_control_component.test.tsx
+++ b/x-pack/plugins/security/public/nav_control/nav_control_component.test.tsx
@@ -22,7 +22,7 @@ describe('SecurityNavControl', () => {
     const wrapper = shallowWithIntl(<SecurityNavControl {...props} />);
     const { button } = wrapper.find(EuiPopover).props();
     expect(button).toMatchInlineSnapshot(`
-      <ForwardRef
+      <EuiHeaderSectionItemButton
         aria-controls="headerUserMenu"
         aria-expanded={false}
         aria-haspopup="true"
@@ -33,7 +33,7 @@ describe('SecurityNavControl', () => {
         <EuiLoadingSpinner
           size="m"
         />
-      </ForwardRef>
+      </EuiHeaderSectionItemButton>
     `);
   });
 
@@ -49,7 +49,7 @@ describe('SecurityNavControl', () => {
     wrapper.update();
     const { button } = wrapper.find(EuiPopover).props();
     expect(button).toMatchInlineSnapshot(`
-      <ForwardRef
+      <EuiHeaderSectionItemButton
         aria-controls="headerUserMenu"
         aria-expanded={false}
         aria-haspopup="true"
@@ -61,7 +61,7 @@ describe('SecurityNavControl', () => {
           name="foo"
           size="s"
         />
-      </ForwardRef>
+      </EuiHeaderSectionItemButton>
     `);
   });
 
diff --git a/x-pack/plugins/security/public/session/session_expired.test.ts b/x-pack/plugins/security/public/session/session_expired.test.ts
index 1ec2f772050f9..de0a76c28d54c 100644
--- a/x-pack/plugins/security/public/session/session_expired.test.ts
+++ b/x-pack/plugins/security/public/session/session_expired.test.ts
@@ -12,8 +12,6 @@ describe('#logout', () => {
   const LOGOUT_URL = '/logout';
   const TENANT = '/some-basepath';
 
-  let newUrlPromise: Promise<string>;
-
   beforeAll(() => {
     Object.defineProperty(window, 'sessionStorage', {
       value: {
@@ -24,13 +22,16 @@ describe('#logout', () => {
   });
 
   beforeEach(() => {
-    window.history.pushState({}, '', CURRENT_URL);
-    mockGetItem.mockReset();
-    newUrlPromise = new Promise<string>((resolve) => {
-      jest.spyOn(window.location, 'assign').mockImplementation((url) => {
-        resolve(url);
-      });
+    Object.defineProperty(window, 'location', {
+      value: {
+        assign: jest.fn(),
+        pathname: CURRENT_URL,
+        search: '',
+        hash: '',
+      },
+      configurable: true,
     });
+    mockGetItem.mockReset();
   });
 
   afterAll(() => {
@@ -42,7 +43,9 @@ describe('#logout', () => {
     sessionExpired.logout();
 
     const next = `&next=${encodeURIComponent(CURRENT_URL)}`;
-    await expect(newUrlPromise).resolves.toBe(`${LOGOUT_URL}?msg=SESSION_EXPIRED${next}`);
+    await expect(window.location.assign).toHaveBeenCalledWith(
+      `${LOGOUT_URL}?msg=SESSION_EXPIRED${next}`
+    );
   });
 
   it(`adds 'provider' parameter when sessionStorage contains the provider name for this tenant`, async () => {
@@ -57,7 +60,7 @@ describe('#logout', () => {
 
     const next = `&next=${encodeURIComponent(CURRENT_URL)}`;
     const provider = `&provider=${providerName}`;
-    await expect(newUrlPromise).resolves.toBe(
+    await expect(window.location.assign).toBeCalledWith(
       `${LOGOUT_URL}?msg=SESSION_EXPIRED${next}${provider}`
     );
   });
diff --git a/x-pack/plugins/security_solution/public/alerts/components/rules/pre_packaged_rules/load_empty_prompt.test.tsx b/x-pack/plugins/security_solution/public/alerts/components/rules/pre_packaged_rules/load_empty_prompt.test.tsx
index 77c7efec262fa..89f6399071dd3 100644
--- a/x-pack/plugins/security_solution/public/alerts/components/rules/pre_packaged_rules/load_empty_prompt.test.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/components/rules/pre_packaged_rules/load_empty_prompt.test.tsx
@@ -9,12 +9,16 @@ import { shallow } from 'enzyme';
 
 import { PrePackagedRulesPrompt } from './load_empty_prompt';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    useHistory: jest.fn(),
-  }),
-}));
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: () => ({
+      useHistory: jest.fn(),
+    }),
+  };
+});
 
 jest.mock('../../../../common/components/link_to');
 
diff --git a/x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/__snapshots__/index.test.tsx.snap
index 1bee36ed9e185..549f0590681bd 100644
--- a/x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/__snapshots__/index.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`RuleActionsOverflow snapshots renders correctly against snapshot 1`] =
         delay="regular"
         position="top"
       >
-        <ForwardRef(Styled(EuiButtonIcon))
+        <Styled(EuiButtonIcon)
           aria-label="All actions"
           data-test-subj="rules-details-popover-button-icon"
           iconType="boxesHorizontal"
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/index.test.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/index.test.tsx
index 363550f1682e0..ae5c129befa5d 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/index.test.tsx
@@ -13,12 +13,16 @@ import { TestProviders } from '../../../../../common/mock';
 import { wait } from '../../../../../common/lib/helpers';
 import { AllRules } from './index';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    useHistory: jest.fn(),
-  }),
-}));
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: () => ({
+      useHistory: jest.fn(),
+    }),
+  };
+});
 
 jest.mock('../../../../../common/components/link_to');
 
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/create/index.test.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/create/index.test.tsx
index cc39a26a8faca..b7a2d017c3666 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/create/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/create/index.test.tsx
@@ -11,12 +11,16 @@ import { TestProviders } from '../../../../../common/mock';
 import { CreateRulePage } from './index';
 import { useUserInfo } from '../../../../components/user_info';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    useHistory: jest.fn(),
-  }),
-}));
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: () => ({
+      useHistory: jest.fn(),
+    }),
+  };
+});
 
 jest.mock('../../../../../common/components/link_to');
 jest.mock('../../../../components/user_info');
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/index.test.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/index.test.tsx
index 1c947deb95f97..7e6cd48ddc003 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/index.test.tsx
@@ -11,12 +11,16 @@ import { RulesPage } from './index';
 import { useUserInfo } from '../../../components/user_info';
 import { usePrePackagedRules } from '../../../../alerts/containers/detection_engine/rules';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    useHistory: jest.fn(),
-  }),
-}));
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: () => ({
+      useHistory: jest.fn(),
+    }),
+  };
+});
 
 jest.mock('../../../../common/components/link_to');
 jest.mock('../../../components/user_info');
diff --git a/x-pack/plugins/security_solution/public/cases/components/all_cases_modal/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/all_cases_modal/index.test.tsx
index 67b0f56367462..f4fd7cc67224f 100644
--- a/x-pack/plugins/security_solution/public/cases/components/all_cases_modal/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/all_cases_modal/index.test.tsx
@@ -15,12 +15,16 @@ import { useGetCasesStatus } from '../../containers/use_get_cases_status';
 import { useUpdateCases } from '../../containers/use_bulk_update_case';
 import { EuiTableRow } from '@elastic/eui';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    useHistory: jest.fn(),
-  }),
-}));
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: () => ({
+      useHistory: jest.fn(),
+    }),
+  };
+});
 
 jest.mock('../../../common/components/link_to');
 
diff --git a/x-pack/plugins/security_solution/public/cases/components/case_view/actions.test.tsx b/x-pack/plugins/security_solution/public/cases/components/case_view/actions.test.tsx
index 1721cb5f819f0..86ec7d79a3f75 100644
--- a/x-pack/plugins/security_solution/public/cases/components/case_view/actions.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/case_view/actions.test.tsx
@@ -15,12 +15,16 @@ import * as i18n from './translations';
 jest.mock('../../containers/use_delete_cases');
 const useDeleteCasesMock = useDeleteCases as jest.Mock;
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    useHistory: jest.fn(),
-  }),
-}));
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: () => ({
+      useHistory: jest.fn(),
+    }),
+  };
+});
 
 describe('CaseView actions', () => {
   const handleOnDeleteConfirm = jest.fn();
diff --git a/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.test.tsx b/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.test.tsx
index 1315cf1c962e7..5e19211b47078 100644
--- a/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.test.tsx
@@ -12,12 +12,16 @@ import { ConfigureCaseButton, ConfigureCaseButtonProps } from './button';
 import { TestProviders } from '../../../common/mock';
 import { searchURL } from './__mock__';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    useHistory: jest.fn(),
-  }),
-}));
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: () => ({
+      useHistory: jest.fn(),
+    }),
+  };
+});
 
 jest.mock('../../../common/components/link_to');
 
diff --git a/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.test.tsx
index 9dfeec3b26ba9..f2de830a71644 100644
--- a/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.test.tsx
@@ -15,12 +15,16 @@ import { useGetActionLicense } from '../../containers/use_get_action_license';
 import { getKibanaConfigError, getLicenseError } from './helpers';
 import { connectorsMock } from '../../containers/configure/mock';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    useHistory: jest.fn(),
-  }),
-}));
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: () => ({
+      useHistory: jest.fn(),
+    }),
+  };
+});
 
 jest.mock('../../../common/components/link_to');
 jest.mock('../../containers/use_get_action_license');
diff --git a/x-pack/plugins/security_solution/public/common/components/charts/common.test.tsx b/x-pack/plugins/security_solution/public/common/components/charts/common.test.tsx
index 023768c6af07d..24141767079ee 100644
--- a/x-pack/plugins/security_solution/public/common/components/charts/common.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/charts/common.test.tsx
@@ -21,8 +21,10 @@ import {
 jest.mock('../../lib/kibana');
 
 jest.mock('@elastic/charts', () => {
+  const original = jest.requireActual('@elastic/charts');
+
   return {
-    ...jest.requireActual('@elastic/charts'),
+    ...original,
     getSpecId: jest.fn(() => {}),
   };
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/empty_page/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/empty_page/__snapshots__/index.test.tsx.snap
index f9ee342967b8a..65893f84f5e56 100644
--- a/x-pack/plugins/security_solution/public/common/components/empty_page/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/empty_page/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <EmptyPrompt
   actions={
-    <ForwardRef
+    <EuiFlexGroup
       justifyContent="center"
     >
       <EuiFlexItem
@@ -16,7 +16,7 @@ exports[`renders correctly 1`] = `
           Do Something
         </EuiButton>
       </EuiFlexItem>
-    </ForwardRef>
+    </EuiFlexGroup>
   }
   iconType="securityAnalyticsApp"
   title={
diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/header_page/index.test.tsx
index ef838fc50d108..30f510509913a 100644
--- a/x-pack/plugins/security_solution/public/common/components/header_page/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/header_page/index.test.tsx
@@ -13,12 +13,16 @@ import { HeaderPage } from './index';
 import { useMountAppended } from '../../utils/use_mount_appended';
 import { SecurityPageName } from '../../../app/types';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    useHistory: jest.fn(),
-  }),
-}));
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: () => ({
+      useHistory: jest.fn(),
+    }),
+  };
+});
 
 jest.mock('../link_to');
 
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
index 249cc1fe5f896..a9ec474a7b684 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
@@ -82,7 +82,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
     <EuiPopover
       anchorPosition="downCenter"
       button={
-        <ForwardRef(Styled(EuiIcon))
+        <Icon
           type="iInCircle"
         />
       }
@@ -105,14 +105,14 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
                 <EuiSpacer
                   size="m"
                 />
-                <ForwardRef(Styled(EuiText))>
+                <LargeScore>
                   17
-                </ForwardRef(Styled(EuiText))>
+                </LargeScore>
               </React.Fragment>,
               "title": "Max Anomaly Score",
             },
             Object {
-              "description": <ForwardRef
+              "description": <EuiFlexGroup
                 direction="column"
                 gutterSize="none"
                 responsive={false}
@@ -197,7 +197,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
                     startDate={0}
                   />
                 </EuiFlexItem>
-              </ForwardRef>,
+              </EuiFlexGroup>,
               "title": <React.Fragment>
                 <EuiSpacer
                   size="m"
@@ -206,7 +206,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
               </React.Fragment>,
             },
             Object {
-              "description": <ForwardRef
+              "description": <EuiFlexGroup
                 direction="column"
                 gutterSize="none"
                 responsive={false}
@@ -221,19 +221,19 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
                 <EuiFlexItem
                   grow={false}
                 >
-                  <ForwardRef
+                  <EuiLink
                     data-test-subj="anomaly-description-narrow-range-link"
                     onClick={[Function]}
                     target="_blank"
                   >
                     Narrow to this date range
-                  </ForwardRef>
+                  </EuiLink>
                 </EuiFlexItem>
-              </ForwardRef>,
+              </EuiFlexGroup>,
               "title": "Detected",
             },
             Object {
-              "description": <ForwardRef
+              "description": <EuiFlexGroup
                 direction="column"
                 gutterSize="none"
                 responsive={false}
@@ -243,11 +243,11 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
                 >
                   process.name: "du"
                 </EuiFlexItem>
-              </ForwardRef>,
+              </EuiFlexGroup>,
               "title": "Anomalous Entity",
             },
             Object {
-              "description": <ForwardRef
+              "description": <EuiFlexGroup
                 direction="column"
                 gutterSize="none"
                 responsive={false}
@@ -267,7 +267,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
                 >
                   user.name: "root"
                 </EuiFlexItem>
-              </ForwardRef>,
+              </EuiFlexGroup>,
               "title": "Influenced By",
             },
           ]
diff --git a/x-pack/plugins/security_solution/public/common/components/ml_popover/__snapshots__/popover_description.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/ml_popover/__snapshots__/popover_description.test.tsx.snap
index 997ed632c798c..ce878d379b5c8 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml_popover/__snapshots__/popover_description.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/ml_popover/__snapshots__/popover_description.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`JobsTableFilters renders correctly against snapshot 1`] = `
     id="xpack.securitySolution.components.mlPopup.anomalyDetectionDescription"
     values={
       Object {
-        "machineLearning": <ForwardRef
+        "machineLearning": <EuiLink
           href="/test/base/path/app/ml"
           target="_blank"
         >
@@ -18,7 +18,7 @@ exports[`JobsTableFilters renders correctly against snapshot 1`] = `
             id="xpack.securitySolution.components.mlPopup.machineLearningLink"
             values={Object {}}
           />
-        </ForwardRef>,
+        </EuiLink>,
       }
     }
   />
diff --git a/x-pack/plugins/security_solution/public/common/components/ml_popover/__snapshots__/upgrade_contents.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/ml_popover/__snapshots__/upgrade_contents.test.tsx.snap
index 7e9e813288090..40b509ae683fe 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml_popover/__snapshots__/upgrade_contents.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/ml_popover/__snapshots__/upgrade_contents.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`JobsTableFilters renders correctly against snapshot 1`] = `
       id="xpack.securitySolution.components.mlPopup.upgradeDescription"
       values={
         Object {
-          "cloudLink": <ForwardRef
+          "cloudLink": <EuiLink
             href="https://www.elastic.co/cloud/"
             target="_blank"
           >
@@ -24,7 +24,7 @@ exports[`JobsTableFilters renders correctly against snapshot 1`] = `
               id="xpack.securitySolution.components.mlPopup.cloudLink"
               values={Object {}}
             />
-          </ForwardRef>,
+          </EuiLink>,
         }
       }
     />
diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/navigation/index.test.tsx
index 69e6ef8688c4d..a99497090f843 100644
--- a/x-pack/plugins/security_solution/public/common/components/navigation/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/navigation/index.test.tsx
@@ -15,12 +15,16 @@ import { HostsTableType } from '../../../hosts/store/model';
 import { RouteSpyState } from '../../utils/route/types';
 import { SiemNavigationProps, SiemNavigationComponentProps } from './types';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    useHistory: jest.fn(),
-  }),
-}));
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: () => ({
+      useHistory: jest.fn(),
+    }),
+  };
+});
 
 jest.mock('./breadcrumbs', () => ({
   setBreadcrumbs: jest.fn(),
diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.test.tsx
index 99d6f7840a7d5..977c7808b6c86 100644
--- a/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.test.tsx
@@ -19,12 +19,16 @@ import { TabNavigationProps } from './types';
 jest.mock('../../../lib/kibana');
 jest.mock('../../link_to');
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    push: jest.fn(),
-  }),
-}));
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: () => ({
+      push: jest.fn(),
+    }),
+  };
+});
 
 describe('Tab Navigation', () => {
   const pageName = SecurityPageName.hosts;
diff --git a/x-pack/plugins/security_solution/public/common/components/super_date_picker/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/super_date_picker/index.test.tsx
index 99510a1b4b42e..19321622d75fa 100644
--- a/x-pack/plugins/security_solution/public/common/components/super_date_picker/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/super_date_picker/index.test.tsx
@@ -267,44 +267,6 @@ describe('SIEM Super Date Picker', () => {
       });
     });
 
-    describe('Pick Absolute Date', () => {
-      let wrapper = mount(
-        <ReduxStoreProvider store={store}>
-          <SuperDatePicker id="global" />
-        </ReduxStoreProvider>
-      );
-      beforeEach(() => {
-        wrapper = mount(
-          <ReduxStoreProvider store={store}>
-            <SuperDatePicker id="global" />
-          </ReduxStoreProvider>
-        );
-        wrapper.find('[data-test-subj="superDatePickerShowDatesButton"]').first().simulate('click');
-        wrapper.update();
-
-        wrapper
-          .find('[data-test-subj="superDatePickerstartDatePopoverButton"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-
-        wrapper.find('[data-test-subj="superDatePickerAbsoluteTab"]').first().simulate('click');
-        wrapper.update();
-
-        wrapper.find('button.react-datepicker__navigation--previous').first().simulate('click');
-        wrapper.update();
-
-        wrapper.find('div.react-datepicker__day').at(1).simulate('click');
-        wrapper.update();
-
-        wrapper
-          .find('button[data-test-subj="superDatePickerApplyTimeButton"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-      });
-    });
-
     describe('#makeMapStateToProps', () => {
       test('it should return the same shallow references given the same input twice', () => {
         const mapStateToProps = makeMapStateToProps();
diff --git a/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx
index d545de9e7a6b7..ae25e66b2af86 100644
--- a/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx
@@ -26,12 +26,16 @@ import {
   timelineDefaults,
 } from '../../../timelines/components/manage_timeline';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    useHistory: jest.fn(),
-  }),
-}));
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: () => ({
+      useHistory: jest.fn(),
+    }),
+  };
+});
 
 jest.mock('../link_to');
 jest.mock('../../lib/kibana');
diff --git a/x-pack/plugins/security_solution/public/common/components/top_n/top_n.test.tsx b/x-pack/plugins/security_solution/public/common/components/top_n/top_n.test.tsx
index 62960d4fae71b..b1979c501c778 100644
--- a/x-pack/plugins/security_solution/public/common/components/top_n/top_n.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/top_n/top_n.test.tsx
@@ -13,12 +13,16 @@ import { setAbsoluteRangeDatePicker } from '../../store/inputs/actions';
 import { allEvents, defaultOptions } from './helpers';
 import { TopN } from './top_n';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    useHistory: jest.fn(),
-  }),
-}));
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: () => ({
+      useHistory: jest.fn(),
+    }),
+  };
+});
 
 jest.mock('../../lib/kibana');
 jest.mock('../link_to');
diff --git a/x-pack/plugins/security_solution/public/network/components/flow_controls/__snapshots__/flow_target_select.test.tsx.snap b/x-pack/plugins/security_solution/public/network/components/flow_controls/__snapshots__/flow_target_select.test.tsx.snap
index efc4d4be9e957..6e38b5eeff5f6 100644
--- a/x-pack/plugins/security_solution/public/network/components/flow_controls/__snapshots__/flow_target_select.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/network/components/flow_controls/__snapshots__/flow_target_select.test.tsx.snap
@@ -7,7 +7,21 @@ exports[`FlowTargetSelect Component rendering it renders the FlowTargetSelect 1`
   hasDividers={false}
   isInvalid={false}
   isLoading={false}
-  onChange={[MockFunction]}
+  onChange={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          "destination",
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
   options={
     Array [
       Object {
diff --git a/x-pack/plugins/security_solution/public/network/components/source_destination/index.test.tsx b/x-pack/plugins/security_solution/public/network/components/source_destination/index.test.tsx
index cefe2821b5244..570e20dc5656d 100644
--- a/x-pack/plugins/security_solution/public/network/components/source_destination/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/source_destination/index.test.tsx
@@ -95,13 +95,17 @@ const getSourceDestinationInstance = () => (
   />
 );
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    createHref: jest.fn(),
-    push: jest.fn(),
-  }),
-}));
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: () => ({
+      createHref: jest.fn(),
+      push: jest.fn(),
+    }),
+  };
+});
 
 describe('SourceDestination', () => {
   const mount = useMountAppended();
diff --git a/x-pack/plugins/security_solution/public/overview/components/overview_host_stats/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/overview/components/overview_host_stats/__snapshots__/index.test.tsx.snap
index 8742e3f3a1c0d..8d4de5b90fae9 100644
--- a/x-pack/plugins/security_solution/public/overview/components/overview_host_stats/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/overview/components/overview_host_stats/__snapshots__/index.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
   <EuiAccordion
     arrowDisplay="left"
     buttonContent={
-      <ForwardRef
+      <EuiFlexGroup
         gutterSize="none"
         justifyContent="spaceBetween"
       >
@@ -35,7 +35,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
             max={157258653}
           />
         </EuiFlexItem>
-      </ForwardRef>
+      </EuiFlexGroup>
     }
     buttonContentClassName="accordion-button"
     id="host-stat-accordion-groupauditbeat"
@@ -243,7 +243,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
   <EuiAccordion
     arrowDisplay="left"
     buttonContent={
-      <ForwardRef
+      <EuiFlexGroup
         gutterSize="none"
         justifyContent="spaceBetween"
       >
@@ -268,7 +268,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
             max={157258653}
           />
         </EuiFlexItem>
-      </ForwardRef>
+      </EuiFlexGroup>
     }
     buttonContentClassName="accordion-button"
     id="host-stat-accordion-groupendgame"
@@ -508,7 +508,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
   <EuiAccordion
     arrowDisplay="left"
     buttonContent={
-      <ForwardRef
+      <EuiFlexGroup
         gutterSize="none"
         justifyContent="spaceBetween"
       >
@@ -533,7 +533,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
             max={157258653}
           />
         </EuiFlexItem>
-      </ForwardRef>
+      </EuiFlexGroup>
     }
     buttonContentClassName="accordion-button"
     id="host-stat-accordion-groupfilebeat"
@@ -581,7 +581,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
   <EuiAccordion
     arrowDisplay="left"
     buttonContent={
-      <ForwardRef
+      <EuiFlexGroup
         gutterSize="none"
         justifyContent="spaceBetween"
       >
@@ -606,7 +606,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
             max={157258653}
           />
         </EuiFlexItem>
-      </ForwardRef>
+      </EuiFlexGroup>
     }
     buttonContentClassName="accordion-button"
     id="host-stat-accordion-groupwinlogbeat"
diff --git a/x-pack/plugins/security_solution/public/overview/components/overview_network_stats/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/overview/components/overview_network_stats/__snapshots__/index.test.tsx.snap
index 4bc02aa54a455..f6060fc060958 100644
--- a/x-pack/plugins/security_solution/public/overview/components/overview_network_stats/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/overview/components/overview_network_stats/__snapshots__/index.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
   <EuiAccordion
     arrowDisplay="left"
     buttonContent={
-      <ForwardRef
+      <EuiFlexGroup
         data-test-subj="network-stat-group-auditbeat"
         justifyContent="spaceBetween"
       >
@@ -35,7 +35,7 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
             max={13748195}
           />
         </EuiFlexItem>
-      </ForwardRef>
+      </EuiFlexGroup>
     }
     buttonContentClassName="accordion-button"
     id="network-stat-accordion-groupauditbeat"
@@ -83,7 +83,7 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
   <EuiAccordion
     arrowDisplay="left"
     buttonContent={
-      <ForwardRef
+      <EuiFlexGroup
         data-test-subj="network-stat-group-filebeat"
         justifyContent="spaceBetween"
       >
@@ -108,7 +108,7 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
             max={13748195}
           />
         </EuiFlexItem>
-      </ForwardRef>
+      </EuiFlexGroup>
     }
     buttonContentClassName="accordion-button"
     id="network-stat-accordion-groupfilebeat"
@@ -284,7 +284,7 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
   <EuiAccordion
     arrowDisplay="left"
     buttonContent={
-      <ForwardRef
+      <EuiFlexGroup
         data-test-subj="network-stat-group-packetbeat"
         justifyContent="spaceBetween"
       >
@@ -309,7 +309,7 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
             max={13748195}
           />
         </EuiFlexItem>
-      </ForwardRef>
+      </EuiFlexGroup>
     }
     buttonContentClassName="accordion-button"
     id="network-stat-accordion-grouppacketbeat"
diff --git a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/index.test.tsx
index 24dc806838d90..92ef5c41f3b4c 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/index.test.tsx
@@ -10,7 +10,7 @@ import { ActionCreator } from 'typescript-fsa';
 
 import { mockBrowserFields } from '../../../common/containers/source/mock';
 import { TestProviders } from '../../../common/mock';
-import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
+import { ColumnHeaderOptions } from '../../store/timeline/model';
 
 import { FIELD_BROWSER_HEIGHT, FIELD_BROWSER_WIDTH } from './helpers';
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/header_with_close_button/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/header_with_close_button/index.test.tsx
index ddb8fb023195a..3ddc1efe9a47f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/flyout/header_with_close_button/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/header_with_close_button/index.test.tsx
@@ -10,26 +10,34 @@ import React from 'react';
 import { TestProviders } from '../../../../common/mock';
 import { FlyoutHeaderWithCloseButton } from '.';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: jest.fn(),
-}));
-jest.mock('../../../../common/lib/kibana', () => ({
-  ...jest.requireActual('../../../../common/lib/kibana'),
-  useKibana: jest.fn().mockReturnValue({
-    services: {
-      application: {
-        capabilities: {
-          siem: {
-            crud: true,
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: jest.fn(),
+  };
+});
+jest.mock('../../../../common/lib/kibana', () => {
+  const original = jest.requireActual('../../../../common/lib/kibana');
+
+  return {
+    ...original,
+    useKibana: jest.fn().mockReturnValue({
+      services: {
+        application: {
+          capabilities: {
+            siem: {
+              crud: true,
+            },
           },
         },
       },
-    },
-  }),
-  useUiSetting$: jest.fn().mockReturnValue([]),
-  useGetUserSavedObjectPermissions: jest.fn(),
-}));
+    }),
+    useUiSetting$: jest.fn().mockReturnValue([]),
+    useGetUserSavedObjectPermissions: jest.fn(),
+  };
+});
 
 describe('FlyoutHeaderWithCloseButton', () => {
   test('renders correctly against snapshot', () => {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/add_note/__snapshots__/new_note.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/notes/add_note/__snapshots__/new_note.test.tsx.snap
index b4e6bce163057..9bf2b5c65e829 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/notes/add_note/__snapshots__/new_note.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/notes/add_note/__snapshots__/new_note.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`NewNote renders correctly 1`] = `
   data-test-subj="new-note-tabs"
   initialSelectedTab={
     Object {
-      "content": <ForwardRef(Styled(EuiTextArea))
+      "content": <TextArea
         aria-label="Note"
         autoFocus={true}
         data-test-subj="add-a-note"
@@ -23,7 +23,7 @@ exports[`NewNote renders correctly 1`] = `
   tabs={
     Array [
       Object {
-        "content": <ForwardRef(Styled(EuiTextArea))
+        "content": <TextArea
           aria-label="Note"
           autoFocus={true}
           data-test-subj="add-a-note"
@@ -38,7 +38,7 @@ exports[`NewNote renders correctly 1`] = `
         "name": "Note",
       },
       Object {
-        "content": <ForwardRef(Styled(EuiPanel))
+        "content": <MarkdownContainer
           data-test-subj="markdown-container"
           height={200}
           paddingSize="s"
@@ -46,7 +46,7 @@ exports[`NewNote renders correctly 1`] = `
           <Memo(Markdown)
             raw="The contents of a new note"
           />
-        </ForwardRef(Styled(EuiPanel))>,
+        </MarkdownContainer>,
         "id": "preview",
         "name": "Preview (Markdown)",
       },
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/header/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/header/index.test.tsx
index 3cec1fd34da99..b211847d06a26 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/header/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/header/index.test.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 
 import { Direction } from '../../../../../../graphql/types';
 import { TestProviders } from '../../../../../../common/mock';
-import { ColumnHeaderType } from '../../../../../../timelines/store/timeline/model';
+import { ColumnHeaderType } from '../../../../../store/timeline/model';
 import { Sort } from '../../sort';
 import { CloseButton } from '../actions';
 import { defaultHeaders } from '../default_headers';
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
index 9ced194aceb35..775c26e82d27b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
@@ -205,7 +205,7 @@ describe('Body', () => {
             .exists()
         ).toEqual(true);
       });
-    });
+    }, 20000);
   });
 
   describe('action on event', () => {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/system/generic_file_details.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/system/generic_file_details.test.tsx
index 5f4f5a5da352e..6c7a74d840d01 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/system/generic_file_details.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/system/generic_file_details.test.tsx
@@ -13,13 +13,17 @@ import { mockTimelineData, TestProviders } from '../../../../../../common/mock';
 import { SystemGenericFileDetails, SystemGenericFileLine } from './generic_file_details';
 import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    createHref: jest.fn(),
-    push: jest.fn(),
-  }),
-}));
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: () => ({
+      createHref: jest.fn(),
+      push: jest.fn(),
+    }),
+  };
+});
 
 describe('SystemGenericFileDetails', () => {
   const mount = useMountAppended();
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.test.tsx
index b11f6dfdf9d87..5ccc8911d1974 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.test.tsx
@@ -40,10 +40,14 @@ mockUseResizeObserver.mockImplementation(() => ({}));
 
 const mockUseSignalIndex: jest.Mock = useSignalIndex as jest.Mock<ReturnSignalIndex>;
 jest.mock('../../../alerts/containers/detection_engine/alerts/use_signal_index');
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: jest.fn(),
-}));
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: jest.fn(),
+  };
+});
 jest.mock('../flyout/header_with_close_button');
 describe('StatefulTimeline', () => {
   let props = {} as StatefulTimelineProps;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.test.tsx
index 37e8507d0a1ab..3078700a29d76 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.test.tsx
@@ -26,9 +26,10 @@ import { act } from 'react-dom/test-utils';
 jest.mock('../../../../common/components/link_to');
 
 jest.mock('../../../../common/lib/kibana', () => {
-  const originalModule = jest.requireActual('../../../../common/lib/kibana');
+  const original = jest.requireActual('../../../../common/lib/kibana');
+
   return {
-    ...originalModule,
+    ...original,
     useKibana: jest.fn().mockReturnValue({
       services: {
         application: {
@@ -54,27 +55,26 @@ jest.mock('../../../../common/components/utils', () => {
 });
 
 jest.mock('react-redux', () => {
-  const originalModule = jest.requireActual('react-redux');
+  const original = jest.requireActual('react-redux');
 
   return {
-    ...originalModule,
-    useSelector: jest.fn().mockReturnValue({ savedObjectId: '1' }),
+    ...original,
+    useDispatch: () => mockDispatch,
+    useSelector: jest.fn().mockReturnValue({ savedObjectId: '1', urlState: {} }),
   };
 });
-
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useDispatch: () => mockDispatch,
-  useSelector: jest.fn().mockReturnValue({ savedObjectId: '1', urlState: {} }),
-}));
 const mockHistoryPush = jest.fn();
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    push: mockHistoryPush,
-  }),
-}));
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+
+  return {
+    ...original,
+    useHistory: () => ({
+      push: mockHistoryPush,
+    }),
+  };
+});
 
 jest.mock('./use_create_timeline', () => ({
   useCreateTimelineButton: jest.fn().mockReturnValue({ getButton: jest.fn() }),
@@ -334,7 +334,7 @@ describe('Properties', () => {
     expect(wrapper.find('[data-test-subj="avatar"]').exists()).toEqual(false);
   });
 
-  test('insert timeline - new case', () => {
+  test('insert timeline - new case', async () => {
     const wrapper = mount(
       <TestProviders store={store}>
         <Properties {...{ ...defaultProps, title: 'coolness' }} />
diff --git a/x-pack/plugins/snapshot_restore/__jest__/client_integration/home.test.ts b/x-pack/plugins/snapshot_restore/__jest__/client_integration/home.test.ts
index e6e59b4495487..0abc47686a6b4 100644
--- a/x-pack/plugins/snapshot_restore/__jest__/client_integration/home.test.ts
+++ b/x-pack/plugins/snapshot_restore/__jest__/client_integration/home.test.ts
@@ -29,8 +29,10 @@ jest.mock('ui/i18n', () => {
 
 // Mocking FormattedDate and FormattedTime due to timezone differences on CI
 jest.mock('@kbn/i18n/react', () => {
+  const original = jest.requireActual('@kbn/i18n/react');
+
   return {
-    ...jest.requireActual('@kbn/i18n/react'),
+    ...original,
     FormattedDate: () => '',
     FormattedTime: () => '',
   };
diff --git a/x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/space_identifier.test.tsx.snap b/x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/space_identifier.test.tsx.snap
index 2aec970def9df..2fddf1d155a56 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/space_identifier.test.tsx.snap
+++ b/x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/space_identifier.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`renders without crashing 1`] = `
           id="xpack.spaces.management.spaceIdentifier.urlIdentifierLabel"
           values={Object {}}
         />
-        <ForwardRef
+        <EuiLink
           aria-label="Customize the URL identifier"
           onClick={[Function]}
         >
@@ -43,7 +43,7 @@ exports[`renders without crashing 1`] = `
             id="xpack.spaces.management.spaceIdentifier.customizeSpaceLinkText"
             values={Object {}}
           />
-        </ForwardRef>
+        </EuiLink>
       </p>
     }
     labelType="label"
diff --git a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/__snapshots__/enabled_features.test.tsx.snap b/x-pack/plugins/spaces/public/management/edit_space/enabled_features/__snapshots__/enabled_features.test.tsx.snap
index 25d735bd71dd6..43ae75b74c882 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/__snapshots__/enabled_features.test.tsx.snap
+++ b/x-pack/plugins/spaces/public/management/edit_space/enabled_features/__snapshots__/enabled_features.test.tsx.snap
@@ -67,7 +67,7 @@ exports[`EnabledFeatures renders as expected 1`] = `
             id="xpack.spaces.management.enabledSpaceFeatures.goToRolesLink"
             values={
               Object {
-                "rolesLink": <ForwardRef
+                "rolesLink": <EuiLink
                   href="management"
                 >
                   <FormattedMessage
@@ -75,7 +75,7 @@ exports[`EnabledFeatures renders as expected 1`] = `
                     id="xpack.spaces.management.enabledSpaceFeatures.rolesLinkText"
                     values={Object {}}
                   />
-                </ForwardRef>,
+                </EuiLink>,
               }
             }
           />
diff --git a/x-pack/plugins/spaces/public/nav_control/__snapshots__/nav_control_popover.test.tsx.snap b/x-pack/plugins/spaces/public/nav_control/__snapshots__/nav_control_popover.test.tsx.snap
index 10c3eed388ff7..22d65f4600e05 100644
--- a/x-pack/plugins/spaces/public/nav_control/__snapshots__/nav_control_popover.test.tsx.snap
+++ b/x-pack/plugins/spaces/public/nav_control/__snapshots__/nav_control_popover.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`NavControlPopover renders without crashing 1`] = `
 <EuiPopover
   anchorPosition="downRight"
   button={
-    <ForwardRef
+    <EuiHeaderSectionItemButton
       aria-controls="headerSpacesMenuContent"
       aria-expanded={false}
       aria-haspopup="true"
@@ -15,7 +15,7 @@ exports[`NavControlPopover renders without crashing 1`] = `
       <EuiLoadingSpinner
         size="m"
       />
-    </ForwardRef>
+    </EuiHeaderSectionItemButton>
   }
   closePopover={[Function]}
   data-test-subj="spacesNavSelector"
diff --git a/x-pack/plugins/transform/public/app/hooks/use_index_data.test.tsx b/x-pack/plugins/transform/public/app/hooks/use_index_data.test.tsx
index ba34db7b62967..db9ac1e93633f 100644
--- a/x-pack/plugins/transform/public/app/hooks/use_index_data.test.tsx
+++ b/x-pack/plugins/transform/public/app/hooks/use_index_data.test.tsx
@@ -8,7 +8,6 @@ import React from 'react';
 
 import { render, wait } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
-import '@testing-library/jest-dom/extend-expect';
 
 import { CoreSetup } from 'src/core/public';
 
diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.test.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.test.tsx
index f2837d30402de..ffd6c30db45f4 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.test.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.test.tsx
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 
 import { StepCreateForm } from './step_create_form';
 
diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.test.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.test.tsx
index 60df5b14bb492..8c919a5185d7e 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.test.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.test.tsx
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import { render, wait } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 
 import { I18nProvider } from '@kbn/i18n/react';
 
diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.test.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.test.tsx
index 19b2633b04ec3..dc3d950938c9e 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.test.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.test.tsx
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import { render, wait } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 
 import {
   PivotAggsConfig,
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/health_check.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/health_check.test.tsx
index 3fbcd13e98f5d..1d908920db8b0 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/health_check.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/health_check.test.tsx
@@ -10,7 +10,6 @@ import { HealthCheck } from './health_check';
 
 import { act } from 'react-dom/test-utils';
 import { httpServiceMock } from '../../../../../../src/core/public/mocks';
-import '@testing-library/jest-dom/extend-expect';
 
 const docLinks = { ELASTIC_WEBSITE_URL: 'elastic.co/', DOC_LINK_VERSION: 'current' };
 
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.test.tsx
index 9c017aa6fd31f..2917be943d276 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.test.tsx
@@ -13,10 +13,10 @@ import {
 describe('checkActionTypeEnabled', () => {
   test(`returns isEnabled:true when action type isn't provided`, async () => {
     expect(checkActionTypeEnabled()).toMatchInlineSnapshot(`
-    Object {
-      "isEnabled": true,
-    }
-  `);
+          Object {
+            "isEnabled": true,
+          }
+      `);
   });
 
   test('returns isEnabled:true when action type is enabled', async () => {
@@ -29,10 +29,10 @@ describe('checkActionTypeEnabled', () => {
       enabledInLicense: true,
     };
     expect(checkActionTypeEnabled(actionType)).toMatchInlineSnapshot(`
-    Object {
-      "isEnabled": true,
-    }
-  `);
+          Object {
+            "isEnabled": true,
+          }
+      `);
   });
 
   test('returns isEnabled:false when action type is disabled by license', async () => {
@@ -45,28 +45,28 @@ describe('checkActionTypeEnabled', () => {
       enabledInLicense: false,
     };
     expect(checkActionTypeEnabled(actionType)).toMatchInlineSnapshot(`
-    Object {
-      "isEnabled": false,
-      "message": "This connector requires a Basic license.",
-      "messageCard": <EuiCard
-        className="actCheckActionTypeEnabled__disabledActionWarningCard"
-        description="To re-enable this action, please upgrade your license."
-        title="This feature requires a Basic license."
-        titleSize="xs"
-      >
-        <ForwardRef
-          href="https://www.elastic.co/subscriptions"
-          target="_blank"
+      Object {
+        "isEnabled": false,
+        "message": "This connector requires a Basic license.",
+        "messageCard": <EuiCard
+          className="actCheckActionTypeEnabled__disabledActionWarningCard"
+          description="To re-enable this action, please upgrade your license."
+          title="This feature requires a Basic license."
+          titleSize="xs"
         >
-          <FormattedMessage
-            defaultMessage="View license options"
-            id="xpack.triggersActionsUI.sections.alertForm.actionTypeDisabledByLicenseLinkTitle"
-            values={Object {}}
-          />
-        </ForwardRef>
-      </EuiCard>,
-    }
-  `);
+          <EuiLink
+            href="https://www.elastic.co/subscriptions"
+            target="_blank"
+          >
+            <FormattedMessage
+              defaultMessage="View license options"
+              id="xpack.triggersActionsUI.sections.alertForm.actionTypeDisabledByLicenseLinkTitle"
+              values={Object {}}
+            />
+          </EuiLink>
+        </EuiCard>,
+      }
+    `);
   });
 
   test('returns isEnabled:false when action type is disabled by config', async () => {
@@ -79,16 +79,16 @@ describe('checkActionTypeEnabled', () => {
       enabledInLicense: true,
     };
     expect(checkActionTypeEnabled(actionType)).toMatchInlineSnapshot(`
-    Object {
-      "isEnabled": false,
-      "message": "This connector is disabled by the Kibana configuration.",
-      "messageCard": <EuiCard
-        className="actCheckActionTypeEnabled__disabledActionWarningCard"
-        description=""
-        title="This feature is disabled by the Kibana configuration."
-      />,
-    }
-  `);
+          Object {
+            "isEnabled": false,
+            "message": "This connector is disabled by the Kibana configuration.",
+            "messageCard": <EuiCard
+              className="actCheckActionTypeEnabled__disabledActionWarningCard"
+              description=""
+              title="This feature is disabled by the Kibana configuration."
+            />,
+          }
+      `);
   });
 });
 
@@ -126,10 +126,10 @@ describe('checkActionFormActionTypeEnabled', () => {
 
     expect(checkActionFormActionTypeEnabled(actionType, preconfiguredConnectors))
       .toMatchInlineSnapshot(`
-    Object {
-      "isEnabled": true,
-    }
-  `);
+          Object {
+            "isEnabled": true,
+          }
+      `);
   });
 
   test('returns isEnabled:false when action type is disabled by config and not preconfigured', async () => {
@@ -143,15 +143,15 @@ describe('checkActionFormActionTypeEnabled', () => {
     };
     expect(checkActionFormActionTypeEnabled(actionType, preconfiguredConnectors))
       .toMatchInlineSnapshot(`
-    Object {
-      "isEnabled": false,
-      "message": "This connector is disabled by the Kibana configuration.",
-      "messageCard": <EuiCard
-        className="actCheckActionTypeEnabled__disabledActionWarningCard"
-        description=""
-        title="This feature is disabled by the Kibana configuration."
-      />,
-    }
-  `);
+          Object {
+            "isEnabled": false,
+            "message": "This connector is disabled by the Kibana configuration.",
+            "messageCard": <EuiCard
+              className="actCheckActionTypeEnabled__disabledActionWarningCard"
+              description=""
+              title="This feature is disabled by the Kibana configuration."
+            />,
+          }
+      `);
   });
 });
diff --git a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.test.tsx
index f43d832b1edae..745b3c403afc6 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.test.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.test.tsx
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import { cleanup, fireEvent, render } from '@testing-library/react/pure';
-import '@testing-library/jest-dom/extend-expect'; // TODO: this should be global
 import { TEST_SUBJ_ACTION_FACTORY_ITEM, TEST_SUBJ_SELECTED_ACTION_FACTORY } from './action_wizard';
 import { dashboardFactory, dashboards, Demo, urlFactory } from './test_data';
 
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx
index 161caa9782f02..e98701a05ce89 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import { cleanup, fireEvent, render, wait } from '@testing-library/react/pure';
-import '@testing-library/jest-dom/extend-expect';
 import { createFlyoutManageDrilldowns } from './connected_flyout_manage_drilldowns';
 import { dashboardFactory, urlFactory } from '../../../components/action_wizard/test_data';
 import { StubBrowserStorage } from '../../../../../../../src/test_utils/public/stub_browser_storage';
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.test.tsx
index 4a4d67b08b1d3..715bba74cf8ec 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.test.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.test.tsx
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import { cleanup, fireEvent, render } from '@testing-library/react/pure';
-import '@testing-library/jest-dom/extend-expect'; // TODO: this should be global
 import {
   DrilldownListItem,
   ListManageDrilldowns,
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/tabs/checkup/__snapshots__/checkup_tab.test.tsx.snap b/x-pack/plugins/upgrade_assistant/public/application/components/tabs/checkup/__snapshots__/checkup_tab.test.tsx.snap
index ca4dff58da80c..dda051e715234 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/tabs/checkup/__snapshots__/checkup_tab.test.tsx.snap
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/tabs/checkup/__snapshots__/checkup_tab.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`CheckupTab render with deprecations 1`] = `
         id="xpack.upgradeAssistant.checkupTab.backUpCallout.calloutBody.calloutDetail"
         values={
           Object {
-            "snapshotRestoreDocsButton": <ForwardRef
+            "snapshotRestoreDocsButton": <EuiLink
               href="https://www.elastic.co/guide/en/elasticsearch/reference/current/modules-snapshots.html"
               target="_blank"
             >
@@ -48,7 +48,7 @@ exports[`CheckupTab render with deprecations 1`] = `
                 id="xpack.upgradeAssistant.checkupTab.backUpCallout.calloutBody.snapshotRestoreDocsButtonLabel"
                 values={Object {}}
               />
-            </ForwardRef>,
+            </EuiLink>,
           }
         }
       />
@@ -320,7 +320,7 @@ exports[`CheckupTab render with error 1`] = `
         id="xpack.upgradeAssistant.checkupTab.backUpCallout.calloutBody.calloutDetail"
         values={
           Object {
-            "snapshotRestoreDocsButton": <ForwardRef
+            "snapshotRestoreDocsButton": <EuiLink
               href="https://www.elastic.co/guide/en/elasticsearch/reference/current/modules-snapshots.html"
               target="_blank"
             >
@@ -329,7 +329,7 @@ exports[`CheckupTab render with error 1`] = `
                 id="xpack.upgradeAssistant.checkupTab.backUpCallout.calloutBody.snapshotRestoreDocsButtonLabel"
                 values={Object {}}
               />
-            </ForwardRef>,
+            </EuiLink>,
           }
         }
       />
@@ -385,7 +385,7 @@ exports[`CheckupTab render without deprecations 1`] = `
         id="xpack.upgradeAssistant.checkupTab.backUpCallout.calloutBody.calloutDetail"
         values={
           Object {
-            "snapshotRestoreDocsButton": <ForwardRef
+            "snapshotRestoreDocsButton": <EuiLink
               href="https://www.elastic.co/guide/en/elasticsearch/reference/current/modules-snapshots.html"
               target="_blank"
             >
@@ -394,7 +394,7 @@ exports[`CheckupTab render without deprecations 1`] = `
                 id="xpack.upgradeAssistant.checkupTab.backUpCallout.calloutBody.snapshotRestoreDocsButtonLabel"
                 values={Object {}}
               />
-            </ForwardRef>,
+            </EuiLink>,
           }
         }
       />
@@ -427,7 +427,7 @@ exports[`CheckupTab render without deprecations 1`] = `
                 id="xpack.upgradeAssistant.checkupTab.noIssues.nextStepsDetail"
                 values={
                   Object {
-                    "overviewTabButton": <ForwardRef
+                    "overviewTabButton": <EuiLink
                       onClick={[Function]}
                     >
                       <FormattedMessage
@@ -435,7 +435,7 @@ exports[`CheckupTab render without deprecations 1`] = `
                         id="xpack.upgradeAssistant.checkupTab.noIssues.nextStepsDetail.overviewTabButtonLabel"
                         values={Object {}}
                       />
-                    </ForwardRef>,
+                    </EuiLink>,
                   }
                 }
               />
diff --git a/x-pack/plugins/upgrade_assistant/server/lib/reindexing/reindex_actions.test.ts b/x-pack/plugins/upgrade_assistant/server/lib/reindexing/reindex_actions.test.ts
index 2a9449485f42d..713d0cb85e2e8 100644
--- a/x-pack/plugins/upgrade_assistant/server/lib/reindexing/reindex_actions.test.ts
+++ b/x-pack/plugins/upgrade_assistant/server/lib/reindexing/reindex_actions.test.ts
@@ -326,7 +326,6 @@ describe('ReindexActions', () => {
         });
 
         it('fails after 10 attempts to lock', async () => {
-          jest.setTimeout(20000); // increase the timeout
           client.get.mockResolvedValue({
             type: REINDEX_OP_TYPE,
             id: consumerType,
@@ -339,10 +338,7 @@ describe('ReindexActions', () => {
             actions.runWhileIndexGroupLocked(consumerType, async (m) => m)
           ).rejects.toThrow('Could not acquire lock for ML jobs');
           expect(client.update).toHaveBeenCalledTimes(10);
-
-          // Restore default timeout.
-          jest.setTimeout(5000);
-        });
+        }, 20000);
       });
     });
   });
diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap
index 3a056e6621f58..7a61eb7391a10 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap
@@ -31,11 +31,11 @@ exports[`ML Flyout component renders without errors 1`] = `
           id="xpack.uptime.ml.enableAnomalyDetectionPanel.manageMLJobDescription"
           values={
             Object {
-              "mlJobsPageLink": <ForwardRef
+              "mlJobsPageLink": <EuiLink
                 href="/app/ml"
               >
                 Machine Learning jobs management page
-              </ForwardRef>,
+              </EuiLink>,
             }
           }
         />
diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/__snapshots__/doc_link_body.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/__snapshots__/doc_link_body.test.tsx.snap
index cfdbb5184d170..22dab492a94ae 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/__snapshots__/doc_link_body.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/__snapshots__/doc_link_body.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`PingListExpandedRow renders expected elements for valid props 1`] = `
     id="xpack.uptime.pingList.expandedRow.response_body.notRecorded"
     values={
       Object {
-        "docsLink": <ForwardRef
+        "docsLink": <EuiLink
           href="https://www.elastic.co/guide/en/beats/heartbeat/current/configuration-heartbeat-options.html#monitor-http-response"
           target="_blank"
         >
@@ -17,7 +17,7 @@ exports[`PingListExpandedRow renders expected elements for valid props 1`] = `
             size="s"
             type="popout"
           />
-        </ForwardRef>,
+        </EuiLink>,
       }
     }
   />
diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/__snapshots__/ping_list.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/__snapshots__/ping_list.test.tsx.snap
index 154ab6399452d..20fc6d69c860c 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/__snapshots__/ping_list.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/__snapshots__/ping_list.test.tsx.snap
@@ -126,9 +126,9 @@ exports[`PingList component renders sorted list without errors 1`] = `
         Object {
           "align": "right",
           "field": "http.response.status_code",
-          "name": <ForwardRef(styled.span)>
+          "name": <styled.span>
             Response code
-          </ForwardRef(styled.span)>,
+          </styled.span>,
           "render": [Function],
         },
         Object {
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/__tests__/location_availability.test.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/__tests__/location_availability.test.tsx
index d00cb1f24def8..39c487bc3e151 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/__tests__/location_availability.test.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/__tests__/location_availability.test.tsx
@@ -23,8 +23,9 @@ describe('LocationAvailability component', () => {
       setItem: jest.fn(),
     };
 
-    // @ts-ignore replacing a call to localStorage we use for monitor list size
-    global.localStorage = localStorageMock;
+    Object.defineProperty(window, 'localStorage', {
+      value: localStorageMock,
+    });
 
     monitorLocations = {
       monitorId: 'wapo',
diff --git a/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/data_or_index_missing.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/data_or_index_missing.test.tsx.snap
index d7651fe6db434..0429d36bf8741 100644
--- a/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/data_or_index_missing.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/data_or_index_missing.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`DataOrIndexMissing component renders headingMessage 1`] = `
     <EuiPanel>
       <EuiEmptyPrompt
         actions={
-          <ForwardRef>
+          <EuiFlexGroup>
             <EuiFlexItem>
               <EuiButton
                 color="primary"
@@ -45,7 +45,7 @@ exports[`DataOrIndexMissing component renders headingMessage 1`] = `
                 />
               </EuiButton>
             </EuiFlexItem>
-          </ForwardRef>
+          </EuiFlexGroup>
         }
         body={
           <React.Fragment>
diff --git a/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap
index ccf6ade66408a..cdefa7db5688b 100644
--- a/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap
@@ -196,7 +196,7 @@ exports[`EmptyState component does not render empty state with appropriate base
                 >
                   <EuiEmptyPrompt
                     actions={
-                      <ForwardRef>
+                      <EuiFlexGroup>
                         <EuiFlexItem>
                           <EuiButton
                             color="primary"
@@ -222,7 +222,7 @@ exports[`EmptyState component does not render empty state with appropriate base
                             />
                           </EuiButton>
                         </EuiFlexItem>
-                      </ForwardRef>
+                      </EuiFlexGroup>
                     }
                     body={
                       <React.Fragment>
@@ -633,7 +633,7 @@ exports[`EmptyState component doesn't render child components when count is fals
                 >
                   <EuiEmptyPrompt
                     actions={
-                      <ForwardRef>
+                      <EuiFlexGroup>
                         <EuiFlexItem>
                           <EuiButton
                             color="primary"
@@ -659,7 +659,7 @@ exports[`EmptyState component doesn't render child components when count is fals
                             />
                           </EuiButton>
                         </EuiFlexItem>
-                      </ForwardRef>
+                      </EuiFlexGroup>
                     }
                     body={
                       <React.Fragment>
@@ -1075,7 +1075,7 @@ exports[`EmptyState component notifies when index does not exist 1`] = `
                 >
                   <EuiEmptyPrompt
                     actions={
-                      <ForwardRef>
+                      <EuiFlexGroup>
                         <EuiFlexItem>
                           <EuiButton
                             color="primary"
@@ -1101,7 +1101,7 @@ exports[`EmptyState component notifies when index does not exist 1`] = `
                             />
                           </EuiButton>
                         </EuiFlexItem>
-                      </ForwardRef>
+                      </EuiFlexGroup>
                     }
                     body={
                       <React.Fragment>
diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/filter_popover.test.tsx b/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/filter_popover.test.tsx
index 4726a2f4a4abe..a64c7ce698cfe 100644
--- a/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/filter_popover.test.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/filter_popover.test.tsx
@@ -13,7 +13,7 @@ import { EuiFilterSelectItem } from '@elastic/eui';
 describe('FilterPopover component', () => {
   let props: FilterPopoverProps;
   let setState: jest.Mock<any, any>;
-  let useStateSpy: jest.SpyInstance<[unknown, React.Dispatch<unknown>], unknown[]>;
+  let useStateSpy: jest.SpyInstance;
 
   beforeEach(() => {
     props = {
diff --git a/x-pack/plugins/watcher/__jest__/client_integration/watch_create_threshold.test.tsx b/x-pack/plugins/watcher/__jest__/client_integration/watch_create_threshold.test.tsx
index 89cd5207fe250..3513606dbfe30 100644
--- a/x-pack/plugins/watcher/__jest__/client_integration/watch_create_threshold.test.tsx
+++ b/x-pack/plugins/watcher/__jest__/client_integration/watch_create_threshold.test.tsx
@@ -49,32 +49,40 @@ const WATCH_VISUALIZE_DATA = {
 
 const mockHttpClient = axios.create({ adapter: axiosXhrAdapter });
 
-jest.mock('../../public/application/lib/api', () => ({
-  ...jest.requireActual('../../public/application/lib/api'),
-  loadIndexPatterns: async () => {
-    const INDEX_PATTERNS = [
-      { attributes: { title: 'index1' } },
-      { attributes: { title: 'index2' } },
-      { attributes: { title: 'index3' } },
-    ];
-    return await INDEX_PATTERNS;
-  },
-  getHttpClient: () => mockHttpClient,
-}));
-
-jest.mock('@elastic/eui', () => ({
-  ...jest.requireActual('@elastic/eui'),
-  // Mocking EuiComboBox, as it utilizes "react-virtualized" for rendering search suggestions,
-  // which does not produce a valid component wrapper
-  EuiComboBox: (props: any) => (
-    <input
-      data-test-subj="mockComboBox"
-      onChange={(syntheticEvent: any) => {
-        props.onChange([syntheticEvent['0']]);
-      }}
-    />
-  ),
-}));
+jest.mock('../../public/application/lib/api', () => {
+  const original = jest.requireActual('../../public/application/lib/api');
+
+  return {
+    ...original,
+    loadIndexPatterns: async () => {
+      const INDEX_PATTERNS = [
+        { attributes: { title: 'index1' } },
+        { attributes: { title: 'index2' } },
+        { attributes: { title: 'index3' } },
+      ];
+      return await INDEX_PATTERNS;
+    },
+    getHttpClient: () => mockHttpClient,
+  };
+});
+
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+
+  return {
+    ...original,
+    // Mocking EuiComboBox, as it utilizes "react-virtualized" for rendering search suggestions,
+    // which does not produce a valid component wrapper
+    EuiComboBox: (props: any) => (
+      <input
+        data-test-subj="mockComboBox"
+        onChange={(syntheticEvent: any) => {
+          props.onChange([syntheticEvent['0']]);
+        }}
+      />
+    ),
+  };
+});
 
 const { setup } = pageHelpers.watchCreateThreshold;
 
diff --git a/x-pack/plugins/watcher/__jest__/client_integration/watch_edit.test.ts b/x-pack/plugins/watcher/__jest__/client_integration/watch_edit.test.ts
index 18acf7339580c..c35bbcb171a30 100644
--- a/x-pack/plugins/watcher/__jest__/client_integration/watch_edit.test.ts
+++ b/x-pack/plugins/watcher/__jest__/client_integration/watch_edit.test.ts
@@ -16,18 +16,22 @@ import { getRandomString } from '../../../../test_utils';
 
 const mockHttpClient = axios.create({ adapter: axiosXhrAdapter });
 
-jest.mock('../../public/application/lib/api', () => ({
-  ...jest.requireActual('../../public/application/lib/api'),
-  loadIndexPatterns: async () => {
-    const INDEX_PATTERNS = [
-      { attributes: { title: 'index1' } },
-      { attributes: { title: 'index2' } },
-      { attributes: { title: 'index3' } },
-    ];
-    return await INDEX_PATTERNS;
-  },
-  getHttpClient: () => mockHttpClient,
-}));
+jest.mock('../../public/application/lib/api', () => {
+  const original = jest.requireActual('../../public/application/lib/api');
+
+  return {
+    ...original,
+    loadIndexPatterns: async () => {
+      const INDEX_PATTERNS = [
+        { attributes: { title: 'index1' } },
+        { attributes: { title: 'index2' } },
+        { attributes: { title: 'index3' } },
+      ];
+      return await INDEX_PATTERNS;
+    },
+    getHttpClient: () => mockHttpClient,
+  };
+});
 
 const { setup } = pageHelpers.watchEdit;
 
diff --git a/x-pack/test_utils/jest/config.js b/x-pack/test_utils/jest/config.js
index f36099bd1f347..adee510ef2846 100644
--- a/x-pack/test_utils/jest/config.js
+++ b/x-pack/test_utils/jest/config.js
@@ -31,12 +31,14 @@ export default {
   coverageReporters: ['html'],
   moduleFileExtensions: ['js', 'json', 'ts', 'tsx', 'node'],
   modulePathIgnorePatterns: ['__fixtures__/', 'target/'],
+  testEnvironment: 'jest-environment-jsdom-thirteen',
   testMatch: ['**/*.test.{js,ts,tsx}'],
   testPathIgnorePatterns: [
     '<rootDir>/packages/kbn-ui-framework/(dist|doc_site|generator-kui)/',
     '<rootDir>/packages/kbn-pm/dist/',
     `${RESERVED_DIR_JEST_INTEGRATION_TESTS}/`,
   ],
+  testRunner: 'jest-circus/runner',
   transform: {
     '^.+\\.(js|tsx?)$': '<rootDir>/../src/dev/jest/babel_transform.js',
     '^.+\\.txt?$': 'jest-raw-loader',
diff --git a/x-pack/test_utils/testbed/types.ts b/x-pack/test_utils/testbed/types.ts
index 4f7b3d5bda2bb..4975e073eea1f 100644
--- a/x-pack/test_utils/testbed/types.ts
+++ b/x-pack/test_utils/testbed/types.ts
@@ -83,20 +83,24 @@ export interface TestBed<T = string> {
     /**
      * Set the value of a <EuiSelect /> or a mocked <EuiSuperSelect />
      * For the <EuiSuperSelect /> you need to mock it like this
-     * 
+     *
      ```typescript
-     jest.mock('@elastic/eui', () => ({
-        ...jest.requireActual('@elastic/eui'),
+    jest.mock('@elastic/eui', () => {
+      const original = jest.requireActual('@elastic/eui');
+
+      return {
+        ...original,
         EuiSuperSelect: (props: any) => (
           <input
             data-test-subj={props['data-test-subj'] || 'mockSuperSelect'}
             value={props.valueOfSelected}
-            onChange={e => {
+            onChange={(e) => {
               props.onChange(e.target.value);
             }}
           />
         ),
-      }));
+      };
+    });
      ```
      * @param select The form select. Can either be a data-test-subj or a reactWrapper (can be a nested path. e.g. "myForm.myInput").
      * @param value The value to set
diff --git a/x-pack/tsconfig.json b/x-pack/tsconfig.json
index e0bf3b8f16946..306294c57b3c6 100644
--- a/x-pack/tsconfig.json
+++ b/x-pack/tsconfig.json
@@ -39,7 +39,9 @@
     "types": [
       "node",
       "jest",
-      "flot"
+      "flot",
+      "jest-styled-components",
+      "@testing-library/jest-dom"
     ]
   }
 }
diff --git a/x-pack/typings/jest.d.ts b/x-pack/typings/jest.d.ts
index 5d2aa51284e5e..488df5ad92373 100644
--- a/x-pack/typings/jest.d.ts
+++ b/x-pack/typings/jest.d.ts
@@ -12,23 +12,3 @@ type DeeplyMockedKeys<T> = {
     : DeeplyMockedKeys<T[P]>;
 } &
   T;
-
-// https://github.com/styled-components/jest-styled-components/issues/264
-declare namespace jest {
-  interface AsymmetricMatcher {
-    $$typeof: Symbol; //eslint-disable-line
-    sample?: string | RegExp | object | Array<any> | Function; // eslint-disable-line
-  }
-
-  type Value = string | number | RegExp | AsymmetricMatcher | undefined;
-
-  interface Options {
-    media?: string;
-    modifier?: string;
-    supports?: string;
-  }
-
-  interface Matchers<R> {
-    toHaveStyleRule(property: string, value?: Value, options?: Options): R;
-  }
-}
diff --git a/yarn.lock b/yarn.lock
index 9a9bf98e06c31..b600ccb75c9fa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -817,13 +817,20 @@
     "@babel/helper-create-regexp-features-plugin" "^7.8.8"
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-async-generators@^7.2.0", "@babel/plugin-syntax-async-generators@^7.8.0":
+"@babel/plugin-syntax-async-generators@^7.2.0", "@babel/plugin-syntax-async-generators@^7.8.0", "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
   integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-syntax-bigint@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
+  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
 "@babel/plugin-syntax-class-properties@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.10.1.tgz#d5bc0645913df5b17ad7eda0fa2308330bde34c5"
@@ -831,6 +838,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.1"
 
+"@babel/plugin-syntax-class-properties@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.8.3.tgz#6cb933a8872c8d359bfde69bbeaae5162fd1e8f7"
+  integrity sha512-UcAyQWg2bAN647Q+O811tG9MrJ38Z10jjhQdKNAL8fsyPzE3cCN/uT+f55cFVY4aGO4jqJAvmqsuY3GQDwAoXg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-syntax-decorators@^7.2.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.8.3.tgz#8d2c15a9f1af624b0025f961682a9d53d3001bda"
@@ -866,7 +880,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-json-strings@^7.2.0", "@babel/plugin-syntax-json-strings@^7.8.0":
+"@babel/plugin-syntax-json-strings@^7.2.0", "@babel/plugin-syntax-json-strings@^7.8.0", "@babel/plugin-syntax-json-strings@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
   integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
@@ -887,7 +901,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0":
+"@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.8.3.tgz#3995d7d7ffff432f6ddc742b47e730c054599897"
+  integrity sha512-Zpg2Sgc++37kuFl6ppq2Q7Awc6E6AIW671x5PY8E/f7MCIyPPGK/EoeZXvvY3P42exZ3Q4/t3YOzP/HiN79jDg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
   integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
@@ -908,21 +929,21 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0", "@babel/plugin-syntax-object-rest-spread@^7.8.0":
+"@babel/plugin-syntax-object-rest-spread@^7.2.0", "@babel/plugin-syntax-object-rest-spread@^7.8.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
   integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-optional-catch-binding@^7.2.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.0":
+"@babel/plugin-syntax-optional-catch-binding@^7.2.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
   integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-optional-chaining@^7.8.0":
+"@babel/plugin-syntax-optional-chaining@^7.8.0", "@babel/plugin-syntax-optional-chaining@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
   integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
@@ -1908,7 +1929,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.9.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
   integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==
@@ -1922,7 +1943,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/template@^7.0.0", "@babel/template@^7.4.4", "@babel/template@^7.7.4", "@babel/template@^7.8.3", "@babel/template@^7.8.6":
+"@babel/template@^7.0.0", "@babel/template@^7.3.3", "@babel/template@^7.4.4", "@babel/template@^7.7.4", "@babel/template@^7.8.3", "@babel/template@^7.8.6":
   version "7.8.6"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
   integrity sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==
@@ -2003,6 +2024,15 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.3.3":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.6.tgz#2c5502b427251e9de1bd2dff95add646d95cc9f7"
+  integrity sha512-qxXzvBO//jO9ZnoasKF1uJzHd2+M6Q2ZPIVfnFps8JJvXy0ZBbwbNOmE6SGIY5XOY6d1Bo5lb9d9RJ8nv3WSeA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.9.5"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.4", "@babel/types@^7.9.5":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.5.tgz#89231f82915a8a566a703b3b20133f73da6b9444"
@@ -2012,6 +2042,11 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@bcoe/v8-coverage@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
+  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
@@ -2469,15 +2504,6 @@
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.2.tgz#26520bf09abe4a5644cd5414e37125a8954241dd"
   integrity sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==
 
-"@jest/console@^24.7.1":
-  version "24.7.1"
-  resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.7.1.tgz#32a9e42535a97aedfe037e725bd67e954b459545"
-  integrity sha512-iNhtIy2M8bXlAOULWVTUxmnelTLFneTNEkHCgPmgd+zNwy9zVddJ6oS5rZ9iwoscNdT5mMwUd0C51v/fSlzItg==
-  dependencies:
-    "@jest/source-map" "^24.3.0"
-    chalk "^2.0.1"
-    slash "^2.0.0"
-
 "@jest/console@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
@@ -2487,49 +2513,59 @@
     chalk "^2.0.1"
     slash "^2.0.0"
 
-"@jest/core@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/core/-/core-24.9.0.tgz#2ceccd0b93181f9c4850e74f2a9ad43d351369c4"
-  integrity sha512-Fogg3s4wlAr1VX7q+rhV9RVnUv5tD7VuWfYy1+whMiWUrvl7U3QJSJyWcDio9Lq2prqYsZaeTv2Rz24pWGkJ2A==
+"@jest/console@^25.5.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-25.5.0.tgz#770800799d510f37329c508a9edd0b7b447d9abb"
+  integrity sha512-T48kZa6MK1Y6k4b89sexwmSF4YLeZS/Udqg3Jj3jG/cHH+N/sLFCEoXEDMOKugJQ9FxPN1osxIknvKkxt6MKyw==
   dependencies:
-    "@jest/console" "^24.7.1"
-    "@jest/reporters" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    ansi-escapes "^3.0.0"
-    chalk "^2.0.1"
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
+    jest-message-util "^25.5.0"
+    jest-util "^25.5.0"
+    slash "^3.0.0"
+
+"@jest/core@^25.5.4":
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-25.5.4.tgz#3ef7412f7339210f003cdf36646bbca786efe7b4"
+  integrity sha512-3uSo7laYxF00Dg/DMgbn4xMJKmDdWvZnf89n8Xj/5/AeQ2dOQmn6b6Hkj/MleyzZWXpwv+WSdYWl4cLsy2JsoA==
+  dependencies:
+    "@jest/console" "^25.5.0"
+    "@jest/reporters" "^25.5.1"
+    "@jest/test-result" "^25.5.0"
+    "@jest/transform" "^25.5.1"
+    "@jest/types" "^25.5.0"
+    ansi-escapes "^4.2.1"
+    chalk "^3.0.0"
     exit "^0.1.2"
-    graceful-fs "^4.1.15"
-    jest-changed-files "^24.9.0"
-    jest-config "^24.9.0"
-    jest-haste-map "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-resolve "^24.9.0"
-    jest-resolve-dependencies "^24.9.0"
-    jest-runner "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-snapshot "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
-    jest-watcher "^24.9.0"
-    micromatch "^3.1.10"
-    p-each-series "^1.0.0"
-    realpath-native "^1.1.0"
-    rimraf "^2.5.4"
-    slash "^2.0.0"
-    strip-ansi "^5.0.0"
+    graceful-fs "^4.2.4"
+    jest-changed-files "^25.5.0"
+    jest-config "^25.5.4"
+    jest-haste-map "^25.5.1"
+    jest-message-util "^25.5.0"
+    jest-regex-util "^25.2.6"
+    jest-resolve "^25.5.1"
+    jest-resolve-dependencies "^25.5.4"
+    jest-runner "^25.5.4"
+    jest-runtime "^25.5.4"
+    jest-snapshot "^25.5.1"
+    jest-util "^25.5.0"
+    jest-validate "^25.5.0"
+    jest-watcher "^25.5.0"
+    micromatch "^4.0.2"
+    p-each-series "^2.1.0"
+    realpath-native "^2.0.0"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
 
-"@jest/environment@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-24.9.0.tgz#21e3afa2d65c0586cbd6cbefe208bafade44ab18"
-  integrity sha512-5A1QluTPhvdIPFYnO3sZC3smkNeXPVELz7ikPbhUj0bQjB07EoE9qtLrem14ZUYWdVayYbsjVwIiL4WBIMV4aQ==
+"@jest/environment@^25.5.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-25.5.0.tgz#aa33b0c21a716c65686638e7ef816c0e3a0c7b37"
+  integrity sha512-U2VXPEqL07E/V7pSZMSQCvV5Ea4lqOlT+0ZFijl/i316cRMHvZ4qC+jBdryd+lmRetjQo0YIQr6cVPNxxK87mA==
   dependencies:
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    jest-mock "^24.9.0"
+    "@jest/fake-timers" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    jest-mock "^25.5.0"
 
 "@jest/fake-timers@^24.9.0":
   version "24.9.0"
@@ -2540,41 +2576,57 @@
     jest-message-util "^24.9.0"
     jest-mock "^24.9.0"
 
-"@jest/reporters@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-24.9.0.tgz#86660eff8e2b9661d042a8e98a028b8d631a5b43"
-  integrity sha512-mu4X0yjaHrffOsWmVLzitKmmmWSQ3GGuefgNscUSWNiUNcEOSEQk9k3pERKEQVBb0Cnn88+UESIsZEMH3o88Gw==
-  dependencies:
-    "@jest/environment" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
+"@jest/fake-timers@^25.5.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-25.5.0.tgz#46352e00533c024c90c2bc2ad9f2959f7f114185"
+  integrity sha512-9y2+uGnESw/oyOI3eww9yaxdZyHq7XvprfP/eeoCsjqKYts2yRlsHS/SgjPDV8FyMfn2nbMy8YzUk6nyvdLOpQ==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    jest-message-util "^25.5.0"
+    jest-mock "^25.5.0"
+    jest-util "^25.5.0"
+    lolex "^5.0.0"
+
+"@jest/globals@^25.5.2":
+  version "25.5.2"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-25.5.2.tgz#5e45e9de8d228716af3257eeb3991cc2e162ca88"
+  integrity sha512-AgAS/Ny7Q2RCIj5kZ+0MuKM1wbF0WMLxbCVl/GOMoCNbODRdJ541IxJ98xnZdVSZXivKpJlNPIWa3QmY0l4CXA==
+  dependencies:
+    "@jest/environment" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    expect "^25.5.0"
+
+"@jest/reporters@^25.5.1":
+  version "25.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-25.5.1.tgz#cb686bcc680f664c2dbaf7ed873e93aa6811538b"
+  integrity sha512-3jbd8pPDTuhYJ7vqiHXbSwTJQNavczPs+f1kRprRDxETeE3u6srJ+f0NPuwvOmk+lmunZzPkYWIFZDLHQPkviw==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^25.5.0"
+    "@jest/test-result" "^25.5.0"
+    "@jest/transform" "^25.5.1"
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
+    collect-v8-coverage "^1.0.0"
     exit "^0.1.2"
     glob "^7.1.2"
-    istanbul-lib-coverage "^2.0.2"
-    istanbul-lib-instrument "^3.0.1"
-    istanbul-lib-report "^2.0.4"
-    istanbul-lib-source-maps "^3.0.1"
-    istanbul-reports "^2.2.6"
-    jest-haste-map "^24.9.0"
-    jest-resolve "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-util "^24.9.0"
-    jest-worker "^24.6.0"
-    node-notifier "^5.4.2"
-    slash "^2.0.0"
-    source-map "^0.6.0"
-    string-length "^2.0.0"
-
-"@jest/source-map@^24.3.0":
-  version "24.3.0"
-  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-24.3.0.tgz#563be3aa4d224caf65ff77edc95cd1ca4da67f28"
-  integrity sha512-zALZt1t2ou8le/crCeeiRYzvdnTzaIlpOWaet45lNSqNJUnXbppUUFR4ZUAlzgDmKee4Q5P/tKXypI1RiHwgag==
-  dependencies:
-    callsites "^3.0.0"
-    graceful-fs "^4.1.15"
+    graceful-fs "^4.2.4"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^4.0.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.0.2"
+    jest-haste-map "^25.5.1"
+    jest-resolve "^25.5.1"
+    jest-util "^25.5.0"
+    jest-worker "^25.5.0"
+    slash "^3.0.0"
     source-map "^0.6.0"
+    string-length "^3.1.0"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^4.1.3"
+  optionalDependencies:
+    node-notifier "^6.0.0"
 
 "@jest/source-map@^24.9.0":
   version "24.9.0"
@@ -2585,6 +2637,15 @@
     graceful-fs "^4.1.15"
     source-map "^0.6.0"
 
+"@jest/source-map@^25.5.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-25.5.0.tgz#df5c20d6050aa292c2c6d3f0d2c7606af315bd1b"
+  integrity sha512-eIGx0xN12yVpMcPaVpjXPnn3N30QGJCJQSkEDUt9x1fI1Gdvb07Ml6K5iN2hG7NmMP6FDmtPEssE3z6doOYUwQ==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.2.4"
+    source-map "^0.6.0"
+
 "@jest/test-result@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
@@ -2594,15 +2655,26 @@
     "@jest/types" "^24.9.0"
     "@types/istanbul-lib-coverage" "^2.0.0"
 
-"@jest/test-sequencer@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-24.9.0.tgz#f8f334f35b625a4f2f355f2fe7e6036dad2e6b31"
-  integrity sha512-6qqsU4o0kW1dvA95qfNog8v8gkRN9ph6Lz7r96IvZpHdNipP2cBcb07J1Z45mz/VIS01OHJ3pY8T5fUY38tg4A==
+"@jest/test-result@^25.5.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-25.5.0.tgz#139a043230cdeffe9ba2d8341b27f2efc77ce87c"
+  integrity sha512-oV+hPJgXN7IQf/fHWkcS99y0smKLU2czLBJ9WA0jHITLst58HpQMtzSYxzaBvYc6U5U6jfoMthqsUlUlbRXs0A==
   dependencies:
-    "@jest/test-result" "^24.9.0"
-    jest-haste-map "^24.9.0"
-    jest-runner "^24.9.0"
-    jest-runtime "^24.9.0"
+    "@jest/console" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-sequencer@^25.5.4":
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-25.5.4.tgz#9b4e685b36954c38d0f052e596d28161bdc8b737"
+  integrity sha512-pTJGEkSeg1EkCO2YWq6hbFvKNXk8ejqlxiOg1jBNLnWrgXOkdY6UmqZpwGFXNnRt9B8nO1uWMzLLZ4eCmhkPNA==
+  dependencies:
+    "@jest/test-result" "^25.5.0"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^25.5.1"
+    jest-runner "^25.5.4"
+    jest-runtime "^25.5.4"
 
 "@jest/transform@^24.9.0":
   version "24.9.0"
@@ -2626,14 +2698,27 @@
     source-map "^0.6.1"
     write-file-atomic "2.4.1"
 
-"@jest/types@^24.8.0":
-  version "24.8.0"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.8.0.tgz#f31e25948c58f0abd8c845ae26fcea1491dea7ad"
-  integrity sha512-g17UxVr2YfBtaMUxn9u/4+siG1ptg9IGYAYwvpwn61nBg779RXnjE/m7CxYcIzEt0AbHZZAHSEZNhkE2WxURVg==
+"@jest/transform@^25.5.1":
+  version "25.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-25.5.1.tgz#0469ddc17699dd2bf985db55fa0fb9309f5c2db3"
+  integrity sha512-Y8CEoVwXb4QwA6Y/9uDkn0Xfz0finGkieuV0xkdF9UtZGJeLukD5nLkaVrVsODB1ojRWlaoD0AJZpVHCSnJEvg==
   dependencies:
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    "@types/istanbul-reports" "^1.1.1"
-    "@types/yargs" "^12.0.9"
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^25.5.0"
+    babel-plugin-istanbul "^6.0.0"
+    chalk "^3.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^25.5.1"
+    jest-regex-util "^25.2.6"
+    jest-util "^25.5.0"
+    micromatch "^4.0.2"
+    pirates "^4.0.1"
+    realpath-native "^2.0.0"
+    slash "^3.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "^3.0.0"
 
 "@jest/types@^24.9.0":
   version "24.9.0"
@@ -2644,10 +2729,10 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
-"@jest/types@^25.1.0":
-  version "25.1.0"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.1.0.tgz#b26831916f0d7c381e11dbb5e103a72aed1b4395"
-  integrity sha512-VpOtt7tCrgvamWZh1reVsGADujKigBUFTi19mlRjqEGsE8qH4r3s+skY33dNdXOwyZIvuftZ5tqdF1IgsMejMA==
+"@jest/types@^25.5.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.5.0.tgz#4d6a4793f7b9599fc3680877b856a97dbccf2a9d"
+  integrity sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==
   dependencies:
     "@types/istanbul-lib-coverage" "^2.0.0"
     "@types/istanbul-reports" "^1.1.1"
@@ -3444,17 +3529,31 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-2.1.0.tgz#6ad4ca610f696098e92954ab431ff83bea0ce13f"
   integrity sha512-lXKXfypKo644k4Da4yXkPCrwcvn6SlUW2X2zFbuflKHNjf0w9htru01bo26uMhleMXsDmnZ12eJLdrAZa9MANg==
 
-"@sinonjs/commons@^1", "@sinonjs/commons@^1.3.0", "@sinonjs/commons@^1.4.0":
+"@sinonjs/commons@^1":
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.6.0.tgz#ec7670432ae9c8eb710400d112c201a362d83393"
   integrity sha512-w4/WHG7C4WWFyE5geCieFJF6MZkbW4VAriol5KlmQXpAQdxvV0p26sqNZOW6Qyw6Y0l9K4g+cHvvczR2sEEpqg==
   dependencies:
     type-detect "4.0.8"
 
+"@sinonjs/commons@^1.3.0", "@sinonjs/commons@^1.4.0":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.7.2.tgz#505f55c74e0272b43f6c52d81946bed7058fc0e2"
+  integrity sha512-+DUO6pnp3udV/v2VfUWgaY5BIE1IfT7lLfeDzPVeMT1XKkaAp9LgSI9x5RtrFQoZ9Oi0PgXQQHPaoKu7dCjVxw==
+  dependencies:
+    type-detect "4.0.8"
+
+"@sinonjs/commons@^1.7.0":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.7.1.tgz#da5fd19a5f71177a53778073978873964f49acf1"
+  integrity sha512-Debi3Baff1Qu1Unc3mjJ96MgpbwTn43S1+9yJ0llWygPwDNu2aaWBD6yc9y/Z8XDRNhx7U+u2UDg2OGQXkclUQ==
+  dependencies:
+    type-detect "4.0.8"
+
 "@sinonjs/formatio@^3.2.1":
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/@sinonjs/formatio/-/formatio-3.2.1.tgz#52310f2f9bcbc67bdac18c94ad4901b95fde267e"
-  integrity sha512-tsHvOB24rvyvV2+zKMmPkZ7dXX6LSLKZ7aOtXY6Edklp0uRcgGpOsQTTGTcWViFyx4uhWc6GV8QdnALbIbIdeQ==
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@sinonjs/formatio/-/formatio-3.2.2.tgz#771c60dfa75ea7f2d68e3b94c7e888a78781372c"
+  integrity sha512-B8SEsgd8gArBLMD6zpRw3juQ2FVSsmdd7qlevyDqzS9WTCtvF55/gAL+h6gue8ZvPYcdiPdvueM/qm//9XzyTQ==
   dependencies:
     "@sinonjs/commons" "^1"
     "@sinonjs/samsam" "^3.1.0"
@@ -4374,19 +4473,19 @@
     pretty-format "^24.9.0"
     wait-for-expect "^3.0.0"
 
-"@testing-library/jest-dom@4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-4.2.0.tgz#32f8df3a78511b347d39374ea89dc8e0a1c2fb69"
-  integrity sha512-H61OmRhGPWLrj9emyISx0qjp8jvC9RWyRniuLAq75Ny5XfPiOvWfnY3Wm2Tf0HXusX+PG40I94Gw792IAtSKKg==
+"@testing-library/jest-dom@^5.8.0":
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.8.0.tgz#815e830129c4dda6c8e9a725046397acec523669"
+  integrity sha512-9Y4FxYIxfwHpUyJVqI8EOfDP2LlEBqKwXE3F+V8ightji0M2rzQB+9kqZ5UJxNs+9oXJIgvYj7T3QaXLNHVDMw==
   dependencies:
-    "@babel/runtime" "^7.5.1"
-    chalk "^2.4.1"
-    css "^2.2.3"
+    "@babel/runtime" "^7.9.2"
+    "@types/testing-library__jest-dom" "^5.0.2"
+    chalk "^3.0.0"
+    css "^2.2.4"
     css.escape "^1.5.1"
-    jest-diff "^24.0.0"
-    jest-matcher-utils "^24.0.0"
-    lodash "^4.17.11"
-    pretty-format "^24.0.0"
+    jest-diff "^25.1.0"
+    jest-matcher-utils "^25.1.0"
+    lodash "^4.17.15"
     redent "^3.0.0"
 
 "@testing-library/react-hooks@^3.2.1":
@@ -4520,10 +4619,10 @@
   resolved "https://registry.yarnpkg.com/@types/babel-types/-/babel-types-7.0.4.tgz#bfd5b0d0d1ba13e351dff65b6e52783b816826c8"
   integrity sha512-WiZhq3SVJHFRgRYLXvpf65XnV6ipVHhnNaNvE8yCimejrGglkg38kEj0JcizqwSHxmPSjcTlig/6JouxLGEhGw==
 
-"@types/babel__core@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.0.tgz#710f2487dda4dcfd010ca6abb2b4dc7394365c51"
-  integrity sha512-wJTeJRt7BToFx3USrCDs2BhEi4ijBInTQjOIukj6a/5tEkwpFMVZ+1ppgmE+Q/FQyc5P/VWUbx7I9NELrKruHA==
+"@types/babel__core@^7.1.2":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.2.tgz#608c74f55928033fce18b99b213c16be4b3d114f"
+  integrity sha512-cfCCrFmiGY/yq0NuKNxIQvZFy9kY/1immpSpTngOnyIbD4+eJOG5mxphhHDv3CHL9GltO4GcKr54kGBg3RNdbg==
   dependencies:
     "@babel/parser" "^7.1.0"
     "@babel/types" "^7.0.0"
@@ -4531,10 +4630,10 @@
     "@types/babel__template" "*"
     "@types/babel__traverse" "*"
 
-"@types/babel__core@^7.1.2":
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.2.tgz#608c74f55928033fce18b99b213c16be4b3d114f"
-  integrity sha512-cfCCrFmiGY/yq0NuKNxIQvZFy9kY/1immpSpTngOnyIbD4+eJOG5mxphhHDv3CHL9GltO4GcKr54kGBg3RNdbg==
+"@types/babel__core@^7.1.7":
+  version "7.1.7"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.7.tgz#1dacad8840364a57c98d0dd4855c6dd3752c6b89"
+  integrity sha512-RL62NqSFPCDK2FM1pSDH0scHpJvsXtZNiYlMB73DgPBaG1E38ZYVL+ei5EkWRbr+KC4YNiAUNBnRj+bgwpgjMw==
   dependencies:
     "@babel/parser" "^7.1.0"
     "@babel/types" "^7.0.0"
@@ -4942,7 +5041,7 @@
     "@types/glob" "*"
     fast-glob "^2.0.2"
 
-"@types/graceful-fs@*":
+"@types/graceful-fs@*", "@types/graceful-fs@^4.1.2":
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.3.tgz#039af35fe26bec35003e8d86d2ee9c586354348f"
   integrity sha512-AiHRaEB50LQg0pZmm659vNBb9f4SJ0qrAnteuzhSeAUcJKxoYgEnprg/83kppCnc2zvtCKbdZry1a5pVY3lOTQ==
@@ -5090,7 +5189,7 @@
   resolved "https://registry.yarnpkg.com/@types/is-glob/-/is-glob-4.0.0.tgz#fb8a2bff539025d4dcd6d5efe7689e03341b876d"
   integrity sha512-zC/2EmD8scdsGIeE+Xg7kP7oi9VP90zgMQtm9Cr25av4V+a+k8slQyiT60qSw8KORYrOKlPXfHwoa1bQbRzskQ==
 
-"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
   integrity sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg==
@@ -5110,19 +5209,13 @@
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
-"@types/jest-diff@*":
-  version "24.3.0"
-  resolved "https://registry.yarnpkg.com/@types/jest-diff/-/jest-diff-24.3.0.tgz#29e237a3d954babfe6e23cc59b57ecd8ca8d858d"
-  integrity sha512-vx1CRDeDUwQ0Pc7v+hS61O1ETA81kD04IMEC0hS1kPyVtHDdZrokAvpF7MT9VI/fVSzicelUZNCepDvhRV1PeA==
-  dependencies:
-    jest-diff "*"
-
-"@types/jest@24.0.19":
-  version "24.0.19"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-24.0.19.tgz#f7036058d2a5844fe922609187c0ad8be430aff5"
-  integrity sha512-YYiqfSjocv7lk5H/T+v5MjATYjaTMsUkbDnjGqSMoO88jWdtJXJV4ST/7DKZcoMHMBvB2SeSfyOzZfkxXHR5xg==
+"@types/jest@*", "@types/jest@^25.2.3":
+  version "25.2.3"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-25.2.3.tgz#33d27e4c4716caae4eced355097a47ad363fdcaf"
+  integrity sha512-JXc1nK/tXHiDhV55dvfzqtmP4S3sy3T3ouV2tkViZgxY/zeUkcpQcQPGRlgF4KmWzWW5oiWYSZwtCB+2RsE4Fw==
   dependencies:
-    "@types/jest-diff" "*"
+    jest-diff "^25.2.1"
+    pretty-format "^25.2.1"
 
 "@types/joi@*", "@types/joi@^13.4.2":
   version "13.6.1"
@@ -5151,14 +5244,14 @@
   resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-3.12.1.tgz#5c6f4a1eabca84792fbd916f0cb40847f123c656"
   integrity sha512-SGGAhXLHDx+PK4YLNcNGa6goPf9XRWQNAUUbffkwVGGXIxmDKWyGGL4inzq2sPmExu431Ekb9aEMn9BkPqEYFA==
 
-"@types/jsdom@^12.2.4":
-  version "12.2.4"
-  resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-12.2.4.tgz#845cd4d43f95b8406d9b724ec30c03edadcd9528"
-  integrity sha512-q+De3S/Ri6U9uPx89YA1XuC+QIBgndIfvBaaJG0pRT8Oqa75k4Mr7G9CRZjIvlbLGIukO/31DFGFJYlQBmXf/A==
+"@types/jsdom@^16.2.3":
+  version "16.2.3"
+  resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-16.2.3.tgz#c6feadfe0836389b27f9c911cde82cd32e91c537"
+  integrity sha512-BREatezSn74rmLIDksuqGNFUTi9HNAWWQXYpFBFLK9U6wlMCO4M0QCa8CMpDsZQuqxSO9XifVLT5Q1P0vgKLqw==
   dependencies:
     "@types/node" "*"
+    "@types/parse5" "*"
     "@types/tough-cookie" "*"
-    parse5 "^4.0.0"
 
 "@types/json-schema@*", "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.4":
   version "7.0.5"
@@ -5436,6 +5529,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-link-header/-/parse-link-header-1.0.0.tgz#69f059e40a0fa93dc2e095d4142395ae6adc5d7a"
   integrity sha512-fCA3btjE7QFeRLfcD0Sjg+6/CnmC66HpMBoRfRzd2raTaWMJV21CCZ0LO8MOqf8onl5n0EPfjq4zDhbyX8SVwA==
 
+"@types/parse5@*":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109"
+  integrity sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==
+
 "@types/pegjs@^0.10.1":
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/@types/pegjs/-/pegjs-0.10.1.tgz#9a2f3961dc62430fdb21061eb0ddbd890f9e3b94"
@@ -5458,6 +5556,11 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-1.16.1.tgz#328d1c9b54402e44119398bcb6a31b7bbd606d59"
   integrity sha512-db6pZL5QY3JrlCHBhYQzYDci0xnoDuxfseUuguLRr3JNk+bnCfpkK6p8quiUDyO8A0vbpBKkk59Fw125etrNeA==
 
+"@types/prettier@^1.19.0":
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-1.19.1.tgz#33509849f8e679e4add158959fdb086440e9553f"
+  integrity sha512-5qOlnZscTn4xxM5MeGXAMOsIOIKIbh9e85zJWfBRVPlRMEVawzoPhINYbRGkBZCI8LxvBe7tJCdWiarA99OZfQ==
+
 "@types/pretty-ms@^5.0.0":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@types/pretty-ms/-/pretty-ms-5.0.1.tgz#f2f0d7be58caf8613d149053d446e0282ae11ff3"
@@ -5864,6 +5967,13 @@
   dependencies:
     pretty-format "^24.3.0"
 
+"@types/testing-library__jest-dom@^5.0.2", "@types/testing-library__jest-dom@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.7.0.tgz#078790bf4dc89152a74428591a228ec5f9433251"
+  integrity sha512-LoZ3uonlnAbJUz4bg6UoeFl+frfndXngmkCItSjJ8DD5WlRfVqPC5/LgJASsY/dy7AHH2YJ7PcsdASOydcVeFA==
+  dependencies:
+    "@types/jest" "*"
+
 "@types/testing-library__react-hooks@^3.0.0", "@types/testing-library__react-hooks@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@types/testing-library__react-hooks/-/testing-library__react-hooks-3.1.0.tgz#04d174ce767fbcce3ccb5021d7f156e1b06008a9"
@@ -6066,11 +6176,6 @@
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.0.0.tgz#453743c5bbf9f1bed61d959baab5b06be029b2d0"
   integrity sha512-wBlsw+8n21e6eTd4yVv8YD/E3xq0O6nNnJIquutAsFGE7EyMKz7W6RNT6BRu1SmdgmlCZ9tb0X+j+D6HGr8pZw==
 
-"@types/yargs@^12.0.9":
-  version "12.0.10"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.10.tgz#17a8ec65cd8e88f51b418ceb271af18d3137df67"
-  integrity sha512-WsVzTPshvCSbHThUduGGxbmnwcpkgSctHGHTqzWyFg4lYAuV5qXlyFPOsP3OWqCINfmg/8VXP+zJaa4OxEsBQQ==
-
 "@types/yargs@^13.0.0":
   version "13.0.2"
   resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.2.tgz#a64674fc0149574ecd90ba746e932b5a5f7b3653"
@@ -6383,7 +6488,7 @@ JSONStream@1.3.5:
   resolved "https://registry.yarnpkg.com/JSV/-/JSV-4.0.2.tgz#d077f6825571f82132f9dffaed587b4029feff57"
   integrity sha1-0Hf2glVx+CEy+d/67Vh7QCn+/1c=
 
-abab@^1.0.3, abab@^1.0.4:
+abab@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
   integrity sha1-X6rZwsB/YN12dw9xzwJbYqY8/U4=
@@ -6453,15 +6558,7 @@ acorn-globals@^3.0.0:
   dependencies:
     acorn "^4.0.4"
 
-acorn-globals@^4.0.0:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.2.tgz#4e2c2313a597fd589720395f6354b41cd5ec8006"
-  integrity sha512-BbzvZhVtZP+Bs1J1HcwrQe8ycfO0wStkSGxuul3He3GkHOIZ6eTqOkPuw9IP1X3+IkOo4wiJmwkobzXYz4wewQ==
-  dependencies:
-    acorn "^6.0.1"
-    acorn-walk "^6.0.1"
-
-acorn-globals@^4.3.2:
+acorn-globals@^4.3.0, acorn-globals@^4.3.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
   integrity sha512-clfQEh21R+D0leSbUdWf3OcfqyaCSAQ8Ryq00bofSekfr9W8u1jyYZo6ir0xu9Gtcf7BjcHJpnbZH7JOCpP60A==
@@ -6500,7 +6597,7 @@ acorn-walk@^7.0.0, acorn-walk@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.1.1.tgz#345f0dffad5c735e7373d2fec9a1023e6a44b83e"
   integrity sha512-wdlPY2tm/9XBr7QkKlq0WQVgiuGTX6YWPyRyBviSoScBuLfTVQhvwg6wJ369GJ/1nPfTLMfnrFIfjqVg6d+jQQ==
 
-acorn@5.X, acorn@^5.0.3, acorn@^5.1.2, acorn@^5.5.0:
+acorn@5.X, acorn@^5.0.3, acorn@^5.5.0:
   version "5.7.4"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
   integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
@@ -6515,7 +6612,7 @@ acorn@^4.0.4, acorn@~4.0.2:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
   integrity sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=
 
-acorn@^6.0.1, acorn@^6.2.1:
+acorn@^6.0.1, acorn@^6.0.4, acorn@^6.2.1:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
   integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
@@ -6977,7 +7074,7 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
-anymatch@~3.1.1:
+anymatch@^3.0.3, anymatch@~3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
   integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
@@ -7878,18 +7975,19 @@ babel-helper-to-multiple-sequence-expressions@^0.5.0:
   resolved "https://registry.yarnpkg.com/babel-helper-to-multiple-sequence-expressions/-/babel-helper-to-multiple-sequence-expressions-0.5.0.tgz#a3f924e3561882d42fcf48907aa98f7979a4588d"
   integrity sha512-m2CvfDW4+1qfDdsrtf4dwOslQC3yhbgyBFptncp4wvtdrDHqueW7slsYv4gArie056phvQFhT2nRcGS4bnm6mA==
 
-babel-jest@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
-  integrity sha512-ntuddfyiN+EhMw58PTNL1ph4C9rECiQXjI4nMMBKBaNjXvqLdkXpPRcMSr4iyBrJg/+wz9brFUD6RhOAT6r4Iw==
+babel-jest@^25.5.1:
+  version "25.5.1"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-25.5.1.tgz#bc2e6101f849d6f6aec09720ffc7bc5332e62853"
+  integrity sha512-9dA9+GmMjIzgPnYtkhBg73gOo/RHqPmLruP3BaGL4KEX3Dwz6pI8auSN8G8+iuEG90+GSswyKvslN+JYSaacaQ==
   dependencies:
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/babel__core" "^7.1.0"
-    babel-plugin-istanbul "^5.1.0"
-    babel-preset-jest "^24.9.0"
-    chalk "^2.4.2"
-    slash "^2.0.0"
+    "@jest/transform" "^25.5.1"
+    "@jest/types" "^25.5.0"
+    "@types/babel__core" "^7.1.7"
+    babel-plugin-istanbul "^6.0.0"
+    babel-preset-jest "^25.5.0"
+    chalk "^3.0.0"
+    graceful-fs "^4.2.4"
+    slash "^3.0.0"
 
 babel-loader@^8.0.2, babel-loader@^8.0.6:
   version "8.0.6"
@@ -7994,11 +8092,13 @@ babel-plugin-istanbul@^6.0.0:
     istanbul-lib-instrument "^4.0.0"
     test-exclude "^6.0.0"
 
-babel-plugin-jest-hoist@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.9.0.tgz#4f837091eb407e01447c8843cbec546d0002d756"
-  integrity sha512-2EMA2P8Vp7lG0RAzr4HXqtYwacfMErOuv1U3wrvxHX6rD1sV6xS3WXG3r8TRQ2r6w8OhvSdWt+z41hQNwNm3Xw==
+babel-plugin-jest-hoist@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-25.5.0.tgz#129c80ba5c7fc75baf3a45b93e2e372d57ca2677"
+  integrity sha512-u+/W+WAjMlvoocYGTwthAiQSxDcJAyHpQ6oWlHdFZaaN+Rlk8Q7iiwDPg2lN/FyJtAYnKjFxbn7xus4HCFkg5g==
   dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
     "@types/babel__traverse" "^7.0.6"
 
 babel-plugin-macros@2.6.1:
@@ -8215,13 +8315,29 @@ babel-polyfill@^6.26.0:
     core-js "^2.5.0"
     regenerator-runtime "^0.10.5"
 
-babel-preset-jest@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz#192b521e2217fb1d1f67cf73f70c336650ad3cdc"
-  integrity sha512-izTUuhE4TMfTRPF92fFwD2QfdXaZW08qvWTFCI51V8rW5x00UuPgc3ajRoWofXOuxjfcOM5zzSYsQS3H8KGCAg==
+babel-preset-current-node-syntax@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-0.1.2.tgz#fb4a4c51fe38ca60fede1dc74ab35eb843cb41d6"
+  integrity sha512-u/8cS+dEiK1SFILbOC8/rUI3ml9lboKuuMvZ/4aQnQmhecQAgPw5ew066C1ObnEAUmlx7dv/s2z52psWEtLNiw==
+  dependencies:
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-bigint" "^7.8.3"
+    "@babel/plugin-syntax-class-properties" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.8.3"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
+babel-preset-jest@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-25.5.0.tgz#c1d7f191829487a907764c65307faa0e66590b49"
+  integrity sha512-8ZczygctQkBU+63DtSOKGh7tFL0CeCuz+1ieud9lJ1WPQ9O6A1a/r+LGn6Y705PA6whHQ3T1XuB/PmpfNYf8Fw==
   dependencies:
-    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
-    babel-plugin-jest-hoist "^24.9.0"
+    babel-plugin-jest-hoist "^25.5.0"
+    babel-preset-current-node-syntax "^0.1.2"
 
 "babel-preset-minify@^0.5.0 || 0.6.0-alpha.5":
   version "0.5.0"
@@ -9427,6 +9543,15 @@ caniuse-lite@^1.0.30001043:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001079.tgz#ed3e5225cd9a6850984fdd88bf24ce45d69b9c22"
   integrity sha512-2KaYheg0iOY+CMmDuAB3DHehrXhhb4OZU4KBVGDr/YKyYAcpudaiUQ9PJ9rxrPlKEoJ3ATasQ5AN48MqpwS43Q==
 
+canvas@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/canvas/-/canvas-2.6.1.tgz#0d087dd4d60f5a5a9efa202757270abea8bef89e"
+  integrity sha512-S98rKsPcuhfTcYbtF53UIJhcbgIAK533d1kJKMwsMwAIFgfd58MOyxRud3kktlzWiEkFliaJtvyZCBtud/XVEA==
+  dependencies:
+    nan "^2.14.0"
+    node-pre-gyp "^0.11.0"
+    simple-get "^3.0.3"
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -10189,6 +10314,11 @@ collapse-white-space@^1.0.2:
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.3.tgz#4b906f670e5a963a87b76b0e1689643341b6023c"
   integrity sha1-S5BvZw5aljqHt2sOFolkM0G2Ajw=
 
+collect-v8-coverage@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.0.tgz#150ee634ac3650b71d9c985eb7f608942334feb1"
+  integrity sha512-VKIhJgvk8E1W28m5avZ2Gv2Ruv5YiF56ug2oclvaG9md69BuZImMG2sk9g7QNKLUbtYAKQjXjYxbYZVUlMMKmQ==
+
 collection-map@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-map/-/collection-map-1.0.0.tgz#aea0f06f8d26c780c2b75494385544b2255af18c"
@@ -10685,11 +10815,6 @@ content-disposition@0.5.3:
   dependencies:
     safe-buffer "5.1.2"
 
-content-type-parser@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.2.tgz#caabe80623e63638b2502fd4c7f12ff4ce2352e7"
-  integrity sha512-lM4l4CnMEwOLHAHr/P6MEZwZFPJFtAAKgL6pogbXmVZggIqXhdB6RbBtPOTsw2FcXwYhehRGERJmRrjOiIB8pQ==
-
 content-type@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
@@ -10712,7 +10837,7 @@ contour_plot@^0.0.1:
   resolved "https://registry.yarnpkg.com/contour_plot/-/contour_plot-0.0.1.tgz#475870f032b8e338412aa5fc507880f0bf495c77"
   integrity sha1-R1hw8DK44zhBKqX8UHiA8L9JXHc=
 
-convert-source-map@1.7.0, convert-source-map@^1.5.1, convert-source-map@^1.7.0:
+convert-source-map@1.7.0, convert-source-map@^1.5.1, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
   integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
@@ -11277,7 +11402,7 @@ css.escape@^1.5.1:
   resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
   integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
 
-css@2.X, css@^2.0.0, css@^2.2.1, css@^2.2.3, css@^2.2.4:
+css@2.X, css@^2.0.0, css@^2.2.1, css@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
   integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
@@ -11304,32 +11429,27 @@ csso@^4.0.2:
   dependencies:
     css-tree "1.0.0-alpha.37"
 
-cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b"
-  integrity sha1-uANhcMefB6kP8vFuIihAJ6JDhIs=
+cssom@0.3.x, cssom@^0.3.4, cssom@~0.3.6:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
 
 cssom@^0.4.1:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
   integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
 
-cssom@~0.3.6:
-  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
-  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
-
-"cssstyle@>= 0.2.37 < 0.3.0":
-  version "0.2.37"
-  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-0.2.37.tgz#541097234cb2513c83ceed3acddc27ff27987d54"
-  integrity sha1-VBCXI0yyUTyDzu06zdwn/yeYfVQ=
+cssstyle@^1.1.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.4.0.tgz#9d31328229d3c565c61e586b02041a28fccdccf1"
+  integrity sha512-GBrLZYZ4X4x6/QEoBnIrqb8B/f5l4+8me2dkom/j1Gtbxy0kBv6OGzKuAsGM75bkGwGAFkt56Iwg28S3XTZgSA==
   dependencies:
     cssom "0.3.x"
 
 cssstyle@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.0.0.tgz#911f0fe25532db4f5d44afc83f89cc4b82c97fe3"
-  integrity sha512-QXSAu2WBsSRXCPjvI43Y40m6fMevvyRm8JVAuF9ksQz5jha4pWP1wpaK7Yu5oLFc6+XAY+hj8YhefyXcBB53gg==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.2.0.tgz#e4c44debccd6b7911ed617a4395e5754bba59992"
+  integrity sha512-sEb3XFPx3jNnCAMtqrXPDeSgQr+jojtCeNf8cvMNMh1cG970+lljssvQDzPq6lmmJu2Vhqood/gtEomBiHOGnA==
   dependencies:
     cssom "~0.3.6"
 
@@ -12131,11 +12251,21 @@ detect-indent@^4.0.0:
   dependencies:
     repeating "^2.0.0"
 
-detect-newline@2.X, detect-newline@^2.1.0:
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
+
+detect-newline@2.X:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
   integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
 
+detect-newline@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
+  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
+
 detect-node@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
@@ -12270,20 +12400,15 @@ diff-match-patch@^1.0.4:
   resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.4.tgz#6ac4b55237463761c4daf0dc603eb869124744b1"
   integrity sha512-Uv3SW8bmH9nAtHKaKSanOQmj2DnlH65fUpcrMdfdaOxUG02QQ4YGZ8AE7kKOMisF7UqvOlGKVYWRvezdncW9lg==
 
-diff-sequences@^24.0.0:
-  version "24.0.0"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.0.0.tgz#cdf8e27ed20d8b8d3caccb4e0c0d8fe31a173013"
-  integrity sha512-46OkIuVGBBnrC0soO/4LHu5LHGHx0uhP65OVz8XOrAJpqiCB2aVIuESvjI1F9oqebuvY8lekS1pt6TN7vt7qsw==
-
 diff-sequences@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
   integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
 
-diff-sequences@^25.1.0:
-  version "25.1.0"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.1.0.tgz#fd29a46f1c913fd66c22645dc75bffbe43051f32"
-  integrity sha512-nFIfVk5B/NStCsJ+zaPO4vYuLjlzQ6uFvPxzYyHlejNZ/UGa7G/n7peOXVrVNvRuyfstt+mZQYGpjxg9Z6N8Kw==
+diff-sequences@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.2.6.tgz#5f467c00edd35352b7bca46d7927d60e687a76dd"
+  integrity sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg==
 
 diff@3.5.0, diff@^3.5.0:
   version "3.5.0"
@@ -12443,11 +12568,6 @@ domelementtype@1, domelementtype@^1.3.0, domelementtype@^1.3.1:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
   integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
 
-domexception@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.0.tgz#81fe5df81b3f057052cde3a9fa9bf536a85b9ab0"
-  integrity sha512-WpwuBlZ2lQRFa4H/4w49deb9rJLot9KmqrKKjMc9qBl7CID+DdC2swoa34ccRl+anL2B6bLp6TjFdIdnzekMBQ==
-
 domexception@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
@@ -13294,6 +13414,18 @@ escodegen@1.8.x:
   optionalDependencies:
     source-map "~0.2.0"
 
+escodegen@^1.11.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.1.tgz#ba01d0c8278b5e95a9a45350142026659027a457"
+  integrity sha512-Bmt7NcRySdIfNPfU2ZoXDrrXsG9ZjvDxcAlMfDUgRBjLOWTuIACXPBFJH7Z+cLb40JeQco5toikyc9t9P8E9SQ==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
 escodegen@^1.11.1:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.12.0.tgz#f763daf840af172bb3a2b6dd7219c0e17f7ff541"
@@ -13318,18 +13450,6 @@ escodegen@^1.8.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-escodegen@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.0.tgz#9811a2f265dc1cd3894420ee3717064b632b8852"
-  integrity sha512-v0MYvNQ32bzwoG2OSFzWAkuahDQHK92JBN0pTAALJ4RIxEZe766QJPDR8Hqy7XNUy5K3fnVL76OqYAdc4TZEIw==
-  dependencies:
-    esprima "^3.1.3"
-    estraverse "^4.2.0"
-    esutils "^2.0.2"
-    optionator "^0.8.1"
-  optionalDependencies:
-    source-map "~0.5.6"
-
 escodegen@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.2.0.tgz#09de7967791cc958b7f89a2ddb6d23451af327e1"
@@ -13453,10 +13573,10 @@ eslint-plugin-import@^2.19.1:
     read-pkg-up "^2.0.0"
     resolve "^1.12.0"
 
-eslint-plugin-jest@^23.3.0:
-  version "23.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-23.3.0.tgz#b1443d0c46d6a0de9ef3de78176dd6688c7d5326"
-  integrity sha512-GE6CR4ESJeu6Huw7vfZfaXHmX2R2kCFvf2X9OMcOxfP158yLKgLWz7PqLYTwRDACi84IhpmRxO8lK7GGwG05UQ==
+eslint-plugin-jest@^23.10.0:
+  version "23.10.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-23.10.0.tgz#4738c7ca9e6513da50f4e99d7b161c1f82fa8e8f"
+  integrity sha512-cHC//nesojSO1MLxVmFJR/bUaQQG7xvMHQD8YLbsQzevR41WKm8paKDUv2wMHlUy5XLZUmNcWuflOi4apS8D+Q==
   dependencies:
     "@typescript-eslint/experimental-utils" "^2.5.0"
 
@@ -13691,7 +13811,7 @@ esprima@^3.1.3, esprima@~3.1.0:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
   integrity sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=
 
-esprima@^4.0.0, esprima@~4.0.0:
+esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
@@ -13891,6 +14011,22 @@ execa@^0.7.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+execa@^3.2.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-3.4.0.tgz#c08ed4550ef65d858fac269ffc8572446f37eb89"
+  integrity sha512-r9vdGQk4bmCuK1yKQu1KTwcT2zwfWdbdaXfCtAh+5nU/4fSX+JAb7vZGvI5naJrQlvONrEB20jeruESI69530g==
+  dependencies:
+    cross-spawn "^7.0.0"
+    get-stream "^5.0.0"
+    human-signals "^1.1.1"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.0"
+    onetime "^5.1.0"
+    p-finally "^2.0.0"
+    signal-exit "^3.0.2"
+    strip-final-newline "^2.0.0"
+
 execa@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.2.tgz#ad87fb7b2d9d564f70d2b62d511bee41d5cbb240"
@@ -13977,6 +14113,18 @@ expect@^24.9.0:
     jest-message-util "^24.9.0"
     jest-regex-util "^24.9.0"
 
+expect@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-25.5.0.tgz#f07f848712a2813bb59167da3fb828ca21f58bba"
+  integrity sha512-w7KAXo0+6qqZZhovCaBVPSIqQp7/UTcx4M9uKt2m6pd2VB1voyC8JizLRqeEqud3AAVP02g+hbErDu5gu64tlA==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    ansi-styles "^4.0.0"
+    jest-get-type "^25.2.6"
+    jest-matcher-utils "^25.5.0"
+    jest-message-util "^25.5.0"
+    jest-regex-util "^25.2.6"
+
 expiry-js@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/expiry-js/-/expiry-js-0.1.7.tgz#76be8c05e572bf936df40c1766448d0b3b2f555f"
@@ -15109,7 +15257,7 @@ fsevents@^1.2.7:
     bindings "^1.5.0"
     nan "^2.12.1"
 
-fsevents@~2.1.0, fsevents@~2.1.1, fsevents@~2.1.2:
+fsevents@^2.1.2, fsevents@~2.1.0, fsevents@~2.1.1, fsevents@~2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.2.tgz#4c0a1fb34bc68e543b4b82a9ec392bfbda840805"
   integrity sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==
@@ -15955,6 +16103,11 @@ graceful-fs@^4.2.0:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
   integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==
 
+graceful-fs@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
+  integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
+
 graceful-fs@~1.1:
   version "1.1.14"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-1.1.14.tgz#07078db5f6377f6321fceaaedf497de124dc9465"
@@ -16885,7 +17038,7 @@ html-element-map@^1.2.0:
   dependencies:
     array-filter "^1.0.0"
 
-html-encoding-sniffer@^1.0.1, html-encoding-sniffer@^1.0.2:
+html-encoding-sniffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
   integrity sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==
@@ -17183,7 +17336,7 @@ icalendar@0.7.1:
   resolved "https://registry.yarnpkg.com/icalendar/-/icalendar-0.7.1.tgz#d0d3486795f8f1c5cf4f8cafac081b4b4e7a32ae"
   integrity sha1-0NNIZ5X48cXPT4yvrAgbS056Mq4=
 
-iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.22, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
+iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.22, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -17267,6 +17420,13 @@ ignore-by-default@^1.0.1:
   resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
   integrity sha1-SMptcvbGo68Aqa1K5odr44ieKwk=
 
+ignore-walk@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
+  integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==
+  dependencies:
+    minimatch "^3.0.4"
+
 ignore@^3.1.2, ignore@^3.3.5:
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
@@ -17357,6 +17517,14 @@ import-local@2.0.0, import-local@^2.0.0:
     pkg-dir "^3.0.0"
     resolve-cwd "^2.0.0"
 
+import-local@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.0.2.tgz#a8cfd0431d1de4a2199703d003e3e62364fa6db6"
+  integrity sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
 imports-loader@^0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/imports-loader/-/imports-loader-0.8.0.tgz#030ea51b8ca05977c40a3abfd9b4088fe0be9a69"
@@ -18459,6 +18627,11 @@ is-wsl@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
   integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
 
+is-wsl@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.1.1.tgz#4a1c152d429df3d441669498e2486d3596ebaf1d"
+  integrity sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog==
+
 is-yarn-global@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/is-yarn-global/-/is-yarn-global-0.3.0.tgz#d502d3382590ea3004893746754c89139973e232"
@@ -18560,7 +18733,7 @@ istanbul-lib-coverage@^1.2.1:
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.1.tgz#ccf7edcd0a0bb9b8f729feeb0930470f9af664f0"
   integrity sha512-PzITeunAgyGbtY1ibVIUiV679EFChHjoMNRibEIobvmrCRaIgwLxNucOSimtNWUhEib/oO7QY2imD75JVgCJWQ==
 
-istanbul-lib-coverage@^2.0.2, istanbul-lib-coverage@^2.0.3:
+istanbul-lib-coverage@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#0b891e5ad42312c2b9488554f603795f9a2211ba"
   integrity sha512-dKWuzRGCs4G+67VfW9pBFFz2Jpi4vSp/k7zBcJ888ofV5Mi1g5CUML5GvMvV6u9Cjybftu+E8Cgp+k0dI1E5lw==
@@ -18590,7 +18763,7 @@ istanbul-lib-instrument@^1.7.3:
     istanbul-lib-coverage "^1.2.1"
     semver "^5.3.0"
 
-istanbul-lib-instrument@^3.0.0, istanbul-lib-instrument@^3.0.1:
+istanbul-lib-instrument@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-3.1.0.tgz#a2b5484a7d445f1f311e93190813fa56dfb62971"
   integrity sha512-ooVllVGT38HIk8MxDj/OIHXSYvH+1tq/Vb38s8ixt9GoJadXska4WkGY+0wkmtYCZNYtaARniH/DixUGGLZ0uA==
@@ -18629,15 +18802,6 @@ istanbul-lib-processinfo@^2.0.2:
     rimraf "^3.0.0"
     uuid "^3.3.3"
 
-istanbul-lib-report@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-2.0.4.tgz#bfd324ee0c04f59119cb4f07dab157d09f24d7e4"
-  integrity sha512-sOiLZLAWpA0+3b5w5/dq0cjm2rrNdAfHWaGhmn7XEFW6X++IV9Ohn+pnELAl9K3rfpaeBfbmH9JU5sejacdLeA==
-  dependencies:
-    istanbul-lib-coverage "^2.0.3"
-    make-dir "^1.3.0"
-    supports-color "^6.0.0"
-
 istanbul-lib-report@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
@@ -18647,17 +18811,6 @@ istanbul-lib-report@^3.0.0:
     make-dir "^3.0.0"
     supports-color "^7.1.0"
 
-istanbul-lib-source-maps@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.2.tgz#f1e817229a9146e8424a28e5d69ba220fda34156"
-  integrity sha512-JX4v0CiKTGp9fZPmoxpu9YEkPbEqCqBbO3403VabKjH+NRXo72HafD5UgnjTEqHL2SAjaZK1XDuDOkn6I5QVfQ==
-  dependencies:
-    debug "^4.1.1"
-    istanbul-lib-coverage "^2.0.3"
-    make-dir "^1.3.0"
-    rimraf "^2.6.2"
-    source-map "^0.6.1"
-
 istanbul-lib-source-maps@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.0.tgz#75743ce6d96bb86dc7ee4352cf6366a23f0b1ad9"
@@ -18667,13 +18820,6 @@ istanbul-lib-source-maps@^4.0.0:
     istanbul-lib-coverage "^3.0.0"
     source-map "^0.6.1"
 
-istanbul-reports@^2.2.6:
-  version "2.2.7"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-2.2.7.tgz#5d939f6237d7b48393cc0959eab40cd4fd056931"
-  integrity sha512-uu1F/L1o5Y6LzPVSVZXNOoD/KXpJue9aeLRd0sM9uMXfZvzomB0WxVamWb5ue8kA2vVWEmW7EG+A5n3f1kqHKg==
-  dependencies:
-    html-escaper "^2.0.0"
-
 istanbul-reports@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.0.2.tgz#d593210e5000683750cb09fc0644e4b6e27fd53b"
@@ -18734,58 +18880,84 @@ iterall@^1.2.2:
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.3.0.tgz#afcb08492e2915cbd8a0884eb93a8c94d0d72fea"
   integrity sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg==
 
-jest-changed-files@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.9.0.tgz#08d8c15eb79a7fa3fc98269bc14b451ee82f8039"
-  integrity sha512-6aTWpe2mHF0DhL28WjdkO8LyGjs3zItPET4bMSeXU6T3ub4FPMw+mcOcbdGXQOAfmLcxofD23/5Bl9Z4AkFwqg==
+jest-changed-files@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-25.5.0.tgz#141cc23567ceb3f534526f8614ba39421383634c"
+  integrity sha512-EOw9QEqapsDT7mKF162m8HFzRPbmP8qJQny6ldVOdOVBz3ACgPm/1nAn5fPQ/NDaYhX/AHkrGwwkCncpAVSXcw==
   dependencies:
-    "@jest/types" "^24.9.0"
-    execa "^1.0.0"
-    throat "^4.0.0"
+    "@jest/types" "^25.5.0"
+    execa "^3.2.0"
+    throat "^5.0.0"
 
-jest-cli@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-24.9.0.tgz#ad2de62d07472d419c6abc301fc432b98b10d2af"
-  integrity sha512-+VLRKyitT3BWoMeSUIHRxV/2g8y9gw91Jh5z2UmXZzkZKpbC08CSehVxgHUwTpy+HwGcns/tqafQDJW7imYvGg==
+jest-circus@^25.5.4:
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-25.5.4.tgz#d5578346f53d5604b7b1d1e5e56be48b1c73c61d"
+  integrity sha512-nOLJXZjWuV2i8yQ2w+MZ8NhFuqrbgpPAa4mh+DWPYmNI377YYpDKvDUrLMW8U1sa2iGt5mjKQbmJz2SK9AYjWg==
   dependencies:
-    "@jest/core" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
-    exit "^0.1.2"
-    import-local "^2.0.0"
-    is-ci "^2.0.0"
-    jest-config "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
+    "@babel/traverse" "^7.1.0"
+    "@jest/environment" "^25.5.0"
+    "@jest/test-result" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
+    co "^4.6.0"
+    expect "^25.5.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^25.5.0"
+    jest-matcher-utils "^25.5.0"
+    jest-message-util "^25.5.0"
+    jest-runtime "^25.5.4"
+    jest-snapshot "^25.5.1"
+    jest-util "^25.5.0"
+    pretty-format "^25.5.0"
+    stack-utils "^1.0.1"
+    throat "^5.0.0"
+
+jest-cli@^25.5.4:
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-25.5.4.tgz#b9f1a84d1301a92c5c217684cb79840831db9f0d"
+  integrity sha512-rG8uJkIiOUpnREh1768/N3n27Cm+xPFkSNFO91tgg+8o2rXeVLStz+vkXkGr4UtzH6t1SNbjwoiswd7p4AhHTw==
+  dependencies:
+    "@jest/core" "^25.5.4"
+    "@jest/test-result" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    import-local "^3.0.2"
+    is-ci "^2.0.0"
+    jest-config "^25.5.4"
+    jest-util "^25.5.0"
+    jest-validate "^25.5.0"
     prompts "^2.0.1"
-    realpath-native "^1.1.0"
-    yargs "^13.3.0"
+    realpath-native "^2.0.0"
+    yargs "^15.3.1"
 
-jest-config@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-24.9.0.tgz#fb1bbc60c73a46af03590719efa4825e6e4dd1b5"
-  integrity sha512-RATtQJtVYQrp7fvWg6f5y3pEFj9I+H8sWw4aKxnDZ96mob5i5SD6ZEGWgMLXQ4LE8UurrjbdlLWdUeo+28QpfQ==
+jest-config@^25.5.4:
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-25.5.4.tgz#38e2057b3f976ef7309b2b2c8dcd2a708a67f02c"
+  integrity sha512-SZwR91SwcdK6bz7Gco8qL7YY2sx8tFJYzvg216DLihTWf+LKY/DoJXpM9nTzYakSyfblbqeU48p/p7Jzy05Atg==
   dependencies:
     "@babel/core" "^7.1.0"
-    "@jest/test-sequencer" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    babel-jest "^24.9.0"
-    chalk "^2.0.1"
+    "@jest/test-sequencer" "^25.5.4"
+    "@jest/types" "^25.5.0"
+    babel-jest "^25.5.1"
+    chalk "^3.0.0"
+    deepmerge "^4.2.2"
     glob "^7.1.1"
-    jest-environment-jsdom "^24.9.0"
-    jest-environment-node "^24.9.0"
-    jest-get-type "^24.9.0"
-    jest-jasmine2 "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-resolve "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
-    micromatch "^3.1.10"
-    pretty-format "^24.9.0"
-    realpath-native "^1.1.0"
+    graceful-fs "^4.2.4"
+    jest-environment-jsdom "^25.5.0"
+    jest-environment-node "^25.5.0"
+    jest-get-type "^25.2.6"
+    jest-jasmine2 "^25.5.4"
+    jest-regex-util "^25.2.6"
+    jest-resolve "^25.5.1"
+    jest-util "^25.5.0"
+    jest-validate "^25.5.0"
+    micromatch "^4.0.2"
+    pretty-format "^25.5.0"
+    realpath-native "^2.0.0"
 
-jest-diff@*, jest-diff@^24.9.0:
+jest-diff@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
   integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
@@ -18795,81 +18967,76 @@ jest-diff@*, jest-diff@^24.9.0:
     jest-get-type "^24.9.0"
     pretty-format "^24.9.0"
 
-jest-diff@^24.0.0:
-  version "24.0.0"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.0.0.tgz#a3e5f573dbac482f7d9513ac9cfa21644d3d6b34"
-  integrity sha512-XY5wMpRaTsuMoU+1/B2zQSKQ9RdE9gsLkGydx3nvApeyPijLA8GtEvIcPwISRCer+VDf9W1mStTYYq6fPt8ryA==
-  dependencies:
-    chalk "^2.0.1"
-    diff-sequences "^24.0.0"
-    jest-get-type "^24.0.0"
-    pretty-format "^24.0.0"
-
-jest-diff@^25.1.0:
-  version "25.1.0"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.1.0.tgz#58b827e63edea1bc80c1de952b80cec9ac50e1ad"
-  integrity sha512-nepXgajT+h017APJTreSieh4zCqnSHEJ1iT8HDlewu630lSJ4Kjjr9KNzm+kzGwwcpsDE6Snx1GJGzzsefaEHw==
+jest-diff@^25.1.0, jest-diff@^25.2.1, jest-diff@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.5.0.tgz#1dd26ed64f96667c068cef026b677dfa01afcfa9"
+  integrity sha512-z1kygetuPiREYdNIumRpAHY6RXiGmp70YHptjdaxTWGmA085W3iCnXNx0DhflK3vwrKmrRWyY1wUpkPMVxMK7A==
   dependencies:
     chalk "^3.0.0"
-    diff-sequences "^25.1.0"
-    jest-get-type "^25.1.0"
-    pretty-format "^25.1.0"
+    diff-sequences "^25.2.6"
+    jest-get-type "^25.2.6"
+    pretty-format "^25.5.0"
 
-jest-docblock@^24.3.0:
-  version "24.3.0"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-24.3.0.tgz#b9c32dac70f72e4464520d2ba4aec02ab14db5dd"
-  integrity sha512-nlANmF9Yq1dufhFlKG9rasfQlrY7wINJbo3q01tu56Jv5eBU5jirylhF2O5ZBnLxzOVBGRDz/9NAwNyBtG4Nyg==
+jest-docblock@^25.3.0:
+  version "25.3.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-25.3.0.tgz#8b777a27e3477cd77a168c05290c471a575623ef"
+  integrity sha512-aktF0kCar8+zxRHxQZwxMy70stc9R1mOmrLsT5VO3pIT0uzGRSDAXxSlz4NqQWpuLjPpuMhPRl7H+5FRsvIQAg==
   dependencies:
-    detect-newline "^2.1.0"
+    detect-newline "^3.0.0"
 
-jest-each@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-24.9.0.tgz#eb2da602e2a610898dbc5f1f6df3ba86b55f8b05"
-  integrity sha512-ONi0R4BvW45cw8s2Lrx8YgbeXL1oCQ/wIDwmsM3CqM/nlblNCPmnC3IPQlMbRFZu3wKdQ2U8BqM6lh3LJ5Bsog==
+jest-each@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-25.5.0.tgz#0c3c2797e8225cb7bec7e4d249dcd96b934be516"
+  integrity sha512-QBogUxna3D8vtiItvn54xXde7+vuzqRrEeaw8r1s+1TG9eZLVJE5ZkKoSUlqFwRjnlaA4hyKGiu9OlkFIuKnjA==
   dependencies:
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
-    jest-get-type "^24.9.0"
-    jest-util "^24.9.0"
-    pretty-format "^24.9.0"
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
+    jest-get-type "^25.2.6"
+    jest-util "^25.5.0"
+    pretty-format "^25.5.0"
 
-jest-environment-jsdom@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.9.0.tgz#4b0806c7fc94f95edb369a69cc2778eec2b7375b"
-  integrity sha512-Zv9FV9NBRzLuALXjvRijO2351DRQeLYXtpD4xNvfoVFw21IOKNhZAEUKcbiEtjTkm2GsJ3boMVgkaR7rN8qetA==
+jest-environment-jsdom-thirteen@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom-thirteen/-/jest-environment-jsdom-thirteen-1.0.1.tgz#113e3c8aed945dadbc826636fa21139c69567bb5"
+  integrity sha512-Zi7OuKF7HMLlBvomitd5eKp5Ykc4Wvw0d+i+cpbCaE+7kmvL24SO4ssDmKrT++aANXR4T8+pmoJIlav5gr2peQ==
   dependencies:
-    "@jest/environment" "^24.9.0"
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    jest-mock "^24.9.0"
-    jest-util "^24.9.0"
-    jsdom "^11.5.1"
+    jest-mock "^24.0.0"
+    jest-util "^24.0.0"
+    jsdom "^13.0.0"
 
-jest-environment-node@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-24.9.0.tgz#333d2d2796f9687f2aeebf0742b519f33c1cbfd3"
-  integrity sha512-6d4V2f4nxzIzwendo27Tr0aFm+IXWa0XEUnaH6nU0FMaozxovt+sfRvh4J47wL1OvF83I3SSTu0XK+i4Bqe7uA==
+jest-environment-jsdom@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-25.5.0.tgz#dcbe4da2ea997707997040ecf6e2560aec4e9834"
+  integrity sha512-7Jr02ydaq4jaWMZLY+Skn8wL5nVIYpWvmeatOHL3tOcV3Zw8sjnPpx+ZdeBfc457p8jCR9J6YCc+Lga0oIy62A==
   dependencies:
-    "@jest/environment" "^24.9.0"
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    jest-mock "^24.9.0"
-    jest-util "^24.9.0"
+    "@jest/environment" "^25.5.0"
+    "@jest/fake-timers" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    jest-mock "^25.5.0"
+    jest-util "^25.5.0"
+    jsdom "^15.2.1"
 
-jest-get-type@^24.0.0:
-  version "24.0.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.0.0.tgz#36e72930b78e33da59a4f63d44d332188278940b"
-  integrity sha512-z6/Eyf6s9ZDGz7eOvl+fzpuJmN9i0KyTt1no37/dHu8galssxz5ZEgnc1KaV8R31q1khxyhB4ui/X5ZjjPk77w==
+jest-environment-node@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-25.5.0.tgz#0f55270d94804902988e64adca37c6ce0f7d07a1"
+  integrity sha512-iuxK6rQR2En9EID+2k+IBs5fCFd919gVVK5BeND82fYeLWPqvRcFNPKu9+gxTwfB5XwBGBvZ0HFQa+cHtIoslA==
+  dependencies:
+    "@jest/environment" "^25.5.0"
+    "@jest/fake-timers" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    jest-mock "^25.5.0"
+    jest-util "^25.5.0"
+    semver "^6.3.0"
 
 jest-get-type@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
   integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==
 
-jest-get-type@^25.1.0:
-  version "25.1.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.1.0.tgz#1cfe5fc34f148dc3a8a3b7275f6b9ce9e2e8a876"
-  integrity sha512-yWkBnT+5tMr8ANB6V+OjmrIJufHtCAqI5ic2H40v+tRqxDmE0PGnIiTyvRWFOMtmVHYpwRqyazDbTnhpjsGvLw==
+jest-get-type@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.2.6.tgz#0b0a32fab8908b44d508be81681487dbabb8d877"
+  integrity sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig==
 
 jest-haste-map@^24.9.0:
   version "24.9.0"
@@ -18890,45 +19057,56 @@ jest-haste-map@^24.9.0:
   optionalDependencies:
     fsevents "^1.2.7"
 
-jest-jasmine2@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.9.0.tgz#1f7b1bd3242c1774e62acabb3646d96afc3be6a0"
-  integrity sha512-Cq7vkAgaYKp+PsX+2/JbTarrk0DmNhsEtqBXNwUHkdlbrTBLtMJINADf2mf5FkowNsq8evbPc07/qFO0AdKTzw==
+jest-haste-map@^25.5.1:
+  version "25.5.1"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-25.5.1.tgz#1df10f716c1d94e60a1ebf7798c9fb3da2620943"
+  integrity sha512-dddgh9UZjV7SCDQUrQ+5t9yy8iEgKc1AKqZR9YDww8xsVOtzPQSMVLDChc21+g29oTRexb9/B0bIlZL+sWmvAQ==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    "@types/graceful-fs" "^4.1.2"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-serializer "^25.5.0"
+    jest-util "^25.5.0"
+    jest-worker "^25.5.0"
+    micromatch "^4.0.2"
+    sane "^4.0.3"
+    walker "^1.0.7"
+    which "^2.0.2"
+  optionalDependencies:
+    fsevents "^2.1.2"
+
+jest-jasmine2@^25.5.4:
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-25.5.4.tgz#66ca8b328fb1a3c5364816f8958f6970a8526968"
+  integrity sha512-9acbWEfbmS8UpdcfqnDO+uBUgKa/9hcRh983IHdM+pKmJPL77G0sWAAK0V0kr5LK3a8cSBfkFSoncXwQlRZfkQ==
   dependencies:
     "@babel/traverse" "^7.1.0"
-    "@jest/environment" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
+    "@jest/environment" "^25.5.0"
+    "@jest/source-map" "^25.5.0"
+    "@jest/test-result" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
     co "^4.6.0"
-    expect "^24.9.0"
+    expect "^25.5.0"
     is-generator-fn "^2.0.0"
-    jest-each "^24.9.0"
-    jest-matcher-utils "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-snapshot "^24.9.0"
-    jest-util "^24.9.0"
-    pretty-format "^24.9.0"
-    throat "^4.0.0"
-
-jest-leak-detector@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-24.9.0.tgz#b665dea7c77100c5c4f7dfcb153b65cf07dcf96a"
-  integrity sha512-tYkFIDsiKTGwb2FG1w8hX9V0aUb2ot8zY/2nFg087dUageonw1zrLMP4W6zsRO59dPkTSKie+D4rhMuP9nRmrA==
-  dependencies:
-    jest-get-type "^24.9.0"
-    pretty-format "^24.9.0"
-
-jest-matcher-utils@^24.0.0:
-  version "24.0.0"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.0.0.tgz#fc9c41cfc49b2c3ec14e576f53d519c37729d579"
-  integrity sha512-LQTDmO+aWRz1Tf9HJg+HlPHhDh1E1c65kVwRFo5mwCVp5aQDzlkz4+vCvXhOKFjitV2f0kMdHxnODrXVoi+rlA==
+    jest-each "^25.5.0"
+    jest-matcher-utils "^25.5.0"
+    jest-message-util "^25.5.0"
+    jest-runtime "^25.5.4"
+    jest-snapshot "^25.5.1"
+    jest-util "^25.5.0"
+    pretty-format "^25.5.0"
+    throat "^5.0.0"
+
+jest-leak-detector@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-25.5.0.tgz#2291c6294b0ce404241bb56fe60e2d0c3e34f0bb"
+  integrity sha512-rV7JdLsanS8OkdDpZtgBf61L5xZ4NnYLBq72r6ldxahJWWczZjXawRsoHyXzibM5ed7C2QRjpp6ypgwGdKyoVA==
   dependencies:
-    chalk "^2.0.1"
-    jest-diff "^24.0.0"
-    jest-get-type "^24.0.0"
-    pretty-format "^24.0.0"
+    jest-get-type "^25.2.6"
+    pretty-format "^25.5.0"
 
 jest-matcher-utils@^24.9.0:
   version "24.9.0"
@@ -18940,6 +19118,16 @@ jest-matcher-utils@^24.9.0:
     jest-get-type "^24.9.0"
     pretty-format "^24.9.0"
 
+jest-matcher-utils@^25.1.0, jest-matcher-utils@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-25.5.0.tgz#fbc98a12d730e5d2453d7f1ed4a4d948e34b7867"
+  integrity sha512-VWI269+9JS5cpndnpCwm7dy7JtGQT30UHfrnM3mXl22gHGt/b7NkjBqXfbhZ8V4B7ANUsjK18PlSBmG0YH7gjw==
+  dependencies:
+    chalk "^3.0.0"
+    jest-diff "^25.5.0"
+    jest-get-type "^25.2.6"
+    pretty-format "^25.5.0"
+
 jest-message-util@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.9.0.tgz#527f54a1e380f5e202a8d1149b0ec872f43119e3"
@@ -18954,13 +19142,34 @@ jest-message-util@^24.9.0:
     slash "^2.0.0"
     stack-utils "^1.0.1"
 
-jest-mock@^24.9.0:
+jest-message-util@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-25.5.0.tgz#ea11d93204cc7ae97456e1d8716251185b8880ea"
+  integrity sha512-ezddz3YCT/LT0SKAmylVyWWIGYoKHOFOFXx3/nA4m794lfVUskMcwhip6vTgdVrOtYdjeQeis2ypzes9mZb4EA==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@jest/types" "^25.5.0"
+    "@types/stack-utils" "^1.0.1"
+    chalk "^3.0.0"
+    graceful-fs "^4.2.4"
+    micromatch "^4.0.2"
+    slash "^3.0.0"
+    stack-utils "^1.0.1"
+
+jest-mock@^24.0.0, jest-mock@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.9.0.tgz#c22835541ee379b908673ad51087a2185c13f1c6"
   integrity sha512-3BEYN5WbSq9wd+SyLDES7AHnjH9A/ROBwmz7l2y+ol+NtSFO8DYiEBzoO1CeFc9a8DYy10EO4dDFVv/wN3zl1w==
   dependencies:
     "@jest/types" "^24.9.0"
 
+jest-mock@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-25.5.0.tgz#a91a54dabd14e37ecd61665d6b6e06360a55387a"
+  integrity sha512-eXWuTV8mKzp/ovHc5+3USJMYsTBhyQ+5A1Mak35dey/RG8GlM4YWVylZuGgVXinaW6tpvk/RSecmF37FKUlpXA==
+  dependencies:
+    "@jest/types" "^25.5.0"
+
 jest-pnp-resolver@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
@@ -18971,24 +19180,24 @@ jest-raw-loader@^1.0.1:
   resolved "https://registry.yarnpkg.com/jest-raw-loader/-/jest-raw-loader-1.0.1.tgz#ce9f56d54650f157c4a7d16d224ba5d613bcd626"
   integrity sha1-zp9W1UZQ8VfEp9FtIkul1hO81iY=
 
-jest-regex-util@^24.3.0:
-  version "24.3.0"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.3.0.tgz#d5a65f60be1ae3e310d5214a0307581995227b36"
-  integrity sha512-tXQR1NEOyGlfylyEjg1ImtScwMq8Oh3iJbGTjN7p0J23EuVX1MA8rwU69K4sLbCmwzgCUbVkm0FkSF9TdzOhtg==
-
 jest-regex-util@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.9.0.tgz#c13fb3380bde22bf6575432c493ea8fe37965636"
   integrity sha512-05Cmb6CuxaA+Ys6fjr3PhvV3bGQmO+2p2La4hFbU+W5uOc479f7FdLXUWXw4pYMAhhSZIuKHwSXSu6CsSBAXQA==
 
-jest-resolve-dependencies@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.9.0.tgz#ad055198959c4cfba8a4f066c673a3f0786507ab"
-  integrity sha512-Fm7b6AlWnYhT0BXy4hXpactHIqER7erNgIsIozDXWl5dVm+k8XdGVe1oTg1JyaFnOxarMEbax3wyRJqGP2Pq+g==
+jest-regex-util@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-25.2.6.tgz#d847d38ba15d2118d3b06390056028d0f2fd3964"
+  integrity sha512-KQqf7a0NrtCkYmZZzodPftn7fL1cq3GQAFVMn5Hg8uKx/fIenLEobNanUxb7abQ1sjADHBseG/2FGpsv/wr+Qw==
+
+jest-resolve-dependencies@^25.5.4:
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-25.5.4.tgz#85501f53957c8e3be446e863a74777b5a17397a7"
+  integrity sha512-yFmbPd+DAQjJQg88HveObcGBA32nqNZ02fjYmtL16t1xw9bAttSn5UGRRhzMHIQbsep7znWvAvnD4kDqOFM0Uw==
   dependencies:
-    "@jest/types" "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-snapshot "^24.9.0"
+    "@jest/types" "^25.5.0"
+    jest-regex-util "^25.2.6"
+    jest-snapshot "^25.5.1"
 
 jest-resolve@^24.9.0:
   version "24.9.0"
@@ -19001,66 +19210,91 @@ jest-resolve@^24.9.0:
     jest-pnp-resolver "^1.2.1"
     realpath-native "^1.1.0"
 
-jest-runner@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-24.9.0.tgz#574fafdbd54455c2b34b4bdf4365a23857fcdf42"
-  integrity sha512-KksJQyI3/0mhcfspnxxEOBueGrd5E4vV7ADQLT9ESaCzz02WnbdbKWIf5Mkaucoaj7obQckYPVX6JJhgUcoWWg==
+jest-resolve@^25.5.1:
+  version "25.5.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-25.5.1.tgz#0e6fbcfa7c26d2a5fe8f456088dc332a79266829"
+  integrity sha512-Hc09hYch5aWdtejsUZhA+vSzcotf7fajSlPA6EZPE1RmPBAD39XtJhvHWFStid58iit4IPDLI/Da4cwdDmAHiQ==
   dependencies:
-    "@jest/console" "^24.7.1"
-    "@jest/environment" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.4.2"
-    exit "^0.1.2"
-    graceful-fs "^4.1.15"
-    jest-config "^24.9.0"
-    jest-docblock "^24.3.0"
-    jest-haste-map "^24.9.0"
-    jest-jasmine2 "^24.9.0"
-    jest-leak-detector "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-resolve "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-util "^24.9.0"
-    jest-worker "^24.6.0"
-    source-map-support "^0.5.6"
-    throat "^4.0.0"
+    "@jest/types" "^25.5.0"
+    browser-resolve "^1.11.3"
+    chalk "^3.0.0"
+    graceful-fs "^4.2.4"
+    jest-pnp-resolver "^1.2.1"
+    read-pkg-up "^7.0.1"
+    realpath-native "^2.0.0"
+    resolve "^1.17.0"
+    slash "^3.0.0"
 
-jest-runtime@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-24.9.0.tgz#9f14583af6a4f7314a6a9d9f0226e1a781c8e4ac"
-  integrity sha512-8oNqgnmF3v2J6PVRM2Jfuj8oX3syKmaynlDMMKQ4iyzbQzIG6th5ub/lM2bCMTmoTKM3ykcUYI2Pw9xwNtjMnw==
+jest-runner@^25.5.4:
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-25.5.4.tgz#ffec5df3875da5f5c878ae6d0a17b8e4ecd7c71d"
+  integrity sha512-V/2R7fKZo6blP8E9BL9vJ8aTU4TH2beuqGNxHbxi6t14XzTb+x90B3FRgdvuHm41GY8ch4xxvf0ATH4hdpjTqg==
   dependencies:
-    "@jest/console" "^24.7.1"
-    "@jest/environment" "^24.9.0"
-    "@jest/source-map" "^24.3.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/yargs" "^13.0.0"
-    chalk "^2.0.1"
+    "@jest/console" "^25.5.0"
+    "@jest/environment" "^25.5.0"
+    "@jest/test-result" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-config "^25.5.4"
+    jest-docblock "^25.3.0"
+    jest-haste-map "^25.5.1"
+    jest-jasmine2 "^25.5.4"
+    jest-leak-detector "^25.5.0"
+    jest-message-util "^25.5.0"
+    jest-resolve "^25.5.1"
+    jest-runtime "^25.5.4"
+    jest-util "^25.5.0"
+    jest-worker "^25.5.0"
+    source-map-support "^0.5.6"
+    throat "^5.0.0"
+
+jest-runtime@^25.5.4:
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-25.5.4.tgz#dc981fe2cb2137abcd319e74ccae7f7eeffbfaab"
+  integrity sha512-RWTt8LeWh3GvjYtASH2eezkc8AehVoWKK20udV6n3/gC87wlTbE1kIA+opCvNWyyPeBs6ptYsc6nyHUb1GlUVQ==
+  dependencies:
+    "@jest/console" "^25.5.0"
+    "@jest/environment" "^25.5.0"
+    "@jest/globals" "^25.5.2"
+    "@jest/source-map" "^25.5.0"
+    "@jest/test-result" "^25.5.0"
+    "@jest/transform" "^25.5.1"
+    "@jest/types" "^25.5.0"
+    "@types/yargs" "^15.0.0"
+    chalk "^3.0.0"
+    collect-v8-coverage "^1.0.0"
     exit "^0.1.2"
     glob "^7.1.3"
-    graceful-fs "^4.1.15"
-    jest-config "^24.9.0"
-    jest-haste-map "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-mock "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-resolve "^24.9.0"
-    jest-snapshot "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
-    realpath-native "^1.1.0"
-    slash "^2.0.0"
-    strip-bom "^3.0.0"
-    yargs "^13.3.0"
+    graceful-fs "^4.2.4"
+    jest-config "^25.5.4"
+    jest-haste-map "^25.5.1"
+    jest-message-util "^25.5.0"
+    jest-mock "^25.5.0"
+    jest-regex-util "^25.2.6"
+    jest-resolve "^25.5.1"
+    jest-snapshot "^25.5.1"
+    jest-util "^25.5.0"
+    jest-validate "^25.5.0"
+    realpath-native "^2.0.0"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+    yargs "^15.3.1"
 
 jest-serializer@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.9.0.tgz#e6d7d7ef96d31e8b9079a714754c5d5c58288e73"
   integrity sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==
 
-jest-snapshot@^24.1.0, jest-snapshot@^24.9.0:
+jest-serializer@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-25.5.0.tgz#a993f484e769b4ed54e70e0efdb74007f503072b"
+  integrity sha512-LxD8fY1lByomEPflwur9o4e2a5twSQ7TaVNLlFUuToIdoJuBt8tzHfCsZ42Ok6LkKXWzFWf3AGmheuLAA7LcCA==
+  dependencies:
+    graceful-fs "^4.2.4"
+
+jest-snapshot@^24.1.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.9.0.tgz#ec8e9ca4f2ec0c5c87ae8f925cf97497b0e951ba"
   integrity sha512-uI/rszGSs73xCM0l+up7O7a40o90cnrk429LOiK3aeTvfC0HHmldbd81/B7Ix81KSFe1lwkbl7GnBGG4UfuDew==
@@ -19079,6 +19313,27 @@ jest-snapshot@^24.1.0, jest-snapshot@^24.9.0:
     pretty-format "^24.9.0"
     semver "^6.2.0"
 
+jest-snapshot@^25.5.1:
+  version "25.5.1"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-25.5.1.tgz#1a2a576491f9961eb8d00c2e5fd479bc28e5ff7f"
+  integrity sha512-C02JE1TUe64p2v1auUJ2ze5vcuv32tkv9PyhEb318e8XOKF7MOyXdJ7kdjbvrp3ChPLU2usI7Rjxs97Dj5P0uQ==
+  dependencies:
+    "@babel/types" "^7.0.0"
+    "@jest/types" "^25.5.0"
+    "@types/prettier" "^1.19.0"
+    chalk "^3.0.0"
+    expect "^25.5.0"
+    graceful-fs "^4.2.4"
+    jest-diff "^25.5.0"
+    jest-get-type "^25.2.6"
+    jest-matcher-utils "^25.5.0"
+    jest-message-util "^25.5.0"
+    jest-resolve "^25.5.1"
+    make-dir "^3.0.0"
+    natural-compare "^1.4.0"
+    pretty-format "^25.5.0"
+    semver "^6.3.0"
+
 jest-specific-snapshot@2.0.0, jest-specific-snapshot@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/jest-specific-snapshot/-/jest-specific-snapshot-2.0.0.tgz#425fe524b25df154aa39f97fa6fe9726faaac273"
@@ -19093,7 +19348,7 @@ jest-styled-components@^7.0.2:
   dependencies:
     css "^2.2.4"
 
-jest-util@^24.9.0:
+jest-util@^24.0.0, jest-util@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162"
   integrity sha512-x+cZU8VRmOJxbA1K5oDBdxQmdq0OIdADarLxk0Mq+3XS4jgvhG/oKGWcIDCtPG0HgjxOYvF+ilPJQsAyXfbNOg==
@@ -19111,32 +19366,42 @@ jest-util@^24.9.0:
     slash "^2.0.0"
     source-map "^0.6.0"
 
-jest-validate@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.9.0.tgz#0775c55360d173cd854e40180756d4ff52def8ab"
-  integrity sha512-HPIt6C5ACwiqSiwi+OfSSHbK8sG7akG8eATl+IPKaeIjtPOeBUd/g3J7DghugzxrGjI93qS/+RPKe1H6PqvhRQ==
+jest-util@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-25.5.0.tgz#31c63b5d6e901274d264a4fec849230aa3fa35b0"
+  integrity sha512-KVlX+WWg1zUTB9ktvhsg2PXZVdkI1NBevOJSkTKYAyXyH4QSvh+Lay/e/v+bmaFfrkfx43xD8QTfgobzlEXdIA==
   dependencies:
-    "@jest/types" "^24.9.0"
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
+    graceful-fs "^4.2.4"
+    is-ci "^2.0.0"
+    make-dir "^3.0.0"
+
+jest-validate@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-25.5.0.tgz#fb4c93f332c2e4cf70151a628e58a35e459a413a"
+  integrity sha512-okUFKqhZIpo3jDdtUXUZ2LxGUZJIlfdYBvZb1aczzxrlyMlqdnnws9MOxezoLGhSaFc2XYaHNReNQfj5zPIWyQ==
+  dependencies:
+    "@jest/types" "^25.5.0"
     camelcase "^5.3.1"
-    chalk "^2.0.1"
-    jest-get-type "^24.9.0"
+    chalk "^3.0.0"
+    jest-get-type "^25.2.6"
     leven "^3.1.0"
-    pretty-format "^24.9.0"
+    pretty-format "^25.5.0"
 
-jest-watcher@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-24.9.0.tgz#4b56e5d1ceff005f5b88e528dc9afc8dd4ed2b3b"
-  integrity sha512-+/fLOfKPXXYJDYlks62/4R4GoT+GU1tYZed99JSCOsmzkkF7727RqKrjNAxtfO4YpGv11wybgRvCjR73lK2GZw==
+jest-watcher@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-25.5.0.tgz#d6110d101df98badebe435003956fd4a465e8456"
+  integrity sha512-XrSfJnVASEl+5+bb51V0Q7WQx65dTSk7NL4yDdVjPnRNpM0hG+ncFmDYJo9O8jaSRcAitVbuVawyXCRoxGrT5Q==
   dependencies:
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/yargs" "^13.0.0"
-    ansi-escapes "^3.0.0"
-    chalk "^2.0.1"
-    jest-util "^24.9.0"
-    string-length "^2.0.0"
+    "@jest/test-result" "^25.5.0"
+    "@jest/types" "^25.5.0"
+    ansi-escapes "^4.2.1"
+    chalk "^3.0.0"
+    jest-util "^25.5.0"
+    string-length "^3.1.0"
 
-jest-worker@^24.6.0, jest-worker@^24.9.0:
+jest-worker@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
   integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
@@ -19144,7 +19409,7 @@ jest-worker@^24.6.0, jest-worker@^24.9.0:
     merge-stream "^2.0.0"
     supports-color "^6.1.0"
 
-jest-worker@^25.4.0:
+jest-worker@^25.4.0, jest-worker@^25.5.0:
   version "25.5.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-25.5.0.tgz#2611d071b79cea0f43ee57a3d118593ac1547db1"
   integrity sha512-/dsSmUkIy5EBGfv/IjjqmFxrNAUpBERfGs1oHROyD7yxjG/w+t0GOJDX8O1k32ySmd7+a5IhnJU2qQFcJ4n1vw==
@@ -19152,13 +19417,14 @@ jest-worker@^25.4.0:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
-jest@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-24.9.0.tgz#987d290c05a08b52c56188c1002e368edb007171"
-  integrity sha512-YvkBL1Zm7d2B1+h5fHEOdyjCG+sGMz4f8D86/0HiqJ6MB4MnDc8FgP5vdWsGnemOQro7lnYo8UakZ3+5A0jxGw==
+jest@^25.5.4:
+  version "25.5.4"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-25.5.4.tgz#f21107b6489cfe32b076ce2adcadee3587acb9db"
+  integrity sha512-hHFJROBTqZahnO+X+PMtT6G2/ztqAZJveGqz//FnWWHurizkD05PQGzRZOhF3XP6z7SJmL+5tCfW8qV06JypwQ==
   dependencies:
-    import-local "^2.0.0"
-    jest-cli "^24.9.0"
+    "@jest/core" "^25.5.4"
+    import-local "^3.0.2"
+    jest-cli "^25.5.4"
 
 jimp@^0.9.6:
   version "0.9.6"
@@ -19254,35 +19520,37 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
-jsdom@^11.5.1:
-  version "11.5.1"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.5.1.tgz#5df753b8d0bca20142ce21f4f6c039f99a992929"
-  integrity sha512-89ztIZ03aYK9f1uUrLXLsZndRge/JnZjzjpaN+lrse3coqz+8PR/dX4WLHpbF5fIKTXhDjFODOJw2328lPJ90g==
+jsdom@13.1.0, jsdom@^13.0.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-13.1.0.tgz#fa7356f0cc8111d0f1077cb7800d06f22f1d66c7"
+  integrity sha512-C2Kp0qNuopw0smXFaHeayvharqF3kkcNqlcIlSX71+3XrsOFwkEPLt/9f5JksMmaul2JZYIQuY+WTpqHpQQcLg==
   dependencies:
-    abab "^1.0.3"
-    acorn "^5.1.2"
-    acorn-globals "^4.0.0"
+    abab "^2.0.0"
+    acorn "^6.0.4"
+    acorn-globals "^4.3.0"
     array-equal "^1.0.0"
-    browser-process-hrtime "^0.1.2"
-    content-type-parser "^1.0.1"
-    cssom ">= 0.3.2 < 0.4.0"
-    cssstyle ">= 0.2.37 < 0.3.0"
-    domexception "^1.0.0"
-    escodegen "^1.9.0"
-    html-encoding-sniffer "^1.0.1"
-    left-pad "^1.2.0"
-    nwmatcher "^1.4.3"
-    parse5 "^3.0.2"
-    pn "^1.0.0"
-    request "^2.83.0"
-    request-promise-native "^1.0.3"
-    sax "^1.2.1"
-    symbol-tree "^3.2.1"
-    tough-cookie "^2.3.3"
+    cssom "^0.3.4"
+    cssstyle "^1.1.1"
+    data-urls "^1.1.0"
+    domexception "^1.0.1"
+    escodegen "^1.11.0"
+    html-encoding-sniffer "^1.0.2"
+    nwsapi "^2.0.9"
+    parse5 "5.1.0"
+    pn "^1.1.0"
+    request "^2.88.0"
+    request-promise-native "^1.0.5"
+    saxes "^3.1.4"
+    symbol-tree "^3.2.2"
+    tough-cookie "^2.5.0"
+    w3c-hr-time "^1.0.1"
+    w3c-xmlserializer "^1.0.1"
     webidl-conversions "^4.0.2"
-    whatwg-encoding "^1.0.1"
-    whatwg-url "^6.3.0"
-    xml-name-validator "^2.0.1"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^7.0.0"
+    ws "^6.1.2"
+    xml-name-validator "^3.0.0"
 
 jsdom@^15.2.1:
   version "15.2.1"
@@ -19965,11 +20233,6 @@ leaflet@1.5.1:
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.5.1.tgz#9afb9d963d66c870066b1342e7a06f92840f46bf"
   integrity sha512-ekM9KAeG99tYisNBg0IzEywAlp0hYI5XRipsqRXyRTeuU8jcuntilpp+eFf5gaE0xubc9RuSNIVtByEKwqFV0w==
 
-left-pad@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.2.0.tgz#d30a73c6b8201d8f7d8e7956ba9616087a68e0ee"
-  integrity sha1-0wpzxrggHY99jnlWupYWCHpo4O4=
-
 less-loader@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-5.0.0.tgz#498dde3a6c6c4f887458ee9ed3f086a12ad1b466"
@@ -20608,7 +20871,7 @@ lodash.uniqby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302"
   integrity sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=
 
-lodash@4.17.11, lodash@4.17.15, lodash@>4.17.4, lodash@^4, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.10.0, lodash@^4.11.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1, lodash@~4.17.10, lodash@~4.17.15, lodash@~4.17.5:
+lodash@4.17.11, lodash@4.17.15, lodash@>4.17.4, lodash@^4, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.10.0, lodash@^4.11.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1, lodash@~4.17.10, lodash@~4.17.15, lodash@~4.17.5:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -20704,11 +20967,18 @@ loglevelnext@^1.0.1:
     es6-symbol "^3.1.1"
     object.assign "^4.1.0"
 
-lolex@^4.1.0, lolex@^4.2.0:
+lolex@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lolex/-/lolex-4.2.0.tgz#ddbd7f6213ca1ea5826901ab1222b65d714b3cd7"
   integrity sha512-gKO5uExCXvSm6zbF562EvM+rd1kQDnB9AZBbiQVzf1ZmdDpxUSvpnAaVOP83N/31mRK8Ml8/VE8DMvsAZQ+7wg==
 
+lolex@^5.0.0, lolex@^5.0.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/lolex/-/lolex-5.1.2.tgz#953694d098ce7c07bc5ed6d0e42bc6c0c6d5a367"
+  integrity sha512-h4hmjAvHTmd+25JSwrtTIuwbKdwg5NzZVRMLn9saij4SZaepCrTCxPr35H/3bjwfMJtN+t3CX8672UIkglz28A==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
 long@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
@@ -20854,7 +21124,7 @@ majo@^0.4.1:
     globby "^6.1.0"
     ware "^1.3.0"
 
-make-dir@^1.0.0, make-dir@^1.3.0:
+make-dir@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
   integrity sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==
@@ -21909,7 +22179,7 @@ nan@^2.12.1, nan@^2.13.2:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
-nan@^2.14.1:
+nan@^2.14.0, nan@^2.14.1:
   version "2.14.1"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
@@ -21974,6 +22244,15 @@ nearley@^2.7.10:
     randexp "0.4.6"
     semver "^5.4.1"
 
+needle@^2.2.1:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-2.5.0.tgz#e6fc4b3cc6c25caed7554bd613a5cf0bac8c31c0"
+  integrity sha512-o/qITSDR0JCyCKEQ1/1bnUXMmznxabbwi/Y4WwJElf+evwJNFNwIDMCCt5IigFVxgeGBJESLohGtIS9gEzo1fA==
+  dependencies:
+    debug "^3.2.6"
+    iconv-lite "^0.4.4"
+    sax "^1.2.4"
+
 negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
@@ -22060,14 +22339,14 @@ nigel@3.x.x:
     vise "3.x.x"
 
 nise@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/nise/-/nise-1.5.2.tgz#b6d29af10e48b321b307e10e065199338eeb2652"
-  integrity sha512-/6RhOUlicRCbE9s+94qCUsyE+pKlVJ5AhIv+jEE7ESKwnbXqulKZ1FYU+XAtHHWE9TinYvAxDUJAb912PwPoWA==
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/nise/-/nise-1.5.3.tgz#9d2cfe37d44f57317766c6e9408a359c5d3ac1f7"
+  integrity sha512-Ymbac/94xeIrMf59REBPOv0thr+CJVFMhrlAkW/gjCIE58BGQdCj0x7KRCb3yz+Ga2Rz3E9XXSvUyyxqqhjQAQ==
   dependencies:
     "@sinonjs/formatio" "^3.2.1"
     "@sinonjs/text-encoding" "^0.7.1"
     just-extend "^4.0.2"
-    lolex "^4.1.0"
+    lolex "^5.0.1"
     path-to-regexp "^1.7.0"
 
 no-case@^2.2.0, no-case@^2.3.2:
@@ -22264,16 +22543,32 @@ node-modules-regexp@^1.0.0:
   resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
   integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
 
-node-notifier@^5.4.2:
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.3.tgz#cb72daf94c93904098e28b9c590fd866e464bd50"
-  integrity sha512-M4UBGcs4jeOK9CjTsYwkvH6/MzuUmGCyTW+kCY7uO+1ZVr0+FHGdPdIf5CCLqAaxnRrWidyoQlNkMIIVwbKB8Q==
+node-notifier@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-6.0.0.tgz#cea319e06baa16deec8ce5cd7f133c4a46b68e12"
+  integrity sha512-SVfQ/wMw+DesunOm5cKqr6yDcvUTDl/yc97ybGHMrteNEY6oekXpNpS3lZwgLlwz0FLgHoiW28ZpmBHUDg37cw==
   dependencies:
     growly "^1.3.0"
-    is-wsl "^1.1.0"
-    semver "^5.5.0"
+    is-wsl "^2.1.1"
+    semver "^6.3.0"
     shellwords "^0.1.1"
-    which "^1.3.0"
+    which "^1.3.1"
+
+node-pre-gyp@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.11.0.tgz#db1f33215272f692cd38f03238e3e9b47c5dd054"
+  integrity sha512-TwWAOZb0j7e9eGaf9esRx3ZcLaE5tQ2lvYy1pb5IAaG1a2e2Kv5Lms1Y4hpj+ciXJRofIxxlt5haeQ/2ANeE0Q==
+  dependencies:
+    detect-libc "^1.0.2"
+    mkdirp "^0.5.1"
+    needle "^2.2.1"
+    nopt "^4.0.1"
+    npm-packlist "^1.1.6"
+    npmlog "^4.0.2"
+    rc "^1.2.7"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^4"
 
 node-preload@^0.2.1:
   version "0.2.1"
@@ -22467,6 +22762,13 @@ now-and-later@^2.0.0:
   dependencies:
     once "^1.3.2"
 
+npm-bundled@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"
+  integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==
+  dependencies:
+    npm-normalize-package-bin "^1.0.1"
+
 npm-conf@^1.1.0, npm-conf@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/npm-conf/-/npm-conf-1.1.3.tgz#256cc47bd0e218c259c4e9550bf413bc2192aff9"
@@ -22483,6 +22785,20 @@ npm-keyword@^5.0.0:
     got "^7.1.0"
     registry-url "^3.0.3"
 
+npm-normalize-package-bin@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
+  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
+
+npm-packlist@^1.1.6:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
+  integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
+  dependencies:
+    ignore-walk "^3.0.1"
+    npm-bundled "^1.0.1"
+    npm-normalize-package-bin "^1.0.1"
+
 npm-run-path@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-1.0.0.tgz#f5c32bf595fe81ae927daec52e82f8b000ac3c8f"
@@ -22520,7 +22836,7 @@ npmconf@^2.1.3:
     semver "2 || 3 || 4"
     uid-number "0.0.5"
 
-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.1.2:
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2, npmlog@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -22574,12 +22890,7 @@ numeral@^2.0.6:
   resolved "https://registry.yarnpkg.com/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506"
   integrity sha1-StCAk21EPCVhrtnyGX7//iX05QY=
 
-nwmatcher@^1.4.3:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.4.tgz#2285631f34a95f0d0395cd900c96ed39b58f346e"
-  integrity sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ==
-
-nwsapi@^2.2.0:
+nwsapi@^2.0.9, nwsapi@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
   integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
@@ -23148,12 +23459,10 @@ p-defer@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
   integrity sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=
 
-p-each-series@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
-  integrity sha1-kw89Et0fUOdDRFeiLNbwSsatf3E=
-  dependencies:
-    p-reduce "^1.0.0"
+p-each-series@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.1.0.tgz#961c8dd3f195ea96c747e636b262b800a6b1af48"
+  integrity sha512-ZuRs1miPT4HrjFa+9fRfOFXxGJfORgelKV9f9nNOWw2gl6gVsRaVDOQP0+MI0G0wGKns1Yacsu0GjOFbTK0JFQ==
 
 p-event@^4.0.0, p-event@^4.1.0:
   version "4.1.0"
@@ -23167,6 +23476,11 @@ p-finally@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
   integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
 
+p-finally@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-2.0.1.tgz#bd6fcaa9c559a096b680806f4d657b3f0f240561"
+  integrity sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==
+
 p-is-promise@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-1.1.0.tgz#9c9456989e9f6588017b0434d56097675c3da05e"
@@ -23236,11 +23550,6 @@ p-map@^4.0.0:
   dependencies:
     aggregate-error "^3.0.0"
 
-p-reduce@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
-  integrity sha1-GMKw3ZNqRpClKfgjH1ig/bakffo=
-
 p-retry@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-3.0.1.tgz#316b4c8893e2c8dc1cfa891f406c4b422bebf328"
@@ -23535,18 +23844,13 @@ parse5@5.1.0, parse5@^5.0.0:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
   integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==
 
-parse5@^3.0.1, parse5@^3.0.2:
+parse5@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
   integrity sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==
   dependencies:
     "@types/node" "*"
 
-parse5@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
-  integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==
-
 parseqs@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
@@ -23893,7 +24197,7 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
-pkg-dir@^4.1.0:
+pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
   integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
@@ -23951,7 +24255,7 @@ pluralize@^7.0.0:
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
   integrity sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==
 
-pn@^1.0.0, pn@^1.1.0:
+pn@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
@@ -24218,16 +24522,6 @@ pretty-error@^2.1.1:
     renderkid "^2.0.1"
     utila "~0.4"
 
-pretty-format@^24.0.0:
-  version "24.8.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.8.0.tgz#8dae7044f58db7cb8be245383b565a963e3c27f2"
-  integrity sha512-P952T7dkrDEplsR+TuY7q3VXDae5Sr7zmQb12JU/NDQa/3CH7/QW0yvqLcGN6jL+zQFKaoJcPc+yJxMTGmosqw==
-  dependencies:
-    "@jest/types" "^24.8.0"
-    ansi-regex "^4.0.0"
-    ansi-styles "^3.2.0"
-    react-is "^16.8.4"
-
 pretty-format@^24.3.0, pretty-format@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
@@ -24238,12 +24532,12 @@ pretty-format@^24.3.0, pretty-format@^24.9.0:
     ansi-styles "^3.2.0"
     react-is "^16.8.4"
 
-pretty-format@^25.1.0:
-  version "25.1.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.1.0.tgz#ed869bdaec1356fc5ae45de045e2c8ec7b07b0c8"
-  integrity sha512-46zLRSGLd02Rp+Lhad9zzuNZ+swunitn8zIpfD2B4OPCRLXbM87RJT2aBLBWYOznNUML/2l/ReMyWNC80PJBUQ==
+pretty-format@^25.2.1, pretty-format@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.5.0.tgz#7873c1d774f682c34b8d48b6743a2bf2ac55791a"
+  integrity sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==
   dependencies:
-    "@jest/types" "^25.1.0"
+    "@jest/types" "^25.5.0"
     ansi-regex "^5.0.0"
     ansi-styles "^4.0.0"
     react-is "^16.12.0"
@@ -26010,6 +26304,11 @@ realpath-native@^1.1.0:
   dependencies:
     util.promisify "^1.0.0"
 
+realpath-native@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-2.0.0.tgz#7377ac429b6e1fd599dc38d08ed942d0d7beb866"
+  integrity sha512-v1SEYUOXXdbBZK8ZuNgO4TBjamPsiSgcFr0aP+tEKpQZK8vooEUqV6nm6Cv502mX4NF2EfsnVqtNAHG+/6Ur1Q==
+
 recast@^0.14.7:
   version "0.14.7"
   resolved "https://registry.yarnpkg.com/recast/-/recast-0.14.7.tgz#4f1497c2b5826d42a66e8e3c9d80c512983ff61d"
@@ -26513,13 +26812,6 @@ request-progress@3.0.0:
   dependencies:
     throttleit "^1.0.0"
 
-request-promise-core@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.1.tgz#3eee00b2c5aa83239cfb04c5700da36f81cd08b6"
-  integrity sha1-Pu4AssWqgyOc+wTFcA2jb4HNCLY=
-  dependencies:
-    lodash "^4.13.1"
-
 request-promise-core@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.2.tgz#339f6aababcafdb31c799ff158700336301d3346"
@@ -26534,16 +26826,7 @@ request-promise-core@1.1.3:
   dependencies:
     lodash "^4.17.15"
 
-request-promise-native@^1.0.3:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.5.tgz#5281770f68e0c9719e5163fd3fab482215f4fda5"
-  integrity sha1-UoF3D2jgyXGeUWP9P6tIIhX0/aU=
-  dependencies:
-    request-promise-core "1.1.1"
-    stealthy-require "^1.1.0"
-    tough-cookie ">=2.3.3"
-
-request-promise-native@^1.0.7:
+request-promise-native@^1.0.5, request-promise-native@^1.0.7:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.8.tgz#a455b960b826e44e2bf8999af64dff2bfe58cb36"
   integrity sha512-dapwLGqkHtwL5AEbfenuzjTYg35Jd6KPytsC2/TLkVMz8rm+tNt72MGUWT1RP/aYawMpN6HqbNGBQaRcBtjQMQ==
@@ -26616,7 +26899,7 @@ request@2.88.0, request@^2.88.0:
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
-request@^2.74.0, request@^2.83.0:
+request@^2.74.0:
   version "2.83.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
   integrity sha512-lR3gD69osqm6EYLk9wB/G1W/laGWjzH90t1vEa2xuxHD5KUrSzp9pUSfTm+YC5Nxt2T8nMPEvKlhbQayU7bgFw==
@@ -26779,6 +27062,13 @@ resolve-cwd@^2.0.0:
   dependencies:
     resolve-from "^3.0.0"
 
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
 resolve-dependency-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-dependency-path/-/resolve-dependency-path-2.0.0.tgz#11700e340717b865d216c66cabeb4a2a3c696736"
@@ -26871,7 +27161,7 @@ resolve@1.8.1:
   dependencies:
     path-parse "^1.0.5"
 
-resolve@^1.1.10, resolve@^1.1.5, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0, resolve@^1.7.1, resolve@^1.8.1:
+resolve@^1.1.10, resolve@^1.1.5, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0, resolve@^1.7.1, resolve@^1.8.1:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
   integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
@@ -27179,17 +27469,17 @@ rx@^4.1.0:
   resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
   integrity sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=
 
-rxjs-marbles@^5.0.3:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/rxjs-marbles/-/rxjs-marbles-5.0.3.tgz#d3ca62a4e02d032b1b4ffd558e93336ad78fd100"
-  integrity sha512-JK6EvLe9uReJxBmUgdKrpMB2JswV+fDcKDg97x20LErLQ7Gi0FG3YEr2Uq9hvgHJjgZXGCvonpzcxARLzKsT4A==
+rxjs-marbles@^5.0.6:
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/rxjs-marbles/-/rxjs-marbles-5.0.6.tgz#e8e71df3b82b49603555f017f2fd3d8c359c4c24"
+  integrity sha512-VEcWhSR2QwgmpOh4iL/8BtSqXwnfSsM9JjCVVG/NXbHOuPIzLQ/RJpgvdt0eHixP5mjLof2VODVR62XRCdOqgA==
   dependencies:
     fast-equals "^2.0.0"
 
-rxjs@6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.2.tgz#2e35ce815cd46d84d02a209fb4e5921e051dbec7"
-  integrity sha512-HUb7j3kvb7p7eCUHE3FqjoDsC1xfZQ4AHFWfTKSpZ+sAhhz5X1WX0ZuUqWbzB2QhSLp3DoLUG+hMdEDKqWo2Zg==
+rxjs@6.5.5, rxjs@^6.5.3, rxjs@^6.5.5:
+  version "6.5.5"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.5.tgz#c5c884e3094c8cfee31bf27eb87e54ccfc87f9ec"
+  integrity sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==
   dependencies:
     tslib "^1.9.0"
 
@@ -27200,7 +27490,7 @@ rxjs@^5.5.2:
   dependencies:
     symbol-observable "1.0.1"
 
-rxjs@^6.1.0, rxjs@^6.3.3, rxjs@^6.4.0, rxjs@^6.5.1, rxjs@^6.5.3:
+rxjs@^6.1.0, rxjs@^6.3.3, rxjs@^6.4.0, rxjs@^6.5.1:
   version "6.5.3"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.3.tgz#510e26317f4db91a7eb1de77d9dd9ba0a4899a3a"
   integrity sha512-wuYsAYYFdWTAnAaPoKGNhfpWwKZbJW+HgAJ+mImp+Epl7BG8oNWBCTyRM8gba9k4lk8BgWdoYm21Mo/RYhhbgA==
@@ -27352,12 +27642,12 @@ sass-resources-loader@^2.0.1:
     glob "^7.1.1"
     loader-utils "^1.0.4"
 
-sax@>=0.6.0, sax@^1.2.1, sax@~1.2.4:
+sax@>=0.6.0, sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-saxes@^3.1.9:
+saxes@^3.1.4, saxes@^3.1.9:
   version "3.1.11"
   resolved "https://registry.yarnpkg.com/saxes/-/saxes-3.1.11.tgz#d59d1fd332ec92ad98a2e0b2ee644702384b1c5b"
   integrity sha512-Ydydq3zC+WYDJK1+gRxRapLIED9PWeSuuS41wqyoRmzvhhh9nc+QQrVMKJYzJFULazeGhzSV0QleN2wD3boh2g==
@@ -27862,6 +28152,20 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
   integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
 
+simple-concat@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/simple-concat/-/simple-concat-1.0.0.tgz#7344cbb8b6e26fb27d66b2fc86f9f6d5997521c6"
+  integrity sha1-c0TLuLbib7J9ZrL8hvn21Zl1IcY=
+
+simple-get@^3.0.3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-3.1.0.tgz#b45be062435e50d159540b576202ceec40b9c6b3"
+  integrity sha512-bCR6cP+aTdScaQCnQKbPKtJOKDp/hj9EDLJo3Nw4y1QksqaovlW/bnptB6/c1e+qmNIDHRK+oXFDdEqBT8WzUA==
+  dependencies:
+    decompress-response "^4.2.0"
+    once "^1.3.1"
+    simple-concat "^1.0.0"
+
 simple-git@1.116.0:
   version "1.116.0"
   resolved "https://registry.yarnpkg.com/simple-git/-/simple-git-1.116.0.tgz#ea6e533466f1e0152186e306e004d4eefa6e3e00"
@@ -27917,9 +28221,9 @@ simplify-js@^1.2.1:
   integrity sha512-0IkEqs+5c5vROkHaifGfbqHf5tYDcsTBy6oJPRbFCSwp2uzEr+PpH3dNP7wD8O3d7zdUCjLVq1/xHkwA/JjlFA==
 
 sinon@^7.4.2:
-  version "7.4.2"
-  resolved "https://registry.yarnpkg.com/sinon/-/sinon-7.4.2.tgz#ecd54158fef2fcfbdb231a3fa55140e8cb02ad6c"
-  integrity sha512-pY5RY99DKelU3pjNxcWo6XqeB1S118GBcVIIdDi6V+h6hevn1izcg2xv1hTHW/sViRXU7sUOxt4wTUJ3gsW2CQ==
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/sinon/-/sinon-7.5.0.tgz#e9488ea466070ea908fd44a3d6478fd4923c67ec"
+  integrity sha512-AoD0oJWerp0/rY9czP/D6hDTTUYGpObhZjMpd7Cl/A6+j0xBE+ayL/ldfggkBXUs0IkvIiM1ljM8+WkOc5k78Q==
   dependencies:
     "@sinonjs/commons" "^1.4.0"
     "@sinonjs/formatio" "^3.2.1"
@@ -28186,11 +28490,16 @@ source-map@^0.4.2:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.6:
+source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
+source-map@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
 source-map@~0.1.30:
   version "0.1.43"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
@@ -28559,7 +28868,7 @@ stdout-stream@^1.4.0:
   dependencies:
     readable-stream "^2.0.1"
 
-stealthy-require@^1.1.0, stealthy-require@^1.1.1:
+stealthy-require@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
   integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
@@ -28656,6 +28965,14 @@ string-length@^2.0.0:
     astral-regex "^1.0.0"
     strip-ansi "^4.0.0"
 
+string-length@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-3.1.0.tgz#107ef8c23456e187a8abd4a61162ff4ac6e25837"
+  integrity sha512-Ttp5YvkGm5v9Ijagtaz1BnN+k9ObpvS0eIBblPMp2YWL8FBmi9qblQ9fexc2k/CXFgrTIteU3jAw3payCnwSTA==
+  dependencies:
+    astral-regex "^1.0.0"
+    strip-ansi "^5.2.0"
+
 string-replace-loader@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/string-replace-loader/-/string-replace-loader-2.2.0.tgz#0a0e6543fcec783d85c353a3e96a23872d45a94f"
@@ -29079,7 +29396,7 @@ supports-color@6.0.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@6.1.0, supports-color@^6.0.0, supports-color@^6.1.0:
+supports-color@6.1.0, supports-color@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
   integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
@@ -29206,7 +29523,7 @@ symbol-observable@^1.0.2, symbol-observable@^1.0.3, symbol-observable@^1.0.4, sy
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
 
-symbol-tree@^3.2.1, symbol-tree@^3.2.2:
+symbol-tree@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
   integrity sha1-rifbOPZgp64uHDt9G8KQgZuFGeY=
@@ -29382,7 +29699,7 @@ tar-stream@^2.1.0:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
-tar@4.4.13, tar@^4.4.12:
+tar@4.4.13, tar@^4, tar@^4.4.12:
   version "4.4.13"
   resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
   integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
@@ -29499,7 +29816,7 @@ term-size@^2.1.0:
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.0.tgz#1f16adedfe9bdc18800e1776821734086fcc6753"
   integrity sha512-a6sumDlzyHVJWb8+YofY4TW112G6p2FCPEAFk+59gIYHv3XHRhm9ltVQ9kli4hNWeQBwSpe8cRN25x0ROunMOw==
 
-terminal-link@^2.1.1:
+terminal-link@^2.0.0, terminal-link@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"
   integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
@@ -29589,10 +29906,10 @@ thread-loader@^2.1.3:
     loader-utils "^1.1.0"
     neo-async "^2.6.0"
 
-throat@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
-  integrity sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=
+throat@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
+  integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==
 
 throttle-debounce@^2.1.0:
   version "2.1.0"
@@ -29974,7 +30291,7 @@ touch@^3.1.0:
   dependencies:
     nopt "~1.0.10"
 
-tough-cookie@>=2.3.3, tough-cookie@^2.0.0, tough-cookie@^2.3.3, tough-cookie@~2.4.3:
+tough-cookie@^2.0.0, tough-cookie@^2.3.3, tough-cookie@~2.4.3:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"
   integrity sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==
@@ -29982,6 +30299,14 @@ tough-cookie@>=2.3.3, tough-cookie@^2.0.0, tough-cookie@^2.3.3, tough-cookie@~2.
     psl "^1.1.24"
     punycode "^1.4.1"
 
+tough-cookie@^2.5.0, tough-cookie@~2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
+  integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
+  dependencies:
+    psl "^1.1.28"
+    punycode "^2.1.1"
+
 tough-cookie@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-3.0.1.tgz#9df4f57e739c26930a018184887f4adb7dca73b2"
@@ -29998,15 +30323,7 @@ tough-cookie@~2.3.0, tough-cookie@~2.3.3:
   dependencies:
     punycode "^1.4.1"
 
-tough-cookie@~2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
-  integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
-  dependencies:
-    psl "^1.1.28"
-    punycode "^2.1.1"
-
-tr46@^1.0.0, tr46@^1.0.1:
+tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
   integrity sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=
@@ -31474,6 +31791,15 @@ v8-compile-cache@^2.0.3:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
   integrity sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g==
 
+v8-to-istanbul@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-4.1.3.tgz#22fe35709a64955f49a08a7c7c959f6520ad6f20"
+  integrity sha512-sAjOC+Kki6aJVbUOXJbcR0MnbfjvBzwKZazEJymA2IX49uoOdEdk+4fBq5cXgYgiyKtAyrrJNtBZdOeDIF+Fng==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+    source-map "^0.7.3"
+
 v8flags@^3.0.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-3.1.3.tgz#fc9dc23521ca20c5433f81cc4eb9b3033bb105d8"
@@ -32116,7 +32442,7 @@ w3c-hr-time@^1.0.1:
   dependencies:
     browser-process-hrtime "^0.1.2"
 
-w3c-xmlserializer@^1.1.2:
+w3c-xmlserializer@^1.0.1, w3c-xmlserializer@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz#30485ca7d70a6fd052420a3d12fd90e6339ce794"
   integrity sha512-p10l/ayESzrBMYWRID6xbuCKh2Fp77+sA0doRuGn4tTIMrrZVeqfpKjXHY+oDh3K4nLdPgNwMTVP6Vp4pvqbNg==
@@ -32212,7 +32538,7 @@ web-namespaces@^1.1.2:
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.2.tgz#c8dc267ab639505276bae19e129dbd6ae72b22b4"
   integrity sha512-II+n2ms4mPxK+RnIxRPOw3zwF2jRscdJIUE9BfkKHm4FYEg9+biIoTMnaZF5MpemE3T+VhMLrhbyD4ilkPCSbg==
 
-webidl-conversions@^4.0.1, webidl-conversions@^4.0.2:
+webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
@@ -32421,15 +32747,6 @@ whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
   integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
 
-whatwg-url@^6.3.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.4.0.tgz#08fdf2b9e872783a7a1f6216260a1d66cc722e08"
-  integrity sha512-Z0CVh/YE217Foyb488eo+iBv+r7eAQ0wSTyApi9n06jhcA3z6Nidg/EGvl0UFkg7kMdKxfBzzr+o9JF+cevgMg==
-  dependencies:
-    lodash.sortby "^4.7.0"
-    tr46 "^1.0.0"
-    webidl-conversions "^4.0.1"
-
 whatwg-url@^6.5.0:
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.5.0.tgz#f2df02bff176fd65070df74ad5ccbb5a199965a8"
@@ -32465,7 +32782,7 @@ which@1, which@1.3.1, which@^1.2.9, which@^1.3.1, which@~1.3.0:
   dependencies:
     isexe "^2.0.0"
 
-which@^1.1.1, which@^1.2.1, which@^1.2.14, which@^1.2.8, which@^1.3.0:
+which@^1.1.1, which@^1.2.1, which@^1.2.14, which@^1.2.8:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
   integrity sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==
@@ -32479,6 +32796,13 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+which@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
 wide-align@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
@@ -32761,7 +33085,7 @@ ws@^6.1.0:
   dependencies:
     async-limiter "~1.0.0"
 
-ws@^6.2.1:
+ws@^6.1.2, ws@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
   integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
@@ -32834,11 +33158,6 @@ xml-crypto@^1.4.0:
     xmldom "0.1.27"
     xpath "0.0.27"
 
-xml-name-validator@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635"
-  integrity sha1-TYuPHszTQZqjYgYb7O9RXh5VljU=
-
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"