From fd464bec4d6aed0a95266f8c5ecfa3c5ea06fcb3 Mon Sep 17 00:00:00 2001
From: Michael Olorunnisola <michael.olorunnisola@elastic.co>
Date: Thu, 17 Dec 2020 18:21:58 -0500
Subject: [PATCH 01/75] [Security Solution][Analyze Event] Fix refresh infinite
 loop (#86194)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../resolver/mocks/tree_fetcher_parameters.ts |   1 -
 .../public/resolver/models/node_data.test.ts  |  52 +++---
 .../public/resolver/models/node_data.ts       |  15 +-
 .../models/tree_fetcher_parameters.test.ts    |  25 +--
 .../models/tree_fetcher_parameters.ts         |   1 -
 .../public/resolver/store/data/action.ts      |   9 +-
 .../data/node_events_in_category_model.ts     |   1 -
 .../public/resolver/store/data/reducer.ts     |  19 +-
 .../resolver/store/data/selectors.test.ts     | 162 ++----------------
 .../public/resolver/store/data/selectors.ts   |  72 +-------
 .../current_related_event_fetcher.ts          |  13 +-
 .../store/middleware/node_data_fetcher.ts     |   4 -
 .../middleware/related_events_fetcher.ts      |  14 +-
 .../store/middleware/resolver_tree_fetcher.ts |  21 +++
 .../public/resolver/store/selectors.ts        |  23 +--
 .../public/resolver/types.ts                  |  22 ---
 .../resolver/view/clickthrough.test.tsx       |   2 +-
 .../public/resolver/view/index.tsx            |  12 +-
 .../view/panels/node_events_of_type.test.tsx  |   3 +-
 .../view/resolver_without_providers.tsx       |  78 +++++----
 .../public/resolver/view/submenu.tsx          |  93 ++++++----
 ...se_related_event_by_category_navigation.ts |  37 ----
 22 files changed, 195 insertions(+), 484 deletions(-)
 delete mode 100644 x-pack/plugins/security_solution/public/resolver/view/use_related_event_by_category_navigation.ts

diff --git a/x-pack/plugins/security_solution/public/resolver/mocks/tree_fetcher_parameters.ts b/x-pack/plugins/security_solution/public/resolver/mocks/tree_fetcher_parameters.ts
index 7e473c8f81a844..4894e72efa3006 100644
--- a/x-pack/plugins/security_solution/public/resolver/mocks/tree_fetcher_parameters.ts
+++ b/x-pack/plugins/security_solution/public/resolver/mocks/tree_fetcher_parameters.ts
@@ -13,7 +13,6 @@ export function mockTreeFetcherParameters(): TreeFetcherParameters {
   return {
     databaseDocumentID: '',
     indices: [],
-    dataRequestID: 0,
     filters: {},
   };
 }
diff --git a/x-pack/plugins/security_solution/public/resolver/models/node_data.test.ts b/x-pack/plugins/security_solution/public/resolver/models/node_data.test.ts
index 89d533312d502e..b74c391678f83d 100644
--- a/x-pack/plugins/security_solution/public/resolver/models/node_data.test.ts
+++ b/x-pack/plugins/security_solution/public/resolver/models/node_data.test.ts
@@ -19,11 +19,11 @@ describe('node data model', () => {
     const original: Map<string, NodeData> = new Map();
 
     it('creates a copy when using setRequestedNodes', () => {
-      expect(setRequestedNodes(original, new Set(), 0) === original).toBeFalsy();
+      expect(setRequestedNodes(original, new Set()) === original).toBeFalsy();
     });
 
     it('creates a copy when using setErrorNodes', () => {
-      expect(setErrorNodes(original, new Set(), 0) === original).toBeFalsy();
+      expect(setErrorNodes(original, new Set()) === original).toBeFalsy();
     });
 
     it('creates a copy when using setReloadedNodes', () => {
@@ -37,7 +37,6 @@ describe('node data model', () => {
           receivedEvents: [],
           requestedNodes: new Set(),
           numberOfRequestedEvents: 1,
-          dataRequestID: 0,
         }) === original
       ).toBeFalsy();
     });
@@ -50,15 +49,14 @@ describe('node data model', () => {
         {
           events: [generator.generateEvent({ eventType: ['start'] })],
           status: 'running',
-          dataRequestID: 0,
         },
       ],
     ]);
 
-    expect(setRequestedNodes(state, new Set(['1', '2']), 0)).toEqual(
+    expect(setRequestedNodes(state, new Set(['1', '2']))).toEqual(
       new Map<string, NodeData>([
-        ['1', { events: [], status: 'loading', dataRequestID: 0 }],
-        ['2', { events: [], status: 'loading', dataRequestID: 0 }],
+        ['1', { events: [], status: 'loading' }],
+        ['2', { events: [], status: 'loading' }],
       ])
     );
   });
@@ -70,24 +68,21 @@ describe('node data model', () => {
         {
           events: [generator.generateEvent({ eventType: ['start'] })],
           status: 'running',
-          dataRequestID: 0,
         },
       ],
     ]);
 
-    expect(setErrorNodes(state, new Set(['1', '2']), 0)).toEqual(
+    expect(setErrorNodes(state, new Set(['1', '2']))).toEqual(
       new Map<string, NodeData>([
-        ['1', { events: [], status: 'error', dataRequestID: 0 }],
-        ['2', { events: [], status: 'error', dataRequestID: 0 }],
+        ['1', { events: [], status: 'error' }],
+        ['2', { events: [], status: 'error' }],
       ])
     );
   });
 
   describe('setReloadedNodes', () => {
     it('removes the id from the map', () => {
-      const state = new Map<string, NodeData>([
-        ['1', { events: [], status: 'error', dataRequestID: 0 }],
-      ]);
+      const state = new Map<string, NodeData>([['1', { events: [], status: 'error' }]]);
       expect(setReloadedNodes(state, '1')).toEqual(new Map());
     });
   });
@@ -96,8 +91,8 @@ describe('node data model', () => {
     const node1Events = [generator.generateEvent({ entityID: '1', eventType: ['start'] })];
     const node2Events = [generator.generateEvent({ entityID: '2', eventType: ['start'] })];
     const state = new Map<string, NodeData>([
-      ['1', { events: node1Events, status: 'error', dataRequestID: 0 }],
-      ['2', { events: node2Events, status: 'error', dataRequestID: 0 }],
+      ['1', { events: node1Events, status: 'error' }],
+      ['2', { events: node2Events, status: 'error' }],
     ]);
     describe('reachedLimit is false', () => {
       it('overwrites entries with the received data', () => {
@@ -110,12 +105,11 @@ describe('node data model', () => {
             requestedNodes: new Set(['1']),
             // a number greater than the amount received so the reached limit flag with be false
             numberOfRequestedEvents: 10,
-            dataRequestID: 0,
           })
         ).toEqual(
           new Map<string, NodeData>([
-            ['1', { events: [genNodeEvent], status: 'running', dataRequestID: 0 }],
-            ['2', { events: node2Events, status: 'error', dataRequestID: 0 }],
+            ['1', { events: [genNodeEvent], status: 'running' }],
+            ['2', { events: node2Events, status: 'error' }],
           ])
         );
       });
@@ -127,12 +121,11 @@ describe('node data model', () => {
             receivedEvents: [],
             requestedNodes: new Set(['1', '2']),
             numberOfRequestedEvents: 1,
-            dataRequestID: 0,
           })
         ).toEqual(
           new Map<string, NodeData>([
-            ['1', { events: [], status: 'running', dataRequestID: 0 }],
-            ['2', { events: [], status: 'running', dataRequestID: 0 }],
+            ['1', { events: [], status: 'running' }],
+            ['2', { events: [], status: 'running' }],
           ])
         );
       });
@@ -146,12 +139,9 @@ describe('node data model', () => {
             receivedEvents: [],
             requestedNodes: new Set(['1']),
             numberOfRequestedEvents: 0,
-            dataRequestID: 0,
           })
         ).toEqual(
-          new Map<string, NodeData>([
-            ['2', { events: node2Events, status: 'error', dataRequestID: 0 }],
-          ])
+          new Map<string, NodeData>([['2', { events: node2Events, status: 'error' }]])
         );
       });
 
@@ -162,12 +152,11 @@ describe('node data model', () => {
             receivedEvents: [],
             requestedNodes: new Set(['10']),
             numberOfRequestedEvents: 0,
-            dataRequestID: 0,
           })
         ).toEqual(
           new Map<string, NodeData>([
-            ['1', { events: node1Events, status: 'error', dataRequestID: 0 }],
-            ['2', { events: node2Events, status: 'error', dataRequestID: 0 }],
+            ['1', { events: node1Events, status: 'error' }],
+            ['2', { events: node2Events, status: 'error' }],
           ])
         );
       });
@@ -181,12 +170,11 @@ describe('node data model', () => {
             receivedEvents: [genNodeEvent],
             requestedNodes: new Set(['1']),
             numberOfRequestedEvents: 1,
-            dataRequestID: 0,
           })
         ).toEqual(
           new Map<string, NodeData>([
-            ['1', { events: [genNodeEvent], status: 'running', dataRequestID: 0 }],
-            ['2', { events: node2Events, status: 'error', dataRequestID: 0 }],
+            ['1', { events: [genNodeEvent], status: 'running' }],
+            ['2', { events: node2Events, status: 'error' }],
           ])
         );
       });
diff --git a/x-pack/plugins/security_solution/public/resolver/models/node_data.ts b/x-pack/plugins/security_solution/public/resolver/models/node_data.ts
index e89ceb8d22b3bd..319ff2dc9e9747 100644
--- a/x-pack/plugins/security_solution/public/resolver/models/node_data.ts
+++ b/x-pack/plugins/security_solution/public/resolver/models/node_data.ts
@@ -17,15 +17,14 @@ import { isTerminatedProcess } from './process_event';
  */
 export function setRequestedNodes(
   storedNodeInfo = new Map<string, NodeData>(),
-  requestedNodes: Set<string>,
-  dataRequestID: number
+  requestedNodes: Set<string>
 ): Map<string, NodeData> {
   const requestedNodesArray = Array.from(requestedNodes);
   return new Map<string, NodeData>([
     ...storedNodeInfo,
     ...requestedNodesArray.map((id: string): [string, NodeData] => [
       id,
-      { events: [], status: 'loading', dataRequestID },
+      { events: [], status: 'loading' },
     ]),
   ]);
 }
@@ -38,15 +37,14 @@ export function setRequestedNodes(
  */
 export function setErrorNodes(
   storedNodeInfo = new Map<string, NodeData>(),
-  errorNodes: Set<string>,
-  dataRequestID: number
+  errorNodes: Set<string>
 ): Map<string, NodeData> {
   const errorNodesArray = Array.from(errorNodes);
   return new Map<string, NodeData>([
     ...storedNodeInfo,
     ...errorNodesArray.map((id: string): [string, NodeData] => [
       id,
-      { events: [], status: 'error', dataRequestID },
+      { events: [], status: 'error' },
     ]),
   ]);
 }
@@ -105,13 +103,11 @@ export function updateWithReceivedNodes({
   receivedEvents,
   requestedNodes,
   numberOfRequestedEvents,
-  dataRequestID,
 }: {
   storedNodeInfo: Map<string, NodeData> | undefined;
   receivedEvents: SafeResolverEvent[];
   requestedNodes: Set<string>;
   numberOfRequestedEvents: number;
-  dataRequestID: number;
 }): Map<string, NodeData> {
   const copiedMap = new Map<string, NodeData>([...storedNodeInfo]);
   const reachedLimit = receivedEvents.length >= numberOfRequestedEvents;
@@ -127,7 +123,7 @@ export function updateWithReceivedNodes({
       } else {
         // if we didn't reach the limit but we didn't receive any node data for a particular ID
         // then that means Elasticsearch does not have any node data for that ID.
-        copiedMap.set(id, { events: [], status: 'running', dataRequestID });
+        copiedMap.set(id, { events: [], status: 'running' });
       }
     }
   }
@@ -137,7 +133,6 @@ export function updateWithReceivedNodes({
     copiedMap.set(id, {
       events: [...info.events],
       status: info.terminated ? 'terminated' : 'running',
-      dataRequestID,
     });
   }
 
diff --git a/x-pack/plugins/security_solution/public/resolver/models/tree_fetcher_parameters.test.ts b/x-pack/plugins/security_solution/public/resolver/models/tree_fetcher_parameters.test.ts
index 168a56b43ced86..99f26c61082292 100644
--- a/x-pack/plugins/security_solution/public/resolver/models/tree_fetcher_parameters.test.ts
+++ b/x-pack/plugins/security_solution/public/resolver/models/tree_fetcher_parameters.test.ts
@@ -45,30 +45,22 @@ describe('TreeFetcherParameters#equal:', () => {
       { databaseDocumentID: 'b', indices: ['1', '2'], filters: {} },
       true,
     ],
-    // all parameters the same, except for the request id
-    [
-      { databaseDocumentID: 'b', indices: [], dataRequestID: 0, filters: {} },
-      { databaseDocumentID: 'b', indices: [], dataRequestID: 1, filters: {} },
-      false,
-    ],
     // all parameters the same, except for the filters
     [
-      { databaseDocumentID: 'b', indices: [], dataRequestID: 0, filters: {} },
+      { databaseDocumentID: 'b', indices: [], filters: {} },
       {
         databaseDocumentID: 'b',
         indices: [],
-        dataRequestID: 0,
         filters: { to: 'to', from: 'from' },
       },
       false,
     ],
     // all parameters the same, except for the filters.to
     [
-      { databaseDocumentID: 'b', indices: [], dataRequestID: 0, filters: { to: '100' } },
+      { databaseDocumentID: 'b', indices: [], filters: { to: '100' } },
       {
         databaseDocumentID: 'b',
         indices: [],
-        dataRequestID: 0,
         filters: { to: 'to' },
       },
       false,
@@ -78,10 +70,9 @@ describe('TreeFetcherParameters#equal:', () => {
       {
         databaseDocumentID: 'b',
         indices: [],
-        dataRequestID: 0,
         filters: { to: 'to' },
       },
-      { databaseDocumentID: 'b', indices: [], dataRequestID: 0, filters: { to: '100' } },
+      { databaseDocumentID: 'b', indices: [], filters: { to: '100' } },
       false,
     ],
     // all parameters the same
@@ -89,13 +80,11 @@ describe('TreeFetcherParameters#equal:', () => {
       {
         databaseDocumentID: 'b',
         indices: [],
-        dataRequestID: 0,
         filters: { to: 'to', from: 'from' },
       },
       {
         databaseDocumentID: 'b',
         indices: [],
-        dataRequestID: 0,
         filters: { to: 'to', from: 'from' },
       },
       true,
@@ -105,23 +94,15 @@ describe('TreeFetcherParameters#equal:', () => {
       {
         databaseDocumentID: 'b',
         indices: [],
-        dataRequestID: 0,
         filters: { to: 'to' },
       },
       {
         databaseDocumentID: 'b',
         indices: [],
-        dataRequestID: 0,
         filters: { to: 'to' },
       },
       true,
     ],
-    // all parameters the same, except for the request id
-    [
-      { databaseDocumentID: 'b', indices: [], dataRequestID: 0, filters: {} },
-      { databaseDocumentID: 'b', indices: [], dataRequestID: 1, filters: {} },
-      false,
-    ],
   ];
   describe.each(cases)('%p when compared to %p', (first, second, expected) => {
     it(`should ${expected ? '' : 'not'}be equal`, () => {
diff --git a/x-pack/plugins/security_solution/public/resolver/models/tree_fetcher_parameters.ts b/x-pack/plugins/security_solution/public/resolver/models/tree_fetcher_parameters.ts
index b2991dd31db64b..0bc0fb49015a3c 100644
--- a/x-pack/plugins/security_solution/public/resolver/models/tree_fetcher_parameters.ts
+++ b/x-pack/plugins/security_solution/public/resolver/models/tree_fetcher_parameters.ts
@@ -19,7 +19,6 @@ export function equal(param1: TreeFetcherParameters, param2?: TreeFetcherParamet
   }
   if (
     param1.databaseDocumentID !== param2.databaseDocumentID ||
-    param1.dataRequestID !== param2.dataRequestID ||
     param1.filters.from !== param2.filters.from ||
     param1.filters.to !== param2.filters.to
   ) {
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 4b1ea61b7d618a..589a119d0698b6 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
@@ -38,7 +38,6 @@ interface AppRequestedNodeEventsInCategory {
   readonly type: 'appRequestedNodeEventsInCategory';
   readonly payload: {
     parameters: PanelViewAndParameters;
-    dataRequestID: number;
   };
 }
 interface AppRequestedResolverData {
@@ -106,8 +105,6 @@ interface ServerReturnedNodeEventsInCategory {
      * The category that `events` have in common.
      */
     eventCategory: string;
-
-    dataRequestID: number;
   };
 }
 
@@ -135,8 +132,6 @@ interface ServerReturnedNodeData {
      * that we'll request their data in a subsequent request.
      */
     numberOfRequestedEvents: number;
-
-    dataRequestID: number;
   };
 }
 
@@ -150,7 +145,6 @@ interface AppRequestingNodeData {
      * The list of IDs that will be sent to the server to retrieve data for.
      */
     requestedIDs: Set<string>;
-    dataRequestID: number;
   };
 }
 
@@ -175,7 +169,6 @@ interface ServerFailedToReturnNodeData {
      * The list of IDs that were sent to the server to retrieve data for.
      */
     requestedIDs: Set<string>;
-    dataRequestID: number;
   };
 }
 
@@ -189,7 +182,7 @@ interface ServerFailedToReturnCurrentRelatedEventData {
 
 interface ServerReturnedCurrentRelatedEventData {
   readonly type: 'serverReturnedCurrentRelatedEventData';
-  readonly payload: { data: SafeResolverEvent; dataRequestID: number };
+  readonly payload: SafeResolverEvent;
 }
 
 export type DataAction =
diff --git a/x-pack/plugins/security_solution/public/resolver/store/data/node_events_in_category_model.ts b/x-pack/plugins/security_solution/public/resolver/store/data/node_events_in_category_model.ts
index 1b86bf43a29e3b..d10edf64dcd35f 100644
--- a/x-pack/plugins/security_solution/public/resolver/store/data/node_events_in_category_model.ts
+++ b/x-pack/plugins/security_solution/public/resolver/store/data/node_events_in_category_model.ts
@@ -40,7 +40,6 @@ export function updatedWith(
       events: [...first.events, ...second.events],
       cursor: second.cursor,
       lastCursorRequested: null,
-      dataRequestID: second.dataRequestID,
     };
   } else {
     return undefined;
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 fc1602943ae391..671733057799a9 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
@@ -18,22 +18,18 @@ const initialState: DataState = {
     data: null,
   },
   resolverComponentInstanceID: undefined,
-  refreshCount: 0,
 };
 /* eslint-disable complexity */
 export const dataReducer: Reducer<DataState, ResolverAction> = (state = initialState, action) => {
   if (action.type === 'appReceivedNewExternalProperties') {
-    const refreshCount = state.refreshCount + (action.payload.shouldUpdate ? 1 : 0);
     const nextState: DataState = {
       ...state,
-      refreshCount,
       tree: {
         ...state.tree,
         currentParameters: {
           databaseDocumentID: action.payload.databaseDocumentID,
           indices: action.payload.indices,
           filters: action.payload.filters,
-          dataRequestID: refreshCount,
         },
       },
       resolverComponentInstanceID: action.payload.resolverComponentInstanceID,
@@ -61,7 +57,6 @@ export const dataReducer: Reducer<DataState, ResolverAction> = (state = initialS
         pendingRequestParameters: {
           databaseDocumentID: action.payload.databaseDocumentID,
           indices: action.payload.indices,
-          dataRequestID: action.payload.dataRequestID,
           filters: action.payload.filters,
         },
       },
@@ -194,7 +189,6 @@ export const dataReducer: Reducer<DataState, ResolverAction> = (state = initialS
       receivedEvents: action.payload.nodeData,
       requestedNodes: action.payload.requestedIDs,
       numberOfRequestedEvents: action.payload.numberOfRequestedEvents,
-      dataRequestID: action.payload.dataRequestID,
     });
 
     return {
@@ -210,8 +204,7 @@ export const dataReducer: Reducer<DataState, ResolverAction> = (state = initialS
   } else if (action.type === 'appRequestingNodeData') {
     const updatedNodeData = nodeDataModel.setRequestedNodes(
       state.nodeData,
-      action.payload.requestedIDs,
-      action.payload.dataRequestID
+      action.payload.requestedIDs
     );
 
     return {
@@ -219,11 +212,7 @@ export const dataReducer: Reducer<DataState, ResolverAction> = (state = initialS
       nodeData: updatedNodeData,
     };
   } else if (action.type === 'serverFailedToReturnNodeData') {
-    const updatedData = nodeDataModel.setErrorNodes(
-      state.nodeData,
-      action.payload.requestedIDs,
-      action.payload.dataRequestID
-    );
+    const updatedData = nodeDataModel.setErrorNodes(state.nodeData, action.payload.requestedIDs);
 
     return {
       ...state,
@@ -243,7 +232,9 @@ export const dataReducer: Reducer<DataState, ResolverAction> = (state = initialS
       ...state,
       currentRelatedEvent: {
         loading: false,
-        ...action.payload,
+        data: {
+          ...action.payload,
+        },
       },
     };
     return nextState;
diff --git a/x-pack/plugins/security_solution/public/resolver/store/data/selectors.test.ts b/x-pack/plugins/security_solution/public/resolver/store/data/selectors.test.ts
index 25bff11ac1395e..9582a6ca4a4f8b 100644
--- a/x-pack/plugins/security_solution/public/resolver/store/data/selectors.test.ts
+++ b/x-pack/plugins/security_solution/public/resolver/store/data/selectors.test.ts
@@ -159,7 +159,7 @@ describe('data state', () => {
         has an error: false
         has more children: false
         has more ancestors: false
-        parameters to fetch: {\\"databaseDocumentID\\":\\"databaseDocumentID\\",\\"indices\\":[],\\"filters\\":{},\\"dataRequestID\\":0}
+        parameters to fetch: {\\"databaseDocumentID\\":\\"databaseDocumentID\\",\\"indices\\":[],\\"filters\\":{}}
         requires a pending request to be aborted: null"
       `);
     });
@@ -220,14 +220,17 @@ describe('data state', () => {
     it('should be loading', () => {
       expect(selectors.isTreeLoading(state())).toBe(true);
     });
+    it('should not have a request to abort', () => {
+      expect(selectors.treeRequestParametersToAbort(state())).toBe(null);
+    });
     it('should not have an error, more children, more ancestors, a request to make, or a pending request that should be aborted.', () => {
       expect(viewAsAString(state())).toMatchInlineSnapshot(`
         "is loading: true
         has an error: false
         has more children: false
         has more ancestors: false
-        parameters to fetch: {\\"databaseDocumentID\\":\\"databaseDocumentID\\",\\"indices\\":[],\\"filters\\":{},\\"dataRequestID\\":0}
-        requires a pending request to be aborted: {\\"databaseDocumentID\\":\\"databaseDocumentID\\",\\"indices\\":[],\\"filters\\":{}}"
+        parameters to fetch: null
+        requires a pending request to be aborted: null"
       `);
     });
     describe('when the pending request fails', () => {
@@ -249,7 +252,7 @@ describe('data state', () => {
           has an error: true
           has more children: false
           has more ancestors: false
-          parameters to fetch: {\\"databaseDocumentID\\":\\"databaseDocumentID\\",\\"indices\\":[],\\"filters\\":{},\\"dataRequestID\\":0}
+          parameters to fetch: null
           requires a pending request to be aborted: null"
         `);
       });
@@ -317,7 +320,7 @@ describe('data state', () => {
         has an error: false
         has more children: false
         has more ancestors: false
-        parameters to fetch: {\\"databaseDocumentID\\":\\"second databaseDocumentID\\",\\"indices\\":[],\\"filters\\":{},\\"dataRequestID\\":0}
+        parameters to fetch: {\\"databaseDocumentID\\":\\"second databaseDocumentID\\",\\"indices\\":[],\\"filters\\":{}}
         requires a pending request to be aborted: {\\"databaseDocumentID\\":\\"first databaseDocumentID\\",\\"indices\\":[],\\"filters\\":{}}"
       `);
     });
@@ -345,7 +348,7 @@ describe('data state', () => {
           has an error: false
           has more children: false
           has more ancestors: false
-          parameters to fetch: {\\"databaseDocumentID\\":\\"second databaseDocumentID\\",\\"indices\\":[],\\"filters\\":{},\\"dataRequestID\\":0}
+          parameters to fetch: {\\"databaseDocumentID\\":\\"second databaseDocumentID\\",\\"indices\\":[],\\"filters\\":{}}
           requires a pending request to be aborted: null"
         `);
       });
@@ -356,6 +359,9 @@ describe('data state', () => {
             payload: { databaseDocumentID: secondDatabaseDocumentID, indices: [], filters: {} },
           });
         });
+        it('should not have a document ID to fetch', () => {
+          expect(selectors.treeParametersToFetch(state())).toBe(null);
+        });
         it('should be loading', () => {
           expect(selectors.isTreeLoading(state())).toBe(true);
         });
@@ -365,69 +371,13 @@ describe('data state', () => {
             has an error: false
             has more children: false
             has more ancestors: false
-            parameters to fetch: {\\"databaseDocumentID\\":\\"second databaseDocumentID\\",\\"indices\\":[],\\"filters\\":{},\\"dataRequestID\\":0}
-            requires a pending request to be aborted: {\\"databaseDocumentID\\":\\"second databaseDocumentID\\",\\"indices\\":[],\\"filters\\":{}}"
+            parameters to fetch: null
+            requires a pending request to be aborted: null"
           `);
         });
       });
     });
   });
-  describe('when resolver receives external properties indicating it should refresh', () => {
-    beforeEach(() => {
-      actions = [
-        {
-          type: 'appReceivedNewExternalProperties',
-          payload: {
-            databaseDocumentID: 'doc id',
-            resolverComponentInstanceID: 'instance',
-            locationSearch: '',
-            indices: [],
-            shouldUpdate: true,
-            filters: {},
-          },
-        },
-      ];
-    });
-    it('should indicate that all node data is stale before the server returned node data', () => {
-      // the map does not exist yet so nothing should be in it
-      expect(selectors.nodeDataIsStale(state())('a')).toBeTruthy();
-    });
-    describe('when resolver receives some data for nodes', () => {
-      beforeEach(() => {
-        actions = [
-          ...actions,
-          {
-            type: 'serverReturnedNodeData',
-            payload: {
-              nodeData: [],
-              requestedIDs: new Set(['a', 'b']),
-              numberOfRequestedEvents: 500,
-              // the refreshCount should be at 1 right now
-              dataRequestID: 0,
-            },
-          },
-          {
-            type: 'serverReturnedNodeData',
-            payload: {
-              nodeData: [],
-              requestedIDs: new Set(['c', 'd']),
-              numberOfRequestedEvents: 500,
-              // the refreshCount should be at 1 right now
-              dataRequestID: 1,
-            },
-          },
-        ];
-      });
-      it('should indicate that nodes a and b are stale', () => {
-        expect(selectors.nodeDataIsStale(state())('a')).toBeTruthy();
-        expect(selectors.nodeDataIsStale(state())('b')).toBeTruthy();
-      });
-      it('should indicate that nodes c and d are up to date', () => {
-        expect(selectors.nodeDataIsStale(state())('c')).toBeFalsy();
-        expect(selectors.nodeDataIsStale(state())('d')).toBeFalsy();
-      });
-    });
-  });
   describe('with a mock tree of no ancestors and two children', () => {
     const databaseDocumentID = 'doc id';
     const resolverComponentInstanceID = 'instance';
@@ -456,7 +406,7 @@ describe('data state', () => {
           },
           {
             type: 'appRequestedResolverData',
-            payload: { databaseDocumentID, indices: [], dataRequestID: 0, filters: {} },
+            payload: { databaseDocumentID, indices: [], filters: {} },
           },
           {
             type: 'serverReturnedResolverData',
@@ -464,7 +414,7 @@ describe('data state', () => {
               result: resolverTree,
               dataSource,
               schema,
-              parameters: { databaseDocumentID, indices: [], dataRequestID: 0, filters: {} },
+              parameters: { databaseDocumentID, indices: [], filters: {} },
             },
           },
         ];
@@ -497,7 +447,6 @@ describe('data state', () => {
               payload: {
                 databaseDocumentID,
                 indices: [],
-                dataRequestID: 0,
                 filters: timeRangeFilters,
               },
             },
@@ -510,7 +459,6 @@ describe('data state', () => {
                 parameters: {
                   databaseDocumentID,
                   indices: [],
-                  dataRequestID: 0,
                   filters: timeRangeFilters,
                 },
               },
@@ -523,83 +471,6 @@ describe('data state', () => {
         });
       });
     });
-    describe('when after initial load resolver is told to refresh', () => {
-      beforeEach(() => {
-        actions = [
-          // receive the document ID, this would cause the middleware to start the request
-          {
-            type: 'appReceivedNewExternalProperties',
-            payload: {
-              databaseDocumentID,
-              resolverComponentInstanceID,
-              locationSearch: '',
-              indices: [],
-              shouldUpdate: false,
-              filters: {},
-            },
-          },
-          // this happens when the middleware starts the request
-          {
-            type: 'appRequestedResolverData',
-            payload: { databaseDocumentID, indices: [], dataRequestID: 99, filters: {} },
-          },
-          {
-            type: 'serverReturnedResolverData',
-            payload: {
-              result: resolverTree,
-              dataSource,
-              schema,
-              parameters: { databaseDocumentID, indices: [], dataRequestID: 0, filters: {} },
-            },
-          },
-          // receive all the same parameters except shouldUpdate is true
-          {
-            type: 'appReceivedNewExternalProperties',
-            payload: {
-              databaseDocumentID,
-              resolverComponentInstanceID,
-              locationSearch: '',
-              indices: [],
-              shouldUpdate: true,
-              filters: {},
-            },
-          },
-          {
-            type: 'appReceivedNewExternalProperties',
-            payload: {
-              databaseDocumentID,
-              resolverComponentInstanceID,
-              locationSearch: '',
-              indices: [],
-              shouldUpdate: false,
-              filters: {},
-            },
-          },
-          {
-            type: 'appRequestedResolverData',
-            payload: { databaseDocumentID, indices: [], dataRequestID: 2, filters: {} },
-          },
-        ];
-      });
-      it('should need to request the tree using the same parameters as the first request', () => {
-        expect(selectors.treeParametersToFetch(state())?.databaseDocumentID).toBe(
-          databaseDocumentID
-        );
-      });
-      it('should have a newer id', () => {
-        expect(selectors.treeParametersToFetch(state())?.dataRequestID).toBe(1);
-      });
-      it('should not have an error, more children, or more ancestors.', () => {
-        expect(viewAsAString(state())).toMatchInlineSnapshot(`
-          "is loading: true
-          has an error: false
-          has more children: false
-          has more ancestors: false
-          parameters to fetch: {\\"databaseDocumentID\\":\\"doc id\\",\\"indices\\":[],\\"filters\\":{},\\"dataRequestID\\":1}
-          requires a pending request to be aborted: {\\"databaseDocumentID\\":\\"doc id\\",\\"indices\\":[],\\"dataRequestID\\":2,\\"filters\\":{}}"
-        `);
-      });
-    });
   });
   describe('with a tree with no descendants and 2 ancestors', () => {
     const originID = 'c';
@@ -653,7 +524,6 @@ describe('data state', () => {
             // mock the requested size being larger than the returned number of events so we
             // avoid the case where the limit was reached
             numberOfRequestedEvents: nodeData.length + 1,
-            dataRequestID: 0,
           },
         },
       ];
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 1a3ae2a7fd0435..f5a0a5f26ca850 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
@@ -95,40 +95,6 @@ export const originID: (state: DataState) => string | undefined = createSelector
   }
 );
 
-function currentRelatedEventRequestID(state: DataState): number | undefined {
-  if (state.currentRelatedEvent) {
-    return state.currentRelatedEvent?.dataRequestID;
-  } else {
-    return undefined;
-  }
-}
-
-function currentNodeEventsInCategoryRequestID(state: DataState): number | undefined {
-  if (state.nodeEventsInCategory?.pendingRequest) {
-    return state.nodeEventsInCategory.pendingRequest?.dataRequestID;
-  } else if (state.nodeEventsInCategory) {
-    return state.nodeEventsInCategory?.dataRequestID;
-  } else {
-    return undefined;
-  }
-}
-
-export const eventsInCategoryResultIsStale = createSelector(
-  currentNodeEventsInCategoryRequestID,
-  refreshCount,
-  function eventsInCategoryResultIsStale(oldID, newID) {
-    return oldID !== undefined && oldID !== newID;
-  }
-);
-
-export const currentRelatedEventIsStale = createSelector(
-  currentRelatedEventRequestID,
-  refreshCount,
-  function currentRelatedEventIsStale(oldID, newID) {
-    return oldID !== undefined && oldID !== newID;
-  }
-);
-
 /**
  * Returns a data structure for accessing events for specific nodes in a graph. For Endpoint graphs these nodes will be
  * process lifecycle events.
@@ -149,42 +115,15 @@ export const nodeDataForID: (
   };
 });
 
-const nodeDataRequestID: (state: DataState) => (id: string) => number | undefined = createSelector(
-  nodeDataForID,
-  (nodeInfo) => {
-    return (id: string) => {
-      return nodeInfo(id)?.dataRequestID;
-    };
-  }
-);
-
-/**
- * Returns true if a specific node's data is outdated. It will be outdated if a user clicked the refresh/update button
- * after the node data was retrieved.
- */
-export const nodeDataIsStale: (state: DataState) => (id: string) => boolean = createSelector(
-  nodeDataRequestID,
-  refreshCount,
-  (nodeRequestID, newID) => {
-    return (id: string) => {
-      const oldID = nodeRequestID(id);
-      // if we don't have the node in the map then it's data must be stale or if the refreshCount is greater than the
-      // node's requestID then it is also stale
-      return oldID === undefined || newID > oldID;
-    };
-  }
-);
-
 /**
  * Returns a function that can be called to retrieve the state of the node, running, loading, or terminated.
  */
 export const nodeDataStatus: (state: DataState) => (id: string) => NodeDataStatus = createSelector(
   nodeDataForID,
-  nodeDataIsStale,
-  (nodeInfo, isStale) => {
+  (nodeInfo) => {
     return (id: string) => {
       const info = nodeInfo(id);
-      if (!info || isStale(id)) {
+      if (!info) {
         return 'loading';
       }
 
@@ -287,13 +226,6 @@ export const relatedEventCountByCategory: (
   }
 );
 
-/**
- * Retrieves the number of times the update/refresh button was clicked to be compared against various dataRequestIDs
- */
-export function refreshCount(state: DataState) {
-  return state.refreshCount;
-}
-
 /**
  * Returns true if there might be more generations in the graph that we didn't get because we reached
  * the requested generations limit.
diff --git a/x-pack/plugins/security_solution/public/resolver/store/middleware/current_related_event_fetcher.ts b/x-pack/plugins/security_solution/public/resolver/store/middleware/current_related_event_fetcher.ts
index e1dbdf3027e43e..4c05af0a8332e5 100644
--- a/x-pack/plugins/security_solution/public/resolver/store/middleware/current_related_event_fetcher.ts
+++ b/x-pack/plugins/security_solution/public/resolver/store/middleware/current_related_event_fetcher.ts
@@ -34,14 +34,10 @@ export function CurrentRelatedEventFetcher(
     const indices = selectors.treeParameterIndices(state);
 
     const oldParams = last;
-    const newID = selectors.refreshCount(state);
     last = newParams;
 
     // If the panel view params have changed and the current panel view is the `eventDetail`, then fetch the event details for that eventID.
-    if (
-      (!isEqual(newParams, oldParams) && newParams.panelView === 'eventDetail') ||
-      (selectors.currentRelatedEventIsStale(state) && newParams.panelView === 'eventDetail')
-    ) {
+    if (!isEqual(newParams, oldParams) && newParams.panelView === 'eventDetail') {
       const currentEventID = newParams.panelParameters.eventID;
       const currentNodeID = newParams.panelParameters.nodeID;
       const currentEventCategory = newParams.panelParameters.eventCategory;
@@ -54,7 +50,6 @@ export function CurrentRelatedEventFetcher(
       const timeRangeFilters = selectors.timeRangeFilters(state);
 
       let result: SafeResolverEvent | null = null;
-      let payload: { data: SafeResolverEvent; dataRequestID: number } | null = null;
       try {
         result = await dataAccessLayer.event({
           nodeID: currentNodeID,
@@ -72,13 +67,9 @@ export function CurrentRelatedEventFetcher(
       }
 
       if (result) {
-        payload = {
-          data: result,
-          dataRequestID: newID,
-        };
         api.dispatch({
           type: 'serverReturnedCurrentRelatedEventData',
-          payload,
+          payload: result,
         });
       } else {
         api.dispatch({
diff --git a/x-pack/plugins/security_solution/public/resolver/store/middleware/node_data_fetcher.ts b/x-pack/plugins/security_solution/public/resolver/store/middleware/node_data_fetcher.ts
index dc0ab7f93e6e9e..97b3c759454948 100644
--- a/x-pack/plugins/security_solution/public/resolver/store/middleware/node_data_fetcher.ts
+++ b/x-pack/plugins/security_solution/public/resolver/store/middleware/node_data_fetcher.ts
@@ -43,7 +43,6 @@ export function NodeDataFetcher(
       return;
     }
 
-    const newID = selectors.refreshCount(state);
     /**
      * Dispatch an action indicating that we are going to request data for a set of nodes so that we can show a loading
      * state for those nodes in the UI.
@@ -55,7 +54,6 @@ export function NodeDataFetcher(
       type: 'appRequestingNodeData',
       payload: {
         requestedIDs: newIDsToRequest,
-        dataRequestID: newID,
       },
     });
 
@@ -76,7 +74,6 @@ export function NodeDataFetcher(
         type: 'serverFailedToReturnNodeData',
         payload: {
           requestedIDs: newIDsToRequest,
-          dataRequestID: newID,
         },
       });
     }
@@ -114,7 +111,6 @@ export function NodeDataFetcher(
            *  if that node is still in view we'll request its node data.
            */
           numberOfRequestedEvents: nodeDataLimit,
-          dataRequestID: newID,
         },
       });
     }
diff --git a/x-pack/plugins/security_solution/public/resolver/store/middleware/related_events_fetcher.ts b/x-pack/plugins/security_solution/public/resolver/store/middleware/related_events_fetcher.ts
index 20d8c3915de3e3..348d92057edcf6 100644
--- a/x-pack/plugins/security_solution/public/resolver/store/middleware/related_events_fetcher.ts
+++ b/x-pack/plugins/security_solution/public/resolver/store/middleware/related_events_fetcher.ts
@@ -29,9 +29,7 @@ export function RelatedEventsFetcher(
     const indices = selectors.treeParameterIndices(state);
 
     const oldParams = last;
-    const newID = selectors.refreshCount(state);
     const timeRangeFilters = selectors.timeRangeFilters(state);
-
     // Update this each time before fetching data (or even if we don't fetch data) so that subsequent actions that call this (concurrently) will have up to date info.
     last = newParams;
 
@@ -39,12 +37,10 @@ export function RelatedEventsFetcher(
       nodeID,
       eventCategory,
       cursor,
-      dataRequestID,
     }: {
       nodeID: string;
       eventCategory: string;
       cursor: string | null;
-      dataRequestID?: number;
     }) {
       let result: ResolverPaginatedEvents | null = null;
 
@@ -84,35 +80,31 @@ export function RelatedEventsFetcher(
             eventCategory,
             cursor: result.nextEvent,
             nodeID,
-            dataRequestID: newID,
           },
         });
       }
     }
 
     // If the panel view params have changed and the current panel view is either `nodeEventsInCategory` or `eventDetail`, then fetch the related events for that nodeID.
-    if (!isEqual(newParams, oldParams) || selectors.eventsInCategoryResultIsStale(state)) {
+    if (!isEqual(newParams, oldParams)) {
       if (newParams.panelView === 'nodeEventsInCategory') {
         const nodeID = newParams.panelParameters.nodeID;
         api.dispatch({
           type: 'appRequestedNodeEventsInCategory',
           payload: {
             parameters: newParams,
-            dataRequestID: newID,
           },
         });
-        fetchEvents({
+        await fetchEvents({
           nodeID,
           eventCategory: newParams.panelParameters.eventCategory,
           cursor: null,
-          // only use the id for initial requests, reuse for load more.
-          dataRequestID: newID,
         });
       }
     } else if (isLoadingMoreEvents) {
       const nodeEventsInCategory = state.data.nodeEventsInCategory;
       if (nodeEventsInCategory !== undefined) {
-        fetchEvents(nodeEventsInCategory);
+        await fetchEvents(nodeEventsInCategory);
       }
     }
   };
diff --git a/x-pack/plugins/security_solution/public/resolver/store/middleware/resolver_tree_fetcher.ts b/x-pack/plugins/security_solution/public/resolver/store/middleware/resolver_tree_fetcher.ts
index 40f67d59b4fb02..9877864fa7010e 100644
--- a/x-pack/plugins/security_solution/public/resolver/store/middleware/resolver_tree_fetcher.ts
+++ b/x-pack/plugins/security_solution/public/resolver/store/middleware/resolver_tree_fetcher.ts
@@ -34,6 +34,7 @@ export function ResolverTreeFetcher(
   return async () => {
     const state = api.getState();
     const databaseParameters = selectors.treeParametersToFetch(state);
+    const currentPanelParameters = selectors.panelViewAndParameters(state);
 
     if (selectors.treeRequestParametersToAbort(state) && lastRequestAbortController) {
       lastRequestAbortController.abort();
@@ -91,6 +92,26 @@ export function ResolverTreeFetcher(
             parameters: databaseParameters,
           },
         });
+
+        /*
+         * Necessary to handle refresh states where another node besides the origin was selected
+         * If the user has selected another node, but is back to viewing the nodeList, nodeID won't be set in the url
+         * So after a refresh the focused node will be the originID.
+         * This is okay for now, but can be updated if we decide to track selectedNode in panelParameters.
+         */
+        // no nodeID on the 'nodes' (nodeList) view.
+        if (currentPanelParameters && currentPanelParameters.panelView !== 'nodes') {
+          const { nodeID } = currentPanelParameters.panelParameters;
+          const urlHasDefinedNode = result.find((node) => node.id === nodeID);
+          api.dispatch({
+            type: 'userBroughtNodeIntoView',
+            payload: {
+              // In the event the origin is the url selectedNode, the animation has logic to prevent an unnecessary transition taking place
+              nodeID: urlHasDefinedNode ? nodeID : entityIDToFetch,
+              time: Date.now(),
+            },
+          });
+        }
       } catch (error) {
         // https://developer.mozilla.org/en-US/docs/Web/API/DOMException#exception-AbortError
         if (error instanceof DOMException && error.name === 'AbortError') {
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 6b46f8da596fad..ca9ec2ffa38e52 100644
--- a/x-pack/plugins/security_solution/public/resolver/store/selectors.ts
+++ b/x-pack/plugins/security_solution/public/resolver/store/selectors.ts
@@ -8,7 +8,7 @@ import { createSelector, defaultMemoize } from 'reselect';
 import * as cameraSelectors from './camera/selectors';
 import * as dataSelectors from './data/selectors';
 import * as uiSelectors from './ui/selectors';
-import { ResolverState, IsometricTaxiLayout } from '../types';
+import { ResolverState, IsometricTaxiLayout, DataState } from '../types';
 import { EventStats } from '../../../common/endpoint/types';
 import * as nodeModel from '../../../common/endpoint/models/node';
 
@@ -132,11 +132,6 @@ export const currentRelatedEventData = composeSelectors(
   dataSelectors.currentRelatedEventData
 );
 
-/**
- * A counter indicating how many times a user has requested new data for resolver.
- */
-export const refreshCount = composeSelectors(dataStateSelector, dataSelectors.refreshCount);
-
 export const timeRangeFilters = composeSelectors(dataStateSelector, dataSelectors.timeRangeFilters);
 
 /**
@@ -366,16 +361,6 @@ export const isLoadingMoreNodeEventsInCategory = composeSelectors(
   dataSelectors.isLoadingMoreNodeEventsInCategory
 );
 
-export const eventsInCategoryResultIsStale = composeSelectors(
-  dataStateSelector,
-  dataSelectors.eventsInCategoryResultIsStale
-);
-
-export const currentRelatedEventIsStale = composeSelectors(
-  dataStateSelector,
-  dataSelectors.currentRelatedEventIsStale
-);
-
 /**
  * Returns the state of the node, loading, running, or terminated.
  */
@@ -397,9 +382,9 @@ export const graphNodeForID = composeSelectors(dataStateSelector, dataSelectors.
 export const newIDsToRequest: (
   state: ResolverState
 ) => (time: number) => Set<string> = createSelector(
-  composeSelectors(dataStateSelector, dataSelectors.nodeDataIsStale),
+  composeSelectors(dataStateSelector, (dataState: DataState) => dataState.nodeData),
   visibleNodesAndEdgeLines,
-  function (nodeDataIsStale, visibleNodesAndEdgeLinesAtTime) {
+  function (nodeData, visibleNodesAndEdgeLinesAtTime) {
     return defaultMemoize((time: number) => {
       const { processNodePositions: nodesInView } = visibleNodesAndEdgeLinesAtTime(time);
 
@@ -410,7 +395,7 @@ export const newIDsToRequest: (
         // if the node has a valid ID field, and we either don't have any node data currently, or
         // the map doesn't have info for this particular node, then add it to the set so it'll be requested
         // by the middleware
-        if (id !== undefined && nodeDataIsStale(id)) {
+        if (id !== undefined && (!nodeData || !nodeData.has(id))) {
           nodes.add(id);
         }
       }
diff --git a/x-pack/plugins/security_solution/public/resolver/types.ts b/x-pack/plugins/security_solution/public/resolver/types.ts
index 298eacf6aaadfe..9bcdcacce55c36 100644
--- a/x-pack/plugins/security_solution/public/resolver/types.ts
+++ b/x-pack/plugins/security_solution/public/resolver/types.ts
@@ -209,11 +209,6 @@ export interface TreeFetcherParameters {
    */
   indices: string[];
 
-  /**
-   * The count of data invalidation actions at the time the data was requested.
-   */
-  dataRequestID?: number;
-
   filters: TimeFilters;
 }
 
@@ -244,21 +239,11 @@ export interface NodeEventsInCategoryState {
 
   lastCursorRequested?: null | string;
 
-  /**
-   * Request ID for the currently displayed events.
-   */
-  dataRequestID?: number;
-
   pendingRequest?: {
     /**
      * Parameters used for a request currently in progress.
      */
     parameters: PanelViewAndParameters;
-
-    /**
-     * Request ID for any inflight requests
-     */
-    dataRequestID: number;
   };
 
   /**
@@ -316,7 +301,6 @@ export interface NodeData {
    * An indication of the current state for retrieving the data.
    */
   status: NodeDataStatus;
-  dataRequestID: number;
 }
 
 /**
@@ -330,11 +314,6 @@ export interface DataState {
    */
   readonly nodeEventsInCategory?: NodeEventsInCategoryState;
 
-  /**
-   * A counter used to have resolver fetch updated data.
-   */
-  readonly refreshCount: number;
-
   /**
    * Used when the panelView is `eventDetail`.
    *
@@ -342,7 +321,6 @@ export interface DataState {
   readonly currentRelatedEvent: {
     loading: boolean;
     data: SafeResolverEvent | null;
-    dataRequestID?: number;
   };
 
   readonly tree?: {
diff --git a/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx b/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx
index 601b9bdab66817..18dfe04197d58f 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { ReactWrapper } from 'enzyme';
 import { noAncestorsTwoChildenInIndexCalledAwesomeIndex } from '../data_access_layer/mocks/no_ancestors_two_children_in_index_called_awesome_index';
 import { noAncestorsTwoChildren } from '../data_access_layer/mocks/no_ancestors_two_children';
 import { Simulator } from '../test_utilities/simulator';
@@ -13,7 +14,6 @@ import { noAncestorsTwoChildrenWithRelatedEventsOnOrigin } from '../data_access_
 import { urlSearch } from '../test_utilities/url_search';
 import { Vector2, AABB, TimeRange, DataAccessLayer } from '../types';
 import { generateTreeWithDAL } from '../data_access_layer/mocks/generator_tree';
-import { ReactWrapper } from 'enzyme';
 import { SafeResolverEvent } from '../../../common/endpoint/types';
 
 let simulator: Simulator;
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 bcc420435e5d9d..bdd4b853003ae6 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/index.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/index.tsx
@@ -5,7 +5,7 @@
  */
 /* eslint-disable react/display-name */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { Provider } from 'react-redux';
 import { resolverStoreFactory } from '../store';
 import { StartServices } from '../../types';
@@ -27,8 +27,16 @@ export const Resolver = React.memo((props: ResolverProps) => {
     return resolverStoreFactory(dataAccessLayer);
   }, [dataAccessLayer]);
 
+  const [activeStore, updateActiveStore] = useState(store);
+
+  useEffect(() => {
+    if (props.shouldUpdate) {
+      updateActiveStore(resolverStoreFactory(dataAccessLayer));
+    }
+  }, [dataAccessLayer, props.shouldUpdate]);
+
   return (
-    <Provider store={store}>
+    <Provider store={activeStore}>
       <ResolverWithoutProviders {...props} />
     </Provider>
   );
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/node_events_of_type.test.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/node_events_of_type.test.tsx
index 800f28d9d8e35c..3eea9db8739eae 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/panels/node_events_of_type.test.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/panels/node_events_of_type.test.tsx
@@ -14,8 +14,7 @@ import { urlSearch } from '../../test_utilities/url_search';
 // the resolver component instance ID, used by the react code to distinguish piece of global state from those used by other resolver instances
 const resolverComponentInstanceID = 'resolverComponentInstanceID';
 
-// FLAKY: https://github.com/elastic/kibana/issues/85714
-describe.skip(`Resolver: when analyzing a tree with only the origin and paginated related events, and when the component instance ID is ${resolverComponentInstanceID}`, () => {
+describe(`Resolver: when analyzing a tree with only the origin and paginated related events, and when the component instance ID is ${resolverComponentInstanceID}`, () => {
   /**
    * Get (or lazily create and get) the simulator.
    */
diff --git a/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx b/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx
index 6d18339fda00dc..496b6364c36c38 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx
@@ -106,45 +106,47 @@ export const ResolverWithoutProviders = React.memo(
             </div>
           </div>
         ) : (
-          <GraphContainer
-            data-test-subj="resolver:graph"
-            className="resolver-graph kbn-resetFocusState"
-            onMouseDown={onMouseDown}
-            ref={ref}
-            role="tree"
-            tabIndex={0}
-            aria-activedescendant={activeDescendantId || undefined}
-          >
-            {connectingEdgeLineSegments.map(
-              ({ points: [startPosition, endPosition], metadata }) => (
-                <EdgeLine
-                  edgeLineMetadata={metadata}
-                  key={metadata.reactKey}
-                  startPosition={startPosition}
-                  endPosition={endPosition}
-                  projectionMatrix={projectionMatrix}
-                />
-              )
-            )}
-            {[...processNodePositions].map(([treeNode, position]) => {
-              const nodeID = nodeModel.nodeID(treeNode);
-              if (nodeID === undefined) {
-                throw new Error('Tried to render a node without an ID');
-              }
-              return (
-                <ProcessEventDot
-                  key={nodeID}
-                  nodeID={nodeID}
-                  position={position}
-                  projectionMatrix={projectionMatrix}
-                  node={treeNode}
-                  timeAtRender={timeAtRender}
-                />
-              );
-            })}
-          </GraphContainer>
+          <>
+            <GraphContainer
+              data-test-subj="resolver:graph"
+              className="resolver-graph kbn-resetFocusState"
+              onMouseDown={onMouseDown}
+              ref={ref}
+              role="tree"
+              tabIndex={0}
+              aria-activedescendant={activeDescendantId || undefined}
+            >
+              {connectingEdgeLineSegments.map(
+                ({ points: [startPosition, endPosition], metadata }) => (
+                  <EdgeLine
+                    edgeLineMetadata={metadata}
+                    key={metadata.reactKey}
+                    startPosition={startPosition}
+                    endPosition={endPosition}
+                    projectionMatrix={projectionMatrix}
+                  />
+                )
+              )}
+              {[...processNodePositions].map(([treeNode, position]) => {
+                const nodeID = nodeModel.nodeID(treeNode);
+                if (nodeID === undefined) {
+                  throw new Error('Tried to render a node without an ID');
+                }
+                return (
+                  <ProcessEventDot
+                    key={nodeID}
+                    nodeID={nodeID}
+                    position={position}
+                    projectionMatrix={projectionMatrix}
+                    node={treeNode}
+                    timeAtRender={timeAtRender}
+                  />
+                );
+              })}
+            </GraphContainer>
+            <PanelRouter />
+          </>
         )}
-        <PanelRouter />
         <GraphControls />
         <SymbolDefinitions />
       </StyledMapContainer>
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 e24c4b5664e420..a6fe34c1d4b3dc 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx
@@ -5,12 +5,17 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import React, { useMemo } from 'react';
+import React, { useMemo, useContext, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { useDispatch } from 'react-redux';
 import { EuiI18nNumber } from '@elastic/eui';
 import { EventStats } from '../../../common/endpoint/types';
-import { useRelatedEventByCategoryNavigation } from './use_related_event_by_category_navigation';
 import { useColors } from './use_colors';
+import { useLinkProps } from './use_link_props';
+import { ResolverAction } from '../store/actions';
+import { SideEffectContext } from './side_effect_context';
+
+/* eslint-disable react/display-name */
 
 /**
  * Until browser support accomodates the `notation="compact"` feature of Intl.NumberFormat...
@@ -78,11 +83,6 @@ export const NodeSubMenuComponents = React.memo(
     nodeID: string;
     nodeStats: EventStats | undefined;
   }) => {
-    // The last projection matrix that was used to position the popover
-    const relatedEventCallbacks = useRelatedEventByCategoryNavigation({
-      nodeID,
-      categories: nodeStats?.byCategory,
-    });
     const relatedEventOptions = useMemo(() => {
       if (nodeStats === undefined) {
         return [];
@@ -99,20 +99,11 @@ export const NodeSubMenuComponents = React.memo(
           );
           return {
             prefix,
-            optionTitle: category,
-            action: () => relatedEventCallbacks(category),
+            category,
           };
         });
       }
-    }, [nodeStats, relatedEventCallbacks]);
-
-    const { pillStroke: pillBorderStroke, resolverBackground: pillFill } = useColors();
-    const listStylesFromTheme = useMemo(() => {
-      return {
-        border: `1.5px solid ${pillBorderStroke}`,
-        backgroundColor: pillFill,
-      };
-    }, [pillBorderStroke, pillFill]);
+    }, [nodeStats]);
 
     if (relatedEventOptions === undefined) {
       return null;
@@ -122,23 +113,61 @@ export const NodeSubMenuComponents = React.memo(
       <ul className={`${className} options`} aria-describedby={nodeID}>
         {relatedEventOptions
           .sort((opta, optb) => {
-            return opta.optionTitle.localeCompare(optb.optionTitle);
+            return opta.category.localeCompare(optb.category);
           })
-          .map((opt) => {
-            return (
-              <li
-                className="item"
-                data-test-subj="resolver:map:node-submenu-item"
-                style={listStylesFromTheme}
-                key={opt.optionTitle}
-              >
-                <button type="button" className="kbn-resetFocusState" onClick={opt.action}>
-                  {opt.prefix} {opt.optionTitle}
-                </button>
-              </li>
-            );
+          .map((pill) => {
+            return <NodeSubmenuPill pill={pill} nodeID={nodeID} key={pill.category} />;
           })}
       </ul>
     );
   }
 );
+
+const NodeSubmenuPill = ({
+  pill,
+  nodeID,
+}: {
+  pill: { prefix: JSX.Element; category: string };
+  nodeID: string;
+}) => {
+  const linkProps = useLinkProps({
+    panelView: 'nodeEventsInCategory',
+    panelParameters: { nodeID, eventCategory: pill.category },
+  });
+  const { pillStroke: pillBorderStroke, resolverBackground: pillFill } = useColors();
+  const listStylesFromTheme = useMemo(() => {
+    return {
+      border: `1.5px solid ${pillBorderStroke}`,
+      backgroundColor: pillFill,
+    };
+  }, [pillBorderStroke, pillFill]);
+
+  const dispatch: (action: ResolverAction) => void = useDispatch();
+  const { timestamp } = useContext(SideEffectContext);
+
+  const handleOnClick = useCallback(
+    (mouseEvent: React.MouseEvent<HTMLButtonElement>) => {
+      linkProps.onClick(mouseEvent);
+      dispatch({
+        type: 'userBroughtNodeIntoView',
+        payload: {
+          nodeID,
+          time: timestamp(),
+        },
+      });
+    },
+    [timestamp, linkProps, dispatch, nodeID]
+  );
+  return (
+    <li
+      className="item"
+      data-test-subj="resolver:map:node-submenu-item"
+      style={listStylesFromTheme}
+      key={pill.category}
+    >
+      <button type="button" className="kbn-resetFocusState" onClick={handleOnClick}>
+        {pill.prefix} {pill.category}
+      </button>
+    </li>
+  );
+};
diff --git a/x-pack/plugins/security_solution/public/resolver/view/use_related_event_by_category_navigation.ts b/x-pack/plugins/security_solution/public/resolver/view/use_related_event_by_category_navigation.ts
deleted file mode 100644
index 6810837ae031a7..00000000000000
--- a/x-pack/plugins/security_solution/public/resolver/view/use_related_event_by_category_navigation.ts
+++ /dev/null
@@ -1,37 +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 { useCallback } from 'react';
-import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
-import { ResolverState } from '../types';
-import * as selectors from '../store/selectors';
-
-/**
- * A hook that takes a nodeID and a record of categories, and returns a function that
- * navigates to the proper url when called with a category.
- * @deprecated See `useLinkProps`
- */
-export function useRelatedEventByCategoryNavigation({
-  nodeID,
-  categories,
-}: {
-  nodeID: string;
-  categories: Record<string, number> | undefined;
-}) {
-  const relatedEventUrls = useSelector((state: ResolverState) =>
-    selectors.relatedEventsRelativeHrefs(state)(categories, nodeID)
-  );
-  const history = useHistory();
-  return useCallback(
-    (category: string) => {
-      const urlForCategory = relatedEventUrls.get(category);
-      if (urlForCategory !== null && urlForCategory !== undefined) {
-        return history.replace({ search: urlForCategory });
-      }
-    },
-    [history, relatedEventUrls]
-  );
-}

From 915ec196be8a9d9d4f1f5ed3aa70c275a8d1c104 Mon Sep 17 00:00:00 2001
From: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>
Date: Thu, 17 Dec 2020 19:51:20 -0500
Subject: [PATCH 02/75] Rename Fleet integration detail "Custom" tab to
 "Advanced" (#86359)

---
 .../applications/fleet/sections/epm/screens/detail/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/index.tsx
index c70a11db004a6b..eee5dede16cad8 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/index.tsx
@@ -63,7 +63,7 @@ const PanelDisplayNames: Record<DetailViewPanelName, string> = {
     defaultMessage: 'Settings',
   }),
   custom: i18n.translate('xpack.fleet.epm.packageDetailsNav.packageCustomLinkText', {
-    defaultMessage: 'Custom',
+    defaultMessage: 'Advanced',
   }),
 };
 

From feecebf85e1c203fb81e5d708d2f730070e17201 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <nathan.smith@elastic.co>
Date: Thu, 17 Dec 2020 20:09:30 -0600
Subject: [PATCH 03/75] Ensure transactionType is used in overview (#85665)

* Ensure transactionType is used in overview

Fix the places where it was not being used:

- Transactions table
- Error rate chart
- Errors table

Also fix broken column sorting on transaction table.

* fix a sort

* test fix

* Snapshot update

* adds missing required param transactionType to API test

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Oliver Gupte <olivergupte@gmail.com>
---
 .../service_overview.test.tsx                 | 34 +++++++++++++------
 .../service_overview_errors_table/index.tsx   |  7 ++--
 .../index.tsx                                 | 23 ++++++++-----
 .../transaction_error_rate_chart/index.tsx    |  5 +--
 .../get_service_error_groups/index.ts         |  5 +++
 ..._timeseries_data_for_transaction_groups.ts |  3 ++
 .../get_transaction_groups_for_page.ts        |  5 +++
 .../get_service_transaction_groups/index.ts   |  4 +++
 x-pack/plugins/apm/server/routes/services.ts  | 11 +++++-
 .../plugins/apm/server/routes/transactions.ts |  8 +++--
 .../tests/service_overview/error_groups.ts    |  7 ++++
 .../basic/tests/transactions/error_rate.ts    | 23 +++++++------
 .../transactions_groups_overview.ts           |  7 ++++
 13 files changed, 105 insertions(+), 37 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx
index 3db857ad321901..c02f72245cdf5c 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx
@@ -21,7 +21,8 @@ import * as useTransactionBreakdownHooks from '../../shared/charts/transaction_b
 import { renderWithTheme } from '../../../utils/testHelpers';
 import { ServiceOverview } from './';
 import { waitFor } from '@testing-library/dom';
-import * as callApmApi from '../../../services/rest/createCallApmApi';
+import * as callApmApiModule from '../../../services/rest/createCallApmApi';
+import * as useApmServiceContextHooks from '../../../context/apm_service/use_apm_service_context';
 
 const KibanaReactContext = createKibanaReactContext({
   usageCollection: { reportUiCounter: () => {} },
@@ -56,6 +57,13 @@ function Wrapper({ children }: { children?: ReactNode }) {
 
 describe('ServiceOverview', () => {
   it('renders', async () => {
+    jest
+      .spyOn(useApmServiceContextHooks, 'useApmServiceContext')
+      .mockReturnValue({
+        agentName: 'java',
+        transactionType: 'request',
+        transactionTypes: ['request'],
+      });
     jest
       .spyOn(useAnnotationsHooks, 'useAnnotationsContext')
       .mockReturnValue({ annotations: [] });
@@ -78,17 +86,23 @@ describe('ServiceOverview', () => {
         isAggregationAccurate: true,
       },
       'GET /api/apm/services/{serviceName}/dependencies': [],
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'GET /api/apm/services/{serviceName}/service_overview_instances': [],
     };
 
-    jest.spyOn(callApmApi, 'createCallApmApi').mockImplementation(() => {});
+    jest
+      .spyOn(callApmApiModule, 'createCallApmApi')
+      .mockImplementation(() => {});
 
-    jest.spyOn(callApmApi, 'callApmApi').mockImplementation(({ endpoint }) => {
-      const response = calls[endpoint as keyof typeof calls];
+    const callApmApi = jest
+      .spyOn(callApmApiModule, 'callApmApi')
+      .mockImplementation(({ endpoint }) => {
+        const response = calls[endpoint as keyof typeof calls];
 
-      return response
-        ? Promise.resolve(response)
-        : Promise.reject(`Response for ${endpoint} is not defined`);
-    });
+        return response
+          ? Promise.resolve(response)
+          : Promise.reject(`Response for ${endpoint} is not defined`);
+      });
     jest
       .spyOn(useTransactionBreakdownHooks, 'useTransactionBreakdown')
       .mockReturnValue({
@@ -105,9 +119,7 @@ describe('ServiceOverview', () => {
     );
 
     await waitFor(() =>
-      expect(callApmApi.callApmApi).toHaveBeenCalledTimes(
-        Object.keys(calls).length
-      )
+      expect(callApmApi).toHaveBeenCalledTimes(Object.keys(calls).length)
     );
 
     expect((await findAllByText('Latency')).length).toBeGreaterThan(0);
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
index a4c0e1ce005ce3..da74a6fc0004d5 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
@@ -13,6 +13,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import React, { useState } from 'react';
 import { asInteger } from '../../../../../common/utils/formatters';
+import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { callApmApi } from '../../../../services/rest/createCallApmApi';
@@ -54,7 +55,7 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
     urlParams: { start, end },
     uiFilters,
   } = useUrlParams();
-
+  const { transactionType } = useApmServiceContext();
   const [tableOptions, setTableOptions] = useState<{
     pageIndex: number;
     sort: {
@@ -141,7 +142,7 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
     },
     status,
   } = useFetcher(() => {
-    if (!start || !end) {
+    if (!start || !end || !transactionType) {
       return;
     }
 
@@ -158,6 +159,7 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
           pageIndex: tableOptions.pageIndex,
           sortField: tableOptions.sort.field,
           sortDirection: tableOptions.sort.direction,
+          transactionType,
         },
       },
     }).then((response) => {
@@ -181,6 +183,7 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
     tableOptions.pageIndex,
     tableOptions.sort.field,
     tableOptions.sort.direction,
+    transactionType,
   ]);
 
   const {
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx
index b464fd002644ae..6345d546c716fd 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx
@@ -28,14 +28,15 @@ import {
   callApmApi,
 } from '../../../../services/rest/createCallApmApi';
 import { px, unit } from '../../../../style/variables';
-import { SparkPlot } from '../../../shared/charts/spark_plot';
-import { ImpactBar } from '../../../shared/ImpactBar';
 import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink';
 import { TransactionOverviewLink } from '../../../shared/Links/apm/TransactionOverviewLink';
 import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
+import { TableLinkFlexItem } from '../table_link_flex_item';
+import { SparkPlot } from '../../../shared/charts/spark_plot';
+import { ImpactBar } from '../../../shared/ImpactBar';
+import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
 import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
 import { ServiceOverviewTableContainer } from '../service_overview_table_container';
-import { TableLinkFlexItem } from '../table_link_flex_item';
 
 type ServiceTransactionGroupItem = ValuesType<
   APIReturnType<'GET /api/apm/services/{serviceName}/transactions/groups/overview'>['transactionGroups']
@@ -45,7 +46,7 @@ interface Props {
   serviceName: string;
 }
 
-type SortField = 'latency' | 'throughput' | 'errorRate' | 'impact';
+type SortField = 'name' | 'latency' | 'throughput' | 'errorRate' | 'impact';
 type SortDirection = 'asc' | 'desc';
 
 const PAGE_SIZE = 5;
@@ -85,7 +86,9 @@ function getLatencyAggregationTypeLabel(
   }
 }
 
-export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
+export function ServiceOverviewTransactionsTable(props: Props) {
+  const { serviceName } = props;
+  const { transactionType } = useApmServiceContext();
   const latencyAggregationType = useLatencyAggregationType();
   const {
     uiFilters,
@@ -114,7 +117,7 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
     },
     status,
   } = useFetcher(() => {
-    if (!start || !end || !latencyAggregationType) {
+    if (!start || !end || !latencyAggregationType || !transactionType) {
       return;
     }
 
@@ -132,6 +135,7 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
           pageIndex: tableOptions.pageIndex,
           sortField: tableOptions.sort.field,
           sortDirection: tableOptions.sort.direction,
+          transactionType,
           latencyAggregationType,
         },
       },
@@ -156,6 +160,7 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
     tableOptions.pageIndex,
     tableOptions.sort.field,
     tableOptions.sort.direction,
+    transactionType,
     latencyAggregationType,
   ]);
 
@@ -174,7 +179,7 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
           defaultMessage: 'Name',
         }
       ),
-      render: (_, { name, transactionType }) => {
+      render: (_, { name, transactionType: type }) => {
         return (
           <TruncateWithTooltip
             text={name}
@@ -182,7 +187,7 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
               <TransactionDetailLink
                 serviceName={serviceName}
                 transactionName={name}
-                transactionType={transactionType}
+                transactionType={type}
               >
                 {name}
               </TransactionDetailLink>
@@ -227,7 +232,7 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
       },
     },
     {
-      field: 'error_rate',
+      field: 'errorRate',
       name: i18n.translate(
         'xpack.apm.serviceOverview.transactionsTableColumnErrorRate',
         {
diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_error_rate_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/transaction_error_rate_chart/index.tsx
index 4a0972b519ad5b..3f10b572b42a38 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/transaction_error_rate_chart/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/transaction_error_rate_chart/index.tsx
@@ -14,6 +14,7 @@ import { useTheme } from '../../../../hooks/use_theme';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { callApmApi } from '../../../../services/rest/createCallApmApi';
 import { TimeseriesChart } from '../timeseries_chart';
+import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
 
 function yLabelFormat(y?: number | null) {
   return asPercent(y || 0, 1);
@@ -31,8 +32,8 @@ export function TransactionErrorRateChart({
   const theme = useTheme();
   const { serviceName } = useParams<{ serviceName?: string }>();
   const { urlParams, uiFilters } = useUrlParams();
-
-  const { start, end, transactionType, transactionName } = urlParams;
+  const { transactionType } = useApmServiceContext();
+  const { start, end, transactionName } = urlParams;
 
   const { data, status } = useFetcher(() => {
     if (serviceName && start && end) {
diff --git a/x-pack/plugins/apm/server/lib/services/get_service_error_groups/index.ts b/x-pack/plugins/apm/server/lib/services/get_service_error_groups/index.ts
index 0ca085105c30c2..99382a12419133 100644
--- a/x-pack/plugins/apm/server/lib/services/get_service_error_groups/index.ts
+++ b/x-pack/plugins/apm/server/lib/services/get_service_error_groups/index.ts
@@ -15,6 +15,7 @@ import {
   ERROR_GROUP_ID,
   ERROR_LOG_MESSAGE,
   SERVICE_NAME,
+  TRANSACTION_TYPE,
 } from '../../../../common/elasticsearch_fieldnames';
 import { Setup, SetupTimeRange } from '../../helpers/setup_request';
 import { getBucketSize } from '../../helpers/get_bucket_size';
@@ -32,6 +33,7 @@ export async function getServiceErrorGroups({
   pageIndex,
   sortDirection,
   sortField,
+  transactionType,
 }: {
   serviceName: string;
   setup: Setup & SetupTimeRange;
@@ -40,6 +42,7 @@ export async function getServiceErrorGroups({
   numBuckets: number;
   sortDirection: 'asc' | 'desc';
   sortField: 'name' | 'last_seen' | 'occurrences';
+  transactionType: string;
 }) {
   const { apmEventClient, start, end, esFilter } = setup;
 
@@ -55,6 +58,7 @@ export async function getServiceErrorGroups({
         bool: {
           filter: [
             { term: { [SERVICE_NAME]: serviceName } },
+            { term: { [TRANSACTION_TYPE]: transactionType } },
             { range: rangeFilter(start, end) },
             ...esFilter,
           ],
@@ -127,6 +131,7 @@ export async function getServiceErrorGroups({
           filter: [
             { terms: { [ERROR_GROUP_ID]: sortedErrorGroupIds } },
             { term: { [SERVICE_NAME]: serviceName } },
+            { term: { [TRANSACTION_TYPE]: transactionType } },
             { range: rangeFilter(start, end) },
             ...esFilter,
           ],
diff --git a/x-pack/plugins/apm/server/lib/services/get_service_transaction_groups/get_timeseries_data_for_transaction_groups.ts b/x-pack/plugins/apm/server/lib/services/get_service_transaction_groups/get_timeseries_data_for_transaction_groups.ts
index dd199b6b2c43df..15ed46a23cae85 100644
--- a/x-pack/plugins/apm/server/lib/services/get_service_transaction_groups/get_timeseries_data_for_transaction_groups.ts
+++ b/x-pack/plugins/apm/server/lib/services/get_service_transaction_groups/get_timeseries_data_for_transaction_groups.ts
@@ -38,6 +38,7 @@ export async function getTimeseriesDataForTransactionGroups({
   searchAggregatedTransactions,
   size,
   numBuckets,
+  transactionType,
   latencyAggregationType,
 }: {
   apmEventClient: APMEventClient;
@@ -49,6 +50,7 @@ export async function getTimeseriesDataForTransactionGroups({
   searchAggregatedTransactions: boolean;
   size: number;
   numBuckets: number;
+  transactionType: string;
   latencyAggregationType: LatencyAggregationType;
 }) {
   const { intervalString } = getBucketSize({ start, end, numBuckets });
@@ -72,6 +74,7 @@ export async function getTimeseriesDataForTransactionGroups({
           filter: [
             { terms: { [TRANSACTION_NAME]: transactionNames } },
             { term: { [SERVICE_NAME]: serviceName } },
+            { term: { [TRANSACTION_TYPE]: transactionType } },
             { range: rangeFilter(start, end) },
             ...esFilter,
           ],
diff --git a/x-pack/plugins/apm/server/lib/services/get_service_transaction_groups/get_transaction_groups_for_page.ts b/x-pack/plugins/apm/server/lib/services/get_service_transaction_groups/get_transaction_groups_for_page.ts
index 244c840d190263..9ea0b821256de4 100644
--- a/x-pack/plugins/apm/server/lib/services/get_service_transaction_groups/get_transaction_groups_for_page.ts
+++ b/x-pack/plugins/apm/server/lib/services/get_service_transaction_groups/get_transaction_groups_for_page.ts
@@ -14,6 +14,7 @@ import {
   EVENT_OUTCOME,
   SERVICE_NAME,
   TRANSACTION_NAME,
+  TRANSACTION_TYPE,
 } from '../../../../common/elasticsearch_fieldnames';
 import {
   getProcessorEventForAggregatedTransactions,
@@ -26,6 +27,7 @@ import {
 } from '../../helpers/latency_aggregation_type';
 
 export type ServiceOverviewTransactionGroupSortField =
+  | 'name'
   | 'latency'
   | 'throughput'
   | 'errorRate'
@@ -46,6 +48,7 @@ export async function getTransactionGroupsForPage({
   sortDirection,
   pageIndex,
   size,
+  transactionType,
   latencyAggregationType,
 }: {
   apmEventClient: APMEventClient;
@@ -58,6 +61,7 @@ export async function getTransactionGroupsForPage({
   sortDirection: 'asc' | 'desc';
   pageIndex: number;
   size: number;
+  transactionType: string;
   latencyAggregationType: LatencyAggregationType;
 }) {
   const field = getTransactionDurationFieldForAggregatedTransactions(
@@ -78,6 +82,7 @@ export async function getTransactionGroupsForPage({
         bool: {
           filter: [
             { term: { [SERVICE_NAME]: serviceName } },
+            { term: { [TRANSACTION_TYPE]: transactionType } },
             { range: rangeFilter(start, end) },
             ...esFilter,
           ],
diff --git a/x-pack/plugins/apm/server/lib/services/get_service_transaction_groups/index.ts b/x-pack/plugins/apm/server/lib/services/get_service_transaction_groups/index.ts
index a619e51b8e89ec..41df70c9d54297 100644
--- a/x-pack/plugins/apm/server/lib/services/get_service_transaction_groups/index.ts
+++ b/x-pack/plugins/apm/server/lib/services/get_service_transaction_groups/index.ts
@@ -22,6 +22,7 @@ export async function getServiceTransactionGroups({
   sortDirection,
   sortField,
   searchAggregatedTransactions,
+  transactionType,
   latencyAggregationType,
 }: {
   serviceName: string;
@@ -32,6 +33,7 @@ export async function getServiceTransactionGroups({
   sortDirection: 'asc' | 'desc';
   sortField: ServiceOverviewTransactionGroupSortField;
   searchAggregatedTransactions: boolean;
+  transactionType: string;
   latencyAggregationType: LatencyAggregationType;
 }) {
   const { apmEventClient, start, end, esFilter } = setup;
@@ -51,6 +53,7 @@ export async function getServiceTransactionGroups({
     sortDirection,
     size,
     searchAggregatedTransactions,
+    transactionType,
     latencyAggregationType,
   });
 
@@ -66,6 +69,7 @@ export async function getServiceTransactionGroups({
     serviceName,
     size,
     transactionNames,
+    transactionType,
     latencyAggregationType,
   });
 
diff --git a/x-pack/plugins/apm/server/routes/services.ts b/x-pack/plugins/apm/server/routes/services.ts
index 17430e64d6c9b3..b5e6d80c2b6334 100644
--- a/x-pack/plugins/apm/server/routes/services.ts
+++ b/x-pack/plugins/apm/server/routes/services.ts
@@ -257,6 +257,7 @@ export const serviceErrorGroupsRoute = createRoute({
           t.literal('occurrences'),
           t.literal('name'),
         ]),
+        transactionType: t.string,
       }),
     ]),
   }),
@@ -266,7 +267,14 @@ export const serviceErrorGroupsRoute = createRoute({
 
     const {
       path: { serviceName },
-      query: { size, numBuckets, pageIndex, sortDirection, sortField },
+      query: {
+        numBuckets,
+        pageIndex,
+        size,
+        sortDirection,
+        sortField,
+        transactionType,
+      },
     } = context.params;
     return getServiceErrorGroups({
       serviceName,
@@ -276,6 +284,7 @@ export const serviceErrorGroupsRoute = createRoute({
       pageIndex,
       sortDirection,
       sortField,
+      transactionType,
     });
   },
 });
diff --git a/x-pack/plugins/apm/server/routes/transactions.ts b/x-pack/plugins/apm/server/routes/transactions.ts
index 8621de72adcbb4..12a2ea113b1a1e 100644
--- a/x-pack/plugins/apm/server/routes/transactions.ts
+++ b/x-pack/plugins/apm/server/routes/transactions.ts
@@ -77,11 +77,13 @@ export const transactionGroupsOverviewRoute = createRoute({
         pageIndex: toNumberRt,
         sortDirection: t.union([t.literal('asc'), t.literal('desc')]),
         sortField: t.union([
+          t.literal('name'),
           t.literal('latency'),
           t.literal('throughput'),
           t.literal('errorRate'),
           t.literal('impact'),
         ]),
+        transactionType: t.string,
         latencyAggregationType: latencyAggregationTypeRt,
       }),
     ]),
@@ -99,12 +101,13 @@ export const transactionGroupsOverviewRoute = createRoute({
     const {
       path: { serviceName },
       query: {
-        size,
+        latencyAggregationType,
         numBuckets,
         pageIndex,
+        size,
         sortDirection,
         sortField,
-        latencyAggregationType,
+        transactionType,
       },
     } = context.params;
 
@@ -116,6 +119,7 @@ export const transactionGroupsOverviewRoute = createRoute({
       size,
       sortDirection,
       sortField,
+      transactionType,
       numBuckets,
       latencyAggregationType: latencyAggregationType as LatencyAggregationType,
     });
diff --git a/x-pack/test/apm_api_integration/basic/tests/service_overview/error_groups.ts b/x-pack/test/apm_api_integration/basic/tests/service_overview/error_groups.ts
index 3af85f7d2ae056..eb89f435082a46 100644
--- a/x-pack/test/apm_api_integration/basic/tests/service_overview/error_groups.ts
+++ b/x-pack/test/apm_api_integration/basic/tests/service_overview/error_groups.ts
@@ -30,6 +30,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
             pageIndex: 0,
             sortDirection: 'desc',
             sortField: 'occurrences',
+            transactionType: 'request',
           })}`
         );
 
@@ -57,6 +58,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
             pageIndex: 0,
             sortDirection: 'desc',
             sortField: 'occurrences',
+            transactionType: 'request',
           })}`
         );
 
@@ -114,6 +116,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
             pageIndex: 0,
             sortDirection: 'desc',
             sortField: 'occurrences',
+            transactionType: 'request',
           })}`
         );
 
@@ -135,6 +138,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
             pageIndex: 0,
             sortDirection: 'desc',
             sortField: 'occurrences',
+            transactionType: 'request',
           })}`
         );
 
@@ -156,6 +160,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
             pageIndex: 0,
             sortDirection: 'desc',
             sortField: 'last_seen',
+            transactionType: 'request',
           })}`
         );
 
@@ -179,6 +184,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
             pageIndex: 0,
             sortDirection: 'desc',
             sortField: 'occurrences',
+            transactionType: 'request',
           })}`
         );
 
@@ -203,6 +209,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
                 pageIndex,
                 sortDirection: 'desc',
                 sortField: 'occurrences',
+                transactionType: 'request',
               })}`
             );
 
diff --git a/x-pack/test/apm_api_integration/basic/tests/transactions/error_rate.ts b/x-pack/test/apm_api_integration/basic/tests/transactions/error_rate.ts
index 426f8ab2954acd..e90d23aadcbbe6 100644
--- a/x-pack/test/apm_api_integration/basic/tests/transactions/error_rate.ts
+++ b/x-pack/test/apm_api_integration/basic/tests/transactions/error_rate.ts
@@ -5,6 +5,7 @@
  */
 import expect from '@kbn/expect';
 import { first, last } from 'lodash';
+import { format } from 'url';
 import archives_metadata from '../../../common/archives_metadata';
 import { FtrProviderContext } from '../../../common/ftr_provider_context';
 
@@ -13,19 +14,21 @@ export default function ApiTest({ getService }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
 
   const archiveName = 'apm_8.0.0';
-  const metadata = archives_metadata[archiveName];
 
   // url parameters
-  const start = encodeURIComponent(metadata.start);
-  const end = encodeURIComponent(metadata.end);
-  const uiFilters = encodeURIComponent(JSON.stringify({}));
+  const { start, end } = archives_metadata[archiveName];
+  const uiFilters = '{}';
+  const transactionType = 'request';
 
   describe('Error rate', () => {
+    const url = format({
+      pathname: '/api/apm/services/opbeans-java/transactions/charts/error_rate',
+      query: { start, end, uiFilters, transactionType },
+    });
+
     describe('when data is not loaded', () => {
       it('handles the empty state', async () => {
-        const response = await supertest.get(
-          `/api/apm/services/opbeans-java/transactions/charts/error_rate?start=${start}&end=${end}&uiFilters=${uiFilters}`
-        );
+        const response = await supertest.get(url);
         expect(response.status).to.be(200);
 
         expect(response.body.noHits).to.be(true);
@@ -34,6 +37,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
         expect(response.body.average).to.be(null);
       });
     });
+
     describe('when data is loaded', () => {
       before(() => esArchiver.load(archiveName));
       after(() => esArchiver.unload(archiveName));
@@ -43,10 +47,9 @@ export default function ApiTest({ getService }: FtrProviderContext) {
           transactionErrorRate: Array<{ x: number; y: number | null }>;
           average: number;
         };
+
         before(async () => {
-          const response = await supertest.get(
-            `/api/apm/services/opbeans-java/transactions/charts/error_rate?start=${start}&end=${end}&uiFilters=${uiFilters}`
-          );
+          const response = await supertest.get(url);
           errorRateResponse = response.body;
         });
 
diff --git a/x-pack/test/apm_api_integration/basic/tests/transactions/transactions_groups_overview.ts b/x-pack/test/apm_api_integration/basic/tests/transactions/transactions_groups_overview.ts
index 0a0ba5af5b7901..1eb9afd11c16c9 100644
--- a/x-pack/test/apm_api_integration/basic/tests/transactions/transactions_groups_overview.ts
+++ b/x-pack/test/apm_api_integration/basic/tests/transactions/transactions_groups_overview.ts
@@ -33,6 +33,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
               sortDirection: 'desc',
               sortField: 'impact',
               latencyAggregationType: 'avg',
+              transactionType: 'request',
             },
           })
         );
@@ -63,6 +64,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
               pageIndex: 0,
               sortDirection: 'desc',
               sortField: 'impact',
+              transactionType: 'request',
               latencyAggregationType: 'avg',
             },
           })
@@ -140,6 +142,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
               pageIndex: 0,
               sortDirection: 'desc',
               sortField: 'impact',
+              transactionType: 'request',
               latencyAggregationType: 'avg',
             },
           })
@@ -165,6 +168,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
               pageIndex: 0,
               sortDirection: 'desc',
               sortField: 'impact',
+              transactionType: 'request',
               latencyAggregationType: 'avg',
             },
           })
@@ -190,6 +194,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
               pageIndex: 0,
               sortDirection: 'desc',
               sortField: 'latency',
+              transactionType: 'request',
               latencyAggregationType: 'avg',
             },
           })
@@ -217,6 +222,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
               pageIndex: 0,
               sortDirection: 'desc',
               sortField: 'impact',
+              transactionType: 'request',
               latencyAggregationType: 'avg',
             },
           })
@@ -245,6 +251,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
                   pageIndex,
                   sortDirection: 'desc',
                   sortField: 'impact',
+                  transactionType: 'request',
                   latencyAggregationType: 'avg',
                 },
               })

From 011849faea9ae37883262e304ae692cd37565d44 Mon Sep 17 00:00:00 2001
From: Thomas Watson <w@tson.dk>
Date: Fri, 18 Dec 2020 09:43:33 +0100
Subject: [PATCH 04/75] Bump the CI Node.js version from 14.15.1 to 14.15.2
 (#86254)

This wasn't part of #86087 as Docker Hub wasn't updated at the time.
---
 .ci/Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.ci/Dockerfile b/.ci/Dockerfile
index ec7befe05f0d4d..cf827fc0ed08fc 100644
--- a/.ci/Dockerfile
+++ b/.ci/Dockerfile
@@ -1,7 +1,7 @@
 # NOTE: This Dockerfile is ONLY used to run certain tasks in CI. It is not used to run Kibana or as a distributable.
 # If you're looking for the Kibana Docker image distributable, please see: src/dev/build/tasks/os_packages/docker_generator/templates/dockerfile.template.ts
 
-ARG NODE_VERSION=14.15.1
+ARG NODE_VERSION=14.15.2
 
 FROM node:${NODE_VERSION} AS base
 

From b1d18e5d9edc88d48c8d7786259f0544f87f2fbe Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Fri, 18 Dec 2020 09:40:27 +0000
Subject: [PATCH 05/75] [ML] Fixing job id reuse when previous job was in
 diffrent space (#86270)

---
 .../plugins/ml/server/saved_objects/service.ts | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/ml/server/saved_objects/service.ts b/x-pack/plugins/ml/server/saved_objects/service.ts
index 207f10dc33d4b7..e4833b42b6a2ba 100644
--- a/x-pack/plugins/ml/server/saved_objects/service.ts
+++ b/x-pack/plugins/ml/server/saved_objects/service.ts
@@ -77,7 +77,17 @@ export function jobSavedObjectServiceFactory(
     const id = savedObjectId(job);
 
     try {
-      await savedObjectsClient.delete(ML_SAVED_OBJECT_TYPE, id, { force: true });
+      const [existingJobObject] = await getAllJobObjectsForAllSpaces(jobType, jobId);
+      if (existingJobObject !== undefined) {
+        // a saved object for this job already exists, this may be left over from a previously deleted job
+        if (existingJobObject.namespaces?.length) {
+          // use a force delete just in case the saved object exists only in another space.
+          await _forceDeleteJob(jobType, jobId, existingJobObject.namespaces[0]);
+        } else {
+          // the saved object has no spaces, this is unexpected, attempt a normal delete
+          await savedObjectsClient.delete(ML_SAVED_OBJECT_TYPE, id, { force: true });
+        }
+      }
     } catch (error) {
       // the saved object may exist if a previous job with the same ID has been deleted.
       // if not, this error will be throw which we ignore.
@@ -168,7 +178,7 @@ export function jobSavedObjectServiceFactory(
     return jobObject;
   }
 
-  async function getAllJobObjectsForAllSpaces(jobType?: JobType) {
+  async function getAllJobObjectsForAllSpaces(jobType?: JobType, jobId?: string) {
     await isMlReady();
     const filterObject: JobObjectFilter = {};
 
@@ -176,6 +186,10 @@ export function jobSavedObjectServiceFactory(
       filterObject.type = jobType;
     }
 
+    if (jobId !== undefined) {
+      filterObject.job_id = jobId;
+    }
+
     const { filter, searchFields } = createSavedObjectFilter(filterObject);
     const options: SavedObjectsFindOptions = {
       type: ML_SAVED_OBJECT_TYPE,

From 5c50f08de66ebe2cb7bd7c0221d92fa4869a202a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20St=C3=BCrmer?= <weltenwort@users.noreply.github.com>
Date: Fri, 18 Dec 2020 11:23:51 +0100
Subject: [PATCH 06/75] [Logs UI] Replace custom auto-completion component with
 shared QueryStringInput (#85973)

This replaces the usage of a custom auto-completion component with the shared `<QueryStringInput>` component provided by the `data` plugin. Aside from fixing the focus loss issue that caused #84543 this also introduces the inclusion of historic, local-storage-persisted queries in the suggestions.
---
 .../infra/public/apps/common_providers.tsx    | 24 +++++--
 x-pack/plugins/infra/public/apps/logs_app.tsx | 10 ++-
 .../plugins/infra/public/apps/metrics_app.tsx | 10 ++-
 .../autocomplete_field/autocomplete_field.tsx | 20 +-----
 .../public/pages/logs/stream/page_toolbar.tsx | 64 +++++++++----------
 .../translations/translations/ja-JP.json      |  1 -
 .../translations/translations/zh-CN.json      |  1 -
 7 files changed, 68 insertions(+), 62 deletions(-)

diff --git a/x-pack/plugins/infra/public/apps/common_providers.tsx b/x-pack/plugins/infra/public/apps/common_providers.tsx
index e66c54745ca516..41aa2fd8985850 100644
--- a/x-pack/plugins/infra/public/apps/common_providers.tsx
+++ b/x-pack/plugins/infra/public/apps/common_providers.tsx
@@ -7,7 +7,10 @@
 import { ApolloClient } from 'apollo-client';
 import { AppMountParameters, CoreStart } from 'kibana/public';
 import React, { useMemo } from 'react';
-import { useUiSetting$ } from '../../../../../src/plugins/kibana_react/public';
+import {
+  useUiSetting$,
+  KibanaContextProvider,
+} from '../../../../../src/plugins/kibana_react/public';
 import { EuiThemeProvider } from '../../../observability/public';
 import { TriggersAndActionsUIPublicPluginStart } from '../../../triggers_actions_ui/public';
 import { createKibanaContextForPlugin } from '../hooks/use_kibana';
@@ -16,21 +19,26 @@ import { ApolloClientContext } from '../utils/apollo_context';
 import { HeaderActionMenuProvider } from '../utils/header_action_menu_provider';
 import { NavigationWarningPromptProvider } from '../utils/navigation_warning_prompt';
 import { TriggersActionsProvider } from '../utils/triggers_actions_context';
+import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 
 export const CommonInfraProviders: React.FC<{
   apolloClient: ApolloClient<{}>;
+  appName: string;
+  storage: Storage;
   triggersActionsUI: TriggersAndActionsUIPublicPluginStart;
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
-}> = ({ apolloClient, children, triggersActionsUI, setHeaderActionMenu }) => {
+}> = ({ apolloClient, children, triggersActionsUI, setHeaderActionMenu, appName, storage }) => {
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
   return (
     <TriggersActionsProvider triggersActionsUI={triggersActionsUI}>
       <ApolloClientContext.Provider value={apolloClient}>
         <EuiThemeProvider darkMode={darkMode}>
-          <HeaderActionMenuProvider setHeaderActionMenu={setHeaderActionMenu}>
-            <NavigationWarningPromptProvider>{children}</NavigationWarningPromptProvider>
-          </HeaderActionMenuProvider>
+          <DataUIProviders appName={appName} storage={storage}>
+            <HeaderActionMenuProvider setHeaderActionMenu={setHeaderActionMenu}>
+              <NavigationWarningPromptProvider>{children}</NavigationWarningPromptProvider>
+            </HeaderActionMenuProvider>
+          </DataUIProviders>
         </EuiThemeProvider>
       </ApolloClientContext.Provider>
     </TriggersActionsProvider>
@@ -52,3 +60,9 @@ export const CoreProviders: React.FC<{
     </KibanaContextProviderForPlugin>
   );
 };
+
+const DataUIProviders: React.FC<{ appName: string; storage: Storage }> = ({
+  appName,
+  children,
+  storage,
+}) => <KibanaContextProvider services={{ appName, storage }}>{children}</KibanaContextProvider>;
diff --git a/x-pack/plugins/infra/public/apps/logs_app.tsx b/x-pack/plugins/infra/public/apps/logs_app.tsx
index 666ea026938738..381c75c4b9a271 100644
--- a/x-pack/plugins/infra/public/apps/logs_app.tsx
+++ b/x-pack/plugins/infra/public/apps/logs_app.tsx
@@ -11,6 +11,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
 import { AppMountParameters } from '../../../../../src/core/public';
+import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 import '../index.scss';
 import { NotFoundPage } from '../pages/404';
 import { LinkToLogsPage } from '../pages/link_to/link_to_logs';
@@ -26,6 +27,7 @@ export const renderApp = (
   { element, history, setHeaderActionMenu }: AppMountParameters
 ) => {
   const apolloClient = createApolloClient(core.http.fetch);
+  const storage = new Storage(window.localStorage);
 
   prepareMountElement(element);
 
@@ -33,6 +35,7 @@ export const renderApp = (
     <LogsApp
       apolloClient={apolloClient}
       core={core}
+      storage={storage}
       history={history}
       plugins={plugins}
       setHeaderActionMenu={setHeaderActionMenu}
@@ -51,15 +54,18 @@ const LogsApp: React.FC<{
   history: History<unknown>;
   plugins: InfraClientStartDeps;
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
-}> = ({ apolloClient, core, history, plugins, setHeaderActionMenu }) => {
+  storage: Storage;
+}> = ({ apolloClient, core, history, plugins, setHeaderActionMenu, storage }) => {
   const uiCapabilities = core.application.capabilities;
 
   return (
     <CoreProviders core={core} plugins={plugins}>
       <CommonInfraProviders
         apolloClient={apolloClient}
-        triggersActionsUI={plugins.triggersActionsUi}
+        appName="Logs UI"
         setHeaderActionMenu={setHeaderActionMenu}
+        storage={storage}
+        triggersActionsUI={plugins.triggersActionsUi}
       >
         <Router history={history}>
           <Switch>
diff --git a/x-pack/plugins/infra/public/apps/metrics_app.tsx b/x-pack/plugins/infra/public/apps/metrics_app.tsx
index 37ef29a2b0cd1c..00f8dd281f9710 100644
--- a/x-pack/plugins/infra/public/apps/metrics_app.tsx
+++ b/x-pack/plugins/infra/public/apps/metrics_app.tsx
@@ -11,6 +11,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
 import { AppMountParameters } from '../../../../../src/core/public';
+import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 import '../index.scss';
 import { NotFoundPage } from '../pages/404';
 import { LinkToMetricsPage } from '../pages/link_to/link_to_metrics';
@@ -28,6 +29,7 @@ export const renderApp = (
   { element, history, setHeaderActionMenu }: AppMountParameters
 ) => {
   const apolloClient = createApolloClient(core.http.fetch);
+  const storage = new Storage(window.localStorage);
 
   prepareMountElement(element);
 
@@ -38,6 +40,7 @@ export const renderApp = (
       history={history}
       plugins={plugins}
       setHeaderActionMenu={setHeaderActionMenu}
+      storage={storage}
     />,
     element
   );
@@ -53,15 +56,18 @@ const MetricsApp: React.FC<{
   history: History<unknown>;
   plugins: InfraClientStartDeps;
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
-}> = ({ apolloClient, core, history, plugins, setHeaderActionMenu }) => {
+  storage: Storage;
+}> = ({ apolloClient, core, history, plugins, setHeaderActionMenu, storage }) => {
   const uiCapabilities = core.application.capabilities;
 
   return (
     <CoreProviders core={core} plugins={plugins}>
       <CommonInfraProviders
         apolloClient={apolloClient}
-        triggersActionsUI={plugins.triggersActionsUi}
+        appName="Metrics UI"
         setHeaderActionMenu={setHeaderActionMenu}
+        storage={storage}
+        triggersActionsUI={plugins.triggersActionsUi}
       >
         <Router history={history}>
           <Switch>
diff --git a/x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx b/x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx
index 96bba1b813746f..08594c5ddba185 100644
--- a/x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx
+++ b/x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx
@@ -4,16 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  EuiFieldSearch,
-  EuiFieldSearchProps,
-  EuiOutsideClickDetector,
-  EuiPanel,
-} from '@elastic/eui';
+import { EuiFieldSearch, EuiOutsideClickDetector, EuiPanel } from '@elastic/eui';
 import React from 'react';
-
-import { euiStyled } from '../../../../observability/public';
 import { QuerySuggestion } from '../../../../../../src/plugins/data/public';
+import { euiStyled } from '../../../../observability/public';
 import { composeStateUpdaters } from '../../utils/typed_react';
 import { SuggestionItem } from './suggestion_item';
 
@@ -64,7 +58,7 @@ export class AutocompleteField extends React.Component<
     return (
       <EuiOutsideClickDetector onOutsideClick={this.handleBlur}>
         <AutocompleteContainer>
-          <FixedEuiFieldSearch
+          <EuiFieldSearch
             fullWidth
             disabled={disabled}
             inputRef={this.handleChangeInputRef}
@@ -304,14 +298,6 @@ const withUnfocused = (state: AutocompleteFieldState) => ({
   isFocused: false,
 });
 
-const FixedEuiFieldSearch: React.FC<
-  React.InputHTMLAttributes<HTMLInputElement> &
-    EuiFieldSearchProps & {
-      inputRef?: (element: HTMLInputElement | null) => void;
-      onSearch: (value: string) => void;
-    }
-> = EuiFieldSearch as any;
-
 const AutocompleteContainer = euiStyled.div`
   position: relative;
 `;
diff --git a/x-pack/plugins/infra/public/pages/logs/stream/page_toolbar.tsx b/x-pack/plugins/infra/public/pages/logs/stream/page_toolbar.tsx
index 9fc49073d5ee17..b023029a4186e5 100644
--- a/x-pack/plugins/infra/public/pages/logs/stream/page_toolbar.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/stream/page_toolbar.tsx
@@ -7,21 +7,19 @@
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useContext } from 'react';
-
-import { AutocompleteField } from '../../../components/autocomplete_field';
+import { Query, QueryStringInput } from '../../../../../../../src/plugins/data/public';
 import { Toolbar } from '../../../components/eui';
 import { LogCustomizationMenu } from '../../../components/logging/log_customization_menu';
+import { LogDatepicker } from '../../../components/logging/log_datepicker';
 import { LogHighlightsMenu } from '../../../components/logging/log_highlights_menu';
-import { LogHighlightsState } from '../../../containers/logs/log_highlights/log_highlights';
 import { LogTextScaleControls } from '../../../components/logging/log_text_scale_controls';
 import { LogTextWrapControls } from '../../../components/logging/log_text_wrap_controls';
-import { LogFlyout } from '../../../containers/logs/log_flyout';
-import { LogViewConfiguration } from '../../../containers/logs/log_view_configuration';
 import { LogFilterState } from '../../../containers/logs/log_filter';
+import { LogFlyout } from '../../../containers/logs/log_flyout';
+import { LogHighlightsState } from '../../../containers/logs/log_highlights/log_highlights';
 import { LogPositionState } from '../../../containers/logs/log_position';
-import { WithKueryAutocompletion } from '../../../containers/with_kuery_autocompletion';
-import { LogDatepicker } from '../../../components/logging/log_datepicker';
 import { useLogSourceContext } from '../../../containers/logs/log_source';
+import { LogViewConfiguration } from '../../../containers/logs/log_view_configuration';
 
 export const LogsToolbar = () => {
   const { derivedIndexPattern } = useLogSourceContext();
@@ -58,33 +56,31 @@ export const LogsToolbar = () => {
     <Toolbar>
       <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="s">
         <EuiFlexItem>
-          <WithKueryAutocompletion indexPattern={derivedIndexPattern}>
-            {({ isLoadingSuggestions, loadSuggestions, suggestions }) => (
-              <AutocompleteField
-                isLoadingSuggestions={isLoadingSuggestions}
-                isValid={isFilterQueryDraftValid}
-                loadSuggestions={loadSuggestions}
-                disabled={isStreaming}
-                onChange={(expression: string) => {
-                  setSurroundingLogsId(null);
-                  setLogFilterQueryDraft(expression);
-                }}
-                onSubmit={(expression: string) => {
-                  setSurroundingLogsId(null);
-                  applyLogFilterQuery(expression);
-                }}
-                placeholder={i18n.translate(
-                  'xpack.infra.logsPage.toolbar.kqlSearchFieldPlaceholder',
-                  { defaultMessage: 'Search for log entries… (e.g. host.name:host-1)' }
-                )}
-                suggestions={suggestions}
-                value={filterQueryDraft ? filterQueryDraft.expression : ''}
-                aria-label={i18n.translate('xpack.infra.logsPage.toolbar.kqlSearchFieldAriaLabel', {
-                  defaultMessage: 'Search for log entries',
-                })}
-              />
-            )}
-          </WithKueryAutocompletion>
+          <QueryStringInput
+            disableLanguageSwitcher={true}
+            iconType="search"
+            indexPatterns={[derivedIndexPattern]}
+            isInvalid={!isFilterQueryDraftValid}
+            onChange={(expression: Query) => {
+              if (typeof expression.query === 'string') {
+                setSurroundingLogsId(null);
+                setLogFilterQueryDraft(expression.query);
+              }
+            }}
+            onSubmit={(expression: Query) => {
+              if (typeof expression.query === 'string') {
+                setSurroundingLogsId(null);
+                applyLogFilterQuery(expression.query);
+              }
+            }}
+            placeholder={i18n.translate('xpack.infra.logsPage.toolbar.kqlSearchFieldPlaceholder', {
+              defaultMessage: 'Search for log entries… (e.g. host.name:host-1)',
+            })}
+            query={{
+              query: filterQueryDraft?.expression ?? '',
+              language: filterQueryDraft?.kind ?? 'kuery',
+            }}
+          />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <LogCustomizationMenu>
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index a50c91bb3989d4..c1746fca6873e1 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -9477,7 +9477,6 @@
     "xpack.infra.logsPage.noLoggingIndicesDescription": "追加しましょう！",
     "xpack.infra.logsPage.noLoggingIndicesInstructionsActionLabel": "セットアップの手順を表示",
     "xpack.infra.logsPage.noLoggingIndicesTitle": "ログインデックスがないようです。",
-    "xpack.infra.logsPage.toolbar.kqlSearchFieldAriaLabel": "ログエントリーを検索",
     "xpack.infra.logsPage.toolbar.kqlSearchFieldPlaceholder": "ログエントリーを検索中… (例: host.name:host-1)",
     "xpack.infra.metricDetailPage.awsMetricsLayout.cpuUtilSection.percentSeriesLabel": "パーセント",
     "xpack.infra.metricDetailPage.awsMetricsLayout.cpuUtilSection.sectionLabel": "CPU 使用状況",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 1cfc0cbc38eb3b..50f9da227b81f6 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -9487,7 +9487,6 @@
     "xpack.infra.logsPage.noLoggingIndicesDescription": "让我们添加一些！",
     "xpack.infra.logsPage.noLoggingIndicesInstructionsActionLabel": "查看设置说明",
     "xpack.infra.logsPage.noLoggingIndicesTitle": "似乎您没有任何日志索引。",
-    "xpack.infra.logsPage.toolbar.kqlSearchFieldAriaLabel": "搜索日志条目",
     "xpack.infra.logsPage.toolbar.kqlSearchFieldPlaceholder": "搜索日志条目……（例如 host.name:host-1）",
     "xpack.infra.metricDetailPage.awsMetricsLayout.cpuUtilSection.percentSeriesLabel": "百分比",
     "xpack.infra.metricDetailPage.awsMetricsLayout.cpuUtilSection.sectionLabel": "CPU 使用率",

From 932bdd3d292fe0335ad1da6d5f8635a22475ee23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yulia=20=C4=8Cech?=
 <6585477+yuliacech@users.noreply.github.com>
Date: Fri, 18 Dec 2020 11:48:18 +0100
Subject: [PATCH 07/75] [Index Management] Managed data streams renamed to
 Fleet-managed and table layout improvement (#86285)

* Updated fleet managed labels and table layout

* Added default width to health column
---
 .../client_integration/home/data_streams_tab.test.ts        | 6 +++---
 .../sections/home/data_stream_list/data_stream_badges.tsx   | 6 +++---
 .../data_stream_table/data_stream_table.tsx                 | 2 ++
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts
index b71e058e711cda..87f5408f6ca421 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts
@@ -469,12 +469,12 @@ describe('Data Streams tab', () => {
       testBed.component.update();
     });
 
-    test('listed in the table with Managed label', () => {
+    test('listed in the table with Fleet-managed label', () => {
       const { table } = testBed;
       const { tableCellsValues } = table.getMetaData('dataStreamTable');
 
       expect(tableCellsValues).toEqual([
-        ['', `managed-data-stream${nonBreakingSpace}Managed`, 'green', '1', 'Delete'],
+        ['', `managed-data-stream${nonBreakingSpace}Fleet-managed`, 'green', '1', 'Delete'],
         ['', 'non-managed-data-stream', 'green', '1', 'Delete'],
       ]);
     });
@@ -484,7 +484,7 @@ describe('Data Streams tab', () => {
       let { tableCellsValues } = table.getMetaData('dataStreamTable');
 
       expect(tableCellsValues).toEqual([
-        ['', `managed-data-stream${nonBreakingSpace}Managed`, 'green', '1', 'Delete'],
+        ['', `managed-data-stream${nonBreakingSpace}Fleet-managed`, 'green', '1', 'Delete'],
         ['', 'non-managed-data-stream', 'green', '1', 'Delete'],
       ]);
 
diff --git a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_badges.tsx b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_badges.tsx
index e86dfe7f28585a..9f5d00bb403f42 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_badges.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_badges.tsx
@@ -18,17 +18,17 @@ export const DataStreamsBadges: React.FunctionComponent<Props> = ({ dataStream }
   const badges = [];
   if (isFleetManaged(dataStream)) {
     badges.push(
-      <EuiBadge color="hollow">
+      <EuiBadge color="hollow" key={'managed'}>
         <FormattedMessage
           id="xpack.idxMgmt.dataStreamList.table.managedDataStreamBadge"
-          defaultMessage="Managed"
+          defaultMessage="Fleet-managed"
         />
       </EuiBadge>
     );
   }
   if (dataStream.hidden) {
     badges.push(
-      <EuiBadge color="hollow">
+      <EuiBadge color="hollow" key={'hidden'}>
         <FormattedMessage
           id="xpack.idxMgmt.dataStreamList.table.hiddenDataStreamBadge"
           defaultMessage="Hidden"
diff --git a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_table/data_stream_table.tsx b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_table/data_stream_table.tsx
index dfad10ab624496..d14b03c9c3548d 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_table/data_stream_table.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_table/data_stream_table.tsx
@@ -70,6 +70,7 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({
     render: (health: DataStream['health']) => {
       return <DataHealth health={health} />;
     },
+    width: '100px',
   });
 
   if (includeStats) {
@@ -231,6 +232,7 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({
             defaultMessage="No data streams found"
           />
         }
+        tableLayout={'auto'}
       />
     </>
   );

From 3e5ca0b3c7635dd1a7ff360921eea0b4ff5206e8 Mon Sep 17 00:00:00 2001
From: Christos Nasikas <christos.nasikas@elastic.co>
Date: Fri, 18 Dec 2020 12:57:14 +0200
Subject: [PATCH 08/75] [Security Solution][Case] Fix bug where selected
 connector is not displaying by default when creating a new case (#86111)

---
 .../cases/components/create/form_context.tsx  | 16 +++-
 .../cases/components/create/index.test.tsx    | 89 +++++++++++++++++++
 2 files changed, 104 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/security_solution/public/cases/components/create/form_context.tsx b/x-pack/plugins/security_solution/public/cases/components/create/form_context.tsx
index 4575059a5a6c0b..4315011ac8df16 100644
--- a/x-pack/plugins/security_solution/public/cases/components/create/form_context.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/create/form_context.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 
 import { schema, FormProps } from './schema';
 import { Form, useForm } from '../../../shared_imports';
@@ -15,6 +15,7 @@ import {
 } from '../configure_cases/utils';
 import { usePostCase } from '../../containers/use_post_case';
 import { useConnectors } from '../../containers/configure/use_connectors';
+import { useCaseConfigure } from '../../containers/configure/use_configure';
 import { Case } from '../../containers/types';
 
 const initialCaseValue: FormProps = {
@@ -32,7 +33,15 @@ interface Props {
 
 export const FormContext: React.FC<Props> = ({ children, onSuccess }) => {
   const { connectors } = useConnectors();
+  const { connector: configurationConnector } = useCaseConfigure();
   const { caseData, postCase } = usePostCase();
+  const connectorId = useMemo(
+    () =>
+      connectors.some((connector) => connector.id === configurationConnector.id)
+        ? configurationConnector.id
+        : 'none',
+    [configurationConnector.id, connectors]
+  );
 
   const submitCase = useCallback(
     async (
@@ -62,6 +71,11 @@ export const FormContext: React.FC<Props> = ({ children, onSuccess }) => {
     onSubmit: submitCase,
   });
 
+  const { setFieldValue } = form;
+
+  // Set the selected connector to the configuration connector
+  useEffect(() => setFieldValue('connectorId', connectorId), [connectorId, setFieldValue]);
+
   useEffect(() => {
     if (caseData && onSuccess) {
       onSuccess(caseData);
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 fe5b3bea6445c3..3122b1a60203ce 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
@@ -14,6 +14,7 @@ import { TestProviders } from '../../../common/mock';
 import { usePostCase } from '../../containers/use_post_case';
 import { useGetTags } from '../../containers/use_get_tags';
 import { useConnectors } from '../../containers/configure/use_connectors';
+import { useCaseConfigure } from '../../containers/configure/use_configure';
 import { connectorsMock } from '../../containers/configure/mock';
 import { ConnectorTypes } from '../../../../../case/common/api/connectors';
 import { Router, routeData, mockHistory, mockLocation } from '../__mock__/router';
@@ -21,11 +22,13 @@ import { useGetIncidentTypes } from '../settings/resilient/use_get_incident_type
 import { useGetSeverity } from '../settings/resilient/use_get_severity';
 import { useGetIssueTypes } from '../settings/jira/use_get_issue_types';
 import { useGetFieldsByIssueType } from '../settings/jira/use_get_fields_by_issue_type';
+import { useCaseConfigureResponse } from '../configure_cases/__mock__';
 import { Create } from '.';
 
 jest.mock('../../containers/use_post_case');
 jest.mock('../../containers/use_get_tags');
 jest.mock('../../containers/configure/use_connectors');
+jest.mock('../../containers/configure/use_configure');
 jest.mock('../settings/resilient/use_get_incident_types');
 jest.mock('../settings/resilient/use_get_severity');
 jest.mock('../settings/jira/use_get_issue_types');
@@ -34,6 +37,7 @@ jest.mock('../settings/jira/use_get_single_issue');
 jest.mock('../settings/jira/use_get_issues');
 
 const useConnectorsMock = useConnectors as jest.Mock;
+const useCaseConfigureMock = useCaseConfigure as jest.Mock;
 const usePostCaseMock = usePostCase as jest.Mock;
 const useGetIncidentTypesMock = useGetIncidentTypes as jest.Mock;
 const useGetSeverityMock = useGetSeverity as jest.Mock;
@@ -162,6 +166,7 @@ describe('Create case', () => {
     jest.resetAllMocks();
     usePostCaseMock.mockImplementation(() => defaultPostCase);
     useConnectorsMock.mockReturnValue(sampleConnectorData);
+    useCaseConfigureMock.mockImplementation(() => useCaseConfigureResponse);
     useGetIncidentTypesMock.mockReturnValue(useGetIncidentTypesResponse);
     useGetSeverityMock.mockReturnValue(useGetSeverityResponse);
     useGetIssueTypesMock.mockReturnValue(useGetIssueTypesResponse);
@@ -267,6 +272,90 @@ describe('Create case', () => {
         ).toBeTruthy();
       });
     });
+
+    it('it should select the default connector set in the configuration', async () => {
+      useCaseConfigureMock.mockImplementation(() => ({
+        ...useCaseConfigureResponse,
+        connector: {
+          id: 'servicenow-1',
+          name: 'SN',
+          type: ConnectorTypes.servicenow,
+          fields: null,
+        },
+        persistLoading: false,
+      }));
+
+      useConnectorsMock.mockReturnValue({
+        ...sampleConnectorData,
+        connectors: connectorsMock,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          <Router history={mockHistory}>
+            <Create />
+          </Router>
+        </TestProviders>
+      );
+
+      await fillForm(wrapper);
+      wrapper.update();
+
+      await act(async () => {
+        wrapper.find(`[data-test-subj="create-case-submit"]`).first().simulate('click');
+      });
+
+      await waitFor(() =>
+        expect(postCase).toBeCalledWith({
+          ...sampleData,
+          connector: {
+            fields: {
+              impact: null,
+              severity: null,
+              urgency: null,
+            },
+            id: 'servicenow-1',
+            name: 'My Connector',
+            type: '.servicenow',
+          },
+        })
+      );
+    });
+
+    it('it should default to none if the default connector does not exist in connectors', async () => {
+      useCaseConfigureMock.mockImplementation(() => ({
+        ...useCaseConfigureResponse,
+        connector: {
+          id: 'not-exist',
+          name: 'SN',
+          type: ConnectorTypes.servicenow,
+          fields: null,
+        },
+        persistLoading: false,
+      }));
+
+      useConnectorsMock.mockReturnValue({
+        ...sampleConnectorData,
+        connectors: connectorsMock,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          <Router history={mockHistory}>
+            <Create />
+          </Router>
+        </TestProviders>
+      );
+
+      await fillForm(wrapper);
+      wrapper.update();
+
+      await act(async () => {
+        wrapper.find(`[data-test-subj="create-case-submit"]`).first().simulate('click');
+      });
+
+      await waitFor(() => expect(postCase).toBeCalledWith(sampleData));
+    });
   });
 
   describe('Step 2 - Connector Fields', () => {

From 12ddcbf9c94e42cb7748affb65c68fe81a6d000d Mon Sep 17 00:00:00 2001
From: Christos Nasikas <christos.nasikas@elastic.co>
Date: Fri, 18 Dec 2020 13:15:15 +0200
Subject: [PATCH 09/75] [Security Solution][Case] Fix sync alerts label
 (#86422)

---
 .../public/cases/components/case_action_bar/index.tsx         | 2 +-
 .../public/cases/components/case_view/translations.ts         | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/security_solution/public/cases/components/case_action_bar/index.tsx b/x-pack/plugins/security_solution/public/cases/components/case_action_bar/index.tsx
index 62ce0cc2cc2f53..3bad7b7870a537 100644
--- a/x-pack/plugins/security_solution/public/cases/components/case_action_bar/index.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/case_action_bar/index.tsx
@@ -105,7 +105,7 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
                 <EuiDescriptionListTitle>
                   <EuiFlexGroup component="span" alignItems="center" gutterSize="xs">
                     <EuiFlexItem grow={false}>
-                      <span>{i18n.STATUS}</span>
+                      <span>{i18n.SYNC_ALERTS}</span>
                     </EuiFlexItem>
                     <EuiFlexItem grow={false}>
                       <EuiIconTip content={i18n.SYNC_ALERTS_HELP} />
diff --git a/x-pack/plugins/security_solution/public/cases/components/case_view/translations.ts b/x-pack/plugins/security_solution/public/cases/components/case_view/translations.ts
index c0e4d1ee1c3620..0a5877e7439fda 100644
--- a/x-pack/plugins/security_solution/public/cases/components/case_view/translations.ts
+++ b/x-pack/plugins/security_solution/public/cases/components/case_view/translations.ts
@@ -150,3 +150,7 @@ export const CHANGED_CONNECTOR_FIELD = i18n.translate(
     defaultMessage: `changed connector field`,
   }
 );
+
+export const SYNC_ALERTS = i18n.translate('xpack.securitySolution.case.caseView.syncAlertsLabel', {
+  defaultMessage: `Sync alerts`,
+});

From d5d19f0652c0b5df9971deaf9299bf38591a0b51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mike=20C=C3=B4t=C3=A9?= <mikecote@users.noreply.github.com>
Date: Fri, 18 Dec 2020 08:13:49 -0500
Subject: [PATCH 10/75] Remove the wait_for refresh when partially updating the
 alert's execution status (#86316)

---
 .../saved_objects/partially_update_alert.ts       |  3 ++-
 .../alerts/server/task_runner/task_runner.test.ts | 15 +++++++++++++++
 .../alerts/server/task_runner/task_runner.ts      |  1 +
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/alerts/server/saved_objects/partially_update_alert.ts b/x-pack/plugins/alerts/server/saved_objects/partially_update_alert.ts
index b829a6788a3dd3..a5c915667ec7ac 100644
--- a/x-pack/plugins/alerts/server/saved_objects/partially_update_alert.ts
+++ b/x-pack/plugins/alerts/server/saved_objects/partially_update_alert.ts
@@ -20,6 +20,7 @@ export type PartiallyUpdateableAlertAttributes = Partial<
 >;
 
 export interface PartiallyUpdateAlertSavedObjectOptions {
+  refresh?: SavedObjectsUpdateOptions['refresh'];
   version?: string;
   ignore404?: boolean;
   namespace?: string; // only should be used  with ISavedObjectsRepository
@@ -38,7 +39,7 @@ export async function partiallyUpdateAlert(
 ): Promise<void> {
   // ensure we only have the valid attributes excluded from AAD
   const attributeUpdates = pick(attributes, AlertAttributesExcludedFromAAD);
-  const updateOptions: SavedObjectsUpdateOptions = pick(options, 'namespace', 'version');
+  const updateOptions: SavedObjectsUpdateOptions = pick(options, 'namespace', 'version', 'refresh');
 
   try {
     await savedObjectsClient.update<RawAlert>('alert', id, attributeUpdates, updateOptions);
diff --git a/x-pack/plugins/alerts/server/task_runner/task_runner.test.ts b/x-pack/plugins/alerts/server/task_runner/task_runner.test.ts
index 7545f9a18c4ce9..a4b565194e4314 100644
--- a/x-pack/plugins/alerts/server/task_runner/task_runner.test.ts
+++ b/x-pack/plugins/alerts/server/task_runner/task_runner.test.ts
@@ -233,6 +233,21 @@ describe('Task Runner', () => {
         "message": "alert executed: test:1: 'alert-name'",
       }
     `);
+
+    expect(
+      taskRunnerFactoryInitializerParams.internalSavedObjectsRepository.update
+    ).toHaveBeenCalledWith(
+      'alert',
+      '1',
+      {
+        executionStatus: {
+          error: null,
+          lastExecutionDate: '1970-01-01T00:00:00.000Z',
+          status: 'ok',
+        },
+      },
+      { refresh: false, namespace: undefined }
+    );
   });
 
   test('actionsPlugin.execute is called per alert instance that is scheduled', async () => {
diff --git a/x-pack/plugins/alerts/server/task_runner/task_runner.ts b/x-pack/plugins/alerts/server/task_runner/task_runner.ts
index 17ab0906107455..44cf7dd91be7d5 100644
--- a/x-pack/plugins/alerts/server/task_runner/task_runner.ts
+++ b/x-pack/plugins/alerts/server/task_runner/task_runner.ts
@@ -464,6 +464,7 @@ export class TaskRunner {
       await partiallyUpdateAlert(client, alertId, attributes, {
         ignore404: true,
         namespace,
+        refresh: false,
       });
     } catch (err) {
       this.logger.error(

From 3c284fbff3762296db90fe478e636f136ec10ed1 Mon Sep 17 00:00:00 2001
From: Rudolf Meijering <skaapgif@gmail.com>
Date: Fri, 18 Dec 2020 14:30:14 +0100
Subject: [PATCH 11/75] Attempt to stabilize cloneIndex integration tests
 (#86123)

* Attempt to stabilize cloneIndex integration tests

* Unskip test

* return resolves/rejects and add assertions counts to each test

* Await don't return expect promises

* Await don't return expect promises for other tests too
---
 .../catch_retryable_es_client_errors.test.ts  |   4 +-
 .../integration_tests/actions.test.ts         | 151 ++++++++++++------
 .../migrations_state_action_machine.test.ts   |  16 +-
 .../migrationsv2/state_action_machine.test.ts |  12 +-
 4 files changed, 114 insertions(+), 69 deletions(-)

diff --git a/src/core/server/saved_objects/migrationsv2/actions/catch_retryable_es_client_errors.test.ts b/src/core/server/saved_objects/migrationsv2/actions/catch_retryable_es_client_errors.test.ts
index 3186d7456383ae..33787e3fce53af 100644
--- a/src/core/server/saved_objects/migrationsv2/actions/catch_retryable_es_client_errors.test.ts
+++ b/src/core/server/saved_objects/migrationsv2/actions/catch_retryable_es_client_errors.test.ts
@@ -22,14 +22,14 @@ import { elasticsearchClientMock } from '../../../elasticsearch/client/mocks';
 import { catchRetryableEsClientErrors } from './catch_retryable_es_client_errors';
 
 describe('catchRetryableEsClientErrors', () => {
-  it('rejects non-retryable response errors', () => {
+  it('rejects non-retryable response errors', async () => {
     const error = new esErrors.ResponseError(
       elasticsearchClientMock.createApiResponse({
         body: { error: { type: 'cluster_block_exception' } },
         statusCode: 400,
       })
     );
-    return expect(Promise.reject(error).catch(catchRetryableEsClientErrors)).rejects.toBe(error);
+    await expect(Promise.reject(error).catch(catchRetryableEsClientErrors)).rejects.toBe(error);
   });
   describe('returns left retryable_es_client_error for', () => {
     it('NoLivingConnectionsError', async () => {
diff --git a/src/core/server/saved_objects/migrationsv2/integration_tests/actions.test.ts b/src/core/server/saved_objects/migrationsv2/integration_tests/actions.test.ts
index 937172272f1799..05432d65c05580 100644
--- a/src/core/server/saved_objects/migrationsv2/integration_tests/actions.test.ts
+++ b/src/core/server/saved_objects/migrationsv2/integration_tests/actions.test.ts
@@ -100,8 +100,9 @@ describe('migration actions', () => {
 
   describe('fetchIndices', () => {
     it('resolves right empty record if no indices were found', async () => {
+      expect.assertions(1);
       const task = fetchIndices(client, ['no_such_index']);
-      return expect(task()).resolves.toMatchInlineSnapshot(`
+      await expect(task()).resolves.toMatchInlineSnapshot(`
                 Object {
                   "_tag": "Right",
                   "right": Object {},
@@ -109,12 +110,13 @@ describe('migration actions', () => {
               `);
     });
     it('resolves right record with found indices', async () => {
+      expect.assertions(1);
       const res = (await fetchIndices(client, [
         'no_such_index',
         'existing_index_with_docs',
       ])()) as Either.Right<unknown>;
 
-      return expect(res.right).toEqual(
+      expect(res.right).toEqual(
         expect.objectContaining({
           existing_index_with_docs: {
             aliases: {},
@@ -131,17 +133,19 @@ describe('migration actions', () => {
       await createIndex(client, 'new_index_without_write_block', { properties: {} })();
     });
     it('resolves right when setting the write block succeeds', async () => {
+      expect.assertions(1);
       const task = setWriteBlock(client, 'new_index_without_write_block');
-      return expect(task()).resolves.toMatchInlineSnapshot(`
+      await expect(task()).resolves.toMatchInlineSnapshot(`
                 Object {
                   "_tag": "Right",
                   "right": "set_write_block_succeeded",
                 }
               `);
     });
-    it('resolves right when setting a write block on an index that already has one', () => {
+    it('resolves right when setting a write block on an index that already has one', async () => {
+      expect.assertions(1);
       const task = setWriteBlock(client, 'existing_index_with_write_block');
-      return expect(task()).resolves.toMatchInlineSnapshot(`
+      await expect(task()).resolves.toMatchInlineSnapshot(`
                 Object {
                   "_tag": "Right",
                   "right": "set_write_block_succeeded",
@@ -149,6 +153,7 @@ describe('migration actions', () => {
               `);
     });
     it('once resolved, prevents further writes to the index', async () => {
+      expect.assertions(1);
       const task = setWriteBlock(client, 'new_index_without_write_block');
       await task();
       const sourceDocs = ([
@@ -157,13 +162,14 @@ describe('migration actions', () => {
         { _source: { title: 'doc 3' } },
         { _source: { title: 'doc 4' } },
       ] as unknown) as SavedObjectsRawDoc[];
-      return expect(
+      await expect(
         bulkOverwriteTransformedDocuments(client, 'new_index_without_write_block', sourceDocs)()
       ).rejects.toMatchObject(expect.anything());
     });
-    it('resolves left index_not_found_exception when the index does not exist', () => {
+    it('resolves left index_not_found_exception when the index does not exist', async () => {
+      expect.assertions(1);
       const task = setWriteBlock(client, 'no_such_index');
-      return expect(task()).resolves.toMatchInlineSnapshot(`
+      await expect(task()).resolves.toMatchInlineSnapshot(`
                 Object {
                   "_tag": "Left",
                   "left": Object {
@@ -180,43 +186,51 @@ describe('migration actions', () => {
       await createIndex(client, 'existing_index_with_write_block_2', { properties: {} })();
       await setWriteBlock(client, 'existing_index_with_write_block_2')();
     });
-    it('resolves right if successful when an index already has a write block', () => {
+    it('resolves right if successful when an index already has a write block', async () => {
+      expect.assertions(1);
       const task = removeWriteBlock(client, 'existing_index_with_write_block_2');
-      return expect(task()).resolves.toMatchInlineSnapshot(`
+      await expect(task()).resolves.toMatchInlineSnapshot(`
                 Object {
                   "_tag": "Right",
                   "right": "remove_write_block_succeeded",
                 }
               `);
     });
-    it('resolves right if successful when an index does not have a write block', () => {
+    it('resolves right if successful when an index does not have a write block', async () => {
+      expect.assertions(1);
       const task = removeWriteBlock(client, 'existing_index_without_write_block_2');
-      return expect(task()).resolves.toMatchInlineSnapshot(`
+      await expect(task()).resolves.toMatchInlineSnapshot(`
                 Object {
                   "_tag": "Right",
                   "right": "remove_write_block_succeeded",
                 }
               `);
     });
-    it('rejects if there is a non-retryable error', () => {
+    it('rejects if there is a non-retryable error', async () => {
+      expect.assertions(1);
       const task = removeWriteBlock(client, 'no_such_index');
-      return expect(task()).rejects.toMatchInlineSnapshot(
+      await expect(task()).rejects.toMatchInlineSnapshot(
         `[ResponseError: index_not_found_exception]`
       );
     });
   });
 
   describe('cloneIndex', () => {
-    afterEach(async () => {
+    afterAll(async () => {
       try {
-        await client.indices.delete({ index: 'yellow_then_green_index' });
+        await client.indices.delete({ index: 'clone_*' });
       } catch (e) {
         /** ignore */
       }
     });
-    it('resolves right if cloning into a new target index', () => {
-      const task = cloneIndex(client, 'existing_index_with_write_block', 'yellow_then_green_index');
-      expect(task()).resolves.toMatchInlineSnapshot(`
+    it('resolves right if cloning into a new target index', async () => {
+      expect.assertions(1);
+      const task = cloneIndex(
+        client,
+        'existing_index_with_write_block',
+        'clone_yellow_then_green_index_1'
+      );
+      await expect(task()).resolves.toMatchInlineSnapshot(`
         Object {
           "_tag": "Right",
           "right": Object {
@@ -226,10 +240,11 @@ describe('migration actions', () => {
         }
       `);
     });
-    it.skip('resolves right after waiting for index status to be green if clone target already existed', async () => {
+    it('resolves right after waiting for index status to be green if clone target already existed', async () => {
+      expect.assertions(2);
       // Create a yellow index
       await client.indices.create({
-        index: 'yellow_then_green_index',
+        index: 'clone_yellow_then_green_index_2',
         body: {
           mappings: { properties: {} },
           settings: {
@@ -243,7 +258,7 @@ describe('migration actions', () => {
       const cloneIndexPromise = cloneIndex(
         client,
         'existing_index_with_write_block',
-        'yellow_then_green_index'
+        'clone_yellow_then_green_index_2'
       )();
       let indexGreen = false;
 
@@ -258,7 +273,7 @@ describe('migration actions', () => {
         indexGreen = true;
       }, 10);
 
-      return cloneIndexPromise.then((res) => {
+      await cloneIndexPromise.then((res) => {
         // Assert that the promise didn't resolve before the index became green
         expect(indexGreen).toBe(true);
         expect(res).toMatchInlineSnapshot(`
@@ -272,9 +287,10 @@ describe('migration actions', () => {
         `);
       });
     });
-    it('resolves left index_not_found_exception if the source index does not exist', () => {
-      const task = cloneIndex(client, 'no_such_index', 'yellow_then_green_index');
-      expect(task()).resolves.toMatchInlineSnapshot(`
+    it('resolves left index_not_found_exception if the source index does not exist', async () => {
+      expect.assertions(1);
+      const task = cloneIndex(client, 'no_such_index', 'clone_yellow_then_green_index_3');
+      await expect(task()).resolves.toMatchInlineSnapshot(`
         Object {
           "_tag": "Left",
           "left": Object {
@@ -289,6 +305,7 @@ describe('migration actions', () => {
   // Reindex doesn't return any errors on it's own, so we have to test
   // together with waitForReindexTask
   describe('reindex & waitForReindexTask', () => {
+    expect.assertions(2);
     it('resolves right when reindex succeeds without reindex script', async () => {
       const res = (await reindex(
         client,
@@ -320,6 +337,7 @@ describe('migration actions', () => {
       `);
     });
     it('resolves right when reindex succeeds with reindex script', async () => {
+      expect.assertions(2);
       const res = (await reindex(
         client,
         'existing_index_with_docs',
@@ -349,6 +367,7 @@ describe('migration actions', () => {
       `);
     });
     it('resolves right, ignores version conflicts and does not update existing docs when reindex multiple times', async () => {
+      expect.assertions(3);
       // Reindex with a script
       let res = (await reindex(
         client,
@@ -397,6 +416,7 @@ describe('migration actions', () => {
       `);
     });
     it('resolves right and proceeds to add missing documents if there are some existing docs conflicts', async () => {
+      expect.assertions(2);
       // Simulate a reindex that only adds some of the documents from the
       // source index into the target index
       await createIndex(client, 'reindex_target_4', { properties: {} })();
@@ -444,6 +464,7 @@ describe('migration actions', () => {
       `);
     });
     it('resolves left incompatible_mapping_exception if all reindex failures are due to a strict_dynamic_mapping_exception', async () => {
+      expect.assertions(1);
       // Simulates one instance having completed the UPDATE_TARGET_MAPPINGS
       // step which makes the mappings incompatible with outdated documents.
       // If another instance then tries a reindex it will get a
@@ -479,6 +500,7 @@ describe('migration actions', () => {
                   `);
     });
     it('resolves left incompatible_mapping_exception if all reindex failures are due to a mapper_parsing_exception', async () => {
+      expect.assertions(1);
       // Simulates one instance having completed the UPDATE_TARGET_MAPPINGS
       // step which makes the mappings incompatible with outdated documents.
       // If another instance then tries a reindex it will get a
@@ -512,6 +534,7 @@ describe('migration actions', () => {
                   `);
     });
     it('resolves left index_not_found_exception if source index does not exist', async () => {
+      expect.assertions(1);
       const res = (await reindex(
         client,
         'no_such_index',
@@ -520,7 +543,7 @@ describe('migration actions', () => {
         false
       )()) as Either.Right<ReindexResponse>;
       const task = waitForReindexTask(client, res.right.taskId, '10s');
-      return expect(task()).resolves.toMatchInlineSnapshot(`
+      await expect(task()).resolves.toMatchInlineSnapshot(`
                             Object {
                               "_tag": "Left",
                               "left": Object {
@@ -531,6 +554,7 @@ describe('migration actions', () => {
                     `);
     });
     it('resolves left target_index_had_write_block if all failures are due to a write block', async () => {
+      expect.assertions(1);
       const res = (await reindex(
         client,
         'existing_index_with_docs',
@@ -541,7 +565,7 @@ describe('migration actions', () => {
 
       const task = waitForReindexTask(client, res.right.taskId, '10s');
 
-      return expect(task()).resolves.toMatchInlineSnapshot(`
+      await expect(task()).resolves.toMatchInlineSnapshot(`
                           Object {
                             "_tag": "Left",
                             "left": Object {
@@ -551,6 +575,7 @@ describe('migration actions', () => {
                     `);
     });
     it('resolves left if requireAlias=true and the target is not an alias', async () => {
+      expect.assertions(1);
       const res = (await reindex(
         client,
         'existing_index_with_docs',
@@ -561,7 +586,7 @@ describe('migration actions', () => {
 
       const task = waitForReindexTask(client, res.right.taskId, '10s');
 
-      return expect(task()).resolves.toMatchInlineSnapshot(`
+      await expect(task()).resolves.toMatchInlineSnapshot(`
                 Object {
                   "_tag": "Left",
                   "left": Object {
@@ -575,6 +600,7 @@ describe('migration actions', () => {
 
   describe('verifyReindex', () => {
     it('resolves right if source and target indices have the same amount of documents', async () => {
+      expect.assertions(1);
       const res = (await reindex(
         client,
         'existing_index_with_docs',
@@ -592,9 +618,10 @@ describe('migration actions', () => {
               }
             `);
     });
-    it('resolves left if source and target indices have different amount of documents', () => {
+    it('resolves left if source and target indices have different amount of documents', async () => {
+      expect.assertions(1);
       const task = verifyReindex(client, 'existing_index_with_docs', 'existing_index_2');
-      return expect(task()).resolves.toMatchInlineSnapshot(`
+      await expect(task()).resolves.toMatchInlineSnapshot(`
                 Object {
                   "_tag": "Left",
                   "left": Object {
@@ -604,6 +631,7 @@ describe('migration actions', () => {
               `);
     });
     it('rejects if source or target index does not exist', async () => {
+      expect.assertions(2);
       let task = verifyReindex(client, 'no_such_index', 'existing_index_2');
       await expect(task()).rejects.toMatchInlineSnapshot(
         `[ResponseError: index_not_found_exception]`
@@ -618,6 +646,7 @@ describe('migration actions', () => {
 
   describe('searchForOutdatedDocuments', () => {
     it('only returns documents that match the outdatedDocumentsQuery', async () => {
+      expect.assertions(2);
       const resultsWithQuery = ((await searchForOutdatedDocuments(
         client,
         'existing_index_with_docs',
@@ -635,6 +664,7 @@ describe('migration actions', () => {
       expect(resultsWithoutQuery.length).toBe(4);
     });
     it('resolves with _id, _source, _seq_no and _primary_term', async () => {
+      expect.assertions(1);
       const results = ((await searchForOutdatedDocuments(client, 'existing_index_with_docs', {
         match: { title: { query: 'doc' } },
       })()) as Either.Right<SearchResponse>).right.outdatedDocuments;
@@ -655,6 +685,7 @@ describe('migration actions', () => {
 
   describe('waitForPickupUpdatedMappingsTask', () => {
     it('rejects if there are failures', async () => {
+      expect.assertions(1);
       const res = (await pickupUpdatedMappings(
         client,
         'existing_index_with_write_block'
@@ -664,11 +695,12 @@ describe('migration actions', () => {
 
       // We can't do a snapshot match because the response includes an index
       // id which ES assigns dynamically
-      return expect(task()).rejects.toMatchObject({
+      await expect(task()).rejects.toMatchObject({
         message: /pickupUpdatedMappings task failed with the following failures:\n\[\{\"index\":\"existing_index_with_write_block\"/,
       });
     });
     it('rejects if there is an error', async () => {
+      expect.assertions(1);
       const res = (await pickupUpdatedMappings(
         client,
         'no_such_index'
@@ -676,12 +708,13 @@ describe('migration actions', () => {
 
       const task = waitForPickupUpdatedMappingsTask(client, res.right.taskId, '10s');
 
-      return expect(task()).rejects.toMatchInlineSnapshot(`
+      await expect(task()).rejects.toMatchInlineSnapshot(`
                         [Error: pickupUpdatedMappings task failed with the following error:
                         {"type":"index_not_found_exception","reason":"no such index [no_such_index]","resource.type":"index_or_alias","resource.id":"no_such_index","index_uuid":"_na_","index":"no_such_index"}]
                     `);
     });
     it('resolves right when successful', async () => {
+      expect.assertions(1);
       const res = (await pickupUpdatedMappings(
         client,
         'existing_index_with_docs'
@@ -689,7 +722,7 @@ describe('migration actions', () => {
 
       const task = waitForPickupUpdatedMappingsTask(client, res.right.taskId, '10s');
 
-      return expect(task()).resolves.toMatchInlineSnapshot(`
+      await expect(task()).resolves.toMatchInlineSnapshot(`
                         Object {
                           "_tag": "Right",
                           "right": "pickup_updated_mappings_succeeded",
@@ -700,6 +733,7 @@ describe('migration actions', () => {
 
   describe('updateAndPickupMappings', () => {
     it('resolves right when mappings were updated and picked up', async () => {
+      expect.assertions(3);
       // Create an index without any mappings and insert documents into it
       await createIndex(client, 'existing_index_without_mappings', {
         dynamic: false as any,
@@ -741,13 +775,14 @@ describe('migration actions', () => {
         'existing_index_without_mappings',
         { match: { title: { query: 'doc' } } }
       )()) as Either.Right<SearchResponse>).right.outdatedDocuments;
-      return expect(pickedUpSearchResults.length).toBe(4);
+      expect(pickedUpSearchResults.length).toBe(4);
     });
   });
 
   describe('updateAliases', () => {
     describe('remove', () => {
-      it('resolves left index_not_found_exception when the index does not exist', () => {
+      it('resolves left index_not_found_exception when the index does not exist', async () => {
+        expect.assertions(1);
         const task = updateAliases(client, [
           {
             remove: {
@@ -757,7 +792,7 @@ describe('migration actions', () => {
             },
           },
         ]);
-        return expect(task()).resolves.toMatchInlineSnapshot(`
+        await expect(task()).resolves.toMatchInlineSnapshot(`
                   Object {
                     "_tag": "Left",
                     "left": Object {
@@ -769,6 +804,7 @@ describe('migration actions', () => {
       });
       describe('with must_exist=false', () => {
         it('resolves left alias_not_found_exception when alias does not exist', async () => {
+          expect.assertions(1);
           const task = updateAliases(client, [
             {
               remove: {
@@ -778,7 +814,7 @@ describe('migration actions', () => {
               },
             },
           ]);
-          return expect(task()).resolves.toMatchInlineSnapshot(`
+          await expect(task()).resolves.toMatchInlineSnapshot(`
                     Object {
                       "_tag": "Left",
                       "left": Object {
@@ -790,6 +826,7 @@ describe('migration actions', () => {
       });
       describe('with must_exist=true', () => {
         it('resolves left alias_not_found_exception when alias does not exist on specified index', async () => {
+          expect.assertions(1);
           const task = updateAliases(client, [
             {
               remove: {
@@ -799,7 +836,7 @@ describe('migration actions', () => {
               },
             },
           ]);
-          return expect(task()).resolves.toMatchInlineSnapshot(`
+          await expect(task()).resolves.toMatchInlineSnapshot(`
                     Object {
                       "_tag": "Left",
                       "left": Object {
@@ -809,6 +846,7 @@ describe('migration actions', () => {
                   `);
         });
         it('resolves left alias_not_found_exception when alias does not exist', async () => {
+          expect.assertions(1);
           const task = updateAliases(client, [
             {
               remove: {
@@ -818,7 +856,7 @@ describe('migration actions', () => {
               },
             },
           ]);
-          return expect(task()).resolves.toMatchInlineSnapshot(`
+          await expect(task()).resolves.toMatchInlineSnapshot(`
                     Object {
                       "_tag": "Left",
                       "left": Object {
@@ -830,7 +868,8 @@ describe('migration actions', () => {
       });
     });
     describe('remove_index', () => {
-      it('left index_not_found_exception if index does not exist', () => {
+      it('left index_not_found_exception if index does not exist', async () => {
+        expect.assertions(1);
         const task = updateAliases(client, [
           {
             remove_index: {
@@ -838,7 +877,7 @@ describe('migration actions', () => {
             },
           },
         ]);
-        return expect(task()).resolves.toMatchInlineSnapshot(`
+        await expect(task()).resolves.toMatchInlineSnapshot(`
                   Object {
                     "_tag": "Left",
                     "left": Object {
@@ -848,7 +887,8 @@ describe('migration actions', () => {
                   }
                 `);
       });
-      it('left remove_index_not_a_concrete_index when remove_index targets an alias', () => {
+      it('left remove_index_not_a_concrete_index when remove_index targets an alias', async () => {
+        expect.assertions(1);
         const task = updateAliases(client, [
           {
             remove_index: {
@@ -856,7 +896,7 @@ describe('migration actions', () => {
             },
           },
         ]);
-        return expect(task()).resolves.toMatchInlineSnapshot(`
+        await expect(task()).resolves.toMatchInlineSnapshot(`
                   Object {
                     "_tag": "Left",
                     "left": Object {
@@ -872,7 +912,8 @@ describe('migration actions', () => {
     afterAll(async () => {
       await client.indices.delete({ index: 'yellow_then_green_index' });
     });
-    it.skip('resolves right after waiting for an index status to be green if the index already existed', async () => {
+    it('resolves right after waiting for an index status to be green if the index already existed', async () => {
+      expect.assertions(2);
       // Create a yellow index
       await client.indices.create(
         {
@@ -903,7 +944,7 @@ describe('migration actions', () => {
         indexGreen = true;
       }, 10);
 
-      return createIndexPromise.then((res) => {
+      await createIndexPromise.then((res) => {
         // Assert that the promise didn't resolve before the index became green
         expect(indexGreen).toBe(true);
         expect(res).toMatchInlineSnapshot(`
@@ -914,24 +955,26 @@ describe('migration actions', () => {
               `);
       });
     });
-    it('rejects when there is an unexpected error creating the index', () => {
+    it('rejects when there is an unexpected error creating the index', async () => {
+      expect.assertions(1);
       // Creating an index with the same name as an existing alias to induce
       // failure
-      expect(
+      await expect(
         createIndex(client, 'existing_index_2_alias', undefined as any)()
       ).rejects.toMatchInlineSnapshot(`[ResponseError: invalid_index_name_exception]`);
     });
   });
 
   describe('bulkOverwriteTransformedDocuments', () => {
-    it('resolves right when documents do not yet exist in the index', () => {
+    it('resolves right when documents do not yet exist in the index', async () => {
+      expect.assertions(1);
       const newDocs = ([
         { _source: { title: 'doc 5' } },
         { _source: { title: 'doc 6' } },
         { _source: { title: 'doc 7' } },
       ] as unknown) as SavedObjectsRawDoc[];
       const task = bulkOverwriteTransformedDocuments(client, 'existing_index_with_docs', newDocs);
-      return expect(task()).resolves.toMatchInlineSnapshot(`
+      await expect(task()).resolves.toMatchInlineSnapshot(`
                 Object {
                   "_tag": "Right",
                   "right": "bulk_index_succeeded",
@@ -939,6 +982,7 @@ describe('migration actions', () => {
               `);
     });
     it('resolves right even if there were some version_conflict_engine_exception', async () => {
+      expect.assertions(1);
       const existingDocs = ((await searchForOutdatedDocuments(
         client,
         'existing_index_with_docs',
@@ -949,20 +993,21 @@ describe('migration actions', () => {
         ...existingDocs,
         ({ _source: { title: 'doc 8' } } as unknown) as SavedObjectsRawDoc,
       ]);
-      return expect(task()).resolves.toMatchInlineSnapshot(`
+      await expect(task()).resolves.toMatchInlineSnapshot(`
                 Object {
                   "_tag": "Right",
                   "right": "bulk_index_succeeded",
                 }
               `);
     });
-    it('rejects if there are errors', () => {
+    it('rejects if there are errors', async () => {
+      expect.assertions(1);
       const newDocs = ([
         { _source: { title: 'doc 5' } },
         { _source: { title: 'doc 6' } },
         { _source: { title: 'doc 7' } },
       ] as unknown) as SavedObjectsRawDoc[];
-      return expect(
+      await expect(
         bulkOverwriteTransformedDocuments(client, 'existing_index_with_write_block', newDocs)()
       ).rejects.toMatchObject(expect.anything());
     });
diff --git a/src/core/server/saved_objects/migrationsv2/migrations_state_action_machine.test.ts b/src/core/server/saved_objects/migrationsv2/migrations_state_action_machine.test.ts
index 6dbb986e868eea..2baf27e94edb30 100644
--- a/src/core/server/saved_objects/migrationsv2/migrations_state_action_machine.test.ts
+++ b/src/core/server/saved_objects/migrationsv2/migrations_state_action_machine.test.ts
@@ -142,8 +142,8 @@ describe('migrationsStateActionMachine', () => {
       }
     `);
   });
-  it('resolves when reaching the DONE state', () => {
-    return expect(
+  it('resolves when reaching the DONE state', async () => {
+    await expect(
       migrationStateActionMachine({
         initialState,
         logger: mockLogger.get(),
@@ -152,8 +152,8 @@ describe('migrationsStateActionMachine', () => {
       })
     ).resolves.toEqual(expect.anything());
   });
-  it('resolves with migrated status if some sourceIndex in the DONE state', () => {
-    return expect(
+  it('resolves with migrated status if some sourceIndex in the DONE state', async () => {
+    await expect(
       migrationStateActionMachine({
         initialState: { ...initialState, ...{ sourceIndex: Option.some('source-index') } },
         logger: mockLogger.get(),
@@ -162,8 +162,8 @@ describe('migrationsStateActionMachine', () => {
       })
     ).resolves.toEqual(expect.objectContaining({ status: 'migrated' }));
   });
-  it('resolves with patched status if none sourceIndex in the DONE state', () => {
-    return expect(
+  it('resolves with patched status if none sourceIndex in the DONE state', async () => {
+    await expect(
       migrationStateActionMachine({
         initialState: { ...initialState, ...{ sourceIndex: Option.none } },
         logger: mockLogger.get(),
@@ -172,8 +172,8 @@ describe('migrationsStateActionMachine', () => {
       })
     ).resolves.toEqual(expect.objectContaining({ status: 'patched' }));
   });
-  it('rejects with error message when reaching the FATAL state', () => {
-    return expect(
+  it('rejects with error message when reaching the FATAL state', async () => {
+    await expect(
       migrationStateActionMachine({
         initialState: { ...initialState, reason: 'the fatal reason' } as State,
         logger: mockLogger.get(),
diff --git a/src/core/server/saved_objects/migrationsv2/state_action_machine.test.ts b/src/core/server/saved_objects/migrationsv2/state_action_machine.test.ts
index 15dde10eb21ece..3760b925913463 100644
--- a/src/core/server/saved_objects/migrationsv2/state_action_machine.test.ts
+++ b/src/core/server/saved_objects/migrationsv2/state_action_machine.test.ts
@@ -86,14 +86,14 @@ describe('state action machine', () => {
     });
   });
 
-  test('rejects if an exception is throw from inside an action', () => {
-    return expect(
+  test('rejects if an exception is throw from inside an action', async () => {
+    await expect(
       stateActionMachine({ ...state, controlState: 'THROW' }, next, countUntilThree)
     ).rejects.toThrowErrorMatchingInlineSnapshot(`"Invalid control state"`);
   });
 
-  test('resolve with the final state once all steps are completed', () => {
-    return expect(finalStateP).resolves.toMatchInlineSnapshot(`
+  test('resolve with the final state once all steps are completed', async () => {
+    await expect(finalStateP).resolves.toMatchInlineSnapshot(`
       Object {
         "controlState": "DONE",
         "count": 3,
@@ -101,8 +101,8 @@ describe('state action machine', () => {
     `);
   });
 
-  test("rejects if control state doesn't change after 50 steps", () => {
-    return expect(
+  test("rejects if control state doesn't change after 50 steps", async () => {
+    await expect(
       stateActionMachine(state, next, countUntilModel(51))
     ).rejects.toThrowErrorMatchingInlineSnapshot(
       `"Control state didn't change after 50 steps aborting."`

From cea865f5a95414c1ff396efec97576c81a116a45 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@gmail.com>
Date: Fri, 18 Dec 2020 14:59:49 +0100
Subject: [PATCH 12/75] [Lens] fix transition date_histogram/last_value -> top
 values/last_value (#86429)

---
 .../operations/definitions/terms/index.tsx    |  3 +-
 .../definitions/terms/terms.test.tsx          | 33 ++++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/index.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/index.tsx
index 1e2d800cb3e80a..5d96efa8f68cb3 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/index.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/index.tsx
@@ -90,7 +90,8 @@ export const termsOperation: OperationDefinition<TermsIndexPatternColumn, 'field
   buildColumn({ layer, field, indexPattern }) {
     const existingMetricColumn = Object.entries(layer.columns)
       .filter(
-        ([columnId, column]) => column && !column.isBucketed && !isReferenced(layer, columnId)
+        ([columnId, column]) =>
+          column && !isReferenced(layer, columnId) && isSortableByColumn(column)
       )
       .map(([id]) => id)[0];
 
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/terms.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/terms.test.tsx
index dfca730c004dee..fc8f8534bcfb26 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/terms.test.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/terms.test.tsx
@@ -305,7 +305,7 @@ describe('terms', () => {
       expect(termsColumn.params.otherBucket).toEqual(false);
     });
 
-    it('should use existing metric column as order column', () => {
+    it('should use existing sortable metric column as order column', () => {
       const termsColumn = termsOperation.buildColumn({
         indexPattern: createMockedIndexPattern(),
         layer: {
@@ -335,6 +335,37 @@ describe('terms', () => {
         })
       );
     });
+    it('should set alphabetical order type if metric column is of type last value', () => {
+      const termsColumn = termsOperation.buildColumn({
+        indexPattern: createMockedIndexPattern(),
+        layer: {
+          columns: {
+            col1: {
+              label: 'Last value of a',
+              dataType: 'number',
+              isBucketed: false,
+              sourceField: 'a',
+              operationType: 'last_value',
+              params: {
+                sortField: 'datefield',
+              },
+            },
+          },
+          columnOrder: [],
+          indexPatternId: '',
+        },
+        field: {
+          aggregatable: true,
+          searchable: true,
+          type: 'boolean',
+          name: 'test',
+          displayName: 'test',
+        },
+      });
+      expect(termsColumn.params).toEqual(
+        expect.objectContaining({ orderBy: { type: 'alphabetical' } })
+      );
+    });
 
     it('should use the default size when there is an existing bucket', () => {
       const termsColumn = termsOperation.buildColumn({

From ddea10e718446c42828398fc39bc46f971959569 Mon Sep 17 00:00:00 2001
From: Nick Partridge <nick.ryan.partridge@gmail.com>
Date: Fri, 18 Dec 2020 08:38:07 -0600
Subject: [PATCH 13/75] Create vis_type_xy plugin to replace histogram, area
 and line charts (#78154)

---
 docs/developer/plugin-list.asciidoc           |   2 +-
 docs/management/advanced-options.asciidoc     |   3 +
 packages/kbn-optimizer/limits.yml             |   4 +-
 .../services/legacy_colors/colors.test.ts     |   9 +
 .../public/services/legacy_colors/colors.ts   |   4 +-
 .../static/components/basic_options.tsx       |   4 +-
 .../public/static/components/collections.ts   |  25 +-
 .../static/components/color_picker.scss       |  18 +
 .../public/static/components/color_picker.tsx | 138 +++++
 .../public/static/components/current_time.tsx |  64 +++
 .../public/static/components/endzones.tsx     | 197 ++++++++
 .../charts/public/static/components/index.ts  |   6 +-
 .../static/components/legend_toggle.scss      |  20 +
 .../static/components/legend_toggle.tsx       |  62 +++
 .../charts/public/static/components/types.ts  |   6 +-
 src/plugins/charts/public/static/index.ts     |   1 +
 .../charts/public/static/utils/index.ts       |  20 +
 .../static/utils/transform_click_event.ts     | 238 +++++++++
 .../angular/directives/histogram.tsx          | 188 ++-----
 .../data_sets/ecommerce/saved_objects.ts      |   2 +-
 .../data_sets/flights/saved_objects.ts        |  10 +-
 .../data_sets/logs/saved_objects.ts           |   2 +-
 .../public/components/agg_add.tsx             |  34 +-
 .../components/sidebar/use_option_tabs.ts     |   5 +-
 .../public/default_editor_controller.tsx      |   1 +
 .../vis_default_editor/public/schemas.ts      |   3 +
 .../vis_type_markdown/public/to_ast.test.ts   |   2 +
 .../vis_type_markdown/public/to_ast.ts        |   4 +-
 .../public/components/metric_vis_options.tsx  |   6 +-
 .../vis_type_metric/public/metric_vis_fn.ts   |  10 +-
 .../vis_type_metric/public/metric_vis_type.ts |  10 +-
 src/plugins/vis_type_metric/public/types.ts   |   4 +-
 .../__snapshots__/area_decorator.test.js.snap |   2 +-
 .../__snapshots__/bar_decorator.test.js.snap  |   2 +-
 src/plugins/vis_type_vislib/kibana.json       |   3 +-
 src/plugins/vis_type_vislib/public/area.ts    | 166 +-----
 .../options/metrics_axes/index.test.tsx       | 248 ---------
 .../public/editor/collections.ts              |  73 +++
 .../components}/gauge/index.tsx               |   0
 .../components}/gauge/labels_panel.tsx        |   0
 .../components}/gauge/ranges_panel.tsx        |   0
 .../components}/gauge/style_panel.tsx         |   0
 .../components}/heatmap/index.tsx             |   5 +-
 .../components}/heatmap/labels_panel.tsx      |   7 +-
 .../options => editor/components}/index.tsx   |  15 +-
 .../options => editor/components}/pie.tsx     |   5 +-
 .../vis_type_vislib/public/editor/index.ts    |  21 +
 src/plugins/vis_type_vislib/public/gauge.ts   |  23 +-
 src/plugins/vis_type_vislib/public/goal.ts    |  14 +-
 src/plugins/vis_type_vislib/public/heatmap.ts |  22 +-
 .../vis_type_vislib/public/histogram.ts       | 170 +------
 .../vis_type_vislib/public/horizontal_bar.ts  | 167 +-----
 src/plugins/vis_type_vislib/public/line.ts    | 158 +-----
 src/plugins/vis_type_vislib/public/pie.ts     |  10 +-
 src/plugins/vis_type_vislib/public/pie_fn.ts  |   9 +-
 src/plugins/vis_type_vislib/public/plugin.ts  |  43 +-
 src/plugins/vis_type_vislib/public/to_ast.ts  |  19 +-
 .../vis_type_vislib/public/to_ast_esaggs.ts   |   2 +
 src/plugins/vis_type_vislib/public/types.ts   | 112 ++---
 .../public/utils/collections.ts               | 338 -------------
 .../vis_type_vislib/public/vis_renderer.tsx   |  13 +-
 .../public/vis_type_vislib_vis_fn.ts          |  10 +-
 .../public/vis_type_vislib_vis_types.ts       |   6 +
 .../vis_type_vislib/public/vis_wrapper.tsx    |   3 +-
 .../vislib/components/legend/_legend.scss     |  19 -
 .../vislib/components/legend/legend.test.tsx  |   6 +-
 .../vislib/components/legend/legend.tsx       |  18 +-
 .../vislib/components/legend/legend_item.tsx  |  47 +-
 .../helpers/point_series/_add_to_siri.test.ts |   3 +-
 .../helpers/point_series/_add_to_siri.ts      |   6 +-
 .../helpers/point_series/_get_aspects.test.ts |   4 +-
 .../helpers/point_series/_get_aspects.ts      |   4 +-
 .../helpers/point_series/_get_point.test.ts   |   8 +-
 .../helpers/point_series/_init_x_axis.test.ts |  14 +-
 .../point_series/_ordered_date_axis.test.ts   |   5 +-
 .../helpers/point_series/point_series.test.ts |   5 +-
 .../helpers/point_series/point_series.ts      |  43 +-
 .../public/vislib/lib/handler.js              |   5 +-
 .../types/testdata_linechart_percentile.json  |   4 +-
 ...data_linechart_percentile_float_value.json |   6 +-
 ...nechart_percentile_float_value_result.json |   4 +-
 .../testdata_linechart_percentile_result.json |   4 +-
 .../vislib/visualizations/gauge_chart.js      |   4 +-
 .../point_series/heatmap_chart.js             |   4 +-
 .../vis_type_vislib/server/ui_settings.ts     |   2 +
 src/plugins/vis_type_xy/README.md             |   2 +-
 src/plugins/vis_type_xy/common/index.ts       |  37 ++
 src/plugins/vis_type_xy/jest.config.js        |  24 +
 src/plugins/vis_type_xy/kibana.json           |   3 +-
 .../public/__snapshots__/to_ast.test.ts.snap  |  22 +
 src/plugins/vis_type_xy/public/_chart.scss    |   7 +
 .../public/components/_detailed_tooltip.scss  |  34 ++
 .../public/components/detailed_tooltip.tsx    | 142 ++++++
 .../vis_type_xy/public/components/index.ts    |  25 +
 .../public/components/split_chart_warning.tsx |  55 ++
 .../vis_type_xy/public/components/xy_axis.tsx |  55 ++
 .../public/components/xy_current_time.tsx     |  37 ++
 .../public/components/xy_endzones.tsx         |  68 +++
 .../public/components/xy_settings.tsx         | 182 +++++++
 .../public/components/xy_threshold_line.tsx   |  58 +++
 .../vis_type_xy/public/config/get_agg_id.ts   |  25 +
 .../vis_type_xy/public/config/get_aspects.ts  |  95 ++++
 .../vis_type_xy/public/config/get_axis.ts     | 198 ++++++++
 .../vis_type_xy/public/config/get_config.ts   | 134 +++++
 .../vis_type_xy/public/config/get_legend.ts   |  27 +
 .../vis_type_xy/public/config/get_rotation.ts |  18 +-
 .../public/config/get_threshold_line.ts       |  54 ++
 .../vis_type_xy/public/config/get_tooltip.ts  |  33 ++
 .../vis_type_xy/public/config/index.ts        |  21 +
 .../vis_type_xy/public/editor/collections.ts  | 201 ++++++++
 .../public/editor}/common_config.tsx          |  33 +-
 .../public/editor}/components/common/index.ts |   0
 .../components/common/truncate_labels.tsx     |   2 +-
 .../components/common/validation_wrapper.tsx  |  14 +-
 .../public/editor}/components/index.ts        |   0
 .../editor/components/options/index.tsx       |  39 ++
 .../category_axis_panel.test.tsx.snap         |   2 +-
 .../__snapshots__/chart_options.test.tsx.snap |   0
 .../custom_extents_options.test.tsx.snap      |   0
 .../__snapshots__/index.test.tsx.snap         |   1 -
 .../__snapshots__/label_options.test.tsx.snap |   2 +-
 .../__snapshots__/line_options.test.tsx.snap  |   0
 .../value_axes_panel.test.tsx.snap            |   4 +-
 .../value_axis_options.test.tsx.snap          |   4 -
 .../__snapshots__/y_extents.test.tsx.snap     |   0
 .../metrics_axes/category_axis_panel.test.tsx |   8 +-
 .../metrics_axes/category_axis_panel.tsx      |  27 +-
 .../metrics_axes/chart_options.test.tsx       |  13 +-
 .../options/metrics_axes/chart_options.tsx    |  25 +-
 .../custom_extents_options.test.tsx           |   1 +
 .../metrics_axes/custom_extents_options.tsx   |  21 +-
 .../options/metrics_axes/index.test.tsx       | 476 ++++++++++++++++++
 .../components/options/metrics_axes/index.tsx |  79 ++-
 .../metrics_axes/label_options.test.tsx       |   1 +
 .../options/metrics_axes/label_options.tsx    |  23 +-
 .../metrics_axes/line_options.test.tsx        |   4 +-
 .../options/metrics_axes/line_options.tsx     |  15 +-
 .../components/options/metrics_axes/mocks.ts  |  46 +-
 .../options/metrics_axes/series_panel.tsx     |  18 +-
 .../components/options/metrics_axes/utils.ts  |  96 ++--
 .../metrics_axes/value_axes_panel.test.tsx    |  11 +-
 .../options/metrics_axes/value_axes_panel.tsx |  15 +-
 .../metrics_axes/value_axis_options.test.tsx  |  64 +--
 .../metrics_axes/value_axis_options.tsx       |  54 +-
 .../options/metrics_axes/y_extents.test.tsx   |  10 +-
 .../options/metrics_axes/y_extents.tsx        |  16 +-
 .../point_series/elastic_charts_options.tsx   |  69 +++
 .../options/point_series/grid_panel.tsx       |  57 ++-
 .../components/options/point_series/index.ts  |   0
 .../options/point_series/point_series.tsx     |  56 ++-
 .../options/point_series/threshold_panel.tsx  |  32 +-
 .../vis_type_xy/public/editor/index.ts        |  21 +
 .../vis_type_xy/public/editor/positions.ts    |  48 ++
 .../vis_type_xy/public/editor/scale_types.ts  |  43 ++
 src/plugins/vis_type_xy/public/index.ts       |  30 +-
 src/plugins/vis_type_xy/public/plugin.ts      |  76 +--
 src/plugins/vis_type_xy/public/services.ts    |  49 ++
 src/plugins/vis_type_xy/public/to_ast.test.ts |  60 +++
 src/plugins/vis_type_xy/public/to_ast.ts      |  94 ++++
 .../vis_type_xy/public/to_ast_esaggs.ts       |  46 ++
 .../vis_type_xy/public/types/config.ts        | 130 +++++
 .../vis_type_xy/public/types/constants.ts     |  67 +++
 src/plugins/vis_type_xy/public/types/index.ts |  23 +
 src/plugins/vis_type_xy/public/types/param.ts | 160 ++++++
 .../public/types/vis_type.ts}                 |  32 +-
 .../vis_type_xy/public/utils/accessors.tsx    |  90 ++++
 .../vis_type_xy/public/utils/domain.ts        |  94 ++++
 .../public/utils/get_legend_actions.tsx       | 113 +++++
 .../public/utils/get_series_name_fn.ts        |  73 +++
 .../public/utils/get_time_zone.tsx            |  36 ++
 .../vis_type_xy/public/utils/index.tsx        |  26 +
 .../public/utils/render_all_series.tsx        | 179 +++++++
 .../public/utils/use_color_picker.tsx         |  79 +++
 .../vis_type_xy/public/vis_component.tsx      | 327 ++++++++++++
 .../vis_type_xy/public/vis_renderer.tsx       |  70 +++
 .../vis_type_xy/public/vis_types/area.tsx     | 201 ++++++++
 .../public/vis_types/histogram.tsx            | 204 ++++++++
 .../public/vis_types/horizontal_bar.tsx       | 203 ++++++++
 .../vis_type_xy/public/vis_types/index.ts     |  43 ++
 .../vis_type_xy/public/vis_types/line.tsx     | 195 +++++++
 .../public/vis_types/split_tooltip.tsx        |  34 ++
 src/plugins/vis_type_xy/public/xy_vis_fn.ts   |  86 ++++
 src/plugins/vis_type_xy/server/index.ts       |  11 +-
 src/plugins/vis_type_xy/server/plugin.ts      |  57 +++
 src/plugins/visualizations/public/index.ts    |   1 +
 .../public/legacy/build_pipeline.ts           |   2 +
 src/plugins/visualizations/public/types.ts    |   3 +-
 src/plugins/visualizations/public/vis.ts      |   1 +
 .../visualization_migrations.test.ts          |  90 ++++
 .../saved_objects/visualization_migrations.ts |  69 ++-
 .../apis/saved_objects/find.js                |   4 +-
 ...{bwc_shared_urls.js => bwc_shared_urls.ts} |   6 +-
 ...ables.js => create_and_add_embeddables.ts} |   3 +-
 ...{dashboard_clone.js => dashboard_clone.ts} |   4 +-
 ..._filter_bar.js => dashboard_filter_bar.ts} |   4 +-
 ...rd_filtering.js => dashboard_filtering.ts} |   4 +-
 .../{dashboard_grid.js => dashboard_grid.ts}  |   4 +-
 ...hboard_listing.js => dashboard_listing.ts} |   4 +-
 ...hboard_options.js => dashboard_options.ts} |   6 +-
 ...rd_query_bar.js => dashboard_query_bar.ts} |   4 +-
 .../{dashboard_save.js => dashboard_save.ts}  |   4 +-
 ...aved_query.js => dashboard_saved_query.ts} |  11 +-
 ...rd_snapshots.js => dashboard_snapshots.ts} |   8 +-
 ...{dashboard_state.js => dashboard_state.ts} |  47 +-
 .../{dashboard_time.js => dashboard_time.ts}  |   4 +-
 ...ime_picker.js => dashboard_time_picker.ts} |   6 +-
 ...ttributes.js => data_shared_attributes.ts} |   6 +-
 ...irects.js => edit_embeddable_redirects.ts} |   4 +-
 .../{embed_mode.js => embed_mode.ts}          |   4 +-
 ...e_rendering.js => embeddable_rendering.ts} |   6 +-
 ...{empty_dashboard.js => empty_dashboard.ts} |   4 +-
 ...ull_screen_mode.js => full_screen_mode.ts} |   4 +-
 .../apps/dashboard/{index.js => index.ts}     |  29 +-
 ...xpand_toggle.js => panel_expand_toggle.ts} |   4 +-
 .../{time_zones.js => time_zones.ts}          |   4 +-
 .../dashboard/{view_edit.js => view_edit.ts}  |   8 +-
 .../{_date_nanos.js => _date_nanos.ts}        |   4 +-
 ...te_nanos_mixed.js => _date_nanos_mixed.ts} |   4 +-
 .../discover/{_discover.js => _discover.ts}   |   8 +-
 ...{_doc_navigation.js => _doc_navigation.ts} |   4 +-
 .../{_field_data.js => _field_data.ts}        |   4 +-
 .../{_filter_editor.js => _filter_editor.ts}  |   4 +-
 .../discover/{_inspector.js => _inspector.ts} |  11 +-
 .../{_large_string.js => _large_string.ts}    |   4 +-
 .../{_saved_queries.js => _saved_queries.ts}  |  11 +-
 .../{_shared_links.js => _shared_links.ts}    |  22 +-
 ...{_source_filters.js => _source_filters.ts} |   8 +-
 .../apps/discover/{index.js => index.ts}      |   4 +-
 .../{_shakespeare.js => _shakespeare.ts}      |  32 +-
 test/functional/apps/getting_started/index.ts |  56 +++
 .../{_area_chart.js => _area_chart.ts}        |  91 ++--
 .../functional/apps/visualize/_chart_types.ts |   1 +
 test/functional/apps/visualize/_data_table.ts |   9 +-
 .../visualize/_data_table_nontimeindex.ts     |   1 +
 .../_data_table_notimeindex_filters.ts        |   1 +
 .../apps/visualize/_embedding_chart.ts        |   1 +
 ...perimental_vis.js => _experimental_vis.ts} |   8 +-
 .../{_gauge_chart.js => _gauge_chart.ts}      |   8 +-
 .../{_heatmap_chart.js => _heatmap_chart.ts}  |   4 +-
 .../visualize/_histogram_request_start.ts     |   1 +
 .../{_inspector.js => _inspector.ts}          |   4 +-
 .../visualize/{_lab_mode.js => _lab_mode.ts}  |   4 +-
 ...ne_chart.js => _line_chart_split_chart.ts} |  35 +-
 .../visualize/_line_chart_split_series.ts     | 355 +++++++++++++
 .../apps/visualize/_linked_saved_searches.ts  |   2 +
 .../{_markdown_vis.js => _markdown_vis.ts}    |   4 +-
 .../{_metric_chart.js => _metric_chart.ts}    |   4 +-
 .../{_pie_chart.js => _pie_chart.ts}          |   4 +-
 ...es_options.js => _point_series_options.ts} | 111 +++-
 .../{_region_map.js => _region_map.ts}        |   6 +-
 .../{_shared_item.js => _shared_item.ts}      |   4 +-
 .../{_tag_cloud.js => _tag_cloud.ts}          |   4 +-
 .../visualize/{_tile_map.js => _tile_map.ts}  |  28 +-
 test/functional/apps/visualize/_tsvb_chart.ts |   1 +
 .../apps/visualize/_tsvb_markdown.ts          |   1 +
 test/functional/apps/visualize/_tsvb_table.ts |   1 +
 .../apps/visualize/_tsvb_time_series.ts       |   1 +
 test/functional/apps/visualize/_vega_chart.ts |   1 +
 ...al_bar_chart.js => _vertical_bar_chart.ts} |  54 +-
 ...js => _vertical_bar_chart_nontimeindex.ts} |  52 +-
 ...alize_listing.js => _visualize_listing.ts} |   4 +-
 test/functional/apps/visualize/index.ts       |  35 +-
 ...hained_controls.js => chained_controls.ts} |   4 +-
 ...{dynamic_options.js => dynamic_options.ts} |   4 +-
 .../input_control_vis/{index.js => index.ts}  |   4 +-
 ...ol_options.js => input_control_options.ts} |   4 +-
 .../input_control_vis/input_control_range.ts  |   1 +
 .../functional/page_objects/dashboard_page.ts |   5 +-
 test/functional/page_objects/discover_page.ts |   2 +-
 .../page_objects/legacy/data_table_vis.ts     |   4 +-
 test/functional/page_objects/settings_page.ts |   3 +-
 test/functional/page_objects/time_picker.ts   |   2 +-
 .../page_objects/visualize_chart_page.ts      | 213 +++++++-
 .../page_objects/visualize_editor_page.ts     |  38 +-
 .../functional/page_objects/visualize_page.ts |  16 +-
 .../services/dashboard/expectations.ts        |   2 +-
 .../services/dashboard/panel_actions.ts       |   6 +-
 test/functional/services/doc_table.ts         |  47 +-
 test/functional/services/inspector.ts         |   6 +-
 .../services/visualizations/elastic_chart.ts  |  89 +++-
 .../translations/translations/ja-JP.json      | 207 ++++----
 .../translations/translations/zh-CN.json      | 207 ++++----
 282 files changed, 8357 insertions(+), 2763 deletions(-)
 create mode 100644 src/plugins/charts/public/static/components/color_picker.scss
 create mode 100644 src/plugins/charts/public/static/components/color_picker.tsx
 create mode 100644 src/plugins/charts/public/static/components/current_time.tsx
 create mode 100644 src/plugins/charts/public/static/components/endzones.tsx
 create mode 100644 src/plugins/charts/public/static/components/legend_toggle.scss
 create mode 100644 src/plugins/charts/public/static/components/legend_toggle.tsx
 create mode 100644 src/plugins/charts/public/static/utils/index.ts
 create mode 100644 src/plugins/charts/public/static/utils/transform_click_event.ts
 delete mode 100644 src/plugins/vis_type_vislib/public/components/options/metrics_axes/index.test.tsx
 create mode 100644 src/plugins/vis_type_vislib/public/editor/collections.ts
 rename src/plugins/vis_type_vislib/public/{components/options => editor/components}/gauge/index.tsx (100%)
 rename src/plugins/vis_type_vislib/public/{components/options => editor/components}/gauge/labels_panel.tsx (100%)
 rename src/plugins/vis_type_vislib/public/{components/options => editor/components}/gauge/ranges_panel.tsx (100%)
 rename src/plugins/vis_type_vislib/public/{components/options => editor/components}/gauge/style_panel.tsx (100%)
 rename src/plugins/vis_type_vislib/public/{components/options => editor/components}/heatmap/index.tsx (97%)
 rename src/plugins/vis_type_vislib/public/{components/options => editor/components}/heatmap/labels_panel.tsx (96%)
 rename src/plugins/vis_type_vislib/public/{components/options => editor/components}/index.tsx (71%)
 rename src/plugins/vis_type_vislib/public/{components/options => editor/components}/pie.tsx (96%)
 create mode 100644 src/plugins/vis_type_vislib/public/editor/index.ts
 delete mode 100644 src/plugins/vis_type_vislib/public/utils/collections.ts
 create mode 100644 src/plugins/vis_type_xy/common/index.ts
 create mode 100644 src/plugins/vis_type_xy/jest.config.js
 create mode 100644 src/plugins/vis_type_xy/public/__snapshots__/to_ast.test.ts.snap
 create mode 100644 src/plugins/vis_type_xy/public/_chart.scss
 create mode 100644 src/plugins/vis_type_xy/public/components/_detailed_tooltip.scss
 create mode 100644 src/plugins/vis_type_xy/public/components/detailed_tooltip.tsx
 create mode 100644 src/plugins/vis_type_xy/public/components/index.ts
 create mode 100644 src/plugins/vis_type_xy/public/components/split_chart_warning.tsx
 create mode 100644 src/plugins/vis_type_xy/public/components/xy_axis.tsx
 create mode 100644 src/plugins/vis_type_xy/public/components/xy_current_time.tsx
 create mode 100644 src/plugins/vis_type_xy/public/components/xy_endzones.tsx
 create mode 100644 src/plugins/vis_type_xy/public/components/xy_settings.tsx
 create mode 100644 src/plugins/vis_type_xy/public/components/xy_threshold_line.tsx
 create mode 100644 src/plugins/vis_type_xy/public/config/get_agg_id.ts
 create mode 100644 src/plugins/vis_type_xy/public/config/get_aspects.ts
 create mode 100644 src/plugins/vis_type_xy/public/config/get_axis.ts
 create mode 100644 src/plugins/vis_type_xy/public/config/get_config.ts
 create mode 100644 src/plugins/vis_type_xy/public/config/get_legend.ts
 rename test/functional/apps/getting_started/index.js => src/plugins/vis_type_xy/public/config/get_rotation.ts (66%)
 create mode 100644 src/plugins/vis_type_xy/public/config/get_threshold_line.ts
 create mode 100644 src/plugins/vis_type_xy/public/config/get_tooltip.ts
 create mode 100644 src/plugins/vis_type_xy/public/config/index.ts
 create mode 100644 src/plugins/vis_type_xy/public/editor/collections.ts
 rename src/plugins/{vis_type_vislib/public/utils => vis_type_xy/public/editor}/common_config.tsx (59%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/common/index.ts (100%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/common/truncate_labels.tsx (96%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/common/validation_wrapper.tsx (79%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/index.ts (100%)
 create mode 100644 src/plugins/vis_type_xy/public/editor/components/options/index.tsx
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap (94%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap (100%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/__snapshots__/custom_extents_options.test.tsx.snap (100%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/__snapshots__/index.test.tsx.snap (99%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap (95%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/__snapshots__/line_options.test.tsx.snap (100%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap (98%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap (96%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/__snapshots__/y_extents.test.tsx.snap (100%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/category_axis_panel.test.tsx (93%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/category_axis_panel.tsx (78%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/chart_options.test.tsx (92%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/chart_options.tsx (80%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/custom_extents_options.test.tsx (99%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/custom_extents_options.tsx (87%)
 create mode 100644 src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.test.tsx
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/index.tsx (83%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/label_options.test.tsx (99%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/label_options.tsx (78%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/line_options.test.tsx (96%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/line_options.tsx (84%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/mocks.ts (73%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/series_panel.tsx (83%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/utils.ts (53%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/value_axes_panel.test.tsx (96%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/value_axes_panel.tsx (90%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/value_axis_options.test.tsx (64%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/value_axis_options.tsx (76%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/y_extents.test.tsx (94%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/metrics_axes/y_extents.tsx (83%)
 create mode 100644 src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/point_series/grid_panel.tsx (59%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/point_series/index.ts (100%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/point_series/point_series.tsx (64%)
 rename src/plugins/{vis_type_vislib/public => vis_type_xy/public/editor}/components/options/point_series/threshold_panel.tsx (77%)
 create mode 100644 src/plugins/vis_type_xy/public/editor/index.ts
 create mode 100644 src/plugins/vis_type_xy/public/editor/positions.ts
 create mode 100644 src/plugins/vis_type_xy/public/editor/scale_types.ts
 create mode 100644 src/plugins/vis_type_xy/public/services.ts
 create mode 100644 src/plugins/vis_type_xy/public/to_ast.test.ts
 create mode 100644 src/plugins/vis_type_xy/public/to_ast.ts
 create mode 100644 src/plugins/vis_type_xy/public/to_ast_esaggs.ts
 create mode 100644 src/plugins/vis_type_xy/public/types/config.ts
 create mode 100644 src/plugins/vis_type_xy/public/types/constants.ts
 create mode 100644 src/plugins/vis_type_xy/public/types/index.ts
 create mode 100644 src/plugins/vis_type_xy/public/types/param.ts
 rename src/plugins/{vis_type_timeseries/public/application/visualizations/views/timeseries/__mocks__/@elastic/charts.js => vis_type_xy/public/types/vis_type.ts} (62%)
 create mode 100644 src/plugins/vis_type_xy/public/utils/accessors.tsx
 create mode 100644 src/plugins/vis_type_xy/public/utils/domain.ts
 create mode 100644 src/plugins/vis_type_xy/public/utils/get_legend_actions.tsx
 create mode 100644 src/plugins/vis_type_xy/public/utils/get_series_name_fn.ts
 create mode 100644 src/plugins/vis_type_xy/public/utils/get_time_zone.tsx
 create mode 100644 src/plugins/vis_type_xy/public/utils/index.tsx
 create mode 100644 src/plugins/vis_type_xy/public/utils/render_all_series.tsx
 create mode 100644 src/plugins/vis_type_xy/public/utils/use_color_picker.tsx
 create mode 100644 src/plugins/vis_type_xy/public/vis_component.tsx
 create mode 100644 src/plugins/vis_type_xy/public/vis_renderer.tsx
 create mode 100644 src/plugins/vis_type_xy/public/vis_types/area.tsx
 create mode 100644 src/plugins/vis_type_xy/public/vis_types/histogram.tsx
 create mode 100644 src/plugins/vis_type_xy/public/vis_types/horizontal_bar.tsx
 create mode 100644 src/plugins/vis_type_xy/public/vis_types/index.ts
 create mode 100644 src/plugins/vis_type_xy/public/vis_types/line.tsx
 create mode 100644 src/plugins/vis_type_xy/public/vis_types/split_tooltip.tsx
 create mode 100644 src/plugins/vis_type_xy/public/xy_vis_fn.ts
 create mode 100644 src/plugins/vis_type_xy/server/plugin.ts
 rename test/functional/apps/dashboard/{bwc_shared_urls.js => bwc_shared_urls.ts} (97%)
 rename test/functional/apps/dashboard/{create_and_add_embeddables.js => create_and_add_embeddables.ts} (97%)
 rename test/functional/apps/dashboard/{dashboard_clone.js => dashboard_clone.ts} (96%)
 rename test/functional/apps/dashboard/{dashboard_filter_bar.js => dashboard_filter_bar.ts} (98%)
 rename test/functional/apps/dashboard/{dashboard_filtering.js => dashboard_filtering.ts} (98%)
 rename test/functional/apps/dashboard/{dashboard_grid.js => dashboard_grid.ts} (94%)
 rename test/functional/apps/dashboard/{dashboard_listing.js => dashboard_listing.ts} (98%)
 rename test/functional/apps/dashboard/{dashboard_options.js => dashboard_options.ts} (92%)
 rename test/functional/apps/dashboard/{dashboard_query_bar.js => dashboard_query_bar.ts} (93%)
 rename test/functional/apps/dashboard/{dashboard_save.js => dashboard_save.ts} (97%)
 rename test/functional/apps/dashboard/{dashboard_saved_query.js => dashboard_saved_query.ts} (97%)
 rename test/functional/apps/dashboard/{dashboard_snapshots.js => dashboard_snapshots.ts} (95%)
 rename test/functional/apps/dashboard/{dashboard_state.js => dashboard_state.ts} (87%)
 rename test/functional/apps/dashboard/{dashboard_time.js => dashboard_time.ts} (97%)
 rename test/functional/apps/dashboard/{dashboard_time_picker.js => dashboard_time_picker.ts} (96%)
 rename test/functional/apps/dashboard/{data_shared_attributes.js => data_shared_attributes.ts} (96%)
 rename test/functional/apps/dashboard/{edit_embeddable_redirects.js => edit_embeddable_redirects.ts} (97%)
 rename test/functional/apps/dashboard/{embed_mode.js => embed_mode.ts} (96%)
 rename test/functional/apps/dashboard/{embeddable_rendering.js => embeddable_rendering.ts} (98%)
 rename test/functional/apps/dashboard/{empty_dashboard.js => empty_dashboard.ts} (95%)
 rename test/functional/apps/dashboard/{full_screen_mode.js => full_screen_mode.ts} (96%)
 rename test/functional/apps/dashboard/{index.js => index.ts} (85%)
 rename test/functional/apps/dashboard/{panel_expand_toggle.js => panel_expand_toggle.ts} (95%)
 rename test/functional/apps/dashboard/{time_zones.js => time_zones.ts} (95%)
 rename test/functional/apps/dashboard/{view_edit.js => view_edit.ts} (97%)
 rename test/functional/apps/discover/{_date_nanos.js => _date_nanos.ts} (93%)
 rename test/functional/apps/discover/{_date_nanos_mixed.js => _date_nanos_mixed.ts} (94%)
 rename test/functional/apps/discover/{_discover.js => _discover.ts} (97%)
 rename test/functional/apps/discover/{_doc_navigation.js => _doc_navigation.ts} (95%)
 rename test/functional/apps/discover/{_field_data.js => _field_data.ts} (96%)
 rename test/functional/apps/discover/{_filter_editor.js => _filter_editor.ts} (95%)
 rename test/functional/apps/discover/{_inspector.js => _inspector.ts} (89%)
 rename test/functional/apps/discover/{_large_string.js => _large_string.ts} (96%)
 rename test/functional/apps/discover/{_saved_queries.js => _saved_queries.ts} (97%)
 rename test/functional/apps/discover/{_shared_links.js => _shared_links.ts} (92%)
 rename test/functional/apps/discover/{_source_filters.js => _source_filters.ts} (88%)
 rename test/functional/apps/discover/{index.js => index.ts} (93%)
 rename test/functional/apps/getting_started/{_shakespeare.js => _shakespeare.ts} (89%)
 create mode 100644 test/functional/apps/getting_started/index.ts
 rename test/functional/apps/visualize/{_area_chart.js => _area_chart.ts} (90%)
 rename test/functional/apps/visualize/{_experimental_vis.js => _experimental_vis.ts} (93%)
 rename test/functional/apps/visualize/{_gauge_chart.js => _gauge_chart.ts} (95%)
 rename test/functional/apps/visualize/{_heatmap_chart.js => _heatmap_chart.ts} (97%)
 rename test/functional/apps/visualize/{_inspector.js => _inspector.ts} (96%)
 rename test/functional/apps/visualize/{_lab_mode.js => _lab_mode.ts} (94%)
 rename test/functional/apps/visualize/{_line_chart.js => _line_chart_split_chart.ts} (93%)
 create mode 100644 test/functional/apps/visualize/_line_chart_split_series.ts
 rename test/functional/apps/visualize/{_markdown_vis.js => _markdown_vis.ts} (95%)
 rename test/functional/apps/visualize/{_metric_chart.js => _metric_chart.ts} (98%)
 rename test/functional/apps/visualize/{_pie_chart.js => _pie_chart.ts} (99%)
 rename test/functional/apps/visualize/{_point_series_options.js => _point_series_options.ts} (82%)
 rename test/functional/apps/visualize/{_region_map.js => _region_map.ts} (95%)
 rename test/functional/apps/visualize/{_shared_item.js => _shared_item.ts} (93%)
 rename test/functional/apps/visualize/{_tag_cloud.js => _tag_cloud.ts} (98%)
 rename test/functional/apps/visualize/{_tile_map.js => _tile_map.ts} (94%)
 rename test/functional/apps/visualize/{_vertical_bar_chart.js => _vertical_bar_chart.ts} (93%)
 rename test/functional/apps/visualize/{_vertical_bar_chart_nontimeindex.js => _vertical_bar_chart_nontimeindex.ts} (88%)
 rename test/functional/apps/visualize/{_visualize_listing.js => _visualize_listing.ts} (96%)
 rename test/functional/apps/visualize/input_control_vis/{chained_controls.js => chained_controls.ts} (96%)
 rename test/functional/apps/visualize/input_control_vis/{dynamic_options.js => dynamic_options.ts} (96%)
 rename test/functional/apps/visualize/input_control_vis/{index.js => index.ts} (89%)
 rename test/functional/apps/visualize/input_control_vis/{input_control_options.js => input_control_options.ts} (98%)

diff --git a/docs/developer/plugin-list.asciidoc b/docs/developer/plugin-list.asciidoc
index e32984f911d97d..d4d2b229eeba77 100644
--- a/docs/developer/plugin-list.asciidoc
+++ b/docs/developer/plugin-list.asciidoc
@@ -272,7 +272,7 @@ heatmap charts.
 
 |{kib-repo}blob/{branch}/src/plugins/vis_type_xy/README.md[visTypeXy]
 |Contains the new xy-axis chart using the elastic-charts library, which will eventually
-replace the vislib xy-axis (bar, area, line) charts.
+replace the vislib xy-axis charts including bar, area, and line.
 
 
 |{kib-repo}blob/{branch}/src/plugins/visualizations/README.md[visualizations]
diff --git a/docs/management/advanced-options.asciidoc b/docs/management/advanced-options.asciidoc
index 6244a43b54f724..9a87d4c9d886ac 100644
--- a/docs/management/advanced-options.asciidoc
+++ b/docs/management/advanced-options.asciidoc
@@ -453,6 +453,9 @@ of buckets to try to represent.
 ==== Visualization
 
 [horizontal]
+[[visualization-visualize-chartslibrary]]`visualization:visualize:chartsLibrary`::
+Enables the new charts library for area, line, and bar charts in visualization panels. Does *not* support the split chart aggregation.
+
 [[visualization-colormapping]]`visualization:colorMapping`::
 **This setting is deprecated and will not be supported as of 8.0.**
 Maps values to specific colors in *Visualize* charts and *TSVB*. This setting does not apply to *Lens*.
diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
index c58d010a1f317d..08d883a7cbb4d5 100644
--- a/packages/kbn-optimizer/limits.yml
+++ b/packages/kbn-optimizer/limits.yml
@@ -6,7 +6,7 @@ pageLoadAssetSize:
   beatsManagement: 188135
   bfetch: 41874
   canvas: 1066647
-  charts: 159211
+  charts: 195358
   cloud: 21076
   console: 46091
   core: 692106
@@ -98,7 +98,7 @@ pageLoadAssetSize:
   visTypeTimeseries: 155203
   visTypeVega: 153573
   visTypeVislib: 242838
-  visTypeXy: 20255
+  visTypeXy: 113478
   visualizations: 295025
   visualize: 57431
   watcher: 43598
diff --git a/src/plugins/charts/public/services/legacy_colors/colors.test.ts b/src/plugins/charts/public/services/legacy_colors/colors.test.ts
index 89cf7a4817377c..b94918426c5250 100644
--- a/src/plugins/charts/public/services/legacy_colors/colors.test.ts
+++ b/src/plugins/charts/public/services/legacy_colors/colors.test.ts
@@ -62,14 +62,17 @@ describe('Vislib Color Service', () => {
 
   it('should throw an error if input is not an array', () => {
     expect(() => {
+      // @ts-expect-error
       colors.createColorLookupFunction(200);
     }).toThrowError();
 
     expect(() => {
+      // @ts-expect-error
       colors.createColorLookupFunction('help');
     }).toThrowError();
 
     expect(() => {
+      // @ts-expect-error
       colors.createColorLookupFunction(true);
     }).toThrowError();
 
@@ -78,10 +81,12 @@ describe('Vislib Color Service', () => {
     }).toThrowError();
 
     expect(() => {
+      // @ts-expect-error
       colors.createColorLookupFunction(nullValue);
     }).toThrowError();
 
     expect(() => {
+      // @ts-expect-error
       colors.createColorLookupFunction(emptyObject);
     }).toThrowError();
   });
@@ -89,14 +94,17 @@ describe('Vislib Color Service', () => {
   describe('when array is not composed of numbers, strings, or undefined values', () => {
     it('should throw an error', () => {
       expect(() => {
+        // @ts-expect-error
         colors.createColorLookupFunction(arrayOfObjects);
       }).toThrowError();
 
       expect(() => {
+        // @ts-expect-error
         colors.createColorLookupFunction(arrayOfBooleans);
       }).toThrowError();
 
       expect(() => {
+        // @ts-expect-error
         colors.createColorLookupFunction(arrayOfNullValues);
       }).toThrowError();
     });
@@ -113,6 +121,7 @@ describe('Vislib Color Service', () => {
       }).not.toThrowError();
 
       expect(() => {
+        // @ts-expect-error
         colors.createColorLookupFunction(arrayOfUndefinedValues);
       }).not.toThrowError();
     });
diff --git a/src/plugins/charts/public/services/legacy_colors/colors.ts b/src/plugins/charts/public/services/legacy_colors/colors.ts
index e1342a114f8dfb..e367a780fb2925 100644
--- a/src/plugins/charts/public/services/legacy_colors/colors.ts
+++ b/src/plugins/charts/public/services/legacy_colors/colors.ts
@@ -48,7 +48,7 @@ export class LegacyColorsService {
   }
 
   createColorLookupFunction(
-    arrayOfStringsOrNumbers?: any,
+    arrayOfStringsOrNumbers?: Array<string | number>,
     colorMapping: Partial<Record<string, string>> = {}
   ) {
     if (!Array.isArray(arrayOfStringsOrNumbers)) {
@@ -67,7 +67,7 @@ export class LegacyColorsService {
 
     this.mappedColors.mapKeys(arrayOfStringsOrNumbers);
 
-    return (value: string) => {
+    return (value: string | number) => {
       return colorMapping[value] || this.mappedColors.get(value);
     };
   }
diff --git a/src/plugins/charts/public/static/components/basic_options.tsx b/src/plugins/charts/public/static/components/basic_options.tsx
index cac4c8d70d796c..9c5a22543df994 100644
--- a/src/plugins/charts/public/static/components/basic_options.tsx
+++ b/src/plugins/charts/public/static/components/basic_options.tsx
@@ -18,9 +18,11 @@
  */
 
 import React from 'react';
+
 import { i18n } from '@kbn/i18n';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { VisOptionsProps } from '../../../../vis_default_editor/public';
+
 import { SwitchOption } from './switch';
 import { SelectOption } from './select';
 
diff --git a/src/plugins/charts/public/static/components/collections.ts b/src/plugins/charts/public/static/components/collections.ts
index 9dde50f2b44c93..16d875836a2022 100644
--- a/src/plugins/charts/public/static/components/collections.ts
+++ b/src/plugins/charts/public/static/components/collections.ts
@@ -18,17 +18,22 @@
  */
 
 import { $Values } from '@kbn/utility-types';
+import { i18n } from '@kbn/i18n';
 
-export const ColorModes = Object.freeze({
-  BACKGROUND: 'Background' as 'Background',
-  LABELS: 'Labels' as 'Labels',
-  NONE: 'None' as 'None',
+export const ColorMode = Object.freeze({
+  Background: 'Background' as 'Background',
+  Labels: 'Labels' as 'Labels',
+  None: 'None' as 'None',
 });
-export type ColorModes = $Values<typeof ColorModes>;
+export type ColorMode = $Values<typeof ColorMode>;
 
-export const Rotates = Object.freeze({
-  HORIZONTAL: 0,
-  VERTICAL: 90,
-  ANGLED: 75,
+export const LabelRotation = Object.freeze({
+  Horizontal: 0,
+  Vertical: 90,
+  Angled: 75,
+});
+export type LabelRotation = $Values<typeof LabelRotation>;
+
+export const defaultCountLabel = i18n.translate('charts.countText', {
+  defaultMessage: 'Count',
 });
-export type Rotates = $Values<typeof Rotates>;
diff --git a/src/plugins/charts/public/static/components/color_picker.scss b/src/plugins/charts/public/static/components/color_picker.scss
new file mode 100644
index 00000000000000..85bfefca41a09c
--- /dev/null
+++ b/src/plugins/charts/public/static/components/color_picker.scss
@@ -0,0 +1,18 @@
+$visColorPickerWidth: $euiSizeL * 8; // 8 columns
+
+.visColorPicker__value {
+  width: $visColorPickerWidth;
+}
+
+.visColorPicker__valueDot {
+  cursor: pointer;
+
+  &:hover {
+    transform: scale(1.4);
+  }
+
+  &-isSelected {
+    border: $euiSizeXS solid;
+    border-radius: 100%;
+  }
+}
diff --git a/src/plugins/charts/public/static/components/color_picker.tsx b/src/plugins/charts/public/static/components/color_picker.tsx
new file mode 100644
index 00000000000000..d785a9c9ad4b78
--- /dev/null
+++ b/src/plugins/charts/public/static/components/color_picker.tsx
@@ -0,0 +1,138 @@
+/*
+ * 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 classNames from 'classnames';
+import React, { BaseSyntheticEvent } from 'react';
+
+import { EuiButtonEmpty, EuiFlexItem, EuiIcon } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import './color_picker.scss';
+
+export const legendColors: string[] = [
+  '#3F6833',
+  '#967302',
+  '#2F575E',
+  '#99440A',
+  '#58140C',
+  '#052B51',
+  '#511749',
+  '#3F2B5B',
+  '#508642',
+  '#CCA300',
+  '#447EBC',
+  '#C15C17',
+  '#890F02',
+  '#0A437C',
+  '#6D1F62',
+  '#584477',
+  '#629E51',
+  '#E5AC0E',
+  '#64B0C8',
+  '#E0752D',
+  '#BF1B00',
+  '#0A50A1',
+  '#962D82',
+  '#614D93',
+  '#7EB26D',
+  '#EAB839',
+  '#6ED0E0',
+  '#EF843C',
+  '#E24D42',
+  '#1F78C1',
+  '#BA43A9',
+  '#705DA0',
+  '#9AC48A',
+  '#F2C96D',
+  '#65C5DB',
+  '#F9934E',
+  '#EA6460',
+  '#5195CE',
+  '#D683CE',
+  '#806EB7',
+  '#B7DBAB',
+  '#F4D598',
+  '#70DBED',
+  '#F9BA8F',
+  '#F29191',
+  '#82B5D8',
+  '#E5A8E2',
+  '#AEA2E0',
+  '#E0F9D7',
+  '#FCEACA',
+  '#CFFAFF',
+  '#F9E2D2',
+  '#FCE2DE',
+  '#BADFF4',
+  '#F9D9F9',
+  '#DEDAF7',
+];
+
+interface ColorPickerProps {
+  id?: string;
+  label: string | number | null;
+  onChange: (color: string | null, event: BaseSyntheticEvent) => void;
+  color: string;
+}
+
+export const ColorPicker = ({ onChange, color: selectedColor, id, label }: ColorPickerProps) => (
+  <div className="visColorPicker">
+    <span id={`${id}ColorPickerDesc`} className="euiScreenReaderOnly">
+      <FormattedMessage
+        id="charts.colorPicker.setColor.screenReaderDescription"
+        defaultMessage="Set color for value {legendDataLabel}"
+        values={{ legendDataLabel: label }}
+      />
+    </span>
+    <div className="visColorPicker__value" role="listbox">
+      {legendColors.map((color) => (
+        <EuiIcon
+          role="option"
+          tabIndex={0}
+          type="dot"
+          size="l"
+          color={selectedColor}
+          key={color}
+          aria-label={color}
+          aria-describedby={`${id}ColorPickerDesc`}
+          aria-selected={color === selectedColor}
+          onClick={(e) => onChange(color, e)}
+          onKeyPress={(e) => onChange(color, e)}
+          className={classNames('visColorPicker__valueDot', {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            'visColorPicker__valueDot-isSelected': color === selectedColor,
+          })}
+          style={{ color }}
+          data-test-subj={`visColorPickerColor-${color}`}
+        />
+      ))}
+    </div>
+    {legendColors.some((c) => c === selectedColor) && (
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty
+          size="s"
+          onClick={(e: any) => onChange(null, e)}
+          onKeyPress={(e: any) => onChange(null, e)}
+        >
+          <FormattedMessage id="charts.colorPicker.clearColor" defaultMessage="Clear color" />
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    )}
+  </div>
+);
diff --git a/src/plugins/charts/public/static/components/current_time.tsx b/src/plugins/charts/public/static/components/current_time.tsx
new file mode 100644
index 00000000000000..00c1a74a7bfd80
--- /dev/null
+++ b/src/plugins/charts/public/static/components/current_time.tsx
@@ -0,0 +1,64 @@
+/*
+ * 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 moment, { Moment } from 'moment';
+import React, { FC } from 'react';
+
+import { LineAnnotation, AnnotationDomainTypes, LineAnnotationStyle } from '@elastic/charts';
+import lightEuiTheme from '@elastic/eui/dist/eui_theme_light.json';
+import darkEuiTheme from '@elastic/eui/dist/eui_theme_dark.json';
+
+interface CurrentTimeProps {
+  isDarkMode: boolean;
+  domainEnd?: number | Moment;
+}
+
+/**
+ * Render current time line annotation on @elastic/charts `Chart`
+ */
+export const CurrentTime: FC<CurrentTimeProps> = ({ isDarkMode, domainEnd }) => {
+  const lineAnnotationStyle: Partial<LineAnnotationStyle> = {
+    line: {
+      strokeWidth: 2,
+      stroke: isDarkMode ? darkEuiTheme.euiColorDanger : lightEuiTheme.euiColorDanger,
+      opacity: 0.7,
+    },
+  };
+
+  // Domain end of 'now' will be milliseconds behind current time, so we extend time by 1 minute and check if
+  // the annotation is within this range; if so, the line annotation uses the domainEnd as its value
+  const now = moment();
+  const isAnnotationAtEdge = domainEnd
+    ? moment(domainEnd).add(1, 'm').isAfter(now) && now.isAfter(domainEnd)
+    : false;
+  const lineAnnotationData = [
+    {
+      dataValue: isAnnotationAtEdge ? domainEnd : now.valueOf(),
+    },
+  ];
+
+  return (
+    <LineAnnotation
+      id="__current-time__"
+      hideTooltips
+      domainType={AnnotationDomainTypes.XDomain}
+      dataValues={lineAnnotationData}
+      style={lineAnnotationStyle}
+    />
+  );
+};
diff --git a/src/plugins/charts/public/static/components/endzones.tsx b/src/plugins/charts/public/static/components/endzones.tsx
new file mode 100644
index 00000000000000..db68f72c18c055
--- /dev/null
+++ b/src/plugins/charts/public/static/components/endzones.tsx
@@ -0,0 +1,197 @@
+/*
+ * 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, { FC } from 'react';
+import moment, { unitOfTime } from 'moment';
+
+import {
+  TooltipValue,
+  RectAnnotation,
+  RectAnnotationDatum,
+  RectAnnotationStyle,
+} from '@elastic/charts';
+import { i18n } from '@kbn/i18n';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer } from '@elastic/eui';
+import lightEuiTheme from '@elastic/eui/dist/eui_theme_light.json';
+import darkEuiTheme from '@elastic/eui/dist/eui_theme_dark.json';
+
+interface EndzonesProps {
+  isDarkMode: boolean;
+  domainStart: number;
+  domainEnd: number;
+  interval: number;
+  domainMin: number;
+  domainMax: number;
+  hideTooltips?: boolean;
+  /**
+   * used to toggle full bin endzones for multiple non-stacked bars
+   */
+  isFullBin?: boolean;
+}
+
+export const Endzones: FC<EndzonesProps> = ({
+  isDarkMode,
+  domainStart,
+  domainEnd,
+  interval,
+  domainMin,
+  domainMax,
+  hideTooltips = true,
+  isFullBin = false,
+}) => {
+  const rectAnnotationStyle: Partial<RectAnnotationStyle> = {
+    stroke: isDarkMode ? darkEuiTheme.euiColorLightShade : lightEuiTheme.euiColorDarkShade,
+    strokeWidth: 0,
+    opacity: isDarkMode ? 0.6 : 0.2,
+    fill: isDarkMode ? darkEuiTheme.euiColorLightShade : lightEuiTheme.euiColorDarkShade,
+  };
+
+  const rectAnnotations: RectAnnotationDatum[] = [];
+
+  if (domainStart > domainMin) {
+    rectAnnotations.push({
+      coordinates: {
+        x1: isFullBin ? domainMin : domainStart,
+      },
+    });
+  }
+
+  if (domainEnd - interval < domainMax) {
+    rectAnnotations.push({
+      coordinates: {
+        x0: isFullBin ? domainMax : domainEnd,
+      },
+    });
+  }
+
+  return (
+    <RectAnnotation
+      id="__endzones__"
+      hideTooltips={hideTooltips}
+      customTooltipDetails={Prompt}
+      zIndex={2}
+      dataValues={rectAnnotations}
+      style={rectAnnotationStyle}
+    />
+  );
+};
+
+const findIntervalFromDuration = (
+  dateValue: number,
+  esValue: number,
+  esUnit: unitOfTime.Base,
+  timeZone: string
+) => {
+  const date = moment.tz(dateValue, timeZone);
+  const startOfDate = moment.tz(date, timeZone).startOf(esUnit);
+  const endOfDate = moment.tz(date, timeZone).startOf(esUnit).add(esValue, esUnit);
+  return endOfDate.valueOf() - startOfDate.valueOf();
+};
+
+const getIntervalInMs = (
+  value: number,
+  esValue: number,
+  esUnit: unitOfTime.Base,
+  timeZone: string
+): number => {
+  switch (esUnit) {
+    case 's':
+      return 1000 * esValue;
+    case 'ms':
+      return 1 * esValue;
+    default:
+      return findIntervalFromDuration(value, esValue, esUnit, timeZone);
+  }
+};
+
+/**
+ * Returns the adjusted interval based on the data
+ *
+ * @param xValues sorted and unquie x values
+ * @param esValue
+ * @param esUnit
+ * @param timeZone
+ */
+export const getAdjustedInterval = (
+  xValues: number[],
+  esValue: number,
+  esUnit: unitOfTime.Base,
+  timeZone: string
+): number => {
+  const newInterval = xValues.reduce((minInterval, currentXvalue, index) => {
+    let currentDiff = minInterval;
+
+    if (index > 0) {
+      currentDiff = Math.abs(xValues[index - 1] - currentXvalue);
+    }
+
+    const singleUnitInterval = getIntervalInMs(currentXvalue, esValue, esUnit, timeZone);
+    return Math.min(minInterval, singleUnitInterval, currentDiff);
+  }, Number.MAX_SAFE_INTEGER);
+
+  return newInterval > 0 ? newInterval : moment.duration(esValue, esUnit).asMilliseconds();
+};
+
+const partialDataText = i18n.translate('charts.partialData.bucketTooltipText', {
+  defaultMessage:
+    'The selected time range does not include this entire bucket. It might contain partial data.',
+});
+
+const Prompt = () => (
+  <EuiFlexGroup
+    alignItems="center"
+    className="dscHistogram__header--partial"
+    responsive={false}
+    gutterSize="xs"
+  >
+    <EuiFlexItem grow={false}>
+      <EuiIcon type="iInCircle" />
+    </EuiFlexItem>
+    <EuiFlexItem>{partialDataText}</EuiFlexItem>
+  </EuiFlexGroup>
+);
+
+export const renderEndzoneTooltip = (
+  xInterval?: number,
+  domainStart?: number,
+  domainEnd?: number,
+  formatter?: (v: any) => string,
+  renderValue = true
+) => (headerData: TooltipValue): JSX.Element | string => {
+  const headerDataValue = headerData.value;
+  const formattedValue = formatter ? formatter(headerDataValue) : headerDataValue;
+
+  if (
+    (domainStart !== undefined && domainStart > headerDataValue) ||
+    (domainEnd !== undefined && xInterval !== undefined && domainEnd - xInterval < headerDataValue)
+  ) {
+    return (
+      <>
+        <Prompt />
+        {renderValue && (
+          <>
+            <EuiSpacer size="xs" />
+            <p>{formattedValue}</p>
+          </>
+        )}
+      </>
+    );
+  }
+
+  return renderValue ? formattedValue : null;
+};
diff --git a/src/plugins/charts/public/static/components/index.ts b/src/plugins/charts/public/static/components/index.ts
index 48c9e40145481f..c044d361bed18e 100644
--- a/src/plugins/charts/public/static/components/index.ts
+++ b/src/plugins/charts/public/static/components/index.ts
@@ -18,7 +18,7 @@
  */
 
 export { BasicOptions } from './basic_options';
-export { ColorModes, Rotates } from './collections';
+export { ColorMode, LabelRotation, defaultCountLabel } from './collections';
 export { ColorRanges, SetColorRangeValue } from './color_ranges';
 export { ColorSchemaOptions, SetColorSchemaOptionsValue } from './color_schema';
 export { ColorSchemaParams, Labels, Style } from './types';
@@ -28,3 +28,7 @@ export { RequiredNumberInputOption } from './required_number_input';
 export { SelectOption } from './select';
 export { SwitchOption } from './switch';
 export { TextInputOption } from './text_input';
+export { LegendToggle } from './legend_toggle';
+export { ColorPicker } from './color_picker';
+export { CurrentTime } from './current_time';
+export * from './endzones';
diff --git a/src/plugins/charts/public/static/components/legend_toggle.scss b/src/plugins/charts/public/static/components/legend_toggle.scss
new file mode 100644
index 00000000000000..7eb85a5e08ec05
--- /dev/null
+++ b/src/plugins/charts/public/static/components/legend_toggle.scss
@@ -0,0 +1,20 @@
+.echLegend__toggle {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  margin: $euiSizeXS;
+
+  &--isOpen {
+    background-color: $euiColorLightestShade;
+  }
+
+  &--position-left,
+  &--position-bottom {
+    left: auto;
+    bottom: auto;
+    right: 0;
+    top: 0;
+  }
+}
+
diff --git a/src/plugins/charts/public/static/components/legend_toggle.tsx b/src/plugins/charts/public/static/components/legend_toggle.tsx
new file mode 100644
index 00000000000000..12742b6da6e6bd
--- /dev/null
+++ b/src/plugins/charts/public/static/components/legend_toggle.tsx
@@ -0,0 +1,62 @@
+/*
+ * 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, { memo, useMemo } from 'react';
+import classNames from 'classnames';
+
+import { i18n } from '@kbn/i18n';
+import { htmlIdGenerator, EuiButtonIcon } from '@elastic/eui';
+import { Position } from '@elastic/charts';
+
+import './legend_toggle.scss';
+
+interface LegendToggleProps {
+  onClick: () => void;
+  showLegend: boolean;
+  legendPosition: Position;
+}
+
+const LegendToggleComponent = ({ onClick, showLegend, legendPosition }: LegendToggleProps) => {
+  const legendId = useMemo(() => htmlIdGenerator()('legend'), []);
+
+  return (
+    <EuiButtonIcon
+      type="button"
+      iconType="list"
+      color="subdued"
+      onClick={onClick}
+      className={classNames('echLegend__toggle', `echLegend__toggle--position-${legendPosition}`, {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'echLegend__toggle--isOpen': showLegend,
+      })}
+      aria-label={i18n.translate('charts.legend.toggleLegendButtonAriaLabel', {
+        defaultMessage: 'Toggle legend',
+      })}
+      aria-expanded={showLegend}
+      aria-controls={legendId}
+      isSelected={showLegend}
+      data-test-subj="vislibToggleLegend"
+      title={i18n.translate('charts.legend.toggleLegendButtonTitle', {
+        defaultMessage: 'Toggle legend',
+      })}
+    />
+  );
+};
+
+export const LegendToggle = memo(LegendToggleComponent);
diff --git a/src/plugins/charts/public/static/components/types.ts b/src/plugins/charts/public/static/components/types.ts
index 196eb60b06aec0..a4c384141dafb9 100644
--- a/src/plugins/charts/public/static/components/types.ts
+++ b/src/plugins/charts/public/static/components/types.ts
@@ -18,7 +18,7 @@
  */
 
 import { ColorSchemas } from '../color_maps';
-import { Rotates } from './collections';
+import { LabelRotation } from './collections';
 
 export interface ColorSchemaParams {
   colorSchema: ColorSchemas;
@@ -29,8 +29,8 @@ export interface Labels {
   color?: string;
   filter?: boolean;
   overwriteColor?: boolean;
-  rotate?: Rotates;
-  show: boolean;
+  rotate?: LabelRotation;
+  show?: boolean;
   truncate?: number | null;
 }
 
diff --git a/src/plugins/charts/public/static/index.ts b/src/plugins/charts/public/static/index.ts
index b8a8406c375dda..638e119d8be498 100644
--- a/src/plugins/charts/public/static/index.ts
+++ b/src/plugins/charts/public/static/index.ts
@@ -20,3 +20,4 @@
 export * from './color_maps';
 export * from './colors';
 export * from './components';
+export * from './utils';
diff --git a/src/plugins/charts/public/static/utils/index.ts b/src/plugins/charts/public/static/utils/index.ts
new file mode 100644
index 00000000000000..777deb326125e5
--- /dev/null
+++ b/src/plugins/charts/public/static/utils/index.ts
@@ -0,0 +1,20 @@
+/*
+ * 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 './transform_click_event';
diff --git a/src/plugins/charts/public/static/utils/transform_click_event.ts b/src/plugins/charts/public/static/utils/transform_click_event.ts
new file mode 100644
index 00000000000000..21460eb51e3fb8
--- /dev/null
+++ b/src/plugins/charts/public/static/utils/transform_click_event.ts
@@ -0,0 +1,238 @@
+/*
+ * 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 {
+  XYChartSeriesIdentifier,
+  GeometryValue,
+  XYBrushArea,
+  Accessor,
+  AccessorFn,
+  Datum,
+} from '@elastic/charts';
+
+import { RangeSelectContext, ValueClickContext } from '../../../../embeddable/public';
+import { Datatable } from '../../../../expressions/public';
+
+export interface ClickTriggerEvent {
+  name: 'filterBucket';
+  data: ValueClickContext['data'];
+}
+
+export interface BrushTriggerEvent {
+  name: 'brush';
+  data: RangeSelectContext['data'];
+}
+
+type AllSeriesAccessors = Array<[accessor: Accessor | AccessorFn, value: string | number]>;
+
+/**
+ * returns accessor value from string or function accessor
+ * @param datum
+ * @param accessor
+ */
+function getAccessorValue(datum: Datum, accessor: Accessor | AccessorFn) {
+  if (typeof accessor === 'function') {
+    return accessor(datum);
+  }
+
+  return datum[accessor];
+}
+
+/**
+ * This is a little unorthodox, but using functional accessors makes it
+ * difficult to match the correct column. This creates a test object to throw
+ * an error when the target id is accessed, thus matcing the target column.
+ */
+function validateAccessorId(id: string, accessor: Accessor | AccessorFn) {
+  if (typeof accessor !== 'function') {
+    return id === accessor;
+  }
+
+  const matchedMessage = 'validateAccessorId matched';
+
+  try {
+    accessor({
+      get [id]() {
+        throw new Error(matchedMessage);
+      },
+    });
+    return false;
+  } catch ({ message }) {
+    return message === matchedMessage;
+  }
+}
+
+/**
+ * Groups split accessors by their accessor string or function and related value
+ *
+ * @param splitAccessors
+ * @param splitSeriesAccessorFnMap
+ */
+const getAllSplitAccessors = (
+  splitAccessors: Map<string | number, string | number>,
+  splitSeriesAccessorFnMap?: Map<string | number, AccessorFn>
+): Array<[accessor: Accessor | AccessorFn, value: string | number]> =>
+  [...splitAccessors.entries()].map(([key, value]) => [
+    splitSeriesAccessorFnMap?.get?.(key) ?? key,
+    value,
+  ]);
+
+/**
+ * Reduces matching column indexes
+ *
+ * @param xAccessor
+ * @param yAccessor
+ * @param splitAccessors
+ */
+const columnReducer = (
+  xAccessor: Accessor | AccessorFn | null,
+  yAccessor: Accessor | AccessorFn | null,
+  splitAccessors: AllSeriesAccessors
+) => (
+  acc: Array<[index: number, id: string]>,
+  { id }: Datatable['columns'][number],
+  index: number
+): Array<[index: number, id: string]> => {
+  if (
+    (xAccessor !== null && validateAccessorId(id, xAccessor)) ||
+    (yAccessor !== null && validateAccessorId(id, yAccessor)) ||
+    splitAccessors.some(([accessor]) => validateAccessorId(id, accessor))
+  ) {
+    acc.push([index, id]);
+  }
+
+  return acc;
+};
+
+/**
+ * Finds matching row index for given accessors and geometry values
+ *
+ * @param geometry
+ * @param xAccessor
+ * @param yAccessor
+ * @param splitAccessors
+ */
+const rowFindPredicate = (
+  geometry: GeometryValue | null,
+  xAccessor: Accessor | AccessorFn | null,
+  yAccessor: Accessor | AccessorFn | null,
+  splitAccessors: AllSeriesAccessors
+) => (row: Datatable['rows'][number]): boolean =>
+  (geometry === null ||
+    (xAccessor !== null &&
+      getAccessorValue(row, xAccessor) === geometry.x &&
+      yAccessor !== null &&
+      getAccessorValue(row, yAccessor) === geometry.y)) &&
+  [...splitAccessors].every(([accessor, value]) => getAccessorValue(row, accessor) === value);
+
+/**
+ * Helper function to transform `@elastic/charts` click event into filter action event
+ *
+ * @param table
+ * @param xAccessor
+ * @param splitSeriesAccessorFnMap needed when using `splitSeriesAccessors` as `AccessorFn`
+ * @param negate
+ */
+export const getFilterFromChartClickEventFn = (
+  table: Datatable,
+  xAccessor: Accessor | AccessorFn,
+  splitSeriesAccessorFnMap?: Map<string | number, AccessorFn>,
+  negate: boolean = false
+) => (points: Array<[GeometryValue, XYChartSeriesIdentifier]>): ClickTriggerEvent => {
+  const data: ValueClickContext['data']['data'] = [];
+
+  points.forEach((point) => {
+    const [geometry, { yAccessor, splitAccessors }] = point;
+    const allSplitAccessors = getAllSplitAccessors(splitAccessors, splitSeriesAccessorFnMap);
+    const columns = table.columns.reduce<Array<[index: number, id: string]>>(
+      columnReducer(xAccessor, yAccessor, allSplitAccessors),
+      []
+    );
+    const row = table.rows.findIndex(
+      rowFindPredicate(geometry, xAccessor, yAccessor, allSplitAccessors)
+    );
+    const newData = columns.map(([column, id]) => ({
+      table,
+      column,
+      row,
+      value: table.rows?.[row]?.[id] ?? null,
+    }));
+
+    data.push(...newData);
+  });
+
+  return {
+    name: 'filterBucket',
+    data: {
+      negate,
+      data,
+    },
+  };
+};
+
+/**
+ * Helper function to get filter action event from series
+ */
+export const getFilterFromSeriesFn = (table: Datatable) => (
+  { splitAccessors }: XYChartSeriesIdentifier,
+  splitSeriesAccessorFnMap?: Map<string | number, AccessorFn>,
+  negate = false
+): ClickTriggerEvent => {
+  const allSplitAccessors = getAllSplitAccessors(splitAccessors, splitSeriesAccessorFnMap);
+  const columns = table.columns.reduce<Array<[index: number, id: string]>>(
+    columnReducer(null, null, allSplitAccessors),
+    []
+  );
+  const row = table.rows.findIndex(rowFindPredicate(null, null, null, allSplitAccessors));
+  const data: ValueClickContext['data']['data'] = columns.map(([column, id]) => ({
+    table,
+    column,
+    row,
+    value: table.rows?.[row]?.[id] ?? null,
+  }));
+
+  return {
+    name: 'filterBucket',
+    data: {
+      negate,
+      data,
+    },
+  };
+};
+
+/**
+ * Helper function to transform `@elastic/charts` brush event into brush action event
+ */
+export const getBrushFromChartBrushEventFn = (
+  table: Datatable,
+  xAccessor: Accessor | AccessorFn
+) => ({ x: selectedRange }: XYBrushArea): BrushTriggerEvent => {
+  const [start, end] = selectedRange ?? [0, 0];
+  const range: [number, number] = [start, end];
+  const column = table.columns.findIndex(({ id }) => validateAccessorId(id, xAccessor));
+
+  return {
+    data: {
+      table,
+      column,
+      range,
+    },
+    name: 'brush',
+  };
+};
diff --git a/src/plugins/discover/public/application/angular/directives/histogram.tsx b/src/plugins/discover/public/application/angular/directives/histogram.tsx
index 4c39c8bb255422..5a0bd5cca61096 100644
--- a/src/plugins/discover/public/application/angular/directives/histogram.tsx
+++ b/src/plugins/discover/public/application/angular/directives/histogram.tsx
@@ -17,25 +17,17 @@
  * under the License.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer } from '@elastic/eui';
-import moment from 'moment-timezone';
-import { unitOfTime } from 'moment';
+import moment, { unitOfTime } from 'moment-timezone';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import lightEuiTheme from '@elastic/eui/dist/eui_theme_light.json';
-import darkEuiTheme from '@elastic/eui/dist/eui_theme_dark.json';
 
 import {
-  AnnotationDomainTypes,
   Axis,
   Chart,
   HistogramBarSeries,
-  LineAnnotation,
   Position,
   ScaleType,
   Settings,
-  RectAnnotation,
-  TooltipValue,
   TooltipType,
   ElementClickListener,
   XYChartElementEvent,
@@ -43,12 +35,17 @@ import {
   Theme,
 } from '@elastic/charts';
 
-import { i18n } from '@kbn/i18n';
 import { IUiSettingsClient } from 'kibana/public';
 import { EuiChartThemeType } from '@elastic/eui/dist/eui_charts_theme';
 import { Subscription, combineLatest } from 'rxjs';
 import { getServices } from '../../../kibana_services';
 import { Chart as IChart } from '../helpers/point_series';
+import {
+  CurrentTime,
+  Endzones,
+  getAdjustedInterval,
+  renderEndzoneTooltip,
+} from '../../../../../charts/public';
 
 export interface DiscoverHistogramProps {
   chartData: IChart;
@@ -60,34 +57,6 @@ interface DiscoverHistogramState {
   chartsBaseTheme: Theme;
 }
 
-function findIntervalFromDuration(
-  dateValue: number,
-  esValue: number,
-  esUnit: unitOfTime.Base,
-  timeZone: string
-) {
-  const date = moment.tz(dateValue, timeZone);
-  const startOfDate = moment.tz(date, timeZone).startOf(esUnit);
-  const endOfDate = moment.tz(date, timeZone).startOf(esUnit).add(esValue, esUnit);
-  return endOfDate.valueOf() - startOfDate.valueOf();
-}
-
-function getIntervalInMs(
-  value: number,
-  esValue: number,
-  esUnit: unitOfTime.Base,
-  timeZone: string
-): number {
-  switch (esUnit) {
-    case 's':
-      return 1000 * esValue;
-    case 'ms':
-      return 1 * esValue;
-    default:
-      return findIntervalFromDuration(value, esValue, esUnit, timeZone);
-  }
-}
-
 function getTimezone(uiSettings: IUiSettingsClient) {
   if (uiSettings.isDefault('dateFormat:tz')) {
     const detectedTimezone = moment.tz.guess();
@@ -98,27 +67,6 @@ function getTimezone(uiSettings: IUiSettingsClient) {
   }
 }
 
-export function findMinInterval(
-  xValues: number[],
-  esValue: number,
-  esUnit: string,
-  timeZone: string
-): number {
-  return xValues.reduce((minInterval, currentXvalue, index) => {
-    let currentDiff = minInterval;
-    if (index > 0) {
-      currentDiff = Math.abs(xValues[index - 1] - currentXvalue);
-    }
-    const singleUnitInterval = getIntervalInMs(
-      currentXvalue,
-      esValue,
-      esUnit as unitOfTime.Base,
-      timeZone
-    );
-    return Math.min(minInterval, singleUnitInterval, currentDiff);
-  }, Number.MAX_SAFE_INTEGER);
-}
-
 export class DiscoverHistogram extends Component<DiscoverHistogramProps, DiscoverHistogramState> {
   public static propTypes = {
     chartData: PropTypes.object,
@@ -132,10 +80,10 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
   };
 
   componentDidMount() {
-    this.subscription = combineLatest(
+    this.subscription = combineLatest([
       getServices().theme.chartsTheme$,
-      getServices().theme.chartsBaseTheme$
-    ).subscribe(([chartsTheme, chartsBaseTheme]) =>
+      getServices().theme.chartsBaseTheme$,
+    ]).subscribe(([chartsTheme, chartsBaseTheme]) =>
       this.setState({ chartsTheme, chartsBaseTheme })
     );
   }
@@ -171,40 +119,6 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
     return moment(val).format(xAxisFormat);
   };
 
-  public renderBarTooltip = (xInterval: number, domainStart: number, domainEnd: number) => (
-    headerData: TooltipValue
-  ): JSX.Element | string => {
-    const headerDataValue = headerData.value;
-    const formattedValue = this.formatXValue(headerDataValue);
-
-    const partialDataText = i18n.translate('discover.histogram.partialData.bucketTooltipText', {
-      defaultMessage:
-        'The selected time range does not include this entire bucket, it may contain partial data.',
-    });
-
-    if (headerDataValue < domainStart || headerDataValue + xInterval > domainEnd) {
-      return (
-        <React.Fragment>
-          <EuiFlexGroup
-            alignItems="center"
-            className="dscHistogram__header--partial"
-            responsive={false}
-            gutterSize="xs"
-          >
-            <EuiFlexItem grow={false}>
-              <EuiIcon type="iInCircle" />
-            </EuiFlexItem>
-            <EuiFlexItem>{partialDataText}</EuiFlexItem>
-          </EuiFlexGroup>
-          <EuiSpacer size="xs" />
-          <p>{formattedValue}</p>
-        </React.Fragment>
-      );
-    }
-
-    return formattedValue;
-  };
-
   public render() {
     const uiSettings = getServices().uiSettings;
     const timeZone = getTimezone(uiSettings);
@@ -216,8 +130,9 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
     }
 
     const data = chartData.values;
+    const isDarkMode = uiSettings.get('theme:darkMode');
 
-    /**
+    /*
      * Deprecation: [interval] on [date_histogram] is deprecated, use [fixed_interval] or [calendar_interval].
      * see https://github.com/elastic/kibana/issues/27410
      * TODO: Once the Discover query has been update, we should change the below to use the new field
@@ -232,61 +147,21 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
     const domainStart = domain.min.valueOf();
     const domainEnd = domain.max.valueOf();
 
-    const domainMin = data[0]?.x > domainStart ? domainStart : data[0]?.x;
-    const domainMax = domainEnd - xInterval > lastXValue ? domainEnd - xInterval : lastXValue;
+    const domainMin = Math.min(data[0]?.x, domainStart);
+    const domainMax = Math.max(domainEnd - xInterval, lastXValue);
 
     const xDomain = {
       min: domainMin,
       max: domainMax,
-      minInterval: findMinInterval(xValues, intervalESValue, intervalESUnit, timeZone),
-    };
-
-    // Domain end of 'now' will be milliseconds behind current time, so we extend time by 1 minute and check if
-    // the annotation is within this range; if so, the line annotation uses the domainEnd as its value
-    const now = moment();
-    const isAnnotationAtEdge = moment(domainEnd).add(60000).isAfter(now) && now.isAfter(domainEnd);
-    const lineAnnotationValue = isAnnotationAtEdge ? domainEnd : now;
-
-    const lineAnnotationData = [
-      {
-        dataValue: lineAnnotationValue,
-      },
-    ];
-    const isDarkMode = uiSettings.get('theme:darkMode');
-
-    const lineAnnotationStyle = {
-      line: {
-        strokeWidth: 2,
-        stroke: isDarkMode ? darkEuiTheme.euiColorDanger : lightEuiTheme.euiColorDanger,
-        opacity: 0.7,
-      },
+      minInterval: getAdjustedInterval(
+        xValues,
+        intervalESValue,
+        intervalESUnit as unitOfTime.Base,
+        timeZone
+      ),
     };
-
-    const rectAnnotations = [];
-    if (domainStart !== domainMin) {
-      rectAnnotations.push({
-        coordinates: {
-          x1: domainStart,
-        },
-      });
-    }
-    if (domainEnd !== domainMax) {
-      rectAnnotations.push({
-        coordinates: {
-          x0: domainEnd,
-        },
-      });
-    }
-
-    const rectAnnotationStyle = {
-      stroke: isDarkMode ? darkEuiTheme.euiColorLightShade : lightEuiTheme.euiColorDarkShade,
-      strokeWidth: 0,
-      opacity: isDarkMode ? 0.6 : 0.2,
-      fill: isDarkMode ? darkEuiTheme.euiColorLightShade : lightEuiTheme.euiColorDarkShade,
-    };
-
     const tooltipProps = {
-      headerFormatter: this.renderBarTooltip(xInterval, domainStart, domainEnd),
+      headerFormatter: renderEndzoneTooltip(xInterval, domainStart, domainEnd, this.formatXValue),
       type: TooltipType.VerticalCursor,
     };
 
@@ -313,19 +188,14 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
           tickFormat={this.formatXValue}
           ticks={10}
         />
-        <LineAnnotation
-          id="line-annotation"
-          domainType={AnnotationDomainTypes.XDomain}
-          dataValues={lineAnnotationData}
-          hideTooltips={true}
-          style={lineAnnotationStyle}
-        />
-        <RectAnnotation
-          dataValues={rectAnnotations}
-          id="rect-annotation"
-          zIndex={2}
-          style={rectAnnotationStyle}
-          hideTooltips={true}
+        <CurrentTime isDarkMode={isDarkMode} domainEnd={domainEnd} />
+        <Endzones
+          isDarkMode={isDarkMode}
+          domainStart={domainStart}
+          domainEnd={domainEnd}
+          interval={xDomain.minInterval}
+          domainMin={xDomain.min}
+          domainMax={xDomain.max}
         />
         <HistogramBarSeries
           id="discover-histogram"
diff --git a/src/plugins/home/server/services/sample_data/data_sets/ecommerce/saved_objects.ts b/src/plugins/home/server/services/sample_data/data_sets/ecommerce/saved_objects.ts
index 60d05890028d10..5cb837f816ff2b 100644
--- a/src/plugins/home/server/services/sample_data/data_sets/ecommerce/saved_objects.ts
+++ b/src/plugins/home/server/services/sample_data/data_sets/ecommerce/saved_objects.ts
@@ -34,7 +34,7 @@ export const getSavedObjects = (): SavedObject[] => [
         defaultMessage: '[eCommerce] Sales by Category',
       }),
       visState:
-        '{"title":"[eCommerce] Sales by Category","type":"area","params":{"type":"area","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Sum of total_quantity"}}],"seriesParams":[{"show":"true","type":"area","mode":"stacked","data":{"label":"Sum of total_quantity","id":"1"},"drawLinesBetweenPoints":true,"showCircles":true,"interpolate":"linear","valueAxis":"ValueAxis-1"}],"addTooltip":true,"addLegend":true,"legendPosition":"top","times":[],"addTimeMarker":false},"aggs":[{"id":"1","enabled":true,"type":"sum","schema":"metric","params":{"field":"total_quantity"}},{"id":"2","enabled":true,"type":"date_histogram","schema":"segment","params":{"field":"order_date","interval":"auto","time_zone":"America/New_York","drop_partials":false,"customInterval":"2h","min_doc_count":1,"extended_bounds":{}}},{"id":"3","enabled":true,"type":"terms","schema":"group","params":{"field":"category.keyword","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing"}}]}',
+        '{"title":"[eCommerce] Sales by Category","type":"area","params":{"type":"area","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100,"filter":true},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Sum of total_quantity"}}],"seriesParams":[{"show":"true","type":"area","mode":"stacked","data":{"label":"Sum of total_quantity","id":"1"},"drawLinesBetweenPoints":true,"showCircles":true,"interpolate":"linear","valueAxis":"ValueAxis-1"}],"addTooltip":true,"addLegend":true,"legendPosition":"top","times":[],"addTimeMarker":false,"detailedTooltip":true},"aggs":[{"id":"1","enabled":true,"type":"sum","schema":"metric","params":{"field":"total_quantity"}},{"id":"2","enabled":true,"type":"date_histogram","schema":"segment","params":{"field":"order_date","interval":"auto","drop_partials":false,"min_doc_count":1,"extended_bounds":{}}},{"id":"3","enabled":true,"type":"terms","schema":"group","params":{"field":"category.keyword","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing"}}]}',
       uiStateJSON: '{}',
       description: '',
       version: 1,
diff --git a/src/plugins/home/server/services/sample_data/data_sets/flights/saved_objects.ts b/src/plugins/home/server/services/sample_data/data_sets/flights/saved_objects.ts
index e65b6ad40651bc..6b06a526a12395 100644
--- a/src/plugins/home/server/services/sample_data/data_sets/flights/saved_objects.ts
+++ b/src/plugins/home/server/services/sample_data/data_sets/flights/saved_objects.ts
@@ -56,7 +56,7 @@ export const getSavedObjects = (): SavedObject[] => [
         defaultMessage: '[Flights] Flight Count and Average Ticket Price',
       }),
       visState:
-        '{"title":"[Flights] Flight Count and Average Ticket Price","type":"area","params":{"type":"area","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Average Ticket Price"}},{"id":"ValueAxis-2","name":"RightAxis-1","type":"value","position":"right","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Flight Count"}}],"seriesParams":[{"show":true,"mode":"stacked","type":"area","drawLinesBetweenPoints":true,"showCircles":false,"interpolate":"linear","lineWidth":2,"data":{"id":"5","label":"Flight Count"},"valueAxis":"ValueAxis-2"},{"show":true,"mode":"stacked","type":"line","drawLinesBetweenPoints":false,"showCircles":true,"interpolate":"linear","data":{"id":"4","label":"Average Ticket Price"},"valueAxis":"ValueAxis-1","lineWidth":2}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false,"radiusRatio":13},"aggs":[{"id":"3","enabled":true,"type":"date_histogram","schema":"segment","params":{"field":"timestamp","interval":"auto","customInterval":"2h","min_doc_count":1,"extended_bounds":{}}},{"id":"5","enabled":true,"type":"count","schema":"metric","params":{"customLabel":"Flight Count"}},{"id":"4","enabled":true,"type":"avg","schema":"metric","params":{"field":"AvgTicketPrice","customLabel":"Average Ticket Price"}},{"id":"2","enabled":true,"type":"avg","schema":"radius","params":{"field":"AvgTicketPrice"}}]}',
+        '{"title":"[Flights] Flight Count and Average Ticket Price","type":"area","params":{"type":"area","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100,"filter":true},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Average Ticket Price"}},{"id":"ValueAxis-2","name":"RightAxis-1","type":"value","position":"right","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Flight Count"}}],"seriesParams":[{"show":true,"mode":"stacked","type":"area","drawLinesBetweenPoints":true,"showCircles":false,"interpolate":"linear","lineWidth":2,"data":{"id":"5","label":"Flight Count"},"valueAxis":"ValueAxis-2"},{"show":true,"mode":"stacked","type":"line","drawLinesBetweenPoints":false,"showCircles":true,"interpolate":"linear","data":{"id":"4","label":"Average Ticket Price"},"valueAxis":"ValueAxis-1","lineWidth":2}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false,"radiusRatio":13,"detailedTooltip":true},"aggs":[{"id":"3","enabled":true,"type":"date_histogram","schema":"segment","params":{"field":"timestamp","interval":"auto","min_doc_count":1,"extended_bounds":{}}},{"id":"5","enabled":true,"type":"count","schema":"metric","params":{"customLabel":"Flight Count"}},{"id":"4","enabled":true,"type":"avg","schema":"metric","params":{"field":"AvgTicketPrice","customLabel":"Average Ticket Price"}},{"id":"2","enabled":true,"type":"avg","schema":"radius","params":{"field":"AvgTicketPrice"}}]}',
       uiStateJSON:
         '{"vis":{"legendOpen":true,"colors":{"Average Ticket Price":"#629E51","Flight Count":"#AEA2E0"}}}',
       description: '',
@@ -133,7 +133,7 @@ export const getSavedObjects = (): SavedObject[] => [
         defaultMessage: '[Flights] Delay Type',
       }),
       visState:
-        '{"title":"[Flights] Delay Type","type":"area","params":{"type":"area","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Count"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Count","id":"1"},"drawLinesBetweenPoints":true,"showCircles":true,"interpolate":"cardinal","valueAxis":"ValueAxis-1"}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{}},{"id":"2","enabled":true,"type":"date_histogram","schema":"segment","params":{"field":"timestamp","interval":"auto","customInterval":"2h","min_doc_count":1,"extended_bounds":{}}},{"id":"3","enabled":true,"type":"terms","schema":"group","params":{"field":"FlightDelayType","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing"}}]}',
+        '{"title":"[Flights] Delay Type","type":"area","params":{"type":"area","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100,"filter":true},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Count"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Count","id":"1"},"drawLinesBetweenPoints":true,"showCircles":true,"interpolate":"cardinal","valueAxis":"ValueAxis-1"}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false,"detailedTooltip":true},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{}},{"id":"2","enabled":true,"type":"date_histogram","schema":"segment","params":{"field":"timestamp","interval":"auto","min_doc_count":1,"extended_bounds":{}}},{"id":"3","enabled":true,"type":"terms","schema":"group","params":{"field":"FlightDelayType","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing"}}]}',
       uiStateJSON: '{}',
       description: '',
       version: 1,
@@ -176,7 +176,7 @@ export const getSavedObjects = (): SavedObject[] => [
         defaultMessage: '[Flights] Delay Buckets',
       }),
       visState:
-        '{"title":"[Flights] Delay Buckets","type":"histogram","params":{"type":"histogram","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Count"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Count","id":"1"},"valueAxis":"ValueAxis-1","drawLinesBetweenPoints":true,"showCircles":true}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{}},{"id":"2","enabled":true,"type":"histogram","schema":"segment","params":{"field":"FlightDelayMin","interval":30,"extended_bounds":{},"customLabel":"Flight Delay Minutes"}}]}',
+        '{"title":"[Flights] Delay Buckets","type":"histogram","params":{"type":"histogram","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100,"filter":true},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Count"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Count","id":"1"},"valueAxis":"ValueAxis-1","drawLinesBetweenPoints":true,"showCircles":true}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false,"detailedTooltip":true},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{}},{"id":"2","enabled":true,"type":"histogram","schema":"segment","params":{"field":"FlightDelayMin","interval":30,"extended_bounds":{},"customLabel":"Flight Delay Minutes"}}]}',
       uiStateJSON: '{"vis":{"legendOpen":false}}',
       description: '',
       version: 1,
@@ -198,7 +198,7 @@ export const getSavedObjects = (): SavedObject[] => [
         defaultMessage: '[Flights] Flight Delays',
       }),
       visState:
-        '{"title":"[Flights] Flight Delays","type":"histogram","params":{"type":"histogram","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"left","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"BottomAxis-1","type":"value","position":"bottom","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Count"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Count","id":"1"},"valueAxis":"ValueAxis-1","drawLinesBetweenPoints":true,"showCircles":true}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{"customLabel":""}},{"id":"2","enabled":true,"type":"terms","schema":"segment","params":{"field":"FlightDelay","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing","customLabel":"Flight Delays"}}]}',
+        '{"title":"[Flights] Flight Delays","type":"histogram","params":{"type":"histogram","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"left","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100,"filter":true},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"BottomAxis-1","type":"value","position":"bottom","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Count"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Count","id":"1"},"valueAxis":"ValueAxis-1","drawLinesBetweenPoints":true,"showCircles":true}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false,"detailedTooltip":true},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{"customLabel":""}},{"id":"2","enabled":true,"type":"terms","schema":"segment","params":{"field":"FlightDelay","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing","customLabel":"Flight Delays"}}]}',
       uiStateJSON: '{}',
       description: '',
       version: 1,
@@ -220,7 +220,7 @@ export const getSavedObjects = (): SavedObject[] => [
         defaultMessage: '[Flights] Flight Cancellations',
       }),
       visState:
-        '{"title":"[Flights] Flight Cancellations","type":"histogram","params":{"type":"histogram","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"left","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"BottomAxis-1","type":"value","position":"bottom","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Count"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Count","id":"1"},"valueAxis":"ValueAxis-1","drawLinesBetweenPoints":true,"showCircles":true}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{"customLabel":""}},{"id":"2","enabled":true,"type":"terms","schema":"segment","params":{"field":"Cancelled","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing","customLabel":"Flight Cancellations"}}]}',
+        '{"title":"[Flights] Flight Cancellations","type":"histogram","params":{"type":"histogram","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"left","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100,"filter":true},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"BottomAxis-1","type":"value","position":"bottom","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Count"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Count","id":"1"},"valueAxis":"ValueAxis-1","drawLinesBetweenPoints":true,"showCircles":true}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false,"detailedTooltip":true},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{"customLabel":""}},{"id":"2","enabled":true,"type":"terms","schema":"segment","params":{"field":"Cancelled","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing","customLabel":"Flight Cancellations"}}]}',
       uiStateJSON: '{}',
       description: '',
       version: 1,
diff --git a/src/plugins/home/server/services/sample_data/data_sets/logs/saved_objects.ts b/src/plugins/home/server/services/sample_data/data_sets/logs/saved_objects.ts
index 068ba66c4b0ded..7b891107cdfb0f 100644
--- a/src/plugins/home/server/services/sample_data/data_sets/logs/saved_objects.ts
+++ b/src/plugins/home/server/services/sample_data/data_sets/logs/saved_objects.ts
@@ -33,7 +33,7 @@ export const getSavedObjects = (): SavedObject[] => [
         defaultMessage: '[Logs] Unique Visitors vs. Average Bytes',
       }),
       visState:
-        '{"title":"[Logs] Unique Visitors vs. Average Bytes","type":"area","params":{"type":"area","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Avg. Bytes"}},{"id":"ValueAxis-2","name":"RightAxis-1","type":"value","position":"right","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Unique Visitors"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Avg. Bytes","id":"1"},"drawLinesBetweenPoints":true,"showCircles":true,"interpolate":"linear","valueAxis":"ValueAxis-1"},{"show":true,"mode":"stacked","type":"line","drawLinesBetweenPoints":false,"showCircles":true,"interpolate":"linear","data":{"id":"2","label":"Unique Visitors"},"valueAxis":"ValueAxis-2"}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false,"radiusRatio":17},"aggs":[{"id":"1","enabled":true,"type":"avg","schema":"metric","params":{"field":"bytes","customLabel":"Avg. Bytes"}},{"id":"2","enabled":true,"type":"cardinality","schema":"metric","params":{"field":"clientip","customLabel":"Unique Visitors"}},{"id":"3","enabled":true,"type":"date_histogram","schema":"segment","params":{"field":"timestamp","interval":"auto","time_zone":"America/Los_Angeles","customInterval":"2h","min_doc_count":1,"extended_bounds":{}}},{"id":"4","enabled":true,"type":"count","schema":"radius","params":{}}]}',
+        '{"title":"[Logs] Unique Visitors vs. Average Bytes","type":"area","params":{"type":"area","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100,"filter":true},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Avg. Bytes"}},{"id":"ValueAxis-2","name":"RightAxis-1","type":"value","position":"right","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Unique Visitors"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Avg. Bytes","id":"1"},"drawLinesBetweenPoints":true,"showCircles":true,"interpolate":"linear","valueAxis":"ValueAxis-1"},{"show":true,"mode":"stacked","type":"line","drawLinesBetweenPoints":false,"showCircles":true,"interpolate":"linear","data":{"id":"2","label":"Unique Visitors"},"valueAxis":"ValueAxis-2"}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false,"radiusRatio":17,"detailedTooltip":true},"aggs":[{"id":"1","enabled":true,"type":"avg","schema":"metric","params":{"field":"bytes","customLabel":"Avg. Bytes"}},{"id":"2","enabled":true,"type":"cardinality","schema":"metric","params":{"field":"clientip","customLabel":"Unique Visitors"}},{"id":"3","enabled":true,"type":"date_histogram","schema":"segment","params":{"field":"timestamp","interval":"auto","min_doc_count":1,"extended_bounds":{}}},{"id":"4","enabled":true,"type":"count","schema":"radius","params":{}}]}',
       uiStateJSON: '{"vis":{"colors":{"Avg. Bytes":"#70DBED","Unique Visitors":"#0A437C"}}}',
       description: '',
       version: 1,
diff --git a/src/plugins/vis_default_editor/public/components/agg_add.tsx b/src/plugins/vis_default_editor/public/components/agg_add.tsx
index e78f2fcc4453cf..2da7b33139a8e5 100644
--- a/src/plugins/vis_default_editor/public/components/agg_add.tsx
+++ b/src/plugins/vis_default_editor/public/components/agg_add.tsx
@@ -76,10 +76,17 @@ function DefaultEditorAggAdd({
     </EuiButtonEmpty>
   );
 
-  const isSchemaDisabled = (schema: Schema): boolean => {
+  const isMaxedCount = (schema: Schema): boolean => {
     const count = group.filter((agg) => agg.schema === schema.name).length;
     return count >= schema.max;
   };
+  const isSchemaDisabled = (schema: Schema, maxedCount: boolean): boolean => {
+    return schema.disabled ?? maxedCount;
+  };
+  const maxTooltipText = i18n.translate('visDefaultEditor.aggAdd.maxBuckets', {
+    defaultMessage: 'Max {groupNameLabel} count reached',
+    values: { groupNameLabel },
+  });
 
   return (
     <EuiFlexGroup justifyContent="center" responsive={false}>
@@ -109,16 +116,21 @@ function DefaultEditorAggAdd({
             )}
           </EuiPopoverTitle>
           <EuiContextMenuPanel
-            items={schemas.map((schema) => (
-              <EuiContextMenuItem
-                key={`${schema.name}_${schema.title}`}
-                data-test-subj={`visEditorAdd_${groupName}_${schema.title}`}
-                disabled={isPopoverOpen && isSchemaDisabled(schema)}
-                onClick={() => onSelectSchema(schema)}
-              >
-                {schema.title}
-              </EuiContextMenuItem>
-            ))}
+            items={schemas.map((schema) => {
+              const maxedCount = isMaxedCount(schema);
+
+              return (
+                <EuiContextMenuItem
+                  key={`${schema.name}_${schema.title}`}
+                  data-test-subj={`visEditorAdd_${groupName}_${schema.title}`}
+                  disabled={isPopoverOpen && isSchemaDisabled(schema, maxedCount)}
+                  onClick={() => onSelectSchema(schema)}
+                  toolTipContent={schema.tooltip ?? (maxedCount ? maxTooltipText : undefined)}
+                >
+                  {schema.title}
+                </EuiContextMenuItem>
+              );
+            })}
           />
         </EuiPopover>
       </EuiFlexItem>
diff --git a/src/plugins/vis_default_editor/public/components/sidebar/use_option_tabs.ts b/src/plugins/vis_default_editor/public/components/sidebar/use_option_tabs.ts
index 337533df50fadc..90e2d792d3597c 100644
--- a/src/plugins/vis_default_editor/public/components/sidebar/use_option_tabs.ts
+++ b/src/plugins/vis_default_editor/public/components/sidebar/use_option_tabs.ts
@@ -20,9 +20,10 @@
 import { useCallback, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 
-import { Vis } from 'src/plugins/visualizations/public';
-import { DefaultEditorDataTab, DefaultEditorDataTabProps } from './data_tab';
+import { Vis } from '../../../../visualizations/public';
+
 import { VisOptionsProps } from '../../vis_options_props';
+import { DefaultEditorDataTab, DefaultEditorDataTabProps } from './data_tab';
 
 export interface OptionTab {
   editor: React.ComponentType<VisOptionsProps | DefaultEditorDataTabProps>;
diff --git a/src/plugins/vis_default_editor/public/default_editor_controller.tsx b/src/plugins/vis_default_editor/public/default_editor_controller.tsx
index 707b14c23ea75a..f44ea3e203b058 100644
--- a/src/plugins/vis_default_editor/public/default_editor_controller.tsx
+++ b/src/plugins/vis_default_editor/public/default_editor_controller.tsx
@@ -25,6 +25,7 @@ import { EuiErrorBoundary, EuiLoadingChart } from '@elastic/eui';
 import { EditorRenderProps, IEditorController } from 'src/plugins/visualize/public';
 import { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public';
 
+// @ts-ignore
 const DefaultEditor = lazy(() => import('./default_editor'));
 
 class DefaultEditorController implements IEditorController {
diff --git a/src/plugins/vis_default_editor/public/schemas.ts b/src/plugins/vis_default_editor/public/schemas.ts
index d95a6252331bfb..7ecb4e54726b8e 100644
--- a/src/plugins/vis_default_editor/public/schemas.ts
+++ b/src/plugins/vis_default_editor/public/schemas.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { ReactNode } from 'react';
 import _, { defaults } from 'lodash';
 
 import { Optional } from '@kbn/utility-types';
@@ -42,6 +43,8 @@ export interface Schema {
   hideCustomLabel?: boolean;
   mustBeFirst?: boolean;
   aggSettings?: any;
+  disabled?: boolean;
+  tooltip?: ReactNode;
 }
 
 export class Schemas implements ISchemas {
diff --git a/src/plugins/vis_type_markdown/public/to_ast.test.ts b/src/plugins/vis_type_markdown/public/to_ast.test.ts
index 1ad1fa0ee25176..4c7b570aef05d7 100644
--- a/src/plugins/vis_type_markdown/public/to_ast.test.ts
+++ b/src/plugins/vis_type_markdown/public/to_ast.test.ts
@@ -42,12 +42,14 @@ describe('markdown vis toExpressionAst function', () => {
 
   it('without params', () => {
     vis.params = {};
+    // @ts-expect-error
     const actual = toExpressionAst(vis);
     expect(actual).toMatchSnapshot();
   });
 
   it('with params', () => {
     vis.params = { markdown: '### my markdown', fontSize: 15, openLinksInNewTab: true };
+    // @ts-expect-error
     const actual = toExpressionAst(vis);
     expect(actual).toMatchSnapshot();
   });
diff --git a/src/plugins/vis_type_markdown/public/to_ast.ts b/src/plugins/vis_type_markdown/public/to_ast.ts
index 9b481218b42ea7..dc61acf722ad48 100644
--- a/src/plugins/vis_type_markdown/public/to_ast.ts
+++ b/src/plugins/vis_type_markdown/public/to_ast.ts
@@ -17,11 +17,11 @@
  * under the License.
  */
 
-import { Vis } from '../../visualizations/public';
+import { VisToExpressionAst } from '../../visualizations/public';
 import { buildExpression, buildExpressionFunction } from '../../expressions/public';
 import { MarkdownVisExpressionFunctionDefinition } from './markdown_fn';
 
-export const toExpressionAst = (vis: Vis) => {
+export const toExpressionAst: VisToExpressionAst = (vis) => {
   const { markdown, fontSize, openLinksInNewTab } = vis.params;
 
   const markdownVis = buildExpressionFunction<MarkdownVisExpressionFunctionDefinition>(
diff --git a/src/plugins/vis_type_metric/public/components/metric_vis_options.tsx b/src/plugins/vis_type_metric/public/components/metric_vis_options.tsx
index d0a7412238871a..d87a0da740d751 100644
--- a/src/plugins/vis_type_metric/public/components/metric_vis_options.tsx
+++ b/src/plugins/vis_type_metric/public/components/metric_vis_options.tsx
@@ -31,7 +31,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import {
-  ColorModes,
+  ColorMode,
   ColorRanges,
   ColorSchemaOptions,
   SwitchOption,
@@ -86,7 +86,7 @@ function MetricVisOptions({
   );
 
   const setColorMode: EuiButtonGroupProps['onChange'] = useCallback(
-    (id: string) => setMetricValue('metricColorMode', id as ColorModes),
+    (id: string) => setMetricValue('metricColorMode', id as ColorMode),
     [setMetricValue]
   );
 
@@ -158,7 +158,7 @@ function MetricVisOptions({
           colorSchemas={vis.type.editorConfig.collections.colorSchemas}
           disabled={
             stateParams.metric.colorsRange.length === 1 ||
-            stateParams.metric.metricColorMode === ColorModes.NONE
+            stateParams.metric.metricColorMode === ColorMode.None
           }
           invertColors={stateParams.metric.invertColors}
           setValue={setMetricValue as SetColorSchemaOptionsValue}
diff --git a/src/plugins/vis_type_metric/public/metric_vis_fn.ts b/src/plugins/vis_type_metric/public/metric_vis_fn.ts
index ae6dc6683852e4..783ca3d3906ea7 100644
--- a/src/plugins/vis_type_metric/public/metric_vis_fn.ts
+++ b/src/plugins/vis_type_metric/public/metric_vis_fn.ts
@@ -27,14 +27,14 @@ import {
   Style,
 } from '../../expressions/public';
 import { visType, DimensionsVisParam, VisParams } from './types';
-import { ColorSchemas, vislibColorMaps, ColorModes } from '../../charts/public';
+import { ColorSchemas, vislibColorMaps, ColorMode } from '../../charts/public';
 
 export type Input = Datatable;
 
 interface Arguments {
   percentageMode: boolean;
   colorSchema: ColorSchemas;
-  colorMode: ColorModes;
+  colorMode: ColorMode;
   useRanges: boolean;
   invertColors: boolean;
   showLabels: boolean;
@@ -86,7 +86,7 @@ export const createMetricVisFn = (): MetricVisExpressionFunctionDefinition => ({
     colorMode: {
       types: ['string'],
       default: '"None"',
-      options: [ColorModes.NONE, ColorModes.LABELS, ColorModes.BACKGROUND],
+      options: [ColorMode.None, ColorMode.Labels, ColorMode.Background],
       help: i18n.translate('visTypeMetric.function.colorMode.help', {
         defaultMessage: 'Which part of metric to color',
       }),
@@ -197,8 +197,8 @@ export const createMetricVisFn = (): MetricVisExpressionFunctionDefinition => ({
             invertColors: args.invertColors,
             style: {
               bgFill: args.bgFill,
-              bgColor: args.colorMode === ColorModes.BACKGROUND,
-              labelColor: args.colorMode === ColorModes.LABELS,
+              bgColor: args.colorMode === ColorMode.Background,
+              labelColor: args.colorMode === ColorMode.Labels,
               subText: args.subText,
               fontSize,
             },
diff --git a/src/plugins/vis_type_metric/public/metric_vis_type.ts b/src/plugins/vis_type_metric/public/metric_vis_type.ts
index f7c74e324053e6..ba8f27b9412a26 100644
--- a/src/plugins/vis_type_metric/public/metric_vis_type.ts
+++ b/src/plugins/vis_type_metric/public/metric_vis_type.ts
@@ -20,7 +20,7 @@
 import { i18n } from '@kbn/i18n';
 import { BaseVisTypeOptions } from 'src/plugins/visualizations/public';
 import { MetricVisOptions } from './components/metric_vis_options';
-import { ColorSchemas, colorSchemas, ColorModes } from '../../charts/public';
+import { ColorSchemas, colorSchemas, ColorMode } from '../../charts/public';
 import { AggGroupNames } from '../../data/public';
 import { Schemas } from '../../vis_default_editor/public';
 import { toExpressionAst } from './to_ast';
@@ -42,7 +42,7 @@ export const createMetricVisTypeDefinition = (): BaseVisTypeOptions => ({
         percentageMode: false,
         useRanges: false,
         colorSchema: ColorSchemas.GreenToRed,
-        metricColorMode: ColorModes.NONE,
+        metricColorMode: ColorMode.None,
         colorsRange: [{ from: 0, to: 10000 }],
         labels: {
           show: true,
@@ -62,19 +62,19 @@ export const createMetricVisTypeDefinition = (): BaseVisTypeOptions => ({
     collections: {
       metricColorMode: [
         {
-          id: ColorModes.NONE,
+          id: ColorMode.None,
           label: i18n.translate('visTypeMetric.colorModes.noneOptionLabel', {
             defaultMessage: 'None',
           }),
         },
         {
-          id: ColorModes.LABELS,
+          id: ColorMode.Labels,
           label: i18n.translate('visTypeMetric.colorModes.labelsOptionLabel', {
             defaultMessage: 'Labels',
           }),
         },
         {
-          id: ColorModes.BACKGROUND,
+          id: ColorMode.Background,
           label: i18n.translate('visTypeMetric.colorModes.backgroundOptionLabel', {
             defaultMessage: 'Background',
           }),
diff --git a/src/plugins/vis_type_metric/public/types.ts b/src/plugins/vis_type_metric/public/types.ts
index e1f2c7721a4262..e0ebfb36fa37d8 100644
--- a/src/plugins/vis_type_metric/public/types.ts
+++ b/src/plugins/vis_type_metric/public/types.ts
@@ -19,7 +19,7 @@
 
 import { Range } from '../../expressions/public';
 import { SchemaConfig } from '../../visualizations/public';
-import { ColorModes, Labels, Style, ColorSchemas } from '../../charts/public';
+import { ColorMode, Labels, Style, ColorSchemas } from '../../charts/public';
 
 export const visType = 'metric';
 
@@ -32,7 +32,7 @@ export interface MetricVisParam {
   percentageMode: boolean;
   useRanges: boolean;
   colorSchema: ColorSchemas;
-  metricColorMode: ColorModes;
+  metricColorMode: ColorMode;
   colorsRange: Range[];
   labels: Labels;
   invertColors: boolean;
diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap
index 7ded8e2254aa98..fceb9c3fdb8197 100644
--- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap
+++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`src/legacy/core_plugins/metrics/public/visualizations/views/timeseries/decorators/area_decorator.js <AreaSeriesDecorator /> should render and match a snapshot 1`] = `
-<AreaSeries
+<Connect(SpecInstance)
   areaSeriesStyle={
     Object {
       "area": Object {
diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap
index 02c7fd811e583b..a3929e2d3d7d52 100644
--- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap
+++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`src/legacy/core_plugins/metrics/public/visualizations/views/timeseries/decorators/bar_decorator.js <BarSeriesDecorator /> should render and match a snapshot 1`] = `
-<BarSeries
+<Connect(SpecInstance)
   barSeriesStyle={
     Object {
       "rect": Object {
diff --git a/src/plugins/vis_type_vislib/kibana.json b/src/plugins/vis_type_vislib/kibana.json
index 720abff16b7c77..175c21f47c182a 100644
--- a/src/plugins/vis_type_vislib/kibana.json
+++ b/src/plugins/vis_type_vislib/kibana.json
@@ -4,6 +4,5 @@
   "server": true,
   "ui": true,
   "requiredPlugins": ["charts", "data", "expressions", "visualizations", "kibanaLegacy"],
-  "optionalPlugins": ["visTypeXy"],
-  "requiredBundles": ["kibanaUtils", "visDefaultEditor"]
+  "requiredBundles": ["kibanaUtils", "visDefaultEditor", "visTypeXy"]
 }
diff --git a/src/plugins/vis_type_vislib/public/area.ts b/src/plugins/vis_type_vislib/public/area.ts
index ec7bce254f586b..389daca6d17767 100644
--- a/src/plugins/vis_type_vislib/public/area.ts
+++ b/src/plugins/vis_type_vislib/public/area.ts
@@ -17,172 +17,14 @@
  * under the License.
  */
 
-import { i18n } from '@kbn/i18n';
-// @ts-ignore
-import { palettes } from '@elastic/eui/lib/services';
-// @ts-ignore
-import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
+import { xyVisTypes } from '../../vis_type_xy/public';
+import { BaseVisTypeOptions } from '../../visualizations/public';
 
-import { AggGroupNames } from '../../data/public';
-import { Schemas } from '../../vis_default_editor/public';
-import {
-  Positions,
-  ChartTypes,
-  ChartModes,
-  InterpolationModes,
-  AxisTypes,
-  ScaleTypes,
-  AxisModes,
-  ThresholdLineStyles,
-  getConfigCollections,
-} from './utils/collections';
-import { getAreaOptionTabs, countLabel } from './utils/common_config';
-import { Rotates } from '../../charts/public';
-import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../../plugins/visualizations/public';
 import { toExpressionAst } from './to_ast';
 import { BasicVislibParams } from './types';
 
 export const areaVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
-  name: 'area',
-  title: i18n.translate('visTypeVislib.area.areaTitle', { defaultMessage: 'Area' }),
-  icon: 'visArea',
-  description: i18n.translate('visTypeVislib.area.areaDescription', {
-    defaultMessage: 'Emphasize the data between an axis and a line.',
-  }),
-  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  ...(xyVisTypes.area() as BaseVisTypeOptions<BasicVislibParams>),
   toExpressionAst,
-  visConfig: {
-    defaults: {
-      type: 'area',
-      grid: {
-        categoryLines: false,
-      },
-      categoryAxes: [
-        {
-          id: 'CategoryAxis-1',
-          type: AxisTypes.CATEGORY,
-          position: Positions.BOTTOM,
-          show: true,
-          style: {},
-          scale: {
-            type: ScaleTypes.LINEAR,
-          },
-          labels: {
-            show: true,
-            filter: true,
-            truncate: 100,
-          },
-          title: {},
-        },
-      ],
-      valueAxes: [
-        {
-          id: 'ValueAxis-1',
-          name: 'LeftAxis-1',
-          type: AxisTypes.VALUE,
-          position: Positions.LEFT,
-          show: true,
-          style: {},
-          scale: {
-            type: ScaleTypes.LINEAR,
-            mode: AxisModes.NORMAL,
-          },
-          labels: {
-            show: true,
-            rotate: Rotates.HORIZONTAL,
-            filter: false,
-            truncate: 100,
-          },
-          title: {
-            text: countLabel,
-          },
-        },
-      ],
-      seriesParams: [
-        {
-          show: true,
-          type: ChartTypes.AREA,
-          mode: ChartModes.STACKED,
-          data: {
-            label: countLabel,
-            id: '1',
-          },
-          drawLinesBetweenPoints: true,
-          lineWidth: 2,
-          showCircles: true,
-          interpolate: InterpolationModes.LINEAR,
-          valueAxis: 'ValueAxis-1',
-        },
-      ],
-      addTooltip: true,
-      addLegend: true,
-      legendPosition: Positions.RIGHT,
-      times: [],
-      addTimeMarker: false,
-      thresholdLine: {
-        show: false,
-        value: 10,
-        width: 1,
-        style: ThresholdLineStyles.FULL,
-        color: euiPaletteColorBlind()[9],
-      },
-      labels: {},
-    },
-  },
-  editorConfig: {
-    collections: getConfigCollections(),
-    optionTabs: getAreaOptionTabs(),
-    schemas: new Schemas([
-      {
-        group: AggGroupNames.Metrics,
-        name: 'metric',
-        title: i18n.translate('visTypeVislib.area.metricsTitle', {
-          defaultMessage: 'Y-axis',
-        }),
-        aggFilter: ['!geo_centroid', '!geo_bounds'],
-        min: 1,
-        defaults: [{ schema: 'metric', type: 'count' }],
-      },
-      {
-        group: AggGroupNames.Metrics,
-        name: 'radius',
-        title: i18n.translate('visTypeVislib.area.radiusTitle', {
-          defaultMessage: 'Dot size',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'segment',
-        title: i18n.translate('visTypeVislib.area.segmentTitle', {
-          defaultMessage: 'X-axis',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'group',
-        title: i18n.translate('visTypeVislib.area.groupTitle', {
-          defaultMessage: 'Split series',
-        }),
-        min: 0,
-        max: 3,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'split',
-        title: i18n.translate('visTypeVislib.area.splitTitle', {
-          defaultMessage: 'Split chart',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-    ]),
-  },
+  visualization: undefined,
 };
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/index.test.tsx b/src/plugins/vis_type_vislib/public/components/options/metrics_axes/index.test.tsx
deleted file mode 100644
index 63881fea1ad889..00000000000000
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/index.test.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-/*
- * 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 { mount, shallow } from 'enzyme';
-
-import { IAggConfig, IAggType } from 'src/plugins/data/public';
-import MetricsAxisOptions from './index';
-import { BasicVislibParams, SeriesParam, ValueAxis } from '../../../types';
-import { ValidationVisOptionsProps } from '../../common';
-import { Positions } from '../../../utils/collections';
-import { ValueAxesPanel } from './value_axes_panel';
-import { CategoryAxisPanel } from './category_axis_panel';
-import { ChartTypes } from '../../../utils/collections';
-import { defaultValueAxisId, valueAxis, seriesParam, categoryAxis } from './mocks';
-
-jest.mock('./series_panel', () => ({
-  SeriesPanel: () => 'SeriesPanel',
-}));
-jest.mock('./category_axis_panel', () => ({
-  CategoryAxisPanel: () => 'CategoryAxisPanel',
-}));
-jest.mock('./value_axes_panel', () => ({
-  ValueAxesPanel: () => 'ValueAxesPanel',
-}));
-
-const SERIES_PARAMS = 'seriesParams';
-const VALUE_AXES = 'valueAxes';
-
-const aggCount: IAggConfig = {
-  id: '1',
-  type: { name: 'count' },
-  makeLabel: () => 'Count',
-} as IAggConfig;
-
-const aggAverage: IAggConfig = {
-  id: '2',
-  type: { name: 'average' } as IAggType,
-  makeLabel: () => 'Average',
-} as IAggConfig;
-
-const createAggs = (aggs: any[]) => ({
-  aggs,
-  bySchemaName: () => aggs,
-});
-
-describe('MetricsAxisOptions component', () => {
-  let setValue: jest.Mock;
-  let defaultProps: ValidationVisOptionsProps<BasicVislibParams>;
-  let axis: ValueAxis;
-  let axisRight: ValueAxis;
-  let chart: SeriesParam;
-
-  beforeEach(() => {
-    setValue = jest.fn();
-
-    axis = {
-      ...valueAxis,
-      name: 'LeftAxis-1',
-      position: Positions.LEFT,
-    };
-    axisRight = {
-      ...valueAxis,
-      id: 'ValueAxis-2',
-      name: 'RightAxis-1',
-      position: Positions.RIGHT,
-    };
-    chart = {
-      ...seriesParam,
-      type: ChartTypes.AREA,
-    };
-
-    defaultProps = {
-      aggs: createAggs([aggCount]),
-      isTabSelected: true,
-      vis: {
-        type: {
-          type: ChartTypes.AREA,
-          schemas: { metrics: [{ name: 'metric' }] },
-        },
-        setState: jest.fn(),
-        serialize: jest.fn(),
-      },
-      stateParams: {
-        valueAxes: [axis],
-        seriesParams: [chart],
-        categoryAxes: [categoryAxis],
-        grid: { valueAxis: defaultValueAxisId },
-      },
-      setValue,
-    } as any;
-  });
-
-  it('should init with the default set of props', () => {
-    const comp = shallow(<MetricsAxisOptions {...defaultProps} />);
-
-    expect(comp).toMatchSnapshot();
-  });
-
-  describe('useEffect', () => {
-    it('should update series when new agg is added', () => {
-      const comp = mount(<MetricsAxisOptions {...defaultProps} />);
-      comp.setProps({
-        aggs: createAggs([aggCount, aggAverage]),
-      });
-
-      const updatedSeries = [chart, { ...chart, data: { id: '2', label: aggAverage.makeLabel() } }];
-      expect(setValue).toHaveBeenLastCalledWith(SERIES_PARAMS, updatedSeries);
-    });
-
-    it('should update series when new agg label is changed', () => {
-      const comp = mount(<MetricsAxisOptions {...defaultProps} />);
-      const agg = { id: aggCount.id, makeLabel: () => 'New label' };
-      comp.setProps({
-        aggs: createAggs([agg]),
-      });
-
-      const updatedSeries = [{ ...chart, data: { id: agg.id, label: agg.makeLabel() } }];
-      expect(setValue).toHaveBeenCalledWith(SERIES_PARAMS, updatedSeries);
-    });
-  });
-
-  describe('updateAxisTitle', () => {
-    it('should not update the value axis title if custom title was set', () => {
-      defaultProps.stateParams.valueAxes[0].title.text = 'Custom title';
-      const comp = mount(<MetricsAxisOptions {...defaultProps} />);
-      const newAgg = {
-        ...aggCount,
-        makeLabel: () => 'Custom label',
-      };
-      comp.setProps({
-        aggs: createAggs([newAgg]),
-      });
-      const updatedValues = [{ ...axis, title: { text: newAgg.makeLabel() } }];
-      expect(setValue).not.toHaveBeenCalledWith(VALUE_AXES, updatedValues);
-    });
-
-    it('should set the custom title to match the value axis label when only one agg exists for that axis', () => {
-      const comp = mount(<MetricsAxisOptions {...defaultProps} />);
-      const agg = {
-        id: aggCount.id,
-        params: { customLabel: 'Custom label' },
-        makeLabel: () => 'Custom label',
-      };
-      comp.setProps({
-        aggs: createAggs([agg]),
-      });
-
-      const updatedSeriesParams = [{ ...chart, data: { ...chart.data, label: agg.makeLabel() } }];
-      const updatedValues = [{ ...axis, title: { text: agg.makeLabel() } }];
-
-      expect(setValue).toHaveBeenCalledTimes(5);
-      expect(setValue).toHaveBeenNthCalledWith(3, SERIES_PARAMS, updatedSeriesParams);
-      expect(setValue).toHaveBeenNthCalledWith(5, SERIES_PARAMS, updatedSeriesParams);
-      expect(setValue).toHaveBeenNthCalledWith(4, VALUE_AXES, updatedValues);
-    });
-
-    it('should not set the custom title to match the value axis label when more than one agg exists for that axis', () => {
-      const comp = mount(<MetricsAxisOptions {...defaultProps} />);
-      const agg = { id: aggCount.id, makeLabel: () => 'Custom label' };
-      comp.setProps({
-        aggs: createAggs([agg, aggAverage]),
-        stateParams: {
-          ...defaultProps.stateParams,
-          seriesParams: [chart, chart],
-        },
-      });
-
-      expect(setValue).not.toHaveBeenCalledWith(VALUE_AXES);
-    });
-
-    it('should not overwrite the custom title with the value axis label if the custom title has been changed', () => {
-      defaultProps.stateParams.valueAxes[0].title.text = 'Custom title';
-      const comp = mount(<MetricsAxisOptions {...defaultProps} />);
-      const agg = {
-        id: aggCount.id,
-        params: { customLabel: 'Custom label' },
-        makeLabel: () => 'Custom label',
-      };
-      comp.setProps({
-        aggs: createAggs([agg]),
-      });
-
-      expect(setValue).not.toHaveBeenCalledWith(VALUE_AXES);
-    });
-  });
-
-  it('should add value axis', () => {
-    const comp = shallow(<MetricsAxisOptions {...defaultProps} />);
-    comp.find(ValueAxesPanel).prop('addValueAxis')();
-
-    expect(setValue).toHaveBeenCalledWith(VALUE_AXES, [axis, axisRight]);
-  });
-
-  describe('removeValueAxis', () => {
-    beforeEach(() => {
-      defaultProps.stateParams.valueAxes = [axis, axisRight];
-    });
-
-    it('should remove value axis', () => {
-      const comp = shallow(<MetricsAxisOptions {...defaultProps} />);
-      comp.find(ValueAxesPanel).prop('removeValueAxis')(axis);
-
-      expect(setValue).toHaveBeenCalledWith(VALUE_AXES, [axisRight]);
-    });
-
-    it('should update seriesParams "valueAxis" prop', () => {
-      const updatedSeriesParam = { ...chart, valueAxis: 'ValueAxis-2' };
-      const comp = shallow(<MetricsAxisOptions {...defaultProps} />);
-      comp.find(ValueAxesPanel).prop('removeValueAxis')(axis);
-
-      expect(setValue).toHaveBeenCalledWith(SERIES_PARAMS, [updatedSeriesParam]);
-    });
-
-    it('should reset grid "valueAxis" prop', () => {
-      const updatedGrid = { valueAxis: undefined };
-      defaultProps.stateParams.seriesParams[0].valueAxis = 'ValueAxis-2';
-      const comp = shallow(<MetricsAxisOptions {...defaultProps} />);
-      comp.find(ValueAxesPanel).prop('removeValueAxis')(axis);
-
-      expect(setValue).toHaveBeenCalledWith('grid', updatedGrid);
-    });
-  });
-
-  it('should update axis value when when category position chnaged', () => {
-    const comp = shallow(<MetricsAxisOptions {...defaultProps} />);
-    comp.find(CategoryAxisPanel).prop('onPositionChanged')(Positions.LEFT);
-
-    const updatedValues = [{ ...axis, name: 'BottomAxis-1', position: Positions.BOTTOM }];
-    expect(setValue).toHaveBeenCalledWith(VALUE_AXES, updatedValues);
-  });
-});
diff --git a/src/plugins/vis_type_vislib/public/editor/collections.ts b/src/plugins/vis_type_vislib/public/editor/collections.ts
new file mode 100644
index 00000000000000..f1caa0754b0b33
--- /dev/null
+++ b/src/plugins/vis_type_vislib/public/editor/collections.ts
@@ -0,0 +1,73 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+import { colorSchemas } from '../../../charts/public';
+import { getPositions, getScaleTypes } from '../../../vis_type_xy/public';
+
+import { Alignment, GaugeType } from '../types';
+
+export const getGaugeTypes = () => [
+  {
+    text: i18n.translate('visTypeVislib.gauge.gaugeTypes.arcText', {
+      defaultMessage: 'Arc',
+    }),
+    value: GaugeType.Arc,
+  },
+  {
+    text: i18n.translate('visTypeVislib.gauge.gaugeTypes.circleText', {
+      defaultMessage: 'Circle',
+    }),
+    value: GaugeType.Circle,
+  },
+];
+
+export const getAlignments = () => [
+  {
+    text: i18n.translate('visTypeVislib.gauge.alignmentAutomaticTitle', {
+      defaultMessage: 'Automatic',
+    }),
+    value: Alignment.Automatic,
+  },
+  {
+    text: i18n.translate('visTypeVislib.gauge.alignmentHorizontalTitle', {
+      defaultMessage: 'Horizontal',
+    }),
+    value: Alignment.Horizontal,
+  },
+  {
+    text: i18n.translate('visTypeVislib.gauge.alignmentVerticalTitle', {
+      defaultMessage: 'Vertical',
+    }),
+    value: Alignment.Vertical,
+  },
+];
+
+export const getGaugeCollections = () => ({
+  gaugeTypes: getGaugeTypes(),
+  alignments: getAlignments(),
+  colorSchemas,
+});
+
+export const getHeatmapCollections = () => ({
+  legendPositions: getPositions(),
+  scales: getScaleTypes(),
+  colorSchemas,
+});
diff --git a/src/plugins/vis_type_vislib/public/components/options/gauge/index.tsx b/src/plugins/vis_type_vislib/public/editor/components/gauge/index.tsx
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/gauge/index.tsx
rename to src/plugins/vis_type_vislib/public/editor/components/gauge/index.tsx
diff --git a/src/plugins/vis_type_vislib/public/components/options/gauge/labels_panel.tsx b/src/plugins/vis_type_vislib/public/editor/components/gauge/labels_panel.tsx
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/gauge/labels_panel.tsx
rename to src/plugins/vis_type_vislib/public/editor/components/gauge/labels_panel.tsx
diff --git a/src/plugins/vis_type_vislib/public/components/options/gauge/ranges_panel.tsx b/src/plugins/vis_type_vislib/public/editor/components/gauge/ranges_panel.tsx
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/gauge/ranges_panel.tsx
rename to src/plugins/vis_type_vislib/public/editor/components/gauge/ranges_panel.tsx
diff --git a/src/plugins/vis_type_vislib/public/components/options/gauge/style_panel.tsx b/src/plugins/vis_type_vislib/public/editor/components/gauge/style_panel.tsx
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/gauge/style_panel.tsx
rename to src/plugins/vis_type_vislib/public/editor/components/gauge/style_panel.tsx
diff --git a/src/plugins/vis_type_vislib/public/components/options/heatmap/index.tsx b/src/plugins/vis_type_vislib/public/editor/components/heatmap/index.tsx
similarity index 97%
rename from src/plugins/vis_type_vislib/public/components/options/heatmap/index.tsx
rename to src/plugins/vis_type_vislib/public/editor/components/heatmap/index.tsx
index 312cf60fda6b02..f5b853accb08e9 100644
--- a/src/plugins/vis_type_vislib/public/components/options/heatmap/index.tsx
+++ b/src/plugins/vis_type_vislib/public/editor/components/heatmap/index.tsx
@@ -23,7 +23,8 @@ import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { VisOptionsProps } from '../../../../../vis_default_editor/public';
+import { ValueAxis } from '../../../../../vis_type_xy/public';
 import {
   BasicOptions,
   ColorRanges,
@@ -34,8 +35,8 @@ import {
   SetColorSchemaOptionsValue,
   SetColorRangeValue,
 } from '../../../../../charts/public';
+
 import { HeatmapVisParams } from '../../../heatmap';
-import { ValueAxis } from '../../../types';
 import { LabelsPanel } from './labels_panel';
 
 function HeatmapOptions(props: VisOptionsProps<HeatmapVisParams>) {
diff --git a/src/plugins/vis_type_vislib/public/components/options/heatmap/labels_panel.tsx b/src/plugins/vis_type_vislib/public/editor/components/heatmap/labels_panel.tsx
similarity index 96%
rename from src/plugins/vis_type_vislib/public/components/options/heatmap/labels_panel.tsx
rename to src/plugins/vis_type_vislib/public/editor/components/heatmap/labels_panel.tsx
index 4998a8fd025215..8ec06ea50ec123 100644
--- a/src/plugins/vis_type_vislib/public/components/options/heatmap/labels_panel.tsx
+++ b/src/plugins/vis_type_vislib/public/editor/components/heatmap/labels_panel.tsx
@@ -23,10 +23,11 @@ import { EuiColorPicker, EuiFormRow, EuiPanel, EuiSpacer, EuiTitle } from '@elas
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { ValueAxis } from '../../../types';
-import { HeatmapVisParams } from '../../../heatmap';
+import { VisOptionsProps } from '../../../../../vis_default_editor/public';
 import { SwitchOption } from '../../../../../charts/public';
+import { ValueAxis } from '../../../../../vis_type_xy/public';
+
+import { HeatmapVisParams } from '../../../heatmap';
 
 const VERTICAL_ROTATION = 270;
 
diff --git a/src/plugins/vis_type_vislib/public/components/options/index.tsx b/src/plugins/vis_type_vislib/public/editor/components/index.tsx
similarity index 71%
rename from src/plugins/vis_type_vislib/public/components/options/index.tsx
rename to src/plugins/vis_type_vislib/public/editor/components/index.tsx
index 18c41bf289b116..ed8c8239a07b6f 100644
--- a/src/plugins/vis_type_vislib/public/components/options/index.tsx
+++ b/src/plugins/vis_type_vislib/public/editor/components/index.tsx
@@ -19,18 +19,15 @@
 
 import React, { lazy } from 'react';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { ValidationVisOptionsProps } from '../common';
+import { VisOptionsProps } from '../../../../vis_default_editor/public';
+
 import { GaugeVisParams } from '../../gauge';
 import { PieVisParams } from '../../pie';
-import { BasicVislibParams } from '../../types';
 import { HeatmapVisParams } from '../../heatmap';
 
 const GaugeOptionsLazy = lazy(() => import('./gauge'));
 const PieOptionsLazy = lazy(() => import('./pie'));
-const PointSeriesOptionsLazy = lazy(() => import('./point_series'));
 const HeatmapOptionsLazy = lazy(() => import('./heatmap'));
-const MetricsAxisOptionsLazy = lazy(() => import('./metrics_axes'));
 
 export const GaugeOptions = (props: VisOptionsProps<GaugeVisParams>) => (
   <GaugeOptionsLazy {...props} />
@@ -38,14 +35,6 @@ export const GaugeOptions = (props: VisOptionsProps<GaugeVisParams>) => (
 
 export const PieOptions = (props: VisOptionsProps<PieVisParams>) => <PieOptionsLazy {...props} />;
 
-export const PointSeriesOptions = (props: ValidationVisOptionsProps<BasicVislibParams>) => (
-  <PointSeriesOptionsLazy {...props} />
-);
-
 export const HeatmapOptions = (props: VisOptionsProps<HeatmapVisParams>) => (
   <HeatmapOptionsLazy {...props} />
 );
-
-export const MetricsAxisOptions = (props: ValidationVisOptionsProps<BasicVislibParams>) => (
-  <MetricsAxisOptionsLazy {...props} />
-);
diff --git a/src/plugins/vis_type_vislib/public/components/options/pie.tsx b/src/plugins/vis_type_vislib/public/editor/components/pie.tsx
similarity index 96%
rename from src/plugins/vis_type_vislib/public/components/options/pie.tsx
rename to src/plugins/vis_type_vislib/public/editor/components/pie.tsx
index 30828bfc6a3ea7..1c3aa501b4d008 100644
--- a/src/plugins/vis_type_vislib/public/components/options/pie.tsx
+++ b/src/plugins/vis_type_vislib/public/editor/components/pie.tsx
@@ -22,9 +22,10 @@ import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { TruncateLabelsOption } from '../common';
+import { VisOptionsProps } from '../../../../vis_default_editor/public';
 import { BasicOptions, SwitchOption } from '../../../../charts/public';
+import { TruncateLabelsOption } from '../../../../vis_type_xy/public';
+
 import { PieVisParams } from '../../pie';
 
 function PieOptions(props: VisOptionsProps<PieVisParams>) {
diff --git a/src/plugins/vis_type_vislib/public/editor/index.ts b/src/plugins/vis_type_vislib/public/editor/index.ts
new file mode 100644
index 00000000000000..2a73b1ad8fa687
--- /dev/null
+++ b/src/plugins/vis_type_vislib/public/editor/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 './collections';
+export * from './components';
diff --git a/src/plugins/vis_type_vislib/public/gauge.ts b/src/plugins/vis_type_vislib/public/gauge.ts
index 7cc8e03c9e4c2a..de32ee17a21bf2 100644
--- a/src/plugins/vis_type_vislib/public/gauge.ts
+++ b/src/plugins/vis_type_vislib/public/gauge.ts
@@ -19,24 +19,25 @@
 
 import { i18n } from '@kbn/i18n';
 
+import { ColorMode, ColorSchemas, ColorSchemaParams, Labels, Style } from '../../charts/public';
 import { RangeValues, Schemas } from '../../vis_default_editor/public';
 import { AggGroupNames } from '../../data/public';
-import { GaugeOptions } from './components/options';
-import { getGaugeCollections, Alignments, GaugeTypes } from './utils/collections';
-import { ColorModes, ColorSchemas, ColorSchemaParams, Labels, Style } from '../../charts/public';
-import { toExpressionAst } from './to_ast';
 import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../visualizations/public';
-import { BasicVislibParams } from './types';
+
+import { Alignment, GaugeType, BasicVislibParams, VislibChartType } from './types';
+import { getGaugeCollections } from './editor';
+import { toExpressionAst } from './to_ast';
+import { GaugeOptions } from './editor/components';
 
 export interface Gauge extends ColorSchemaParams {
   backStyle: 'Full';
   gaugeStyle: 'Full';
   orientation: 'vertical';
   type: 'meter';
-  alignment: Alignments;
+  alignment: Alignment;
   colorsRange: RangeValues[];
   extendRange: boolean;
-  gaugeType: GaugeTypes;
+  gaugeType: GaugeType;
   labels: Labels;
   percentageMode: boolean;
   outline?: boolean;
@@ -67,20 +68,20 @@ export const gaugeVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
   toExpressionAst,
   visConfig: {
     defaults: {
-      type: 'gauge',
+      type: VislibChartType.Gauge,
       addTooltip: true,
       addLegend: true,
       isDisplayWarning: false,
       gauge: {
-        alignment: Alignments.AUTOMATIC,
+        alignment: Alignment.Automatic,
         extendRange: true,
         percentageMode: false,
-        gaugeType: GaugeTypes.ARC,
+        gaugeType: GaugeType.Arc,
         gaugeStyle: 'Full',
         backStyle: 'Full',
         orientation: 'vertical',
         colorSchema: ColorSchemas.GreenToRed,
-        gaugeColorMode: ColorModes.LABELS,
+        gaugeColorMode: ColorMode.Labels,
         colorsRange: [
           { from: 0, to: 50 },
           { from: 50, to: 75 },
diff --git a/src/plugins/vis_type_vislib/public/goal.ts b/src/plugins/vis_type_vislib/public/goal.ts
index 46878ca82e45a8..56361421261fce 100644
--- a/src/plugins/vis_type_vislib/public/goal.ts
+++ b/src/plugins/vis_type_vislib/public/goal.ts
@@ -19,14 +19,14 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { GaugeOptions } from './components/options';
-import { getGaugeCollections, GaugeTypes } from './utils/collections';
-import { ColorModes, ColorSchemas } from '../../charts/public';
 import { AggGroupNames } from '../../data/public';
 import { Schemas } from '../../vis_default_editor/public';
-import { toExpressionAst } from './to_ast';
+import { ColorMode, ColorSchemas } from '../../charts/public';
 import { BaseVisTypeOptions } from '../../visualizations/public';
-import { BasicVislibParams } from './types';
+
+import { getGaugeCollections, GaugeOptions } from './editor';
+import { toExpressionAst } from './to_ast';
+import { GaugeType, BasicVislibParams } from './types';
 
 export const goalVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
   name: 'goal',
@@ -46,13 +46,13 @@ export const goalVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
         verticalSplit: false,
         autoExtend: false,
         percentageMode: true,
-        gaugeType: GaugeTypes.ARC,
+        gaugeType: GaugeType.Arc,
         gaugeStyle: 'Full',
         backStyle: 'Full',
         orientation: 'vertical',
         useRanges: false,
         colorSchema: ColorSchemas.GreenToRed,
-        gaugeColorMode: ColorModes.NONE,
+        gaugeColorMode: ColorMode.None,
         colorsRange: [{ from: 0, to: 10000 }],
         invertColors: false,
         labels: {
diff --git a/src/plugins/vis_type_vislib/public/heatmap.ts b/src/plugins/vis_type_vislib/public/heatmap.ts
index c408ac140dd467..4a815fd8b2c732 100644
--- a/src/plugins/vis_type_vislib/public/heatmap.ts
+++ b/src/plugins/vis_type_vislib/public/heatmap.ts
@@ -18,15 +18,17 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { Position } from '@elastic/charts';
 
 import { RangeValues, Schemas } from '../../vis_default_editor/public';
 import { AggGroupNames } from '../../data/public';
-import { AxisTypes, getHeatmapCollections, Positions, ScaleTypes } from './utils/collections';
-import { HeatmapOptions } from './components/options';
-import { TimeMarker } from './vislib/visualizations/time_marker';
-import { BasicVislibParams, CommonVislibParams, ValueAxis } from './types';
 import { ColorSchemas, ColorSchemaParams } from '../../charts/public';
-import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../../plugins/visualizations/public';
+import { VIS_EVENT_TO_TRIGGER, BaseVisTypeOptions } from '../../visualizations/public';
+import { ValueAxis, ScaleType, AxisType } from '../../vis_type_xy/public';
+
+import { HeatmapOptions, getHeatmapCollections } from './editor';
+import { TimeMarker } from './vislib/visualizations/time_marker';
+import { CommonVislibParams, BasicVislibParams, VislibChartType } from './types';
 import { toExpressionAst } from './to_ast';
 
 export interface HeatmapVisParams extends CommonVislibParams, ColorSchemaParams {
@@ -48,15 +50,15 @@ export const heatmapVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
   description: i18n.translate('visTypeVislib.heatmap.heatmapDescription', {
     defaultMessage: 'Shade data in cells in a matrix.',
   }),
-  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter],
   toExpressionAst,
+  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter],
   visConfig: {
     defaults: {
-      type: 'heatmap',
+      type: VislibChartType.Heatmap,
       addTooltip: true,
       addLegend: true,
       enableHover: false,
-      legendPosition: Positions.RIGHT,
+      legendPosition: Position.Right,
       times: [],
       colorsNumber: 4,
       colorSchema: ColorSchemas.Greens,
@@ -68,9 +70,9 @@ export const heatmapVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
         {
           show: false,
           id: 'ValueAxis-1',
-          type: AxisTypes.VALUE,
+          type: AxisType.Value,
           scale: {
-            type: ScaleTypes.LINEAR,
+            type: ScaleType.Linear,
             defaultYExtents: false,
           },
           labels: {
diff --git a/src/plugins/vis_type_vislib/public/histogram.ts b/src/plugins/vis_type_vislib/public/histogram.ts
index de4855ba9aa2b7..7424ef5c4df279 100644
--- a/src/plugins/vis_type_vislib/public/histogram.ts
+++ b/src/plugins/vis_type_vislib/public/histogram.ts
@@ -17,174 +17,14 @@
  * under the License.
  */
 
-import { i18n } from '@kbn/i18n';
-// @ts-ignore
-import { palettes } from '@elastic/eui/lib/services';
-// @ts-ignore
-import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
+import { xyVisTypes } from '../../vis_type_xy/public';
+import { BaseVisTypeOptions } from '../../visualizations/public';
 
-import { AggGroupNames } from '../../data/public';
-import { Schemas } from '../../vis_default_editor/public';
-import {
-  Positions,
-  ChartTypes,
-  ChartModes,
-  AxisTypes,
-  ScaleTypes,
-  AxisModes,
-  ThresholdLineStyles,
-  getConfigCollections,
-} from './utils/collections';
-import { getAreaOptionTabs, countLabel } from './utils/common_config';
-import { Rotates } from '../../charts/public';
-import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../../plugins/visualizations/public';
-import { BasicVislibParams } from './types';
 import { toExpressionAst } from './to_ast';
+import { BasicVislibParams } from './types';
 
 export const histogramVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
-  name: 'histogram',
-  title: i18n.translate('visTypeVislib.histogram.histogramTitle', {
-    defaultMessage: 'Vertical bar',
-  }),
-  icon: 'visBarVertical',
-  description: i18n.translate('visTypeVislib.histogram.histogramDescription', {
-    defaultMessage: 'Present data in vertical bars on an axis.',
-  }),
-  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  ...(xyVisTypes.histogram() as BaseVisTypeOptions<BasicVislibParams>),
   toExpressionAst,
-  visConfig: {
-    defaults: {
-      type: 'histogram',
-      grid: {
-        categoryLines: false,
-      },
-      categoryAxes: [
-        {
-          id: 'CategoryAxis-1',
-          type: AxisTypes.CATEGORY,
-          position: Positions.BOTTOM,
-          show: true,
-          style: {},
-          scale: {
-            type: ScaleTypes.LINEAR,
-          },
-          labels: {
-            show: true,
-            filter: true,
-            truncate: 100,
-          },
-          title: {},
-        },
-      ],
-      valueAxes: [
-        {
-          id: 'ValueAxis-1',
-          name: 'LeftAxis-1',
-          type: AxisTypes.VALUE,
-          position: Positions.LEFT,
-          show: true,
-          style: {},
-          scale: {
-            type: ScaleTypes.LINEAR,
-            mode: AxisModes.NORMAL,
-          },
-          labels: {
-            show: true,
-            rotate: Rotates.HORIZONTAL,
-            filter: false,
-            truncate: 100,
-          },
-          title: {
-            text: countLabel,
-          },
-        },
-      ],
-      seriesParams: [
-        {
-          show: true,
-          type: ChartTypes.HISTOGRAM,
-          mode: ChartModes.STACKED,
-          data: {
-            label: countLabel,
-            id: '1',
-          },
-          valueAxis: 'ValueAxis-1',
-          drawLinesBetweenPoints: true,
-          lineWidth: 2,
-          showCircles: true,
-        },
-      ],
-      addTooltip: true,
-      addLegend: true,
-      legendPosition: Positions.RIGHT,
-      times: [],
-      addTimeMarker: false,
-      labels: {
-        show: false,
-      },
-      thresholdLine: {
-        show: false,
-        value: 10,
-        width: 1,
-        style: ThresholdLineStyles.FULL,
-        color: euiPaletteColorBlind()[9],
-      },
-    },
-  },
-  editorConfig: {
-    collections: getConfigCollections(),
-    optionTabs: getAreaOptionTabs(),
-    schemas: new Schemas([
-      {
-        group: AggGroupNames.Metrics,
-        name: 'metric',
-        title: i18n.translate('visTypeVislib.histogram.metricTitle', {
-          defaultMessage: 'Y-axis',
-        }),
-        min: 1,
-        aggFilter: ['!geo_centroid', '!geo_bounds'],
-        defaults: [{ schema: 'metric', type: 'count' }],
-      },
-      {
-        group: AggGroupNames.Metrics,
-        name: 'radius',
-        title: i18n.translate('visTypeVislib.histogram.radiusTitle', {
-          defaultMessage: 'Dot size',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'segment',
-        title: i18n.translate('visTypeVislib.histogram.segmentTitle', {
-          defaultMessage: 'X-axis',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'group',
-        title: i18n.translate('visTypeVislib.histogram.groupTitle', {
-          defaultMessage: 'Split series',
-        }),
-        min: 0,
-        max: 3,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'split',
-        title: i18n.translate('visTypeVislib.histogram.splitTitle', {
-          defaultMessage: 'Split chart',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-    ]),
-  },
+  visualization: undefined,
 };
diff --git a/src/plugins/vis_type_vislib/public/horizontal_bar.ts b/src/plugins/vis_type_vislib/public/horizontal_bar.ts
index 144e63224533bf..9e919c66cb3656 100644
--- a/src/plugins/vis_type_vislib/public/horizontal_bar.ts
+++ b/src/plugins/vis_type_vislib/public/horizontal_bar.ts
@@ -17,171 +17,14 @@
  * under the License.
  */
 
-import { i18n } from '@kbn/i18n';
-// @ts-ignore
-import { palettes, euiPaletteColorBlind } from '@elastic/eui/lib/services';
+import { xyVisTypes } from '../../vis_type_xy/public';
+import { BaseVisTypeOptions } from '../../visualizations/public';
 
-import { AggGroupNames } from '../../data/public';
-import { Schemas } from '../../vis_default_editor/public';
-import {
-  Positions,
-  ChartTypes,
-  ChartModes,
-  AxisTypes,
-  ScaleTypes,
-  AxisModes,
-  ThresholdLineStyles,
-  getConfigCollections,
-} from './utils/collections';
-import { getAreaOptionTabs, countLabel } from './utils/common_config';
-import { Rotates } from '../../charts/public';
-import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../../plugins/visualizations/public';
-import { BasicVislibParams } from './types';
 import { toExpressionAst } from './to_ast';
+import { BasicVislibParams } from './types';
 
 export const horizontalBarVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
-  name: 'horizontal_bar',
-  title: i18n.translate('visTypeVislib.horizontalBar.horizontalBarTitle', {
-    defaultMessage: 'Horizontal bar',
-  }),
-  icon: 'visBarHorizontal',
-  description: i18n.translate('visTypeVislib.horizontalBar.horizontalBarDescription', {
-    defaultMessage: 'Present data in horizontal bars on an axis.',
-  }),
-  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  ...(xyVisTypes.horizontalBar() as BaseVisTypeOptions<BasicVislibParams>),
   toExpressionAst,
-  visConfig: {
-    defaults: {
-      type: 'histogram',
-      grid: {
-        categoryLines: false,
-      },
-      categoryAxes: [
-        {
-          id: 'CategoryAxis-1',
-          type: AxisTypes.CATEGORY,
-          position: Positions.LEFT,
-          show: true,
-          style: {},
-          scale: {
-            type: ScaleTypes.LINEAR,
-          },
-          labels: {
-            show: true,
-            rotate: Rotates.HORIZONTAL,
-            filter: false,
-            truncate: 200,
-          },
-          title: {},
-        },
-      ],
-      valueAxes: [
-        {
-          id: 'ValueAxis-1',
-          name: 'LeftAxis-1',
-          type: AxisTypes.VALUE,
-          position: Positions.BOTTOM,
-          show: true,
-          style: {},
-          scale: {
-            type: ScaleTypes.LINEAR,
-            mode: AxisModes.NORMAL,
-          },
-          labels: {
-            show: true,
-            rotate: Rotates.ANGLED,
-            filter: true,
-            truncate: 100,
-          },
-          title: {
-            text: countLabel,
-          },
-        },
-      ],
-      seriesParams: [
-        {
-          show: true,
-          type: ChartTypes.HISTOGRAM,
-          mode: ChartModes.NORMAL,
-          data: {
-            label: countLabel,
-            id: '1',
-          },
-          valueAxis: 'ValueAxis-1',
-          drawLinesBetweenPoints: true,
-          lineWidth: 2,
-          showCircles: true,
-        },
-      ],
-      addTooltip: true,
-      addLegend: true,
-      legendPosition: Positions.RIGHT,
-      times: [],
-      addTimeMarker: false,
-      labels: {},
-      thresholdLine: {
-        show: false,
-        value: 10,
-        width: 1,
-        style: ThresholdLineStyles.FULL,
-        color: euiPaletteColorBlind()[9],
-      },
-    },
-  },
-  editorConfig: {
-    collections: getConfigCollections(),
-    optionTabs: getAreaOptionTabs(),
-    schemas: new Schemas([
-      {
-        group: AggGroupNames.Metrics,
-        name: 'metric',
-        title: i18n.translate('visTypeVislib.horizontalBar.metricTitle', {
-          defaultMessage: 'Y-axis',
-        }),
-        min: 1,
-        aggFilter: ['!geo_centroid', '!geo_bounds'],
-        defaults: [{ schema: 'metric', type: 'count' }],
-      },
-      {
-        group: AggGroupNames.Metrics,
-        name: 'radius',
-        title: i18n.translate('visTypeVislib.horizontalBar.radiusTitle', {
-          defaultMessage: 'Dot size',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'segment',
-        title: i18n.translate('visTypeVislib.horizontalBar.segmentTitle', {
-          defaultMessage: 'X-axis',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'group',
-        title: i18n.translate('visTypeVislib.horizontalBar.groupTitle', {
-          defaultMessage: 'Split series',
-        }),
-        min: 0,
-        max: 3,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'split',
-        title: i18n.translate('visTypeVislib.horizontalBar.splitTitle', {
-          defaultMessage: 'Split chart',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-    ]),
-  },
+  visualization: undefined,
 };
diff --git a/src/plugins/vis_type_vislib/public/line.ts b/src/plugins/vis_type_vislib/public/line.ts
index ffa40c8c299806..15f20edd359dda 100644
--- a/src/plugins/vis_type_vislib/public/line.ts
+++ b/src/plugins/vis_type_vislib/public/line.ts
@@ -17,164 +17,14 @@
  * under the License.
  */
 
-import { i18n } from '@kbn/i18n';
-// @ts-ignore
-import { palettes, euiPaletteColorBlind } from '@elastic/eui/lib/services';
+import { xyVisTypes } from '../../vis_type_xy/public';
+import { BaseVisTypeOptions } from '../../visualizations/public';
 
-import { AggGroupNames } from '../../data/public';
-import { Schemas } from '../../vis_default_editor/public';
-import {
-  Positions,
-  ChartTypes,
-  ChartModes,
-  AxisTypes,
-  ScaleTypes,
-  AxisModes,
-  ThresholdLineStyles,
-  InterpolationModes,
-  getConfigCollections,
-} from './utils/collections';
-import { getAreaOptionTabs, countLabel } from './utils/common_config';
-import { Rotates } from '../../charts/public';
-import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../../plugins/visualizations/public';
 import { toExpressionAst } from './to_ast';
 import { BasicVislibParams } from './types';
 
 export const lineVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
-  name: 'line',
-  title: i18n.translate('visTypeVislib.line.lineTitle', { defaultMessage: 'Line' }),
-  icon: 'visLine',
-  description: i18n.translate('visTypeVislib.line.lineDescription', {
-    defaultMessage: 'Display data as a series of points.',
-  }),
-  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  ...(xyVisTypes.line() as BaseVisTypeOptions<BasicVislibParams>),
   toExpressionAst,
-  visConfig: {
-    defaults: {
-      type: 'line',
-      grid: {
-        categoryLines: false,
-      },
-      categoryAxes: [
-        {
-          id: 'CategoryAxis-1',
-          type: AxisTypes.CATEGORY,
-          position: Positions.BOTTOM,
-          show: true,
-          style: {},
-          scale: {
-            type: ScaleTypes.LINEAR,
-          },
-          labels: {
-            show: true,
-            filter: true,
-            truncate: 100,
-          },
-          title: {},
-        },
-      ],
-      valueAxes: [
-        {
-          id: 'ValueAxis-1',
-          name: 'LeftAxis-1',
-          type: AxisTypes.VALUE,
-          position: Positions.LEFT,
-          show: true,
-          style: {},
-          scale: {
-            type: ScaleTypes.LINEAR,
-            mode: AxisModes.NORMAL,
-          },
-          labels: {
-            show: true,
-            rotate: Rotates.HORIZONTAL,
-            filter: false,
-            truncate: 100,
-          },
-          title: {
-            text: countLabel,
-          },
-        },
-      ],
-      seriesParams: [
-        {
-          show: true,
-          type: ChartTypes.LINE,
-          mode: ChartModes.NORMAL,
-          data: {
-            label: countLabel,
-            id: '1',
-          },
-          valueAxis: 'ValueAxis-1',
-          drawLinesBetweenPoints: true,
-          lineWidth: 2,
-          interpolate: InterpolationModes.LINEAR,
-          showCircles: true,
-        },
-      ],
-      addTooltip: true,
-      addLegend: true,
-      legendPosition: Positions.RIGHT,
-      times: [],
-      addTimeMarker: false,
-      labels: {},
-      thresholdLine: {
-        show: false,
-        value: 10,
-        width: 1,
-        style: ThresholdLineStyles.FULL,
-        color: euiPaletteColorBlind()[9],
-      },
-    },
-  },
-  editorConfig: {
-    collections: getConfigCollections(),
-    optionTabs: getAreaOptionTabs(),
-    schemas: new Schemas([
-      {
-        group: AggGroupNames.Metrics,
-        name: 'metric',
-        title: i18n.translate('visTypeVislib.line.metricTitle', { defaultMessage: 'Y-axis' }),
-        min: 1,
-        aggFilter: ['!geo_centroid', '!geo_bounds'],
-        defaults: [{ schema: 'metric', type: 'count' }],
-      },
-      {
-        group: AggGroupNames.Metrics,
-        name: 'radius',
-        title: i18n.translate('visTypeVislib.line.radiusTitle', { defaultMessage: 'Dot size' }),
-        min: 0,
-        max: 1,
-        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality', 'top_hits'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'segment',
-        title: i18n.translate('visTypeVislib.line.segmentTitle', { defaultMessage: 'X-axis' }),
-        min: 0,
-        max: 1,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'group',
-        title: i18n.translate('visTypeVislib.line.groupTitle', {
-          defaultMessage: 'Split series',
-        }),
-        min: 0,
-        max: 3,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'split',
-        title: i18n.translate('visTypeVislib.line.splitTitle', {
-          defaultMessage: 'Split chart',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-    ]),
-  },
+  visualization: undefined,
 };
diff --git a/src/plugins/vis_type_vislib/public/pie.ts b/src/plugins/vis_type_vislib/public/pie.ts
index 41b271054d59f0..aa5a3ceaaba980 100644
--- a/src/plugins/vis_type_vislib/public/pie.ts
+++ b/src/plugins/vis_type_vislib/public/pie.ts
@@ -18,13 +18,15 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { Position } from '@elastic/charts';
 
 import { AggGroupNames } from '../../data/public';
 import { Schemas } from '../../vis_default_editor/public';
-import { PieOptions } from './components/options';
-import { getPositions, Positions } from './utils/collections';
+import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../visualizations/public';
+import { getPositions } from '../../vis_type_xy/public';
+
 import { CommonVislibParams } from './types';
-import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../../plugins/visualizations/public';
+import { PieOptions } from './editor';
 import { toExpressionAst } from './to_ast_pie';
 
 export interface PieVisParams extends CommonVislibParams {
@@ -52,7 +54,7 @@ export const pieVisTypeDefinition: BaseVisTypeOptions<PieVisParams> = {
       type: 'pie',
       addTooltip: true,
       addLegend: true,
-      legendPosition: Positions.RIGHT,
+      legendPosition: Position.Right,
       isDonut: true,
       labels: {
         show: false,
diff --git a/src/plugins/vis_type_vislib/public/pie_fn.ts b/src/plugins/vis_type_vislib/public/pie_fn.ts
index 00aa73128c349d..8b16d8eb0982f7 100644
--- a/src/plugins/vis_type_vislib/public/pie_fn.ts
+++ b/src/plugins/vis_type_vislib/public/pie_fn.ts
@@ -24,6 +24,7 @@ import { ExpressionFunctionDefinition, Datatable, Render } from '../../expressio
 // @ts-ignore
 import { vislibSlicesResponseHandler } from './vislib/response_handler';
 import { PieVisParams } from './pie';
+import { VislibChartType } from './types';
 import { vislibVisName } from './vis_type_vislib_vis_fn';
 
 export const vislibPieName = 'vislib_pie_vis';
@@ -32,9 +33,9 @@ interface Arguments {
   visConfig: string;
 }
 
-interface RenderValue {
+export interface PieRenderValue {
+  visType: Extract<VislibChartType, 'pie'>;
   visData: unknown;
-  visType: string;
   visConfig: PieVisParams;
 }
 
@@ -42,7 +43,7 @@ export type VisTypeVislibPieExpressionFunctionDefinition = ExpressionFunctionDef
   typeof vislibPieName,
   Datatable,
   Arguments,
-  Render<RenderValue>
+  Render<PieRenderValue>
 >;
 
 export const createPieVisFn = (): VisTypeVislibPieExpressionFunctionDefinition => ({
@@ -73,7 +74,7 @@ export const createPieVisFn = (): VisTypeVislibPieExpressionFunctionDefinition =
       value: {
         visData,
         visConfig,
-        visType: 'pie',
+        visType: VislibChartType.Pie,
       },
     };
   },
diff --git a/src/plugins/vis_type_vislib/public/plugin.ts b/src/plugins/vis_type_vislib/public/plugin.ts
index f183042fd52012..bef8ad26fb12c9 100644
--- a/src/plugins/vis_type_vislib/public/plugin.ts
+++ b/src/plugins/vis_type_vislib/public/plugin.ts
@@ -19,25 +19,28 @@
 
 import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from 'kibana/public';
 
-import { VisTypeXyPluginSetup } from 'src/plugins/vis_type_xy/public';
 import { Plugin as ExpressionsPublicPlugin } from '../../expressions/public';
-import { BaseVisTypeOptions, VisualizationsSetup } from '../../visualizations/public';
-import { createVisTypeVislibVisFn } from './vis_type_vislib_vis_fn';
-import { createPieVisFn } from './pie_fn';
-import { visLibVisTypeDefinitions, pieVisTypeDefinition } from './vis_type_vislib_vis_types';
+import { VisualizationsSetup } from '../../visualizations/public';
 import { ChartsPluginSetup } from '../../charts/public';
 import { DataPublicPluginStart } from '../../data/public';
 import { KibanaLegacyStart } from '../../kibana_legacy/public';
+import { CHARTS_LIBRARY } from '../../vis_type_xy/public';
+
+import { createVisTypeVislibVisFn } from './vis_type_vislib_vis_fn';
+import { createPieVisFn } from './pie_fn';
+import {
+  convertedTypeDefinitions,
+  pieVisTypeDefinition,
+  visLibVisTypeDefinitions,
+} from './vis_type_vislib_vis_types';
 import { setFormatService, setDataActions } from './services';
 import { getVislibVisRenderer } from './vis_renderer';
-import { BasicVislibParams } from './types';
 
 /** @internal */
 export interface VisTypeVislibPluginSetupDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['setup']>;
   visualizations: VisualizationsSetup;
   charts: ChartsPluginSetup;
-  visTypeXy?: VisTypeXyPluginSetup;
 }
 
 /** @internal */
@@ -56,23 +59,21 @@ export class VisTypeVislibPlugin
 
   public async setup(
     core: VisTypeVislibCoreSetup,
-    { expressions, visualizations, charts, visTypeXy }: VisTypeVislibPluginSetupDependencies
+    { expressions, visualizations, charts }: VisTypeVislibPluginSetupDependencies
   ) {
-    // if visTypeXy plugin is disabled it's config will be undefined
-    if (!visTypeXy) {
-      const convertedTypes: Array<BaseVisTypeOptions<BasicVislibParams>> = [];
-      const convertedFns: any[] = [];
-
-      // Register legacy vislib types that have been converted
-      convertedFns.forEach(expressions.registerFunction);
-      convertedTypes.forEach(visualizations.createBaseVisualization);
+    if (core.uiSettings.get(CHARTS_LIBRARY)) {
+      // Register only non-replaced vis types
+      convertedTypeDefinitions.forEach(visualizations.createBaseVisualization);
+      visualizations.createBaseVisualization(pieVisTypeDefinition);
+      expressions.registerRenderer(getVislibVisRenderer(core, charts));
+      [createVisTypeVislibVisFn(), createPieVisFn()].forEach(expressions.registerFunction);
+    } else {
+      // Register all vis types
+      visLibVisTypeDefinitions.forEach(visualizations.createBaseVisualization);
+      visualizations.createBaseVisualization(pieVisTypeDefinition);
       expressions.registerRenderer(getVislibVisRenderer(core, charts));
+      [createVisTypeVislibVisFn(), createPieVisFn()].forEach(expressions.registerFunction);
     }
-    // Register non-converted types
-    visLibVisTypeDefinitions.forEach(visualizations.createBaseVisualization);
-    visualizations.createBaseVisualization(pieVisTypeDefinition);
-    expressions.registerRenderer(getVislibVisRenderer(core, charts));
-    [createVisTypeVislibVisFn(), createPieVisFn()].forEach(expressions.registerFunction);
   }
 
   public start(core: CoreStart, { data }: VisTypeVislibPluginStartDependencies) {
diff --git a/src/plugins/vis_type_vislib/public/to_ast.ts b/src/plugins/vis_type_vislib/public/to_ast.ts
index 3a05410ff006b5..30ed2e4ca1bb43 100644
--- a/src/plugins/vis_type_vislib/public/to_ast.ts
+++ b/src/plugins/vis_type_vislib/public/to_ast.ts
@@ -21,14 +21,11 @@ import moment from 'moment';
 
 import { VisToExpressionAst, getVisSchemas } from '../../visualizations/public';
 import { buildExpression, buildExpressionFunction } from '../../expressions/public';
+import type { Dimensions, DateHistogramParams, HistogramParams } from '../../vis_type_xy/public';
+import { BUCKET_TYPES } from '../../data/public';
 
 import { vislibVisName, VisTypeVislibExpressionFunctionDefinition } from './vis_type_vislib_vis_fn';
-import { BasicVislibParams } from './types';
-import {
-  DateHistogramParams,
-  Dimensions,
-  HistogramParams,
-} from './vislib/helpers/point_series/point_series';
+import { BasicVislibParams, VislibChartType } from './types';
 import { getEsaggsFn } from './to_ast_esaggs';
 
 export const toExpressionAst: VisToExpressionAst<BasicVislibParams> = async (vis, params) => {
@@ -47,7 +44,7 @@ export const toExpressionAst: VisToExpressionAst<BasicVislibParams> = async (vis
 
   if (dimensions.x) {
     const xAgg = responseAggs[dimensions.x.accessor] as any;
-    if (xAgg.type.name === 'date_histogram') {
+    if (xAgg.type.name === BUCKET_TYPES.DATE_HISTOGRAM) {
       (dimensions.x.params as DateHistogramParams).date = true;
       const { esUnit, esValue } = xAgg.buckets.getInterval();
       (dimensions.x.params as DateHistogramParams).intervalESUnit = esUnit;
@@ -57,7 +54,7 @@ export const toExpressionAst: VisToExpressionAst<BasicVislibParams> = async (vis
         .asMilliseconds();
       (dimensions.x.params as DateHistogramParams).format = xAgg.buckets.getScaledDateFormat();
       (dimensions.x.params as DateHistogramParams).bounds = xAgg.buckets.getBounds();
-    } else if (xAgg.type.name === 'histogram') {
+    } else if (xAgg.type.name === BUCKET_TYPES.HISTOGRAM) {
       const intervalParam = xAgg.type.paramByName('interval');
       const output = { params: {} as any };
       await intervalParam.modifyAggConfigOnSearchRequestStart(xAgg, vis.data.searchSource, {
@@ -88,15 +85,15 @@ export const toExpressionAst: VisToExpressionAst<BasicVislibParams> = async (vis
 
   visConfig.dimensions = dimensions;
 
-  const visTypeXy = buildExpressionFunction<VisTypeVislibExpressionFunctionDefinition>(
+  const visTypeVislib = buildExpressionFunction<VisTypeVislibExpressionFunctionDefinition>(
     vislibVisName,
     {
-      type: vis.type.name,
+      type: vis.type.name as Exclude<VislibChartType, 'pie'>,
       visConfig: JSON.stringify(visConfig),
     }
   );
 
-  const ast = buildExpression([getEsaggsFn(vis), visTypeXy]);
+  const ast = buildExpression([getEsaggsFn(vis), visTypeVislib]);
 
   return ast.toAst();
 };
diff --git a/src/plugins/vis_type_vislib/public/to_ast_esaggs.ts b/src/plugins/vis_type_vislib/public/to_ast_esaggs.ts
index 2835e5cc1c255c..d23f1ab3626d35 100644
--- a/src/plugins/vis_type_vislib/public/to_ast_esaggs.ts
+++ b/src/plugins/vis_type_vislib/public/to_ast_esaggs.ts
@@ -29,6 +29,8 @@ import { BasicVislibParams } from './types';
 
 /**
  * Get esaggs expressions function
+ * TODO: replace this with vis.data.aggs!.toExpressionAst();
+ * https://github.com/elastic/kibana/issues/61768
  * @param vis
  */
 export function getEsaggsFn(vis: Vis<PieVisParams> | Vis<BasicVislibParams>) {
diff --git a/src/plugins/vis_type_vislib/public/types.ts b/src/plugins/vis_type_vislib/public/types.ts
index c0311edf76154a..4f6c4276693247 100644
--- a/src/plugins/vis_type_vislib/public/types.ts
+++ b/src/plugins/vis_type_vislib/public/types.ts
@@ -17,87 +17,71 @@
  * under the License.
  */
 
-import { TimeMarker } from './vislib/visualizations/time_marker';
+import { $Values } from '@kbn/utility-types';
+import { Position } from '@elastic/charts';
+
+import { Labels } from '../../charts/public';
 import {
-  Positions,
-  ChartModes,
-  ChartTypes,
-  AxisModes,
-  AxisTypes,
-  InterpolationModes,
-  ScaleTypes,
-  ThresholdLineStyles,
-} from './utils/collections';
-import { Labels, Style } from '../../charts/public';
-import { Dimensions } from './vislib/helpers/point_series/point_series';
+  CategoryAxis,
+  Dimensions,
+  Grid,
+  SeriesParam,
+  ThresholdLine,
+  ValueAxis,
+} from '../../vis_type_xy/public';
+import { TimeMarker } from './vislib/visualizations/time_marker';
+
+/**
+ * Gauge title alignment
+ */
+export const Alignment = Object.freeze({
+  Automatic: 'automatic' as const,
+  Horizontal: 'horizontal' as const,
+  Vertical: 'vertical' as const,
+});
+export type Alignment = $Values<typeof Alignment>;
+
+export const GaugeType = Object.freeze({
+  Arc: 'Arc' as const,
+  Circle: 'Circle' as const,
+});
+export type GaugeType = $Values<typeof GaugeType>;
+
+export const VislibChartType = Object.freeze({
+  Histogram: 'histogram' as const,
+  HorizontalBar: 'horizontal_bar' as const,
+  Line: 'line' as const,
+  Pie: 'pie' as const,
+  Area: 'area' as const,
+  PointSeries: 'point_series' as const,
+  Heatmap: 'heatmap' as const,
+  Gauge: 'gauge' as const,
+  Goal: 'goal' as const,
+  Metric: 'metric' as const,
+});
+export type VislibChartType = $Values<typeof VislibChartType>;
 
 export interface CommonVislibParams {
   addTooltip: boolean;
   addLegend: boolean;
-  legendPosition: Positions;
+  legendPosition: Position;
   dimensions: Dimensions;
 }
 
-export interface Scale {
-  boundsMargin?: number | '';
-  defaultYExtents?: boolean;
-  max?: number | null;
-  min?: number | null;
-  mode?: AxisModes;
-  setYExtents?: boolean;
-  type: ScaleTypes;
-}
-
-interface ThresholdLine {
-  show: boolean;
-  value: number | null;
-  width: number | null;
-  style: ThresholdLineStyles;
-  color: string;
-}
-
-export interface Axis {
-  id: string;
-  labels: Labels;
-  position: Positions;
-  scale: Scale;
-  show: boolean;
-  style: Style;
-  title: { text: string };
-  type: AxisTypes;
-}
-
-export interface ValueAxis extends Axis {
-  name: string;
-}
-
-export interface SeriesParam {
-  data: { label: string; id: string };
-  drawLinesBetweenPoints: boolean;
-  interpolate: InterpolationModes;
-  lineWidth?: number;
-  mode: ChartModes;
-  show: boolean;
-  showCircles: boolean;
-  type: ChartTypes;
-  valueAxis: string;
-}
-
 export interface BasicVislibParams extends CommonVislibParams {
+  type: VislibChartType;
+  addLegend: boolean;
   addTimeMarker: boolean;
-  categoryAxes: Axis[];
+  categoryAxes: CategoryAxis[];
   orderBucketsBySum?: boolean;
   labels: Labels;
   thresholdLine: ThresholdLine;
   valueAxes: ValueAxis[];
+  grid: Grid;
   gauge?: {
     percentageMode: boolean;
   };
-  grid: {
-    categoryLines: boolean;
-    valueAxis?: string;
-  };
   seriesParams: SeriesParam[];
   times: TimeMarker[];
-  type: string;
+  radiusRatio: number;
 }
diff --git a/src/plugins/vis_type_vislib/public/utils/collections.ts b/src/plugins/vis_type_vislib/public/utils/collections.ts
deleted file mode 100644
index 44df4864bfd68c..00000000000000
--- a/src/plugins/vis_type_vislib/public/utils/collections.ts
+++ /dev/null
@@ -1,338 +0,0 @@
-/*
- * 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 { i18n } from '@kbn/i18n';
-import { $Values } from '@kbn/utility-types';
-
-import { colorSchemas, Rotates } from '../../../charts/public';
-
-export const Positions = Object.freeze({
-  RIGHT: 'right' as 'right',
-  LEFT: 'left' as 'left',
-  TOP: 'top' as 'top',
-  BOTTOM: 'bottom' as 'bottom',
-});
-export type Positions = $Values<typeof Positions>;
-
-const getPositions = () => [
-  {
-    text: i18n.translate('visTypeVislib.legendPositions.topText', {
-      defaultMessage: 'Top',
-    }),
-    value: Positions.TOP,
-  },
-  {
-    text: i18n.translate('visTypeVislib.legendPositions.leftText', {
-      defaultMessage: 'Left',
-    }),
-    value: Positions.LEFT,
-  },
-  {
-    text: i18n.translate('visTypeVislib.legendPositions.rightText', {
-      defaultMessage: 'Right',
-    }),
-    value: Positions.RIGHT,
-  },
-  {
-    text: i18n.translate('visTypeVislib.legendPositions.bottomText', {
-      defaultMessage: 'Bottom',
-    }),
-    value: Positions.BOTTOM,
-  },
-];
-
-export const ChartTypes = Object.freeze({
-  LINE: 'line' as 'line',
-  AREA: 'area' as 'area',
-  HISTOGRAM: 'histogram' as 'histogram',
-});
-export type ChartTypes = $Values<typeof ChartTypes>;
-
-const getChartTypes = () => [
-  {
-    text: i18n.translate('visTypeVislib.chartTypes.lineText', {
-      defaultMessage: 'Line',
-    }),
-    value: ChartTypes.LINE,
-  },
-  {
-    text: i18n.translate('visTypeVislib.chartTypes.areaText', {
-      defaultMessage: 'Area',
-    }),
-    value: ChartTypes.AREA,
-  },
-  {
-    text: i18n.translate('visTypeVislib.chartTypes.barText', {
-      defaultMessage: 'Bar',
-    }),
-    value: ChartTypes.HISTOGRAM,
-  },
-];
-
-export const ChartModes = Object.freeze({
-  NORMAL: 'normal' as 'normal',
-  STACKED: 'stacked' as 'stacked',
-});
-export type ChartModes = $Values<typeof ChartModes>;
-
-const getChartModes = () => [
-  {
-    text: i18n.translate('visTypeVislib.chartModes.normalText', {
-      defaultMessage: 'Normal',
-    }),
-    value: ChartModes.NORMAL,
-  },
-  {
-    text: i18n.translate('visTypeVislib.chartModes.stackedText', {
-      defaultMessage: 'Stacked',
-    }),
-    value: ChartModes.STACKED,
-  },
-];
-
-export const InterpolationModes = Object.freeze({
-  LINEAR: 'linear' as 'linear',
-  CARDINAL: 'cardinal' as 'cardinal',
-  STEP_AFTER: 'step-after' as 'step-after',
-});
-export type InterpolationModes = $Values<typeof InterpolationModes>;
-
-const getInterpolationModes = () => [
-  {
-    text: i18n.translate('visTypeVislib.interpolationModes.straightText', {
-      defaultMessage: 'Straight',
-    }),
-    value: InterpolationModes.LINEAR,
-  },
-  {
-    text: i18n.translate('visTypeVislib.interpolationModes.smoothedText', {
-      defaultMessage: 'Smoothed',
-    }),
-    value: InterpolationModes.CARDINAL,
-  },
-  {
-    text: i18n.translate('visTypeVislib.interpolationModes.steppedText', {
-      defaultMessage: 'Stepped',
-    }),
-    value: InterpolationModes.STEP_AFTER,
-  },
-];
-
-export const AxisTypes = Object.freeze({
-  CATEGORY: 'category' as 'category',
-  VALUE: 'value' as 'value',
-});
-export type AxisTypes = $Values<typeof AxisTypes>;
-
-export const ScaleTypes = Object.freeze({
-  LINEAR: 'linear' as 'linear',
-  LOG: 'log' as 'log',
-  SQUARE_ROOT: 'square root' as 'square root',
-});
-export type ScaleTypes = $Values<typeof ScaleTypes>;
-
-const getScaleTypes = () => [
-  {
-    text: i18n.translate('visTypeVislib.scaleTypes.linearText', {
-      defaultMessage: 'Linear',
-    }),
-    value: ScaleTypes.LINEAR,
-  },
-  {
-    text: i18n.translate('visTypeVislib.scaleTypes.logText', {
-      defaultMessage: 'Log',
-    }),
-    value: ScaleTypes.LOG,
-  },
-  {
-    text: i18n.translate('visTypeVislib.scaleTypes.squareRootText', {
-      defaultMessage: 'Square root',
-    }),
-    value: ScaleTypes.SQUARE_ROOT,
-  },
-];
-
-export const AxisModes = Object.freeze({
-  NORMAL: 'normal' as 'normal',
-  PERCENTAGE: 'percentage' as 'percentage',
-  WIGGLE: 'wiggle' as 'wiggle',
-  SILHOUETTE: 'silhouette' as 'silhouette',
-});
-export type AxisModes = $Values<typeof AxisModes>;
-
-const getAxisModes = () => [
-  {
-    text: i18n.translate('visTypeVislib.axisModes.normalText', {
-      defaultMessage: 'Normal',
-    }),
-    value: AxisModes.NORMAL,
-  },
-  {
-    text: i18n.translate('visTypeVislib.axisModes.percentageText', {
-      defaultMessage: 'Percentage',
-    }),
-    value: AxisModes.PERCENTAGE,
-  },
-  {
-    text: i18n.translate('visTypeVislib.axisModes.wiggleText', {
-      defaultMessage: 'Wiggle',
-    }),
-    value: AxisModes.WIGGLE,
-  },
-  {
-    text: i18n.translate('visTypeVislib.axisModes.silhouetteText', {
-      defaultMessage: 'Silhouette',
-    }),
-    value: AxisModes.SILHOUETTE,
-  },
-];
-
-export const ThresholdLineStyles = Object.freeze({
-  FULL: 'full' as 'full',
-  DASHED: 'dashed' as 'dashed',
-  DOT_DASHED: 'dot-dashed' as 'dot-dashed',
-});
-export type ThresholdLineStyles = $Values<typeof ThresholdLineStyles>;
-
-const getThresholdLineStyles = () => [
-  {
-    value: ThresholdLineStyles.FULL,
-    text: i18n.translate('visTypeVislib.thresholdLine.style.fullText', {
-      defaultMessage: 'Full',
-    }),
-  },
-  {
-    value: ThresholdLineStyles.DASHED,
-    text: i18n.translate('visTypeVislib.thresholdLine.style.dashedText', {
-      defaultMessage: 'Dashed',
-    }),
-  },
-  {
-    value: ThresholdLineStyles.DOT_DASHED,
-    text: i18n.translate('visTypeVislib.thresholdLine.style.dotdashedText', {
-      defaultMessage: 'Dot-dashed',
-    }),
-  },
-];
-
-const getRotateOptions = () => [
-  {
-    text: i18n.translate('visTypeVislib.categoryAxis.rotate.horizontalText', {
-      defaultMessage: 'Horizontal',
-    }),
-    value: Rotates.HORIZONTAL,
-  },
-  {
-    text: i18n.translate('visTypeVislib.categoryAxis.rotate.verticalText', {
-      defaultMessage: 'Vertical',
-    }),
-    value: Rotates.VERTICAL,
-  },
-  {
-    text: i18n.translate('visTypeVislib.categoryAxis.rotate.angledText', {
-      defaultMessage: 'Angled',
-    }),
-    value: Rotates.ANGLED,
-  },
-];
-
-export const GaugeTypes = Object.freeze({
-  ARC: 'Arc' as 'Arc',
-  CIRCLE: 'Circle' as 'Circle',
-});
-export type GaugeTypes = $Values<typeof GaugeTypes>;
-
-const getGaugeTypes = () => [
-  {
-    text: i18n.translate('visTypeVislib.gauge.gaugeTypes.arcText', {
-      defaultMessage: 'Arc',
-    }),
-    value: GaugeTypes.ARC,
-  },
-  {
-    text: i18n.translate('visTypeVislib.gauge.gaugeTypes.circleText', {
-      defaultMessage: 'Circle',
-    }),
-    value: GaugeTypes.CIRCLE,
-  },
-];
-
-export const Alignments = Object.freeze({
-  AUTOMATIC: 'automatic' as 'automatic',
-  HORIZONTAL: 'horizontal' as 'horizontal',
-  VERTICAL: 'vertical' as 'vertical',
-});
-export type Alignments = $Values<typeof Alignments>;
-
-const getAlignments = () => [
-  {
-    text: i18n.translate('visTypeVislib.gauge.alignmentAutomaticTitle', {
-      defaultMessage: 'Automatic',
-    }),
-    value: Alignments.AUTOMATIC,
-  },
-  {
-    text: i18n.translate('visTypeVislib.gauge.alignmentHorizontalTitle', {
-      defaultMessage: 'Horizontal',
-    }),
-    value: Alignments.HORIZONTAL,
-  },
-  {
-    text: i18n.translate('visTypeVislib.gauge.alignmentVerticalTitle', {
-      defaultMessage: 'Vertical',
-    }),
-    value: Alignments.VERTICAL,
-  },
-];
-
-const getConfigCollections = () => ({
-  legendPositions: getPositions(),
-  positions: getPositions(),
-  chartTypes: getChartTypes(),
-  axisModes: getAxisModes(),
-  scaleTypes: getScaleTypes(),
-  chartModes: getChartModes(),
-  interpolationModes: getInterpolationModes(),
-  thresholdLineStyles: getThresholdLineStyles(),
-});
-
-const getGaugeCollections = () => ({
-  gaugeTypes: getGaugeTypes(),
-  alignments: getAlignments(),
-  colorSchemas,
-});
-
-const getHeatmapCollections = () => ({
-  legendPositions: getPositions(),
-  scales: getScaleTypes(),
-  colorSchemas,
-});
-
-export {
-  getConfigCollections,
-  getGaugeCollections,
-  getHeatmapCollections,
-  getPositions,
-  getRotateOptions,
-  getScaleTypes,
-  getInterpolationModes,
-  getChartTypes,
-  getChartModes,
-  getAxisModes,
-};
diff --git a/src/plugins/vis_type_vislib/public/vis_renderer.tsx b/src/plugins/vis_type_vislib/public/vis_renderer.tsx
index 9c697f481e63e9..205c22092ac619 100644
--- a/src/plugins/vis_type_vislib/public/vis_renderer.tsx
+++ b/src/plugins/vis_type_vislib/public/vis_renderer.tsx
@@ -26,9 +26,13 @@ import { ChartsPluginSetup } from '../../charts/public';
 
 import { VisTypeVislibCoreSetup } from './plugin';
 import { VislibRenderValue, vislibVisName } from './vis_type_vislib_vis_fn';
+import { VislibChartType } from './types';
+import { PieRenderValue } from './pie_fn';
 
-function shouldShowNoResultsMessage(visData: any, visType: string): boolean {
-  if (['goal', 'gauge'].includes(visType)) {
+const VislibWrapper = lazy(() => import('./vis_wrapper'));
+
+function shouldShowNoResultsMessage(visData: any, visType: VislibChartType): boolean {
+  if (['goal', 'gauge'].includes(visType as string)) {
     return false;
   }
 
@@ -38,13 +42,12 @@ function shouldShowNoResultsMessage(visData: any, visType: string): boolean {
   return Boolean(isZeroHits);
 }
 
-const VislibWrapper = lazy(() => import('./vis_wrapper'));
-
 export const getVislibVisRenderer: (
   core: VisTypeVislibCoreSetup,
   charts: ChartsPluginSetup
-) => ExpressionRenderDefinition<VislibRenderValue> = (core, charts) => ({
+) => ExpressionRenderDefinition<VislibRenderValue | PieRenderValue> = (core, charts) => ({
   name: vislibVisName,
+  displayName: 'Vislib visualization',
   reuseDomNode: true,
   render: async (domNode, config, handlers) => {
     const showNoResult = shouldShowNoResultsMessage(config.visData, config.visType);
diff --git a/src/plugins/vis_type_vislib/public/vis_type_vislib_vis_fn.ts b/src/plugins/vis_type_vislib/public/vis_type_vislib_vis_fn.ts
index dc4a6314fb013c..d627b8587882a6 100644
--- a/src/plugins/vis_type_vislib/public/vis_type_vislib_vis_fn.ts
+++ b/src/plugins/vis_type_vislib/public/vis_type_vislib_vis_fn.ts
@@ -23,18 +23,18 @@ import { ExpressionFunctionDefinition, Datatable, Render } from '../../expressio
 
 // @ts-ignore
 import { vislibSeriesResponseHandler } from './vislib/response_handler';
-import { BasicVislibParams } from './types';
+import { BasicVislibParams, VislibChartType } from './types';
 
 export const vislibVisName = 'vislib_vis';
 
 interface Arguments {
-  type: string;
+  type: Exclude<VislibChartType, 'pie'>;
   visConfig: string;
 }
 
 export interface VislibRenderValue {
-  visData: any;
-  visType: string;
+  visType: Exclude<VislibChartType, 'pie'>;
+  visData: unknown;
   visConfig: BasicVislibParams;
 }
 
@@ -65,7 +65,7 @@ export const createVisTypeVislibVisFn = (): VisTypeVislibExpressionFunctionDefin
     },
   },
   fn(context, args, handlers) {
-    const visType = args.type;
+    const visType = args.type as Exclude<VislibChartType, 'pie'>;
     const visConfig = JSON.parse(args.visConfig) as BasicVislibParams;
     const visData = vislibSeriesResponseHandler(context, visConfig.dimensions);
 
diff --git a/src/plugins/vis_type_vislib/public/vis_type_vislib_vis_types.ts b/src/plugins/vis_type_vislib/public/vis_type_vislib_vis_types.ts
index 1b43a213c618d8..28415e3e2fa8ca 100644
--- a/src/plugins/vis_type_vislib/public/vis_type_vislib_vis_types.ts
+++ b/src/plugins/vis_type_vislib/public/vis_type_vislib_vis_types.ts
@@ -36,3 +36,9 @@ export const visLibVisTypeDefinitions = [
   gaugeVisTypeDefinition,
   goalVisTypeDefinition,
 ];
+
+export const convertedTypeDefinitions = [
+  heatmapVisTypeDefinition,
+  gaugeVisTypeDefinition,
+  goalVisTypeDefinition,
+];
diff --git a/src/plugins/vis_type_vislib/public/vis_wrapper.tsx b/src/plugins/vis_type_vislib/public/vis_wrapper.tsx
index 980ba1c175885e..280a957396c348 100644
--- a/src/plugins/vis_type_vislib/public/vis_wrapper.tsx
+++ b/src/plugins/vis_type_vislib/public/vis_wrapper.tsx
@@ -27,10 +27,11 @@ import { ChartsPluginSetup } from '../../charts/public';
 import { VislibRenderValue } from './vis_type_vislib_vis_fn';
 import { createVislibVisController, VislibVisController } from './vis_controller';
 import { VisTypeVislibCoreSetup } from './plugin';
+import { PieRenderValue } from './pie_fn';
 
 import './index.scss';
 
-type VislibWrapperProps = VislibRenderValue & {
+type VislibWrapperProps = (VislibRenderValue | PieRenderValue) & {
   core: VisTypeVislibCoreSetup;
   charts: ChartsPluginSetup;
   handlers: IInterpreterRenderHandlers;
diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss b/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss
index a06f0cb00787b4..cb63811800c2d6 100644
--- a/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss
+++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss
@@ -3,8 +3,6 @@
 // NOTE: Some of the styles attempt to align with the TSVB legend
 
 $visLegendWidth: 150px;
-$visColorPickerWidth: $euiSizeM * 10;
-$visLegendLineHeight: $euiSize;
 
 .visLegend__toggle {
   border-radius: $euiBorderRadius;
@@ -81,20 +79,3 @@ $visLegendLineHeight: $euiSize;
     visibility: hidden;
   }
 }
-
-.visLegend__valueColorPicker {
-  width: ($euiSizeL * 8); // 8 columns
-}
-
-.visLegend__valueColorPickerDot {
-  cursor: pointer;
-
-  &:hover {
-    transform: scale(1.4);
-  }
-
-  &-isSelected {
-    border: $euiSizeXS solid;
-    border-radius: 100%;
-  }
-}
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 7acc97404c11c3..5b1a2b39753674 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
@@ -243,7 +243,7 @@ describe('VisLegend Component', () => {
       const first = getLegendItems(wrapper).first();
       first.simulate('click');
 
-      expect(wrapper.exists('.visLegend__valueDetails')).toBe(true);
+      expect(wrapper.exists('.visColorPicker')).toBe(true);
     });
   });
 
@@ -256,8 +256,8 @@ describe('VisLegend Component', () => {
       const first = getLegendItems(wrapper).first();
       first.simulate('click');
 
-      const popover = wrapper.find('.visLegend__valueDetails').first();
-      const firstColor = popover.find('.visLegend__valueColorPickerDot').first();
+      const popover = wrapper.find('.visColorPicker').first();
+      const firstColor = popover.find('.visColorPicker__valueDot').first();
       firstColor.simulate('click');
 
       const colors = mockState.get('vis.colors');
diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx
index cec97f0cadf11e..5065642d88c6b2 100644
--- a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx
+++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx
@@ -78,18 +78,20 @@ export class VisLegend extends PureComponent<VisLegendProps, VisLegendState> {
     });
   };
 
-  setColor = (label: string, color: string) => (event: BaseSyntheticEvent) => {
+  setColor = (label: string | number, color: string | null, event: BaseSyntheticEvent) => {
     if ((event as KeyboardEvent).key && (event as KeyboardEvent).key !== keys.ENTER) {
       return;
     }
 
-    const colors = this.props.uiState?.get('vis.colors') || {};
-    if (colors[label] === color) delete colors[label];
-    else colors[label] = color;
-    this.props.uiState?.setSilent('vis.colors', null);
-    this.props.uiState?.set('vis.colors', colors);
-    this.props.uiState?.emit('colorChanged');
-    this.refresh();
+    this.setState({ selectedLabel: null }, () => {
+      const colors = this.props.uiState?.get('vis.colors') || {};
+      if (colors[label] === color || !color) delete colors[label];
+      else colors[label] = color;
+      this.props.uiState?.setSilent('vis.colors', null);
+      this.props.uiState?.set('vis.colors', colors);
+      this.props.uiState?.emit('colorChanged');
+      this.refresh();
+    });
   };
 
   filter = ({ values: data }: LegendItem, negate: boolean) => {
diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
index 39e6fb2d2aff44..6c7e343a22d8f4 100644
--- a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
+++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
@@ -18,10 +18,8 @@
  */
 
 import React, { memo, useState, BaseSyntheticEvent, KeyboardEvent } from 'react';
-import classNames from 'classnames';
 
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiPopover,
   keys,
@@ -33,7 +31,8 @@ import {
   EuiButtonGroupOptionProps,
 } from '@elastic/eui';
 
-import { legendColors, LegendItem } from './models';
+import { LegendItem } from './models';
+import { ColorPicker } from '../../../../../charts/public';
 
 interface Props {
   item: LegendItem;
@@ -45,7 +44,7 @@ interface Props {
   onSelect: (label: string | null) => (event?: BaseSyntheticEvent) => void;
   onHighlight: (event: BaseSyntheticEvent) => void;
   onUnhighlight: (event: BaseSyntheticEvent) => void;
-  setColor: (label: string, color: string) => (event: BaseSyntheticEvent) => void;
+  setColor: (label: string, color: string | null, event: BaseSyntheticEvent) => void;
   getColor: (label: string) => string;
 }
 
@@ -159,40 +158,14 @@ const VisLegendItemComponent = ({
       closePopover={onSelect(null)}
       panelPaddingSize="s"
     >
-      <div className="visLegend__valueDetails">
-        {canFilter && renderFilterBar()}
+      {canFilter && renderFilterBar()}
 
-        <div className="visLegend__valueColorPicker" role="listbox">
-          <span id={`${legendId}ColorPickerDesc`} className="euiScreenReaderOnly">
-            <FormattedMessage
-              id="visTypeVislib.vislib.legend.setColorScreenReaderDescription"
-              defaultMessage="Set color for value {legendDataLabel}"
-              values={{ legendDataLabel: item.label }}
-            />
-          </span>
-          {legendColors.map((color) => (
-            <EuiIcon
-              role="option"
-              tabIndex={0}
-              type="dot"
-              size="l"
-              color={getColor(item.label)}
-              key={color}
-              aria-label={color}
-              aria-describedby={`${legendId}ColorPickerDesc`}
-              aria-selected={color === getColor(item.label)}
-              onClick={setColor(item.label, color)}
-              onKeyPress={setColor(item.label, color)}
-              className={classNames('visLegend__valueColorPickerDot', {
-                // eslint-disable-next-line @typescript-eslint/naming-convention
-                'visLegend__valueColorPickerDot-isSelected': color === getColor(item.label),
-              })}
-              style={{ color }}
-              data-test-subj={`legendSelectColor-${color}`}
-            />
-          ))}
-        </div>
-      </div>
+      <ColorPicker
+        id={legendId}
+        label={item.label}
+        color={getColor(item.label)}
+        onChange={(c, e) => setColor(item.label, c, e)}
+      />
     </EuiPopover>
   );
 
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_add_to_siri.test.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_add_to_siri.test.ts
index ae6b365efc0cd7..1b51fb8a53d118 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_add_to_siri.test.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_add_to_siri.test.ts
@@ -17,9 +17,10 @@
  * under the License.
  */
 
+import type { Dimension } from '../../../../../vis_type_xy/public';
+
 import { addToSiri, Serie } from './_add_to_siri';
 import { Point } from './_get_point';
-import { Dimension } from './point_series';
 
 describe('addToSiri', function () {
   it('creates a new series the first time it sees an id', function () {
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_add_to_siri.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_add_to_siri.ts
index 5e5185d6c31abf..2e04e916e85f2f 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_add_to_siri.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_add_to_siri.ts
@@ -17,8 +17,10 @@
  * under the License.
  */
 
+import { getAggId } from '../../../../../vis_type_xy/public';
+import type { Dimension } from '../../../../../vis_type_xy/public';
+
 import { Point } from './_get_point';
-import { Dimension } from './point_series';
 
 export interface Serie {
   id: string;
@@ -48,7 +50,7 @@ export function addToSiri(
   }
 
   series.set(id, {
-    id: id.split('-').pop() as string,
+    id: getAggId(id),
     rawId: id,
     label: yLabel == null ? id : yLabel,
     count: 0,
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_aspects.test.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_aspects.test.ts
index fb14b04357f8f3..5efde634275731 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_aspects.test.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_aspects.test.ts
@@ -17,8 +17,10 @@
  * under the License.
  */
 
+import type { Dimension, Dimensions } from '../../../../../vis_type_xy/public';
+
 import { getAspects } from './_get_aspects';
-import { Dimension, Dimensions, Aspect } from './point_series';
+import { Aspect } from './point_series';
 import { Table, Row } from '../../types';
 
 describe('getAspects', function () {
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_aspects.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_aspects.ts
index 87819aa9b2a5c5..e4094a4549841b 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_aspects.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_aspects.ts
@@ -17,8 +17,10 @@
  * under the License.
  */
 
+import type { Dimensions } from '../../../../../vis_type_xy/public';
+
 import { makeFakeXAspect } from './_fake_x_aspect';
-import { Dimensions, Aspects } from './point_series';
+import { Aspects } from './point_series';
 import { Table } from '../../types';
 
 /**
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_point.test.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_point.test.ts
index be44975bd4eb0c..03d41096a8c6f9 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_point.test.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_point.test.ts
@@ -18,6 +18,7 @@
  */
 
 import { IFieldFormatsRegistry } from '../../../../../data/common';
+
 import { getPoint } from './_get_point';
 import { setFormatService } from '../../../services';
 import { Aspect } from './point_series';
@@ -94,7 +95,12 @@ describe('getPoint', function () {
 
     it('should call deserialize', function () {
       const seriesAspect = [
-        { accessor: '1', format: { id: 'number', params: { pattern: '$' } } } as Aspect,
+        {
+          title: 'series',
+          accessor: '1',
+          format: { id: 'number', params: { pattern: '$' } },
+          params: {},
+        } as Aspect,
       ];
       getPoint(table, xAspect, seriesAspect, row, 0, yAspect);
 
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_init_x_axis.test.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_init_x_axis.test.ts
index 3f0560c2c9f28c..aa24530b025dc7 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_init_x_axis.test.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_init_x_axis.test.ts
@@ -18,16 +18,12 @@
  */
 
 import moment from 'moment';
+
+import type { DateHistogramParams, HistogramParams } from '../../../../../vis_type_xy/public';
+
 import { initXAxis } from './_init_x_axis';
 import { makeFakeXAspect } from './_fake_x_aspect';
-import {
-  Aspects,
-  Chart,
-  DateHistogramOrdered,
-  DateHistogramParams,
-  HistogramOrdered,
-  HistogramParams,
-} from './point_series';
+import { Aspects, Chart, DateHistogramOrdered, HistogramOrdered } from './point_series';
 import { Table, Column } from '../../types';
 
 describe('initXAxis', function () {
@@ -110,7 +106,7 @@ describe('initXAxis', function () {
 
   it('reads the date interval param from the x agg', function () {
     const dateHistogramParams = chart.aspects.x[0].params as DateHistogramParams;
-    dateHistogramParams.interval = 'P1D';
+    dateHistogramParams.interval = moment.duration(1, 'd').asMilliseconds();
     dateHistogramParams.intervalESValue = 1;
     dateHistogramParams.intervalESUnit = 'd';
     dateHistogramParams.date = true;
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_ordered_date_axis.test.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_ordered_date_axis.test.ts
index b2e4d6e4b40c9f..7dd1dd259f785f 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_ordered_date_axis.test.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_ordered_date_axis.test.ts
@@ -19,8 +19,11 @@
 
 import moment from 'moment';
 import _ from 'lodash';
+
+import type { DateHistogramParams } from '../../../../../vis_type_xy/public/types';
+
 import { orderedDateAxis } from './_ordered_date_axis';
-import { DateHistogramParams, OrderedChart } from './point_series';
+import { OrderedChart } from './point_series';
 
 describe('orderedDateAxis', function () {
   const baseArgs = {
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/point_series.test.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/point_series.test.ts
index 2a5ab197c9ab77..7c343af7840ee5 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/point_series.test.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/point_series.test.ts
@@ -18,7 +18,10 @@
  */
 
 import _ from 'lodash';
-import { buildPointSeriesData, Dimensions } from './point_series';
+
+import type { Dimensions } from '../../../../../vis_type_xy/public';
+
+import { buildPointSeriesData } from './point_series';
 import { Table, Column } from '../../types';
 import { setFormatService } from '../../../services';
 import { Serie } from './_add_to_siri';
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/point_series.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/point_series.ts
index f40d01e6a81238..2bc669e0b77a38 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/point_series.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/point_series.ts
@@ -18,6 +18,14 @@
  */
 
 import { Duration } from 'moment';
+
+import type {
+  Dimension,
+  Dimensions,
+  DateHistogramParams,
+  HistogramParams,
+} from '../../../../../vis_type_xy/public';
+
 import { getSeries } from './_get_series';
 import { getAspects } from './_get_aspects';
 import { initYAxis } from './_init_y_axis';
@@ -26,41 +34,6 @@ import { orderedDateAxis } from './_ordered_date_axis';
 import { Serie } from './_add_to_siri';
 import { Column, Table } from '../../types';
 
-export interface DateHistogramParams {
-  date: boolean;
-  interval: number | string;
-  intervalESValue: number;
-  intervalESUnit: string;
-  format: string;
-  bounds?: {
-    min: string | number;
-    max: string | number;
-  };
-}
-export interface HistogramParams {
-  interval: number;
-}
-export interface FakeParams {
-  defaultValue: string;
-}
-export interface Dimension {
-  accessor: number;
-  format: {
-    id?: string;
-    params?: { pattern?: string; [key: string]: any };
-  };
-  params: DateHistogramParams | HistogramParams | FakeParams | {};
-}
-
-export interface Dimensions {
-  x: Dimension | null;
-  y: Dimension[];
-  z?: Dimension[];
-  series?: Dimension | Dimension[];
-  width?: Dimension[];
-  splitRow?: Dimension[];
-  splitColumn?: Dimension[];
-}
 export interface Aspect {
   accessor: Column['id'];
   column?: Dimension['accessor'];
diff --git a/src/plugins/vis_type_vislib/public/vislib/lib/handler.js b/src/plugins/vis_type_vislib/public/vislib/lib/handler.js
index 938ea3adcb9b56..e1908a8483febc 100644
--- a/src/plugins/vis_type_vislib/public/vislib/lib/handler.js
+++ b/src/plugins/vis_type_vislib/public/vislib/lib/handler.js
@@ -21,15 +21,16 @@ import d3 from 'd3';
 import _ from 'lodash';
 import MarkdownIt from 'markdown-it';
 
+import { dispatchRenderComplete } from '../../../../kibana_utils/public';
+
+import { visTypes as chartTypes } from '../visualizations/vis_types';
 import { NoResults } from '../errors';
 import { Layout } from './layout/layout';
 import { ChartTitle } from './chart_title';
 import { Alerts } from './alerts';
 import { Axis } from './axis/axis';
 import { ChartGrid as Grid } from './chart_grid';
-import { visTypes as chartTypes } from '../visualizations/vis_types';
 import { Binder } from './binder';
-import { dispatchRenderComplete } from '../../../../kibana_utils/public';
 
 const markdownIt = new MarkdownIt({
   html: false,
diff --git a/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile.json b/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile.json
index d52cb18727c05e..50d6eab03e3f7c 100644
--- a/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile.json
+++ b/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile.json
@@ -31,7 +31,7 @@
         },
         "params": {
           "date": true,
-          "interval": "P1D",
+          "interval": 86400000,
           "format": "YYYY-MM-DD",
           "bounds": {
             "min": "2019-05-10T04:00:00.000Z",
@@ -128,7 +128,7 @@
       },
       "xAxisLabel": "timestamp per day",
       "ordered": {
-        "interval": "P1D",
+        "interval": 86400000,
         "date": true,
         "min": 1557460800000,
         "max": 1557656337342
diff --git a/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_float_value.json b/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_float_value.json
index 6e1a7072299745..1987c59f6722bd 100644
--- a/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_float_value.json
+++ b/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_float_value.json
@@ -31,7 +31,7 @@
         },
         "params": {
           "date": true,
-          "interval": "P1D",
+          "interval": 86400000,
           "format": "YYYY-MM-DD",
           "bounds": {
             "min": "2019-05-10T04:00:00.000Z",
@@ -128,7 +128,7 @@
       },
       "xAxisLabel": "timestamp per day",
       "ordered": {
-        "interval": "P1D",
+        "interval": 86400000,
         "date": true,
         "min": 1557460800000,
         "max": 1557656337342
@@ -460,4 +460,4 @@
       "50th percentile of AvgTicketPrice"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_float_value_result.json b/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_float_value_result.json
index f7dd18f5eb7125..ae1f3cbf24c339 100644
--- a/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_float_value_result.json
+++ b/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_float_value_result.json
@@ -32,7 +32,7 @@
       },
       "params": {
         "date": true,
-        "interval": "P1D",
+        "interval": 86400000,
         "format": "YYYY-MM-DD",
         "bounds": {
           "min": "2019-05-10T04:00:00.000Z",
@@ -453,4 +453,4 @@
     }
   ],
   "enableHover": true
-}
\ No newline at end of file
+}
diff --git a/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_result.json b/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_result.json
index 02062c987564e6..f2ee245a8431f1 100644
--- a/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_result.json
+++ b/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_result.json
@@ -32,7 +32,7 @@
       },
       "params": {
         "date": true,
-        "interval": "P1D",
+        "interval": 86400000,
         "format": "YYYY-MM-DD",
         "bounds": {
           "min": "2019-05-10T04:00:00.000Z",
@@ -455,4 +455,4 @@
     }
   ],
   "enableHover": true
-}
\ No newline at end of file
+}
diff --git a/src/plugins/vis_type_vislib/public/vislib/visualizations/gauge_chart.js b/src/plugins/vis_type_vislib/public/vislib/visualizations/gauge_chart.js
index a2b830ffaa7817..40d15733b418d8 100644
--- a/src/plugins/vis_type_vislib/public/vislib/visualizations/gauge_chart.js
+++ b/src/plugins/vis_type_vislib/public/vislib/visualizations/gauge_chart.js
@@ -22,8 +22,8 @@ import { Chart } from './_chart';
 import { gaugeTypes } from './gauges/gauge_types';
 
 export class GaugeChart extends Chart {
-  constructor(handler, chartEl, chartData, deps) {
-    super(handler, chartEl, chartData, deps);
+  constructor(handler, chartEl, chartData, uiSettings) {
+    super(handler, chartEl, chartData, uiSettings);
     this.gaugeConfig = handler.visConfig.get('gauge', {});
     this.gauge = new gaugeTypes[this.gaugeConfig.type](this);
   }
diff --git a/src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/heatmap_chart.js b/src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/heatmap_chart.js
index 45647214647679..d725c29eef310c 100644
--- a/src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/heatmap_chart.js
+++ b/src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/heatmap_chart.js
@@ -40,8 +40,8 @@ const defaults = {
  * @param chartData {Object} Elasticsearch query results for this specific chart
  */
 export class HeatmapChart extends PointSeries {
-  constructor(handler, chartEl, chartData, seriesConfigArgs, deps) {
-    super(handler, chartEl, chartData, seriesConfigArgs, deps);
+  constructor(handler, chartEl, chartData, seriesConfigArgs, core) {
+    super(handler, chartEl, chartData, seriesConfigArgs, core);
 
     this.seriesConfig = _.defaults(seriesConfigArgs || {}, defaults);
 
diff --git a/src/plugins/vis_type_vislib/server/ui_settings.ts b/src/plugins/vis_type_vislib/server/ui_settings.ts
index a48cbbae3d0cae..58564b4055daa8 100644
--- a/src/plugins/vis_type_vislib/server/ui_settings.ts
+++ b/src/plugins/vis_type_vislib/server/ui_settings.ts
@@ -24,6 +24,8 @@ import { UiSettingsParams } from 'kibana/server';
 import { DIMMING_OPACITY_SETTING, HEATMAP_MAX_BUCKETS_SETTING } from '../common';
 
 export const uiSettings: Record<string, UiSettingsParams> = {
+  // TODO: move this to vis_type_xy when vislib is removed
+  // https://github.com/elastic/kibana/issues/56143
   [DIMMING_OPACITY_SETTING]: {
     name: i18n.translate('visTypeVislib.advancedSettings.visualization.dimmingOpacityTitle', {
       defaultMessage: 'Dimming opacity',
diff --git a/src/plugins/vis_type_xy/README.md b/src/plugins/vis_type_xy/README.md
index 70ddb21c1e9dbe..549fc4e3ea1899 100644
--- a/src/plugins/vis_type_xy/README.md
+++ b/src/plugins/vis_type_xy/README.md
@@ -1,2 +1,2 @@
 Contains the new xy-axis chart using the elastic-charts library, which will eventually
-replace the vislib xy-axis (bar, area, line) charts.
\ No newline at end of file
+replace the vislib xy-axis charts including bar, area, and line.
diff --git a/src/plugins/vis_type_xy/common/index.ts b/src/plugins/vis_type_xy/common/index.ts
new file mode 100644
index 00000000000000..bf498229a1b549
--- /dev/null
+++ b/src/plugins/vis_type_xy/common/index.ts
@@ -0,0 +1,37 @@
+/*
+ * 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 { $Values } from '@kbn/utility-types';
+
+/**
+ * Type of charts able to render
+ */
+export const ChartType = Object.freeze({
+  Line: 'line' as const,
+  Area: 'area' as const,
+  Histogram: 'histogram' as const,
+});
+export type ChartType = $Values<typeof ChartType>;
+
+/**
+ * Type of xy visualizations
+ */
+export type XyVisType = ChartType | 'horizontal_bar';
+
+export const CHARTS_LIBRARY = 'visualization:visualize:chartsLibrary';
diff --git a/src/plugins/vis_type_xy/jest.config.js b/src/plugins/vis_type_xy/jest.config.js
new file mode 100644
index 00000000000000..556e518d4f4e1a
--- /dev/null
+++ b/src/plugins/vis_type_xy/jest.config.js
@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../..',
+  roots: ['<rootDir>/src/plugins/vis_type_xy'],
+};
diff --git a/src/plugins/vis_type_xy/kibana.json b/src/plugins/vis_type_xy/kibana.json
index ca02da45e91127..14c3ce36bf375b 100644
--- a/src/plugins/vis_type_xy/kibana.json
+++ b/src/plugins/vis_type_xy/kibana.json
@@ -3,5 +3,6 @@
   "version": "kibana",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["charts", "expressions", "visualizations"]
+  "requiredPlugins": ["charts", "data", "expressions", "visualizations"],
+  "requiredBundles": ["kibanaUtils", "visDefaultEditor"]
 }
diff --git a/src/plugins/vis_type_xy/public/__snapshots__/to_ast.test.ts.snap b/src/plugins/vis_type_xy/public/__snapshots__/to_ast.test.ts.snap
new file mode 100644
index 00000000000000..e6665c26a28150
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/__snapshots__/to_ast.test.ts.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`xy vis toExpressionAst function should match basic snapshot 1`] = `
+Object {
+  "addArgument": [Function],
+  "arguments": Object {
+    "type": Array [
+      "area",
+    ],
+    "visConfig": Array [
+      "{\\"type\\":\\"area\\",\\"grid\\":{\\"categoryLines\\":false,\\"style\\":{\\"color\\":\\"#eee\\"}},\\"categoryAxes\\":[{\\"id\\":\\"CategoryAxis-1\\",\\"type\\":\\"category\\",\\"position\\":\\"bottom\\",\\"show\\":true,\\"style\\":{},\\"scale\\":{\\"type\\":\\"linear\\"},\\"labels\\":{\\"show\\":true,\\"truncate\\":100},\\"title\\":{}}],\\"valueAxes\\":[{\\"id\\":\\"ValueAxis-1\\",\\"name\\":\\"LeftAxis-1\\",\\"type\\":\\"value\\",\\"position\\":\\"left\\",\\"show\\":true,\\"style\\":{},\\"scale\\":{\\"type\\":\\"linear\\",\\"mode\\":\\"normal\\"},\\"labels\\":{\\"show\\":true,\\"rotate\\":0,\\"filter\\":false,\\"truncate\\":100},\\"title\\":{\\"text\\":\\"Sum of total_quantity\\"}}],\\"seriesParams\\":[{\\"show\\":\\"true\\",\\"type\\":\\"area\\",\\"mode\\":\\"stacked\\",\\"data\\":{\\"label\\":\\"Sum of total_quantity\\",\\"id\\":\\"1\\"},\\"drawLinesBetweenPoints\\":true,\\"showCircles\\":true,\\"interpolate\\":\\"linear\\",\\"valueAxis\\":\\"ValueAxis-1\\"}],\\"addTooltip\\":true,\\"addLegend\\":true,\\"legendPosition\\":\\"top\\",\\"times\\":[],\\"addTimeMarker\\":false,\\"thresholdLine\\":{\\"show\\":false,\\"value\\":10,\\"width\\":1,\\"style\\":\\"full\\",\\"color\\":\\"#E7664C\\"},\\"labels\\":{},\\"dimensions\\":{\\"x\\":{\\"accessor\\":1,\\"format\\":{\\"id\\":\\"date\\",\\"params\\":{\\"pattern\\":\\"HH:mm:ss.SSS\\"}},\\"params\\":{}},\\"y\\":[{\\"accessor\\":0,\\"format\\":{\\"id\\":\\"number\\",\\"params\\":{\\"parsedUrl\\":{\\"origin\\":\\"http://localhost:5801\\",\\"pathname\\":\\"/app/visualize\\",\\"basePath\\":\\"\\"}}},\\"params\\":{}}],\\"series\\":[{\\"accessor\\":2,\\"format\\":{\\"id\\":\\"terms\\",\\"params\\":{\\"id\\":\\"string\\",\\"otherBucketLabel\\":\\"Other\\",\\"missingBucketLabel\\":\\"Missing\\",\\"parsedUrl\\":{\\"origin\\":\\"http://localhost:5801\\",\\"pathname\\":\\"/app/visualize\\",\\"basePath\\":\\"\\"}}},\\"params\\":{}}]}}",
+    ],
+  },
+  "getArgument": [Function],
+  "name": "xy_vis",
+  "removeArgument": [Function],
+  "replaceArgument": [Function],
+  "toAst": [Function],
+  "toString": [Function],
+  "type": "expression_function_builder",
+}
+`;
diff --git a/src/plugins/vis_type_xy/public/_chart.scss b/src/plugins/vis_type_xy/public/_chart.scss
new file mode 100644
index 00000000000000..ac9d4ed04aec47
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/_chart.scss
@@ -0,0 +1,7 @@
+.xyChart__container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
diff --git a/src/plugins/vis_type_xy/public/components/_detailed_tooltip.scss b/src/plugins/vis_type_xy/public/components/_detailed_tooltip.scss
new file mode 100644
index 00000000000000..91b0a8d0232902
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/_detailed_tooltip.scss
@@ -0,0 +1,34 @@
+.detailedTooltip {
+  @include euiToolTipStyle('s');
+  pointer-events: none;
+  max-width: $euiSizeXL * 10;
+  overflow: hidden;
+  padding: $euiSizeS;
+
+  table {
+    td,
+    th {
+      text-align: left;
+      padding: $euiSizeXS;
+      overflow-wrap: break-word;
+      word-wrap: break-word;
+    }
+  }
+}
+
+.detailedTooltip__header {
+  > :last-child {
+    margin-bottom: $euiSizeS;
+  }
+}
+
+.detailedTooltip__labelContainer,
+.detailedTooltip__valueContainer {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+.detailedTooltip__label {
+  font-weight: $euiFontWeightMedium;
+  color: shade($euiColorGhost, 20%);
+}
diff --git a/src/plugins/vis_type_xy/public/components/detailed_tooltip.tsx b/src/plugins/vis_type_xy/public/components/detailed_tooltip.tsx
new file mode 100644
index 00000000000000..3427baed41b8da
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/detailed_tooltip.tsx
@@ -0,0 +1,142 @@
+/*
+ * 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 { isNil } from 'lodash';
+
+import {
+  CustomTooltip,
+  TooltipValue,
+  TooltipValueFormatter,
+  XYChartSeriesIdentifier,
+} from '@elastic/charts';
+
+import { BUCKET_TYPES } from '../../../data/public';
+
+import { Aspects } from '../types';
+
+import './_detailed_tooltip.scss';
+import { fillEmptyValue } from '../utils/get_series_name_fn';
+import { COMPLEX_SPLIT_ACCESSOR } from '../utils/accessors';
+
+interface TooltipData {
+  label: string;
+  value: string;
+}
+
+const getTooltipData = (
+  aspects: Aspects,
+  header: TooltipValue | null,
+  value: TooltipValue
+): TooltipData[] => {
+  const data: TooltipData[] = [];
+
+  if (header) {
+    const xFormatter =
+      aspects.x.aggType === BUCKET_TYPES.DATE_RANGE || aspects.x.aggType === BUCKET_TYPES.RANGE
+        ? null
+        : aspects.x.formatter;
+    data.push({
+      label: aspects.x.title,
+      value: xFormatter ? xFormatter(header.value) : `${header.value}`,
+    });
+  }
+
+  const valueSeries = value.seriesIdentifier as XYChartSeriesIdentifier;
+  const yAccessor = aspects.y.find(({ accessor }) => accessor === valueSeries.yAccessor) ?? null;
+
+  if (yAccessor) {
+    data.push({
+      label: yAccessor.title,
+      value: yAccessor.formatter ? yAccessor.formatter(value.value) : `${value.value}`,
+    });
+  }
+
+  if (aspects.z && !isNil(value.markValue)) {
+    data.push({
+      label: aspects.z.title,
+      value: aspects.z.formatter ? aspects.z.formatter(value.markValue) : `${value.markValue}`,
+    });
+  }
+
+  valueSeries.splitAccessors.forEach((splitValue, key) => {
+    const split = (aspects.series ?? []).find(({ accessor }, i) => {
+      return accessor === key || key === `${COMPLEX_SPLIT_ACCESSOR}::${i}`;
+    });
+
+    if (split) {
+      data.push({
+        label: split?.title,
+        value:
+          split?.formatter && !key.toString().startsWith(COMPLEX_SPLIT_ACCESSOR)
+            ? split?.formatter(splitValue)
+            : `${splitValue}`,
+      });
+    }
+  });
+
+  return data;
+};
+
+const renderData = ({ label, value: rawValue }: TooltipData, index: number) => {
+  const value = fillEmptyValue(rawValue);
+  return label && value ? (
+    <tr key={label + value + index}>
+      <td className="detailedTooltip__label">
+        <div className="detailedTooltip__labelContainer">{label}</div>
+      </td>
+
+      <td className="detailedTooltip__value">
+        <div className="detailedTooltip__valueContainer">{value}</div>
+      </td>
+    </tr>
+  ) : null;
+};
+
+export const getDetailedTooltip = (aspects: Aspects) => (
+  headerFormatter?: TooltipValueFormatter
+): CustomTooltip => {
+  return function DetailedTooltip({ header, values }) {
+    // Note: first value is not necessarily the closest value
+    // To be fixed with https://github.com/elastic/elastic-charts/issues/835
+    // TODO: Allow multiple values to be displayed in tooltip
+    const highlightedValue = values.find(({ isHighlighted }) => isHighlighted);
+
+    if (!highlightedValue) {
+      return null;
+    }
+
+    const tooltipData = getTooltipData(aspects, header, highlightedValue);
+
+    if (tooltipData.length === 0) {
+      return null;
+    }
+
+    return (
+      <div className="detailedTooltip">
+        {headerFormatter && header && (
+          <div className="detailedTooltip__header">{headerFormatter(header)}</div>
+        )}
+        <table>
+          <tbody>{tooltipData.map(renderData)}</tbody>
+        </table>
+      </div>
+    );
+  };
+};
diff --git a/src/plugins/vis_type_xy/public/components/index.ts b/src/plugins/vis_type_xy/public/components/index.ts
new file mode 100644
index 00000000000000..d8d55c77b7a8a0
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/index.ts
@@ -0,0 +1,25 @@
+/*
+ * 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 { XYAxis } from './xy_axis';
+export { XYEndzones } from './xy_endzones';
+export { XYCurrentTime } from './xy_current_time';
+export { XYSettings } from './xy_settings';
+export { XYThresholdLine } from './xy_threshold_line';
+export { SplitChartWarning } from './split_chart_warning';
diff --git a/src/plugins/vis_type_xy/public/components/split_chart_warning.tsx b/src/plugins/vis_type_xy/public/components/split_chart_warning.tsx
new file mode 100644
index 00000000000000..a9aa2bf24601b5
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/split_chart_warning.tsx
@@ -0,0 +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.
+ */
+
+import React, { FC } from 'react';
+
+import { EuiLink, EuiCallOut } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { getDocLinks } from '../services';
+
+export const SplitChartWarning: FC = () => {
+  const advancedSettingsLink = getDocLinks().links.management.visualizationSettings;
+
+  return (
+    <EuiCallOut
+      title={i18n.translate('visTypeXy.splitChartWarning.title', {
+        defaultMessage: 'Warning',
+      })}
+      color="warning"
+      iconType="help"
+    >
+      <FormattedMessage
+        id="visTypeXy.splitChartWarning.content"
+        defaultMessage="The new charts library does not support split chart aggregation. Please disable the {link} advanced setting to use split chart aggregation."
+        values={{
+          link: (
+            <EuiLink href={advancedSettingsLink} target="_blank" external>
+              <FormattedMessage
+                id="visTypeXy.splitChartWarning.link"
+                defaultMessage="Charts library"
+              />
+            </EuiLink>
+          ),
+        }}
+      />
+    </EuiCallOut>
+  );
+};
diff --git a/src/plugins/vis_type_xy/public/components/xy_axis.tsx b/src/plugins/vis_type_xy/public/components/xy_axis.tsx
new file mode 100644
index 00000000000000..b64f2bf1ec0ecd
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/xy_axis.tsx
@@ -0,0 +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.
+ */
+
+import React, { FC } from 'react';
+
+import { Axis } from '@elastic/charts';
+
+import { AxisConfig } from '../types';
+
+type XYAxisPros = AxisConfig<any>;
+
+export const XYAxis: FC<XYAxisPros> = ({
+  id,
+  title,
+  show,
+  position,
+  groupId,
+  grid,
+  ticks,
+  domain,
+  style,
+  integersOnly,
+}) => (
+  <Axis
+    id={`${id}__axis`}
+    groupId={groupId}
+    hide={!show}
+    title={title}
+    style={style}
+    domain={domain}
+    position={position}
+    integersOnly={integersOnly}
+    showGridLines={grid?.show}
+    tickFormat={ticks?.formatter}
+    labelFormat={ticks?.labelFormatter}
+    showOverlappingLabels={ticks?.showOverlappingLabels}
+    showDuplicatedTicks={ticks?.showDuplicates}
+  />
+);
diff --git a/src/plugins/vis_type_xy/public/components/xy_current_time.tsx b/src/plugins/vis_type_xy/public/components/xy_current_time.tsx
new file mode 100644
index 00000000000000..66ad4fda3bec77
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/xy_current_time.tsx
@@ -0,0 +1,37 @@
+/*
+ * 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, { FC } from 'react';
+import { DomainRange } from '@elastic/charts';
+import { CurrentTime } from '../../../charts/public';
+
+interface XYCurrentTime {
+  enabled: boolean;
+  isDarkMode: boolean;
+  domain?: DomainRange;
+}
+
+export const XYCurrentTime: FC<XYCurrentTime> = ({ enabled, isDarkMode, domain }) => {
+  if (!enabled) {
+    return null;
+  }
+
+  const domainEnd = domain && 'max' in domain ? domain.max : undefined;
+  return <CurrentTime isDarkMode={isDarkMode} domainEnd={domainEnd} />;
+};
diff --git a/src/plugins/vis_type_xy/public/components/xy_endzones.tsx b/src/plugins/vis_type_xy/public/components/xy_endzones.tsx
new file mode 100644
index 00000000000000..33e1d1e18bb1df
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/xy_endzones.tsx
@@ -0,0 +1,68 @@
+/*
+ * 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, { FC } from 'react';
+
+import { DomainRange } from '@elastic/charts';
+
+import { Endzones } from '../../../charts/public';
+
+interface XYEndzones {
+  enabled: boolean;
+  isDarkMode: boolean;
+  isFullBin: boolean;
+  hideTooltips?: boolean;
+  domain?: DomainRange;
+  adjustedDomain?: DomainRange;
+}
+
+export const XYEndzones: FC<XYEndzones> = ({
+  enabled,
+  isDarkMode,
+  isFullBin,
+  hideTooltips,
+  domain,
+  adjustedDomain,
+}) => {
+  if (
+    enabled &&
+    domain &&
+    adjustedDomain &&
+    'min' in domain &&
+    'max' in domain &&
+    domain.minInterval !== undefined &&
+    'min' in adjustedDomain &&
+    'max' in adjustedDomain
+  ) {
+    return (
+      <Endzones
+        isFullBin={isFullBin}
+        isDarkMode={isDarkMode}
+        domainStart={domain.min}
+        domainEnd={domain.max}
+        interval={domain.minInterval}
+        domainMin={adjustedDomain.min}
+        domainMax={adjustedDomain.max}
+        hideTooltips={hideTooltips}
+      />
+    );
+  }
+
+  return null;
+};
diff --git a/src/plugins/vis_type_xy/public/components/xy_settings.tsx b/src/plugins/vis_type_xy/public/components/xy_settings.tsx
new file mode 100644
index 00000000000000..3682fdf3350b04
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/xy_settings.tsx
@@ -0,0 +1,182 @@
+/*
+ * 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, { FC } from 'react';
+
+import {
+  Direction,
+  Settings,
+  DomainRange,
+  Position,
+  PartialTheme,
+  ElementClickListener,
+  BrushEndListener,
+  RenderChangeListener,
+  LegendAction,
+  LegendColorPicker,
+  TooltipProps,
+  TickFormatter,
+} from '@elastic/charts';
+
+import { renderEndzoneTooltip } from '../../../charts/public';
+
+import { getThemeService, getUISettings } from '../services';
+import { VisConfig } from '../types';
+import { fillEmptyValue } from '../utils/get_series_name_fn';
+
+declare global {
+  interface Window {
+    /**
+     * Flag used to enable debugState on elastic charts
+     */
+    _echDebugStateFlag?: boolean;
+  }
+}
+
+type XYSettingsProps = Pick<
+  VisConfig,
+  | 'markSizeRatio'
+  | 'rotation'
+  | 'enableHistogramMode'
+  | 'tooltip'
+  | 'isTimeChart'
+  | 'xAxis'
+  | 'orderBucketsBySum'
+> & {
+  xDomain?: DomainRange;
+  adjustedXDomain?: DomainRange;
+  showLegend: boolean;
+  onElementClick: ElementClickListener;
+  onBrushEnd?: BrushEndListener;
+  onRenderChange: RenderChangeListener;
+  legendAction?: LegendAction;
+  legendColorPicker: LegendColorPicker;
+  legendPosition: Position;
+};
+
+export const XYSettings: FC<XYSettingsProps> = ({
+  markSizeRatio,
+  rotation,
+  enableHistogramMode,
+  tooltip,
+  isTimeChart,
+  xAxis,
+  orderBucketsBySum,
+  xDomain,
+  adjustedXDomain,
+  showLegend,
+  onElementClick,
+  onBrushEnd,
+  onRenderChange,
+  legendAction,
+  legendColorPicker,
+  legendPosition,
+}) => {
+  const themeService = getThemeService();
+  const theme = themeService.useChartsTheme();
+  const baseTheme = themeService.useChartsBaseTheme();
+  const dimmingOpacity = getUISettings().get<number | undefined>('visualization:dimmingOpacity');
+  const fontSize =
+    typeof theme.barSeriesStyle?.displayValue?.fontSize === 'number'
+      ? { min: theme.barSeriesStyle?.displayValue?.fontSize }
+      : theme.barSeriesStyle?.displayValue?.fontSize ?? { min: 8 };
+
+  const themeOverrides: PartialTheme = {
+    markSizeRatio,
+    sharedStyle: {
+      unhighlighted: {
+        opacity: dimmingOpacity,
+      },
+    },
+    barSeriesStyle: {
+      displayValue: {
+        fontSize,
+        alignment: {
+          horizontal: 'center',
+          vertical: 'middle',
+        },
+      },
+    },
+    axes: {
+      axisTitle: {
+        padding: {
+          outer: 10,
+        },
+      },
+    },
+    chartMargins:
+      legendPosition === Position.Top || legendPosition === Position.Right
+        ? {
+            bottom: (theme.chartMargins?.bottom ?? 0) + 10,
+          }
+        : {
+            right: (theme.chartMargins?.right ?? 0) + 10,
+          },
+  };
+
+  const headerValueFormatter: TickFormatter<any> | undefined = xAxis.ticks?.formatter
+    ? (value) => fillEmptyValue(xAxis.ticks?.formatter?.(value)) ?? ''
+    : undefined;
+  const headerFormatter =
+    isTimeChart && xDomain && adjustedXDomain
+      ? renderEndzoneTooltip(
+          xDomain.minInterval,
+          'min' in xDomain ? xDomain.min : undefined,
+          'max' in xDomain ? xDomain.max : undefined,
+          headerValueFormatter,
+          !tooltip.detailedTooltip
+        )
+      : headerValueFormatter &&
+        (tooltip.detailedTooltip ? undefined : ({ value }: any) => headerValueFormatter(value));
+
+  const tooltipProps: TooltipProps = tooltip.detailedTooltip
+    ? {
+        ...tooltip,
+        customTooltip: tooltip.detailedTooltip(headerFormatter),
+        headerFormatter: undefined,
+      }
+    : { ...tooltip, headerFormatter };
+
+  return (
+    <Settings
+      debugState={window._echDebugStateFlag ?? false}
+      xDomain={adjustedXDomain}
+      rotation={rotation}
+      theme={[themeOverrides, theme]}
+      baseTheme={baseTheme}
+      showLegend={showLegend}
+      legendPosition={legendPosition}
+      allowBrushingLastHistogramBucket={isTimeChart}
+      roundHistogramBrushValues={enableHistogramMode && !isTimeChart}
+      legendColorPicker={legendColorPicker}
+      onElementClick={onElementClick}
+      onBrushEnd={onBrushEnd}
+      onRenderChange={onRenderChange}
+      legendAction={legendAction}
+      tooltip={tooltipProps}
+      orderOrdinalBinsBy={
+        orderBucketsBySum
+          ? {
+              direction: Direction.Descending,
+            }
+          : undefined
+      }
+    />
+  );
+};
diff --git a/src/plugins/vis_type_xy/public/components/xy_threshold_line.tsx b/src/plugins/vis_type_xy/public/components/xy_threshold_line.tsx
new file mode 100644
index 00000000000000..46b0a009807a20
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/xy_threshold_line.tsx
@@ -0,0 +1,58 @@
+/*
+ * 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, { FC } from 'react';
+
+import { AnnotationDomainTypes, LineAnnotation } from '@elastic/charts';
+
+import { ThresholdLineConfig } from '../types';
+
+type XYThresholdLineProps = ThresholdLineConfig & {
+  groupId?: string;
+};
+
+export const XYThresholdLine: FC<XYThresholdLineProps> = ({
+  show,
+  value: dataValue,
+  color,
+  width,
+  groupId,
+  dash,
+}) => {
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <LineAnnotation
+      id="__threshold_line__"
+      groupId={groupId}
+      domainType={AnnotationDomainTypes.YDomain}
+      dataValues={[{ dataValue }]}
+      style={{
+        line: {
+          stroke: color,
+          strokeWidth: width ?? 2,
+          opacity: 1,
+          dash,
+        },
+      }}
+    />
+  );
+};
diff --git a/src/plugins/vis_type_xy/public/config/get_agg_id.ts b/src/plugins/vis_type_xy/public/config/get_agg_id.ts
new file mode 100644
index 00000000000000..7923145d83013d
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/config/get_agg_id.ts
@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+/**
+ * Get agg id from accessor
+ *
+ * For now this is determined by the esaggs column name. Could be cleaned up in the future.
+ */
+export const getAggId = (accessor: string) => (accessor ?? '').split('-').pop() ?? '';
diff --git a/src/plugins/vis_type_xy/public/config/get_aspects.ts b/src/plugins/vis_type_xy/public/config/get_aspects.ts
new file mode 100644
index 00000000000000..73096de0a5d518
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/config/get_aspects.ts
@@ -0,0 +1,95 @@
+/*
+ * 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 { compact } from 'lodash';
+
+import { i18n } from '@kbn/i18n';
+
+import { DatatableColumn } from '../../../expressions/public';
+
+import { Aspect, Dimension, Aspects, Dimensions } from '../types';
+import { getFormatService } from '../services';
+import { getAggId } from './get_agg_id';
+
+export function getEmptyAspect(): Aspect {
+  return {
+    accessor: null,
+    aggId: null,
+    aggType: null,
+    title: i18n.translate('visTypeXy.aggResponse.allDocsTitle', {
+      defaultMessage: 'All docs',
+    }),
+    params: {
+      defaultValue: '_all',
+    },
+  };
+}
+export function getAspects(columns: DatatableColumn[], { x, y, z, series }: Dimensions): Aspects {
+  const seriesDimensions = Array.isArray(series) || series === undefined ? series : [series];
+
+  return {
+    x: getAspectsFromDimension(columns, x) ?? getEmptyAspect(),
+    y: getAspectsFromDimension(columns, y) ?? [],
+    z: z && z?.length > 0 ? getAspectsFromDimension(columns, z[0]) : undefined,
+    series: getAspectsFromDimension(columns, seriesDimensions),
+  };
+}
+
+function getAspectsFromDimension(
+  columns: DatatableColumn[],
+  dimension?: Dimension | null
+): Aspect | undefined;
+function getAspectsFromDimension(
+  columns: DatatableColumn[],
+  dimensions?: Dimension[] | null
+): Aspect[] | undefined;
+function getAspectsFromDimension(
+  columns: DatatableColumn[],
+  dimensions?: Dimension | Dimension[] | null
+): Aspect[] | Aspect | undefined {
+  if (!dimensions) {
+    return;
+  }
+
+  if (Array.isArray(dimensions)) {
+    return compact(
+      dimensions.map((d) => {
+        const column = d && columns[d.accessor];
+        return column && getAspect(column, d);
+      })
+    );
+  }
+
+  const column = columns[dimensions.accessor];
+  return column && getAspect(column, dimensions);
+}
+
+const getAspect = (
+  { id: accessor, name: title }: DatatableColumn,
+  { accessor: column, format, params, aggType }: Dimension
+): Aspect => ({
+  accessor,
+  column,
+  title,
+  format,
+  aggType,
+  aggId: getAggId(accessor),
+  formatter: (value: any) => getFormatService().deserialize(format).convert(value),
+  params,
+});
diff --git a/src/plugins/vis_type_xy/public/config/get_axis.ts b/src/plugins/vis_type_xy/public/config/get_axis.ts
new file mode 100644
index 00000000000000..43a9e25e0e2870
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/config/get_axis.ts
@@ -0,0 +1,198 @@
+/*
+ * 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 { identity, isNil } from 'lodash';
+
+import { AxisSpec, TickFormatter, YDomainRange, ScaleType as ECScaleType } from '@elastic/charts';
+
+import { LabelRotation } from '../../../charts/public';
+import { BUCKET_TYPES } from '../../../data/public';
+
+import {
+  Aspect,
+  CategoryAxis,
+  Grid,
+  AxisConfig,
+  TickOptions,
+  ScaleConfig,
+  Scale,
+  ScaleType,
+  AxisType,
+  XScaleType,
+  YScaleType,
+  SeriesParam,
+} from '../types';
+import { fillEmptyValue } from '../utils/get_series_name_fn';
+
+export function getAxis<S extends XScaleType | YScaleType>(
+  { type, title: axisTitle, labels, scale: axisScale, ...axis }: CategoryAxis,
+  { categoryLines, valueAxis }: Grid,
+  { params, format, formatter, title: fallbackTitle = '', aggType }: Aspect,
+  seriesParams: SeriesParam[],
+  isDateHistogram = false
+): AxisConfig<S> {
+  const isCategoryAxis = type === AxisType.Category;
+  // Hide unassigned axis, not supported in elastic charts
+  // TODO: refactor when disallowing unassigned axes
+  // https://github.com/elastic/kibana/issues/82752
+  const show =
+    (isCategoryAxis || seriesParams.some(({ valueAxis: id }) => id === axis.id)) && axis.show;
+  const groupId = axis.id;
+
+  const grid = isCategoryAxis
+    ? {
+        show: categoryLines,
+      }
+    : {
+        show: valueAxis === axis.id,
+      };
+  // Date range formatter applied on xAccessor
+  const tickFormatter =
+    aggType === BUCKET_TYPES.DATE_RANGE || aggType === BUCKET_TYPES.RANGE ? identity : formatter;
+  const ticks: TickOptions = {
+    formatter: tickFormatter,
+    labelFormatter: getLabelFormatter(labels.truncate, tickFormatter),
+    show: labels.show,
+    rotation: labels.rotate,
+    showOverlappingLabels: !labels.filter,
+    showDuplicates: !labels.filter,
+  };
+  const scale = getScale<S>(axisScale, params, format, isCategoryAxis);
+  const title = axisTitle.text || fallbackTitle;
+  const fallbackRotation =
+    isCategoryAxis && isDateHistogram ? LabelRotation.Horizontal : LabelRotation.Vertical;
+
+  return {
+    ...axis,
+    show,
+    groupId,
+    title,
+    ticks,
+    grid,
+    scale,
+    style: getAxisStyle(ticks, title, fallbackRotation),
+    domain: getAxisDomain(scale, isCategoryAxis),
+    integersOnly: aggType === 'count',
+  };
+}
+
+function getLabelFormatter(
+  truncate?: number | null,
+  formatter?: TickFormatter
+): TickFormatter | undefined {
+  if (truncate === null || truncate === undefined) {
+    return formatter;
+  }
+
+  return (value: any) => {
+    const formattedStringValue = `${formatter ? formatter(value) : value}`;
+    const finalValue = fillEmptyValue(formattedStringValue);
+
+    if (finalValue.length > truncate) {
+      return `${finalValue.slice(0, truncate)}...`;
+    }
+
+    return finalValue;
+  };
+}
+
+function getScaleType(
+  scale?: Scale,
+  isNumber?: boolean,
+  isTime = false,
+  isHistogram = false
+): ECScaleType | undefined {
+  if (isTime) return ECScaleType.Time;
+  if (isHistogram) return ECScaleType.Linear;
+
+  if (!isNumber) {
+    return ECScaleType.Ordinal;
+  }
+
+  const type = scale?.type;
+  if (type === ScaleType.SquareRoot) {
+    return ECScaleType.Sqrt;
+  }
+
+  return type;
+}
+
+function getScale<S extends XScaleType | YScaleType>(
+  scale: Scale,
+  params: Aspect['params'],
+  format: Aspect['format'],
+  isCategoryAxis: boolean
+): ScaleConfig<S> {
+  const type = (isCategoryAxis
+    ? getScaleType(
+        scale,
+        format?.id === 'number' || (format?.params?.id === 'number' && format?.id !== 'range'),
+        'date' in params,
+        'interval' in params
+      )
+    : getScaleType(scale, true)) as S;
+
+  return {
+    ...scale,
+    type,
+  };
+}
+
+function getAxisStyle(
+  ticks?: TickOptions,
+  title?: string,
+  rotationFallback: LabelRotation = LabelRotation.Vertical
+): AxisSpec['style'] {
+  return {
+    axisTitle: {
+      visible: (title ?? '').trim().length > 0,
+    },
+    tickLabel: {
+      visible: ticks?.show,
+      rotation: -(ticks?.rotation ?? rotationFallback),
+    },
+  };
+}
+
+function getAxisDomain<S extends XScaleType | YScaleType>(
+  scale: ScaleConfig<S>,
+  isCategoryAxis: boolean
+): YDomainRange | undefined {
+  if (isCategoryAxis || !scale) {
+    return;
+  }
+
+  const { min, max, defaultYExtents, boundsMargin } = scale;
+  const fit = defaultYExtents;
+  const padding = boundsMargin;
+
+  if (!isNil(min) && !isNil(max)) {
+    return { fit, padding, min, max };
+  }
+
+  if (!isNil(min)) {
+    return { fit, padding, min };
+  }
+
+  if (!isNil(max)) {
+    return { fit, padding, max };
+  }
+
+  return { fit, padding };
+}
diff --git a/src/plugins/vis_type_xy/public/config/get_config.ts b/src/plugins/vis_type_xy/public/config/get_config.ts
new file mode 100644
index 00000000000000..f0c5740b1307b9
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/config/get_config.ts
@@ -0,0 +1,134 @@
+/*
+ * 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 { ScaleContinuousType } from '@elastic/charts/dist/scales';
+
+import { Datatable } from '../../../expressions/public';
+import { BUCKET_TYPES } from '../../../data/public';
+
+import {
+  Aspect,
+  AxisConfig,
+  DateHistogramParams,
+  SeriesParam,
+  VisConfig,
+  VisParams,
+  XScaleType,
+  YScaleType,
+} from '../types';
+import { getThresholdLine } from './get_threshold_line';
+import { getRotation } from './get_rotation';
+import { getTooltip } from './get_tooltip';
+import { getLegend } from './get_legend';
+import { getAxis } from './get_axis';
+import { getAspects } from './get_aspects';
+import { ChartType } from '../index';
+
+export function getConfig(table: Datatable, params: VisParams): VisConfig {
+  const {
+    thresholdLine,
+    orderBucketsBySum,
+    addTimeMarker,
+    radiusRatio,
+    labels,
+    fittingFunction,
+    detailedTooltip,
+    isVislibVis,
+  } = params;
+  const aspects = getAspects(table.columns, params.dimensions);
+  const xAxis = getAxis<XScaleType>(
+    params.categoryAxes[0],
+    params.grid,
+    aspects.x,
+    params.seriesParams,
+    params.dimensions.x?.aggType === BUCKET_TYPES.DATE_HISTOGRAM
+  );
+  const tooltip = getTooltip(aspects, params);
+  const yAxes = params.valueAxes.map((a) =>
+    // uses first y aspect in array for formatting axis
+    getAxis<YScaleType>(a, params.grid, aspects.y[0], params.seriesParams)
+  );
+  const enableHistogramMode =
+    (params.dimensions.x?.aggType === BUCKET_TYPES.DATE_HISTOGRAM ||
+      params.dimensions.x?.aggType === BUCKET_TYPES.HISTOGRAM) &&
+    shouldEnableHistogramMode(params.seriesParams, aspects.y, yAxes);
+  const isTimeChart = (aspects.x.params as DateHistogramParams).date ?? false;
+
+  return {
+    // NOTE: downscale ratio to match current vislib implementation
+    markSizeRatio: radiusRatio * 0.6,
+    fittingFunction,
+    detailedTooltip,
+    orderBucketsBySum,
+    isTimeChart,
+    isVislibVis,
+    showCurrentTime: addTimeMarker && isTimeChart,
+    showValueLabel: labels.show ?? false,
+    enableHistogramMode,
+    tooltip,
+    aspects,
+    xAxis,
+    yAxes,
+    legend: getLegend(params),
+    rotation: getRotation(params.categoryAxes[0]),
+    thresholdLine: getThresholdLine(thresholdLine, yAxes, params.seriesParams),
+  };
+}
+
+/**
+ * disables histogram mode for any config that has non-stacked clustered bars
+ *
+ * @param seriesParams
+ * @param yAspects
+ * @param yAxes
+ */
+const shouldEnableHistogramMode = (
+  seriesParams: SeriesParam[],
+  yAspects: Aspect[],
+  yAxes: Array<AxisConfig<ScaleContinuousType>>
+): boolean => {
+  const bars = seriesParams.filter(({ type, data: { id: paramId } }) => {
+    return (
+      type === ChartType.Histogram && yAspects.find(({ aggId }) => aggId === paramId) !== undefined
+    );
+  });
+
+  if (bars.length === 1) {
+    return true;
+  }
+
+  const groupIds = [
+    ...bars.reduce<Set<string>>((acc, { valueAxis: groupId, mode }) => {
+      acc.add(groupId);
+      return acc;
+    }, new Set()),
+  ];
+
+  if (groupIds.length > 1) {
+    return false;
+  }
+
+  const test = bars.every(({ valueAxis: groupId, mode }) => {
+    const yAxisScale = yAxes.find(({ groupId: axisGroupId }) => axisGroupId === groupId)?.scale;
+
+    return mode === 'stacked' || yAxisScale?.mode === 'percentage';
+  });
+
+  return test;
+};
diff --git a/src/plugins/vis_type_xy/public/config/get_legend.ts b/src/plugins/vis_type_xy/public/config/get_legend.ts
new file mode 100644
index 00000000000000..a376ec3c4fb960
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/config/get_legend.ts
@@ -0,0 +1,27 @@
+/*
+ * 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 { LegendOptions, VisParams } from '../types';
+
+export function getLegend({ addLegend, legendPosition }: VisParams): LegendOptions {
+  return {
+    show: addLegend,
+    position: legendPosition,
+  };
+}
diff --git a/test/functional/apps/getting_started/index.js b/src/plugins/vis_type_xy/public/config/get_rotation.ts
similarity index 66%
rename from test/functional/apps/getting_started/index.js
rename to src/plugins/vis_type_xy/public/config/get_rotation.ts
index 399d3fe87484b3..3c1e9a8f9130a1 100644
--- a/test/functional/apps/getting_started/index.js
+++ b/src/plugins/vis_type_xy/public/config/get_rotation.ts
@@ -17,16 +17,14 @@
  * under the License.
  */
 
-export default function ({ getService, loadTestFile }) {
-  const browser = getService('browser');
+import { Rotation } from '@elastic/charts';
 
-  describe('Getting Started ', function () {
-    this.tags(['ciGroup6']);
+import { CategoryAxis } from '../types';
 
-    before(async function () {
-      await browser.setWindowSize(1200, 800);
-    });
-    // https://www.elastic.co/guide/en/kibana/current/tutorial-load-dataset.html
-    loadTestFile(require.resolve('./_shakespeare'));
-  });
+export function getRotation({ position }: CategoryAxis): Rotation {
+  if (position === 'left' || position === 'right') {
+    return 90;
+  }
+
+  return 0;
 }
diff --git a/src/plugins/vis_type_xy/public/config/get_threshold_line.ts b/src/plugins/vis_type_xy/public/config/get_threshold_line.ts
new file mode 100644
index 00000000000000..861769f8290740
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/config/get_threshold_line.ts
@@ -0,0 +1,54 @@
+/*
+ * 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 {
+  ThresholdLineConfig,
+  ThresholdLine,
+  ThresholdLineStyle,
+  AxisConfig,
+  SeriesParam,
+  YScaleType,
+} from '../types';
+
+export function getThresholdLine(
+  { style, ...rest }: ThresholdLine,
+  yAxes: Array<AxisConfig<YScaleType>>,
+  seriesParams: SeriesParam[]
+): ThresholdLineConfig {
+  const groupId = yAxes.find(({ id }) => seriesParams.some(({ valueAxis }) => id === valueAxis))
+    ?.groupId;
+
+  return {
+    ...rest,
+    dash: getDash(style),
+    groupId,
+  };
+}
+
+function getDash(style: ThresholdLineStyle): number[] | undefined {
+  switch (style) {
+    case ThresholdLineStyle.Dashed:
+      return [10, 5];
+    case ThresholdLineStyle.DotDashed:
+      return [20, 5, 5, 5];
+    case ThresholdLineStyle.Full:
+    default:
+      return;
+  }
+}
diff --git a/src/plugins/vis_type_xy/public/config/get_tooltip.ts b/src/plugins/vis_type_xy/public/config/get_tooltip.ts
new file mode 100644
index 00000000000000..87146eeca9155e
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/config/get_tooltip.ts
@@ -0,0 +1,33 @@
+/*
+ * 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 { TooltipType } from '@elastic/charts';
+
+import { Aspects, VisParams, TooltipConfig } from '../types';
+import { getDetailedTooltip } from '../components/detailed_tooltip';
+
+export function getTooltip(
+  aspects: Aspects,
+  { addTooltip, detailedTooltip }: VisParams
+): TooltipConfig {
+  return {
+    type: addTooltip ? TooltipType.VerticalCursor : TooltipType.None,
+    detailedTooltip: detailedTooltip ? getDetailedTooltip(aspects) : undefined,
+  };
+}
diff --git a/src/plugins/vis_type_xy/public/config/index.ts b/src/plugins/vis_type_xy/public/config/index.ts
new file mode 100644
index 00000000000000..2b0e32f726a6c5
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/config/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 { getConfig } from './get_config';
+export { getAggId } from './get_agg_id';
diff --git a/src/plugins/vis_type_xy/public/editor/collections.ts b/src/plugins/vis_type_xy/public/editor/collections.ts
new file mode 100644
index 00000000000000..0149bc476f5c52
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/editor/collections.ts
@@ -0,0 +1,201 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { Fit } from '@elastic/charts';
+
+import { AxisMode, ChartMode, InterpolationMode, ThresholdLineStyle } from '../types';
+import { ChartType } from '../../common';
+import { LabelRotation } from '../../../charts/public';
+import { getScaleTypes } from './scale_types';
+import { getPositions } from './positions';
+
+export { getScaleTypes, getPositions };
+
+export const getChartTypes = () => [
+  {
+    text: i18n.translate('visTypeXy.chartTypes.lineText', {
+      defaultMessage: 'Line',
+    }),
+    value: ChartType.Line,
+  },
+  {
+    text: i18n.translate('visTypeXy.chartTypes.areaText', {
+      defaultMessage: 'Area',
+    }),
+    value: ChartType.Area,
+  },
+  {
+    text: i18n.translate('visTypeXy.chartTypes.barText', {
+      defaultMessage: 'Bar',
+    }),
+    value: ChartType.Histogram,
+  },
+];
+
+export const getChartModes = () => [
+  {
+    text: i18n.translate('visTypeXy.chartModes.normalText', {
+      defaultMessage: 'Normal',
+    }),
+    value: ChartMode.Normal,
+  },
+  {
+    text: i18n.translate('visTypeXy.chartModes.stackedText', {
+      defaultMessage: 'Stacked',
+    }),
+    value: ChartMode.Stacked,
+  },
+];
+
+export const getInterpolationModes = () => [
+  {
+    text: i18n.translate('visTypeXy.interpolationModes.straightText', {
+      defaultMessage: 'Straight',
+    }),
+    value: InterpolationMode.Linear,
+  },
+  {
+    text: i18n.translate('visTypeXy.interpolationModes.smoothedText', {
+      defaultMessage: 'Smoothed',
+    }),
+    value: InterpolationMode.Cardinal,
+  },
+  {
+    text: i18n.translate('visTypeXy.interpolationModes.steppedText', {
+      defaultMessage: 'Stepped',
+    }),
+    value: InterpolationMode.StepAfter,
+  },
+];
+
+export const getAxisModes = () => [
+  {
+    text: i18n.translate('visTypeXy.axisModes.normalText', {
+      defaultMessage: 'Normal',
+    }),
+    value: AxisMode.Normal,
+  },
+  {
+    text: i18n.translate('visTypeXy.axisModes.percentageText', {
+      defaultMessage: 'Percentage',
+    }),
+    value: AxisMode.Percentage,
+  },
+  {
+    text: i18n.translate('visTypeXy.axisModes.wiggleText', {
+      defaultMessage: 'Wiggle',
+    }),
+    value: AxisMode.Wiggle,
+  },
+  {
+    text: i18n.translate('visTypeXy.axisModes.silhouetteText', {
+      defaultMessage: 'Silhouette',
+    }),
+    value: AxisMode.Silhouette,
+  },
+];
+
+export const getThresholdLineStyles = () => [
+  {
+    value: ThresholdLineStyle.Full,
+    text: i18n.translate('visTypeXy.thresholdLine.style.fullText', {
+      defaultMessage: 'Full',
+    }),
+  },
+  {
+    value: ThresholdLineStyle.Dashed,
+    text: i18n.translate('visTypeXy.thresholdLine.style.dashedText', {
+      defaultMessage: 'Dashed',
+    }),
+  },
+  {
+    value: ThresholdLineStyle.DotDashed,
+    text: i18n.translate('visTypeXy.thresholdLine.style.dotdashedText', {
+      defaultMessage: 'Dot-dashed',
+    }),
+  },
+];
+
+export const getRotateOptions = () => [
+  {
+    text: i18n.translate('visTypeXy.categoryAxis.rotate.horizontalText', {
+      defaultMessage: 'Horizontal',
+    }),
+    value: LabelRotation.Horizontal,
+  },
+  {
+    text: i18n.translate('visTypeXy.categoryAxis.rotate.verticalText', {
+      defaultMessage: 'Vertical',
+    }),
+    value: LabelRotation.Vertical,
+  },
+  {
+    text: i18n.translate('visTypeXy.categoryAxis.rotate.angledText', {
+      defaultMessage: 'Angled',
+    }),
+    value: LabelRotation.Angled,
+  },
+];
+
+export const getFittingFunctions = () =>
+  [
+    {
+      value: Fit.None,
+      text: i18n.translate('visTypeXy.fittingFunctionsTitle.none', {
+        defaultMessage: 'Hide (Do not fill gaps)',
+      }),
+    },
+    {
+      value: Fit.Zero,
+      text: i18n.translate('visTypeXy.fittingFunctionsTitle.zero', {
+        defaultMessage: 'Zero (Fill gaps with zeros)',
+      }),
+    },
+    {
+      value: Fit.Linear,
+      text: i18n.translate('visTypeXy.fittingFunctionsTitle.linear', {
+        defaultMessage: 'Linear (Fill gaps with a line)',
+      }),
+    },
+    {
+      value: Fit.Carry,
+      text: i18n.translate('visTypeXy.fittingFunctionsTitle.carry', {
+        defaultMessage: 'Last (Fill gaps with the last value)',
+      }),
+    },
+    {
+      value: Fit.Lookahead,
+      text: i18n.translate('visTypeXy.fittingFunctionsTitle.lookahead', {
+        defaultMessage: 'Next (Fill gaps with the next value)',
+      }),
+    },
+  ] as const;
+
+export const getConfigCollections = () => ({
+  legendPositions: getPositions(),
+  positions: getPositions(),
+  chartTypes: getChartTypes(),
+  axisModes: getAxisModes(),
+  scaleTypes: getScaleTypes(),
+  chartModes: getChartModes(),
+  interpolationModes: getInterpolationModes(),
+  thresholdLineStyles: getThresholdLineStyles(),
+  fittingFunctions: getFittingFunctions(),
+});
diff --git a/src/plugins/vis_type_vislib/public/utils/common_config.tsx b/src/plugins/vis_type_xy/public/editor/common_config.tsx
similarity index 59%
rename from src/plugins/vis_type_vislib/public/utils/common_config.tsx
rename to src/plugins/vis_type_xy/public/editor/common_config.tsx
index de867dc72bba7a..31d1a9d539621b 100644
--- a/src/plugins/vis_type_vislib/public/utils/common_config.tsx
+++ b/src/plugins/vis_type_xy/public/editor/common_config.tsx
@@ -20,36 +20,37 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { PointSeriesOptions, MetricsAxisOptions } from '../components/options';
-import { ValidationWrapper } from '../components/common';
-import { BasicVislibParams } from '../types';
+import { VisOptionsProps } from '../../../vis_default_editor/public';
 
-function getAreaOptionTabs() {
+import { VisParams } from '../types';
+import { MetricsAxisOptions, PointSeriesOptions } from './components/options';
+import { ValidationWrapper } from './components/common';
+
+export function getOptionTabs(showElasticChartsOptions = false) {
   return [
     {
       name: 'advanced',
-      title: i18n.translate('visTypeVislib.area.tabs.metricsAxesTitle', {
+      title: i18n.translate('visTypeXy.area.tabs.metricsAxesTitle', {
         defaultMessage: 'Metrics & axes',
       }),
-      editor: (props: VisOptionsProps<BasicVislibParams>) => (
+      editor: (props: VisOptionsProps<VisParams>) => (
         <ValidationWrapper {...props} component={MetricsAxisOptions} />
       ),
     },
     {
       name: 'options',
-      title: i18n.translate('visTypeVislib.area.tabs.panelSettingsTitle', {
+      title: i18n.translate('visTypeXy.area.tabs.panelSettingsTitle', {
         defaultMessage: 'Panel settings',
       }),
-      editor: (props: VisOptionsProps<BasicVislibParams>) => (
-        <ValidationWrapper {...props} component={PointSeriesOptions} />
+      editor: (props: VisOptionsProps<VisParams>) => (
+        <ValidationWrapper
+          {...props}
+          extraProps={{
+            showElasticChartsOptions,
+          }}
+          component={PointSeriesOptions}
+        />
       ),
     },
   ];
 }
-
-const countLabel = i18n.translate('visTypeVislib.area.countText', {
-  defaultMessage: 'Count',
-});
-
-export { getAreaOptionTabs, countLabel };
diff --git a/src/plugins/vis_type_vislib/public/components/common/index.ts b/src/plugins/vis_type_xy/public/editor/components/common/index.ts
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/common/index.ts
rename to src/plugins/vis_type_xy/public/editor/components/common/index.ts
diff --git a/src/plugins/vis_type_vislib/public/components/common/truncate_labels.tsx b/src/plugins/vis_type_xy/public/editor/components/common/truncate_labels.tsx
similarity index 96%
rename from src/plugins/vis_type_vislib/public/components/common/truncate_labels.tsx
rename to src/plugins/vis_type_xy/public/editor/components/common/truncate_labels.tsx
index 6f55f6f070d004..ae1f34376bbf84 100644
--- a/src/plugins/vis_type_vislib/public/components/common/truncate_labels.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/common/truncate_labels.tsx
@@ -33,7 +33,7 @@ function TruncateLabelsOption({ disabled, value = null, setValue }: TruncateLabe
 
   return (
     <EuiFormRow
-      label={i18n.translate('visTypeVislib.controls.truncateLabel', {
+      label={i18n.translate('visTypeXy.controls.truncateLabel', {
         defaultMessage: 'Truncate',
       })}
       fullWidth
diff --git a/src/plugins/vis_type_vislib/public/components/common/validation_wrapper.tsx b/src/plugins/vis_type_xy/public/editor/components/common/validation_wrapper.tsx
similarity index 79%
rename from src/plugins/vis_type_vislib/public/components/common/validation_wrapper.tsx
rename to src/plugins/vis_type_xy/public/editor/components/common/validation_wrapper.tsx
index 1a54132a3156e9..a063ec0821b891 100644
--- a/src/plugins/vis_type_vislib/public/components/common/validation_wrapper.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/common/validation_wrapper.tsx
@@ -19,24 +19,26 @@
 
 import React, { useEffect, useState, useCallback } from 'react';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { VisOptionsProps } from '../../../../../vis_default_editor/public';
 
-export interface ValidationVisOptionsProps<T> extends VisOptionsProps<T> {
+export interface ValidationVisOptionsProps<T, E = unknown> extends VisOptionsProps<T> {
   setMultipleValidity(paramName: string, isValid: boolean): void;
+  extraProps?: E;
 }
 
-interface ValidationWrapperProps<T> extends VisOptionsProps<T> {
-  component: React.ComponentType<ValidationVisOptionsProps<T>>;
+interface ValidationWrapperProps<T, E> extends VisOptionsProps<T> {
+  component: React.ComponentType<ValidationVisOptionsProps<T, E>>;
+  extraProps?: E;
 }
 
 interface Item {
   isValid: boolean;
 }
 
-function ValidationWrapper<T = unknown>({
+function ValidationWrapper<T = unknown, E = unknown>({
   component: Component,
   ...rest
-}: ValidationWrapperProps<T>) {
+}: ValidationWrapperProps<T, E>) {
   const [panelState, setPanelState] = useState({} as { [key: string]: Item });
   const isPanelValid = Object.values(panelState).every((item) => item.isValid);
   const { setValidity } = rest;
diff --git a/src/plugins/vis_type_vislib/public/components/index.ts b/src/plugins/vis_type_xy/public/editor/components/index.ts
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/index.ts
rename to src/plugins/vis_type_xy/public/editor/components/index.ts
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/index.tsx b/src/plugins/vis_type_xy/public/editor/components/options/index.tsx
new file mode 100644
index 00000000000000..3eba7fa3ad818f
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/editor/components/options/index.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 React, { lazy } from 'react';
+
+import { VisParams } from '../../../types';
+import { ValidationVisOptionsProps } from '../common';
+
+const PointSeriesOptionsLazy = lazy(() => import('./point_series'));
+const MetricsAxisOptionsLazy = lazy(() => import('./metrics_axes'));
+
+export const PointSeriesOptions = (
+  props: ValidationVisOptionsProps<
+    VisParams,
+    {
+      showElasticChartsOptions: boolean;
+    }
+  >
+) => <PointSeriesOptionsLazy {...props} />;
+
+export const MetricsAxisOptions = (props: ValidationVisOptionsProps<VisParams>) => (
+  <MetricsAxisOptionsLazy {...props} />
+);
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap
similarity index 94%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap
index 2b7c03084ec658..bc66c1940ac729 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`CategoryAxisPanel component should init with the default set of props 1
     <h3>
       <FormattedMessage
         defaultMessage="X-axis"
-        id="visTypeVislib.controls.pointSeries.categoryAxis.xAxisTitle"
+        id="visTypeXy.controls.pointSeries.categoryAxis.xAxisTitle"
         values={Object {}}
       />
     </h3>
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/custom_extents_options.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/custom_extents_options.test.tsx.snap
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/custom_extents_options.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/custom_extents_options.test.tsx.snap
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/index.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
similarity index 99%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
index 09e0753d592e52..c5ce09d4d78afd 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
@@ -74,7 +74,6 @@ exports[`MetricsAxisOptions component should init with the default set of props
   />
   <ValueAxesPanel
     addValueAxis={[Function]}
-    isCategoryAxisHorizontal={true}
     onValueAxisPositionChanged={[Function]}
     removeValueAxis={[Function]}
     seriesParams={
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap
similarity index 95%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap
index dea1e27d05e2e8..175ec043cdbea5 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`LabelOptions component should init with the default set of props 1`] =
     <h3>
       <FormattedMessage
         defaultMessage="Labels"
-        id="visTypeVislib.controls.pointSeries.categoryAxis.labelsTitle"
+        id="visTypeXy.controls.pointSeries.categoryAxis.labelsTitle"
         values={Object {}}
       />
     </h3>
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/line_options.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/line_options.test.tsx.snap
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/line_options.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/line_options.test.tsx.snap
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
similarity index 98%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
index ed7ae45eed3a57..594511010b7453 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`ValueAxesPanel component should init with the default set of props 1`]
         <h3>
           <FormattedMessage
             defaultMessage="Y-axes"
-            id="visTypeVislib.controls.pointSeries.valueAxes.yAxisTitle"
+            id="visTypeXy.controls.pointSeries.valueAxes.yAxisTitle"
             values={Object {}}
           />
         </h3>
@@ -120,7 +120,6 @@ exports[`ValueAxesPanel component should init with the default set of props 1`]
         }
       }
       index={0}
-      isCategoryAxisHorizontal={false}
       onValueAxisPositionChanged={[MockFunction]}
       setMultipleValidity={[MockFunction]}
       setParamByIndex={[MockFunction]}
@@ -303,7 +302,6 @@ exports[`ValueAxesPanel component should init with the default set of props 1`]
         }
       }
       index={1}
-      isCategoryAxisHorizontal={false}
       onValueAxisPositionChanged={[MockFunction]}
       setMultipleValidity={[MockFunction]}
       setParamByIndex={[MockFunction]}
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap
similarity index 96%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap
index c4142fb487b6a9..3f3ee66a859249 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap
@@ -7,22 +7,18 @@ exports[`ValueAxisOptions component should init with the default set of props 1`
     options={
       Array [
         Object {
-          "disabled": false,
           "text": "Top",
           "value": "top",
         },
         Object {
-          "disabled": true,
           "text": "Left",
           "value": "left",
         },
         Object {
-          "disabled": true,
           "text": "Right",
           "value": "right",
         },
         Object {
-          "disabled": false,
           "text": "Bottom",
           "value": "bottom",
         },
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/y_extents.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/y_extents.test.tsx.snap
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/y_extents.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/y_extents.test.tsx.snap
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.test.tsx
similarity index 93%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.test.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.test.tsx
index 44ed0d5aeddabd..3bf844618720bf 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.test.tsx
@@ -20,16 +20,16 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { CategoryAxisPanel, CategoryAxisPanelProps } from './category_axis_panel';
-import { Axis } from '../../../types';
-import { Positions } from '../../../utils/collections';
+import { CategoryAxis } from '../../../../types';
 import { LabelOptions } from './label_options';
 import { categoryAxis, vis } from './mocks';
+import { Position } from '@elastic/charts';
 
 describe('CategoryAxisPanel component', () => {
   let setCategoryAxis: jest.Mock;
   let onPositionChanged: jest.Mock;
   let defaultProps: CategoryAxisPanelProps;
-  let axis: Axis;
+  let axis: CategoryAxis;
 
   beforeEach(() => {
     setCategoryAxis = jest.fn();
@@ -60,7 +60,7 @@ describe('CategoryAxisPanel component', () => {
   });
 
   it('should call onPositionChanged when position is changed', () => {
-    const value = Positions.RIGHT;
+    const value = Position.Right;
     const comp = shallow(<CategoryAxisPanel {...defaultProps} />);
     comp.find({ paramName: 'position' }).prop('setValue')('position', value);
 
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.tsx
similarity index 78%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.tsx
index 468fb1f8c315af..a5511637475263 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.tsx
@@ -19,20 +19,21 @@
 
 import React, { useCallback } from 'react';
 
-import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
+import { Position } from '@elastic/charts';
+
+import { SelectOption, SwitchOption } from '../../../../../../charts/public';
+import { VisOptionsProps } from '../../../../../../vis_default_editor/public';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { Axis } from '../../../types';
-import { SelectOption, SwitchOption } from '../../../../../charts/public';
 import { LabelOptions, SetAxisLabel } from './label_options';
-import { Positions } from '../../../utils/collections';
+import { CategoryAxis } from '../../../../types';
 
 export interface CategoryAxisPanelProps {
-  axis: Axis;
-  onPositionChanged: (position: Positions) => void;
-  setCategoryAxis: (value: Axis) => void;
+  axis: CategoryAxis;
+  onPositionChanged: (position: Position) => void;
+  setCategoryAxis: (value: CategoryAxis) => void;
   vis: VisOptionsProps['vis'];
 }
 
@@ -43,7 +44,7 @@ function CategoryAxisPanel({
   setCategoryAxis,
 }: CategoryAxisPanelProps) {
   const setAxis = useCallback(
-    <T extends keyof Axis>(paramName: T, value: Axis[T]) => {
+    <T extends keyof CategoryAxis>(paramName: T, value: CategoryAxis[T]) => {
       const updatedAxis = {
         ...axis,
         [paramName]: value,
@@ -54,7 +55,7 @@ function CategoryAxisPanel({
   );
 
   const setPosition = useCallback(
-    (paramName: 'position', value: Axis['position']) => {
+    (paramName: 'position', value: CategoryAxis['position']) => {
       setAxis(paramName, value);
       onPositionChanged(value);
     },
@@ -77,7 +78,7 @@ function CategoryAxisPanel({
       <EuiTitle size="xs">
         <h3>
           <FormattedMessage
-            id="visTypeVislib.controls.pointSeries.categoryAxis.xAxisTitle"
+            id="visTypeXy.controls.pointSeries.categoryAxis.xAxisTitle"
             defaultMessage="X-axis"
           />
         </h3>
@@ -85,7 +86,7 @@ function CategoryAxisPanel({
       <EuiSpacer size="s" />
 
       <SelectOption
-        label={i18n.translate('visTypeVislib.controls.pointSeries.categoryAxis.positionLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.categoryAxis.positionLabel', {
           defaultMessage: 'Position',
         })}
         options={vis.type.editorConfig.collections.positions}
@@ -96,7 +97,7 @@ function CategoryAxisPanel({
       />
 
       <SwitchOption
-        label={i18n.translate('visTypeVislib.controls.pointSeries.categoryAxis.showLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.categoryAxis.showLabel', {
           defaultMessage: 'Show axis lines and labels',
         })}
         paramName="show"
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/chart_options.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx
similarity index 92%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/chart_options.test.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx
index e2d4a0db9f1f9c..832b19b9575d51 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/chart_options.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx
@@ -19,11 +19,12 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
+
 import { ChartOptions, ChartOptionsParams } from './chart_options';
-import { SeriesParam } from '../../../types';
+import { SeriesParam, ChartMode } from '../../../../types';
 import { LineOptions } from './line_options';
-import { ChartTypes, ChartModes } from '../../../utils/collections';
 import { valueAxis, seriesParam, vis } from './mocks';
+import { ChartType } from '../../../../../common';
 
 describe('ChartOptions component', () => {
   let setParamByIndex: jest.Mock;
@@ -53,14 +54,14 @@ describe('ChartOptions component', () => {
   });
 
   it('should show LineOptions when type is line', () => {
-    chart.type = ChartTypes.LINE;
+    chart.type = ChartType.Line;
     const comp = shallow(<ChartOptions {...defaultProps} />);
 
     expect(comp.find(LineOptions).exists()).toBeTruthy();
   });
 
   it('should show line mode when type is area', () => {
-    chart.type = ChartTypes.AREA;
+    chart.type = ChartType.Area;
     const comp = shallow(<ChartOptions {...defaultProps} />);
 
     expect(comp.find({ paramName: 'interpolate' }).exists()).toBeTruthy();
@@ -78,8 +79,8 @@ describe('ChartOptions component', () => {
   it('should call setParamByIndex when mode is changed', () => {
     const comp = shallow(<ChartOptions {...defaultProps} />);
     const paramName = 'mode';
-    comp.find({ paramName }).prop('setValue')(paramName, ChartModes.NORMAL);
+    comp.find({ paramName }).prop('setValue')(paramName, ChartMode.Normal);
 
-    expect(setParamByIndex).toBeCalledWith('seriesParams', 0, paramName, ChartModes.NORMAL);
+    expect(setParamByIndex).toBeCalledWith('seriesParams', 0, paramName, ChartMode.Normal);
   });
 });
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/chart_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx
similarity index 80%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/chart_options.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx
index 623a8d1f348e93..c379fa30b49b85 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/chart_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx
@@ -22,12 +22,13 @@ import React, { useMemo, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
-import { Vis } from '../../../../../visualizations/public';
-import { SeriesParam, ValueAxis } from '../../../types';
-import { ChartTypes } from '../../../utils/collections';
-import { SelectOption } from '../../../../../charts/public';
+import { Vis } from '../../../../../../visualizations/public';
+import { SelectOption } from '../../../../../../charts/public';
+
+import { SeriesParam, ValueAxis } from '../../../../types';
 import { LineOptions } from './line_options';
 import { SetParamByIndex, ChangeValueAxis } from '.';
+import { ChartType } from '../../../../../common';
 
 export type SetChart = <T extends keyof SeriesParam>(paramName: T, value: SeriesParam[T]) => void;
 
@@ -69,7 +70,7 @@ function ChartOptions({
         value: id,
       })),
       {
-        text: i18n.translate('visTypeVislib.controls.pointSeries.series.newAxisLabel', {
+        text: i18n.translate('visTypeXy.controls.pointSeries.series.newAxisLabel', {
           defaultMessage: 'New axis…',
         }),
         value: 'new',
@@ -82,7 +83,7 @@ function ChartOptions({
     <>
       <SelectOption
         id={`seriesValueAxis${index}`}
-        label={i18n.translate('visTypeVislib.controls.pointSeries.series.valueAxisLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.series.valueAxisLabel', {
           defaultMessage: 'Value axis',
         })}
         options={valueAxesOptions}
@@ -97,7 +98,7 @@ function ChartOptions({
         <EuiFlexItem>
           <SelectOption
             id={`seriesType${index}`}
-            label={i18n.translate('visTypeVislib.controls.pointSeries.series.chartTypeLabel', {
+            label={i18n.translate('visTypeXy.controls.pointSeries.series.chartTypeLabel', {
               defaultMessage: 'Chart type',
             })}
             options={vis.type.editorConfig.collections.chartTypes}
@@ -109,7 +110,7 @@ function ChartOptions({
         <EuiFlexItem>
           <SelectOption
             id={`seriesMode${index}`}
-            label={i18n.translate('visTypeVislib.controls.pointSeries.series.modeLabel', {
+            label={i18n.translate('visTypeXy.controls.pointSeries.series.modeLabel', {
               defaultMessage: 'Mode',
             })}
             options={vis.type.editorConfig.collections.chartModes}
@@ -120,12 +121,12 @@ function ChartOptions({
         </EuiFlexItem>
       </EuiFlexGroup>
 
-      {chart.type === ChartTypes.AREA && (
+      {chart.type === ChartType.Area && (
         <>
           <EuiSpacer size="m" />
 
           <SelectOption
-            label={i18n.translate('visTypeVislib.controls.pointSeries.series.lineModeLabel', {
+            label={i18n.translate('visTypeXy.controls.pointSeries.series.lineModeLabel', {
               defaultMessage: 'Line mode',
             })}
             options={vis.type.editorConfig.collections.interpolationModes}
@@ -136,9 +137,7 @@ function ChartOptions({
         </>
       )}
 
-      {chart.type === ChartTypes.LINE && (
-        <LineOptions chart={chart} vis={vis} setChart={setChart} />
-      )}
+      {chart.type === ChartType.Line && <LineOptions chart={chart} vis={vis} setChart={setChart} />}
     </>
   );
 }
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/custom_extents_options.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/custom_extents_options.test.tsx
similarity index 99%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/custom_extents_options.test.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/custom_extents_options.test.tsx
index 4798c67928f7f6..82097271f8814f 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/custom_extents_options.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/custom_extents_options.test.tsx
@@ -19,6 +19,7 @@
 
 import React from 'react';
 import { shallow, mount } from 'enzyme';
+
 import { CustomExtentsOptions, CustomExtentsOptionsProps } from './custom_extents_options';
 import { YExtents } from './y_extents';
 import { valueAxis } from './mocks';
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/custom_extents_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/custom_extents_options.tsx
similarity index 87%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/custom_extents_options.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/custom_extents_options.tsx
index 634d6b3f0641cd..86a0c56e46942d 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/custom_extents_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/custom_extents_options.tsx
@@ -18,10 +18,12 @@
  */
 
 import React, { useCallback, useEffect } from 'react';
+
 import { i18n } from '@kbn/i18n';
 
-import { ValueAxis } from '../../../types';
-import { NumberInputOption, SwitchOption } from '../../../../../charts/public';
+import { NumberInputOption, SwitchOption } from '../../../../../../charts/public';
+
+import { ValueAxis } from '../../../../types';
 import { YExtents } from './y_extents';
 import { SetScale } from './value_axis_options';
 
@@ -39,7 +41,7 @@ function CustomExtentsOptions({
   setValueAxisScale,
 }: CustomExtentsOptionsProps) {
   const invalidBoundsMarginMessage = i18n.translate(
-    'visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBounds.minNeededBoundsMargin',
+    'visTypeXy.controls.pointSeries.valueAxes.scaleToDataBounds.minNeededBoundsMargin',
     { defaultMessage: 'Bounds margin must be greater than or equal to 0.' }
   );
 
@@ -84,12 +86,9 @@ function CustomExtentsOptions({
   return (
     <>
       <SwitchOption
-        label={i18n.translate(
-          'visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBoundsLabel',
-          {
-            defaultMessage: 'Scale to data bounds',
-          }
-        )}
+        label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.scaleToDataBoundsLabel', {
+          defaultMessage: 'Scale to data bounds',
+        })}
         paramName="defaultYExtents"
         value={axisScale.defaultYExtents}
         setValue={onDefaultYExtentsChange}
@@ -101,7 +100,7 @@ function CustomExtentsOptions({
             error={!isBoundsMarginValid && invalidBoundsMarginMessage}
             isInvalid={!isBoundsMarginValid}
             label={i18n.translate(
-              'visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBounds.boundsMargin',
+              'visTypeXy.controls.pointSeries.valueAxes.scaleToDataBounds.boundsMargin',
               {
                 defaultMessage: 'Bounds margin',
               }
@@ -117,7 +116,7 @@ function CustomExtentsOptions({
 
       <SwitchOption
         data-test-subj="yAxisSetYExtents"
-        label={i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.setAxisExtentsLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.setAxisExtentsLabel', {
           defaultMessage: 'Set axis extents',
         })}
         paramName="setYExtents"
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.test.tsx
new file mode 100644
index 00000000000000..a6b6e8b0964033
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.test.tsx
@@ -0,0 +1,476 @@
+/*
+ * 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 { mount, shallow } from 'enzyme';
+
+import { Position } from '@elastic/charts';
+
+import { IAggConfig, IAggType } from 'src/plugins/data/public';
+
+import { ChartType } from '../../../../../common';
+import { VisParams, SeriesParam, ValueAxis } from '../../../../types';
+import MetricsAxisOptions from './index';
+import { ValidationVisOptionsProps } from '../../common';
+import { ValueAxesPanel } from './value_axes_panel';
+import { CategoryAxisPanel } from './category_axis_panel';
+import { defaultValueAxisId, valueAxis, seriesParam, categoryAxis } from './mocks';
+import { mapPosition, mapPositionOpposite } from './utils';
+
+jest.mock('./series_panel', () => ({
+  SeriesPanel: () => 'SeriesPanel',
+}));
+jest.mock('./category_axis_panel', () => ({
+  CategoryAxisPanel: () => 'CategoryAxisPanel',
+}));
+jest.mock('./value_axes_panel', () => ({
+  ValueAxesPanel: () => 'ValueAxesPanel',
+}));
+
+const SERIES_PARAMS = 'seriesParams';
+const VALUE_AXES = 'valueAxes';
+
+const aggCount: IAggConfig = {
+  id: '1',
+  type: { name: 'count' },
+  makeLabel: () => 'Count',
+} as IAggConfig;
+
+const aggAverage: IAggConfig = {
+  id: '2',
+  type: { name: 'average' } as IAggType,
+  makeLabel: () => 'Average',
+} as IAggConfig;
+
+const createAggs = (aggs: any[]) => ({
+  aggs,
+  bySchemaName: () => aggs,
+});
+
+describe('MetricsAxisOptions component', () => {
+  let setValue: jest.Mock;
+  let defaultProps: ValidationVisOptionsProps<VisParams>;
+  let axis: ValueAxis;
+  let axisRight: ValueAxis;
+  let chart: SeriesParam;
+
+  beforeEach(() => {
+    setValue = jest.fn();
+
+    axis = {
+      ...valueAxis,
+      name: 'LeftAxis-1',
+      position: Position.Left,
+    };
+    axisRight = {
+      ...valueAxis,
+      id: 'ValueAxis-2',
+      name: 'RightAxis-1',
+      position: Position.Right,
+    };
+    chart = {
+      ...seriesParam,
+      type: ChartType.Area,
+    };
+
+    defaultProps = {
+      aggs: createAggs([aggCount]),
+      isTabSelected: true,
+      vis: {
+        type: {
+          type: ChartType.Area,
+          schemas: { metrics: [{ name: 'metric' }] },
+        },
+        setState: jest.fn(),
+        serialize: jest.fn(),
+      },
+      stateParams: {
+        valueAxes: [axis],
+        seriesParams: [chart],
+        categoryAxes: [categoryAxis],
+        grid: {
+          valueAxis: defaultValueAxisId,
+        },
+      },
+      setValue,
+    } as any;
+  });
+
+  it('should init with the default set of props', () => {
+    const component = shallow(<MetricsAxisOptions {...defaultProps} />);
+
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('useEffect', () => {
+    it('should update series when new agg is added', () => {
+      const component = mount(<MetricsAxisOptions {...defaultProps} />);
+      component.setProps({
+        aggs: createAggs([aggCount, aggAverage]),
+      });
+
+      const updatedSeries = [chart, { ...chart, data: { id: '2', label: aggAverage.makeLabel() } }];
+      expect(setValue).toHaveBeenLastCalledWith(SERIES_PARAMS, updatedSeries);
+    });
+
+    it('should update series when new agg label is changed', () => {
+      const component = mount(<MetricsAxisOptions {...defaultProps} />);
+      const agg = { id: aggCount.id, makeLabel: () => 'New label' };
+      component.setProps({
+        aggs: createAggs([agg]),
+      });
+
+      const updatedSeries = [{ ...chart, data: { id: agg.id, label: agg.makeLabel() } }];
+      expect(setValue).toHaveBeenCalledWith(SERIES_PARAMS, updatedSeries);
+    });
+  });
+
+  describe('updateAxisTitle', () => {
+    it('should not update the value axis title if custom title was set', () => {
+      defaultProps.stateParams.valueAxes[0].title.text = 'Custom title';
+      const component = mount(<MetricsAxisOptions {...defaultProps} />);
+      const newAgg = {
+        ...aggCount,
+        makeLabel: () => 'Custom label',
+      };
+      component.setProps({
+        aggs: createAggs([newAgg]),
+      });
+      const updatedValues = [{ ...axis, title: { text: newAgg.makeLabel() } }];
+      expect(setValue).not.toHaveBeenCalledWith(VALUE_AXES, updatedValues);
+    });
+
+    it('should set the custom title to match the value axis label when only one agg exists for that axis', () => {
+      const component = mount(<MetricsAxisOptions {...defaultProps} />);
+      const agg = {
+        id: aggCount.id,
+        params: { customLabel: 'Custom label' },
+        makeLabel: () => 'Custom label',
+      };
+      component.setProps({
+        aggs: createAggs([agg]),
+      });
+
+      const updatedSeriesParams = [{ ...chart, data: { ...chart.data, label: agg.makeLabel() } }];
+      const updatedValues = [{ ...axis, title: { text: agg.makeLabel() } }];
+
+      expect(setValue).toHaveBeenCalledTimes(5);
+      expect(setValue).toHaveBeenNthCalledWith(3, SERIES_PARAMS, updatedSeriesParams);
+      expect(setValue).toHaveBeenNthCalledWith(5, SERIES_PARAMS, updatedSeriesParams);
+      expect(setValue).toHaveBeenNthCalledWith(4, VALUE_AXES, updatedValues);
+    });
+
+    it('should not set the custom title to match the value axis label when more than one agg exists for that axis', () => {
+      const component = mount(<MetricsAxisOptions {...defaultProps} />);
+      const agg = { id: aggCount.id, makeLabel: () => 'Custom label' };
+      component.setProps({
+        aggs: createAggs([agg, aggAverage]),
+        stateParams: {
+          ...defaultProps.stateParams,
+          seriesParams: [chart, chart],
+        },
+      });
+
+      expect(setValue).not.toHaveBeenCalledWith(VALUE_AXES);
+    });
+
+    it('should not overwrite the custom title with the value axis label if the custom title has been changed', () => {
+      defaultProps.stateParams.valueAxes[0].title.text = 'Custom title';
+      const component = mount(<MetricsAxisOptions {...defaultProps} />);
+      const agg = {
+        id: aggCount.id,
+        params: { customLabel: 'Custom label' },
+        makeLabel: () => 'Custom label',
+      };
+      component.setProps({
+        aggs: createAggs([agg]),
+      });
+
+      expect(setValue).not.toHaveBeenCalledWith(VALUE_AXES);
+    });
+  });
+
+  it('should add value axis', () => {
+    const component = shallow(<MetricsAxisOptions {...defaultProps} />);
+    component.find(ValueAxesPanel).prop('addValueAxis')();
+
+    expect(setValue).toHaveBeenCalledWith(VALUE_AXES, [axis, axisRight]);
+  });
+
+  describe('removeValueAxis', () => {
+    beforeEach(() => {
+      defaultProps.stateParams.valueAxes = [axis, axisRight];
+    });
+
+    it('should remove value axis', () => {
+      const component = shallow(<MetricsAxisOptions {...defaultProps} />);
+      component.find(ValueAxesPanel).prop('removeValueAxis')(axis);
+
+      expect(setValue).toHaveBeenCalledWith(VALUE_AXES, [axisRight]);
+    });
+
+    it('should update seriesParams "valueAxis" prop', () => {
+      const updatedSeriesParam = { ...chart, valueAxis: 'ValueAxis-2' };
+      const component = shallow(<MetricsAxisOptions {...defaultProps} />);
+      component.find(ValueAxesPanel).prop('removeValueAxis')(axis);
+
+      expect(setValue).toHaveBeenCalledWith(SERIES_PARAMS, [updatedSeriesParam]);
+    });
+
+    it('should reset grid "valueAxis" prop', () => {
+      const updatedGrid = { valueAxis: undefined };
+      defaultProps.stateParams.seriesParams[0].valueAxis = 'ValueAxis-2';
+      const component = shallow(<MetricsAxisOptions {...defaultProps} />);
+      component.find(ValueAxesPanel).prop('removeValueAxis')(axis);
+
+      expect(setValue).toHaveBeenCalledWith('grid', updatedGrid);
+    });
+  });
+
+  describe('onValueAxisPositionChanged', () => {
+    const getProps = (
+      valuePosition1: Position = Position.Right,
+      valuePosition2: Position = Position.Left
+    ): ValidationVisOptionsProps<VisParams> => ({
+      ...defaultProps,
+      stateParams: {
+        ...defaultProps.stateParams,
+        valueAxes: [
+          {
+            ...valueAxis,
+            id: 'ValueAxis-1',
+            position: valuePosition1,
+          },
+          {
+            ...valueAxis,
+            id: 'ValueAxis-2',
+            position: valuePosition2,
+          },
+          {
+            ...valueAxis,
+            id: 'ValueAxis-3',
+            position: valuePosition2,
+          },
+        ],
+        categoryAxes: [
+          {
+            ...categoryAxis,
+            position: mapPosition(valuePosition1),
+          },
+        ],
+      },
+    });
+
+    it('should update all value axes if another value axis changes from horizontal to vertical', () => {
+      const component = mount(<MetricsAxisOptions {...getProps()} />);
+      setValue.mockClear();
+      const onValueAxisPositionChanged = component
+        .find(ValueAxesPanel)
+        .prop('onValueAxisPositionChanged');
+      onValueAxisPositionChanged(0, Position.Bottom);
+      expect(setValue).nthCalledWith(1, 'categoryAxes', [
+        expect.objectContaining({
+          id: 'CategoryAxis-1',
+          position: Position.Right,
+        }),
+      ]);
+      expect(setValue).nthCalledWith(2, 'valueAxes', [
+        expect.objectContaining({
+          id: 'ValueAxis-1',
+          position: Position.Bottom,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-2',
+          position: Position.Top,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-3',
+          position: Position.Top,
+        }),
+      ]);
+    });
+
+    it('should update all value axes if another value axis changes from vertical to horizontal', () => {
+      const component = mount(<MetricsAxisOptions {...getProps(Position.Top, Position.Bottom)} />);
+      setValue.mockClear();
+      const onValueAxisPositionChanged = component
+        .find(ValueAxesPanel)
+        .prop('onValueAxisPositionChanged');
+      onValueAxisPositionChanged(1, Position.Left);
+      expect(setValue).nthCalledWith(1, 'categoryAxes', [
+        expect.objectContaining({
+          id: 'CategoryAxis-1',
+          position: Position.Top,
+        }),
+      ]);
+      expect(setValue).nthCalledWith(2, 'valueAxes', [
+        expect.objectContaining({
+          id: 'ValueAxis-1',
+          position: Position.Right,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-2',
+          position: Position.Left,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-3',
+          position: Position.Left,
+        }),
+      ]);
+    });
+
+    it('should update only changed value axis if value axis stays horizontal', () => {
+      const component = mount(<MetricsAxisOptions {...getProps()} />);
+      setValue.mockClear();
+      const onValueAxisPositionChanged = component
+        .find(ValueAxesPanel)
+        .prop('onValueAxisPositionChanged');
+      onValueAxisPositionChanged(0, Position.Left);
+      expect(setValue).nthCalledWith(1, 'valueAxes', [
+        expect.objectContaining({
+          id: 'ValueAxis-1',
+          position: Position.Left,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-2',
+          position: Position.Left,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-3',
+          position: Position.Left,
+        }),
+      ]);
+    });
+
+    it('should update only changed value axis if value axis stays vertical', () => {
+      const component = mount(<MetricsAxisOptions {...getProps(Position.Top, Position.Bottom)} />);
+      setValue.mockClear();
+      const onValueAxisPositionChanged = component
+        .find(ValueAxesPanel)
+        .prop('onValueAxisPositionChanged');
+      onValueAxisPositionChanged(1, Position.Top);
+      expect(setValue).nthCalledWith(1, 'valueAxes', [
+        expect.objectContaining({
+          id: 'ValueAxis-1',
+          position: Position.Top,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-2',
+          position: Position.Top,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-3',
+          position: Position.Bottom,
+        }),
+      ]);
+    });
+  });
+
+  describe('onCategoryAxisPositionChanged', () => {
+    const getProps = (
+      position: Position = Position.Bottom
+    ): ValidationVisOptionsProps<VisParams> => ({
+      ...defaultProps,
+      stateParams: {
+        ...defaultProps.stateParams,
+        valueAxes: [
+          {
+            ...valueAxis,
+            id: 'ValueAxis-1',
+            position: mapPosition(position),
+          },
+          {
+            ...valueAxis,
+            id: 'ValueAxis-2',
+            position: mapPositionOpposite(mapPosition(position)),
+          },
+          {
+            ...valueAxis,
+            id: 'ValueAxis-3',
+            position: mapPosition(position),
+          },
+        ],
+        categoryAxes: [
+          {
+            ...categoryAxis,
+            position,
+          },
+        ],
+      },
+    });
+
+    it('should update all value axes if category axis changes from horizontal to vertical', () => {
+      const component = mount(<MetricsAxisOptions {...getProps()} />);
+      setValue.mockClear();
+      const onPositionChanged = component.find(CategoryAxisPanel).prop('onPositionChanged');
+      onPositionChanged(Position.Left);
+      expect(setValue).nthCalledWith(1, 'valueAxes', [
+        expect.objectContaining({
+          id: 'ValueAxis-1',
+          position: Position.Bottom,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-2',
+          position: Position.Top,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-3',
+          position: Position.Bottom,
+        }),
+      ]);
+    });
+
+    it('should update all value axes if category axis changes from vertical to horizontal', () => {
+      const component = mount(<MetricsAxisOptions {...getProps(Position.Left)} />);
+      setValue.mockClear();
+      const onPositionChanged = component.find(CategoryAxisPanel).prop('onPositionChanged');
+      onPositionChanged(Position.Top);
+      expect(setValue).nthCalledWith(1, 'valueAxes', [
+        expect.objectContaining({
+          id: 'ValueAxis-1',
+          position: Position.Left,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-2',
+          position: Position.Right,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-3',
+          position: Position.Left,
+        }),
+      ]);
+    });
+
+    it('should not update value axes if category axis stays horizontal', () => {
+      const component = mount(<MetricsAxisOptions {...getProps()} />);
+      setValue.mockClear();
+      const onPositionChanged = component.find(CategoryAxisPanel).prop('onPositionChanged');
+      onPositionChanged(Position.Top);
+      expect(setValue).not.toBeCalled();
+    });
+
+    it('should not update value axes if category axis stays vertical', () => {
+      const component = mount(<MetricsAxisOptions {...getProps(Position.Left)} />);
+      setValue.mockClear();
+      const onPositionChanged = component.find(CategoryAxisPanel).prop('onPositionChanged');
+      onPositionChanged(Position.Right);
+      expect(setValue).not.toBeCalled();
+    });
+  });
+});
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/index.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.tsx
similarity index 83%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/index.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.tsx
index 0862c47c35cff5..9b4bf3127d45e1 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/index.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.tsx
@@ -19,10 +19,12 @@
 
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { cloneDeep, get } from 'lodash';
+
 import { EuiSpacer } from '@elastic/eui';
 
-import { IAggConfig } from 'src/plugins/data/public';
-import { BasicVislibParams, ValueAxis, SeriesParam, Axis } from '../../../types';
+import { IAggConfig } from '../../../../../../data/public';
+
+import { VisParams, ValueAxis, SeriesParam, CategoryAxis } from '../../../../types';
 import { ValidationVisOptionsProps } from '../../common';
 import { SeriesPanel } from './series_panel';
 import { CategoryAxisPanel } from './category_axis_panel';
@@ -34,6 +36,7 @@ import {
   getUpdatedAxisName,
   mapPositionOpposite,
   mapPosition,
+  mapPositionOpposingOpposite,
 } from './utils';
 
 export type SetParamByIndex = <P extends keyof ValueAxis, O extends keyof SeriesParam>(
@@ -51,11 +54,9 @@ export type ChangeValueAxis = (
 
 const VALUE_AXIS_PREFIX = 'ValueAxis-';
 
-function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>) {
+function MetricsAxisOptions(props: ValidationVisOptionsProps<VisParams>) {
   const { stateParams, setValue, aggs, vis, isTabSelected } = props;
 
-  const [isCategoryAxisHorizontal, setIsCategoryAxisHorizontal] = useState(true);
-
   const setParamByIndex: SetParamByIndex = useCallback(
     (axesName, index, paramName, value) => {
       const items = stateParams[axesName];
@@ -72,7 +73,7 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
   );
 
   const setCategoryAxis = useCallback(
-    (value: Axis) => {
+    (value: CategoryAxis) => {
       const categoryAxes = [...stateParams.categoryAxes];
       categoryAxes[0] = value;
       setValue('categoryAxes', categoryAxes);
@@ -170,33 +171,58 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
   );
 
   const onValueAxisPositionChanged = useCallback(
-    (index: number, value: ValueAxis['position']) => {
+    (index: number, axisPosition: ValueAxis['position']) => {
+      const isHorizontalAxis = isAxisHorizontal(axisPosition);
       const valueAxes = [...stateParams.valueAxes];
-      const name = getUpdatedAxisName(value, valueAxes);
+      const name = getUpdatedAxisName(axisPosition, valueAxes);
+      const [categoryAxes] = stateParams.categoryAxes;
 
-      valueAxes[index] = {
-        ...valueAxes[index],
-        name,
-        position: value,
-      };
-      setValue('valueAxes', valueAxes);
+      if (isAxisHorizontal(categoryAxes.position) === isHorizontalAxis) {
+        const updatedCategoryAxes = {
+          ...categoryAxes,
+          position: mapPosition(categoryAxes.position),
+        };
+
+        setValue('categoryAxes', [updatedCategoryAxes]);
+
+        const oldPosition = valueAxes[index].position;
+        const newValueAxes = valueAxes.map(({ position, ...axis }, i) => ({
+          ...axis,
+          position:
+            i === index
+              ? axisPosition
+              : mapPositionOpposingOpposite(position, oldPosition, axisPosition),
+        }));
+        setValue('valueAxes', newValueAxes);
+      } else {
+        valueAxes[index] = {
+          ...valueAxes[index],
+          name,
+          position: axisPosition,
+        };
+        setValue('valueAxes', valueAxes);
+      }
     },
-    [stateParams.valueAxes, setValue]
+    [stateParams.valueAxes, stateParams.categoryAxes, setValue]
   );
 
   const onCategoryAxisPositionChanged = useCallback(
-    (chartPosition: Axis['position']) => {
-      const isChartHorizontal = isAxisHorizontal(chartPosition);
-      setIsCategoryAxisHorizontal(isAxisHorizontal(chartPosition));
-
-      stateParams.valueAxes.forEach((axis, index) => {
-        if (isAxisHorizontal(axis.position) === isChartHorizontal) {
-          const position = mapPosition(axis.position);
-          onValueAxisPositionChanged(index, position);
-        }
-      });
+    (axisPosition: CategoryAxis['position']) => {
+      const isHorizontalAxis = isAxisHorizontal(axisPosition);
+
+      if (
+        stateParams.valueAxes.some(
+          ({ position }) => isAxisHorizontal(position) === isHorizontalAxis
+        )
+      ) {
+        const newValueAxes = stateParams.valueAxes.map(({ position, ...axis }) => ({
+          ...axis,
+          position: mapPosition(position),
+        }));
+        setValue('valueAxes', newValueAxes);
+      }
     },
-    [stateParams.valueAxes, onValueAxisPositionChanged]
+    [setValue, stateParams.valueAxes]
   );
 
   const addValueAxis = useCallback(() => {
@@ -305,7 +331,6 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
       <EuiSpacer size="s" />
       <ValueAxesPanel
         addValueAxis={addValueAxis}
-        isCategoryAxisHorizontal={isCategoryAxisHorizontal}
         removeValueAxis={removeValueAxis}
         onValueAxisPositionChanged={onValueAxisPositionChanged}
         setParamByIndex={setParamByIndex}
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/label_options.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/label_options.test.tsx
similarity index 99%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/label_options.test.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/label_options.test.tsx
index f500b7e58e9fdb..9c5a39e8fc3fc1 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/label_options.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/label_options.test.tsx
@@ -19,6 +19,7 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
+
 import { LabelOptions, LabelOptionsProps } from './label_options';
 import { TruncateLabelsOption } from '../../common';
 import { valueAxis } from './mocks';
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/label_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/label_options.tsx
similarity index 78%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/label_options.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/label_options.tsx
index 14e1da6ebcc701..8c5c440ad9de92 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/label_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/label_options.tsx
@@ -23,24 +23,21 @@ import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { Axis } from '../../../types';
+import { SelectOption, SwitchOption, Labels } from '../../../../../../charts/public';
+
 import { TruncateLabelsOption } from '../../common';
-import { getRotateOptions } from '../../../utils/collections';
-import { SelectOption, SwitchOption } from '../../../../../charts/public';
+import { getRotateOptions } from '../../../collections';
 
-export type SetAxisLabel = <T extends keyof Axis['labels']>(
-  paramName: T,
-  value: Axis['labels'][T]
-) => void;
+export type SetAxisLabel = <T extends keyof Labels>(paramName: T, value: Labels[T]) => void;
 export interface LabelOptionsProps {
-  axisLabels: Axis['labels'];
+  axisLabels: Labels;
   axisFilterCheckboxName: string;
   setAxisLabel: SetAxisLabel;
 }
 
 function LabelOptions({ axisLabels, axisFilterCheckboxName, setAxisLabel }: LabelOptionsProps) {
   const setAxisLabelRotate = useCallback(
-    (paramName: 'rotate', value: Axis['labels']['rotate']) => {
+    (paramName: 'rotate', value: Labels['rotate']) => {
       setAxisLabel(paramName, Number(value));
     },
     [setAxisLabel]
@@ -54,7 +51,7 @@ function LabelOptions({ axisLabels, axisFilterCheckboxName, setAxisLabel }: Labe
       <EuiTitle size="xxs">
         <h3>
           <FormattedMessage
-            id="visTypeVislib.controls.pointSeries.categoryAxis.labelsTitle"
+            id="visTypeXy.controls.pointSeries.categoryAxis.labelsTitle"
             defaultMessage="Labels"
           />
         </h3>
@@ -62,7 +59,7 @@ function LabelOptions({ axisLabels, axisFilterCheckboxName, setAxisLabel }: Labe
       <EuiSpacer size="s" />
 
       <SwitchOption
-        label={i18n.translate('visTypeVislib.controls.pointSeries.categoryAxis.showLabelsLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.categoryAxis.showLabelsLabel', {
           defaultMessage: 'Show labels',
         })}
         paramName="show"
@@ -73,7 +70,7 @@ function LabelOptions({ axisLabels, axisFilterCheckboxName, setAxisLabel }: Labe
       <SwitchOption
         data-test-subj={axisFilterCheckboxName}
         disabled={!axisLabels.show}
-        label={i18n.translate('visTypeVislib.controls.pointSeries.categoryAxis.filterLabelsLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.categoryAxis.filterLabelsLabel', {
           defaultMessage: 'Filter labels',
         })}
         paramName="filter"
@@ -87,7 +84,7 @@ function LabelOptions({ axisLabels, axisFilterCheckboxName, setAxisLabel }: Labe
         <EuiFlexItem>
           <SelectOption
             disabled={!axisLabels.show}
-            label={i18n.translate('visTypeVislib.controls.pointSeries.categoryAxis.alignLabel', {
+            label={i18n.translate('visTypeXy.controls.pointSeries.categoryAxis.alignLabel', {
               defaultMessage: 'Align',
             })}
             options={rotateOptions}
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.test.tsx
similarity index 96%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.test.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.test.tsx
index e90c96146ec2cd..7727f90f791077 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.test.tsx
@@ -19,8 +19,10 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
+
+import { NumberInputOption } from '../../../../../../charts/public';
+
 import { LineOptions, LineOptionsParams } from './line_options';
-import { NumberInputOption } from '../../../../../charts/public';
 import { seriesParam, vis } from './mocks';
 
 const LINE_WIDTH = 'lineWidth';
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.tsx
similarity index 84%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.tsx
index 4b0cce94267f12..df2735396b38d4 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.tsx
@@ -22,9 +22,10 @@ import React, { useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
-import { Vis } from '../../../../../visualizations/public';
-import { SeriesParam } from '../../../types';
-import { NumberInputOption, SelectOption, SwitchOption } from '../../../../../charts/public';
+import { Vis } from '../../../../../../visualizations/public';
+import { NumberInputOption, SelectOption, SwitchOption } from '../../../../../../charts/public';
+
+import { SeriesParam } from '../../../../types';
 import { SetChart } from './chart_options';
 
 export interface LineOptionsParams {
@@ -46,7 +47,7 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) {
       <EuiSpacer size="m" />
 
       <SwitchOption
-        label={i18n.translate('visTypeVislib.controls.pointSeries.series.showLineLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.series.showLineLabel', {
           defaultMessage: 'Show line',
         })}
         paramName="drawLinesBetweenPoints"
@@ -60,7 +61,7 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) {
         <EuiFlexItem>
           <SelectOption
             disabled={!chart.drawLinesBetweenPoints}
-            label={i18n.translate('visTypeVislib.controls.pointSeries.series.lineModeLabel', {
+            label={i18n.translate('visTypeXy.controls.pointSeries.series.lineModeLabel', {
               defaultMessage: 'Line mode',
             })}
             options={vis.type.editorConfig.collections.interpolationModes}
@@ -72,7 +73,7 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) {
         <EuiFlexItem>
           <NumberInputOption
             disabled={!chart.drawLinesBetweenPoints}
-            label={i18n.translate('visTypeVislib.controls.pointSeries.series.lineWidthLabel', {
+            label={i18n.translate('visTypeXy.controls.pointSeries.series.lineWidthLabel', {
               defaultMessage: 'Line width',
             })}
             paramName="lineWidth"
@@ -87,7 +88,7 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) {
       <EuiSpacer size="m" />
 
       <SwitchOption
-        label={i18n.translate('visTypeVislib.controls.pointSeries.series.showDotsLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.series.showDotsLabel', {
           defaultMessage: 'Show dots',
         })}
         paramName="showCircles"
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/mocks.ts b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts
similarity index 73%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/mocks.ts
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts
index 277fcf0cdbc3de..fd78036ffe74c5 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/mocks.ts
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts
@@ -17,21 +17,27 @@
  * under the License.
  */
 
-import { Vis } from '../../../../../visualizations/public';
-import { Axis, ValueAxis, SeriesParam } from '../../../types';
+import { Position } from '@elastic/charts';
+
+import { Vis } from '../../../../../../visualizations/public';
+import { Style } from '../../../../../../charts/public';
+
+import {
+  ValueAxis,
+  SeriesParam,
+  ChartMode,
+  InterpolationMode,
+  ScaleType,
+  AxisType,
+  CategoryAxis,
+} from '../../../../types';
 import {
-  ChartTypes,
-  ChartModes,
-  InterpolationModes,
-  ScaleTypes,
-  Positions,
-  AxisTypes,
   getScaleTypes,
   getAxisModes,
   getPositions,
   getInterpolationModes,
-} from '../../../utils/collections';
-import { Style } from '../../../../../charts/public';
+} from '../../../collections';
+import { ChartType } from '../../../../../common';
 
 const defaultValueAxisId = 'ValueAxis-1';
 
@@ -49,13 +55,13 @@ const axis = {
   },
 };
 
-const categoryAxis: Axis = {
+const categoryAxis: CategoryAxis = {
   ...axis,
   id: 'CategoryAxis-1',
-  type: AxisTypes.CATEGORY,
-  position: Positions.BOTTOM,
+  type: AxisType.Category,
+  position: Position.Bottom,
   scale: {
-    type: ScaleTypes.LINEAR,
+    type: ScaleType.Linear,
   },
 };
 
@@ -63,10 +69,10 @@ const valueAxis: ValueAxis = {
   ...axis,
   id: defaultValueAxisId,
   name: 'ValueAxis-1',
-  type: AxisTypes.VALUE,
-  position: Positions.LEFT,
+  type: AxisType.Value,
+  position: Position.Left,
   scale: {
-    type: ScaleTypes.LINEAR,
+    type: ScaleType.Linear,
     boundsMargin: 1,
     defaultYExtents: true,
     min: 1,
@@ -77,8 +83,8 @@ const valueAxis: ValueAxis = {
 
 const seriesParam: SeriesParam = {
   show: true,
-  type: ChartTypes.HISTOGRAM,
-  mode: ChartModes.STACKED,
+  type: ChartType.Histogram,
+  mode: ChartMode.Stacked,
   data: {
     label: 'Count',
     id: '1',
@@ -86,7 +92,7 @@ const seriesParam: SeriesParam = {
   drawLinesBetweenPoints: true,
   lineWidth: 2,
   showCircles: true,
-  interpolate: InterpolationModes.LINEAR,
+  interpolate: InterpolationMode.Linear,
   valueAxis: defaultValueAxisId,
 };
 
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/series_panel.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/series_panel.tsx
similarity index 83%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/series_panel.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/series_panel.tsx
index 27c423860972c0..8d284398c5b60e 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/series_panel.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/series_panel.tsx
@@ -23,8 +23,9 @@ import { EuiPanel, EuiTitle, EuiSpacer, EuiAccordion } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { Vis } from '../../../../../visualizations/public';
-import { ValueAxis, SeriesParam } from '../../../types';
+import { Vis } from '../../../../../../visualizations/public';
+
+import { ValueAxis, SeriesParam } from '../../../../types';
 import { ChartOptions } from './chart_options';
 import { SetParamByIndex, ChangeValueAxis } from '.';
 
@@ -42,7 +43,7 @@ function SeriesPanel({ seriesParams, ...chartProps }: SeriesPanelProps) {
       <EuiTitle size="xs">
         <h3>
           <FormattedMessage
-            id="visTypeVislib.controls.pointSeries.series.metricsTitle"
+            id="visTypeXy.controls.pointSeries.series.metricsTitle"
             defaultMessage="Metrics"
           />
         </h3>
@@ -57,13 +58,10 @@ function SeriesPanel({ seriesParams, ...chartProps }: SeriesPanelProps) {
           initialIsOpen={index === 0}
           buttonContent={chart.data.label}
           buttonContentClassName="visEditorSidebar__aggGroupAccordionButtonContent eui-textTruncate"
-          aria-label={i18n.translate(
-            'visTypeVislib.controls.pointSeries.seriesAccordionAriaLabel',
-            {
-              defaultMessage: 'Toggle {agg} options',
-              values: { agg: chart.data.label },
-            }
-          )}
+          aria-label={i18n.translate('visTypeXy.controls.pointSeries.seriesAccordionAriaLabel', {
+            defaultMessage: 'Toggle {agg} options',
+            values: { agg: chart.data.label },
+          })}
         >
           <>
             <EuiSpacer size="m" />
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/utils.ts b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/utils.ts
similarity index 53%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/utils.ts
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/utils.ts
index 708e8cf15f0296..58216ee8953cdb 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/utils.ts
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/utils.ts
@@ -16,13 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
 import { upperFirst } from 'lodash';
 
-import { BasicVislibParams, ValueAxis, SeriesParam } from '../../../types';
-import { ChartModes, ChartTypes, InterpolationModes, Positions } from '../../../utils/collections';
+import { Position } from '@elastic/charts';
+
+import { VisParams, ValueAxis, SeriesParam, ChartMode, InterpolationMode } from '../../../../types';
+import { ChartType } from '../../../../../common';
 
-const makeSerie = (
+export const makeSerie = (
   id: string,
   label: string,
   defaultValueAxis: ValueAxis['id'],
@@ -31,11 +32,11 @@ const makeSerie = (
   const data = { id, label };
   const defaultSerie = {
     show: true,
-    mode: ChartModes.NORMAL,
-    type: ChartTypes.LINE,
+    mode: ChartMode.Normal,
+    type: ChartType.Line,
     drawLinesBetweenPoints: true,
     showCircles: true,
-    interpolate: InterpolationModes.LINEAR,
+    interpolate: InterpolationMode.Linear,
     lineWidth: 2,
     valueAxis: defaultValueAxis,
     data,
@@ -43,12 +44,12 @@ const makeSerie = (
   return lastSerie ? { ...lastSerie, data } : defaultSerie;
 };
 
-const isAxisHorizontal = (position: Positions) =>
-  [Positions.TOP, Positions.BOTTOM].includes(position as any);
+export const isAxisHorizontal = (position: Position) =>
+  [Position.Top, Position.Bottom].includes(position as any);
 
 const RADIX = 10;
 
-function countNextAxisNumber(axisName: string, axisProp: 'id' | 'name' = 'id') {
+export function countNextAxisNumber(axisName: string, axisProp: 'id' | 'name' = 'id') {
   return (value: number, axis: ValueAxis) => {
     const nameLength = axisName.length;
     if (axis[axisProp].substr(0, nameLength) === axisName) {
@@ -63,9 +64,9 @@ function countNextAxisNumber(axisName: string, axisProp: 'id' | 'name' = 'id') {
 
 const AXIS_PREFIX = 'Axis-';
 
-const getUpdatedAxisName = (
+export const getUpdatedAxisName = (
   axisPosition: ValueAxis['position'],
-  valueAxes: BasicVislibParams['valueAxes']
+  valueAxes: VisParams['valueAxes']
 ) => {
   const axisName = upperFirst(axisPosition) + AXIS_PREFIX;
   const nextAxisNameNumber = valueAxes.reduce(countNextAxisNumber(axisName, 'name'), 1);
@@ -73,39 +74,56 @@ const getUpdatedAxisName = (
   return `${axisName}${nextAxisNameNumber}`;
 };
 
-function mapPositionOpposite(position: Positions) {
+/**
+ * Maps axis position to opposite position
+ * @param position
+ */
+export function mapPositionOpposite(position: Position) {
   switch (position) {
-    case Positions.BOTTOM:
-      return Positions.TOP;
-    case Positions.TOP:
-      return Positions.BOTTOM;
-    case Positions.LEFT:
-      return Positions.RIGHT;
-    case Positions.RIGHT:
-      return Positions.LEFT;
+    case Position.Bottom:
+      return Position.Top;
+    case Position.Top:
+      return Position.Bottom;
+    case Position.Left:
+      return Position.Right;
+    case Position.Right:
+      return Position.Left;
     default:
       throw new Error('Invalid legend position.');
   }
 }
 
-function mapPosition(position: Positions) {
-  switch (position) {
-    case Positions.BOTTOM:
-      return Positions.LEFT;
-    case Positions.TOP:
-      return Positions.RIGHT;
-    case Positions.LEFT:
-      return Positions.BOTTOM;
-    case Positions.RIGHT:
-      return Positions.TOP;
+/**
+ * Maps axis position to new position or opposite of new position based on old position
+ * @param position
+ * @param oldPosition
+ * @param newPosition
+ */
+export function mapPositionOpposingOpposite(
+  position: Position,
+  oldPosition: Position,
+  newPosition: Position
+) {
+  if (position === oldPosition) {
+    return newPosition;
   }
+
+  return mapPositionOpposite(newPosition);
 }
 
-export {
-  makeSerie,
-  isAxisHorizontal,
-  countNextAxisNumber,
-  getUpdatedAxisName,
-  mapPositionOpposite,
-  mapPosition,
-};
+/**
+ * Maps axis position to opposite rotation position
+ * @param position
+ */
+export function mapPosition(position: Position) {
+  switch (position) {
+    case Position.Bottom:
+      return Position.Left;
+    case Position.Top:
+      return Position.Right;
+    case Position.Left:
+      return Position.Bottom;
+    case Position.Right:
+      return Position.Top;
+  }
+}
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axes_panel.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.test.tsx
similarity index 96%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axes_panel.test.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.test.tsx
index 070433ca03f6da..f3286029db32f1 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axes_panel.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.test.tsx
@@ -19,10 +19,12 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import { ValueAxesPanel, ValueAxesPanelProps } from './value_axes_panel';
-import { ValueAxis, SeriesParam } from '../../../types';
-import { Positions } from '../../../utils/collections';
+
 import { mountWithIntl } from '@kbn/test/jest';
+import { Position } from '@elastic/charts';
+
+import { ValueAxis, SeriesParam } from '../../../../types';
+import { ValueAxesPanel, ValueAxesPanelProps } from './value_axes_panel';
 import { valueAxis, seriesParam, vis } from './mocks';
 
 describe('ValueAxesPanel component', () => {
@@ -47,7 +49,7 @@ describe('ValueAxesPanel component', () => {
     axisRight = {
       ...valueAxis,
       id: 'ValueAxis-2',
-      position: Positions.RIGHT,
+      position: Position.Right,
     };
     seriesParamCount = { ...seriesParam };
     seriesParamAverage = {
@@ -63,7 +65,6 @@ describe('ValueAxesPanel component', () => {
       seriesParams: [seriesParamCount, seriesParamAverage],
       valueAxes: [axisLeft, axisRight],
       vis,
-      isCategoryAxisHorizontal: false,
       setParamByIndex,
       onValueAxisPositionChanged,
       addValueAxis,
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axes_panel.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.tsx
similarity index 90%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axes_panel.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.tsx
index 5f7d33b7f1f478..397704663ff1f7 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axes_panel.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.tsx
@@ -31,13 +31,13 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { Vis } from '../../../../../visualizations/public';
-import { SeriesParam, ValueAxis } from '../../../types';
+import { Vis } from '../../../../../../visualizations/public';
+
+import { SeriesParam, ValueAxis } from '../../../../types';
 import { ValueAxisOptions } from './value_axis_options';
 import { SetParamByIndex } from '.';
 
 export interface ValueAxesPanelProps {
-  isCategoryAxisHorizontal: boolean;
   addValueAxis: () => ValueAxis;
   removeValueAxis: (axis: ValueAxis) => void;
   onValueAxisPositionChanged: (index: number, value: ValueAxis['position']) => void;
@@ -64,7 +64,7 @@ function ValueAxesPanel(props: ValueAxesPanelProps) {
 
   const removeButtonTooltip = useMemo(
     () =>
-      i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.removeButtonTooltip', {
+      i18n.translate('visTypeXy.controls.pointSeries.valueAxes.removeButtonTooltip', {
         defaultMessage: 'Remove Y-axis',
       }),
     []
@@ -87,7 +87,7 @@ function ValueAxesPanel(props: ValueAxesPanelProps) {
 
   const addButtonTooltip = useMemo(
     () =>
-      i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.addButtonTooltip', {
+      i18n.translate('visTypeXy.controls.pointSeries.valueAxes.addButtonTooltip', {
         defaultMessage: 'Add Y-axis',
       }),
     []
@@ -115,7 +115,7 @@ function ValueAxesPanel(props: ValueAxesPanelProps) {
           <EuiTitle size="xs">
             <h3>
               <FormattedMessage
-                id="visTypeVislib.controls.pointSeries.valueAxes.yAxisTitle"
+                id="visTypeXy.controls.pointSeries.valueAxes.yAxisTitle"
                 defaultMessage="Y-axes"
               />
             </h3>
@@ -146,7 +146,7 @@ function ValueAxesPanel(props: ValueAxesPanelProps) {
           buttonClassName="eui-textTruncate"
           buttonContentClassName="visEditorSidebar__aggGroupAccordionButtonContent eui-textTruncate"
           aria-label={i18n.translate(
-            'visTypeVislib.controls.pointSeries.valueAxes.toggleOptionsAriaLabel',
+            'visTypeXy.controls.pointSeries.valueAxes.toggleOptionsAriaLabel',
             {
               defaultMessage: 'Toggle {axisName} options',
               values: { axisName: axis.name },
@@ -160,7 +160,6 @@ function ValueAxesPanel(props: ValueAxesPanelProps) {
               axis={axis}
               index={index}
               valueAxis={valueAxes[index]}
-              isCategoryAxisHorizontal={props.isCategoryAxisHorizontal}
               onValueAxisPositionChanged={props.onValueAxisPositionChanged}
               setParamByIndex={props.setParamByIndex}
               setMultipleValidity={props.setMultipleValidity}
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.test.tsx
similarity index 64%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.test.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.test.tsx
index 1977bdba6eadfc..0b325198c3fe7c 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.test.tsx
@@ -19,21 +19,18 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import { ValueAxisOptions, ValueAxisOptionsParams } from './value_axis_options';
-import { ValueAxis } from '../../../types';
-import { TextInputOption } from '../../../../../charts/public';
+
+import { Position } from '@elastic/charts';
+
+import { TextInputOption } from '../../../../../../charts/public';
+
+import { ValueAxis, ScaleType } from '../../../../types';
 import { LabelOptions } from './label_options';
-import { ScaleTypes, Positions } from '../../../utils/collections';
+import { ValueAxisOptions, ValueAxisOptionsParams } from './value_axis_options';
 import { valueAxis, vis } from './mocks';
 
 const POSITION = 'position';
 
-interface PositionOption {
-  text: string;
-  value: Positions;
-  disabled: boolean;
-}
-
 describe('ValueAxisOptions component', () => {
   let setParamByIndex: jest.Mock;
   let onValueAxisPositionChanged: jest.Mock;
@@ -52,7 +49,6 @@ describe('ValueAxisOptions component', () => {
       index: 0,
       valueAxis,
       vis,
-      isCategoryAxisHorizontal: false,
       setParamByIndex,
       onValueAxisPositionChanged,
       setMultipleValidity,
@@ -73,50 +69,8 @@ describe('ValueAxisOptions component', () => {
     expect(comp.find(LabelOptions).exists()).toBeFalsy();
   });
 
-  it('should only allow left and right value axis position when category axis is horizontal', () => {
-    defaultProps.isCategoryAxisHorizontal = true;
-    const comp = shallow(<ValueAxisOptions {...defaultProps} />);
-
-    const options: PositionOption[] = comp.find({ paramName: POSITION }).prop('options');
-
-    expect(options.length).toBe(4);
-    options.forEach(({ value, disabled }) => {
-      switch (value) {
-        case Positions.LEFT:
-        case Positions.RIGHT:
-          expect(disabled).toBeFalsy();
-          break;
-        case Positions.TOP:
-        case Positions.BOTTOM:
-          expect(disabled).toBeTruthy();
-          break;
-      }
-    });
-  });
-
-  it('should only allow top and bottom value axis position when category axis is vertical', () => {
-    defaultProps.isCategoryAxisHorizontal = false;
-    const comp = shallow(<ValueAxisOptions {...defaultProps} />);
-
-    const options: PositionOption[] = comp.find({ paramName: POSITION }).prop('options');
-
-    expect(options.length).toBe(4);
-    options.forEach(({ value, disabled }) => {
-      switch (value) {
-        case Positions.LEFT:
-        case Positions.RIGHT:
-          expect(disabled).toBeTruthy();
-          break;
-        case Positions.TOP:
-        case Positions.BOTTOM:
-          expect(disabled).toBeFalsy();
-          break;
-      }
-    });
-  });
-
   it('should call onValueAxisPositionChanged when position is changed', () => {
-    const value = Positions.RIGHT;
+    const value = Position.Right;
     const comp = shallow(<ValueAxisOptions {...defaultProps} />);
     comp.find({ paramName: POSITION }).prop('setValue')(POSITION, value);
 
@@ -135,7 +89,7 @@ describe('ValueAxisOptions component', () => {
   });
 
   it('should call setValueAxis when scale value is changed', () => {
-    const scaleValue = ScaleTypes.SQUARE_ROOT;
+    const scaleValue = ScaleType.SquareRoot;
     const comp = shallow(<ValueAxisOptions {...defaultProps} />);
     comp.find({ paramName: 'type' }).prop('setValue')('type', scaleValue);
 
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.tsx
similarity index 76%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.tsx
index b42d038267d77c..4ab792142e83ad 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.tsx
@@ -17,17 +17,16 @@
  * under the License.
  */
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiSpacer, EuiAccordion, EuiHorizontalRule } from '@elastic/eui';
 
-import { Vis } from '../../../../../visualizations/public';
-import { ValueAxis } from '../../../types';
-import { Positions } from '../../../utils/collections';
-import { SelectOption, SwitchOption, TextInputOption } from '../../../../../charts/public';
+import { Vis } from '../../../../../../visualizations/public';
+import { SelectOption, SwitchOption, TextInputOption } from '../../../../../../charts/public';
+
+import { ValueAxis } from '../../../../types';
 import { LabelOptions, SetAxisLabel } from './label_options';
 import { CustomExtentsOptions } from './custom_extents_options';
-import { isAxisHorizontal } from './utils';
 import { SetParamByIndex } from '.';
 
 export type SetScale = <T extends keyof ValueAxis['scale']>(
@@ -38,7 +37,6 @@ export type SetScale = <T extends keyof ValueAxis['scale']>(
 export interface ValueAxisOptionsParams {
   axis: ValueAxis;
   index: number;
-  isCategoryAxisHorizontal: boolean;
   onValueAxisPositionChanged: (index: number, value: ValueAxis['position']) => void;
   setParamByIndex: SetParamByIndex;
   valueAxis: ValueAxis;
@@ -46,10 +44,9 @@ export interface ValueAxisOptionsParams {
   setMultipleValidity: (paramName: string, isValid: boolean) => void;
 }
 
-function ValueAxisOptions({
+export function ValueAxisOptions({
   axis,
   index,
-  isCategoryAxisHorizontal,
   valueAxis,
   vis,
   onValueAxisPositionChanged,
@@ -105,34 +102,13 @@ function ValueAxisOptions({
     [index, onValueAxisPositionChanged]
   );
 
-  const isPositionDisabled = useCallback(
-    (position: Positions) => {
-      if (isCategoryAxisHorizontal) {
-        return isAxisHorizontal(position);
-      }
-      return [Positions.LEFT, Positions.RIGHT].includes(position as any);
-    },
-    [isCategoryAxisHorizontal]
-  );
-
-  const positions = useMemo(
-    () =>
-      vis.type.editorConfig.collections.positions.map(
-        (position: { text: string; value: Positions }) => ({
-          ...position,
-          disabled: isPositionDisabled(position.value),
-        })
-      ),
-    [vis.type.editorConfig.collections.positions, isPositionDisabled]
-  );
-
   return (
     <>
       <SelectOption
-        label={i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.positionLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.positionLabel', {
           defaultMessage: 'Position',
         })}
-        options={positions}
+        options={vis.type.editorConfig.collections.positions}
         paramName="position"
         value={axis.position}
         setValue={onPositionChanged}
@@ -140,7 +116,7 @@ function ValueAxisOptions({
 
       <SelectOption
         id={`valueAxisMode${index}`}
-        label={i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.modeLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.modeLabel', {
           defaultMessage: 'Mode',
         })}
         options={vis.type.editorConfig.collections.axisModes}
@@ -151,7 +127,7 @@ function ValueAxisOptions({
 
       <SelectOption
         id={`scaleSelectYAxis-${axis.id}`}
-        label={i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.scaleTypeLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.scaleTypeLabel', {
           defaultMessage: 'Scale type',
         })}
         options={vis.type.editorConfig.collections.scaleTypes}
@@ -163,7 +139,7 @@ function ValueAxisOptions({
       <EuiHorizontalRule margin="m" />
 
       <SwitchOption
-        label={i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.showLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.showLabel', {
           defaultMessage: 'Show axis lines and labels',
         })}
         data-test-subj={`valueAxisShow-${axis.id}`}
@@ -177,7 +153,7 @@ function ValueAxisOptions({
           <EuiSpacer size="m" />
           <TextInputOption
             data-test-subj={`valueAxisTitle${index}`}
-            label={i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.titleLabel', {
+            label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.titleLabel', {
               defaultMessage: 'Title',
             })}
             paramName="text"
@@ -203,13 +179,13 @@ function ValueAxisOptions({
         initialIsOpen={false}
         buttonContentClassName="euiText euiText--small"
         buttonContent={i18n.translate(
-          'visTypeVislib.controls.pointSeries.valueAxes.customExtentsLabel',
+          'visTypeXy.controls.pointSeries.valueAxes.customExtentsLabel',
           {
             defaultMessage: 'Custom extents',
           }
         )}
         aria-label={i18n.translate(
-          'visTypeVislib.controls.pointSeries.valueAxes.toggleCustomExtendsAriaLabel',
+          'visTypeXy.controls.pointSeries.valueAxes.toggleCustomExtendsAriaLabel',
           {
             defaultMessage: 'Toggle custom extents',
           }
@@ -228,5 +204,3 @@ function ValueAxisOptions({
     </>
   );
 }
-
-export { ValueAxisOptions };
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/y_extents.test.tsx
similarity index 94%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.test.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/y_extents.test.tsx
index 7bd5c9efdf29d9..c2af7f2ad921b7 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/y_extents.test.tsx
@@ -19,9 +19,11 @@
 
 import React from 'react';
 import { mount, shallow } from 'enzyme';
+
+import { NumberInputOption } from '../../../../../../charts/public';
+
+import { ScaleType } from '../../../../types';
 import { YExtents, YExtentsProps } from './y_extents';
-import { ScaleTypes } from '../../../utils/collections';
-import { NumberInputOption } from '../../../../../charts/public';
 
 describe('YExtents component', () => {
   let setMultipleValidity: jest.Mock;
@@ -35,7 +37,7 @@ describe('YExtents component', () => {
 
     defaultProps = {
       scale: {
-        type: ScaleTypes.LINEAR,
+        type: ScaleType.Linear,
       },
       setMultipleValidity,
       setScale,
@@ -81,7 +83,7 @@ describe('YExtents component', () => {
   it('should call setMultipleValidity with false when min equals 0 and scale is log', () => {
     defaultProps.scale.min = 0;
     defaultProps.scale.max = 1;
-    defaultProps.scale.type = ScaleTypes.LOG;
+    defaultProps.scale.type = ScaleType.Log;
     mount(<YExtents {...defaultProps} />);
 
     expect(setMultipleValidity).toBeCalledWith(Y_EXTENTS, false);
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/y_extents.tsx
similarity index 83%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/y_extents.tsx
index 4e23ee5a41554c..11d049d4864a7d 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/y_extents.tsx
@@ -21,15 +21,15 @@ import React, { useEffect, useCallback } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { Scale } from '../../../types';
-import { ScaleTypes } from '../../../utils/collections';
-import { NumberInputOption } from '../../../../../charts/public';
+import { NumberInputOption } from '../../../../../../charts/public';
+
+import { Scale, ScaleType } from '../../../../types';
 import { SetScale } from './value_axis_options';
 
-const rangeError = i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.minErrorMessage', {
+const rangeError = i18n.translate('visTypeXy.controls.pointSeries.valueAxes.minErrorMessage', {
   defaultMessage: 'Min should be less than Max.',
 });
-const minError = i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.minNeededScaleText', {
+const minError = i18n.translate('visTypeXy.controls.pointSeries.valueAxes.minNeededScaleText', {
   defaultMessage: 'Min must exceed 0 when a log scale is selected.',
 });
 
@@ -59,7 +59,7 @@ function YExtents({ scale, setScale, setMultipleValidity }: YExtentsProps) {
     errors.push(rangeError);
   }
 
-  if (type === ScaleTypes.LOG && (isNullOrUndefined(min) || min <= 0)) {
+  if (type === ScaleType.Log && (isNullOrUndefined(min) || min <= 0)) {
     errors.push(minError);
   }
 
@@ -86,7 +86,7 @@ function YExtents({ scale, setScale, setMultipleValidity }: YExtentsProps) {
             <NumberInputOption
               data-test-subj="yAxisYExtentsMin"
               isInvalid={!!errors.length}
-              label={i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.minLabel', {
+              label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.minLabel', {
                 defaultMessage: 'Min',
               })}
               step={0.1}
@@ -98,7 +98,7 @@ function YExtents({ scale, setScale, setMultipleValidity }: YExtentsProps) {
           <EuiFlexItem>
             <NumberInputOption
               data-test-subj="yAxisYExtentsMax"
-              label={i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.maxLabel', {
+              label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.maxLabel', {
                 defaultMessage: 'Max',
               })}
               step={0.1}
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx
new file mode 100644
index 00000000000000..126c5521f0633a
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx
@@ -0,0 +1,69 @@
+/*
+ * 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 { SelectOption, SwitchOption } from '../../../../../../charts/public';
+
+import { ChartType } from '../../../../../common';
+import { VisParams } from '../../../../types';
+import { ValidationVisOptionsProps } from '../../common';
+
+export function ElasticChartsOptions(props: ValidationVisOptionsProps<VisParams>) {
+  const { stateParams, setValue, vis, aggs } = props;
+
+  const hasLineChart = stateParams.seriesParams.some(
+    ({ type, data: { id: paramId } }) =>
+      (type === ChartType.Line || type === ChartType.Area) &&
+      aggs.aggs.find(({ id }) => id === paramId)?.enabled
+  );
+
+  return (
+    <>
+      <SwitchOption
+        data-test-subj="detailedTooltip"
+        label={i18n.translate('visTypeXy.editors.elasticChartsOptions.detailedTooltip.label', {
+          defaultMessage: 'Show detailed tooltip',
+        })}
+        tooltip={i18n.translate('visTypeXy.editors.elasticChartsOptions.detailedTooltip.tooltip', {
+          defaultMessage:
+            'Enables the legacy detailed tooltip for displaying a single value. When disabled, a new summarized tooltip will be used to display multiple values.',
+        })}
+        paramName="detailedTooltip"
+        value={stateParams.detailedTooltip}
+        setValue={setValue}
+      />
+
+      {hasLineChart && (
+        <SelectOption
+          data-test-subj="fittingFunction"
+          label={i18n.translate('visTypeXy.editors.elasticChartsOptions.missingValuesLabel', {
+            defaultMessage: 'Fill missing values',
+          })}
+          options={vis.type.editorConfig.collections.fittingFunctions}
+          paramName="fittingFunction"
+          value={stateParams.fittingFunction}
+          setValue={setValue}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/plugins/vis_type_vislib/public/components/options/point_series/grid_panel.tsx b/src/plugins/vis_type_xy/public/editor/components/options/point_series/grid_panel.tsx
similarity index 59%
rename from src/plugins/vis_type_vislib/public/components/options/point_series/grid_panel.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/point_series/grid_panel.tsx
index 0126dce37c9f24..c6ad52f7112c96 100644
--- a/src/plugins/vis_type_vislib/public/components/options/point_series/grid_panel.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/point_series/grid_panel.tsx
@@ -16,25 +16,37 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import React, { useMemo, useEffect, useCallback } from 'react';
 
-import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
+
+import { SelectOption, SwitchOption } from '../../../../../../charts/public';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { SelectOption, SwitchOption } from '../../../../../charts/public';
-import { BasicVislibParams, ValueAxis } from '../../../types';
+import { VisParams, ValueAxis } from '../../../../types';
+import { ValidationVisOptionsProps } from '../../common';
 
-function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<BasicVislibParams>) {
+type GridPanelOptions = ValidationVisOptionsProps<
+  VisParams,
+  {
+    showElasticChartsOptions: boolean;
+  }
+>;
+
+function GridPanel({ stateParams, setValue, hasHistogramAgg, extraProps }: GridPanelOptions) {
   const setGrid = useCallback(
-    <T extends keyof BasicVislibParams['grid']>(
-      paramName: T,
-      value: BasicVislibParams['grid'][T]
-    ) => setValue('grid', { ...stateParams.grid, [paramName]: value }),
+    <T extends keyof VisParams['grid']>(paramName: T, value: VisParams['grid'][T]) =>
+      setValue('grid', { ...stateParams.grid, [paramName]: value }),
     [stateParams.grid, setValue]
   );
 
+  const disableCategoryGridLines = useMemo(
+    () => !extraProps?.showElasticChartsOptions && hasHistogramAgg,
+    [extraProps?.showElasticChartsOptions, hasHistogramAgg]
+  );
+
   const options = useMemo(
     () => [
       ...stateParams.valueAxes.map(({ id, name }: ValueAxis) => ({
@@ -42,7 +54,7 @@ function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<B
         value: id,
       })),
       {
-        text: i18n.translate('visTypeVislib.controls.pointSeries.gridAxis.dontShowLabel', {
+        text: i18n.translate('visTypeXy.controls.pointSeries.gridAxis.dontShowLabel', {
           defaultMessage: "Don't show",
         }),
         value: '',
@@ -52,17 +64,17 @@ function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<B
   );
 
   useEffect(() => {
-    if (hasHistogramAgg) {
+    if (disableCategoryGridLines) {
       setGrid('categoryLines', false);
     }
-  }, [hasHistogramAgg, setGrid]);
+  }, [disableCategoryGridLines, setGrid]);
 
   return (
     <EuiPanel paddingSize="s">
       <EuiTitle size="xs">
         <h3>
           <FormattedMessage
-            id="visTypeVislib.controls.pointSeries.gridAxis.gridText"
+            id="visTypeXy.controls.pointSeries.gridAxis.gridText"
             defaultMessage="Grid"
           />
         </h3>
@@ -71,19 +83,16 @@ function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<B
       <EuiSpacer size="m" />
 
       <SwitchOption
-        disabled={hasHistogramAgg}
-        label={i18n.translate('visTypeVislib.controls.pointSeries.gridAxis.xAxisLinesLabel', {
+        disabled={disableCategoryGridLines}
+        label={i18n.translate('visTypeXy.controls.pointSeries.gridAxis.xAxisLinesLabel', {
           defaultMessage: 'Show X-axis lines',
         })}
         paramName="categoryLines"
         tooltip={
-          hasHistogramAgg
-            ? i18n.translate(
-                'visTypeVislib.controls.pointSeries.gridAxis.yAxisLinesDisabledTooltip',
-                {
-                  defaultMessage: "X-axis lines can't show for histograms.",
-                }
-              )
+          disableCategoryGridLines
+            ? i18n.translate('visTypeXy.controls.pointSeries.gridAxis.yAxisLinesDisabledTooltip', {
+                defaultMessage: "X-axis lines can't show for histograms.",
+              })
             : undefined
         }
         value={stateParams.grid.categoryLines}
@@ -93,12 +102,12 @@ function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<B
 
       <SelectOption
         id="gridAxis"
-        label={i18n.translate('visTypeVislib.controls.pointSeries.gridAxis.yAxisLinesLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.gridAxis.yAxisLinesLabel', {
           defaultMessage: 'Y-axis lines',
         })}
         options={options}
         paramName="valueAxis"
-        value={stateParams.grid.valueAxis || ''}
+        value={stateParams.grid.valueAxis ?? ''}
         setValue={setGrid}
       />
     </EuiPanel>
diff --git a/src/plugins/vis_type_vislib/public/components/options/point_series/index.ts b/src/plugins/vis_type_xy/public/editor/components/options/point_series/index.ts
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/point_series/index.ts
rename to src/plugins/vis_type_xy/public/editor/components/options/point_series/index.ts
diff --git a/src/plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx b/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.tsx
similarity index 64%
rename from src/plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.tsx
index 18073d22188775..283fc28aed46ef 100644
--- a/src/plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.tsx
@@ -16,25 +16,41 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import React, { useMemo } from 'react';
 import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { uniq } from 'lodash';
 
-import { ValidationVisOptionsProps } from '../../common';
-import { BasicOptions, SwitchOption } from '../../../../../charts/public';
+import { BasicOptions, SwitchOption } from '../../../../../../charts/public';
+import { BUCKET_TYPES } from '../../../../../../data/public';
+
+import { VisParams } from '../../../../types';
 import { GridPanel } from './grid_panel';
 import { ThresholdPanel } from './threshold_panel';
-import { BasicVislibParams } from '../../../types';
-import { ChartTypes } from '../../../utils/collections';
-
-function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>) {
-  const { stateParams, setValue, vis } = props;
+import { ChartType } from '../../../../../common';
+import { ValidationVisOptionsProps } from '../../common';
+import { ElasticChartsOptions } from './elastic_charts_options';
 
-  const currentChartTypes = useMemo(() => uniq(stateParams.seriesParams.map(({ type }) => type)), [
-    stateParams.seriesParams,
-  ]);
+export function PointSeriesOptions(
+  props: ValidationVisOptionsProps<
+    VisParams,
+    {
+      // TODO: Remove when vis_type_vislib is removed
+      // https://github.com/elastic/kibana/issues/56143
+      showElasticChartsOptions: boolean;
+    }
+  >
+) {
+  const { stateParams, setValue, vis, aggs } = props;
+  const hasBarChart = useMemo(
+    () =>
+      stateParams.seriesParams.some(
+        ({ type, data: { id: paramId } }) =>
+          type === ChartType.Histogram && aggs.aggs.find(({ id }) => id === paramId)?.enabled
+      ),
+    [stateParams.seriesParams, aggs.aggs]
+  );
 
   return (
     <>
@@ -42,7 +58,7 @@ function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
         <EuiTitle size="xs">
           <h3>
             <FormattedMessage
-              id="visTypeVislib.editors.pointSeries.settingsTitle"
+              id="visTypeXy.editors.pointSeries.settingsTitle"
               defaultMessage="Settings"
             />
           </h3>
@@ -52,10 +68,11 @@ function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
         <BasicOptions {...props} />
 
         {vis.data.aggs!.aggs.some(
-          (agg) => agg.schema === 'segment' && agg.type.name === 'date_histogram'
+          (agg) => agg.schema === 'segment' && agg.type.name === BUCKET_TYPES.DATE_HISTOGRAM
         ) ? (
           <SwitchOption
-            label={i18n.translate('visTypeVislib.editors.pointSeries.currentTimeMarkerLabel', {
+            data-test-subj="addTimeMarker"
+            label={i18n.translate('visTypeXy.editors.pointSeries.currentTimeMarkerLabel', {
               defaultMessage: 'Current time marker',
             })}
             paramName="addTimeMarker"
@@ -64,7 +81,8 @@ function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
           />
         ) : (
           <SwitchOption
-            label={i18n.translate('visTypeVislib.editors.pointSeries.orderBucketsBySumLabel', {
+            data-test-subj="orderBucketsBySum"
+            label={i18n.translate('visTypeXy.editors.pointSeries.orderBucketsBySumLabel', {
               defaultMessage: 'Order buckets by sum',
             })}
             paramName="orderBucketsBySum"
@@ -73,10 +91,10 @@ function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
           />
         )}
 
-        {currentChartTypes.includes(ChartTypes.HISTOGRAM) && (
+        {hasBarChart && (
           <SwitchOption
             data-test-subj="showValuesOnChart"
-            label={i18n.translate('visTypeVislib.editors.pointSeries.showLabels', {
+            label={i18n.translate('visTypeXy.editors.pointSeries.showLabels', {
               defaultMessage: 'Show values on chart',
             })}
             paramName="show"
@@ -86,6 +104,8 @@ function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
             }
           />
         )}
+
+        {props.extraProps?.showElasticChartsOptions && <ElasticChartsOptions {...props} />}
       </EuiPanel>
 
       <EuiSpacer size="s" />
@@ -98,5 +118,3 @@ function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
     </>
   );
 }
-
-export { PointSeriesOptions };
diff --git a/src/plugins/vis_type_vislib/public/components/options/point_series/threshold_panel.tsx b/src/plugins/vis_type_xy/public/editor/components/options/point_series/threshold_panel.tsx
similarity index 77%
rename from src/plugins/vis_type_vislib/public/components/options/point_series/threshold_panel.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/point_series/threshold_panel.tsx
index 964bb7d569b087..ec21a386a5679a 100644
--- a/src/plugins/vis_type_vislib/public/components/options/point_series/threshold_panel.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/point_series/threshold_panel.tsx
@@ -17,39 +17,41 @@
  * under the License.
  */
 import React, { useCallback } from 'react';
-import { EuiPanel, EuiTitle, EuiColorPicker, EuiFormRow, EuiSpacer } from '@elastic/eui';
+
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiPanel, EuiTitle, EuiColorPicker, EuiFormRow, EuiSpacer } from '@elastic/eui';
 
-import { ValidationVisOptionsProps } from '../../common';
 import {
   SelectOption,
   SwitchOption,
   RequiredNumberInputOption,
-} from '../../../../../charts/public';
-import { BasicVislibParams } from '../../../types';
+} from '../../../../../../charts/public';
+
+import { ValidationVisOptionsProps } from '../../common';
+import { VisParams } from '../../../../types';
 
 function ThresholdPanel({
   stateParams,
   setValue,
   setMultipleValidity,
   vis,
-}: ValidationVisOptionsProps<BasicVislibParams>) {
+}: ValidationVisOptionsProps<VisParams>) {
   const setThresholdLine = useCallback(
-    <T extends keyof BasicVislibParams['thresholdLine']>(
+    <T extends keyof VisParams['thresholdLine']>(
       paramName: T,
-      value: BasicVislibParams['thresholdLine'][T]
+      value: VisParams['thresholdLine'][T]
     ) => setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }),
     [stateParams.thresholdLine, setValue]
   );
 
   const setThresholdLineColor = useCallback(
-    (value: BasicVislibParams['thresholdLine']['color']) => setThresholdLine('color', value),
+    (value: VisParams['thresholdLine']['color']) => setThresholdLine('color', value),
     [setThresholdLine]
   );
 
   const setThresholdLineValidity = useCallback(
-    (paramName: keyof BasicVislibParams['thresholdLine'], isValid: boolean) =>
+    (paramName: keyof VisParams['thresholdLine'], isValid: boolean) =>
       setMultipleValidity(`thresholdLine__${paramName}`, isValid),
     [setMultipleValidity]
   );
@@ -59,7 +61,7 @@ function ThresholdPanel({
       <EuiTitle size="xs">
         <h3>
           <FormattedMessage
-            id="visTypeVislib.editors.pointSeries.thresholdLineSettingsTitle"
+            id="visTypeXy.editors.pointSeries.thresholdLineSettingsTitle"
             defaultMessage="Threshold line"
           />
         </h3>
@@ -67,7 +69,7 @@ function ThresholdPanel({
       <EuiSpacer size="m" />
 
       <SwitchOption
-        label={i18n.translate('visTypeVislib.editors.pointSeries.thresholdLine.showLabel', {
+        label={i18n.translate('visTypeXy.editors.pointSeries.thresholdLine.showLabel', {
           defaultMessage: 'Show threshold line',
         })}
         paramName="show"
@@ -78,7 +80,7 @@ function ThresholdPanel({
       {stateParams.thresholdLine.show && (
         <>
           <RequiredNumberInputOption
-            label={i18n.translate('visTypeVislib.editors.pointSeries.thresholdLine.valueLabel', {
+            label={i18n.translate('visTypeXy.editors.pointSeries.thresholdLine.valueLabel', {
               defaultMessage: 'Threshold value',
             })}
             paramName="value"
@@ -88,7 +90,7 @@ function ThresholdPanel({
           />
 
           <RequiredNumberInputOption
-            label={i18n.translate('visTypeVislib.editors.pointSeries.thresholdLine.widthLabel', {
+            label={i18n.translate('visTypeXy.editors.pointSeries.thresholdLine.widthLabel', {
               defaultMessage: 'Line width',
             })}
             paramName="width"
@@ -100,7 +102,7 @@ function ThresholdPanel({
           />
 
           <SelectOption
-            label={i18n.translate('visTypeVislib.editors.pointSeries.thresholdLine.styleLabel', {
+            label={i18n.translate('visTypeXy.editors.pointSeries.thresholdLine.styleLabel', {
               defaultMessage: 'Line style',
             })}
             options={vis.type.editorConfig.collections.thresholdLineStyles}
@@ -110,7 +112,7 @@ function ThresholdPanel({
           />
 
           <EuiFormRow
-            label={i18n.translate('visTypeVislib.editors.pointSeries.thresholdLine.colorLabel', {
+            label={i18n.translate('visTypeXy.editors.pointSeries.thresholdLine.colorLabel', {
               defaultMessage: 'Line color',
             })}
             fullWidth
diff --git a/src/plugins/vis_type_xy/public/editor/index.ts b/src/plugins/vis_type_xy/public/editor/index.ts
new file mode 100644
index 00000000000000..4fc95b851ad52d
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/editor/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 './common_config';
+export * from './collections';
diff --git a/src/plugins/vis_type_xy/public/editor/positions.ts b/src/plugins/vis_type_xy/public/editor/positions.ts
new file mode 100644
index 00000000000000..0a989396826615
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/editor/positions.ts
@@ -0,0 +1,48 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { Position } from '@elastic/charts';
+
+export const getPositions = () => [
+  {
+    text: i18n.translate('visTypeXy.legendPositions.topText', {
+      defaultMessage: 'Top',
+    }),
+    value: Position.Top,
+  },
+  {
+    text: i18n.translate('visTypeXy.legendPositions.leftText', {
+      defaultMessage: 'Left',
+    }),
+    value: Position.Left,
+  },
+  {
+    text: i18n.translate('visTypeXy.legendPositions.rightText', {
+      defaultMessage: 'Right',
+    }),
+    value: Position.Right,
+  },
+  {
+    text: i18n.translate('visTypeXy.legendPositions.bottomText', {
+      defaultMessage: 'Bottom',
+    }),
+    value: Position.Bottom,
+  },
+];
diff --git a/src/plugins/vis_type_xy/public/editor/scale_types.ts b/src/plugins/vis_type_xy/public/editor/scale_types.ts
new file mode 100644
index 00000000000000..c115b04ead5fd8
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/editor/scale_types.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 { i18n } from '@kbn/i18n';
+
+import { ScaleType } from '../types';
+
+export const getScaleTypes = () => [
+  {
+    text: i18n.translate('visTypeXy.scaleTypes.linearText', {
+      defaultMessage: 'Linear',
+    }),
+    value: ScaleType.Linear,
+  },
+  {
+    text: i18n.translate('visTypeXy.scaleTypes.logText', {
+      defaultMessage: 'Log',
+    }),
+    value: ScaleType.Log,
+  },
+  {
+    text: i18n.translate('visTypeXy.scaleTypes.squareRootText', {
+      defaultMessage: 'Square root',
+    }),
+    value: ScaleType.SquareRoot,
+  },
+];
diff --git a/src/plugins/vis_type_xy/public/index.ts b/src/plugins/vis_type_xy/public/index.ts
index 9af75ce9059e92..0739ad77a245bc 100644
--- a/src/plugins/vis_type_xy/public/index.ts
+++ b/src/plugins/vis_type_xy/public/index.ts
@@ -17,11 +17,35 @@
  * under the License.
  */
 
-import { PluginInitializerContext } from '../../../core/public';
 import { VisTypeXyPlugin as Plugin } from './plugin';
 
 export { VisTypeXyPluginSetup } from './plugin';
 
-export function plugin(initializerContext: PluginInitializerContext) {
-  return new Plugin(initializerContext);
+// TODO: Remove when vis_type_vislib is removed
+// https://github.com/elastic/kibana/issues/56143
+export {
+  CategoryAxis,
+  ThresholdLine,
+  ValueAxis,
+  Grid,
+  SeriesParam,
+  Dimension,
+  Dimensions,
+  ScaleType,
+  AxisType,
+  HistogramParams,
+  DateHistogramParams,
+} from './types';
+export type { ValidationVisOptionsProps } from './editor/components/common/validation_wrapper';
+export { TruncateLabelsOption } from './editor/components/common/truncate_labels';
+export { getPositions } from './editor/positions';
+export { getScaleTypes } from './editor/scale_types';
+export { xyVisTypes } from './vis_types';
+export { getAggId } from './config/get_agg_id';
+
+// Export common types
+export * from '../common';
+
+export function plugin() {
+  return new Plugin();
 }
diff --git a/src/plugins/vis_type_xy/public/plugin.ts b/src/plugins/vis_type_xy/public/plugin.ts
index 667018c1e6e307..c8812b07e59494 100644
--- a/src/plugins/vis_type_xy/public/plugin.ts
+++ b/src/plugins/vis_type_xy/public/plugin.ts
@@ -17,25 +17,30 @@
  * under the License.
  */
 
-import {
-  CoreSetup,
-  CoreStart,
-  Plugin,
-  IUiSettingsClient,
-  PluginInitializerContext,
-} from 'kibana/public';
-
+import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
 import { Plugin as ExpressionsPublicPlugin } from '../../expressions/public';
 import { VisualizationsSetup, VisualizationsStart } from '../../visualizations/public';
 import { ChartsPluginSetup } from '../../charts/public';
+import { DataPublicPluginStart } from '../../data/public';
 
-export interface VisTypeXyDependencies {
-  uiSettings: IUiSettingsClient;
-  charts: ChartsPluginSetup;
-}
+import { createVisTypeXyVisFn } from './xy_vis_fn';
+import {
+  setDataActions,
+  setFormatService,
+  setThemeService,
+  setColorsService,
+  setTimefilter,
+  setUISettings,
+  setDocLinks,
+} from './services';
+import { visTypesDefinitions } from './vis_types';
+import { CHARTS_LIBRARY } from '../common';
+import { xyVisRenderer } from './vis_renderer';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface VisTypeXyPluginSetup {}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface VisTypeXyPluginStart {}
 
 /** @internal */
 export interface VisTypeXyPluginSetupDependencies {
@@ -48,40 +53,43 @@ export interface VisTypeXyPluginSetupDependencies {
 export interface VisTypeXyPluginStartDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['start']>;
   visualizations: VisualizationsStart;
+  data: DataPublicPluginStart;
 }
 
-type VisTypeXyCoreSetup = CoreSetup<VisTypeXyPluginStartDependencies, void>;
+type VisTypeXyCoreSetup = CoreSetup<VisTypeXyPluginStartDependencies, VisTypeXyPluginStart>;
 
 /** @internal */
-export class VisTypeXyPlugin implements Plugin<VisTypeXyPluginSetup, void> {
-  constructor(public initializerContext: PluginInitializerContext) {}
-
+export class VisTypeXyPlugin
+  implements
+    Plugin<
+      VisTypeXyPluginSetup,
+      VisTypeXyPluginStart,
+      VisTypeXyPluginSetupDependencies,
+      VisTypeXyPluginStartDependencies
+    > {
   public async setup(
     core: VisTypeXyCoreSetup,
     { expressions, visualizations, charts }: VisTypeXyPluginSetupDependencies
   ) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'The visTypeXy plugin is enabled\n\n',
-      'This may negatively alter existing vislib visualization configurations if saved.'
-    );
-    const visualizationDependencies: Readonly<VisTypeXyDependencies> = {
-      uiSettings: core.uiSettings,
-      charts,
-    };
-
-    const visTypeDefinitions: any[] = [];
-    const visFunctions: any = [];
+    if (core.uiSettings.get(CHARTS_LIBRARY, false)) {
+      setUISettings(core.uiSettings);
+      setThemeService(charts.theme);
+      setColorsService(charts.legacyColors);
 
-    visFunctions.forEach((fn: any) => expressions.registerFunction(fn));
-    visTypeDefinitions.forEach((vis: any) =>
-      visualizations.createBaseVisualization(vis(visualizationDependencies))
-    );
+      [createVisTypeXyVisFn].forEach(expressions.registerFunction);
+      expressions.registerRenderer(xyVisRenderer);
+      visTypesDefinitions.forEach(visualizations.createBaseVisualization);
+    }
 
     return {};
   }
 
-  public start(core: CoreStart, deps: VisTypeXyPluginStartDependencies) {
-    // nothing to do here
+  public start(core: CoreStart, { data }: VisTypeXyPluginStartDependencies) {
+    setFormatService(data.fieldFormats);
+    setDataActions(data.actions);
+    setTimefilter(data.query.timefilter.timefilter);
+    setDocLinks(core.docLinks);
+
+    return {};
   }
 }
diff --git a/src/plugins/vis_type_xy/public/services.ts b/src/plugins/vis_type_xy/public/services.ts
new file mode 100644
index 00000000000000..5a72759ecff6cb
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/services.ts
@@ -0,0 +1,49 @@
+/*
+ * 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 { CoreSetup, DocLinksStart } from '../../../core/public';
+import { createGetterSetter } from '../../kibana_utils/public';
+import { DataPublicPluginStart } from '../../data/public';
+import { ChartsPluginSetup } from '../../charts/public';
+
+export const [getUISettings, setUISettings] = createGetterSetter<CoreSetup['uiSettings']>(
+  'xy core.uiSettings'
+);
+
+export const [getDataActions, setDataActions] = createGetterSetter<
+  DataPublicPluginStart['actions']
+>('xy data.actions');
+
+export const [getFormatService, setFormatService] = createGetterSetter<
+  DataPublicPluginStart['fieldFormats']
+>('xy data.fieldFormats');
+
+export const [getTimefilter, setTimefilter] = createGetterSetter<
+  DataPublicPluginStart['query']['timefilter']['timefilter']
+>('xy data.query.timefilter.timefilter');
+
+export const [getThemeService, setThemeService] = createGetterSetter<ChartsPluginSetup['theme']>(
+  'xy charts.theme'
+);
+
+export const [getColorsService, setColorsService] = createGetterSetter<
+  ChartsPluginSetup['legacyColors']
+>('xy charts.color');
+
+export const [getDocLinks, setDocLinks] = createGetterSetter<DocLinksStart>('DocLinks');
diff --git a/src/plugins/vis_type_xy/public/to_ast.test.ts b/src/plugins/vis_type_xy/public/to_ast.test.ts
new file mode 100644
index 00000000000000..678a9faaec5855
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/to_ast.test.ts
@@ -0,0 +1,60 @@
+/*
+ * 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 { Vis } from '../../visualizations/public';
+import { buildExpression } from '../../expressions/public';
+import { sampleAreaVis } from '../../vis_type_vislib/public/sample_vis.test.mocks';
+
+import { toExpressionAst } from './to_ast';
+import { VisParams } from './types';
+
+jest.mock('../../expressions/public', () => ({
+  ...(jest.requireActual('../../expressions/public') as any),
+  buildExpression: jest.fn().mockImplementation(() => ({
+    toAst: () => ({
+      type: 'expression',
+      chain: [],
+    }),
+  })),
+}));
+
+jest.mock('./to_ast_esaggs', () => ({
+  getEsaggsFn: jest.fn(),
+}));
+
+describe('xy vis toExpressionAst function', () => {
+  let vis: Vis<VisParams>;
+
+  const params = {
+    timefilter: {},
+    timeRange: {},
+    abortSignal: {},
+  } as any;
+
+  beforeEach(() => {
+    vis = sampleAreaVis as any;
+  });
+
+  it('should match basic snapshot', () => {
+    toExpressionAst(vis, params);
+    const [, builtExpression] = (buildExpression as jest.Mock).mock.calls[0][0];
+
+    expect(builtExpression).toMatchSnapshot();
+  });
+});
diff --git a/src/plugins/vis_type_xy/public/to_ast.ts b/src/plugins/vis_type_xy/public/to_ast.ts
new file mode 100644
index 00000000000000..c93dbe46dca0e1
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/to_ast.ts
@@ -0,0 +1,94 @@
+/*
+ * 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 moment from 'moment';
+
+import { VisToExpressionAst, getVisSchemas } from '../../visualizations/public';
+import { buildExpression, buildExpressionFunction } from '../../expressions/public';
+import { BUCKET_TYPES } from '../../data/public';
+
+import { DateHistogramParams, Dimensions, HistogramParams, VisParams } from './types';
+import { visName, VisTypeXyExpressionFunctionDefinition } from './xy_vis_fn';
+import { XyVisType } from '../common';
+import { getEsaggsFn } from './to_ast_esaggs';
+
+export const toExpressionAst: VisToExpressionAst<VisParams> = async (vis, params) => {
+  const schemas = getVisSchemas(vis, params);
+  const dimensions: Dimensions = {
+    x: schemas.segment ? schemas.segment[0] : null,
+    y: schemas.metric,
+    z: schemas.radius,
+    width: schemas.width,
+    series: schemas.group,
+    splitRow: schemas.split_row,
+    splitColumn: schemas.split_column,
+  };
+
+  const responseAggs = vis.data.aggs?.getResponseAggs().filter(({ enabled }) => enabled) ?? [];
+
+  if (dimensions.x) {
+    const xAgg = responseAggs[dimensions.x.accessor] as any;
+    if (xAgg.type.name === BUCKET_TYPES.DATE_HISTOGRAM) {
+      (dimensions.x.params as DateHistogramParams).date = true;
+      const { esUnit, esValue } = xAgg.buckets.getInterval();
+      (dimensions.x.params as DateHistogramParams).intervalESUnit = esUnit;
+      (dimensions.x.params as DateHistogramParams).intervalESValue = esValue;
+      (dimensions.x.params as DateHistogramParams).interval = moment
+        .duration(esValue, esUnit)
+        .asMilliseconds();
+      (dimensions.x.params as DateHistogramParams).format = xAgg.buckets.getScaledDateFormat();
+    } else if (xAgg.type.name === BUCKET_TYPES.HISTOGRAM) {
+      const intervalParam = xAgg.type.paramByName('interval');
+      const output = { params: {} as any };
+      await intervalParam.modifyAggConfigOnSearchRequestStart(xAgg, vis.data.searchSource, {
+        abortSignal: params.abortSignal,
+      });
+      intervalParam.write(xAgg, output);
+      (dimensions.x.params as HistogramParams).interval = output.params.interval;
+    }
+  }
+
+  const visConfig = { ...vis.params };
+
+  (dimensions.y || []).forEach((yDimension) => {
+    const yAgg = responseAggs[yDimension.accessor];
+    const seriesParam = (visConfig.seriesParams || []).find(
+      (param: any) => param.data.id === yAgg.id
+    );
+    if (seriesParam) {
+      const usedValueAxis = (visConfig.valueAxes || []).find(
+        (valueAxis: any) => valueAxis.id === seriesParam.valueAxis
+      );
+      if (usedValueAxis?.scale.mode === 'percentage') {
+        yDimension.format = { id: 'percent' };
+      }
+    }
+  });
+
+  visConfig.dimensions = dimensions;
+
+  const visTypeXy = buildExpressionFunction<VisTypeXyExpressionFunctionDefinition>(visName, {
+    type: vis.type.name as XyVisType,
+    visConfig: JSON.stringify(visConfig),
+  });
+
+  const ast = buildExpression([getEsaggsFn(vis), visTypeXy]);
+
+  return ast.toAst();
+};
diff --git a/src/plugins/vis_type_xy/public/to_ast_esaggs.ts b/src/plugins/vis_type_xy/public/to_ast_esaggs.ts
new file mode 100644
index 00000000000000..da8d11ac8340c6
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/to_ast_esaggs.ts
@@ -0,0 +1,46 @@
+/*
+ * 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 { Vis } from '../../visualizations/public';
+import { buildExpression, buildExpressionFunction } from '../../expressions/public';
+import {
+  EsaggsExpressionFunctionDefinition,
+  IndexPatternLoadExpressionFunctionDefinition,
+} from '../../data/public';
+
+import { VisParams } from './types';
+
+/**
+ * Get esaggs expressions function
+ * TODO: replace this with vis.data.aggs!.toExpressionAst();
+ * https://github.com/elastic/kibana/issues/61768
+ * @param vis
+ */
+export function getEsaggsFn(vis: Vis<VisParams>) {
+  return buildExpressionFunction<EsaggsExpressionFunctionDefinition>('esaggs', {
+    index: buildExpression([
+      buildExpressionFunction<IndexPatternLoadExpressionFunctionDefinition>('indexPatternLoad', {
+        id: vis.data.indexPattern!.id!,
+      }),
+    ]),
+    metricsAtAllLevels: vis.isHierarchical(),
+    partialRows: false,
+    aggs: vis.data.aggs!.aggs.map((agg) => buildExpression(agg.toExpressionAst())),
+  });
+}
diff --git a/src/plugins/vis_type_xy/public/types/config.ts b/src/plugins/vis_type_xy/public/types/config.ts
new file mode 100644
index 00000000000000..ec73c0f6e3fc07
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/types/config.ts
@@ -0,0 +1,130 @@
+/*
+ * 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 {
+  AxisSpec,
+  CustomTooltip,
+  Fit,
+  GridLineStyle,
+  Position,
+  Rotation,
+  SeriesScales,
+  TickFormatter,
+  TooltipProps,
+  TooltipValueFormatter,
+  YDomainRange,
+} from '@elastic/charts';
+
+import { Dimension, Scale, ThresholdLine } from './param';
+
+export interface Column {
+  id: string | null;
+  name: string;
+}
+
+export interface Aspect {
+  accessor: Column['id'];
+  aggType: string | null;
+  aggId: string | null;
+  column?: Dimension['accessor'];
+  title: Column['name'];
+  format?: Dimension['format'];
+  formatter?: TickFormatter;
+  params: Dimension['params'];
+}
+
+export interface Aspects {
+  x: Aspect;
+  y: Aspect[];
+  z?: Aspect;
+  series?: Aspect[];
+}
+
+export interface AxisGrid {
+  show?: boolean;
+  styles?: GridLineStyle;
+}
+
+export interface TickOptions {
+  show?: boolean;
+  size?: number;
+  count?: number;
+  padding?: number;
+  formatter?: TickFormatter;
+  labelFormatter?: TickFormatter;
+  rotation?: number;
+  showDuplicates?: boolean;
+  integersOnly?: boolean;
+  showOverlappingTicks?: boolean;
+  showOverlappingLabels?: boolean;
+}
+
+export type YScaleType = SeriesScales['yScaleType'];
+export type XScaleType = SeriesScales['xScaleType'];
+
+export type ScaleConfig<S extends XScaleType | YScaleType> = Omit<Scale, 'type'> & {
+  type?: S;
+};
+
+export interface AxisConfig<S extends XScaleType | YScaleType> {
+  id: string;
+  groupId?: string;
+  position: Position;
+  ticks?: TickOptions;
+  show: boolean;
+  style: AxisSpec['style'];
+  scale: ScaleConfig<S>;
+  domain?: YDomainRange;
+  title?: string;
+  grid?: AxisGrid;
+  integersOnly: boolean;
+}
+
+export interface LegendOptions {
+  show: boolean;
+  position?: Position;
+}
+
+export type ThresholdLineConfig = Omit<ThresholdLine, 'style'> & {
+  dash?: number[];
+  groupId?: string;
+};
+
+export type TooltipConfig = Omit<TooltipProps, 'customTooltip'> & {
+  detailedTooltip?: (headerFormatter?: TooltipValueFormatter) => CustomTooltip;
+};
+
+export interface VisConfig {
+  legend: LegendOptions;
+  tooltip: TooltipConfig;
+  xAxis: AxisConfig<XScaleType>;
+  yAxes: Array<AxisConfig<YScaleType>>;
+  aspects: Aspects;
+  rotation: Rotation;
+  thresholdLine: ThresholdLineConfig;
+  orderBucketsBySum?: boolean;
+  showCurrentTime: boolean;
+  isTimeChart: boolean;
+  markSizeRatio: number;
+  showValueLabel: boolean;
+  enableHistogramMode: boolean;
+  fittingFunction?: Exclude<Fit, 'explicit'>;
+  detailedTooltip?: boolean;
+  isVislibVis?: boolean;
+}
diff --git a/src/plugins/vis_type_xy/public/types/constants.ts b/src/plugins/vis_type_xy/public/types/constants.ts
new file mode 100644
index 00000000000000..f92c56e43413e4
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/types/constants.ts
@@ -0,0 +1,67 @@
+/*
+ * 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 { $Values } from '@kbn/utility-types';
+
+export const ChartMode = Object.freeze({
+  Normal: 'normal' as const,
+  Stacked: 'stacked' as const,
+});
+export type ChartMode = $Values<typeof ChartMode>;
+
+export const InterpolationMode = Object.freeze({
+  Linear: 'linear' as const,
+  Cardinal: 'cardinal' as const,
+  StepAfter: 'step-after' as const,
+});
+export type InterpolationMode = $Values<typeof InterpolationMode>;
+
+export const AxisType = Object.freeze({
+  Category: 'category' as const,
+  Value: 'value' as const,
+});
+export type AxisType = $Values<typeof AxisType>;
+
+export const ScaleType = Object.freeze({
+  Linear: 'linear' as const,
+  Log: 'log' as const,
+  SquareRoot: 'square root' as const,
+});
+export type ScaleType = $Values<typeof ScaleType>;
+
+export const AxisMode = Object.freeze({
+  Normal: 'normal' as const,
+  Percentage: 'percentage' as const,
+  Wiggle: 'wiggle' as const,
+  Silhouette: 'silhouette' as const,
+});
+export type AxisMode = $Values<typeof AxisMode>;
+
+export const ThresholdLineStyle = Object.freeze({
+  Full: 'full' as const,
+  Dashed: 'dashed' as const,
+  DotDashed: 'dot-dashed' as const,
+});
+export type ThresholdLineStyle = $Values<typeof ThresholdLineStyle>;
+
+export const ColorMode = Object.freeze({
+  Background: 'Background' as const,
+  Labels: 'Labels' as const,
+  None: 'None' as const,
+});
+export type ColorMode = $Values<typeof ColorMode>;
diff --git a/src/plugins/vis_type_xy/public/types/index.ts b/src/plugins/vis_type_xy/public/types/index.ts
new file mode 100644
index 00000000000000..791373def20183
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/types/index.ts
@@ -0,0 +1,23 @@
+/*
+ * 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 './constants';
+export * from './config';
+export * from './param';
+export * from './vis_type';
diff --git a/src/plugins/vis_type_xy/public/types/param.ts b/src/plugins/vis_type_xy/public/types/param.ts
new file mode 100644
index 00000000000000..c8cd020dec03ce
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/types/param.ts
@@ -0,0 +1,160 @@
+/*
+ * 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 { Fit, Position } from '@elastic/charts';
+
+import { Style, Labels } from '../../../charts/public';
+import { SchemaConfig } from '../../../visualizations/public';
+
+import { ChartType } from '../../common';
+import {
+  ChartMode,
+  AxisMode,
+  AxisType,
+  InterpolationMode,
+  ScaleType,
+  ThresholdLineStyle,
+} from './constants';
+
+export interface Scale {
+  boundsMargin?: number | '';
+  defaultYExtents?: boolean;
+  max?: number | null;
+  min?: number | null;
+  mode?: AxisMode;
+  setYExtents?: boolean;
+  type: ScaleType;
+}
+
+export interface CategoryAxis {
+  id: string;
+  labels: Labels;
+  position: Position;
+  scale: Scale;
+  show: boolean;
+  title: {
+    text?: string;
+  };
+  type: AxisType;
+  /**
+   * Used only for heatmap, here for consistent types when used in vis_type_vislib
+   *
+   * remove with vis_type_vislib
+   * https://github.com/elastic/kibana/issues/56143
+   */
+  style: Partial<Style>;
+}
+
+export interface ValueAxis extends CategoryAxis {
+  name: string;
+}
+
+export interface ThresholdLine {
+  show: boolean;
+  value: number | null;
+  width: number | null;
+  style: ThresholdLineStyle;
+  color: string;
+}
+
+export interface SeriesParam {
+  data: { label: string; id: string };
+  drawLinesBetweenPoints: boolean;
+  interpolate?: InterpolationMode;
+  lineWidth?: number;
+  mode: ChartMode;
+  show: boolean;
+  showCircles: boolean;
+  type: ChartType;
+  valueAxis: string;
+}
+
+export interface Grid {
+  categoryLines: boolean;
+  valueAxis?: string;
+}
+
+export interface TimeMarker {
+  time: string;
+  class?: string;
+  color?: string;
+  opacity?: number;
+  width?: number;
+}
+
+export interface DateHistogramParams {
+  date: boolean;
+  interval: number;
+  intervalESValue: number;
+  intervalESUnit: string;
+  format: string;
+  bounds?: {
+    min: string | number;
+    max: string | number;
+  };
+}
+
+export interface HistogramParams {
+  interval: number;
+}
+
+export interface FakeParams {
+  defaultValue: string;
+}
+
+export type Dimension = Omit<SchemaConfig, 'params'> & {
+  params: DateHistogramParams | HistogramParams | FakeParams | {};
+};
+
+export interface Dimensions {
+  x: Dimension | null;
+  y: Dimension[];
+  z?: Dimension[];
+  width?: Dimension[];
+  series?: Dimension | Dimension[];
+  splitRow?: Dimension[];
+  splitColumn?: Dimension[];
+}
+
+export interface VisParams {
+  type: ChartType;
+  addLegend: boolean;
+  addTooltip: boolean;
+  legendPosition: Position;
+  addTimeMarker: boolean;
+  categoryAxes: CategoryAxis[];
+  orderBucketsBySum?: boolean;
+  labels: Labels;
+  thresholdLine: ThresholdLine;
+  valueAxes: ValueAxis[];
+  grid: Grid;
+  seriesParams: SeriesParam[];
+  dimensions: Dimensions;
+  radiusRatio: number;
+  times: TimeMarker[]; // For compatibility with vislib
+  /**
+   * flag to indicate old vislib visualizations
+   * used for backwards compatibility including colors
+   */
+  isVislibVis?: boolean;
+  /**
+   * Add for detailed tooltip option
+   */
+  detailedTooltip?: boolean;
+  fittingFunction?: Exclude<Fit, 'explicit'>;
+}
diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/__mocks__/@elastic/charts.js b/src/plugins/vis_type_xy/public/types/vis_type.ts
similarity index 62%
rename from src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/__mocks__/@elastic/charts.js
rename to src/plugins/vis_type_xy/public/types/vis_type.ts
index 19bfe685cac90f..0231e745fe082f 100644
--- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/__mocks__/@elastic/charts.js
+++ b/src/plugins/vis_type_xy/public/types/vis_type.ts
@@ -17,28 +17,16 @@
  * under the License.
  */
 
-export const CurveType = {
-  CURVE_CARDINAL: 0,
-  CURVE_NATURAL: 1,
-  CURVE_MONOTONE_X: 2,
-  CURVE_MONOTONE_Y: 3,
-  CURVE_BASIS: 4,
-  CURVE_CATMULL_ROM: 5,
-  CURVE_STEP: 6,
-  CURVE_STEP_AFTER: 7,
-  CURVE_STEP_BEFORE: 8,
-  LINEAR: 9,
-};
+import { BaseVisTypeOptions } from '../../../visualizations/public';
+import { ChartType } from '../../common';
 
-export const ScaleType = {
-  Linear: 'linear',
-  Ordinal: 'ordinal',
-  Log: 'log',
-  Sqrt: 'sqrt',
-  Time: 'time',
-};
+import { VisParams } from './param';
 
-export const BarSeries = () => null;
-export const AreaSeries = () => null;
+export type VisTypeNames = ChartType | 'horizontal_bar';
 
-export { LIGHT_THEME, DARK_THEME } from '@elastic/charts';
+export type XyVisTypeDefinition = BaseVisTypeOptions<VisParams> & {
+  name: VisTypeNames;
+  visConfig: {
+    defaults: Omit<VisParams, 'dimensions'>;
+  };
+};
diff --git a/src/plugins/vis_type_xy/public/utils/accessors.tsx b/src/plugins/vis_type_xy/public/utils/accessors.tsx
new file mode 100644
index 00000000000000..a7a9813f7e00c1
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/utils/accessors.tsx
@@ -0,0 +1,90 @@
+/*
+ * 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 { AccessorFn, Accessor } from '@elastic/charts';
+import { BUCKET_TYPES } from '../../../data/public';
+import { FakeParams, Aspect } from '../types';
+
+export const COMPLEX_X_ACCESSOR = '__customXAccessor__';
+export const COMPLEX_SPLIT_ACCESSOR = '__complexSplitAccessor__';
+
+export const getXAccessor = (aspect: Aspect): Accessor | AccessorFn => {
+  return (
+    getComplexAccessor(COMPLEX_X_ACCESSOR)(aspect) ??
+    (() => (aspect.params as FakeParams)?.defaultValue)
+  );
+};
+
+const getFieldName = (fieldName: string, index?: number) => {
+  const indexStr = index !== undefined ? `::${index}` : '';
+
+  return `${fieldName}${indexStr}`;
+};
+
+/**
+ * Returns accessor function for complex accessor types
+ * @param aspect
+ */
+export const getComplexAccessor = (fieldName: string) => (
+  aspect: Aspect,
+  index?: number
+): Accessor | AccessorFn | undefined => {
+  if (!aspect.accessor) {
+    return;
+  }
+
+  if (
+    !(
+      (aspect.aggType === BUCKET_TYPES.DATE_RANGE || aspect.aggType === BUCKET_TYPES.RANGE) &&
+      aspect.formatter
+    )
+  ) {
+    return aspect.accessor;
+  }
+
+  const formatter = aspect.formatter;
+  const accessor = aspect.accessor;
+  const fn: AccessorFn = (d) => {
+    const v = d[accessor];
+    if (!v) {
+      return;
+    }
+    const f = formatter(v);
+    return f;
+  };
+
+  fn.fieldName = getFieldName(fieldName, index);
+
+  return fn;
+};
+
+export const getSplitSeriesAccessorFnMap = (
+  splitSeriesAccessors: Array<Accessor | AccessorFn>
+): Map<string | number, AccessorFn> => {
+  const m = new Map<string | number, AccessorFn>();
+
+  splitSeriesAccessors.forEach((accessor, index) => {
+    if (typeof accessor === 'function') {
+      const fieldName = getFieldName(COMPLEX_SPLIT_ACCESSOR, index);
+      m.set(fieldName, accessor);
+    }
+  });
+
+  return m;
+};
diff --git a/src/plugins/vis_type_xy/public/utils/domain.ts b/src/plugins/vis_type_xy/public/utils/domain.ts
new file mode 100644
index 00000000000000..132c8df71428bb
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/utils/domain.ts
@@ -0,0 +1,94 @@
+/*
+ * 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 { uniq } from 'lodash';
+import { unitOfTime } from 'moment';
+
+import { DomainRange } from '@elastic/charts';
+
+import { getAdjustedInterval } from '../../../charts/public';
+import { Datatable } from '../../../expressions/public';
+
+import { getTimefilter } from '../services';
+import { Aspect, DateHistogramParams, HistogramParams } from '../types';
+
+export const getXDomain = (params: Aspect['params']): DomainRange => {
+  const minInterval = (params as DateHistogramParams | HistogramParams)?.interval ?? undefined;
+
+  if ((params as DateHistogramParams).date) {
+    const bounds = getTimefilter().getBounds();
+
+    if (bounds) {
+      return {
+        min: bounds.min ? bounds.min.valueOf() : undefined,
+        max: bounds.max ? bounds.max.valueOf() : undefined,
+        minInterval,
+      };
+    }
+  }
+
+  return {
+    minInterval,
+  };
+};
+
+export const getAdjustedDomain = (
+  data: Datatable['rows'],
+  { accessor, params }: Aspect,
+  timeZone: string,
+  domain?: DomainRange,
+  hasBars?: boolean
+): DomainRange => {
+  if (
+    accessor &&
+    domain &&
+    'min' in domain &&
+    'max' in domain &&
+    'intervalESValue' in params &&
+    'intervalESUnit' in params
+  ) {
+    const { interval, intervalESValue, intervalESUnit } = params;
+    const xValues = uniq(data.map((d) => d[accessor]).sort());
+
+    const [firstXValue] = xValues;
+    const lastXValue = xValues[xValues.length - 1];
+
+    const domainMin = Math.min(firstXValue, domain.min);
+    const domainMaxValue = hasBars ? domain.max - interval : lastXValue + interval;
+    const domainMax = Math.max(domainMaxValue, lastXValue);
+    const minInterval = getAdjustedInterval(
+      xValues,
+      intervalESValue,
+      intervalESUnit as unitOfTime.Base,
+      timeZone
+    );
+
+    return {
+      min: domainMin,
+      max: domainMax,
+      minInterval,
+    };
+  }
+
+  return 'interval' in params
+    ? {
+        minInterval: params.interval,
+      }
+    : {};
+};
diff --git a/src/plugins/vis_type_xy/public/utils/get_legend_actions.tsx b/src/plugins/vis_type_xy/public/utils/get_legend_actions.tsx
new file mode 100644
index 00000000000000..3833b5c646df8f
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/utils/get_legend_actions.tsx
@@ -0,0 +1,113 @@
+/*
+ * 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 } from 'react';
+
+import { i18n } from '@kbn/i18n';
+import { EuiContextMenuPanelDescriptor, EuiIcon, EuiPopover, EuiContextMenu } from '@elastic/eui';
+import { LegendAction, XYChartSeriesIdentifier, SeriesName } from '@elastic/charts';
+
+import { ClickTriggerEvent } from '../../../charts/public';
+
+export const getLegendActions = (
+  canFilter: (data: ClickTriggerEvent | null) => Promise<boolean>,
+  getFilterEventData: (series: XYChartSeriesIdentifier) => ClickTriggerEvent | null,
+  onFilter: (data: ClickTriggerEvent, negate?: any) => void,
+  getSeriesName: (series: XYChartSeriesIdentifier) => SeriesName
+): LegendAction => {
+  return ({ series: xySeries }) => {
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const [isfilterable, setIsfilterable] = useState(false);
+    const series = xySeries as XYChartSeriesIdentifier;
+    const filterData = getFilterEventData(series);
+
+    (async () => setIsfilterable(await canFilter(filterData)))();
+
+    if (!isfilterable || !filterData) {
+      return null;
+    }
+
+    const name = getSeriesName(series);
+    const panels: EuiContextMenuPanelDescriptor[] = [
+      {
+        id: 'main',
+        title: `${name}`,
+        items: [
+          {
+            name: i18n.translate('visTypeXy.legend.filterForValueButtonAriaLabel', {
+              defaultMessage: 'Filter for value',
+            }),
+            'data-test-subj': `legend-${name}-filterIn`,
+            icon: <EuiIcon type="plusInCircle" size="m" />,
+            onClick: () => {
+              setPopoverOpen(false);
+              onFilter(filterData);
+            },
+          },
+          {
+            name: i18n.translate('visTypeXy.legend.filterOutValueButtonAriaLabel', {
+              defaultMessage: 'Filter out value',
+            }),
+            'data-test-subj': `legend-${name}-filterOut`,
+            icon: <EuiIcon type="minusInCircle" size="m" />,
+            onClick: () => {
+              setPopoverOpen(false);
+              onFilter(filterData, true);
+            },
+          },
+        ],
+      },
+    ];
+
+    const Button = (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100%',
+          marginLeft: 4,
+          marginRight: 4,
+        }}
+        data-test-subj={`legend-${name}`}
+        onKeyPress={() => undefined}
+        onClick={() => setPopoverOpen(!popoverOpen)}
+      >
+        <EuiIcon size="s" type="boxesVertical" />
+      </div>
+    );
+
+    return (
+      <EuiPopover
+        id="contextMenuNormal"
+        button={Button}
+        isOpen={popoverOpen}
+        closePopover={() => setPopoverOpen(false)}
+        panelPaddingSize="none"
+        anchorPosition="upLeft"
+        title={i18n.translate('visTypeXy.legend.filterOptionsLegend', {
+          defaultMessage: '{legendDataLabel}, filter options',
+          values: { legendDataLabel: name },
+        })}
+      >
+        <EuiContextMenu initialPanelId="main" panels={panels} />
+      </EuiPopover>
+    );
+  };
+};
diff --git a/src/plugins/vis_type_xy/public/utils/get_series_name_fn.ts b/src/plugins/vis_type_xy/public/utils/get_series_name_fn.ts
new file mode 100644
index 00000000000000..bc3822ee7dc7a5
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/utils/get_series_name_fn.ts
@@ -0,0 +1,73 @@
+/*
+ * 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 { memoize } from 'lodash';
+
+import { i18n } from '@kbn/i18n';
+import { XYChartSeriesIdentifier, SeriesName } from '@elastic/charts';
+
+import { VisConfig } from '../types';
+
+const emptyTextLabel = i18n.translate('visTypeXy.emptyTextColumnValue', {
+  defaultMessage: '(empty)',
+});
+
+/**
+ * Returns empty values
+ */
+export const fillEmptyValue = <T extends string | number | undefined>(value: T) =>
+  value === '' ? emptyTextLabel : value;
+
+function getSplitValues(
+  splitAccessors: XYChartSeriesIdentifier['splitAccessors'],
+  seriesAspects?: VisConfig['aspects']['series']
+) {
+  if (splitAccessors.size < 1) {
+    return [];
+  }
+
+  const splitValues: Array<string | number> = [];
+  splitAccessors.forEach((value, key) => {
+    const split = (seriesAspects ?? []).find(({ accessor }) => accessor === key);
+    splitValues.push(split?.formatter ? split?.formatter(value) : value);
+  });
+  return splitValues.map(fillEmptyValue);
+}
+
+export const getSeriesNameFn = (aspects: VisConfig['aspects'], multipleY = false) =>
+  memoize(
+    ({ splitAccessors, yAccessor }: XYChartSeriesIdentifier): SeriesName => {
+      const splitValues = getSplitValues(splitAccessors, aspects.series);
+      const yAccessorTitle =
+        aspects.y.find(({ accessor }) => accessor === yAccessor)?.title ?? null;
+
+      if (!yAccessorTitle) {
+        return null;
+      }
+
+      if (multipleY) {
+        if (splitValues.length === 0) {
+          return yAccessorTitle;
+        }
+        return `${splitValues.join(' - ')}: ${yAccessorTitle}`;
+      }
+
+      return splitValues.length > 0 ? splitValues.join(' - ') : yAccessorTitle;
+    }
+  );
diff --git a/src/plugins/vis_type_xy/public/utils/get_time_zone.tsx b/src/plugins/vis_type_xy/public/utils/get_time_zone.tsx
new file mode 100644
index 00000000000000..7c963d9cf571fd
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/utils/get_time_zone.tsx
@@ -0,0 +1,36 @@
+/*
+ * 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 moment from 'moment';
+
+import { getUISettings } from '../services';
+
+/**
+ * Get timeZone from uiSettings
+ */
+export function getTimeZone() {
+  const uiSettings = getUISettings();
+  if (uiSettings.isDefault('dateFormat:tz')) {
+    const detectedTimeZone = moment.tz.guess();
+    if (detectedTimeZone) return detectedTimeZone;
+    else return moment().format('Z');
+  } else {
+    return uiSettings.get('dateFormat:tz', 'Browser');
+  }
+}
diff --git a/src/plugins/vis_type_xy/public/utils/index.tsx b/src/plugins/vis_type_xy/public/utils/index.tsx
new file mode 100644
index 00000000000000..20b5d7a3c8881c
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/utils/index.tsx
@@ -0,0 +1,26 @@
+/*
+ * 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 { renderAllSeries } from './render_all_series';
+export { getTimeZone } from './get_time_zone';
+export { getLegendActions } from './get_legend_actions';
+export { getSeriesNameFn } from './get_series_name_fn';
+export { getXDomain, getAdjustedDomain } from './domain';
+export { useColorPicker } from './use_color_picker';
+export { getXAccessor } from './accessors';
diff --git a/src/plugins/vis_type_xy/public/utils/render_all_series.tsx b/src/plugins/vis_type_xy/public/utils/render_all_series.tsx
new file mode 100644
index 00000000000000..0bb909070163fd
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/utils/render_all_series.tsx
@@ -0,0 +1,179 @@
+/*
+ * 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 {
+  AreaSeries,
+  CurveType,
+  BarSeries,
+  XYChartSeriesIdentifier,
+  SeriesColorAccessorFn,
+  SeriesName,
+  Accessor,
+  AccessorFn,
+} from '@elastic/charts';
+import { ColorVariant } from '@elastic/charts/dist/utils/commons';
+
+import { DatatableRow } from '../../../expressions/public';
+
+import { ChartType } from '../../common';
+import { SeriesParam, VisConfig } from '../types';
+
+/**
+ * Matches vislib curve to elastic charts
+ * @param type curve type
+ */
+const getCurveType = (type?: 'linear' | 'cardinal' | 'step-after'): CurveType => {
+  switch (type) {
+    case 'cardinal':
+      return CurveType.CURVE_MONOTONE_X;
+    case 'step-after':
+      return CurveType.CURVE_STEP_AFTER;
+    case 'linear':
+    default:
+      return CurveType.LINEAR;
+  }
+};
+
+/**
+ * Renders chart Line, Area or Bar series
+ * @param config
+ * @param seriesParams
+ * @param data
+ * @param getSeriesName
+ * @param getSeriesColor
+ */
+export const renderAllSeries = (
+  { aspects, yAxes, xAxis, showValueLabel, enableHistogramMode, fittingFunction }: VisConfig,
+  seriesParams: SeriesParam[],
+  data: DatatableRow[],
+  getSeriesName: (series: XYChartSeriesIdentifier) => SeriesName,
+  getSeriesColor: SeriesColorAccessorFn,
+  timeZone: string,
+  xAccessor: Accessor | AccessorFn,
+  splitSeriesAccessors: Array<Accessor | AccessorFn>
+) =>
+  seriesParams.map(
+    ({
+      show,
+      valueAxis: groupId,
+      data: { id: paramId },
+      lineWidth: strokeWidth,
+      showCircles,
+      drawLinesBetweenPoints,
+      mode,
+      interpolate,
+      type,
+    }) => {
+      const yAspect = aspects.y.find(({ aggId }) => aggId === paramId);
+
+      if (!show || !yAspect || yAspect.accessor === null) {
+        return null;
+      }
+
+      const id = `${type}-${yAspect.accessor}`;
+      const yAxisScale = yAxes.find(({ groupId: axisGroupId }) => axisGroupId === groupId)?.scale;
+      const isStacked = mode === 'stacked' || yAxisScale?.mode === 'percentage';
+      const stackMode = yAxisScale?.mode === 'normal' ? undefined : yAxisScale?.mode;
+      // needed to seperate stacked and non-stacked bars into unique pseudo groups
+      const pseudoGroupId = isStacked ? `__pseudo_stacked_group-${groupId}__` : groupId;
+      // set domain of stacked groups to use actual groupId not pseudo groupdId
+      const useDefaultGroupDomain = isStacked ? groupId : undefined;
+
+      switch (type) {
+        case ChartType.Histogram:
+          return (
+            <BarSeries
+              key={id}
+              id={id}
+              name={getSeriesName}
+              color={getSeriesColor}
+              tickFormat={yAspect.formatter}
+              groupId={pseudoGroupId}
+              useDefaultGroupDomain={useDefaultGroupDomain}
+              xScaleType={xAxis.scale.type}
+              yScaleType={yAxisScale?.type}
+              xAccessor={xAccessor}
+              yAccessors={[yAspect.accessor]}
+              splitSeriesAccessors={splitSeriesAccessors}
+              data={data}
+              timeZone={timeZone}
+              stackAccessors={isStacked ? ['__any_value__'] : undefined}
+              enableHistogramMode={enableHistogramMode}
+              stackMode={stackMode}
+              minBarHeight={2}
+              displayValueSettings={{
+                showValueLabel,
+                hideClippedValue: true,
+              }}
+            />
+          );
+
+        case ChartType.Area:
+        case ChartType.Line:
+          const markSizeAccessor = showCircles ? aspects.z?.accessor ?? undefined : undefined;
+
+          return (
+            <AreaSeries
+              key={id}
+              id={id}
+              fit={fittingFunction}
+              color={getSeriesColor}
+              tickFormat={yAspect.formatter}
+              name={getSeriesName}
+              curve={getCurveType(interpolate)}
+              groupId={pseudoGroupId}
+              useDefaultGroupDomain={useDefaultGroupDomain}
+              xScaleType={xAxis.scale.type}
+              yScaleType={yAxisScale?.type}
+              xAccessor={xAccessor}
+              yAccessors={[yAspect.accessor]}
+              markSizeAccessor={markSizeAccessor}
+              markFormat={aspects.z?.formatter}
+              splitSeriesAccessors={splitSeriesAccessors}
+              data={data}
+              stackAccessors={isStacked ? ['__any_value__'] : undefined}
+              displayValueSettings={{
+                showValueLabel,
+                hideClippedValue: true,
+              }}
+              timeZone={timeZone}
+              stackMode={stackMode}
+              areaSeriesStyle={{
+                area: {
+                  ...(type === ChartType.Line && { opacity: 0 }),
+                },
+                line: {
+                  strokeWidth,
+                  visible: drawLinesBetweenPoints,
+                },
+                point: {
+                  visible: showCircles,
+                  fill: markSizeAccessor ? ColorVariant.Series : undefined,
+                },
+              }}
+            />
+          );
+        default:
+          // Error: unsupported chart type
+          return null;
+      }
+    }
+  );
diff --git a/src/plugins/vis_type_xy/public/utils/use_color_picker.tsx b/src/plugins/vis_type_xy/public/utils/use_color_picker.tsx
new file mode 100644
index 00000000000000..05de38b7700a98
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/utils/use_color_picker.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, { BaseSyntheticEvent, useMemo } from 'react';
+
+import { LegendColorPicker, Position, XYChartSeriesIdentifier, SeriesName } from '@elastic/charts';
+import { PopoverAnchorPosition, EuiWrappingPopover } from '@elastic/eui';
+
+import { ColorPicker } from '../../../charts/public';
+
+function getAnchorPosition(legendPosition: Position): PopoverAnchorPosition {
+  switch (legendPosition) {
+    case Position.Bottom:
+      return 'upCenter';
+    case Position.Top:
+      return 'downCenter';
+    case Position.Left:
+      return 'rightCenter';
+    default:
+      return 'leftCenter';
+  }
+}
+
+export const useColorPicker = (
+  legendPosition: Position,
+  setColor: (
+    newColor: string | null,
+    seriesKey: string | number,
+    event: BaseSyntheticEvent
+  ) => void,
+  getSeriesName: (series: XYChartSeriesIdentifier) => SeriesName
+): LegendColorPicker =>
+  useMemo(
+    () => ({ anchor, color, onClose, onChange, seriesIdentifier }) => {
+      const seriesName = getSeriesName(seriesIdentifier as XYChartSeriesIdentifier);
+      const handlChange = (newColor: string | null, event: BaseSyntheticEvent) => {
+        if (!seriesName) {
+          return;
+        }
+        if (newColor) {
+          onChange(newColor);
+        }
+        setColor(newColor, seriesName, event);
+        // must be called after onChange
+        onClose();
+      };
+
+      return (
+        <EuiWrappingPopover
+          isOpen
+          ownFocus
+          display="block"
+          button={anchor}
+          anchorPosition={getAnchorPosition(legendPosition)}
+          closePopover={onClose}
+          panelPaddingSize="s"
+        >
+          <ColorPicker color={color} onChange={handlChange} label={seriesName} />
+        </EuiWrappingPopover>
+      );
+    },
+    [getSeriesName, legendPosition, setColor]
+  );
diff --git a/src/plugins/vis_type_xy/public/vis_component.tsx b/src/plugins/vis_type_xy/public/vis_component.tsx
new file mode 100644
index 00000000000000..d87500218975a5
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/vis_component.tsx
@@ -0,0 +1,327 @@
+/*
+ * 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, {
+  BaseSyntheticEvent,
+  KeyboardEvent,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import {
+  Chart,
+  ElementClickListener,
+  XYChartElementEvent,
+  Position,
+  XYChartSeriesIdentifier,
+  BrushEndListener,
+  RenderChangeListener,
+  ScaleType,
+  AccessorFn,
+  Accessor,
+} from '@elastic/charts';
+import { keys } from '@elastic/eui';
+
+import { compact } from 'lodash';
+import {
+  getFilterFromChartClickEventFn,
+  getFilterFromSeriesFn,
+  LegendToggle,
+  getBrushFromChartBrushEventFn,
+  ClickTriggerEvent,
+} from '../../charts/public';
+import { Datatable, IInterpreterRenderHandlers } from '../../expressions/public';
+
+import { VisParams } from './types';
+import {
+  getAdjustedDomain,
+  getXDomain,
+  getTimeZone,
+  renderAllSeries,
+  getSeriesNameFn,
+  getLegendActions,
+  useColorPicker,
+  getXAccessor,
+} from './utils';
+import { XYAxis, XYEndzones, XYCurrentTime, XYSettings, XYThresholdLine } from './components';
+import { getConfig } from './config';
+import { getThemeService, getColorsService, getDataActions } from './services';
+import { ChartType } from '../common';
+
+import './_chart.scss';
+import {
+  COMPLEX_SPLIT_ACCESSOR,
+  getComplexAccessor,
+  getSplitSeriesAccessorFnMap,
+} from './utils/accessors';
+
+export interface VisComponentProps {
+  visParams: VisParams;
+  visData: Datatable;
+  uiState: IInterpreterRenderHandlers['uiState'];
+  fireEvent: IInterpreterRenderHandlers['event'];
+  renderComplete: IInterpreterRenderHandlers['done'];
+}
+
+export type VisComponentType = typeof VisComponent;
+
+const VisComponent = (props: VisComponentProps) => {
+  /**
+   * Stores all series labels to replicate vislib color map lookup
+   */
+  const allSeries: Array<string | number> = useMemo(() => [], []);
+  const [showLegend, setShowLegend] = useState<boolean>(() => {
+    // TODO: Check when this bwc can safely be removed
+    const bwcLegendStateDefault =
+      props.visParams.addLegend == null ? true : props.visParams.addLegend;
+    return props.uiState?.get('vis.legendOpen', bwcLegendStateDefault) as boolean;
+  });
+
+  useEffect(() => {
+    const fn = () => {
+      props?.uiState?.emit?.('reload');
+    };
+    props?.uiState?.on?.('change', fn);
+
+    return () => {
+      props?.uiState?.off?.('change', fn);
+    };
+  }, [props?.uiState]);
+
+  const onRenderChange = useCallback<RenderChangeListener>(
+    (isRendered) => {
+      if (isRendered) {
+        props.renderComplete();
+      }
+    },
+    [props]
+  );
+
+  const handleFilterClick = useCallback(
+    (
+      visData: Datatable,
+      xAccessor: Accessor | AccessorFn,
+      splitSeriesAccessors: Array<Accessor | AccessorFn>
+    ): ElementClickListener => {
+      const splitSeriesAccessorFnMap = getSplitSeriesAccessorFnMap(splitSeriesAccessors);
+      return (elements) => {
+        if (xAccessor !== null) {
+          const event = getFilterFromChartClickEventFn(
+            visData,
+            xAccessor,
+            splitSeriesAccessorFnMap
+          )(elements as XYChartElementEvent[]);
+          props.fireEvent(event);
+        }
+      };
+    },
+    [props]
+  );
+
+  const handleBrush = useCallback(
+    (
+      visData: Datatable,
+      xAccessor: Accessor | AccessorFn,
+      isInterval: boolean
+    ): BrushEndListener | undefined => {
+      if (xAccessor !== null && isInterval) {
+        return (brushArea) => {
+          const event = getBrushFromChartBrushEventFn(visData, xAccessor)(brushArea);
+          props.fireEvent(event);
+        };
+      }
+    },
+    [props]
+  );
+
+  const getFilterEventData = useCallback(
+    (
+      visData: Datatable,
+      xAccessor: Accessor | AccessorFn,
+      splitSeriesAccessors: Array<Accessor | AccessorFn>
+    ) => {
+      const splitSeriesAccessorFnMap = getSplitSeriesAccessorFnMap(splitSeriesAccessors);
+      return (series: XYChartSeriesIdentifier): ClickTriggerEvent | null => {
+        if (xAccessor !== null) {
+          return getFilterFromSeriesFn(visData)(series, splitSeriesAccessorFnMap);
+        }
+
+        return null;
+      };
+    },
+    []
+  );
+
+  const handleFilterAction = useCallback(
+    (event: ClickTriggerEvent, negate = false) => {
+      props.fireEvent({
+        ...event,
+        data: {
+          ...event.data,
+          negate,
+        },
+      });
+    },
+    [props]
+  );
+
+  const canFilter = async (event: ClickTriggerEvent | null): Promise<boolean> => {
+    if (!event) {
+      return false;
+    }
+    const filters = await getDataActions().createFiltersFromValueClickAction(event.data);
+    return Boolean(filters.length);
+  };
+
+  const toggleLegend = useCallback(() => {
+    setShowLegend((value) => {
+      const newValue = !value;
+      if (props.uiState?.set) {
+        props.uiState.set('vis.legendOpen', newValue);
+      }
+      return newValue;
+    });
+  }, [props.uiState]);
+
+  const setColor = useCallback(
+    (newColor: string | null, seriesLabel: string | number, event: BaseSyntheticEvent) => {
+      if ((event as KeyboardEvent).key && (event as KeyboardEvent).key !== keys.ENTER) {
+        return;
+      }
+
+      const colors = props.uiState?.get('vis.colors') || {};
+      if (colors[seriesLabel] === newColor || !newColor) {
+        delete colors[seriesLabel];
+      } else {
+        colors[seriesLabel] = newColor;
+      }
+
+      if (props.uiState?.set) {
+        props.uiState.setSilent('vis.colors', null);
+        props.uiState.set('vis.colors', colors);
+        props.uiState.emit('colorChanged');
+      }
+    },
+    [props.uiState]
+  );
+
+  const { visData, visParams } = props;
+  const config = getConfig(visData, visParams);
+  const timeZone = getTimeZone();
+  const xDomain =
+    config.xAxis.scale.type === ScaleType.Ordinal ? undefined : getXDomain(config.aspects.x.params);
+  const hasBars = visParams.seriesParams.some(
+    ({ type, data: { id: paramId } }) =>
+      type === ChartType.Histogram &&
+      config.aspects.y.find(({ aggId }) => aggId === paramId) !== undefined
+  );
+  const adjustedXDomain =
+    config.xAxis.scale.type === ScaleType.Ordinal
+      ? undefined
+      : getAdjustedDomain(visData.rows, config.aspects.x, timeZone, xDomain, hasBars);
+  const legendPosition = useMemo(() => config.legend.position ?? Position.Right, [
+    config.legend.position,
+  ]);
+  const isDarkMode = getThemeService().useDarkMode();
+  const getSeriesName = getSeriesNameFn(config.aspects, config.aspects.y.length > 1);
+
+  const getSeriesColor = useCallback(
+    (series: XYChartSeriesIdentifier) => {
+      const seriesName = getSeriesName(series);
+      if (!seriesName) {
+        return;
+      }
+
+      const overwriteColors: Record<string, string> = props.uiState?.get
+        ? props.uiState.get('vis.colors', {})
+        : {};
+
+      allSeries.push(seriesName);
+      return getColorsService().createColorLookupFunction(allSeries, overwriteColors)(seriesName);
+    },
+    [allSeries, getSeriesName, props.uiState]
+  );
+  const xAccessor = getXAccessor(config.aspects.x);
+  const splitSeriesAccessors = config.aspects.series
+    ? compact(config.aspects.series.map(getComplexAccessor(COMPLEX_SPLIT_ACCESSOR)))
+    : [];
+
+  return (
+    <div className="xyChart__container" data-test-subj="visTypeXyChart">
+      <LegendToggle
+        onClick={toggleLegend}
+        showLegend={showLegend}
+        legendPosition={legendPosition}
+      />
+      <Chart size="100%">
+        <XYSettings
+          {...config}
+          showLegend={showLegend}
+          legendPosition={legendPosition}
+          xDomain={xDomain}
+          adjustedXDomain={adjustedXDomain}
+          legendColorPicker={useColorPicker(legendPosition, setColor, getSeriesName)}
+          onElementClick={handleFilterClick(visData, xAccessor, splitSeriesAccessors)}
+          onBrushEnd={handleBrush(visData, xAccessor, 'interval' in config.aspects.x.params)}
+          onRenderChange={onRenderChange}
+          legendAction={
+            config.aspects.series && (config.aspects.series?.length ?? 0) > 0
+              ? getLegendActions(
+                  canFilter,
+                  getFilterEventData(visData, xAccessor, splitSeriesAccessors),
+                  handleFilterAction,
+                  getSeriesName
+                )
+              : undefined
+          }
+        />
+        <XYThresholdLine {...config.thresholdLine} />
+        <XYCurrentTime enabled={config.showCurrentTime} isDarkMode={isDarkMode} domain={xDomain} />
+        <XYEndzones
+          isFullBin={!config.enableHistogramMode}
+          enabled={config.isTimeChart}
+          isDarkMode={isDarkMode}
+          domain={xDomain}
+          hideTooltips={!config.detailedTooltip}
+          adjustedDomain={adjustedXDomain}
+        />
+        <XYAxis {...config.xAxis} />
+        {config.yAxes.map((axisProps) => (
+          <XYAxis key={axisProps.id} {...axisProps} />
+        ))}
+        {renderAllSeries(
+          config,
+          visParams.seriesParams,
+          visData.rows,
+          getSeriesName,
+          getSeriesColor,
+          timeZone,
+          xAccessor,
+          splitSeriesAccessors
+        )}
+      </Chart>
+    </div>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default memo(VisComponent);
diff --git a/src/plugins/vis_type_xy/public/vis_renderer.tsx b/src/plugins/vis_type_xy/public/vis_renderer.tsx
new file mode 100644
index 00000000000000..4ac7c23c30893a
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/vis_renderer.tsx
@@ -0,0 +1,70 @@
+/*
+ * 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, { lazy } from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+
+import { I18nProvider } from '@kbn/i18n/react';
+
+import { ExpressionRenderDefinition } from '../../expressions/public';
+import { VisualizationContainer } from '../../visualizations/public';
+
+import { XyVisType } from '../common';
+import { SplitChartWarning } from './components/split_chart_warning';
+import { VisComponentType } from './vis_component';
+import { RenderValue, visName } from './xy_vis_fn';
+
+// @ts-ignore
+const VisComponent = lazy<VisComponentType>(() => import('./vis_component'));
+
+function shouldShowNoResultsMessage(visData: any, visType: XyVisType): boolean {
+  const rows: object[] | undefined = visData?.rows;
+  const isZeroHits = visData?.hits === 0 || (rows && !rows.length);
+
+  return Boolean(isZeroHits);
+}
+
+export const xyVisRenderer: ExpressionRenderDefinition<RenderValue> = {
+  name: visName,
+  displayName: 'XY visualization',
+  reuseDomNode: true,
+  render: (domNode, { visData, visConfig, visType }, handlers) => {
+    const showNoResult = shouldShowNoResultsMessage(visData, visType);
+    const isSplitChart = Boolean(visConfig.dimensions.splitRow || visConfig.dimensions.splitRow);
+
+    handlers.onDestroy(() => unmountComponentAtNode(domNode));
+    render(
+      <I18nProvider>
+        <>
+          {isSplitChart && <SplitChartWarning />}
+          <VisualizationContainer handlers={handlers} showNoResult={showNoResult || isSplitChart}>
+            <VisComponent
+              visParams={visConfig}
+              visData={visData}
+              renderComplete={handlers.done}
+              fireEvent={handlers.event}
+              uiState={handlers.uiState}
+            />
+          </VisualizationContainer>
+        </>
+      </I18nProvider>,
+      domNode
+    );
+  },
+};
diff --git a/src/plugins/vis_type_xy/public/vis_types/area.tsx b/src/plugins/vis_type_xy/public/vis_types/area.tsx
new file mode 100644
index 00000000000000..9529456f17d557
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/vis_types/area.tsx
@@ -0,0 +1,201 @@
+/*
+ * 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';
+// @ts-ignore
+import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
+import { Fit, Position } from '@elastic/charts';
+
+import { Schemas } from '../../../vis_default_editor/public';
+import { AggGroupNames } from '../../../data/public';
+import { VIS_EVENT_TO_TRIGGER } from '../../../visualizations/public';
+import { defaultCountLabel, LabelRotation } from '../../../charts/public';
+
+import {
+  ChartMode,
+  AxisType,
+  ScaleType,
+  AxisMode,
+  ThresholdLineStyle,
+  InterpolationMode,
+  XyVisTypeDefinition,
+} from '../types';
+import { toExpressionAst } from '../to_ast';
+import { ChartType } from '../../common';
+import { getConfigCollections } from '../editor/collections';
+import { getOptionTabs } from '../editor/common_config';
+import { SplitTooltip } from './split_tooltip';
+
+export const getAreaVisTypeDefinition = (
+  showElasticChartsOptions = false
+): XyVisTypeDefinition => ({
+  name: 'area',
+  title: i18n.translate('visTypeXy.area.areaTitle', { defaultMessage: 'Area' }),
+  icon: 'visArea',
+  description: i18n.translate('visTypeXy.area.areaDescription', {
+    defaultMessage: 'Emphasize the data between an axis and a line.',
+  }),
+  toExpressionAst,
+  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  visConfig: {
+    defaults: {
+      type: ChartType.Area,
+      grid: {
+        categoryLines: false,
+      },
+      categoryAxes: [
+        {
+          id: 'CategoryAxis-1',
+          type: AxisType.Category,
+          position: Position.Bottom,
+          show: true,
+          scale: {
+            type: ScaleType.Linear,
+          },
+          labels: {
+            show: true,
+            filter: true,
+            truncate: 100,
+          },
+          title: {},
+          style: {},
+        },
+      ],
+      valueAxes: [
+        {
+          id: 'ValueAxis-1',
+          name: 'LeftAxis-1',
+          type: AxisType.Value,
+          position: Position.Left,
+          show: true,
+          scale: {
+            type: ScaleType.Linear,
+            mode: AxisMode.Normal,
+          },
+          labels: {
+            show: true,
+            rotate: LabelRotation.Horizontal,
+            filter: false,
+            truncate: 100,
+          },
+          title: {
+            text: defaultCountLabel,
+          },
+          style: {},
+        },
+      ],
+      seriesParams: [
+        {
+          show: true,
+          type: ChartType.Area,
+          mode: ChartMode.Stacked,
+          data: {
+            label: defaultCountLabel,
+            id: '1',
+          },
+          drawLinesBetweenPoints: true,
+          lineWidth: 2,
+          showCircles: true,
+          interpolate: InterpolationMode.Linear,
+          valueAxis: 'ValueAxis-1',
+        },
+      ],
+      addTooltip: true,
+      detailedTooltip: true,
+      addLegend: true,
+      legendPosition: Position.Right,
+      fittingFunction: Fit.Linear,
+      times: [],
+      addTimeMarker: false,
+      radiusRatio: 9,
+      thresholdLine: {
+        show: false,
+        value: 10,
+        width: 1,
+        style: ThresholdLineStyle.Full,
+        color: euiPaletteColorBlind()[9],
+      },
+      labels: {},
+    },
+  },
+  editorConfig: {
+    collections: getConfigCollections(),
+    optionTabs: getOptionTabs(showElasticChartsOptions),
+    schemas: new Schemas([
+      {
+        group: AggGroupNames.Metrics,
+        name: 'metric',
+        title: i18n.translate('visTypeXy.area.metricsTitle', {
+          defaultMessage: 'Y-axis',
+        }),
+        aggFilter: ['!geo_centroid', '!geo_bounds'],
+        min: 1,
+        defaults: [{ schema: 'metric', type: 'count' }],
+      },
+      {
+        group: AggGroupNames.Metrics,
+        name: 'radius',
+        title: i18n.translate('visTypeXy.area.radiusTitle', {
+          defaultMessage: 'Dot size',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'segment',
+        title: i18n.translate('visTypeXy.area.segmentTitle', {
+          defaultMessage: 'X-axis',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'group',
+        title: i18n.translate('visTypeXy.area.groupTitle', {
+          defaultMessage: 'Split series',
+        }),
+        min: 0,
+        max: 3,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'split',
+        title: i18n.translate('visTypeXy.area.splitTitle', {
+          defaultMessage: 'Split chart',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+        // TODO: Remove when split chart aggs are supported
+        // https://github.com/elastic/kibana/issues/82496
+        ...(showElasticChartsOptions && {
+          disabled: true,
+          tooltip: <SplitTooltip />,
+        }),
+      },
+    ]),
+  },
+});
diff --git a/src/plugins/vis_type_xy/public/vis_types/histogram.tsx b/src/plugins/vis_type_xy/public/vis_types/histogram.tsx
new file mode 100644
index 00000000000000..87fcd53729f57b
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/vis_types/histogram.tsx
@@ -0,0 +1,204 @@
+/*
+ * 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';
+// @ts-ignore
+import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
+import { Position } from '@elastic/charts';
+
+import { Schemas } from '../../../vis_default_editor/public';
+import { AggGroupNames } from '../../../data/public';
+import { VIS_EVENT_TO_TRIGGER } from '../../../visualizations/public';
+
+import {
+  ChartMode,
+  AxisType,
+  ScaleType,
+  AxisMode,
+  ThresholdLineStyle,
+  XyVisTypeDefinition,
+  InterpolationMode,
+} from '../types';
+import { toExpressionAst } from '../to_ast';
+import { ChartType } from '../../common';
+import { getConfigCollections } from '../editor/collections';
+import { getOptionTabs } from '../editor/common_config';
+import { defaultCountLabel, LabelRotation } from '../../../charts/public';
+import { SplitTooltip } from './split_tooltip';
+
+export const getHistogramVisTypeDefinition = (
+  showElasticChartsOptions = false
+): XyVisTypeDefinition => ({
+  name: 'histogram',
+  title: i18n.translate('visTypeXy.histogram.histogramTitle', {
+    defaultMessage: 'Vertical bar',
+  }),
+  icon: 'visBarVertical',
+  description: i18n.translate('visTypeXy.histogram.histogramDescription', {
+    defaultMessage: 'Present data in vertical bars on an axis.',
+  }),
+  toExpressionAst,
+  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  visConfig: {
+    defaults: {
+      type: ChartType.Histogram,
+      grid: {
+        categoryLines: false,
+      },
+      categoryAxes: [
+        {
+          id: 'CategoryAxis-1',
+          type: AxisType.Category,
+          position: Position.Bottom,
+          show: true,
+          scale: {
+            type: ScaleType.Linear,
+          },
+          labels: {
+            show: true,
+            filter: true,
+            truncate: 100,
+          },
+          title: {},
+          style: {},
+        },
+      ],
+      valueAxes: [
+        {
+          id: 'ValueAxis-1',
+          name: 'LeftAxis-1',
+          type: AxisType.Value,
+          position: Position.Left,
+          show: true,
+          scale: {
+            type: ScaleType.Linear,
+            mode: AxisMode.Normal,
+          },
+          labels: {
+            show: true,
+            rotate: LabelRotation.Horizontal,
+            filter: false,
+            truncate: 100,
+          },
+          title: {
+            text: defaultCountLabel,
+          },
+          style: {},
+        },
+      ],
+      seriesParams: [
+        {
+          show: true,
+          type: ChartType.Histogram,
+          mode: ChartMode.Stacked,
+          data: {
+            label: defaultCountLabel,
+            id: '1',
+          },
+          interpolate: InterpolationMode.Linear,
+          valueAxis: 'ValueAxis-1',
+          drawLinesBetweenPoints: true,
+          lineWidth: 2,
+          showCircles: true,
+        },
+      ],
+      radiusRatio: 0,
+      addTooltip: true,
+      detailedTooltip: true,
+      addLegend: true,
+      legendPosition: Position.Right,
+      times: [],
+      addTimeMarker: false,
+      labels: {
+        show: false,
+      },
+      thresholdLine: {
+        show: false,
+        value: 10,
+        width: 1,
+        style: ThresholdLineStyle.Full,
+        color: euiPaletteColorBlind()[9],
+      },
+    },
+  },
+  editorConfig: {
+    collections: getConfigCollections(),
+    optionTabs: getOptionTabs(showElasticChartsOptions),
+    schemas: new Schemas([
+      {
+        group: AggGroupNames.Metrics,
+        name: 'metric',
+        title: i18n.translate('visTypeXy.histogram.metricTitle', {
+          defaultMessage: 'Y-axis',
+        }),
+        min: 1,
+        aggFilter: ['!geo_centroid', '!geo_bounds'],
+        defaults: [{ schema: 'metric', type: 'count' }],
+      },
+      {
+        group: AggGroupNames.Metrics,
+        name: 'radius',
+        title: i18n.translate('visTypeXy.histogram.radiusTitle', {
+          defaultMessage: 'Dot size',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'segment',
+        title: i18n.translate('visTypeXy.histogram.segmentTitle', {
+          defaultMessage: 'X-axis',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'group',
+        title: i18n.translate('visTypeXy.histogram.groupTitle', {
+          defaultMessage: 'Split series',
+        }),
+        min: 0,
+        max: 3,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'split',
+        title: i18n.translate('visTypeXy.histogram.splitTitle', {
+          defaultMessage: 'Split chart',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+        // TODO: Remove when split chart aggs are supported
+        // https://github.com/elastic/kibana/issues/82496
+        ...(showElasticChartsOptions && {
+          disabled: true,
+          tooltip: <SplitTooltip />,
+        }),
+      },
+    ]),
+  },
+});
diff --git a/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.tsx b/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.tsx
new file mode 100644
index 00000000000000..2806cb8e149838
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.tsx
@@ -0,0 +1,203 @@
+/*
+ * 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';
+// @ts-ignore
+import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
+import { Position } from '@elastic/charts';
+
+import { Schemas } from '../../../vis_default_editor/public';
+import { AggGroupNames } from '../../../data/public';
+import { VIS_EVENT_TO_TRIGGER } from '../../../visualizations/public';
+
+import {
+  ChartMode,
+  AxisType,
+  ScaleType,
+  AxisMode,
+  ThresholdLineStyle,
+  XyVisTypeDefinition,
+  InterpolationMode,
+} from '../types';
+import { toExpressionAst } from '../to_ast';
+import { ChartType } from '../../common';
+import { getConfigCollections } from '../editor/collections';
+import { getOptionTabs } from '../editor/common_config';
+import { defaultCountLabel, LabelRotation } from '../../../charts/public';
+import { SplitTooltip } from './split_tooltip';
+
+export const getHorizontalBarVisTypeDefinition = (
+  showElasticChartsOptions = false
+): XyVisTypeDefinition => ({
+  name: 'horizontal_bar',
+  title: i18n.translate('visTypeXy.horizontalBar.horizontalBarTitle', {
+    defaultMessage: 'Horizontal bar',
+  }),
+  icon: 'visBarHorizontal',
+  description: i18n.translate('visTypeXy.horizontalBar.horizontalBarDescription', {
+    defaultMessage: 'Present data in horizontal bars on an axis.',
+  }),
+  toExpressionAst,
+  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  visConfig: {
+    defaults: {
+      type: ChartType.Histogram,
+      grid: {
+        categoryLines: false,
+      },
+      categoryAxes: [
+        {
+          id: 'CategoryAxis-1',
+          type: AxisType.Category,
+          position: Position.Left,
+          show: true,
+          scale: {
+            type: ScaleType.Linear,
+          },
+          labels: {
+            show: true,
+            rotate: LabelRotation.Horizontal,
+            filter: false,
+            truncate: 200,
+          },
+          title: {},
+          style: {},
+        },
+      ],
+      valueAxes: [
+        {
+          id: 'ValueAxis-1',
+          name: 'LeftAxis-1',
+          type: AxisType.Value,
+          position: Position.Bottom,
+          show: true,
+          scale: {
+            type: ScaleType.Linear,
+            mode: AxisMode.Normal,
+          },
+          labels: {
+            show: true,
+            rotate: LabelRotation.Angled,
+            filter: true,
+            truncate: 100,
+          },
+          title: {
+            text: defaultCountLabel,
+          },
+          style: {},
+        },
+      ],
+      seriesParams: [
+        {
+          show: true,
+          type: ChartType.Histogram,
+          mode: ChartMode.Normal,
+          data: {
+            label: defaultCountLabel,
+            id: '1',
+          },
+          interpolate: InterpolationMode.Linear,
+          valueAxis: 'ValueAxis-1',
+          drawLinesBetweenPoints: true,
+          lineWidth: 2,
+          showCircles: true,
+        },
+      ],
+      addTooltip: true,
+      detailedTooltip: true,
+      addLegend: true,
+      legendPosition: Position.Right,
+      times: [],
+      addTimeMarker: false,
+      labels: {},
+      radiusRatio: 0,
+      thresholdLine: {
+        show: false,
+        value: 10,
+        width: 1,
+        style: ThresholdLineStyle.Full,
+        color: euiPaletteColorBlind()[9],
+      },
+    },
+  },
+  editorConfig: {
+    collections: getConfigCollections(),
+    optionTabs: getOptionTabs(showElasticChartsOptions),
+    schemas: new Schemas([
+      {
+        group: AggGroupNames.Metrics,
+        name: 'metric',
+        title: i18n.translate('visTypeXy.horizontalBar.metricTitle', {
+          defaultMessage: 'Y-axis',
+        }),
+        min: 1,
+        aggFilter: ['!geo_centroid', '!geo_bounds'],
+        defaults: [{ schema: 'metric', type: 'count' }],
+      },
+      {
+        group: AggGroupNames.Metrics,
+        name: 'radius',
+        title: i18n.translate('visTypeXy.horizontalBar.radiusTitle', {
+          defaultMessage: 'Dot size',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'segment',
+        title: i18n.translate('visTypeXy.horizontalBar.segmentTitle', {
+          defaultMessage: 'X-axis',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'group',
+        title: i18n.translate('visTypeXy.horizontalBar.groupTitle', {
+          defaultMessage: 'Split series',
+        }),
+        min: 0,
+        max: 3,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'split',
+        title: i18n.translate('visTypeXy.horizontalBar.splitTitle', {
+          defaultMessage: 'Split chart',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+        // TODO: Remove when split chart aggs are supported
+        // https://github.com/elastic/kibana/issues/82496
+        ...(showElasticChartsOptions && {
+          disabled: true,
+          tooltip: <SplitTooltip />,
+        }),
+      },
+    ]),
+  },
+});
diff --git a/src/plugins/vis_type_xy/public/vis_types/index.ts b/src/plugins/vis_type_xy/public/vis_types/index.ts
new file mode 100644
index 00000000000000..7c07a5b31ba70f
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/vis_types/index.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 { getAreaVisTypeDefinition } from './area';
+import { getLineVisTypeDefinition } from './line';
+import { getHistogramVisTypeDefinition } from './histogram';
+import { getHorizontalBarVisTypeDefinition } from './horizontal_bar';
+import { XyVisTypeDefinition } from '../types';
+
+export const visTypesDefinitions = [
+  getAreaVisTypeDefinition(true),
+  getLineVisTypeDefinition(true),
+  getHistogramVisTypeDefinition(true),
+  getHorizontalBarVisTypeDefinition(true),
+];
+
+// TODO: Remove when vis_type_vislib is removed
+// https://github.com/elastic/kibana/issues/56143
+export const xyVisTypes: Record<
+  string,
+  (showElasticChartsOptions?: boolean) => XyVisTypeDefinition
+> = {
+  area: getAreaVisTypeDefinition,
+  line: getLineVisTypeDefinition,
+  histogram: getHistogramVisTypeDefinition,
+  horizontalBar: getHorizontalBarVisTypeDefinition,
+};
diff --git a/src/plugins/vis_type_xy/public/vis_types/line.tsx b/src/plugins/vis_type_xy/public/vis_types/line.tsx
new file mode 100644
index 00000000000000..84e4070df495b8
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/vis_types/line.tsx
@@ -0,0 +1,195 @@
+/*
+ * 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';
+// @ts-ignore
+import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
+import { Position, Fit } from '@elastic/charts';
+
+import { Schemas } from '../../../vis_default_editor/public';
+import { AggGroupNames } from '../../../data/public';
+import { VIS_EVENT_TO_TRIGGER } from '../../../visualizations/public';
+import { defaultCountLabel, LabelRotation } from '../../../charts/public';
+
+import {
+  ChartMode,
+  AxisType,
+  ScaleType,
+  AxisMode,
+  ThresholdLineStyle,
+  InterpolationMode,
+  XyVisTypeDefinition,
+} from '../types';
+import { toExpressionAst } from '../to_ast';
+import { ChartType } from '../../common';
+import { getConfigCollections } from '../editor/collections';
+import { getOptionTabs } from '../editor/common_config';
+import { SplitTooltip } from './split_tooltip';
+
+export const getLineVisTypeDefinition = (
+  showElasticChartsOptions = false
+): XyVisTypeDefinition => ({
+  name: 'line',
+  title: i18n.translate('visTypeXy.line.lineTitle', { defaultMessage: 'Line' }),
+  icon: 'visLine',
+  description: i18n.translate('visTypeXy.line.lineDescription', {
+    defaultMessage: 'Display data as a series of points.',
+  }),
+  toExpressionAst,
+  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  visConfig: {
+    defaults: {
+      type: ChartType.Line,
+      grid: {
+        categoryLines: false,
+      },
+      categoryAxes: [
+        {
+          id: 'CategoryAxis-1',
+          type: AxisType.Category,
+          position: Position.Bottom,
+          show: true,
+          scale: {
+            type: ScaleType.Linear,
+          },
+          labels: {
+            show: true,
+            filter: true,
+            truncate: 100,
+          },
+          title: {},
+          style: {},
+        },
+      ],
+      valueAxes: [
+        {
+          id: 'ValueAxis-1',
+          name: 'LeftAxis-1',
+          type: AxisType.Value,
+          position: Position.Left,
+          show: true,
+          scale: {
+            type: ScaleType.Linear,
+            mode: AxisMode.Normal,
+          },
+          labels: {
+            show: true,
+            rotate: LabelRotation.Horizontal,
+            filter: false,
+            truncate: 100,
+          },
+          title: {
+            text: defaultCountLabel,
+          },
+          style: {},
+        },
+      ],
+      seriesParams: [
+        {
+          show: true,
+          type: ChartType.Line,
+          mode: ChartMode.Normal,
+          data: {
+            label: defaultCountLabel,
+            id: '1',
+          },
+          valueAxis: 'ValueAxis-1',
+          drawLinesBetweenPoints: true,
+          lineWidth: 2,
+          interpolate: InterpolationMode.Linear,
+          showCircles: true,
+        },
+      ],
+      addTooltip: true,
+      detailedTooltip: true,
+      addLegend: true,
+      legendPosition: Position.Right,
+      fittingFunction: Fit.Linear,
+      times: [],
+      addTimeMarker: false,
+      labels: {},
+      radiusRatio: 9,
+      thresholdLine: {
+        show: false,
+        value: 10,
+        width: 1,
+        style: ThresholdLineStyle.Full,
+        color: euiPaletteColorBlind()[9],
+      },
+    },
+  },
+  editorConfig: {
+    collections: getConfigCollections(),
+    optionTabs: getOptionTabs(showElasticChartsOptions),
+    schemas: new Schemas([
+      {
+        group: AggGroupNames.Metrics,
+        name: 'metric',
+        title: i18n.translate('visTypeXy.line.metricTitle', { defaultMessage: 'Y-axis' }),
+        min: 1,
+        aggFilter: ['!geo_centroid', '!geo_bounds'],
+        defaults: [{ schema: 'metric', type: 'count' }],
+      },
+      {
+        group: AggGroupNames.Metrics,
+        name: 'radius',
+        title: i18n.translate('visTypeXy.line.radiusTitle', { defaultMessage: 'Dot size' }),
+        min: 0,
+        max: 1,
+        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality', 'top_hits'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'segment',
+        title: i18n.translate('visTypeXy.line.segmentTitle', { defaultMessage: 'X-axis' }),
+        min: 0,
+        max: 1,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'group',
+        title: i18n.translate('visTypeXy.line.groupTitle', {
+          defaultMessage: 'Split series',
+        }),
+        min: 0,
+        max: 3,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'split',
+        title: i18n.translate('visTypeXy.line.splitTitle', {
+          defaultMessage: 'Split chart',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+        // TODO: Remove when split chart aggs are supported
+        // https://github.com/elastic/kibana/issues/82496
+        ...(showElasticChartsOptions && {
+          disabled: true,
+          tooltip: <SplitTooltip />,
+        }),
+      },
+    ]),
+  },
+});
diff --git a/src/plugins/vis_type_xy/public/vis_types/split_tooltip.tsx b/src/plugins/vis_type_xy/public/vis_types/split_tooltip.tsx
new file mode 100644
index 00000000000000..2abe3e9b8cf712
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/vis_types/split_tooltip.tsx
@@ -0,0 +1,34 @@
+/*
+ * 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 { FormattedMessage } from '@kbn/i18n/react';
+
+export function SplitTooltip() {
+  return (
+    <FormattedMessage
+      id="visTypeXy.splitTitle.tooltip"
+      defaultMessage="Split chart aggregation is not supported with the new {setting}. Please disable the {setting} advanced setting to enable split chart aggregation"
+      values={{
+        setting: <strong>charts library</strong>,
+      }}
+    />
+  );
+}
diff --git a/src/plugins/vis_type_xy/public/xy_vis_fn.ts b/src/plugins/vis_type_xy/public/xy_vis_fn.ts
new file mode 100644
index 00000000000000..47c4caf243b369
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/xy_vis_fn.ts
@@ -0,0 +1,86 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+import { ExpressionFunctionDefinition, Datatable, Render } from '../../expressions/public';
+
+import { ChartType, XyVisType } from '../common';
+import { VisParams } from './types';
+
+export const visName = 'xy_vis';
+
+interface Arguments {
+  type: XyVisType;
+  visConfig: string;
+}
+export interface RenderValue {
+  visData: Datatable;
+  visType: ChartType;
+  visConfig: VisParams;
+}
+
+export type VisTypeXyExpressionFunctionDefinition = ExpressionFunctionDefinition<
+  typeof visName,
+  Datatable,
+  Arguments,
+  Render<RenderValue>
+>;
+
+export const createVisTypeXyVisFn = (): VisTypeXyExpressionFunctionDefinition => ({
+  name: visName,
+  type: 'render',
+  context: {
+    types: ['datatable'],
+  },
+  help: i18n.translate('visTypeXy.functions.help', {
+    defaultMessage: 'XY visualization',
+  }),
+  args: {
+    type: {
+      types: ['string'],
+      default: '""',
+      help: 'xy vis type',
+    },
+    visConfig: {
+      types: ['string'],
+      default: '"{}"',
+      help: 'xy vis config',
+    },
+  },
+  fn(context, args, handlers) {
+    const visConfig = JSON.parse(args.visConfig) as VisParams;
+    const visType = visConfig.type;
+
+    if (handlers?.inspectorAdapters?.tables) {
+      handlers.inspectorAdapters.tables.logDatatable('default', context);
+    }
+
+    return {
+      type: 'render',
+      as: visName,
+      value: {
+        context,
+        visType,
+        visConfig,
+        visData: context,
+      },
+    };
+  },
+});
diff --git a/src/plugins/vis_type_xy/server/index.ts b/src/plugins/vis_type_xy/server/index.ts
index afc879dc9c8456..62c8ef1876d548 100644
--- a/src/plugins/vis_type_xy/server/index.ts
+++ b/src/plugins/vis_type_xy/server/index.ts
@@ -17,13 +17,6 @@
  * under the License.
  */
 
-import { schema } from '@kbn/config-schema';
+import { VisTypeXyServerPlugin } from './plugin';
 
-export const config = {
-  schema: schema.object({ enabled: schema.boolean({ defaultValue: false }) }),
-};
-
-export const plugin = () => ({
-  setup() {},
-  start() {},
-});
+export const plugin = () => new VisTypeXyServerPlugin();
diff --git a/src/plugins/vis_type_xy/server/plugin.ts b/src/plugins/vis_type_xy/server/plugin.ts
new file mode 100644
index 00000000000000..51d741f9374fe7
--- /dev/null
+++ b/src/plugins/vis_type_xy/server/plugin.ts
@@ -0,0 +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.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { schema } from '@kbn/config-schema';
+
+import { CoreSetup, Plugin, UiSettingsParams } from 'kibana/server';
+
+import { CHARTS_LIBRARY } from '../common';
+
+export const uiSettingsConfig: Record<string, UiSettingsParams<boolean>> = {
+  // TODO: Remove this when vis_type_vislib is removed
+  // https://github.com/elastic/kibana/issues/56143
+  [CHARTS_LIBRARY]: {
+    name: i18n.translate('visTypeXy.advancedSettings.visualization.chartsLibrary', {
+      defaultMessage: 'Charts library',
+    }),
+    value: false,
+    description: i18n.translate(
+      'visTypeXy.advancedSettings.visualization.chartsLibrary.description',
+      {
+        defaultMessage:
+          'Enables new charts library for areas, lines and bars in visualize. Currently, does <strong>not</strong> support split chart aggregation.',
+      }
+    ),
+    category: ['visualization'],
+    schema: schema.boolean(),
+  },
+};
+
+export class VisTypeXyServerPlugin implements Plugin<object, object> {
+  public setup(core: CoreSetup) {
+    core.uiSettings.register(uiSettingsConfig);
+
+    return {};
+  }
+
+  public start() {
+    return {};
+  }
+}
diff --git a/src/plugins/visualizations/public/index.ts b/src/plugins/visualizations/public/index.ts
index d66a6f6113cad7..662350bfc3bd00 100644
--- a/src/plugins/visualizations/public/index.ts
+++ b/src/plugins/visualizations/public/index.ts
@@ -48,6 +48,7 @@ export { SchemaConfig, BuildPipelineParams } from './legacy/build_pipeline';
 export { updateOldState } from './legacy/vis_update_state';
 export { PersistedState } from './persisted_state';
 export {
+  VisualizationControllerConstructor,
   VisualizationController,
   SavedVisState,
   ISavedVis,
diff --git a/src/plugins/visualizations/public/legacy/build_pipeline.ts b/src/plugins/visualizations/public/legacy/build_pipeline.ts
index c10f47c39b47d5..0b422802a7e1b4 100644
--- a/src/plugins/visualizations/public/legacy/build_pipeline.ts
+++ b/src/plugins/visualizations/public/legacy/build_pipeline.ts
@@ -23,7 +23,9 @@ import {
   SerializedFieldFormat,
 } from '../../../../plugins/expressions/public';
 import { IAggConfig, search, TimefilterContract } from '../../../../plugins/data/public';
+
 import { Vis, VisParams } from '../types';
+
 const { isDateHistogramBucketAggConfig } = search.aggs;
 
 interface SchemaConfigParams {
diff --git a/src/plugins/visualizations/public/types.ts b/src/plugins/visualizations/public/types.ts
index 3c322f5e79165b..829c1aed49013e 100644
--- a/src/plugins/visualizations/public/types.ts
+++ b/src/plugins/visualizations/public/types.ts
@@ -17,13 +17,14 @@
  * under the License.
  */
 
-import { ExpressionAstExpression } from 'src/plugins/expressions';
 import { SavedObject } from '../../../plugins/saved_objects/public';
 import {
   AggConfigOptions,
   SearchSourceFields,
   TimefilterContract,
 } from '../../../plugins/data/public';
+import { ExpressionAstExpression } from '../../expressions/public';
+
 import { SerializedVis, Vis, VisParams } from './vis';
 import { ExprVis } from './expressions/vis';
 
diff --git a/src/plugins/visualizations/public/vis.ts b/src/plugins/visualizations/public/vis.ts
index 75c889af3d5c9e..9d3e6825307008 100644
--- a/src/plugins/visualizations/public/vis.ts
+++ b/src/plugins/visualizations/public/vis.ts
@@ -30,6 +30,7 @@
 import { isFunction, defaults, cloneDeep } from 'lodash';
 import { Assign } from '@kbn/utility-types';
 import { i18n } from '@kbn/i18n';
+
 import { PersistedState } from './persisted_state';
 import { getTypes, getAggs, getSearch, getSavedSearchLoader } from './services';
 import { VisType } from './vis_types';
diff --git a/src/plugins/visualizations/server/saved_objects/visualization_migrations.test.ts b/src/plugins/visualizations/server/saved_objects/visualization_migrations.test.ts
index 17c55af32005d5..d3fc5de93c3669 100644
--- a/src/plugins/visualizations/server/saved_objects/visualization_migrations.test.ts
+++ b/src/plugins/visualizations/server/saved_objects/visualization_migrations.test.ts
@@ -1676,4 +1676,94 @@ describe('migration visualization', () => {
       expect(visState.params.showToolbar).toEqual(true);
     });
   });
+
+  describe('7.12.0 update vislib visualization defaults', () => {
+    const migrate = (doc: any) =>
+      visualizationSavedObjectTypeMigrations['7.12.0'](
+        doc as Parameters<SavedObjectMigrationFn>[0],
+        savedObjectMigrationContext
+      );
+    const getTestDoc = (type = 'area', categoryAxes?: object[], valueAxes?: object[]) => ({
+      attributes: {
+        title: 'My Vis',
+        description: 'This is my super cool vis.',
+        visState: JSON.stringify({
+          type,
+          title: '[Flights] Delay Type',
+          params: {
+            type: type === 'horizontal_bar' ? 'histogram' : type,
+            categoryAxes: categoryAxes ?? [
+              {
+                labels: {},
+              },
+            ],
+            valueAxes: valueAxes ?? [
+              {
+                labels: {},
+              },
+            ],
+          },
+        }),
+      },
+    });
+
+    it('should return original doc if not area, line or histogram chart', () => {
+      const doc = getTestDoc('pie');
+      const migratedTestDoc = migrate(doc);
+      expect(migratedTestDoc).toEqual(doc);
+    });
+
+    it('should decorate existing docs with isVislibVis flag', () => {
+      const migratedTestDoc = migrate(getTestDoc());
+      const { isVislibVis } = JSON.parse(migratedTestDoc.attributes.visState).params;
+
+      expect(isVislibVis).toEqual(true);
+    });
+
+    describe('labels.filter', () => {
+      it('should keep existing categoryAxes labels.filter value', () => {
+        const migratedTestDoc = migrate(getTestDoc('area', [{ labels: { filter: false } }]));
+        const [result] = JSON.parse(migratedTestDoc.attributes.visState).params.categoryAxes;
+
+        expect(result.labels.filter).toEqual(false);
+      });
+
+      it('should keep existing valueAxes labels.filter value', () => {
+        const migratedTestDoc = migrate(
+          getTestDoc('area', undefined, [{ labels: { filter: true } }])
+        );
+        const [result] = JSON.parse(migratedTestDoc.attributes.visState).params.valueAxes;
+
+        expect(result.labels.filter).toEqual(true);
+      });
+
+      it('should set categoryAxes labels.filter to true for non horizontal_bar', () => {
+        const migratedTestDoc = migrate(getTestDoc());
+        const [result] = JSON.parse(migratedTestDoc.attributes.visState).params.categoryAxes;
+
+        expect(result.labels.filter).toEqual(true);
+      });
+
+      it('should set categoryAxes labels.filter to false for horizontal_bar', () => {
+        const migratedTestDoc = migrate(getTestDoc('horizontal_bar'));
+        const [result] = JSON.parse(migratedTestDoc.attributes.visState).params.categoryAxes;
+
+        expect(result.labels.filter).toEqual(false);
+      });
+
+      it('should set valueAxes labels.filter to false for non horizontal_bar', () => {
+        const migratedTestDoc = migrate(getTestDoc());
+        const [result] = JSON.parse(migratedTestDoc.attributes.visState).params.valueAxes;
+
+        expect(result.labels.filter).toEqual(false);
+      });
+
+      it('should set valueAxes labels.filter to true for horizontal_bar', () => {
+        const migratedTestDoc = migrate(getTestDoc('horizontal_bar'));
+        const [result] = JSON.parse(migratedTestDoc.attributes.visState).params.valueAxes;
+
+        expect(result.labels.filter).toEqual(true);
+      });
+    });
+  });
 });
diff --git a/src/plugins/visualizations/server/saved_objects/visualization_migrations.ts b/src/plugins/visualizations/server/saved_objects/visualization_migrations.ts
index bdd87e355499b8..c625662ab7fe3d 100644
--- a/src/plugins/visualizations/server/saved_objects/visualization_migrations.ts
+++ b/src/plugins/visualizations/server/saved_objects/visualization_migrations.ts
@@ -17,8 +17,11 @@
  * under the License.
  */
 
-import { SavedObjectMigrationFn } from 'kibana/server';
 import { cloneDeep, get, omit, has, flow } from 'lodash';
+
+import { SavedObjectMigrationFn } from 'kibana/server';
+
+import { ChartType } from '../../../vis_type_xy/common';
 import { DEFAULT_QUERY_LANGUAGE } from '../../../data/common';
 
 const migrateIndexPattern: SavedObjectMigrationFn<any, any> = (doc) => {
@@ -786,6 +789,69 @@ const enableDataTableVisToolbar: SavedObjectMigrationFn<any, any> = (doc) => {
   return doc;
 };
 
+/**
+ * Decorate axes with default label filter value
+ */
+const decorateAxes = <T extends { labels: { filter?: boolean } }>(
+  axes: T[],
+  fallback: boolean
+): T[] =>
+  axes.map((axis) => ({
+    ...axis,
+    labels: {
+      ...axis.labels,
+      filter: axis.labels.filter ?? fallback,
+    },
+  }));
+
+/**
+ * Migrate vislib bar, line and area charts to use new vis_type_xy plugin
+ */
+const migrateVislibAreaLineBarTypes: SavedObjectMigrationFn<any, any> = (doc) => {
+  const visStateJSON = get(doc, 'attributes.visState');
+  let visState;
+
+  if (visStateJSON) {
+    try {
+      visState = JSON.parse(visStateJSON);
+    } catch (e) {
+      // Let it go, the data is invalid and we'll leave it as is
+    }
+    if (
+      visState &&
+      [ChartType.Area, ChartType.Line, ChartType.Histogram].includes(visState?.params?.type)
+    ) {
+      const isHorizontalBar = visState.type === 'horizontal_bar';
+      const isLineOrArea =
+        visState?.params?.type === ChartType.Area || visState?.params?.type === ChartType.Line;
+      return {
+        ...doc,
+        attributes: {
+          ...doc.attributes,
+          visState: JSON.stringify({
+            ...visState,
+            params: {
+              ...visState.params,
+              categoryAxes:
+                visState.params.categoryAxes &&
+                decorateAxes(visState.params.categoryAxes, !isHorizontalBar),
+              valueAxes:
+                visState.params.valueAxes &&
+                decorateAxes(visState.params.valueAxes, isHorizontalBar),
+              isVislibVis: true,
+              detailedTooltip: true,
+              ...(isLineOrArea && {
+                fittingFunction: 'zero',
+              }),
+            },
+          }),
+        },
+      };
+    }
+  }
+  return doc;
+};
+
 export const visualizationSavedObjectTypeMigrations = {
   /**
    * We need to have this migration twice, once with a version prior to 7.0.0 once with a version
@@ -820,4 +886,5 @@ export const visualizationSavedObjectTypeMigrations = {
   '7.9.3': flow(migrateMatchAllQuery),
   '7.10.0': flow(migrateFilterRatioQuery, removeTSVBSearchSource),
   '7.11.0': flow(enableDataTableVisToolbar),
+  '7.12.0': flow(migrateVislibAreaLineBarTypes),
 };
diff --git a/test/api_integration/apis/saved_objects/find.js b/test/api_integration/apis/saved_objects/find.js
index 59a10379a94234..208343a04f0f23 100644
--- a/test/api_integration/apis/saved_objects/find.js
+++ b/test/api_integration/apis/saved_objects/find.js
@@ -195,9 +195,7 @@ export default function ({ getService }) {
                       title: 'Count of requests',
                     },
                     id: 'dd7caf20-9efd-11e7-acb3-3dab96693fab',
-                    migrationVersion: {
-                      visualization: '7.11.0',
-                    },
+                    migrationVersion: resp.body.saved_objects[0].migrationVersion,
                     namespaces: ['foo-ns'],
                     references: [
                       {
diff --git a/test/functional/apps/dashboard/bwc_shared_urls.js b/test/functional/apps/dashboard/bwc_shared_urls.ts
similarity index 97%
rename from test/functional/apps/dashboard/bwc_shared_urls.js
rename to test/functional/apps/dashboard/bwc_shared_urls.ts
index 75a4ee436ee8dc..3b54b04ece6ac1 100644
--- a/test/functional/apps/dashboard/bwc_shared_urls.js
+++ b/test/functional/apps/dashboard/bwc_shared_urls.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['dashboard', 'header']);
   const dashboardExpect = getService('dashboardExpect');
   const pieChart = getService('pieChart');
@@ -27,7 +29,7 @@ export default function ({ getService, getPageObjects }) {
   const log = getService('log');
   const queryBar = getService('queryBar');
 
-  let kibanaLegacyBaseUrl;
+  let kibanaLegacyBaseUrl: string;
 
   const urlQuery =
     `` +
diff --git a/test/functional/apps/dashboard/create_and_add_embeddables.js b/test/functional/apps/dashboard/create_and_add_embeddables.ts
similarity index 97%
rename from test/functional/apps/dashboard/create_and_add_embeddables.js
rename to test/functional/apps/dashboard/create_and_add_embeddables.ts
index c315828c594fa0..d8b8a6f91fe317 100644
--- a/test/functional/apps/dashboard/create_and_add_embeddables.js
+++ b/test/functional/apps/dashboard/create_and_add_embeddables.ts
@@ -21,8 +21,9 @@ import expect from '@kbn/expect';
 
 import { VisualizeConstants } from '../../../../src/plugins/visualize/public/application/visualize_constants';
 import { VISUALIZE_ENABLE_LABS_SETTING } from '../../../../src/plugins/visualizations/common/constants';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
-export default function ({ getService, getPageObjects }) {
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const PageObjects = getPageObjects(['dashboard', 'header', 'visualize', 'settings', 'common']);
   const browser = getService('browser');
diff --git a/test/functional/apps/dashboard/dashboard_clone.js b/test/functional/apps/dashboard/dashboard_clone.ts
similarity index 96%
rename from test/functional/apps/dashboard/dashboard_clone.js
rename to test/functional/apps/dashboard/dashboard_clone.ts
index 298cacef22dd5f..92e8cf539786f9 100644
--- a/test/functional/apps/dashboard/dashboard_clone.js
+++ b/test/functional/apps/dashboard/dashboard_clone.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const listingTable = getService('listingTable');
   const PageObjects = getPageObjects(['dashboard', 'header', 'common']);
diff --git a/test/functional/apps/dashboard/dashboard_filter_bar.js b/test/functional/apps/dashboard/dashboard_filter_bar.ts
similarity index 98%
rename from test/functional/apps/dashboard/dashboard_filter_bar.js
rename to test/functional/apps/dashboard/dashboard_filter_bar.ts
index cbef274b78e93b..228e33cab0d8b3 100644
--- a/test/functional/apps/dashboard/dashboard_filter_bar.js
+++ b/test/functional/apps/dashboard/dashboard_filter_bar.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const dashboardExpect = getService('dashboardExpect');
   const dashboardAddPanel = getService('dashboardAddPanel');
   const testSubjects = getService('testSubjects');
diff --git a/test/functional/apps/dashboard/dashboard_filtering.js b/test/functional/apps/dashboard/dashboard_filtering.ts
similarity index 98%
rename from test/functional/apps/dashboard/dashboard_filtering.js
rename to test/functional/apps/dashboard/dashboard_filtering.ts
index 45950963cfded6..6b75b6707eb0a4 100644
--- a/test/functional/apps/dashboard/dashboard_filtering.js
+++ b/test/functional/apps/dashboard/dashboard_filtering.ts
@@ -19,11 +19,13 @@
 
 import expect from '@kbn/expect';
 
+import { FtrProviderContext } from '../../ftr_provider_context';
+
 /**
  * Test the querying capabilities of dashboard, and make sure visualizations show the expected results, especially
  * with nested queries and filters on the visualizations themselves.
  */
-export default function ({ getService, getPageObjects }) {
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const dashboardExpect = getService('dashboardExpect');
   const pieChart = getService('pieChart');
   const queryBar = getService('queryBar');
diff --git a/test/functional/apps/dashboard/dashboard_grid.js b/test/functional/apps/dashboard/dashboard_grid.ts
similarity index 94%
rename from test/functional/apps/dashboard/dashboard_grid.js
rename to test/functional/apps/dashboard/dashboard_grid.ts
index 44e0123c49ae26..ced78f45e3ebee 100644
--- a/test/functional/apps/dashboard/dashboard_grid.js
+++ b/test/functional/apps/dashboard/dashboard_grid.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const browser = getService('browser');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
diff --git a/test/functional/apps/dashboard/dashboard_listing.js b/test/functional/apps/dashboard/dashboard_listing.ts
similarity index 98%
rename from test/functional/apps/dashboard/dashboard_listing.js
rename to test/functional/apps/dashboard/dashboard_listing.ts
index 45c4d2bffbfa7f..16e92cde159132 100644
--- a/test/functional/apps/dashboard/dashboard_listing.js
+++ b/test/functional/apps/dashboard/dashboard_listing.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['dashboard', 'header', 'common']);
   const browser = getService('browser');
   const listingTable = getService('listingTable');
diff --git a/test/functional/apps/dashboard/dashboard_options.js b/test/functional/apps/dashboard/dashboard_options.ts
similarity index 92%
rename from test/functional/apps/dashboard/dashboard_options.js
rename to test/functional/apps/dashboard/dashboard_options.ts
index 4e7c3f4cdc79bc..817e56eb3c7d72 100644
--- a/test/functional/apps/dashboard/dashboard_options.js
+++ b/test/functional/apps/dashboard/dashboard_options.ts
@@ -19,14 +19,16 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
   const PageObjects = getPageObjects(['common', 'dashboard']);
 
   describe('dashboard data-shared attributes', () => {
-    let originalTitles = [];
+    let originalTitles: string[] = [];
 
     before(async () => {
       await esArchiver.load('dashboard/current/kibana');
diff --git a/test/functional/apps/dashboard/dashboard_query_bar.js b/test/functional/apps/dashboard/dashboard_query_bar.ts
similarity index 93%
rename from test/functional/apps/dashboard/dashboard_query_bar.js
rename to test/functional/apps/dashboard/dashboard_query_bar.ts
index 872507d00bdc4c..9d65d7428cc783 100644
--- a/test/functional/apps/dashboard/dashboard_query_bar.js
+++ b/test/functional/apps/dashboard/dashboard_query_bar.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
   const pieChart = getService('pieChart');
diff --git a/test/functional/apps/dashboard/dashboard_save.js b/test/functional/apps/dashboard/dashboard_save.ts
similarity index 97%
rename from test/functional/apps/dashboard/dashboard_save.js
rename to test/functional/apps/dashboard/dashboard_save.ts
index fe4ad83d8050e6..e414bca1b624e3 100644
--- a/test/functional/apps/dashboard/dashboard_save.js
+++ b/test/functional/apps/dashboard/dashboard_save.ts
@@ -17,7 +17,9 @@
  * under the License.
  */
 
-export default function ({ getPageObjects, getService }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['dashboard', 'header']);
   const listingTable = getService('listingTable');
 
diff --git a/test/functional/apps/dashboard/dashboard_saved_query.js b/test/functional/apps/dashboard/dashboard_saved_query.ts
similarity index 97%
rename from test/functional/apps/dashboard/dashboard_saved_query.js
rename to test/functional/apps/dashboard/dashboard_saved_query.ts
index cbc9b7216c6c1a..51990bd6664248 100644
--- a/test/functional/apps/dashboard/dashboard_saved_query.js
+++ b/test/functional/apps/dashboard/dashboard_saved_query.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
   const PageObjects = getPageObjects(['common', 'dashboard', 'timePicker']);
@@ -82,12 +84,7 @@ export default function ({ getService, getPageObjects }) {
 
       it('allows saving changes to a currently loaded query via the saved query management component', async () => {
         await queryBar.setQuery('response:404');
-        await savedQueryManagementComponent.updateCurrentlyLoadedQuery(
-          'OkResponse',
-          '404 responses',
-          false,
-          false
-        );
+        await savedQueryManagementComponent.updateCurrentlyLoadedQuery('OkResponse', false, false);
         await savedQueryManagementComponent.savedQueryExistOrFail('OkResponse');
         await savedQueryManagementComponent.clearCurrentlyLoadedQuery();
         expect(await queryBar.getQueryString()).to.eql('');
diff --git a/test/functional/apps/dashboard/dashboard_snapshots.js b/test/functional/apps/dashboard/dashboard_snapshots.ts
similarity index 95%
rename from test/functional/apps/dashboard/dashboard_snapshots.js
rename to test/functional/apps/dashboard/dashboard_snapshots.ts
index 787e839aa08a5c..414c191c946228 100644
--- a/test/functional/apps/dashboard/dashboard_snapshots.js
+++ b/test/functional/apps/dashboard/dashboard_snapshots.ts
@@ -19,7 +19,13 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects, updateBaselines }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({
+  getService,
+  getPageObjects,
+  updateBaselines,
+}: FtrProviderContext & { updateBaselines: boolean }) {
   const PageObjects = getPageObjects(['dashboard', 'header', 'visualize', 'common', 'timePicker']);
   const screenshot = getService('screenshots');
   const browser = getService('browser');
diff --git a/test/functional/apps/dashboard/dashboard_state.js b/test/functional/apps/dashboard/dashboard_state.ts
similarity index 87%
rename from test/functional/apps/dashboard/dashboard_state.js
rename to test/functional/apps/dashboard/dashboard_state.ts
index 3656c824394f46..48fec4efee5db2 100644
--- a/test/functional/apps/dashboard/dashboard_state.js
+++ b/test/functional/apps/dashboard/dashboard_state.ts
@@ -20,10 +20,10 @@
 import expect from '@kbn/expect';
 
 import { PIE_CHART_VIS_NAME, AREA_CHART_VIS_NAME } from '../../page_objects/dashboard_page';
-
 import { DEFAULT_PANEL_WIDTH } from '../../../../src/plugins/dashboard/public/application/embeddable/dashboard_constants';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
-export default function ({ getService, getPageObjects }) {
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects([
     'dashboard',
     'visualize',
@@ -39,13 +39,26 @@ export default function ({ getService, getPageObjects }) {
   const pieChart = getService('pieChart');
   const inspector = getService('inspector');
   const retry = getService('retry');
+  const elasticChart = getService('elasticChart');
+  const kibanaServer = getService('kibanaServer');
   const dashboardPanelActions = getService('dashboardPanelActions');
   const dashboardAddPanel = getService('dashboardAddPanel');
 
   describe('dashboard state', function describeIndexTests() {
+    // Used to track flag before and after reset
+    let isNewChartUiEnabled = false;
+
     before(async function () {
+      isNewChartUiEnabled = await PageObjects.visChart.isNewChartUiEnabled();
       await PageObjects.dashboard.initTests();
       await PageObjects.dashboard.preserveCrossAppState();
+
+      if (isNewChartUiEnabled) {
+        await kibanaServer.uiSettings.update({
+          'visualization:visualize:chartsLibrary': true,
+        });
+        await browser.refresh();
+      }
     });
 
     after(async function () {
@@ -58,18 +71,33 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.dashboard.clickNewDashboard();
       await PageObjects.timePicker.setHistoricalDataRange();
 
-      await dashboardAddPanel.addVisualization(AREA_CHART_VIS_NAME);
-      await PageObjects.dashboard.saveDashboard('Overridden colors');
+      const visName = await PageObjects.visChart.getExpectedValue(
+        AREA_CHART_VIS_NAME,
+        `${AREA_CHART_VIS_NAME} - chartsLibrary`
+      );
+      await dashboardAddPanel.addVisualization(visName);
+      const dashboarName = await PageObjects.visChart.getExpectedValue(
+        'Overridden colors',
+        'Overridden colors - chartsLibrary'
+      );
+      await PageObjects.dashboard.saveDashboard(dashboarName);
 
       await PageObjects.dashboard.switchToEditMode();
+      await queryBar.clickQuerySubmitButton();
 
-      await PageObjects.visChart.openLegendOptionColors('Count');
+      await PageObjects.visChart.openLegendOptionColors('Count', `[data-title="${visName}"]`);
       await PageObjects.visChart.selectNewLegendColorChoice('#EA6460');
 
-      await PageObjects.dashboard.saveDashboard('Overridden colors');
+      await PageObjects.dashboard.saveDashboard(dashboarName);
 
       await PageObjects.dashboard.gotoDashboardLandingPage();
-      await PageObjects.dashboard.loadSavedDashboard('Overridden colors');
+      await PageObjects.dashboard.loadSavedDashboard(dashboarName);
+
+      if (await PageObjects.visChart.isNewChartUiEnabled()) {
+        await elasticChart.setNewChartUiDebugFlag();
+        await queryBar.submitQuery();
+      }
+
       const colorChoiceRetained = await PageObjects.visChart.doesSelectedLegendColorExist(
         '#EA6460'
       );
@@ -231,7 +259,10 @@ export default function ({ getService, getPageObjects }) {
       describe('for embeddable config color parameters on a visualization', () => {
         it('updates a pie slice color on a soft refresh', async function () {
           await dashboardAddPanel.addVisualization(PIE_CHART_VIS_NAME);
-          await PageObjects.visChart.openLegendOptionColors('80,000');
+          await PageObjects.visChart.openLegendOptionColors(
+            '80,000',
+            `[data-title="${PIE_CHART_VIS_NAME}"]`
+          );
           await PageObjects.visChart.selectNewLegendColorChoice('#F9D9F9');
           const currentUrl = await browser.getCurrentUrl();
           const newUrl = currentUrl.replace('F9D9F9', 'FFFFFF');
diff --git a/test/functional/apps/dashboard/dashboard_time.js b/test/functional/apps/dashboard/dashboard_time.ts
similarity index 97%
rename from test/functional/apps/dashboard/dashboard_time.js
rename to test/functional/apps/dashboard/dashboard_time.ts
index 0420448302484e..b2f7d89c29dfb8 100644
--- a/test/functional/apps/dashboard/dashboard_time.js
+++ b/test/functional/apps/dashboard/dashboard_time.ts
@@ -19,9 +19,11 @@
 
 import expect from '@kbn/expect';
 
+import { FtrProviderContext } from '../../ftr_provider_context';
+
 const dashboardName = 'Dashboard Test Time';
 
-export default function ({ getPageObjects, getService }) {
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['common', 'dashboard', 'header', 'timePicker']);
   const browser = getService('browser');
 
diff --git a/test/functional/apps/dashboard/dashboard_time_picker.js b/test/functional/apps/dashboard/dashboard_time_picker.ts
similarity index 96%
rename from test/functional/apps/dashboard/dashboard_time_picker.js
rename to test/functional/apps/dashboard/dashboard_time_picker.ts
index 975fb5166a8e67..274a4355e26e23 100644
--- a/test/functional/apps/dashboard/dashboard_time_picker.js
+++ b/test/functional/apps/dashboard/dashboard_time_picker.ts
@@ -17,10 +17,12 @@
  * under the License.
  */
 
-import { PIE_CHART_VIS_NAME } from '../../page_objects/dashboard_page';
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { PIE_CHART_VIS_NAME } from '../../page_objects/dashboard_page';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const dashboardExpect = getService('dashboardExpect');
   const pieChart = getService('pieChart');
   const dashboardVisualizations = getService('dashboardVisualizations');
diff --git a/test/functional/apps/dashboard/data_shared_attributes.js b/test/functional/apps/dashboard/data_shared_attributes.ts
similarity index 96%
rename from test/functional/apps/dashboard/data_shared_attributes.js
rename to test/functional/apps/dashboard/data_shared_attributes.ts
index 2793c47fc7dba1..3fe14307436571 100644
--- a/test/functional/apps/dashboard/data_shared_attributes.js
+++ b/test/functional/apps/dashboard/data_shared_attributes.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
@@ -27,7 +29,7 @@ export default function ({ getService, getPageObjects }) {
   const PageObjects = getPageObjects(['common', 'dashboard', 'timePicker']);
 
   describe('dashboard data-shared attributes', function describeIndexTests() {
-    let originalPanelTitles;
+    let originalPanelTitles: string[];
 
     before(async () => {
       await esArchiver.load('dashboard/current/kibana');
diff --git a/test/functional/apps/dashboard/edit_embeddable_redirects.js b/test/functional/apps/dashboard/edit_embeddable_redirects.ts
similarity index 97%
rename from test/functional/apps/dashboard/edit_embeddable_redirects.js
rename to test/functional/apps/dashboard/edit_embeddable_redirects.ts
index fcc504ea24f312..da5b28dcc7f344 100644
--- a/test/functional/apps/dashboard/edit_embeddable_redirects.js
+++ b/test/functional/apps/dashboard/edit_embeddable_redirects.ts
@@ -18,7 +18,9 @@
  */
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['dashboard', 'header', 'visualize', 'settings', 'common']);
   const esArchiver = getService('esArchiver');
   const testSubjects = getService('testSubjects');
diff --git a/test/functional/apps/dashboard/embed_mode.js b/test/functional/apps/dashboard/embed_mode.ts
similarity index 96%
rename from test/functional/apps/dashboard/embed_mode.js
rename to test/functional/apps/dashboard/embed_mode.ts
index a1828143555b01..2611419a9c16d4 100644
--- a/test/functional/apps/dashboard/embed_mode.js
+++ b/test/functional/apps/dashboard/embed_mode.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const retry = getService('retry');
   const esArchiver = getService('esArchiver');
diff --git a/test/functional/apps/dashboard/embeddable_rendering.js b/test/functional/apps/dashboard/embeddable_rendering.ts
similarity index 98%
rename from test/functional/apps/dashboard/embeddable_rendering.js
rename to test/functional/apps/dashboard/embeddable_rendering.ts
index 77fe28a01f86d5..bc302c855b3c94 100644
--- a/test/functional/apps/dashboard/embeddable_rendering.js
+++ b/test/functional/apps/dashboard/embeddable_rendering.ts
@@ -19,6 +19,8 @@
 
 import expect from '@kbn/expect';
 
+import { FtrProviderContext } from '../../ftr_provider_context';
+
 /**
  * This tests both that one of each visualization can be added to a dashboard (as opposed to opening an existing
  * dashboard with the visualizations already on it), as well as conducts a rough type of snapshot testing by checking
@@ -27,7 +29,7 @@ import expect from '@kbn/expect';
  * broke?).  The upside is that this offers very good coverage with a minimal time investment.
  */
 
-export default function ({ getService, getPageObjects }) {
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const find = getService('find');
   const browser = getService('browser');
   const esArchiver = getService('esArchiver');
@@ -44,7 +46,7 @@ export default function ({ getService, getPageObjects }) {
     'discover',
     'timePicker',
   ]);
-  let visNames = [];
+  let visNames: string[] = [];
 
   const expectAllDataRenders = async () => {
     await pieChart.expectPieSliceCount(16);
diff --git a/test/functional/apps/dashboard/empty_dashboard.js b/test/functional/apps/dashboard/empty_dashboard.ts
similarity index 95%
rename from test/functional/apps/dashboard/empty_dashboard.js
rename to test/functional/apps/dashboard/empty_dashboard.ts
index 7f13aca438842a..0a290eb01e531d 100644
--- a/test/functional/apps/dashboard/empty_dashboard.js
+++ b/test/functional/apps/dashboard/empty_dashboard.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
diff --git a/test/functional/apps/dashboard/full_screen_mode.js b/test/functional/apps/dashboard/full_screen_mode.ts
similarity index 96%
rename from test/functional/apps/dashboard/full_screen_mode.js
rename to test/functional/apps/dashboard/full_screen_mode.ts
index c0a2d49b1c202b..02c8996b44189d 100644
--- a/test/functional/apps/dashboard/full_screen_mode.js
+++ b/test/functional/apps/dashboard/full_screen_mode.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
diff --git a/test/functional/apps/dashboard/index.js b/test/functional/apps/dashboard/index.ts
similarity index 85%
rename from test/functional/apps/dashboard/index.js
rename to test/functional/apps/dashboard/index.ts
index b62907dfe2c248..f2dba4785ea05b 100644
--- a/test/functional/apps/dashboard/index.js
+++ b/test/functional/apps/dashboard/index.ts
@@ -17,9 +17,12 @@
  * under the License.
  */
 
-export default function ({ getService, loadTestFile }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, loadTestFile }: FtrProviderContext) {
   const browser = getService('browser');
   const esArchiver = getService('esArchiver');
+  const kibanaServer = getService('kibanaServer');
 
   async function loadCurrentData() {
     await browser.setWindowSize(1300, 900);
@@ -114,5 +117,29 @@ export default function ({ getService, loadTestFile }) {
       loadTestFile(require.resolve('./dashboard_listing'));
       loadTestFile(require.resolve('./dashboard_clone'));
     });
+
+    // TODO: Remove when vislib is removed
+    // https://github.com/elastic/kibana/issues/56143
+    describe('new charts library', function () {
+      this.tags('ciGroup6');
+
+      before(async () => {
+        await loadLogstash();
+        await kibanaServer.uiSettings.update({
+          'visualization:visualize:chartsLibrary': true,
+        });
+        await browser.refresh();
+      });
+
+      after(async () => {
+        await unloadLogstash();
+        await kibanaServer.uiSettings.update({
+          'visualization:visualize:chartsLibrary': false,
+        });
+        await browser.refresh();
+      });
+
+      loadTestFile(require.resolve('./dashboard_state'));
+    });
   });
 }
diff --git a/test/functional/apps/dashboard/panel_expand_toggle.js b/test/functional/apps/dashboard/panel_expand_toggle.ts
similarity index 95%
rename from test/functional/apps/dashboard/panel_expand_toggle.js
rename to test/functional/apps/dashboard/panel_expand_toggle.ts
index 7fe3f87918e573..5ae9c6402ebf15 100644
--- a/test/functional/apps/dashboard/panel_expand_toggle.js
+++ b/test/functional/apps/dashboard/panel_expand_toggle.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const browser = getService('browser');
   const esArchiver = getService('esArchiver');
diff --git a/test/functional/apps/dashboard/time_zones.js b/test/functional/apps/dashboard/time_zones.ts
similarity index 95%
rename from test/functional/apps/dashboard/time_zones.js
rename to test/functional/apps/dashboard/time_zones.ts
index 800bedb1329788..a3e7efbd9e9aea 100644
--- a/test/functional/apps/dashboard/time_zones.js
+++ b/test/functional/apps/dashboard/time_zones.ts
@@ -20,7 +20,9 @@
 import path from 'path';
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const pieChart = getService('pieChart');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
diff --git a/test/functional/apps/dashboard/view_edit.js b/test/functional/apps/dashboard/view_edit.ts
similarity index 97%
rename from test/functional/apps/dashboard/view_edit.js
rename to test/functional/apps/dashboard/view_edit.ts
index a6d81da131751a..b0e5d0b08dba28 100644
--- a/test/functional/apps/dashboard/view_edit.js
+++ b/test/functional/apps/dashboard/view_edit.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const queryBar = getService('queryBar');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
@@ -174,7 +176,7 @@ export default function ({ getService, getPageObjects }) {
             'Sep 19, 2013 @ 06:31:44.000',
             'Sep 19, 2013 @ 06:31:44.000'
           );
-          await PageObjects.dashboard.saveDashboard(dashboardName, true);
+          await PageObjects.dashboard.saveDashboard(dashboardName);
           await PageObjects.dashboard.switchToEditMode();
           await PageObjects.timePicker.setAbsoluteRange(
             'Sep 19, 2015 @ 06:31:44.000',
@@ -201,7 +203,7 @@ export default function ({ getService, getPageObjects }) {
       it('when time changed is stored with dashboard', async function () {
         await PageObjects.dashboard.gotoDashboardEditMode(dashboardName);
         await PageObjects.timePicker.setDefaultDataRange();
-        await PageObjects.dashboard.saveDashboard(dashboardName, true);
+        await PageObjects.dashboard.saveDashboard(dashboardName);
         await PageObjects.dashboard.switchToEditMode();
         await PageObjects.timePicker.setAbsoluteRange(
           'Sep 19, 2013 @ 06:31:44.000',
diff --git a/test/functional/apps/discover/_date_nanos.js b/test/functional/apps/discover/_date_nanos.ts
similarity index 93%
rename from test/functional/apps/discover/_date_nanos.js
rename to test/functional/apps/discover/_date_nanos.ts
index 1b5c033d67a43a..2047f332780404 100644
--- a/test/functional/apps/discover/_date_nanos.js
+++ b/test/functional/apps/discover/_date_nanos.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const PageObjects = getPageObjects(['common', 'timePicker', 'discover']);
   const kibanaServer = getService('kibanaServer');
diff --git a/test/functional/apps/discover/_date_nanos_mixed.js b/test/functional/apps/discover/_date_nanos_mixed.ts
similarity index 94%
rename from test/functional/apps/discover/_date_nanos_mixed.js
rename to test/functional/apps/discover/_date_nanos_mixed.ts
index 63509d85afd3a0..525d2afda67f87 100644
--- a/test/functional/apps/discover/_date_nanos_mixed.js
+++ b/test/functional/apps/discover/_date_nanos_mixed.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const PageObjects = getPageObjects(['common', 'timePicker', 'discover']);
   const kibanaServer = getService('kibanaServer');
diff --git a/test/functional/apps/discover/_discover.js b/test/functional/apps/discover/_discover.ts
similarity index 97%
rename from test/functional/apps/discover/_discover.js
rename to test/functional/apps/discover/_discover.ts
index 78197cd8d66ff5..e52c33078029a3 100644
--- a/test/functional/apps/discover/_discover.js
+++ b/test/functional/apps/discover/_discover.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const browser = getService('browser');
   const log = getService('log');
   const retry = getService('retry');
@@ -120,7 +122,7 @@ export default function ({ getService, getPageObjects }) {
           const rowData = await PageObjects.discover.getDocTableField(1);
           log.debug(`The first timestamp value in doc table: ${rowData}`);
           const dateParsed = Date.parse(rowData);
-          //compare against the parsed date of Sep 20, 2015 @ 17:30:00.000 and Sep 20, 2015 @ 23:30:00.000
+          // compare against the parsed date of Sep 20, 2015 @ 17:30:00.000 and Sep 20, 2015 @ 23:30:00.000
           return dateParsed >= 1442770200000 && dateParsed <= 1442791800000;
         });
       });
@@ -329,7 +331,7 @@ export default function ({ getService, getPageObjects }) {
           log.debug(
             `Timestamp before: ${requestTimestampBefore}, Timestamp after: ${requestTimestampAfter}`
           );
-          return requestTimestampAfter && requestTimestampBefore !== requestTimestampAfter;
+          return Boolean(requestTimestampAfter) && requestTimestampBefore !== requestTimestampAfter;
         });
       });
 
diff --git a/test/functional/apps/discover/_doc_navigation.js b/test/functional/apps/discover/_doc_navigation.ts
similarity index 95%
rename from test/functional/apps/discover/_doc_navigation.js
rename to test/functional/apps/discover/_doc_navigation.ts
index 59c4371b95d807..76612b255ac232 100644
--- a/test/functional/apps/discover/_doc_navigation.js
+++ b/test/functional/apps/discover/_doc_navigation.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const docTable = getService('docTable');
   const filterBar = getService('filterBar');
   const testSubjects = getService('testSubjects');
diff --git a/test/functional/apps/discover/_field_data.js b/test/functional/apps/discover/_field_data.ts
similarity index 96%
rename from test/functional/apps/discover/_field_data.js
rename to test/functional/apps/discover/_field_data.ts
index d45b8f4841cb6a..e08325a81a3e80 100644
--- a/test/functional/apps/discover/_field_data.js
+++ b/test/functional/apps/discover/_field_data.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
diff --git a/test/functional/apps/discover/_filter_editor.js b/test/functional/apps/discover/_filter_editor.ts
similarity index 95%
rename from test/functional/apps/discover/_filter_editor.js
rename to test/functional/apps/discover/_filter_editor.ts
index afb59481b23e25..74222e4d7666f8 100644
--- a/test/functional/apps/discover/_filter_editor.js
+++ b/test/functional/apps/discover/_filter_editor.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const esArchiver = getService('esArchiver');
diff --git a/test/functional/apps/discover/_inspector.js b/test/functional/apps/discover/_inspector.ts
similarity index 89%
rename from test/functional/apps/discover/_inspector.js
rename to test/functional/apps/discover/_inspector.ts
index 900ad28e14e691..2b25ced72ffe69 100644
--- a/test/functional/apps/discover/_inspector.js
+++ b/test/functional/apps/discover/_inspector.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']);
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
@@ -27,10 +29,15 @@ export default function ({ getService, getPageObjects }) {
 
   const STATS_ROW_NAME_INDEX = 0;
   const STATS_ROW_VALUE_INDEX = 1;
-  function getHitCount(requestStats) {
+  function getHitCount(requestStats: string[][]): string | undefined {
     const hitsCountStatsRow = requestStats.find((statsRow) => {
       return statsRow[STATS_ROW_NAME_INDEX] === 'Hits (total)';
     });
+
+    if (!hitsCountStatsRow) {
+      return;
+    }
+
     return hitsCountStatsRow[STATS_ROW_VALUE_INDEX];
   }
 
diff --git a/test/functional/apps/discover/_large_string.js b/test/functional/apps/discover/_large_string.ts
similarity index 96%
rename from test/functional/apps/discover/_large_string.js
rename to test/functional/apps/discover/_large_string.ts
index 6142f042c1148a..fe5613a4e3f195 100644
--- a/test/functional/apps/discover/_large_string.js
+++ b/test/functional/apps/discover/_large_string.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const log = getService('log');
   const retry = getService('retry');
diff --git a/test/functional/apps/discover/_saved_queries.js b/test/functional/apps/discover/_saved_queries.ts
similarity index 97%
rename from test/functional/apps/discover/_saved_queries.js
rename to test/functional/apps/discover/_saved_queries.ts
index 6b423bf6eeb1d8..445018bcebd230 100644
--- a/test/functional/apps/discover/_saved_queries.js
+++ b/test/functional/apps/discover/_saved_queries.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const log = getService('log');
   const esArchiver = getService('esArchiver');
@@ -103,12 +105,7 @@ export default function ({ getService, getPageObjects }) {
 
       it('allows saving changes to a currently loaded query via the saved query management component', async () => {
         await queryBar.setQuery('response:404');
-        await savedQueryManagementComponent.updateCurrentlyLoadedQuery(
-          'OkResponse',
-          '404 responses',
-          false,
-          false
-        );
+        await savedQueryManagementComponent.updateCurrentlyLoadedQuery('OkResponse', false, false);
         await savedQueryManagementComponent.savedQueryExistOrFail('OkResponse');
         await savedQueryManagementComponent.clearCurrentlyLoadedQuery();
         expect(await queryBar.getQueryString()).to.eql('');
diff --git a/test/functional/apps/discover/_shared_links.js b/test/functional/apps/discover/_shared_links.ts
similarity index 92%
rename from test/functional/apps/discover/_shared_links.js
rename to test/functional/apps/discover/_shared_links.ts
index 60058ead1101e6..a676878382865c 100644
--- a/test/functional/apps/discover/_shared_links.js
+++ b/test/functional/apps/discover/_shared_links.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const log = getService('log');
   const esArchiver = getService('esArchiver');
@@ -30,9 +32,9 @@ export default function ({ getService, getPageObjects }) {
   const deployment = getService('deployment');
 
   describe('shared links', function describeIndexTests() {
-    let baseUrl;
+    let baseUrl: string;
 
-    async function setup({ storeStateInSessionStorage }) {
+    async function setup({ storeStateInSessionStorage }: { storeStateInSessionStorage: boolean }) {
       baseUrl = deployment.getHostPort();
       log.debug('baseUrl = ' + baseUrl);
       // browsers don't show the ':port' if it's 80 or 443 so we have to
@@ -58,21 +60,19 @@ export default function ({ getService, getPageObjects }) {
 
       await PageObjects.timePicker.setDefaultAbsoluteRange();
 
-      //After hiding the time picker, we need to wait for
-      //the refresh button to hide before clicking the share button
+      // After hiding the time picker, we need to wait for
+      // the refresh button to hide before clicking the share button
       await PageObjects.common.sleep(1000);
 
       await PageObjects.share.clickShareTopNavButton();
 
       return async () => {
-        await kibanaServer.uiSettings.replace({
-          'state:storeInSessionStorage': undefined,
-        });
+        await kibanaServer.uiSettings.unset('state:storeInSessionStorage');
       };
     }
 
     describe('shared links with state in query', async () => {
-      let teardown;
+      let teardown: () => Promise<void>;
       before(async function () {
         teardown = await setup({ storeStateInSessionStorage: false });
       });
@@ -125,7 +125,7 @@ export default function ({ getService, getPageObjects }) {
     });
 
     describe('shared links with state in sessionStorage', async () => {
-      let teardown;
+      let teardown: () => Promise<void>;
       before(async function () {
         teardown = await setup({ storeStateInSessionStorage: true });
       });
@@ -137,7 +137,7 @@ export default function ({ getService, getPageObjects }) {
       it('should allow for copying the snapshot URL as a short URL and should open it', async function () {
         const re = new RegExp(baseUrl + '/goto/[0-9a-f]{32}$');
         await PageObjects.share.checkShortenUrl();
-        let actualUrl;
+        let actualUrl: string = '';
         await retry.try(async () => {
           actualUrl = await PageObjects.share.getSharedUrl();
           expect(actualUrl).to.match(re);
diff --git a/test/functional/apps/discover/_source_filters.js b/test/functional/apps/discover/_source_filters.ts
similarity index 88%
rename from test/functional/apps/discover/_source_filters.js
rename to test/functional/apps/discover/_source_filters.ts
index b483f4cd67112a..0af7c0ade79ba7 100644
--- a/test/functional/apps/discover/_source_filters.js
+++ b/test/functional/apps/discover/_source_filters.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
@@ -43,8 +45,8 @@ export default function ({ getService, getPageObjects }) {
 
       await PageObjects.timePicker.setDefaultAbsoluteRange();
 
-      //After hiding the time picker, we need to wait for
-      //the refresh button to hide before clicking the share button
+      // After hiding the time picker, we need to wait for
+      // the refresh button to hide before clicking the share button
       await PageObjects.common.sleep(1000);
     });
 
diff --git a/test/functional/apps/discover/index.js b/test/functional/apps/discover/index.ts
similarity index 93%
rename from test/functional/apps/discover/index.js
rename to test/functional/apps/discover/index.ts
index bd6b7a806fbb37..c13529b7d1b43c 100644
--- a/test/functional/apps/discover/index.js
+++ b/test/functional/apps/discover/index.ts
@@ -17,7 +17,9 @@
  * under the License.
  */
 
-export default function ({ getService, loadTestFile }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, loadTestFile }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const browser = getService('browser');
 
diff --git a/test/functional/apps/getting_started/_shakespeare.js b/test/functional/apps/getting_started/_shakespeare.ts
similarity index 89%
rename from test/functional/apps/getting_started/_shakespeare.js
rename to test/functional/apps/getting_started/_shakespeare.ts
index a648dae99158d6..fa7d932aca1e86 100644
--- a/test/functional/apps/getting_started/_shakespeare.js
+++ b/test/functional/apps/getting_started/_shakespeare.ts
@@ -19,11 +19,17 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+// https://www.elastic.co/guide/en/kibana/current/tutorial-load-dataset.html
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const esArchiver = getService('esArchiver');
   const retry = getService('retry');
   const security = getService('security');
+  const browser = getService('browser');
+  const kibanaServer = getService('kibanaServer');
   const PageObjects = getPageObjects([
     'console',
     'common',
@@ -42,16 +48,26 @@ export default function ({ getService, getPageObjects }) {
     // So to modify a metric or aggregation tests need to keep track of the
     // order they are added.
     let aggIndex = 1;
+    // Used to track flag before and after reset
+    let isNewChartUiEnabled = false;
 
     before(async function () {
       log.debug(
         'Load empty_kibana and Shakespeare Getting Started data\n' +
           'https://www.elastic.co/guide/en/kibana/current/tutorial-load-dataset.html'
       );
+      isNewChartUiEnabled = await PageObjects.visChart.isNewChartUiEnabled();
       await security.testUser.setRoles(['kibana_admin', 'test_shakespeare_reader']);
       await esArchiver.load('empty_kibana', { skipExisting: true });
       log.debug('Load shakespeare data');
       await esArchiver.loadIfNeeded('getting_started/shakespeare');
+
+      if (isNewChartUiEnabled) {
+        await kibanaServer.uiSettings.update({
+          'visualization:visualize:chartsLibrary': true,
+        });
+        await browser.refresh();
+      }
     });
 
     after(async () => {
@@ -79,6 +95,10 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.visualize.clickNewSearch('shakespeare');
       await PageObjects.visChart.waitForVisualization();
 
+      // Remove refresh click when vislib is removed
+      // https://github.com/elastic/kibana/issues/56143
+      await PageObjects.visualize.clickRefresh();
+
       const expectedChartValues = [111396];
       await retry.try(async () => {
         const data = await PageObjects.visChart.getBarChartData('Count');
@@ -228,8 +248,14 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.visEditor.clickGo();
 
       // same values as previous test except scaled down by the 50 for Y-Axis min
-      const expectedChartValues = [21, 15, 12, 5, 5];
-      const expectedChartValues2 = [127, 56, 103, 82, 112];
+      const expectedChartValues = await PageObjects.visChart.getExpectedValue(
+        [21, 15, 12, 5, 5],
+        [71, 65, 62, 55, 55] // no scaled values in elastic-charts
+      );
+      const expectedChartValues2 = await PageObjects.visChart.getExpectedValue(
+        [127, 56, 103, 82, 112],
+        [177, 106, 153, 132, 162] // no scaled values in elastic-charts
+      );
       await retry.try(async () => {
         const data = await PageObjects.visChart.getBarChartData('Speaking Parts');
         const data2 = await PageObjects.visChart.getBarChartData('Max Speaking Parts');
diff --git a/test/functional/apps/getting_started/index.ts b/test/functional/apps/getting_started/index.ts
new file mode 100644
index 00000000000000..4cef16a47571ef
--- /dev/null
+++ b/test/functional/apps/getting_started/index.ts
@@ -0,0 +1,56 @@
+/*
+ * 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 { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, loadTestFile }: FtrProviderContext) {
+  const browser = getService('browser');
+  const kibanaServer = getService('kibanaServer');
+
+  describe('Getting Started ', function () {
+    this.tags(['ciGroup6']);
+
+    before(async function () {
+      await browser.setWindowSize(1200, 800);
+    });
+
+    // TODO: Remove when vislib is removed
+    describe('chartsLibrary', function () {
+      before(async () => {
+        await kibanaServer.uiSettings.update({
+          'visualization:visualize:chartsLibrary': true,
+        });
+        await browser.refresh();
+      });
+
+      after(async () => {
+        await kibanaServer.uiSettings.update({
+          'visualization:visualize:chartsLibrary': false,
+        });
+        await browser.refresh();
+      });
+
+      loadTestFile(require.resolve('./_shakespeare'));
+    });
+
+    describe('', () => {
+      loadTestFile(require.resolve('./_shakespeare'));
+    });
+  });
+}
diff --git a/test/functional/apps/visualize/_area_chart.js b/test/functional/apps/visualize/_area_chart.ts
similarity index 90%
rename from test/functional/apps/visualize/_area_chart.js
rename to test/functional/apps/visualize/_area_chart.ts
index b943e070e1768a..ab08fbb3870b43 100644
--- a/test/functional/apps/visualize/_area_chart.js
+++ b/test/functional/apps/visualize/_area_chart.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const find = getService('find');
   const inspector = getService('inspector');
@@ -36,9 +38,13 @@ export default function ({ getService, getPageObjects }) {
     'timePicker',
   ]);
 
-  describe('area charts', function indexPatternCreation() {
-    const vizName1 = 'Visualization AreaChart Name Test';
+  const getVizName = async () =>
+    await PageObjects.visChart.getExpectedValue(
+      'Visualization AreaChart Name Test',
+      'Visualization AreaChart Name Test - Charts library'
+    );
 
+  describe('area charts', function indexPatternCreation() {
     const initAreaChart = async () => {
       log.debug('navigateToApp visualize');
       await PageObjects.visualize.navigateToNewAggBasedVisualization();
@@ -58,7 +64,7 @@ export default function ({ getService, getPageObjects }) {
       const intervalValue = await PageObjects.visEditor.getInterval();
       log.debug('intervalValue = ' + intervalValue);
       expect(intervalValue[0]).to.be('Auto');
-      return PageObjects.visEditor.clickGo();
+      await PageObjects.visEditor.clickGo();
     };
 
     before(async function () {
@@ -75,22 +81,22 @@ export default function ({ getService, getPageObjects }) {
     });
 
     it('should save and load with special characters', async function () {
-      const vizNamewithSpecialChars = vizName1 + '/?&=%';
+      const vizNamewithSpecialChars = (await getVizName()) + '/?&=%';
       await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(
         vizNamewithSpecialChars
       );
     });
 
     it('should save and load with non-ascii characters', async function () {
-      const vizNamewithSpecialChars = `${vizName1} with Umlaut ä`;
+      const vizNamewithSpecialChars = `${await getVizName()} with Umlaut ä`;
       await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(
         vizNamewithSpecialChars
       );
     });
 
     it('should save and load', async function () {
-      await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
-      await PageObjects.visualize.loadSavedVisualization(vizName1);
+      await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(await getVizName());
+      await PageObjects.visualize.loadSavedVisualization(await getVizName());
       await PageObjects.visChart.waitForVisualization();
     });
 
@@ -99,13 +105,14 @@ export default function ({ getService, getPageObjects }) {
     });
 
     it('should show correct chart', async function () {
-      const xAxisLabels = [
-        '2015-09-20 00:00',
-        '2015-09-21 00:00',
-        '2015-09-22 00:00',
-        '2015-09-23 00:00',
-      ];
-      const yAxisLabels = ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600'];
+      const xAxisLabels = await PageObjects.visChart.getExpectedValue(
+        ['2015-09-20 00:00', '2015-09-21 00:00', '2015-09-22 00:00', '2015-09-23 00:00'],
+        ['2015-09-19 12:00', '2015-09-20 12:00', '2015-09-21 12:00', '2015-09-22 12:00']
+      );
+      const yAxisLabels = await PageObjects.visChart.getExpectedValue(
+        ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600'],
+        ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+      );
       const expectedAreaChartData = [
         37,
         202,
@@ -292,8 +299,9 @@ export default function ({ getService, getPageObjects }) {
       });
 
       after(async () => {
-        const url = await browser.getCurrentUrl();
-        const embedUrl = url.split('/visualize#').pop().replace('embed=true', '');
+        const url = (await browser.getCurrentUrl()) ?? '';
+        const lastValue = url.split('/visualize#').pop() ?? '';
+        const embedUrl = lastValue.replace('embed=true', '');
         await PageObjects.common.navigateToUrl('visualize', embedUrl, { useActualUrl: true });
       });
     });
@@ -309,8 +317,8 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers();
-        const minLabel = 2;
-        const maxLabel = 5000;
+        const minLabel = await PageObjects.visChart.getExpectedValue(2, 1);
+        const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 900);
         const numberOfLabels = 10;
         expect(labels.length).to.be.greaterThan(numberOfLabels);
         expect(labels[0]).to.eql(minLabel);
@@ -321,8 +329,8 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers();
-        const minLabel = 2;
-        const maxLabel = 5000;
+        const minLabel = await PageObjects.visChart.getExpectedValue(2, 1);
+        const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 900);
         const numberOfLabels = 10;
         expect(labels.length).to.be.greaterThan(numberOfLabels);
         expect(labels[0]).to.eql(minLabel);
@@ -334,17 +342,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = [
-          '0',
-          '200',
-          '400',
-          '600',
-          '800',
-          '1,000',
-          '1,200',
-          '1,400',
-          '1,600',
-        ];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -352,7 +353,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['200', '400', '600', '800', '1,000', '1,200', '1,400'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -362,17 +366,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
         log.debug(labels);
-        const expectedLabels = [
-          '0',
-          '200',
-          '400',
-          '600',
-          '800',
-          '1,000',
-          '1,200',
-          '1,400',
-          '1,600',
-        ];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -380,7 +377,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['200', '400', '600', '800', '1,000', '1,200', '1,400'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
     });
@@ -388,6 +388,7 @@ export default function ({ getService, getPageObjects }) {
       // that dataset spans from Oct 26, 2013 @ 06:10:17.855	to Apr 18, 2019 @ 11:38:12.790
       const fromTime = 'Jan 1, 2013 @ 00:00:00.000';
       const toTime = 'Jan 1, 2020 @ 00:00:00.000';
+
       it('should render a yearly area with 12 svg paths', async () => {
         log.debug('navigateToApp visualize');
         await PageObjects.visualize.navigateToNewAggBasedVisualization();
diff --git a/test/functional/apps/visualize/_chart_types.ts b/test/functional/apps/visualize/_chart_types.ts
index b404b74039be98..3d2f97dbfe8d08 100644
--- a/test/functional/apps/visualize/_chart_types.ts
+++ b/test/functional/apps/visualize/_chart_types.ts
@@ -19,6 +19,7 @@
 
 import _ from 'lodash';
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_data_table.ts b/test/functional/apps/visualize/_data_table.ts
index ab5ee31f8b00f1..4c122dc706e230 100644
--- a/test/functional/apps/visualize/_data_table.ts
+++ b/test/functional/apps/visualize/_data_table.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
@@ -26,7 +27,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const retry = getService('retry');
   const filterBar = getService('filterBar');
-  const PageObjects = getPageObjects(['visualize', 'timePicker', 'visEditor', 'visChart']);
+  const PageObjects = getPageObjects([
+    'visualize',
+    'timePicker',
+    'visEditor',
+    'visChart',
+    'common',
+  ]);
 
   describe('data table', function indexPatternCreation() {
     const vizName1 = 'Visualization DataTable';
diff --git a/test/functional/apps/visualize/_data_table_nontimeindex.ts b/test/functional/apps/visualize/_data_table_nontimeindex.ts
index 247107a07a550f..b0c667f95468f8 100644
--- a/test/functional/apps/visualize/_data_table_nontimeindex.ts
+++ b/test/functional/apps/visualize/_data_table_nontimeindex.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_data_table_notimeindex_filters.ts b/test/functional/apps/visualize/_data_table_notimeindex_filters.ts
index d847d3bf4435cc..2bf13f7294e51b 100644
--- a/test/functional/apps/visualize/_data_table_notimeindex_filters.ts
+++ b/test/functional/apps/visualize/_data_table_notimeindex_filters.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_embedding_chart.ts b/test/functional/apps/visualize/_embedding_chart.ts
index 9a8bb7dde442d4..d549c8c1d297f5 100644
--- a/test/functional/apps/visualize/_embedding_chart.ts
+++ b/test/functional/apps/visualize/_embedding_chart.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_experimental_vis.js b/test/functional/apps/visualize/_experimental_vis.ts
similarity index 93%
rename from test/functional/apps/visualize/_experimental_vis.js
rename to test/functional/apps/visualize/_experimental_vis.ts
index c85d66eed12d21..26f01fe7d8bb6c 100644
--- a/test/functional/apps/visualize/_experimental_vis.js
+++ b/test/functional/apps/visualize/_experimental_vis.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default ({ getService, getPageObjects }) => {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const PageObjects = getPageObjects(['visualize']);
 
@@ -44,7 +46,7 @@ export default ({ getService, getPageObjects }) => {
         // Select a index-pattern/search if this vis requires it
         await PageObjects.visualize.selectVisSourceIfRequired();
         // Check that the beta banner is there and state that this is beta
-        const info = await PageObjects.visualize.getBetaInfo();
+        const info = await PageObjects.visualize.getExperimentalInfo();
         expect(await info.getVisibleText()).to.contain('beta');
       });
 
@@ -73,4 +75,4 @@ export default ({ getService, getPageObjects }) => {
       });
     });
   });
-};
+}
diff --git a/test/functional/apps/visualize/_gauge_chart.js b/test/functional/apps/visualize/_gauge_chart.ts
similarity index 95%
rename from test/functional/apps/visualize/_gauge_chart.js
rename to test/functional/apps/visualize/_gauge_chart.ts
index 23395959979010..165cd2bad31cc4 100644
--- a/test/functional/apps/visualize/_gauge_chart.js
+++ b/test/functional/apps/visualize/_gauge_chart.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const inspector = getService('inspector');
@@ -80,7 +82,7 @@ export default function ({ getService, getPageObjects }) {
         log.debug('Field = machine.os.raw');
         await PageObjects.visEditor.selectField('machine.os.raw');
         log.debug('Size = 4');
-        await PageObjects.visEditor.setSize('4');
+        await PageObjects.visEditor.setSize(4);
         await PageObjects.visEditor.clickGo();
       });
 
@@ -111,7 +113,7 @@ export default function ({ getService, getPageObjects }) {
 
         await PageObjects.visEditor.selectAggregation('Terms');
         await PageObjects.visEditor.selectField('machine.os.raw');
-        await PageObjects.visEditor.setSize('1');
+        await PageObjects.visEditor.setSize(1);
         await PageObjects.visEditor.clickBucket('Metric', 'metrics');
         await PageObjects.visEditor.selectAggregation('Min', 'metrics');
         await PageObjects.visEditor.selectField('bytes', 'metrics');
diff --git a/test/functional/apps/visualize/_heatmap_chart.js b/test/functional/apps/visualize/_heatmap_chart.ts
similarity index 97%
rename from test/functional/apps/visualize/_heatmap_chart.js
rename to test/functional/apps/visualize/_heatmap_chart.ts
index e48173c290372a..252a6d60a8727c 100644
--- a/test/functional/apps/visualize/_heatmap_chart.js
+++ b/test/functional/apps/visualize/_heatmap_chart.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const inspector = getService('inspector');
   const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'timePicker']);
diff --git a/test/functional/apps/visualize/_histogram_request_start.ts b/test/functional/apps/visualize/_histogram_request_start.ts
index d51a90c997e66b..de5ab3a23a2276 100644
--- a/test/functional/apps/visualize/_histogram_request_start.ts
+++ b/test/functional/apps/visualize/_histogram_request_start.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_inspector.js b/test/functional/apps/visualize/_inspector.ts
similarity index 96%
rename from test/functional/apps/visualize/_inspector.js
rename to test/functional/apps/visualize/_inspector.ts
index 426e61d9636ad8..366d72f58ab797 100644
--- a/test/functional/apps/visualize/_inspector.js
+++ b/test/functional/apps/visualize/_inspector.ts
@@ -17,7 +17,9 @@
  * under the License.
  */
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const inspector = getService('inspector');
   const filterBar = getService('filterBar');
diff --git a/test/functional/apps/visualize/_lab_mode.js b/test/functional/apps/visualize/_lab_mode.ts
similarity index 94%
rename from test/functional/apps/visualize/_lab_mode.js
rename to test/functional/apps/visualize/_lab_mode.ts
index 27c149b9e0e0a1..6c5afda9bb67c1 100644
--- a/test/functional/apps/visualize/_lab_mode.js
+++ b/test/functional/apps/visualize/_lab_mode.ts
@@ -20,7 +20,9 @@
 import expect from '@kbn/expect';
 import { VISUALIZE_ENABLE_LABS_SETTING } from '../../../../src/plugins/visualizations/common/constants';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const PageObjects = getPageObjects(['common', 'header', 'discover', 'settings']);
 
diff --git a/test/functional/apps/visualize/_line_chart.js b/test/functional/apps/visualize/_line_chart_split_chart.ts
similarity index 93%
rename from test/functional/apps/visualize/_line_chart.js
rename to test/functional/apps/visualize/_line_chart_split_chart.ts
index 8c6dbd3461a4f5..4941932a4b6943 100644
--- a/test/functional/apps/visualize/_line_chart.js
+++ b/test/functional/apps/visualize/_line_chart_split_chart.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const inspector = getService('inspector');
   const retry = getService('retry');
@@ -32,9 +34,7 @@ export default function ({ getService, getPageObjects }) {
     'timePicker',
   ]);
 
-  describe('line charts', function () {
-    const vizName1 = 'Visualization LineChart';
-
+  describe('line charts - split chart', function () {
     const initLineChart = async function () {
       log.debug('navigateToApp visualize');
       await PageObjects.visualize.navigateToNewAggBasedVisualization();
@@ -70,19 +70,18 @@ export default function ({ getService, getPageObjects }) {
       log.debug('data=' + data);
       const tolerance = 10; // the y-axis scale is 10000 so 10 is 0.1%
       for (let x = 0; x < data.length; x++) {
+        const expected = Number(expectedChartData[x].split(' ')[1].replace(',', ''));
         log.debug(
           'x=' +
             x +
             " expectedChartData[x].split(' ')[1] = " +
-            expectedChartData[x].split(' ')[1].replace(',', '') +
+            expected +
             '  data[x]=' +
             data[x] +
             ' diff=' +
-            Math.abs(expectedChartData[x].split(' ')[1].replace(',', '') - data[x])
+            Math.abs(expected - data[x])
         );
-        expect(
-          Math.abs(expectedChartData[x].split(' ')[1].replace(',', '') - data[x]) < tolerance
-        ).to.be.ok();
+        expect(Math.abs(expected - data[x]) < tolerance).to.be.ok();
       }
       log.debug('Done');
     });
@@ -104,19 +103,18 @@ export default function ({ getService, getPageObjects }) {
         log.debug('data=' + data);
         const tolerance = 10; // the y-axis scale is 10000 so 10 is 0.1%
         for (let x = 0; x < data.length; x++) {
+          const expected = Number(expectedChartData[x].split(' ')[1].replace(',', ''));
           log.debug(
             'x=' +
               x +
               " expectedChartData[x].split(' ')[1] = " +
-              expectedChartData[x].split(' ')[1].replace(',', '') +
+              expected +
               '  data[x]=' +
               data[x] +
               ' diff=' +
-              Math.abs(expectedChartData[x].split(' ')[1].replace(',', '') - data[x])
+              Math.abs(expected - data[x])
           );
-          expect(
-            Math.abs(expectedChartData[x].split(' ')[1].replace(',', '') - data[x]) < tolerance
-          ).to.be.ok();
+          expect(Math.abs(expected - data[x]) < tolerance).to.be.ok();
         }
         log.debug('Done');
       });
@@ -168,9 +166,13 @@ export default function ({ getService, getPageObjects }) {
     });
 
     it('should be able to save and load', async function () {
-      await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
+      const vizName = await PageObjects.visChart.getExpectedValue(
+        'Visualization Line split chart',
+        'Visualization Line split chart - chart library'
+      );
+      await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName);
 
-      await PageObjects.visualize.loadSavedVisualization(vizName1);
+      await PageObjects.visualize.loadSavedVisualization(vizName);
       await PageObjects.visChart.waitForVisualization();
     });
 
@@ -211,6 +213,7 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = ['0', '2,000', '4,000', '6,000', '8,000', '10,000'];
+
         expect(labels).to.eql(expectedLabels);
       });
 
diff --git a/test/functional/apps/visualize/_line_chart_split_series.ts b/test/functional/apps/visualize/_line_chart_split_series.ts
new file mode 100644
index 00000000000000..78332819530ce6
--- /dev/null
+++ b/test/functional/apps/visualize/_line_chart_split_series.ts
@@ -0,0 +1,355 @@
+/*
+ * 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 expect from '@kbn/expect';
+
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const log = getService('log');
+  const inspector = getService('inspector');
+  const retry = getService('retry');
+  const testSubjects = getService('testSubjects');
+  const PageObjects = getPageObjects([
+    'common',
+    'visualize',
+    'visEditor',
+    'visChart',
+    'timePicker',
+  ]);
+
+  describe('line charts - split series', function () {
+    const initLineChart = async function () {
+      log.debug('navigateToApp visualize');
+      await PageObjects.visualize.navigateToNewAggBasedVisualization();
+      log.debug('clickLineChart');
+      await PageObjects.visualize.clickLineChart();
+      await PageObjects.visualize.clickNewSearch();
+      await PageObjects.timePicker.setDefaultAbsoluteRange();
+      log.debug('Bucket = Split chart');
+      await PageObjects.visEditor.clickBucket('Split series');
+      log.debug('Aggregation = Terms');
+      await PageObjects.visEditor.selectAggregation('Terms');
+      log.debug('Field = extension');
+      await PageObjects.visEditor.selectField('extension.raw');
+      await PageObjects.visEditor.clickGo();
+    };
+
+    before(initLineChart);
+
+    afterEach(async () => {
+      await inspector.close();
+    });
+
+    it('should show correct chart', async function () {
+      // this test only verifies the numerical part of this data
+      // it could also check the legend to verify the extensions
+      const expectedChartData = ['jpg 9,109', 'css 2,159', 'png 1,373', 'gif 918', 'php 445'];
+
+      // sleep a bit before trying to get the chart data
+      await PageObjects.common.sleep(3000);
+      const data = await PageObjects.visChart.getLineChartData();
+      log.debug('data=' + data);
+      const tolerance = 10; // the y-axis scale is 10000 so 10 is 0.1%
+      for (let x = 0; x < data.length; x++) {
+        const expected = Number(expectedChartData[x].split(' ')[1].replace(',', ''));
+        log.debug(
+          'x=' +
+            x +
+            " expectedChartData[x].split(' ')[1] = " +
+            expected +
+            '  data[x]=' +
+            data[x] +
+            ' diff=' +
+            Math.abs(expected - data[x])
+        );
+        expect(Math.abs(expected - data[x]) < tolerance).to.be.ok();
+      }
+      log.debug('Done');
+    });
+
+    it('should have inspector enabled', async function () {
+      await inspector.expectIsEnabled();
+    });
+
+    it('should show correct chart order by Term', async function () {
+      // this test only verifies the numerical part of this data
+      // it could also check the legend to verify the extensions
+      const expectedChartData = ['png 1,373', 'php 445', 'jpg 9,109', 'gif 918', 'css 2,159'];
+
+      log.debug('Order By = Term');
+      await PageObjects.visEditor.selectOrderByMetric(2, '_key');
+      await PageObjects.visEditor.clickGo();
+      await retry.try(async function () {
+        const data = await PageObjects.visChart.getLineChartData();
+        log.debug('data=' + data);
+        const tolerance = 10; // the y-axis scale is 10000 so 10 is 0.1%
+        for (let x = 0; x < data.length; x++) {
+          const expected = Number(expectedChartData[x].split(' ')[1].replace(',', ''));
+          log.debug(
+            'x=' +
+              x +
+              " expectedChartData[x].split(' ')[1] = " +
+              expected +
+              '  data[x]=' +
+              data[x] +
+              ' diff=' +
+              Math.abs(expected - data[x])
+          );
+          expect(Math.abs(expected - data[x]) < tolerance).to.be.ok();
+        }
+        log.debug('Done');
+      });
+    });
+
+    it('should show correct data, ordered by Term', async function () {
+      const expectedChartData = [
+        ['png', '1,373'],
+        ['php', '445'],
+        ['jpg', '9,109'],
+        ['gif', '918'],
+        ['css', '2,159'],
+      ];
+
+      await inspector.open();
+      await inspector.expectTableData(expectedChartData);
+    });
+
+    it('should request new data when autofresh is enabled', async () => {
+      const intervalS = 3;
+      await PageObjects.timePicker.startAutoRefresh(intervalS);
+
+      // check inspector panel request stats for timestamp
+      await inspector.open();
+      await inspector.openInspectorRequestsView();
+      const requestStatsBefore = await inspector.getTableData();
+      const requestTimestampBefore = requestStatsBefore.filter((r) =>
+        r[0].includes('Request timestamp')
+      )[0][1];
+
+      // pause to allow time for autorefresh to fire another request
+      await PageObjects.common.sleep(intervalS * 1000 * 1.5);
+
+      // get the latest timestamp from request stats
+      const requestStatsAfter = await inspector.getTableData();
+      const requestTimestampAfter = requestStatsAfter.filter((r) =>
+        r[0].includes('Request timestamp')
+      )[0][1];
+      log.debug(
+        `Timestamp before: ${requestTimestampBefore}, Timestamp after: ${requestTimestampAfter}`
+      );
+
+      // cleanup
+      await inspector.close();
+      await PageObjects.timePicker.pauseAutoRefresh();
+
+      // if autorefresh is working, timestamps should be different
+      expect(requestTimestampBefore).not.to.equal(requestTimestampAfter);
+    });
+
+    it('should be able to save and load', async function () {
+      const vizName = await PageObjects.visChart.getExpectedValue(
+        'Visualization Line split series',
+        'Visualization Line split series - chart library'
+      );
+
+      await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName);
+
+      await PageObjects.visualize.loadSavedVisualization(vizName);
+      await PageObjects.visChart.waitForVisualization();
+    });
+
+    describe('switch between Y axis scale types', () => {
+      before(initLineChart);
+      const axisId = 'ValueAxis-1';
+
+      it('should show ticks on selecting log scale', async () => {
+        await PageObjects.visEditor.clickMetricsAndAxes();
+        await PageObjects.visEditor.clickYAxisOptions(axisId);
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'log');
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers();
+        const minLabel = await PageObjects.visChart.getExpectedValue(2, 1);
+        const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 900);
+        const numberOfLabels = 10;
+        expect(labels.length).to.be.greaterThan(numberOfLabels);
+        expect(labels[0]).to.eql(minLabel);
+        expect(labels[labels.length - 1]).to.be.greaterThan(maxLabel);
+      });
+
+      it('should show filtered ticks on selecting log scale', async () => {
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers();
+        const minLabel = await PageObjects.visChart.getExpectedValue(2, 1);
+        const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 900);
+        const numberOfLabels = 10;
+        expect(labels.length).to.be.greaterThan(numberOfLabels);
+        expect(labels[0]).to.eql(minLabel);
+        expect(labels[labels.length - 1]).to.be.greaterThan(maxLabel);
+      });
+
+      it('should show ticks on selecting square root scale', async () => {
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'square root');
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          [
+            '0',
+            '1,000',
+            '2,000',
+            '3,000',
+            '4,000',
+            '5,000',
+            '6,000',
+            '7,000',
+            '8,000',
+            '9,000',
+            '10,000',
+          ],
+          ['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000']
+        );
+        expect(labels).to.eql(expectedLabels);
+      });
+
+      it('should show filtered ticks on selecting square root scale', async () => {
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000'],
+          ['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000']
+        );
+        expect(labels).to.eql(expectedLabels);
+      });
+
+      it('should show ticks on selecting linear scale', async () => {
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'linear');
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
+        log.debug(labels);
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          [
+            '0',
+            '1,000',
+            '2,000',
+            '3,000',
+            '4,000',
+            '5,000',
+            '6,000',
+            '7,000',
+            '8,000',
+            '9,000',
+            '10,000',
+          ],
+          ['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000']
+        );
+        expect(labels).to.eql(expectedLabels);
+      });
+
+      it('should show filtered ticks on selecting linear scale', async () => {
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000'],
+          ['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000']
+        );
+        expect(labels).to.eql(expectedLabels);
+      });
+    });
+
+    describe('pipeline aggregations', () => {
+      before(async () => {
+        log.debug('navigateToApp visualize');
+        await PageObjects.visualize.navigateToNewAggBasedVisualization();
+        log.debug('clickLineChart');
+        await PageObjects.visualize.clickLineChart();
+        await PageObjects.visualize.clickNewSearch();
+        await PageObjects.timePicker.setDefaultAbsoluteRange();
+      });
+
+      describe('parent pipeline', () => {
+        it('should have an error if bucket is not selected', async () => {
+          await PageObjects.visEditor.clickMetricEditor();
+          log.debug('Metrics agg = Serial diff');
+          await PageObjects.visEditor.selectAggregation('Serial diff', 'metrics');
+          await testSubjects.existOrFail('bucketsError');
+        });
+
+        it('should apply with selected bucket', async () => {
+          log.debug('Bucket = X-axis');
+          await PageObjects.visEditor.clickBucket('X-axis');
+          log.debug('Aggregation = Date Histogram');
+          await PageObjects.visEditor.selectAggregation('Date Histogram');
+          await PageObjects.visEditor.clickGo();
+          const title = await PageObjects.visChart.getYAxisTitle();
+          expect(title).to.be('Serial Diff of Count');
+        });
+
+        it('should change y-axis label to custom', async () => {
+          log.debug('set custom label of y-axis to "Custom"');
+          await PageObjects.visEditor.setCustomLabel('Custom', 1);
+          await PageObjects.visEditor.clickGo();
+          const title = await PageObjects.visChart.getYAxisTitle();
+          expect(title).to.be('Custom');
+        });
+
+        it('should have advanced accordion and json input', async () => {
+          await testSubjects.click('advancedParams-1');
+          await testSubjects.existOrFail('advancedParams-1 > codeEditorContainer');
+        });
+      });
+
+      describe('sibling pipeline', () => {
+        it('should apply with selected bucket', async () => {
+          log.debug('Metrics agg = Average Bucket');
+          await PageObjects.visEditor.selectAggregation('Average Bucket', 'metrics');
+          await PageObjects.visEditor.clickGo();
+          const title = await PageObjects.visChart.getYAxisTitle();
+          expect(title).to.be('Overall Average of Count');
+        });
+
+        it('should change sub metric custom label and calculate y-axis title', async () => {
+          log.debug('set custom label of sub metric to "Cats"');
+          await PageObjects.visEditor.setCustomLabel('Cats', '1-metric');
+          await PageObjects.visEditor.clickGo();
+          const title = await PageObjects.visChart.getYAxisTitle();
+          expect(title).to.be('Overall Average of Cats');
+        });
+
+        it('should outer custom label', async () => {
+          log.debug('set custom label to "Custom"');
+          await PageObjects.visEditor.setCustomLabel('Custom', 1);
+          await PageObjects.visEditor.clickGo();
+          const title = await PageObjects.visChart.getYAxisTitle();
+          expect(title).to.be('Custom');
+        });
+
+        it('should have advanced accordion and json input', async () => {
+          await testSubjects.click('advancedParams-1');
+          await testSubjects.existOrFail('advancedParams-1 > codeEditorContainer');
+        });
+      });
+    });
+  });
+}
diff --git a/test/functional/apps/visualize/_linked_saved_searches.ts b/test/functional/apps/visualize/_linked_saved_searches.ts
index e7402de399e411..d1d8c0f1eebe71 100644
--- a/test/functional/apps/visualize/_linked_saved_searches.ts
+++ b/test/functional/apps/visualize/_linked_saved_searches.ts
@@ -18,7 +18,9 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
+
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const browser = getService('browser');
   const filterBar = getService('filterBar');
diff --git a/test/functional/apps/visualize/_markdown_vis.js b/test/functional/apps/visualize/_markdown_vis.ts
similarity index 95%
rename from test/functional/apps/visualize/_markdown_vis.js
rename to test/functional/apps/visualize/_markdown_vis.ts
index 21b472edecd41e..07757cdf887c6c 100644
--- a/test/functional/apps/visualize/_markdown_vis.js
+++ b/test/functional/apps/visualize/_markdown_vis.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getPageObjects, getService }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'header']);
   const find = getService('find');
   const inspector = getService('inspector');
diff --git a/test/functional/apps/visualize/_metric_chart.js b/test/functional/apps/visualize/_metric_chart.ts
similarity index 98%
rename from test/functional/apps/visualize/_metric_chart.js
rename to test/functional/apps/visualize/_metric_chart.ts
index 483a0688d6acad..2af01fbe65f92a 100644
--- a/test/functional/apps/visualize/_metric_chart.js
+++ b/test/functional/apps/visualize/_metric_chart.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const filterBar = getService('filterBar');
diff --git a/test/functional/apps/visualize/_pie_chart.js b/test/functional/apps/visualize/_pie_chart.ts
similarity index 99%
rename from test/functional/apps/visualize/_pie_chart.js
rename to test/functional/apps/visualize/_pie_chart.ts
index eef0f90005a436..f79f9ea826362c 100644
--- a/test/functional/apps/visualize/_pie_chart.js
+++ b/test/functional/apps/visualize/_pie_chart.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const filterBar = getService('filterBar');
   const pieChart = getService('pieChart');
diff --git a/test/functional/apps/visualize/_point_series_options.js b/test/functional/apps/visualize/_point_series_options.ts
similarity index 82%
rename from test/functional/apps/visualize/_point_series_options.js
rename to test/functional/apps/visualize/_point_series_options.ts
index a671cb82ab70fe..9ad3dbe583a7a4 100644
--- a/test/functional/apps/visualize/_point_series_options.js
+++ b/test/functional/apps/visualize/_point_series_options.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const kibanaServer = getService('kibanaServer');
@@ -31,6 +33,7 @@ export default function ({ getService, getPageObjects }) {
     'timePicker',
     'visEditor',
     'visChart',
+    'common',
   ]);
   const inspector = getService('inspector');
 
@@ -154,7 +157,7 @@ export default function ({ getService, getPageObjects }) {
       });
 
       it('should put secondary axis on the right', async function () {
-        const length = await PageObjects.visChart.getRightValueAxes();
+        const length = await PageObjects.visChart.getRightValueAxesCount();
         expect(length).to.be(1);
       });
     });
@@ -163,7 +166,7 @@ export default function ({ getService, getPageObjects }) {
       it('should change average series type to histogram', async function () {
         await PageObjects.visEditor.setSeriesType(1, 'histogram');
         await PageObjects.visEditor.clickGo();
-        const length = await PageObjects.visChart.getHistogramSeries();
+        const length = await PageObjects.visChart.getHistogramSeriesCount();
         expect(length).to.be(1);
       });
     });
@@ -177,7 +180,8 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.toggleGridCategoryLines();
         await PageObjects.visEditor.clickGo();
         const gridLines = await PageObjects.visChart.getGridLines();
-        expect(gridLines.length).to.be(9);
+        const expectedCount = await PageObjects.visChart.getExpectedValue(9, 5);
+        expect(gridLines.length).to.be(expectedCount);
         gridLines.forEach((gridLine) => {
           expect(gridLine.y).to.be(0);
         });
@@ -188,7 +192,8 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.toggleGridCategoryLines();
         await PageObjects.visEditor.clickGo();
         const gridLines = await PageObjects.visChart.getGridLines();
-        expect(gridLines.length).to.be(9);
+        const expectedCount = await PageObjects.visChart.getExpectedValue(9, 8);
+        expect(gridLines.length).to.be(expectedCount);
         gridLines.forEach((gridLine) => {
           expect(gridLine.x).to.be(0);
         });
@@ -269,17 +274,30 @@ export default function ({ getService, getPageObjects }) {
       });
     });
 
-    describe('timezones', function () {
-      const expectedLabels = ['2015-09-20 00:00', '2015-09-21 00:00', '2015-09-22 00:00'];
-
+    describe('timezones', async function () {
       it('should show round labels in default timezone', async function () {
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['2015-09-20 00:00', '2015-09-21 00:00', '2015-09-22 00:00'],
+          ['2015-09-19 12:00', '2015-09-20 12:00', '2015-09-21 12:00', '2015-09-22 12:00']
+        );
         await initChart();
         const labels = await PageObjects.visChart.getXAxisLabels();
         expect(labels.join()).to.contain(expectedLabels.join());
       });
 
       it('should show round labels in different timezone', async function () {
-        await kibanaServer.uiSettings.replace({ 'dateFormat:tz': 'America/Phoenix' });
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['2015-09-20 00:00', '2015-09-21 00:00', '2015-09-22 00:00'],
+          [
+            '2015-09-19 12:00',
+            '2015-09-20 06:00',
+            '2015-09-21 00:00',
+            '2015-09-21 18:00',
+            '2015-09-22 12:00',
+          ]
+        );
+
+        await kibanaServer.uiSettings.update({ 'dateFormat:tz': 'America/Phoenix' });
         await browser.refresh();
         await PageObjects.header.awaitKibanaChrome();
         await initChart();
@@ -296,13 +314,34 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime);
         await PageObjects.visChart.waitForRenderingCount();
 
-        await retry.waitFor('wait for x-axis labels to match expected for Phoenix', async () => {
-          const labels = await PageObjects.visChart.getXAxisLabels();
-          log.debug(`Labels: ${labels}`);
-          return (
-            labels.toString() === ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00'].toString()
-          );
-        });
+        await retry.waitForWithTimeout(
+          'wait for x-axis labels to match expected for Phoenix',
+          5000,
+          async () => {
+            const labels = (await PageObjects.visChart.getXAxisLabels()) ?? '';
+            log.debug(`Labels: ${labels}`);
+
+            const xLabels = await PageObjects.visChart.getExpectedValue(
+              ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
+              [
+                '09:30',
+                '10:00',
+                '10:30',
+                '11:00',
+                '11:30',
+                '12:00',
+                '12:30',
+                '13:00',
+                '13:30',
+                '14:00',
+                '14:30',
+                '15:00',
+                '15:30',
+              ]
+            );
+            return labels.toString() === xLabels.toString();
+          }
+        );
 
         const expectedTableData = [
           ['09:05', '13', '13,463,070,562.462'],
@@ -330,7 +369,7 @@ export default function ({ getService, getPageObjects }) {
         await inspector.expectTableData(expectedTableData);
         await inspector.close();
         log.debug("set 'dateFormat:tz': 'UTC'");
-        await kibanaServer.uiSettings.replace({
+        await kibanaServer.uiSettings.update({
           'dateFormat:tz': 'UTC',
           defaultIndex: 'logstash-*',
         });
@@ -339,16 +378,38 @@ export default function ({ getService, getPageObjects }) {
         await browser.refresh();
         // wait some time before trying to check for rendering count
         await PageObjects.header.awaitKibanaChrome();
+        await PageObjects.visualize.clickRefresh();
         await PageObjects.visChart.waitForRenderingCount();
         log.debug('getXAxisLabels');
 
-        await retry.waitFor('wait for x-axis labels to match expected for UTC', async () => {
-          const labels2 = await PageObjects.visChart.getXAxisLabels();
-          log.debug(`Labels: ${labels2}`);
-          return (
-            labels2.toString() === ['17:00', '18:00', '19:00', '20:00', '21:00', '22:00'].toString()
-          );
-        });
+        await retry.waitForWithTimeout(
+          'wait for x-axis labels to match expected for UTC',
+          5000,
+          async () => {
+            const labels2 = (await PageObjects.visChart.getXAxisLabels()) ?? '';
+            log.debug(`Labels: ${labels2}`);
+
+            const xLabels2 = await PageObjects.visChart.getExpectedValue(
+              ['17:00', '18:00', '19:00', '20:00', '21:00', '22:00'],
+              [
+                '16:30',
+                '17:00',
+                '17:30',
+                '18:00',
+                '18:30',
+                '19:00',
+                '19:30',
+                '20:00',
+                '20:30',
+                '21:00',
+                '21:30',
+                '22:00',
+                '22:30',
+              ]
+            );
+            return labels2.toString() === xLabels2.toString();
+          }
+        );
 
         // the expected inspector data is the same but with timestamps shifted +7 hours
         const expectedTableData2 = [
@@ -386,7 +447,7 @@ export default function ({ getService, getPageObjects }) {
         // for details see https://github.com/elastic/kibana/issues/63037
         if (timezone !== 'UTC') {
           log.debug("set 'dateFormat:tz': 'UTC'");
-          await kibanaServer.uiSettings.replace({ 'dateFormat:tz': 'UTC' });
+          await kibanaServer.uiSettings.update({ 'dateFormat:tz': 'UTC' });
         }
       });
     });
diff --git a/test/functional/apps/visualize/_region_map.js b/test/functional/apps/visualize/_region_map.ts
similarity index 95%
rename from test/functional/apps/visualize/_region_map.js
rename to test/functional/apps/visualize/_region_map.ts
index eee73d2fe76f9b..45cb554f02771f 100644
--- a/test/functional/apps/visualize/_region_map.js
+++ b/test/functional/apps/visualize/_region_map.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   describe('vector map', function () {
     const inspector = getService('inspector');
     const log = getService('log');
@@ -67,7 +69,7 @@ export default function ({ getService, getPageObjects }) {
           'World Countries'
         );
 
-        //ensure all fields are there
+        // ensure all fields are there
         await PageObjects.visEditor.setSelectByOptionText(
           'regionMapOptionsSelectJoinField',
           'ISO 3166-1 alpha-2 code'
diff --git a/test/functional/apps/visualize/_shared_item.js b/test/functional/apps/visualize/_shared_item.ts
similarity index 93%
rename from test/functional/apps/visualize/_shared_item.js
rename to test/functional/apps/visualize/_shared_item.ts
index 679f558e018b67..097ce9edad612c 100644
--- a/test/functional/apps/visualize/_shared_item.js
+++ b/test/functional/apps/visualize/_shared_item.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const PageObjects = getPageObjects(['common', 'visualize']);
diff --git a/test/functional/apps/visualize/_tag_cloud.js b/test/functional/apps/visualize/_tag_cloud.ts
similarity index 98%
rename from test/functional/apps/visualize/_tag_cloud.js
rename to test/functional/apps/visualize/_tag_cloud.ts
index 7b1671aaeb2f26..4f3ec81af1c614 100644
--- a/test/functional/apps/visualize/_tag_cloud.js
+++ b/test/functional/apps/visualize/_tag_cloud.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const filterBar = getService('filterBar');
   const log = getService('log');
   const inspector = getService('inspector');
diff --git a/test/functional/apps/visualize/_tile_map.js b/test/functional/apps/visualize/_tile_map.ts
similarity index 94%
rename from test/functional/apps/visualize/_tile_map.js
rename to test/functional/apps/visualize/_tile_map.ts
index 3ae72fe73a5fda..a4e7671da2ac3e 100644
--- a/test/functional/apps/visualize/_tile_map.js
+++ b/test/functional/apps/visualize/_tile_map.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const inspector = getService('inspector');
@@ -46,11 +48,11 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visualize.clickTileMap();
         await PageObjects.visualize.clickNewSearch();
         await PageObjects.timePicker.setDefaultAbsoluteRange();
-        //do not configure aggs
+        // do not configure aggs
       });
 
       it('should be able to zoom in twice', async () => {
-        //should not throw
+        // should not throw
         await PageObjects.tileMap.clickMapZoomIn();
         await PageObjects.tileMap.clickMapZoomIn();
       });
@@ -77,21 +79,25 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.clickGo();
       });
 
+      type SampleTableData = Array<string | { lat: number; lon: number }>;
+
       /**
        * manually compare data due to possible small difference in numbers. This is browser dependent.
        */
-      function compareTableData(actual, expected) {
+      function compareTableData(actual: string[][], expected: SampleTableData[]) {
         log.debug('comparing expected: ', expected);
         log.debug('with actual: ', actual);
 
         const roundedValues = actual.map((row) => {
           // Parse last element in each row as JSON and floor the lat/long value
           const coords = JSON.parse(row[row.length - 1]);
-          row[row.length - 1] = {
-            lat: Math.floor(parseFloat(coords.lat)),
-            lon: Math.floor(parseFloat(coords.lon)),
-          };
-          return row;
+          return [
+            ...row.slice(0, -1),
+            {
+              lat: Math.floor(parseFloat(coords.lat)),
+              lon: Math.floor(parseFloat(coords.lon)),
+            },
+          ];
         });
 
         expect(roundedValues).to.eql(expected);
@@ -111,9 +117,9 @@ export default function ({ getService, getPageObjects }) {
             ['-', 'f', '187', { lat: 45, lon: -83 }],
             ['-', '8', '108', { lat: 18, lon: -157 }],
           ];
-          //level 1
+          // level 1
           await PageObjects.tileMap.clickMapZoomOut();
-          //level 0
+          // level 0
           await PageObjects.tileMap.clickMapZoomOut();
 
           await inspector.open();
diff --git a/test/functional/apps/visualize/_tsvb_chart.ts b/test/functional/apps/visualize/_tsvb_chart.ts
index 6ded88cd50b39d..c8d7cf99a57999 100644
--- a/test/functional/apps/visualize/_tsvb_chart.ts
+++ b/test/functional/apps/visualize/_tsvb_chart.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_tsvb_markdown.ts b/test/functional/apps/visualize/_tsvb_markdown.ts
index 4f12a45cf5f6b3..b010d6db20c065 100644
--- a/test/functional/apps/visualize/_tsvb_markdown.ts
+++ b/test/functional/apps/visualize/_tsvb_markdown.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getPageObjects, getService }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_tsvb_table.ts b/test/functional/apps/visualize/_tsvb_table.ts
index 9c21103c85d0b1..695bee5152f12e 100644
--- a/test/functional/apps/visualize/_tsvb_table.ts
+++ b/test/functional/apps/visualize/_tsvb_table.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getPageObjects }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_tsvb_time_series.ts b/test/functional/apps/visualize/_tsvb_time_series.ts
index d4a079a38c8143..bd776708623fce 100644
--- a/test/functional/apps/visualize/_tsvb_time_series.ts
+++ b/test/functional/apps/visualize/_tsvb_time_series.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getPageObjects, getService }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_vega_chart.ts b/test/functional/apps/visualize/_vega_chart.ts
index b59d9590bb62af..b8023efb05ab07 100644
--- a/test/functional/apps/visualize/_vega_chart.ts
+++ b/test/functional/apps/visualize/_vega_chart.ts
@@ -18,6 +18,7 @@
  */
 import { unzip } from 'lodash';
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 const getTestSpec = (expression: string) => `
diff --git a/test/functional/apps/visualize/_vertical_bar_chart.js b/test/functional/apps/visualize/_vertical_bar_chart.ts
similarity index 93%
rename from test/functional/apps/visualize/_vertical_bar_chart.js
rename to test/functional/apps/visualize/_vertical_bar_chart.ts
index 5ecbf3f720ee67..f642c79646c813 100644
--- a/test/functional/apps/visualize/_vertical_bar_chart.js
+++ b/test/functional/apps/visualize/_vertical_bar_chart.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const inspector = getService('inspector');
@@ -354,8 +356,9 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers();
-        const minLabel = 2;
-        const maxLabel = 5000;
+
+        const minLabel = await PageObjects.visChart.getExpectedValue(2, 1);
+        const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 900);
         const numberOfLabels = 10;
         expect(labels.length).to.be.greaterThan(numberOfLabels);
         expect(labels[0]).to.eql(minLabel);
@@ -366,8 +369,9 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers();
-        const minLabel = 2;
-        const maxLabel = 5000;
+
+        const minLabel = await PageObjects.visChart.getExpectedValue(2, 1);
+        const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 900);
         const numberOfLabels = 10;
         expect(labels.length).to.be.greaterThan(numberOfLabels);
         expect(labels[0]).to.eql(minLabel);
@@ -379,17 +383,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = [
-          '0',
-          '200',
-          '400',
-          '600',
-          '800',
-          '1,000',
-          '1,200',
-          '1,400',
-          '1,600',
-        ];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -397,7 +394,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['200', '400', '600', '800', '1,000', '1,200', '1,400'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -407,17 +407,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
         log.debug(labels);
-        const expectedLabels = [
-          '0',
-          '200',
-          '400',
-          '600',
-          '800',
-          '1,000',
-          '1,200',
-          '1,400',
-          '1,600',
-        ];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -425,7 +418,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['200', '400', '600', '800', '1,000', '1,200', '1,400'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
     });
diff --git a/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js b/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.ts
similarity index 88%
rename from test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js
rename to test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.ts
index 7fb123f2e304ab..d13f1513c55680 100644
--- a/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js
+++ b/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const inspector = getService('inspector');
@@ -140,8 +142,8 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers();
-        const minLabel = 2;
-        const maxLabel = 5000;
+        const minLabel = await PageObjects.visChart.getExpectedValue(2, 1);
+        const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 900);
         const numberOfLabels = 10;
         expect(labels.length).to.be.greaterThan(numberOfLabels);
         expect(labels[0]).to.eql(minLabel);
@@ -152,8 +154,8 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers();
-        const minLabel = 2;
-        const maxLabel = 5000;
+        const minLabel = await PageObjects.visChart.getExpectedValue(2, 1);
+        const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 900);
         const numberOfLabels = 10;
         expect(labels.length).to.be.greaterThan(numberOfLabels);
         expect(labels[0]).to.eql(minLabel);
@@ -165,17 +167,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = [
-          '0',
-          '200',
-          '400',
-          '600',
-          '800',
-          '1,000',
-          '1,200',
-          '1,400',
-          '1,600',
-        ];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -183,7 +178,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['200', '400', '600', '800', '1,000', '1,200', '1,400'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -193,17 +191,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
         log.debug(labels);
-        const expectedLabels = [
-          '0',
-          '200',
-          '400',
-          '600',
-          '800',
-          '1,000',
-          '1,200',
-          '1,400',
-          '1,600',
-        ];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -211,7 +202,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['200', '400', '600', '800', '1,000', '1,200', '1,400'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
     });
diff --git a/test/functional/apps/visualize/_visualize_listing.js b/test/functional/apps/visualize/_visualize_listing.ts
similarity index 96%
rename from test/functional/apps/visualize/_visualize_listing.js
rename to test/functional/apps/visualize/_visualize_listing.ts
index e7e62cfe424a96..5e5b100f1cf387 100644
--- a/test/functional/apps/visualize/_visualize_listing.js
+++ b/test/functional/apps/visualize/_visualize_listing.ts
@@ -17,7 +17,9 @@
  * under the License.
  */
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['visualize', 'visEditor']);
   const listingTable = getService('listingTable');
 
diff --git a/test/functional/apps/visualize/index.ts b/test/functional/apps/visualize/index.ts
index de73b2deabbd92..ad69ad5ab41cd2 100644
--- a/test/functional/apps/visualize/index.ts
+++ b/test/functional/apps/visualize/index.ts
@@ -42,6 +42,37 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
       isOss = await deployment.isOss();
     });
 
+    // TODO: Remove when vislib is removed
+    describe('chartsLibrary', function () {
+      this.tags('ciGroup7');
+
+      before(async () => {
+        await kibanaServer.uiSettings.update({
+          'visualization:visualize:chartsLibrary': true,
+        });
+        await browser.refresh();
+      });
+
+      after(async () => {
+        await kibanaServer.uiSettings.update({
+          'visualization:visualize:chartsLibrary': false,
+        });
+        await browser.refresh();
+      });
+
+      // Test replaced vislib chart types
+      loadTestFile(require.resolve('./_area_chart'));
+      loadTestFile(require.resolve('./_line_chart_split_series'));
+      loadTestFile(require.resolve('./_point_series_options'));
+      loadTestFile(require.resolve('./_vertical_bar_chart'));
+      loadTestFile(require.resolve('./_vertical_bar_chart_nontimeindex'));
+
+      // Test non-replaced vislib chart types
+      loadTestFile(require.resolve('./_gauge_chart'));
+      loadTestFile(require.resolve('./_heatmap_chart'));
+      loadTestFile(require.resolve('./_pie_chart'));
+    });
+
     describe('', function () {
       this.tags('ciGroup9');
 
@@ -68,7 +99,8 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
     describe('', function () {
       this.tags('ciGroup11');
 
-      loadTestFile(require.resolve('./_line_chart'));
+      loadTestFile(require.resolve('./_line_chart_split_series'));
+      loadTestFile(require.resolve('./_line_chart_split_chart'));
       loadTestFile(require.resolve('./_pie_chart'));
       loadTestFile(require.resolve('./_point_series_options'));
       loadTestFile(require.resolve('./_markdown_vis'));
@@ -76,6 +108,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
       loadTestFile(require.resolve('./_lab_mode'));
       loadTestFile(require.resolve('./_linked_saved_searches'));
       loadTestFile(require.resolve('./_visualize_listing'));
+
       if (isOss) {
         loadTestFile(require.resolve('./_tile_map'));
         loadTestFile(require.resolve('./_region_map'));
diff --git a/test/functional/apps/visualize/input_control_vis/chained_controls.js b/test/functional/apps/visualize/input_control_vis/chained_controls.ts
similarity index 96%
rename from test/functional/apps/visualize/input_control_vis/chained_controls.js
rename to test/functional/apps/visualize/input_control_vis/chained_controls.ts
index e1a58e1da34f36..ea481a485bd904 100644
--- a/test/functional/apps/visualize/input_control_vis/chained_controls.js
+++ b/test/functional/apps/visualize/input_control_vis/chained_controls.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const filterBar = getService('filterBar');
   const PageObjects = getPageObjects(['common', 'visualize', 'visEditor', 'header', 'timePicker']);
   const testSubjects = getService('testSubjects');
diff --git a/test/functional/apps/visualize/input_control_vis/dynamic_options.js b/test/functional/apps/visualize/input_control_vis/dynamic_options.ts
similarity index 96%
rename from test/functional/apps/visualize/input_control_vis/dynamic_options.js
rename to test/functional/apps/visualize/input_control_vis/dynamic_options.ts
index 400be471be4b61..c7cc72cca36005 100644
--- a/test/functional/apps/visualize/input_control_vis/dynamic_options.js
+++ b/test/functional/apps/visualize/input_control_vis/dynamic_options.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['common', 'visualize', 'visEditor', 'header', 'timePicker']);
   const comboBox = getService('comboBox');
 
diff --git a/test/functional/apps/visualize/input_control_vis/index.js b/test/functional/apps/visualize/input_control_vis/index.ts
similarity index 89%
rename from test/functional/apps/visualize/input_control_vis/index.js
rename to test/functional/apps/visualize/input_control_vis/index.ts
index fd63fb5f04e3ac..7e5d9f2f5289b9 100644
--- a/test/functional/apps/visualize/input_control_vis/index.js
+++ b/test/functional/apps/visualize/input_control_vis/index.ts
@@ -17,7 +17,9 @@
  * under the License.
  */
 
-export default function ({ loadTestFile }) {
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default function ({ loadTestFile }: FtrProviderContext) {
   describe('input controls', function () {
     loadTestFile(require.resolve('./input_control_options'));
     loadTestFile(require.resolve('./dynamic_options'));
diff --git a/test/functional/apps/visualize/input_control_vis/input_control_options.js b/test/functional/apps/visualize/input_control_vis/input_control_options.ts
similarity index 98%
rename from test/functional/apps/visualize/input_control_vis/input_control_options.js
rename to test/functional/apps/visualize/input_control_vis/input_control_options.ts
index a17eeaca160021..6e2941eaeb14e4 100644
--- a/test/functional/apps/visualize/input_control_vis/input_control_options.js
+++ b/test/functional/apps/visualize/input_control_vis/input_control_options.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const filterBar = getService('filterBar');
   const PageObjects = getPageObjects(['common', 'visualize', 'visEditor', 'header', 'timePicker']);
   const testSubjects = getService('testSubjects');
diff --git a/test/functional/apps/visualize/input_control_vis/input_control_range.ts b/test/functional/apps/visualize/input_control_vis/input_control_range.ts
index b855a014270687..9cdc591639c724 100644
--- a/test/functional/apps/visualize/input_control_vis/input_control_range.ts
+++ b/test/functional/apps/visualize/input_control_vis/input_control_range.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
diff --git a/test/functional/page_objects/dashboard_page.ts b/test/functional/page_objects/dashboard_page.ts
index 27a7f585a5cf78..8924d22cdb50f6 100644
--- a/test/functional/page_objects/dashboard_page.ts
+++ b/test/functional/page_objects/dashboard_page.ts
@@ -36,7 +36,10 @@ export function DashboardPageProvider({ getService, getPageObjects }: FtrProvide
   const PageObjects = getPageObjects(['common', 'header', 'visualize']);
 
   interface SaveDashboardOptions {
-    waitDialogIsClosed: boolean;
+    /**
+     * @default true
+     */
+    waitDialogIsClosed?: boolean;
     needsConfirm?: boolean;
     storeTimeWithDashboard?: boolean;
     saveAsNew?: boolean;
diff --git a/test/functional/page_objects/discover_page.ts b/test/functional/page_objects/discover_page.ts
index 494141355806f1..b73812b33be677 100644
--- a/test/functional/page_objects/discover_page.ts
+++ b/test/functional/page_objects/discover_page.ts
@@ -351,7 +351,7 @@ export function DiscoverPageProvider({ getService, getPageObjects }: FtrProvider
     }
 
     public async waitForChartLoadingComplete(renderCount: number) {
-      await elasticChart.waitForRenderingCount('discoverChart', renderCount);
+      await elasticChart.waitForRenderingCount(renderCount, 'discoverChart');
     }
 
     public async waitForDocTableLoadingComplete() {
diff --git a/test/functional/page_objects/legacy/data_table_vis.ts b/test/functional/page_objects/legacy/data_table_vis.ts
index 6b437c7dd640d7..d0c72dd5ec6611 100644
--- a/test/functional/page_objects/legacy/data_table_vis.ts
+++ b/test/functional/page_objects/legacy/data_table_vis.ts
@@ -79,11 +79,11 @@ export function LegacyDataTableVisProvider({ getService, getPageObjects }: FtrPr
       });
     }
 
-    public async filterOnTableCell(column: number, row: number) {
+    public async filterOnTableCell(columnIndex: number, rowIndex: number) {
       await retry.try(async () => {
         const tableVis = await testSubjects.find('tableVis');
         const cell = await tableVis.findByCssSelector(
-          `tbody tr:nth-child(${row}) td:nth-child(${column})`
+          `tbody tr:nth-child(${rowIndex}) td:nth-child(${columnIndex})`
         );
         await cell.moveMouseTo();
         const filterBtn = await testSubjects.findDescendant('filterForCellValue', cell);
diff --git a/test/functional/page_objects/settings_page.ts b/test/functional/page_objects/settings_page.ts
index e29f75b8065744..b4fe8424c2286a 100644
--- a/test/functional/page_objects/settings_page.ts
+++ b/test/functional/page_objects/settings_page.ts
@@ -322,7 +322,8 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider
 
     async createIndexPattern(
       indexPatternName: string,
-      timefield = '@timestamp',
+      // null to bypass default value
+      timefield: string | null = '@timestamp',
       isStandardIndexPattern = true
     ) {
       await retry.try(async () => {
diff --git a/test/functional/page_objects/time_picker.ts b/test/functional/page_objects/time_picker.ts
index 272fc5a7914be7..998813cccf88b1 100644
--- a/test/functional/page_objects/time_picker.ts
+++ b/test/functional/page_objects/time_picker.ts
@@ -99,7 +99,7 @@ export function TimePickerProvider({ getService, getPageObjects }: FtrProviderCo
       await testSubjects.click(`superDatePickerCommonlyUsed_${option}`);
     }
 
-    private async inputValue(dataTestSubj: string, value: string) {
+    public async inputValue(dataTestSubj: string, value: string) {
       if (browser.isFirefox) {
         const input = await testSubjects.find(dataTestSubj);
         await input.clearValue();
diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts
index 553c8312a59af0..2ad7c77a58ca94 100644
--- a/test/functional/page_objects/visualize_chart_page.ts
+++ b/test/functional/page_objects/visualize_chart_page.ts
@@ -17,25 +17,103 @@
  * under the License.
  */
 
+import { Position } from '@elastic/charts';
+
 import { FtrProviderContext } from '../ftr_provider_context';
 
+const elasticChartSelector = 'visTypeXyChart';
+
 export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const config = getService('config');
   const find = getService('find');
   const log = getService('log');
   const retry = getService('retry');
+  const kibanaServer = getService('kibanaServer');
+  const elasticChart = getService('elasticChart');
   const dataGrid = getService('dataGrid');
   const defaultFindTimeout = config.get('timeouts.find');
   const { common } = getPageObjects(['common']);
 
   class VisualizeChart {
+    private async getDebugState() {
+      return await elasticChart.getChartDebugData(elasticChartSelector);
+    }
+
+    /**
+     * Is chartsLibrary advanced setting enabled
+     */
+    public async isNewChartUiEnabled(): Promise<boolean> {
+      const enabled =
+        Boolean(await kibanaServer.uiSettings.get('visualization:visualize:chartsLibrary')) ??
+        false;
+      log.debug(`-- isNewChartUiEnabled = ${enabled}`);
+
+      return enabled;
+    }
+
+    /**
+     * Is chartsLibrary enabled and an area, line or histogram chart is available
+     */
+    private async isVisTypeXYChart(): Promise<boolean> {
+      const enabled = await this.isNewChartUiEnabled();
+
+      if (!enabled) {
+        log.debug(`-- isVisTypeXYChart = false`);
+        return false;
+      }
+
+      // check if enabled but not a line, area or histogram chart
+      if (await find.existsByCssSelector('.visLib__chart', 1)) {
+        const chart = await find.byCssSelector('.visLib__chart');
+        const chartType = await chart.getAttribute('data-vislib-chart-type');
+
+        if (!['line', 'area', 'histogram'].includes(chartType)) {
+          log.debug(`-- isVisTypeXYChart = false`);
+          return false;
+        }
+      }
+
+      if (!(await elasticChart.hasChart(elasticChartSelector, 1))) {
+        // not be a vislib chart type
+        log.debug(`-- isVisTypeXYChart = false`);
+        return false;
+      }
+
+      log.debug(`-- isVisTypeXYChart = true`);
+      return true;
+    }
+
+    /**
+     * Helper method to get expected values that are slightly different
+     * between vislib and elastic-chart inplementations
+     * @param vislibValue value expected for vislib chart
+     * @param elasticChartsValue value expected for `@elastic/charts` chart
+     */
+    public async getExpectedValue<T>(vislibValue: T, elasticChartsValue: T): Promise<T> {
+      if (await this.isVisTypeXYChart()) {
+        return elasticChartsValue;
+      }
+
+      return vislibValue;
+    }
+
     public async getYAxisTitle() {
+      if (await this.isVisTypeXYChart()) {
+        const xAxis = (await this.getDebugState())?.axes?.y ?? [];
+        return xAxis[0]?.title;
+      }
+
       const title = await find.byCssSelector('.y-axis-div .y-axis-title text');
       return await title.getVisibleText();
     }
 
     public async getXAxisLabels() {
+      if (await this.isVisTypeXYChart()) {
+        const [xAxis] = (await this.getDebugState())?.axes?.x ?? [];
+        return xAxis?.labels;
+      }
+
       const xAxis = await find.byCssSelector('.visAxis--x.visAxis__column--bottom');
       const $ = await xAxis.parseDomContent();
       return $('.x > g > text')
@@ -44,6 +122,11 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
     }
 
     public async getYAxisLabels() {
+      if (await this.isVisTypeXYChart()) {
+        const [yAxis] = (await this.getDebugState())?.axes?.y ?? [];
+        return yAxis?.labels;
+      }
+
       const yAxis = await find.byCssSelector('.visAxis__column--y.visAxis__column--left');
       const $ = await yAxis.parseDomContent();
       return $('.y > g > text')
@@ -52,6 +135,11 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
     }
 
     public async getYAxisLabelsAsNumbers() {
+      if (await this.isVisTypeXYChart()) {
+        const [yAxis] = (await this.getDebugState())?.axes?.y ?? [];
+        return yAxis?.values;
+      }
+
       return (await this.getYAxisLabels()).map((label) => Number(label.replace(',', '')));
     }
 
@@ -63,6 +151,12 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
      * Returns an array of height values
      */
     public async getAreaChartData(dataLabel: string, axis = 'ValueAxis-1') {
+      if (await this.isVisTypeXYChart()) {
+        const areas = (await this.getDebugState())?.areas ?? [];
+        const points = areas.find(({ name }) => name === dataLabel)?.lines.y1.points ?? [];
+        return points.map(({ y }) => y);
+      }
+
       const yAxisRatio = await this.getChartYAxisRatio(axis);
 
       const rectangle = await find.byCssSelector('rect.background');
@@ -99,6 +193,12 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
      * @param dataLabel data-label value
      */
     public async getAreaChartPaths(dataLabel: string) {
+      if (await this.isVisTypeXYChart()) {
+        const areas = (await this.getDebugState())?.areas ?? [];
+        const path = areas.find(({ name }) => name === dataLabel)?.path ?? '';
+        return path.split('L');
+      }
+
       const path = await retry.try(
         async () =>
           await find.byCssSelector(`path[data-label="${dataLabel}"]`, defaultFindTimeout * 2)
@@ -118,6 +218,14 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
      * @param axis axis value, 'ValueAxis-1' by default
      */
     public async getLineChartData(dataLabel = 'Count', axis = 'ValueAxis-1') {
+      if (await this.isVisTypeXYChart()) {
+        // For now lines are rendered as areas to enable stacking
+        const areas = (await this.getDebugState())?.areas ?? [];
+        const lines = areas.map(({ lines: { y1 }, name, color }) => ({ ...y1, name, color }));
+        const points = lines.find(({ name }) => name === dataLabel)?.points ?? [];
+        return points.map(({ y }) => y);
+      }
+
       // 1). get the range/pixel ratio
       const yAxisRatio = await this.getChartYAxisRatio(axis);
       // 2). find and save the y-axis pixel size (the chart height)
@@ -150,6 +258,12 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
      * @param axis axis value, 'ValueAxis-1' by default
      */
     public async getBarChartData(dataLabel = 'Count', axis = 'ValueAxis-1') {
+      if (await this.isVisTypeXYChart()) {
+        const bars = (await this.getDebugState())?.bars ?? [];
+        const values = bars.find(({ name }) => name === dataLabel)?.bars ?? [];
+        return values.map(({ y }) => y);
+      }
+
       const yAxisRatio = await this.getChartYAxisRatio(axis);
       const svg = await find.byCssSelector('div.chart');
       const $ = await svg.parseDomContent();
@@ -189,8 +303,11 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
     }
 
     public async toggleLegend(show = true) {
+      const isVisTypeXYChart = await this.isVisTypeXYChart();
+      const legendSelector = isVisTypeXYChart ? '.echLegend' : '.visLegend';
+
       await retry.try(async () => {
-        const isVisible = find.byCssSelector('.visLegend');
+        const isVisible = await find.existsByCssSelector(legendSelector);
         if ((show && !isVisible) || (!show && isVisible)) {
           await testSubjects.click('vislibToggleLegend');
         }
@@ -206,19 +323,26 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
     }
 
     public async doesLegendColorChoiceExist(color: string) {
-      return await testSubjects.exists(`legendSelectColor-${color}`);
+      return await testSubjects.exists(`visColorPickerColor-${color}`);
     }
 
     public async selectNewLegendColorChoice(color: string) {
-      await testSubjects.click(`legendSelectColor-${color}`);
+      await testSubjects.click(`visColorPickerColor-${color}`);
     }
 
     public async doesSelectedLegendColorExist(color: string) {
+      if (await this.isVisTypeXYChart()) {
+        const items = (await this.getDebugState())?.legend?.items ?? [];
+        return items.some(({ color: c }) => c === color);
+      }
+
       return await testSubjects.exists(`legendSelectedColor-${color}`);
     }
 
     public async expectError() {
-      await testSubjects.existOrFail('vislibVisualizeError');
+      if (!this.isVisTypeXYChart()) {
+        await testSubjects.existOrFail('vislibVisualizeError');
+      }
     }
 
     public async getVisualizationRenderingCount() {
@@ -233,6 +357,7 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
         async () => {
           const currentRenderingCount = await this.getVisualizationRenderingCount();
           log.debug(`-- currentRenderingCount=${currentRenderingCount}`);
+          log.debug(`-- expectedCount=${minimumCount}`);
           return currentRenderingCount >= minimumCount;
         }
       );
@@ -255,10 +380,18 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
 
     public async waitForVisualization() {
       await this.waitForVisualizationRenderingStabilized();
-      await find.byCssSelector('.visualization');
+
+      if (!(await this.isVisTypeXYChart())) {
+        await find.byCssSelector('.visualization');
+      }
     }
 
     public async getLegendEntries() {
+      if (await this.isVisTypeXYChart()) {
+        const items = (await this.getDebugState())?.legend?.items ?? [];
+        return items.map(({ name }) => name);
+      }
+
       const legendEntries = await find.allByCssSelector(
         '.visLegend__button',
         defaultFindTimeout * 2
@@ -268,12 +401,21 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
       );
     }
 
-    public async openLegendOptionColors(name: string) {
+    public async openLegendOptionColors(name: string, chartSelector = elasticChartSelector) {
       await this.waitForVisualizationRenderingStabilized();
       await retry.try(async () => {
-        // This click has been flaky in opening the legend, hence the retry.  See
-        // https://github.com/elastic/kibana/issues/17468
-        await testSubjects.click(`legend-${name}`);
+        if (await this.isVisTypeXYChart()) {
+          const chart = await find.byCssSelector(chartSelector);
+          const legendItemColor = await chart.findByCssSelector(
+            `[data-ech-series-name="${name}"] .echLegendItem__color`
+          );
+          legendItemColor.click();
+        } else {
+          // This click has been flaky in opening the legend, hence the retry.  See
+          // https://github.com/elastic/kibana/issues/17468
+          await testSubjects.click(`legend-${name}`);
+        }
+
         await this.waitForVisualizationRenderingStabilized();
         // arbitrary color chosen, any available would do
         const isOpen = await this.doesLegendColorChoiceExist('#EF843C');
@@ -283,6 +425,18 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
       });
     }
 
+    public async filterOnTableCell(columnIndex: number, rowIndex: number) {
+      await retry.try(async () => {
+        const cell = await dataGrid.getCellElement(rowIndex, columnIndex);
+        await cell.moveMouseTo();
+        const filterBtn = await testSubjects.findDescendant(
+          'tbvChartCell__filterForCellValue',
+          cell
+        );
+        await filterBtn.click();
+      });
+    }
+
     public async getMarkdownText() {
       const markdownContainer = await testSubjects.find('markdownBody');
       return markdownContainer.getVisibleText();
@@ -349,18 +503,6 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
       });
     }
 
-    public async filterOnTableCell(column: number, row: number) {
-      await retry.try(async () => {
-        const cell = await dataGrid.getCellElement(row, column);
-        await cell.moveMouseTo();
-        const filterBtn = await testSubjects.findDescendant(
-          'tbvChartCell__filterForCellValue',
-          cell
-        );
-        await filterBtn.click();
-      });
-    }
-
     public async getMetric() {
       const elements = await find.allByCssSelector(
         '[data-test-subj="visualizationLoader"] .mtrVis__container'
@@ -389,6 +531,15 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
       return values.filter((item) => item.length > 0);
     }
 
+    public async getRightValueAxesCount() {
+      if (await this.isVisTypeXYChart()) {
+        const yAxes = (await this.getDebugState())?.axes?.y ?? [];
+        return yAxes.filter(({ position }) => position === Position.Right).length;
+      }
+      const axes = await find.allByCssSelector('.visAxis__column--right g.axis');
+      return axes.length;
+    }
+
     public async clickOnGaugeByLabel(label: string) {
       const gauge = await testSubjects.find(`visGauge__meter--${label}`);
       const gaugeSize = await gauge.getSize();
@@ -400,17 +551,22 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
       await gauge.clickMouseButton({ xOffset: 0, yOffset });
     }
 
-    public async getRightValueAxes() {
-      const axes = await find.allByCssSelector('.visAxis__column--right g.axis');
-      return axes.length;
-    }
+    public async getHistogramSeriesCount() {
+      if (await this.isVisTypeXYChart()) {
+        const bars = (await this.getDebugState())?.bars ?? [];
+        return bars.filter(({ visible }) => visible).length;
+      }
 
-    public async getHistogramSeries() {
       const series = await find.allByCssSelector('.series.histogram');
       return series.length;
     }
 
     public async getGridLines(): Promise<Array<{ x: number; y: number }>> {
+      if (await this.isVisTypeXYChart()) {
+        const { x, y } = (await this.getDebugState())?.axes ?? { x: [], y: [] };
+        return [...x, ...y].flatMap(({ gridlines }) => gridlines);
+      }
+
       const grid = await find.byCssSelector('g.grid');
       const $ = await grid.parseDomContent();
       return $('path')
@@ -426,6 +582,11 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
     }
 
     public async getChartValues() {
+      if (await this.isVisTypeXYChart()) {
+        const barSeries = (await this.getDebugState())?.bars ?? [];
+        return barSeries.filter(({ visible }) => visible).flatMap((bars) => bars.labels);
+      }
+
       const elements = await find.allByCssSelector('.series.histogram text');
       const values = await Promise.all(
         elements.map(async (element) => {
diff --git a/test/functional/page_objects/visualize_editor_page.ts b/test/functional/page_objects/visualize_editor_page.ts
index f05cd35c5cb036..d6134883332e3b 100644
--- a/test/functional/page_objects/visualize_editor_page.ts
+++ b/test/functional/page_objects/visualize_editor_page.ts
@@ -27,6 +27,7 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
   const browser = getService('browser');
   const testSubjects = getService('testSubjects');
   const comboBox = getService('comboBox');
+  const elasticChart = getService('elasticChart');
   const { common, header, visChart } = getPageObjects(['common', 'header', 'visChart']);
 
   interface IntervalOptions {
@@ -73,6 +74,10 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
     }
 
     public async clickGo() {
+      if (await visChart.isNewChartUiEnabled()) {
+        await elasticChart.setNewChartUiDebugFlag();
+      }
+
       const prevRenderingCount = await visChart.getVisualizationRenderingCount();
       log.debug(`Before Rendering count ${prevRenderingCount}`);
       await testSubjects.clickWhenNotDisabled('visualizeEditorRenderButton');
@@ -128,7 +133,7 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
       await testSubjects.click(`heatmapColorRange__addRangeButton`);
     }
 
-    public async setCustomRangeByIndex(index: string, from: string, to: string) {
+    public async setCustomRangeByIndex(index: string | number, from: string, to: string) {
       await testSubjects.setValue(`heatmapColorRange${index}__from`, from);
       await testSubjects.setValue(`heatmapColorRange${index}__to`, to);
     }
@@ -155,14 +160,14 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
     public async selectField(
       fieldValue: string,
       groupName = 'buckets',
-      childAggregationType = false
+      isChildAggregation = false
     ) {
       log.debug(`selectField ${fieldValue}`);
       const selector = `
           [data-test-subj="${groupName}AggGroup"]
           [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen
           [data-test-subj="visAggEditorParams"]
-          ${childAggregationType ? '.visEditorAgg__subAgg' : ''}
+          ${isChildAggregation ? '.visEditorAgg__subAgg' : ''}
           [data-test-subj="visDefaultEditorField"]
         `;
       const fieldEl = await find.byCssSelector(selector);
@@ -184,12 +189,12 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
     public async selectAggregation(
       aggValue: string,
       groupName = 'buckets',
-      childAggregationType = false
+      isChildAggregation = false
     ) {
       const comboBoxElement = await find.byCssSelector(`
           [data-test-subj="${groupName}AggGroup"]
           [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen
-          ${childAggregationType ? '.visEditorAgg__subAgg' : ''}
+          ${isChildAggregation ? '.visEditorAgg__subAgg' : ''}
           [data-test-subj="defaultEditorAggSelect"]
         `);
 
@@ -270,7 +275,7 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
       });
     }
 
-    public async setCustomLabel(label: string, index = 1) {
+    public async setCustomLabel(label: string, index: number | string = 1) {
       const customLabel = await testSubjects.find(`visEditorStringInput${index}customLabel`);
       customLabel.type(label);
     }
@@ -307,23 +312,23 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
       await browser.dragAndDrop({ location: resizerPanel }, { location: { x: -100, y: 0 } });
     }
 
-    public async toggleDisabledAgg(agg: string) {
+    public async toggleDisabledAgg(agg: string | number) {
       await testSubjects.click(`visEditorAggAccordion${agg} > ~toggleDisableAggregationBtn`);
       await header.waitUntilLoadingHasFinished();
     }
 
-    public async toggleAggregationEditor(agg: string) {
+    public async toggleAggregationEditor(agg: string | number) {
       await find.clickByCssSelector(
         `[data-test-subj="visEditorAggAccordion${agg}"] .euiAccordion__button`
       );
       await header.waitUntilLoadingHasFinished();
     }
 
-    public async toggleOtherBucket(agg = 2) {
+    public async toggleOtherBucket(agg: string | number = 2) {
       await testSubjects.click(`visEditorAggAccordion${agg} > otherBucketSwitch`);
     }
 
-    public async toggleMissingBucket(agg = 2) {
+    public async toggleMissingBucket(agg: string | number = 2) {
       await testSubjects.click(`visEditorAggAccordion${agg} > missingBucketSwitch`);
     }
 
@@ -432,13 +437,14 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
       await testSubjects.selectValue('visDefaultEditorAggregateWith', fieldValue);
     }
 
-    public async setInterval(newValue: string, options: IntervalOptions = {}) {
+    public async setInterval(newValue: string | number, options: IntervalOptions = {}) {
+      const newValueString = `${newValue}`;
       const { type = 'default', aggNth = 2, append = false } = options;
-      log.debug(`visEditor.setInterval(${newValue}, {${type}, ${aggNth}, ${append}})`);
+      log.debug(`visEditor.setInterval(${newValueString}, {${type}, ${aggNth}, ${append}})`);
       if (type === 'default') {
-        await comboBox.set('visEditorInterval', newValue);
+        await comboBox.set('visEditorInterval', newValueString);
       } else if (type === 'custom') {
-        await comboBox.setCustom('visEditorInterval', newValue);
+        await comboBox.setCustom('visEditorInterval', newValueString);
       } else {
         if (type === 'numeric') {
           const autoMode = await testSubjects.getAttribute(
@@ -450,9 +456,9 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
           }
         }
         if (append) {
-          await testSubjects.append(`visEditorInterval${aggNth}`, String(newValue));
+          await testSubjects.append(`visEditorInterval${aggNth}`, String(newValueString));
         } else {
-          await testSubjects.setValue(`visEditorInterval${aggNth}`, String(newValue));
+          await testSubjects.setValue(`visEditorInterval${aggNth}`, String(newValueString));
         }
       }
     }
diff --git a/test/functional/page_objects/visualize_page.ts b/test/functional/page_objects/visualize_page.ts
index b58acd0bd90592..e5bd6a0f10d825 100644
--- a/test/functional/page_objects/visualize_page.ts
+++ b/test/functional/page_objects/visualize_page.ts
@@ -27,7 +27,14 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide
   const log = getService('log');
   const globalNav = getService('globalNav');
   const listingTable = getService('listingTable');
-  const { common, header, visEditor } = getPageObjects(['common', 'header', 'visEditor']);
+  const queryBar = getService('queryBar');
+  const elasticChart = getService('elasticChart');
+  const { common, header, visEditor, visChart } = getPageObjects([
+    'common',
+    'header',
+    'visEditor',
+    'visChart',
+  ]);
 
   /**
    * This page object contains the visualization type selection, the landing page,
@@ -91,6 +98,13 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide
       });
     }
 
+    public async clickRefresh() {
+      if (await visChart.isNewChartUiEnabled()) {
+        await elasticChart.setNewChartUiDebugFlag();
+      }
+      await queryBar.clickQuerySubmitButton();
+    }
+
     public async waitForGroupsSelectPage() {
       await retry.try(async () => {
         const visualizeSelectGroupStep = await testSubjects.find('visNewDialogGroups');
diff --git a/test/functional/services/dashboard/expectations.ts b/test/functional/services/dashboard/expectations.ts
index 62e541e3baa4ca..58e9b8975e8fdd 100644
--- a/test/functional/services/dashboard/expectations.ts
+++ b/test/functional/services/dashboard/expectations.ts
@@ -238,7 +238,7 @@ export function DashboardExpectProvider({ getService, getPageObjects }: FtrProvi
       });
     }
 
-    async dataTableNoResult(expectedCount: number) {
+    async dataTableNoResult() {
       log.debug(`DashboardExpect.dataTableNoResult`);
       await retry.try(async () => {
         await PageObjects.visChart.getTableVisNoResult();
diff --git a/test/functional/services/dashboard/panel_actions.ts b/test/functional/services/dashboard/panel_actions.ts
index 2cea377d327e12..7e5ef068e21842 100644
--- a/test/functional/services/dashboard/panel_actions.ts
+++ b/test/functional/services/dashboard/panel_actions.ts
@@ -163,7 +163,7 @@ export function DashboardPanelActionsProvider({ getService, getPageObjects }: Ft
       await this.openInspector(header);
     }
 
-    async openInspector(parent: WebElementWrapper) {
+    async openInspector(parent?: WebElementWrapper) {
       await this.openContextMenu(parent);
       const exists = await testSubjects.exists(OPEN_INSPECTOR_TEST_SUBJ);
       if (!exists) {
@@ -247,7 +247,7 @@ export function DashboardPanelActionsProvider({ getService, getPageObjects }: Ft
       await testSubjects.click('customizePanelHideTitle');
     }
 
-    async toggleHidePanelTitle(originalTitle: string) {
+    async toggleHidePanelTitle(originalTitle?: string) {
       log.debug(`hidePanelTitle(${originalTitle})`);
       if (originalTitle) {
         const panelOptions = await this.getPanelHeading(originalTitle);
@@ -277,7 +277,7 @@ export function DashboardPanelActionsProvider({ getService, getPageObjects }: Ft
       await testSubjects.click('saveNewTitleButton');
     }
 
-    async resetCustomPanelTitle(panel: WebElementWrapper) {
+    async resetCustomPanelTitle(panel?: WebElementWrapper) {
       log.debug('resetCustomPanelTitle');
       await this.customizePanel(panel);
       await testSubjects.click('resetCustomEmbeddablePanelTitle');
diff --git a/test/functional/services/doc_table.ts b/test/functional/services/doc_table.ts
index 1ac8de69ee5f43..48ef76ce817459 100644
--- a/test/functional/services/doc_table.ts
+++ b/test/functional/services/doc_table.ts
@@ -25,8 +25,8 @@ export function DocTableProvider({ getService, getPageObjects }: FtrProviderCont
   const PageObjects = getPageObjects(['common', 'header']);
 
   interface SelectOptions {
-    isAnchorRow: boolean;
-    rowIndex: number;
+    isAnchorRow?: boolean;
+    rowIndex?: number;
   }
 
   class DocTable {
@@ -52,10 +52,11 @@ export function DocTableProvider({ getService, getPageObjects }: FtrProviderCont
       return await table.findByTestSubject('~docTableAnchorRow');
     }
 
-    public async getRow(options: SelectOptions): Promise<WebElementWrapper> {
-      return options.isAnchorRow
-        ? await this.getAnchorRow()
-        : (await this.getBodyRows())[options.rowIndex];
+    public async getRow({
+      isAnchorRow = false,
+      rowIndex = 0,
+    }: SelectOptions = {}): Promise<WebElementWrapper> {
+      return isAnchorRow ? await this.getAnchorRow() : (await this.getBodyRows())[rowIndex];
     }
 
     public async getDetailsRow(): Promise<WebElementWrapper> {
@@ -85,12 +86,12 @@ export function DocTableProvider({ getService, getPageObjects }: FtrProviderCont
       );
     }
 
-    public async getRowActions(
-      options: SelectOptions = { isAnchorRow: false, rowIndex: 0 }
-    ): Promise<WebElementWrapper[]> {
-      const detailsRow = options.isAnchorRow
+    public async getRowActions({ isAnchorRow = false, rowIndex = 0 }: SelectOptions = {}): Promise<
+      WebElementWrapper[]
+    > {
+      const detailsRow = isAnchorRow
         ? await this.getAnchorDetailsRow()
-        : (await this.getDetailsRows())[options.rowIndex];
+        : (await this.getDetailsRows())[rowIndex];
       return await detailsRow.findAllByTestSubject('~docTableRowAction');
     }
 
@@ -117,7 +118,7 @@ export function DocTableProvider({ getService, getPageObjects }: FtrProviderCont
 
     public async getTableDocViewRow(
       detailsRow: WebElementWrapper,
-      fieldName: WebElementWrapper
+      fieldName: string
     ): Promise<WebElementWrapper> {
       return await detailsRow.findByTestSubject(`~tableDocViewRow-${fieldName}`);
     }
@@ -130,7 +131,7 @@ export function DocTableProvider({ getService, getPageObjects }: FtrProviderCont
 
     public async addInclusiveFilter(
       detailsRow: WebElementWrapper,
-      fieldName: WebElementWrapper
+      fieldName: string
     ): Promise<void> {
       const tableDocViewRow = await this.getTableDocViewRow(detailsRow, fieldName);
       const addInclusiveFilterButton = await this.getAddInclusiveFilterButton(tableDocViewRow);
@@ -146,7 +147,7 @@ export function DocTableProvider({ getService, getPageObjects }: FtrProviderCont
 
     public async removeInclusiveFilter(
       detailsRow: WebElementWrapper,
-      fieldName: WebElementWrapper
+      fieldName: string
     ): Promise<void> {
       const tableDocViewRow = await this.getTableDocViewRow(detailsRow, fieldName);
       const addInclusiveFilterButton = await this.getRemoveInclusiveFilterButton(tableDocViewRow);
@@ -160,25 +161,21 @@ export function DocTableProvider({ getService, getPageObjects }: FtrProviderCont
       return await tableDocViewRow.findByTestSubject(`~addExistsFilterButton`);
     }
 
-    public async addExistsFilter(
-      detailsRow: WebElementWrapper,
-      fieldName: WebElementWrapper
-    ): Promise<void> {
+    public async addExistsFilter(detailsRow: WebElementWrapper, fieldName: string): Promise<void> {
       const tableDocViewRow = await this.getTableDocViewRow(detailsRow, fieldName);
       const addInclusiveFilterButton = await this.getAddExistsFilterButton(tableDocViewRow);
       await addInclusiveFilterButton.click();
       await PageObjects.header.awaitGlobalLoadingIndicatorHidden();
     }
 
-    public async toggleRowExpanded(
-      options: SelectOptions = { isAnchorRow: false, rowIndex: 0 }
-    ): Promise<WebElementWrapper> {
-      await this.clickRowToggle(options);
+    public async toggleRowExpanded({
+      isAnchorRow = false,
+      rowIndex = 0,
+    }: SelectOptions = {}): Promise<WebElementWrapper> {
+      await this.clickRowToggle({ isAnchorRow, rowIndex });
       await PageObjects.header.awaitGlobalLoadingIndicatorHidden();
       return await retry.try(async () => {
-        const row = options.isAnchorRow
-          ? await this.getAnchorRow()
-          : (await this.getBodyRows())[options.rowIndex];
+        const row = isAnchorRow ? await this.getAnchorRow() : (await this.getBodyRows())[rowIndex];
         const detailsRow = await row.findByXpath(
           './following-sibling::*[@data-test-subj="docTableDetailsRow"]'
         );
diff --git a/test/functional/services/inspector.ts b/test/functional/services/inspector.ts
index e256cf14541a7e..597c4a46f5a256 100644
--- a/test/functional/services/inspector.ts
+++ b/test/functional/services/inspector.ts
@@ -91,7 +91,7 @@ export function InspectorProvider({ getService }: FtrProviderContext) {
      * @param expectedData
      */
     public async expectTableData(expectedData: string[][]): Promise<void> {
-      await log.debug(`Inspector.expectTableData(${expectedData.join(',')})`);
+      log.debug(`Inspector.expectTableData(${expectedData.join(',')})`);
       const data = await this.getTableData();
       expect(data).to.eql(expectedData);
     }
@@ -170,7 +170,7 @@ export function InspectorProvider({ getService }: FtrProviderContext) {
      * @param column column index
      * @param row row index
      */
-    public async filterForTableCell(column: string, row: string): Promise<void> {
+    public async filterForTableCell(column: string | number, row: string | number): Promise<void> {
       await retry.try(async () => {
         const table = await testSubjects.find('inspectorTable');
         const cell = await table.findByCssSelector(
@@ -188,7 +188,7 @@ export function InspectorProvider({ getService }: FtrProviderContext) {
      * @param column column index
      * @param row row index
      */
-    public async filterOutTableCell(column: string, row: string): Promise<void> {
+    public async filterOutTableCell(column: string | number, row: string | number): Promise<void> {
       await retry.try(async () => {
         const table = await testSubjects.find('inspectorTable');
         const cell = await table.findByCssSelector(
diff --git a/test/functional/services/visualizations/elastic_chart.ts b/test/functional/services/visualizations/elastic_chart.ts
index 3c454f0a88e248..1f1f7df45f4605 100644
--- a/test/functional/services/visualizations/elastic_chart.ts
+++ b/test/functional/services/visualizations/elastic_chart.ts
@@ -17,14 +17,27 @@
  * under the License.
  */
 
+import { DebugState } from '@elastic/charts';
+
 import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
+import { WebElementWrapper } from '../lib/web_element_wrapper';
+
+declare global {
+  interface Window {
+    /**
+     * Flag used to enable debugState on elastic charts
+     */
+    _echDebugStateFlag?: boolean;
+  }
+}
 
 export function ElasticChartProvider({ getService }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const find = getService('find');
   const retry = getService('retry');
   const log = getService('log');
+  const browser = getService('browser');
 
   class ElasticChart {
     public async getCanvas() {
@@ -35,29 +48,87 @@ export function ElasticChartProvider({ getService }: FtrProviderContext) {
       return await find.existsByCssSelector('.echChart canvas:last-of-type');
     }
 
-    public async waitForRenderComplete(dataTestSubj: string) {
-      const chart = await testSubjects.find(dataTestSubj);
-      const rendered = await chart.findAllByCssSelector('.echChart[data-ech-render-complete=true]');
-      expect(rendered).to.equal(
-        1,
-        `Rendering for elastic-chart with data-test-subj='${dataTestSubj}' was not finished in time`
+    public async waitForRenderComplete(dataTestSubj?: string) {
+      const chart = await this.getChart(dataTestSubj);
+      const rendered = await chart.findAllByCssSelector(
+        '.echChartStatus[data-ech-render-complete=true]'
       );
+      expect(rendered.length).to.equal(1);
     }
 
-    public async getVisualizationRenderingCount(dataTestSubj: string) {
-      const chart = await testSubjects.find(dataTestSubj);
+    public async getVisualizationRenderingCount(dataTestSubj?: string) {
+      const chart = await this.getChart(dataTestSubj);
       const visContainer = await chart.findByCssSelector('.echChartStatus');
       const renderingCount = await visContainer.getAttribute('data-ech-render-count');
       return Number(renderingCount);
     }
 
-    public async waitForRenderingCount(dataTestSubj: string, minimumCount: number) {
+    public async waitForRenderingCount(minimumCount: number, dataTestSubj?: string) {
       await retry.waitFor(`rendering count to be equal to [${minimumCount}]`, async () => {
         const currentRenderingCount = await this.getVisualizationRenderingCount(dataTestSubj);
         log.debug(`-- currentRenderingCount=${currentRenderingCount}`);
         return currentRenderingCount >= minimumCount;
       });
     }
+
+    public async hasChart(dataTestSubj?: string, timeout?: number): Promise<boolean> {
+      if (dataTestSubj) {
+        return await testSubjects.exists(dataTestSubj, { timeout });
+      } else {
+        const charts = await this.getAllCharts(timeout);
+
+        return charts.length > 0;
+      }
+    }
+
+    private async getChart(dataTestSubj?: string, timeout?: number): Promise<WebElementWrapper> {
+      if (dataTestSubj) {
+        if (!(await testSubjects.exists(dataTestSubj, { timeout }))) {
+          throw Error(`Failed to find an elastic-chart with testSubject '${dataTestSubj}'`);
+        }
+
+        return await testSubjects.find(dataTestSubj);
+      } else {
+        const charts = await this.getAllCharts(timeout);
+        if (charts.length === 0) {
+          throw Error(`Failed to find any elastic-charts on the page`);
+        } else {
+          return charts[0];
+        }
+      }
+    }
+
+    private async getAllCharts(timeout?: number) {
+      return await find.allByCssSelector('.echChart', timeout);
+    }
+
+    /**
+     * used to get chart data from `@elastic/charts`
+     * requires `window._echDebugStateFlag` to be true
+     */
+    public async getChartDebugData(dataTestSubj?: string): Promise<DebugState | null> {
+      const chart = await this.getChart(dataTestSubj);
+
+      try {
+        const visContainer = await chart.findByCssSelector('.echChartStatus');
+        const debugDataString: string | undefined = await visContainer.getAttribute(
+          'data-ech-debug-state'
+        );
+        return debugDataString ? JSON.parse(debugDataString) : null;
+      } catch (error) {
+        throw Error('Elastic charts debugState not found');
+      }
+    }
+
+    /**
+     * Used to set a flag on the window to trigger debug state on elastic charts
+     * @param value
+     */
+    public async setNewChartUiDebugFlag(value = true) {
+      await browser.execute<[boolean], void>((v) => {
+        window._echDebugStateFlag = v;
+      }, value);
+    }
   }
 
   return new ElasticChart();
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index c1746fca6873e1..1023c7ac7d889d 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -255,6 +255,7 @@
     "charts.controls.rangeErrorMessage": "値は{min}と{max}の間でなければなりません",
     "charts.controls.vislibBasicOptions.legendPositionLabel": "凡例位置",
     "charts.controls.vislibBasicOptions.showTooltipLabel": "ツールヒントを表示",
+    "charts.colorPicker.setColor.screenReaderDescription": "値 {legendDataLabel} の色を設定",
     "console.autocomplete.addMethodMetaText": "メソド",
     "console.consoleDisplayName": "コンソール",
     "console.consoleMenu.copyAsCurlMessage": "リクエストが URL としてコピーされました",
@@ -1503,7 +1504,6 @@
     "discover.fieldNameIcons.stringFieldAriaLabel": "文字列フィールド",
     "discover.fieldNameIcons.unknownFieldAriaLabel": "不明なフィールド",
     "discover.helpMenu.appName": "発見",
-    "discover.histogram.partialData.bucketTooltipText": "選択された時間範囲にはこのバケット全体は含まれていませんが、一部データが含まれている可能性があります。",
     "discover.histogramOfFoundDocumentsAriaLabel": "検出されたドキュメントのヒストグラム",
     "discover.hitsPluralTitle": "{hits, plural, one {ヒット} other {ヒット}}",
     "discover.howToChangeTheTimeTooltip": "時刻を変更するには、上記のグローバル時刻フィルターを使用します。",
@@ -4305,27 +4305,27 @@
     "visTypeVislib.advancedSettings.visualization.heatmap.maxBucketsText": "1つのデータソースが返せるバケットの最大数です。値が大きいとブラウザのレンダリング速度が下がる可能性があります。",
     "visTypeVislib.advancedSettings.visualization.heatmap.maxBucketsTitle": "ヒートマップの最大バケット数",
     "visTypeVislib.aggResponse.allDocsTitle": "すべてのドキュメント",
-    "visTypeVislib.area.areaTitle": "エリア",
-    "visTypeVislib.area.countText": "カウント",
-    "visTypeVislib.area.groupTitle": "系列を分割",
-    "visTypeVislib.area.metricsTitle": "Y 軸",
-    "visTypeVislib.area.radiusTitle": "点のサイズ",
-    "visTypeVislib.area.segmentTitle": "X 軸",
-    "visTypeVislib.area.splitTitle": "チャートを分割",
-    "visTypeVislib.area.tabs.metricsAxesTitle": "メトリックと軸",
-    "visTypeVislib.area.tabs.panelSettingsTitle": "パネル設定",
-    "visTypeVislib.axisModes.normalText": "標準",
-    "visTypeVislib.axisModes.percentageText": "割合 (%)",
-    "visTypeVislib.axisModes.silhouetteText": "シルエット",
-    "visTypeVislib.axisModes.wiggleText": "振動",
-    "visTypeVislib.categoryAxis.rotate.angledText": "傾斜",
-    "visTypeVislib.categoryAxis.rotate.horizontalText": "横",
-    "visTypeVislib.categoryAxis.rotate.verticalText": "縦",
-    "visTypeVislib.chartModes.normalText": "標準",
-    "visTypeVislib.chartModes.stackedText": "スタック",
-    "visTypeVislib.chartTypes.areaText": "エリア",
-    "visTypeVislib.chartTypes.barText": "バー",
-    "visTypeVislib.chartTypes.lineText": "折れ線",
+    "visTypeXy.area.areaTitle": "エリア",
+    "charts.countText": "カウント",
+    "visTypeXy.area.groupTitle": "系列を分割",
+    "visTypeXy.area.metricsTitle": "Y 軸",
+    "visTypeXy.area.radiusTitle": "点のサイズ",
+    "visTypeXy.area.segmentTitle": "X 軸",
+    "visTypeXy.area.splitTitle": "チャートを分割",
+    "visTypeXy.area.tabs.metricsAxesTitle": "メトリックと軸",
+    "visTypeXy.area.tabs.panelSettingsTitle": "パネル設定",
+    "visTypeXy.axisModes.normalText": "標準",
+    "visTypeXy.axisModes.percentageText": "割合 (%)",
+    "visTypeXy.axisModes.silhouetteText": "シルエット",
+    "visTypeXy.axisModes.wiggleText": "振動",
+    "visTypeXy.categoryAxis.rotate.angledText": "傾斜",
+    "visTypeXy.categoryAxis.rotate.horizontalText": "横",
+    "visTypeXy.categoryAxis.rotate.verticalText": "縦",
+    "visTypeXy.chartModes.normalText": "標準",
+    "visTypeXy.chartModes.stackedText": "スタック",
+    "visTypeXy.chartTypes.areaText": "エリア",
+    "visTypeXy.chartTypes.barText": "バー",
+    "visTypeXy.chartTypes.lineText": "折れ線",
     "visTypeVislib.controls.gaugeOptions.alignmentLabel": "アラインメント",
     "visTypeVislib.controls.gaugeOptions.autoExtendRangeLabel": "範囲を自動拡張",
     "visTypeVislib.controls.gaugeOptions.displayWarningsLabel": "警告を表示",
@@ -4351,48 +4351,48 @@
     "visTypeVislib.controls.heatmapOptions.scaleToDataBoundsLabel": "データバウンドに合わせる",
     "visTypeVislib.controls.heatmapOptions.showLabelsTitle": "ラベルを表示",
     "visTypeVislib.controls.heatmapOptions.useCustomRangesLabel": "カスタム範囲を使用",
-    "visTypeVislib.controls.pointSeries.categoryAxis.alignLabel": "配置",
-    "visTypeVislib.controls.pointSeries.categoryAxis.filterLabelsLabel": "フィルターラベル",
-    "visTypeVislib.controls.pointSeries.categoryAxis.labelsTitle": "ラベル",
-    "visTypeVislib.controls.pointSeries.categoryAxis.positionLabel": "位置",
-    "visTypeVislib.controls.pointSeries.categoryAxis.showLabel": "軸線とラベルを表示",
-    "visTypeVislib.controls.pointSeries.categoryAxis.showLabelsLabel": "ラベルを表示",
-    "visTypeVislib.controls.pointSeries.categoryAxis.xAxisTitle": "X 軸",
-    "visTypeVislib.controls.pointSeries.gridAxis.dontShowLabel": "非表示",
-    "visTypeVislib.controls.pointSeries.gridAxis.gridText": "グリッド",
-    "visTypeVislib.controls.pointSeries.gridAxis.xAxisLinesLabel": "X 軸線を表示",
-    "visTypeVislib.controls.pointSeries.gridAxis.yAxisLinesDisabledTooltip": "ヒストグラムに X 軸線は表示できません。",
-    "visTypeVislib.controls.pointSeries.gridAxis.yAxisLinesLabel": "Y 軸線を表示",
-    "visTypeVislib.controls.pointSeries.series.chartTypeLabel": "チャートタイプ",
-    "visTypeVislib.controls.pointSeries.series.lineModeLabel": "線のモード",
-    "visTypeVislib.controls.pointSeries.series.lineWidthLabel": "線の幅",
-    "visTypeVislib.controls.pointSeries.series.metricsTitle": "メトリック",
-    "visTypeVislib.controls.pointSeries.series.modeLabel": "モード",
-    "visTypeVislib.controls.pointSeries.series.newAxisLabel": "新規軸…",
-    "visTypeVislib.controls.pointSeries.series.showDotsLabel": "点を表示",
-    "visTypeVislib.controls.pointSeries.series.showLineLabel": "線を表示",
-    "visTypeVislib.controls.pointSeries.series.valueAxisLabel": "値軸",
-    "visTypeVislib.controls.pointSeries.seriesAccordionAriaLabel": "{agg} オプションを切り替える",
-    "visTypeVislib.controls.pointSeries.valueAxes.addButtonTooltip": "Y 軸を追加します",
-    "visTypeVislib.controls.pointSeries.valueAxes.customExtentsLabel": "カスタム範囲",
-    "visTypeVislib.controls.pointSeries.valueAxes.maxLabel": "最高",
-    "visTypeVislib.controls.pointSeries.valueAxes.minErrorMessage": "最低値は最高値よりも低く設定する必要があります",
-    "visTypeVislib.controls.pointSeries.valueAxes.minLabel": "最低",
-    "visTypeVislib.controls.pointSeries.valueAxes.minNeededScaleText": "ログスケールが選択されている場合、最低値は 0 よりも大きいものである必要があります",
-    "visTypeVislib.controls.pointSeries.valueAxes.modeLabel": "モード",
-    "visTypeVislib.controls.pointSeries.valueAxes.positionLabel": "位置",
-    "visTypeVislib.controls.pointSeries.valueAxes.removeButtonTooltip": "Y 軸を削除します",
-    "visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBounds.boundsMargin": "境界マージン",
-    "visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBounds.minNeededBoundsMargin": "境界マージンは 0 以上でなければなりません",
-    "visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBoundsLabel": "データバウンドに合わせる",
-    "visTypeVislib.controls.pointSeries.valueAxes.scaleTypeLabel": "スケールタイプ",
-    "visTypeVislib.controls.pointSeries.valueAxes.setAxisExtentsLabel": "軸範囲を設定",
-    "visTypeVislib.controls.pointSeries.valueAxes.showLabel": "軸線とラベルを表示",
-    "visTypeVislib.controls.pointSeries.valueAxes.titleLabel": "タイトル",
-    "visTypeVislib.controls.pointSeries.valueAxes.toggleCustomExtendsAriaLabel": "カスタム範囲を切り替える",
-    "visTypeVislib.controls.pointSeries.valueAxes.toggleOptionsAriaLabel": "{axisName} オプションを切り替える",
-    "visTypeVislib.controls.pointSeries.valueAxes.yAxisTitle": "Y 軸",
-    "visTypeVislib.controls.truncateLabel": "切り捨て",
+    "visTypeXy.controls.pointSeries.categoryAxis.alignLabel": "配置",
+    "visTypeXy.controls.pointSeries.categoryAxis.filterLabelsLabel": "フィルターラベル",
+    "visTypeXy.controls.pointSeries.categoryAxis.labelsTitle": "ラベル",
+    "visTypeXy.controls.pointSeries.categoryAxis.positionLabel": "位置",
+    "visTypeXy.controls.pointSeries.categoryAxis.showLabel": "軸線とラベルを表示",
+    "visTypeXy.controls.pointSeries.categoryAxis.showLabelsLabel": "ラベルを表示",
+    "visTypeXy.controls.pointSeries.categoryAxis.xAxisTitle": "X 軸",
+    "visTypeXy.controls.pointSeries.gridAxis.dontShowLabel": "非表示",
+    "visTypeXy.controls.pointSeries.gridAxis.gridText": "グリッド",
+    "visTypeXy.controls.pointSeries.gridAxis.xAxisLinesLabel": "X 軸線を表示",
+    "visTypeXy.controls.pointSeries.gridAxis.yAxisLinesDisabledTooltip": "ヒストグラムに X 軸線は表示できません。",
+    "visTypeXy.controls.pointSeries.gridAxis.yAxisLinesLabel": "Y 軸線を表示",
+    "visTypeXy.controls.pointSeries.series.chartTypeLabel": "チャートタイプ",
+    "visTypeXy.controls.pointSeries.series.lineModeLabel": "線のモード",
+    "visTypeXy.controls.pointSeries.series.lineWidthLabel": "線の幅",
+    "visTypeXy.controls.pointSeries.series.metricsTitle": "メトリック",
+    "visTypeXy.controls.pointSeries.series.modeLabel": "モード",
+    "visTypeXy.controls.pointSeries.series.newAxisLabel": "新規軸…",
+    "visTypeXy.controls.pointSeries.series.showDotsLabel": "点を表示",
+    "visTypeXy.controls.pointSeries.series.showLineLabel": "線を表示",
+    "visTypeXy.controls.pointSeries.series.valueAxisLabel": "値軸",
+    "visTypeXy.controls.pointSeries.seriesAccordionAriaLabel": "{agg} オプションを切り替える",
+    "visTypeXy.controls.pointSeries.valueAxes.addButtonTooltip": "Y 軸を追加します",
+    "visTypeXy.controls.pointSeries.valueAxes.customExtentsLabel": "カスタム範囲",
+    "visTypeXy.controls.pointSeries.valueAxes.maxLabel": "最高",
+    "visTypeXy.controls.pointSeries.valueAxes.minErrorMessage": "最低値は最高値よりも低く設定する必要があります",
+    "visTypeXy.controls.pointSeries.valueAxes.minLabel": "最低",
+    "visTypeXy.controls.pointSeries.valueAxes.minNeededScaleText": "ログスケールが選択されている場合、最低値は 0 よりも大きいものである必要があります",
+    "visTypeXy.controls.pointSeries.valueAxes.modeLabel": "モード",
+    "visTypeXy.controls.pointSeries.valueAxes.positionLabel": "位置",
+    "visTypeXy.controls.pointSeries.valueAxes.removeButtonTooltip": "Y 軸を削除します",
+    "visTypeXy.controls.pointSeries.valueAxes.scaleToDataBounds.boundsMargin": "境界マージン",
+    "visTypeXy.controls.pointSeries.valueAxes.scaleToDataBounds.minNeededBoundsMargin": "境界マージンは 0 以上でなければなりません",
+    "visTypeXy.controls.pointSeries.valueAxes.scaleToDataBoundsLabel": "データバウンドに合わせる",
+    "visTypeXy.controls.pointSeries.valueAxes.scaleTypeLabel": "スケールタイプ",
+    "visTypeXy.controls.pointSeries.valueAxes.setAxisExtentsLabel": "軸範囲を設定",
+    "visTypeXy.controls.pointSeries.valueAxes.showLabel": "軸線とラベルを表示",
+    "visTypeXy.controls.pointSeries.valueAxes.titleLabel": "タイトル",
+    "visTypeXy.controls.pointSeries.valueAxes.toggleCustomExtendsAriaLabel": "カスタム範囲を切り替える",
+    "visTypeXy.controls.pointSeries.valueAxes.toggleOptionsAriaLabel": "{axisName} オプションを切り替える",
+    "visTypeXy.controls.pointSeries.valueAxes.yAxisTitle": "Y 軸",
+    "visTypeXy.controls.truncateLabel": "切り捨て",
     "visTypeVislib.editors.heatmap.basicSettingsTitle": "基本設定",
     "visTypeVislib.editors.heatmap.heatmapSettingsTitle": "ヒートマップ設定",
     "visTypeVislib.editors.heatmap.highlightLabel": "ハイライト範囲",
@@ -4403,16 +4403,16 @@
     "visTypeVislib.editors.pie.showLabelsLabel": "ラベルを表示",
     "visTypeVislib.editors.pie.showTopLevelOnlyLabel": "トップレベルのみ表示",
     "visTypeVislib.editors.pie.showValuesLabel": "値を表示",
-    "visTypeVislib.editors.pointSeries.currentTimeMarkerLabel": "現在時刻マーカー",
-    "visTypeVislib.editors.pointSeries.orderBucketsBySumLabel": "バケットを合計で並べ替え",
-    "visTypeVislib.editors.pointSeries.settingsTitle": "設定",
-    "visTypeVislib.editors.pointSeries.showLabels": "チャートに値を表示",
-    "visTypeVislib.editors.pointSeries.thresholdLine.colorLabel": "線の色",
-    "visTypeVislib.editors.pointSeries.thresholdLine.showLabel": "しきい線を表示",
-    "visTypeVislib.editors.pointSeries.thresholdLine.styleLabel": "ラインスタイル",
-    "visTypeVislib.editors.pointSeries.thresholdLine.valueLabel": "しきい値",
-    "visTypeVislib.editors.pointSeries.thresholdLine.widthLabel": "線の幅",
-    "visTypeVislib.editors.pointSeries.thresholdLineSettingsTitle": "しきい線",
+    "visTypeXy.editors.pointSeries.currentTimeMarkerLabel": "現在時刻マーカー",
+    "visTypeXy.editors.pointSeries.orderBucketsBySumLabel": "バケットを合計で並べ替え",
+    "visTypeXy.editors.pointSeries.settingsTitle": "設定",
+    "visTypeXy.editors.pointSeries.showLabels": "チャートに値を表示",
+    "visTypeXy.editors.pointSeries.thresholdLine.colorLabel": "線の色",
+    "visTypeXy.editors.pointSeries.thresholdLine.showLabel": "しきい線を表示",
+    "visTypeXy.editors.pointSeries.thresholdLine.styleLabel": "ラインスタイル",
+    "visTypeXy.editors.pointSeries.thresholdLine.valueLabel": "しきい値",
+    "visTypeXy.editors.pointSeries.thresholdLine.widthLabel": "線の幅",
+    "visTypeXy.editors.pointSeries.thresholdLineSettingsTitle": "しきい線",
     "visTypeVislib.functions.pie.help": "パイビジュアライゼーション",
     "visTypeVislib.functions.vislib.help": "Vislib ビジュアライゼーション",
     "visTypeVislib.gauge.alignmentAutomaticTitle": "自動",
@@ -4430,46 +4430,45 @@
     "visTypeVislib.heatmap.metricTitle": "値",
     "visTypeVislib.heatmap.segmentTitle": "X 軸",
     "visTypeVislib.heatmap.splitTitle": "チャートを分割",
-    "visTypeVislib.histogram.groupTitle": "系列を分割",
-    "visTypeVislib.histogram.metricTitle": "Y 軸",
-    "visTypeVislib.histogram.radiusTitle": "点のサイズ",
-    "visTypeVislib.histogram.segmentTitle": "X 軸",
-    "visTypeVislib.histogram.splitTitle": "チャートを分割",
-    "visTypeVislib.horizontalBar.groupTitle": "系列を分割",
-    "visTypeVislib.horizontalBar.metricTitle": "Y 軸",
-    "visTypeVislib.horizontalBar.radiusTitle": "点のサイズ",
-    "visTypeVislib.horizontalBar.segmentTitle": "X 軸",
-    "visTypeVislib.horizontalBar.splitTitle": "チャートを分割",
-    "visTypeVislib.interpolationModes.smoothedText": "スムーズ",
-    "visTypeVislib.interpolationModes.steppedText": "ステップ",
-    "visTypeVislib.interpolationModes.straightText": "直線",
-    "visTypeVislib.legendPositions.bottomText": "一番下",
-    "visTypeVislib.legendPositions.leftText": "左",
-    "visTypeVislib.legendPositions.rightText": "右",
-    "visTypeVislib.legendPositions.topText": "トップ",
-    "visTypeVislib.line.groupTitle": "系列を分割",
-    "visTypeVislib.line.lineTitle": "折れ線",
-    "visTypeVislib.line.metricTitle": "Y 軸",
-    "visTypeVislib.line.radiusTitle": "点のサイズ",
-    "visTypeVislib.line.segmentTitle": "X 軸",
-    "visTypeVislib.line.splitTitle": "チャートを分割",
+    "visTypeXy.histogram.groupTitle": "系列を分割",
+    "visTypeXy.histogram.metricTitle": "Y 軸",
+    "visTypeXy.histogram.radiusTitle": "点のサイズ",
+    "visTypeXy.histogram.segmentTitle": "X 軸",
+    "visTypeXy.histogram.splitTitle": "チャートを分割",
+    "visTypeXy.horizontalBar.groupTitle": "系列を分割",
+    "visTypeXy.horizontalBar.metricTitle": "Y 軸",
+    "visTypeXy.horizontalBar.radiusTitle": "点のサイズ",
+    "visTypeXy.horizontalBar.segmentTitle": "X 軸",
+    "visTypeXy.horizontalBar.splitTitle": "チャートを分割",
+    "visTypeXy.interpolationModes.smoothedText": "スムーズ",
+    "visTypeXy.interpolationModes.steppedText": "ステップ",
+    "visTypeXy.interpolationModes.straightText": "直線",
+    "visTypeXy.legendPositions.bottomText": "一番下",
+    "visTypeXy.legendPositions.leftText": "左",
+    "visTypeXy.legendPositions.rightText": "右",
+    "visTypeXy.legendPositions.topText": "トップ",
+    "visTypeXy.line.groupTitle": "系列を分割",
+    "visTypeXy.line.lineTitle": "折れ線",
+    "visTypeXy.line.metricTitle": "Y 軸",
+    "visTypeXy.line.radiusTitle": "点のサイズ",
+    "visTypeXy.line.segmentTitle": "X 軸",
+    "visTypeXy.line.splitTitle": "チャートを分割",
     "visTypeVislib.pie.metricTitle": "サイズのスライス",
     "visTypeVislib.pie.pieTitle": "パイ",
     "visTypeVislib.pie.segmentTitle": "スライスの分割",
     "visTypeVislib.pie.splitTitle": "チャートを分割",
-    "visTypeVislib.scaleTypes.linearText": "線形",
-    "visTypeVislib.scaleTypes.logText": "ログ",
-    "visTypeVislib.scaleTypes.squareRootText": "平方根",
-    "visTypeVislib.thresholdLine.style.dashedText": "鎖線",
-    "visTypeVislib.thresholdLine.style.dotdashedText": "点線",
-    "visTypeVislib.thresholdLine.style.fullText": "完全",
+    "visTypeXy.scaleTypes.linearText": "線形",
+    "visTypeXy.scaleTypes.logText": "ログ",
+    "visTypeXy.scaleTypes.squareRootText": "平方根",
+    "visTypeXy.thresholdLine.style.dashedText": "鎖線",
+    "visTypeXy.thresholdLine.style.dotdashedText": "点線",
+    "visTypeXy.thresholdLine.style.fullText": "完全",
     "visTypeVislib.vislib.errors.noResultsFoundTitle": "結果が見つかりませんでした",
     "visTypeVislib.vislib.heatmap.maxBucketsText": "定義された数列が多すぎます ({nr})。構成されている最大値は {max} です。",
     "visTypeVislib.vislib.legend.filterForValueButtonAriaLabel": "値 {legendDataLabel} でフィルタリング",
     "visTypeVislib.vislib.legend.filterOptionsLegend": "{legendDataLabel}、フィルターオプション",
     "visTypeVislib.vislib.legend.filterOutValueButtonAriaLabel": "値 {legendDataLabel} を除外",
     "visTypeVislib.vislib.legend.loadingLabel": "読み込み中…",
-    "visTypeVislib.vislib.legend.setColorScreenReaderDescription": "値 {legendDataLabel} の色を設定",
     "visTypeVislib.vislib.legend.toggleLegendButtonAriaLabel": "凡例を切り替える",
     "visTypeVislib.vislib.legend.toggleLegendButtonTitle": "凡例を切り替える",
     "visTypeVislib.vislib.legend.toggleOptionsButtonAriaLabel": "{legendDataLabel}、トグルオプション",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 50f9da227b81f6..f803ff48df76d3 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -255,6 +255,7 @@
     "charts.controls.rangeErrorMessage": "值必须是在 {min} 到 {max} 的范围内",
     "charts.controls.vislibBasicOptions.legendPositionLabel": "图例位置",
     "charts.controls.vislibBasicOptions.showTooltipLabel": "显示工具提示",
+    "charts.colorPicker.setColor.screenReaderDescription": "为值 {legendDataLabel} 设置颜色",
     "console.autocomplete.addMethodMetaText": "方法",
     "console.consoleDisplayName": "控制台",
     "console.consoleMenu.copyAsCurlMessage": "请求已复制为 cURL",
@@ -1504,7 +1505,6 @@
     "discover.fieldNameIcons.stringFieldAriaLabel": "字符串字段",
     "discover.fieldNameIcons.unknownFieldAriaLabel": "未知字段",
     "discover.helpMenu.appName": "Discover",
-    "discover.histogram.partialData.bucketTooltipText": "选定的时间范围不包括此整个存储桶，其可能包含部分数据。",
     "discover.histogramOfFoundDocumentsAriaLabel": "已找到文档的直方图",
     "discover.hitsPluralTitle": "{hits, plural, one {次命中} other {次命中}}",
     "discover.howToChangeTheTimeTooltip": "要更改时间，请使用上面的全局时间筛选",
@@ -4307,27 +4307,27 @@
     "visTypeVislib.advancedSettings.visualization.heatmap.maxBucketsText": "单个数据源可以返回的最大存储桶数目。较高的数目可能对浏览器呈现性能有负面影响",
     "visTypeVislib.advancedSettings.visualization.heatmap.maxBucketsTitle": "热图最大存储桶数",
     "visTypeVislib.aggResponse.allDocsTitle": "所有文档",
-    "visTypeVislib.area.areaTitle": "面积图",
-    "visTypeVislib.area.countText": "计数",
-    "visTypeVislib.area.groupTitle": "拆分序列",
-    "visTypeVislib.area.metricsTitle": "Y 轴",
-    "visTypeVislib.area.radiusTitle": "点大小",
-    "visTypeVislib.area.segmentTitle": "X 轴",
-    "visTypeVislib.area.splitTitle": "拆分图表",
-    "visTypeVislib.area.tabs.metricsAxesTitle": "指标和轴",
-    "visTypeVislib.area.tabs.panelSettingsTitle": "面板设置",
-    "visTypeVislib.axisModes.normalText": "正常",
-    "visTypeVislib.axisModes.percentageText": "百分比",
-    "visTypeVislib.axisModes.silhouetteText": "剪影",
-    "visTypeVislib.axisModes.wiggleText": "扭动",
-    "visTypeVislib.categoryAxis.rotate.angledText": "带角度",
-    "visTypeVislib.categoryAxis.rotate.horizontalText": "水平",
-    "visTypeVislib.categoryAxis.rotate.verticalText": "垂直",
-    "visTypeVislib.chartModes.normalText": "正常",
-    "visTypeVislib.chartModes.stackedText": "堆叠",
-    "visTypeVislib.chartTypes.areaText": "面积图",
-    "visTypeVislib.chartTypes.barText": "条形图",
-    "visTypeVislib.chartTypes.lineText": "折线图",
+    "visTypeXy.area.areaTitle": "面积图",
+    "charts.countText": "计数",
+    "visTypeXy.area.groupTitle": "拆分序列",
+    "visTypeXy.area.metricsTitle": "Y 轴",
+    "visTypeXy.area.radiusTitle": "点大小",
+    "visTypeXy.area.segmentTitle": "X 轴",
+    "visTypeXy.area.splitTitle": "拆分图表",
+    "visTypeXy.area.tabs.metricsAxesTitle": "指标和轴",
+    "visTypeXy.area.tabs.panelSettingsTitle": "面板设置",
+    "visTypeXy.axisModes.normalText": "正常",
+    "visTypeXy.axisModes.percentageText": "百分比",
+    "visTypeXy.axisModes.silhouetteText": "剪影",
+    "visTypeXy.axisModes.wiggleText": "扭动",
+    "visTypeXy.categoryAxis.rotate.angledText": "带角度",
+    "visTypeXy.categoryAxis.rotate.horizontalText": "水平",
+    "visTypeXy.categoryAxis.rotate.verticalText": "垂直",
+    "visTypeXy.chartModes.normalText": "正常",
+    "visTypeXy.chartModes.stackedText": "堆叠",
+    "visTypeXy.chartTypes.areaText": "面积图",
+    "visTypeXy.chartTypes.barText": "条形图",
+    "visTypeXy.chartTypes.lineText": "折线图",
     "visTypeVislib.controls.gaugeOptions.alignmentLabel": "对齐方式",
     "visTypeVislib.controls.gaugeOptions.autoExtendRangeLabel": "自动扩展范围",
     "visTypeVislib.controls.gaugeOptions.displayWarningsLabel": "显示警告",
@@ -4353,48 +4353,48 @@
     "visTypeVislib.controls.heatmapOptions.scaleToDataBoundsLabel": "缩放到数据边界",
     "visTypeVislib.controls.heatmapOptions.showLabelsTitle": "显示标签",
     "visTypeVislib.controls.heatmapOptions.useCustomRangesLabel": "使用定制范围",
-    "visTypeVislib.controls.pointSeries.categoryAxis.alignLabel": "对齐",
-    "visTypeVislib.controls.pointSeries.categoryAxis.filterLabelsLabel": "筛选标签",
-    "visTypeVislib.controls.pointSeries.categoryAxis.labelsTitle": "标签",
-    "visTypeVislib.controls.pointSeries.categoryAxis.positionLabel": "位置",
-    "visTypeVislib.controls.pointSeries.categoryAxis.showLabel": "显示",
-    "visTypeVislib.controls.pointSeries.categoryAxis.showLabelsLabel": "显示标签",
-    "visTypeVislib.controls.pointSeries.categoryAxis.xAxisTitle": "X 轴",
-    "visTypeVislib.controls.pointSeries.gridAxis.dontShowLabel": "不显示",
-    "visTypeVislib.controls.pointSeries.gridAxis.gridText": "网格",
-    "visTypeVislib.controls.pointSeries.gridAxis.xAxisLinesLabel": "显示 X 轴线",
-    "visTypeVislib.controls.pointSeries.gridAxis.yAxisLinesDisabledTooltip": "直方图的 X 轴线无法显示。",
-    "visTypeVislib.controls.pointSeries.gridAxis.yAxisLinesLabel": "Y 轴线",
-    "visTypeVislib.controls.pointSeries.series.chartTypeLabel": "图表类型",
-    "visTypeVislib.controls.pointSeries.series.lineModeLabel": "线条模式",
-    "visTypeVislib.controls.pointSeries.series.lineWidthLabel": "线条宽度",
-    "visTypeVislib.controls.pointSeries.series.metricsTitle": "指标",
-    "visTypeVislib.controls.pointSeries.series.modeLabel": "模式",
-    "visTypeVislib.controls.pointSeries.series.newAxisLabel": "新建轴…...",
-    "visTypeVislib.controls.pointSeries.series.showDotsLabel": "显示点线",
-    "visTypeVislib.controls.pointSeries.series.showLineLabel": "显示线条",
-    "visTypeVislib.controls.pointSeries.series.valueAxisLabel": "值轴",
-    "visTypeVislib.controls.pointSeries.seriesAccordionAriaLabel": "切换 {agg} 选项",
-    "visTypeVislib.controls.pointSeries.valueAxes.addButtonTooltip": "添加 Y 轴",
-    "visTypeVislib.controls.pointSeries.valueAxes.customExtentsLabel": "定制范围",
-    "visTypeVislib.controls.pointSeries.valueAxes.maxLabel": "最大值",
-    "visTypeVislib.controls.pointSeries.valueAxes.minErrorMessage": "最小值应小于最大值。",
-    "visTypeVislib.controls.pointSeries.valueAxes.minLabel": "最小值",
-    "visTypeVislib.controls.pointSeries.valueAxes.minNeededScaleText": "如果选择了对数刻度，最小值必须大于 0。",
-    "visTypeVislib.controls.pointSeries.valueAxes.modeLabel": "模式",
-    "visTypeVislib.controls.pointSeries.valueAxes.positionLabel": "位置",
-    "visTypeVislib.controls.pointSeries.valueAxes.removeButtonTooltip": "移除 Y 轴",
-    "visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBounds.boundsMargin": "边界边距",
-    "visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBounds.minNeededBoundsMargin": "边界边距必须大于或等于 0。",
-    "visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBoundsLabel": "缩放到数据边界",
-    "visTypeVislib.controls.pointSeries.valueAxes.scaleTypeLabel": "缩放类型",
-    "visTypeVislib.controls.pointSeries.valueAxes.setAxisExtentsLabel": "设置轴范围",
-    "visTypeVislib.controls.pointSeries.valueAxes.showLabel": "显示",
-    "visTypeVislib.controls.pointSeries.valueAxes.titleLabel": "标题",
-    "visTypeVislib.controls.pointSeries.valueAxes.toggleCustomExtendsAriaLabel": "切换定制范围",
-    "visTypeVislib.controls.pointSeries.valueAxes.toggleOptionsAriaLabel": "切换 {axisName} 选项",
-    "visTypeVislib.controls.pointSeries.valueAxes.yAxisTitle": "Y 轴",
-    "visTypeVislib.controls.truncateLabel": "截断",
+    "visTypeXy.controls.pointSeries.categoryAxis.alignLabel": "对齐",
+    "visTypeXy.controls.pointSeries.categoryAxis.filterLabelsLabel": "筛选标签",
+    "visTypeXy.controls.pointSeries.categoryAxis.labelsTitle": "标签",
+    "visTypeXy.controls.pointSeries.categoryAxis.positionLabel": "位置",
+    "visTypeXy.controls.pointSeries.categoryAxis.showLabel": "显示",
+    "visTypeXy.controls.pointSeries.categoryAxis.showLabelsLabel": "显示标签",
+    "visTypeXy.controls.pointSeries.categoryAxis.xAxisTitle": "X 轴",
+    "visTypeXy.controls.pointSeries.gridAxis.dontShowLabel": "不显示",
+    "visTypeXy.controls.pointSeries.gridAxis.gridText": "网格",
+    "visTypeXy.controls.pointSeries.gridAxis.xAxisLinesLabel": "显示 X 轴线",
+    "visTypeXy.controls.pointSeries.gridAxis.yAxisLinesDisabledTooltip": "直方图的 X 轴线无法显示。",
+    "visTypeXy.controls.pointSeries.gridAxis.yAxisLinesLabel": "Y 轴线",
+    "visTypeXy.controls.pointSeries.series.chartTypeLabel": "图表类型",
+    "visTypeXy.controls.pointSeries.series.lineModeLabel": "线条模式",
+    "visTypeXy.controls.pointSeries.series.lineWidthLabel": "线条宽度",
+    "visTypeXy.controls.pointSeries.series.metricsTitle": "指标",
+    "visTypeXy.controls.pointSeries.series.modeLabel": "模式",
+    "visTypeXy.controls.pointSeries.series.newAxisLabel": "新建轴…...",
+    "visTypeXy.controls.pointSeries.series.showDotsLabel": "显示点线",
+    "visTypeXy.controls.pointSeries.series.showLineLabel": "显示线条",
+    "visTypeXy.controls.pointSeries.series.valueAxisLabel": "值轴",
+    "visTypeXy.controls.pointSeries.seriesAccordionAriaLabel": "切换 {agg} 选项",
+    "visTypeXy.controls.pointSeries.valueAxes.addButtonTooltip": "添加 Y 轴",
+    "visTypeXy.controls.pointSeries.valueAxes.customExtentsLabel": "定制范围",
+    "visTypeXy.controls.pointSeries.valueAxes.maxLabel": "最大值",
+    "visTypeXy.controls.pointSeries.valueAxes.minErrorMessage": "最小值应小于最大值。",
+    "visTypeXy.controls.pointSeries.valueAxes.minLabel": "最小值",
+    "visTypeXy.controls.pointSeries.valueAxes.minNeededScaleText": "如果选择了对数刻度，最小值必须大于 0。",
+    "visTypeXy.controls.pointSeries.valueAxes.modeLabel": "模式",
+    "visTypeXy.controls.pointSeries.valueAxes.positionLabel": "位置",
+    "visTypeXy.controls.pointSeries.valueAxes.removeButtonTooltip": "移除 Y 轴",
+    "visTypeXy.controls.pointSeries.valueAxes.scaleToDataBounds.boundsMargin": "边界边距",
+    "visTypeXy.controls.pointSeries.valueAxes.scaleToDataBounds.minNeededBoundsMargin": "边界边距必须大于或等于 0。",
+    "visTypeXy.controls.pointSeries.valueAxes.scaleToDataBoundsLabel": "缩放到数据边界",
+    "visTypeXy.controls.pointSeries.valueAxes.scaleTypeLabel": "缩放类型",
+    "visTypeXy.controls.pointSeries.valueAxes.setAxisExtentsLabel": "设置轴范围",
+    "visTypeXy.controls.pointSeries.valueAxes.showLabel": "显示",
+    "visTypeXy.controls.pointSeries.valueAxes.titleLabel": "标题",
+    "visTypeXy.controls.pointSeries.valueAxes.toggleCustomExtendsAriaLabel": "切换定制范围",
+    "visTypeXy.controls.pointSeries.valueAxes.toggleOptionsAriaLabel": "切换 {axisName} 选项",
+    "visTypeXy.controls.pointSeries.valueAxes.yAxisTitle": "Y 轴",
+    "visTypeXy.controls.truncateLabel": "截断",
     "visTypeVislib.editors.heatmap.basicSettingsTitle": "基本设置",
     "visTypeVislib.editors.heatmap.heatmapSettingsTitle": "热图设置",
     "visTypeVislib.editors.heatmap.highlightLabel": "高亮范围",
@@ -4405,16 +4405,16 @@
     "visTypeVislib.editors.pie.showLabelsLabel": "显示标签",
     "visTypeVislib.editors.pie.showTopLevelOnlyLabel": "仅显示顶级",
     "visTypeVislib.editors.pie.showValuesLabel": "显示值",
-    "visTypeVislib.editors.pointSeries.currentTimeMarkerLabel": "当前时间标记",
-    "visTypeVislib.editors.pointSeries.orderBucketsBySumLabel": "按总计值排序存储桶",
-    "visTypeVislib.editors.pointSeries.settingsTitle": "设置",
-    "visTypeVislib.editors.pointSeries.showLabels": "在图表上显示值",
-    "visTypeVislib.editors.pointSeries.thresholdLine.colorLabel": "线条颜色",
-    "visTypeVislib.editors.pointSeries.thresholdLine.showLabel": "显示阈值线条",
-    "visTypeVislib.editors.pointSeries.thresholdLine.styleLabel": "线条样式",
-    "visTypeVislib.editors.pointSeries.thresholdLine.valueLabel": "阈值",
-    "visTypeVislib.editors.pointSeries.thresholdLine.widthLabel": "线条宽度",
-    "visTypeVislib.editors.pointSeries.thresholdLineSettingsTitle": "阈值线条",
+    "visTypeXy.editors.pointSeries.currentTimeMarkerLabel": "当前时间标记",
+    "visTypeXy.editors.pointSeries.orderBucketsBySumLabel": "按总计值排序存储桶",
+    "visTypeXy.editors.pointSeries.settingsTitle": "设置",
+    "visTypeXy.editors.pointSeries.showLabels": "在图表上显示值",
+    "visTypeXy.editors.pointSeries.thresholdLine.colorLabel": "线条颜色",
+    "visTypeXy.editors.pointSeries.thresholdLine.showLabel": "显示阈值线条",
+    "visTypeXy.editors.pointSeries.thresholdLine.styleLabel": "线条样式",
+    "visTypeXy.editors.pointSeries.thresholdLine.valueLabel": "阈值",
+    "visTypeXy.editors.pointSeries.thresholdLine.widthLabel": "线条宽度",
+    "visTypeXy.editors.pointSeries.thresholdLineSettingsTitle": "阈值线条",
     "visTypeVislib.functions.pie.help": "饼图可视化",
     "visTypeVislib.functions.vislib.help": "Vislib 可视化",
     "visTypeVislib.gauge.alignmentAutomaticTitle": "自动",
@@ -4432,46 +4432,45 @@
     "visTypeVislib.heatmap.metricTitle": "值",
     "visTypeVislib.heatmap.segmentTitle": "X 轴",
     "visTypeVislib.heatmap.splitTitle": "拆分图表",
-    "visTypeVislib.histogram.groupTitle": "拆分序列",
-    "visTypeVislib.histogram.metricTitle": "Y 轴",
-    "visTypeVislib.histogram.radiusTitle": "点大小",
-    "visTypeVislib.histogram.segmentTitle": "X 轴",
-    "visTypeVislib.histogram.splitTitle": "拆分图表",
-    "visTypeVislib.horizontalBar.groupTitle": "拆分序列",
-    "visTypeVislib.horizontalBar.metricTitle": "Y 轴",
-    "visTypeVislib.horizontalBar.radiusTitle": "点大小",
-    "visTypeVislib.horizontalBar.segmentTitle": "X 轴",
-    "visTypeVislib.horizontalBar.splitTitle": "拆分图表",
-    "visTypeVislib.interpolationModes.smoothedText": "平滑",
-    "visTypeVislib.interpolationModes.steppedText": "渐变",
-    "visTypeVislib.interpolationModes.straightText": "直线",
-    "visTypeVislib.legendPositions.bottomText": "下",
-    "visTypeVislib.legendPositions.leftText": "左",
-    "visTypeVislib.legendPositions.rightText": "右",
-    "visTypeVislib.legendPositions.topText": "上",
-    "visTypeVislib.line.groupTitle": "拆分序列",
-    "visTypeVislib.line.lineTitle": "折线图",
-    "visTypeVislib.line.metricTitle": "Y 轴",
-    "visTypeVislib.line.radiusTitle": "点大小",
-    "visTypeVislib.line.segmentTitle": "X 轴",
-    "visTypeVislib.line.splitTitle": "拆分图表",
+    "visTypeXy.histogram.groupTitle": "拆分序列",
+    "visTypeXy.histogram.metricTitle": "Y 轴",
+    "visTypeXy.histogram.radiusTitle": "点大小",
+    "visTypeXy.histogram.segmentTitle": "X 轴",
+    "visTypeXy.histogram.splitTitle": "拆分图表",
+    "visTypeXy.horizontalBar.groupTitle": "拆分序列",
+    "visTypeXy.horizontalBar.metricTitle": "Y 轴",
+    "visTypeXy.horizontalBar.radiusTitle": "点大小",
+    "visTypeXy.horizontalBar.segmentTitle": "X 轴",
+    "visTypeXy.horizontalBar.splitTitle": "拆分图表",
+    "visTypeXy.interpolationModes.smoothedText": "平滑",
+    "visTypeXy.interpolationModes.steppedText": "渐变",
+    "visTypeXy.interpolationModes.straightText": "直线",
+    "visTypeXy.legendPositions.bottomText": "下",
+    "visTypeXy.legendPositions.leftText": "左",
+    "visTypeXy.legendPositions.rightText": "右",
+    "visTypeXy.legendPositions.topText": "上",
+    "visTypeXy.line.groupTitle": "拆分序列",
+    "visTypeXy.line.lineTitle": "折线图",
+    "visTypeXy.line.metricTitle": "Y 轴",
+    "visTypeXy.line.radiusTitle": "点大小",
+    "visTypeXy.line.segmentTitle": "X 轴",
+    "visTypeXy.line.splitTitle": "拆分图表",
     "visTypeVislib.pie.metricTitle": "切片大小",
     "visTypeVislib.pie.pieTitle": "饼图",
     "visTypeVislib.pie.segmentTitle": "拆分切片",
     "visTypeVislib.pie.splitTitle": "拆分图表",
-    "visTypeVislib.scaleTypes.linearText": "线性",
-    "visTypeVislib.scaleTypes.logText": "对数",
-    "visTypeVislib.scaleTypes.squareRootText": "平方根",
-    "visTypeVislib.thresholdLine.style.dashedText": "虚线",
-    "visTypeVislib.thresholdLine.style.dotdashedText": "点虚线",
-    "visTypeVislib.thresholdLine.style.fullText": "实线",
+    "visTypeXy.scaleTypes.linearText": "线性",
+    "visTypeXy.scaleTypes.logText": "对数",
+    "visTypeXy.scaleTypes.squareRootText": "平方根",
+    "visTypeXy.thresholdLine.style.dashedText": "虚线",
+    "visTypeXy.thresholdLine.style.dotdashedText": "点虚线",
+    "visTypeXy.thresholdLine.style.fullText": "实线",
     "visTypeVislib.vislib.errors.noResultsFoundTitle": "找不到结果",
     "visTypeVislib.vislib.heatmap.maxBucketsText": "定义了过多的序列 ({nr})。配置的最大值为 {max}。",
     "visTypeVislib.vislib.legend.filterForValueButtonAriaLabel": "筛留值 {legendDataLabel}",
     "visTypeVislib.vislib.legend.filterOptionsLegend": "{legendDataLabel}, 筛选选项",
     "visTypeVislib.vislib.legend.filterOutValueButtonAriaLabel": "筛除值 {legendDataLabel}",
     "visTypeVislib.vislib.legend.loadingLabel": "正在加载……",
-    "visTypeVislib.vislib.legend.setColorScreenReaderDescription": "为值 {legendDataLabel} 设置颜色",
     "visTypeVislib.vislib.legend.toggleLegendButtonAriaLabel": "切换图例",
     "visTypeVislib.vislib.legend.toggleLegendButtonTitle": "切换图例",
     "visTypeVislib.vislib.legend.toggleOptionsButtonAriaLabel": "{legendDataLabel}, 切换选项",

From ca24e1123e958f8ed143dd745ece2ceac2952c47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mike=20C=C3=B4t=C3=A9?= <mikecote@users.noreply.github.com>
Date: Fri, 18 Dec 2020 10:02:17 -0500
Subject: [PATCH 14/75] Sort action type filters in alerts list and hide case
 action type (#86360)

* Hide case action type from alert list action type filter

* Apply a sort as well
---
 .../sections/alerts_list/components/alerts_list.tsx   | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
index 2082b81c353fdd..92f74c5829cc01 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
@@ -58,6 +58,7 @@ import { hasAllPrivilege } from '../../../lib/capabilities';
 import { alertsStatusesTranslationsMapping } from '../translations';
 import { useKibana } from '../../../../common/lib/kibana';
 import { checkAlertTypeEnabled } from '../../../lib/check_alert_type_enabled';
+import { DEFAULT_HIDDEN_ACTION_TYPES } from '../../../../common/constants';
 import './alerts_list.scss';
 
 const ENTER_KEY = 13;
@@ -155,7 +156,15 @@ export const AlertsList: React.FunctionComponent = () => {
     (async () => {
       try {
         const result = await loadActionTypes({ http });
-        setActionTypes(result.filter((actionType) => actionTypeRegistry.has(actionType.id)));
+        setActionTypes(
+          result
+            .filter(
+              // TODO: Remove "DEFAULT_HIDDEN_ACTION_TYPES" when cases connector is available across Kibana.
+              // Issue: https://github.com/elastic/kibana/issues/82502.
+              ({ id }) => actionTypeRegistry.has(id) && !DEFAULT_HIDDEN_ACTION_TYPES.includes(id)
+            )
+            .sort((a, b) => a.name.localeCompare(b.name))
+        );
       } catch (e) {
         toasts.addDanger({
           title: i18n.translate(

From 3a6e2a31c7dcc1b5af7fc6828864fd34192cb787 Mon Sep 17 00:00:00 2001
From: "Christiane (Tina) Heiligers" <christiane.heiligers@elastic.co>
Date: Fri, 18 Dec 2020 08:10:28 -0700
Subject: [PATCH 15/75] [GS] Allows apps to register searchable keywords for
 Global Search (#85686)

---
 .../public/kibana-plugin-core-public.app.md   |   2 +-
 .../kibana-plugin-core-public.app.meta.md     |  43 ++++
 ...-plugin-core-public.app.searchdeeplinks.md |  42 ----
 ...ana-plugin-core-public.appmeta.keywords.md |  13 +
 .../kibana-plugin-core-public.appmeta.md      |  23 ++
 ...gin-core-public.appmeta.searchdeeplinks.md |  13 +
 ...na-plugin-core-public.appsearchdeeplink.md |   2 +
 ...a-plugin-core-public.appupdatablefields.md |   2 +-
 .../core/public/kibana-plugin-core-public.md  |   2 +
 ...kibana-plugin-core-public.publicappinfo.md |   4 +-
 ...na-plugin-core-public.publicappmetainfo.md |  16 ++
 ...core-public.publicappsearchdeeplinkinfo.md |   3 +-
 src/core/public/application/index.ts          |   2 +
 src/core/public/application/types.ts          |  80 ++++--
 .../application/utils/get_app_info.test.ts    | 103 ++++++--
 .../public/application/utils/get_app_info.ts  |   6 +-
 .../chrome/nav_links/to_nav_link.test.ts      |   5 +-
 src/core/public/index.ts                      |   2 +
 src/core/public/public.api.md                 |  24 +-
 src/plugins/management/public/plugin.ts       |   3 +-
 .../management/public/utils/management_app.ts |   6 +
 .../public/providers/application.test.ts      |   5 +-
 .../public/providers/get_app_results.test.ts  | 232 ++++++++++++++++--
 .../public/providers/get_app_results.ts       |  43 +++-
 24 files changed, 555 insertions(+), 121 deletions(-)
 create mode 100644 docs/development/core/public/kibana-plugin-core-public.app.meta.md
 delete mode 100644 docs/development/core/public/kibana-plugin-core-public.app.searchdeeplinks.md
 create mode 100644 docs/development/core/public/kibana-plugin-core-public.appmeta.keywords.md
 create mode 100644 docs/development/core/public/kibana-plugin-core-public.appmeta.md
 create mode 100644 docs/development/core/public/kibana-plugin-core-public.appmeta.searchdeeplinks.md
 create mode 100644 docs/development/core/public/kibana-plugin-core-public.publicappmetainfo.md

diff --git a/docs/development/core/public/kibana-plugin-core-public.app.md b/docs/development/core/public/kibana-plugin-core-public.app.md
index 8e8bae5ad9c586..b24ced68b7d389 100644
--- a/docs/development/core/public/kibana-plugin-core-public.app.md
+++ b/docs/development/core/public/kibana-plugin-core-public.app.md
@@ -24,10 +24,10 @@ export interface App<HistoryLocationState = unknown>
 |  [exactRoute](./kibana-plugin-core-public.app.exactroute.md) | <code>boolean</code> | If set to true, the application's route will only be checked against an exact match. Defaults to <code>false</code>. |
 |  [icon](./kibana-plugin-core-public.app.icon.md) | <code>string</code> | A URL to an image file used as an icon. Used as a fallback if <code>euiIconType</code> is not provided. |
 |  [id](./kibana-plugin-core-public.app.id.md) | <code>string</code> | The unique identifier of the application |
+|  [meta](./kibana-plugin-core-public.app.meta.md) | <code>AppMeta</code> | Meta data for an application that represent additional information for the app. See [AppMeta](./kibana-plugin-core-public.appmeta.md) |
 |  [mount](./kibana-plugin-core-public.app.mount.md) | <code>AppMount&lt;HistoryLocationState&gt; &#124; AppMountDeprecated&lt;HistoryLocationState&gt;</code> | A mount function called when the user navigates to this app's route. May have signature of [AppMount](./kibana-plugin-core-public.appmount.md) or [AppMountDeprecated](./kibana-plugin-core-public.appmountdeprecated.md)<!-- -->. |
 |  [navLinkStatus](./kibana-plugin-core-public.app.navlinkstatus.md) | <code>AppNavLinkStatus</code> | The initial status of the application's navLink. Defaulting to <code>visible</code> if <code>status</code> is <code>accessible</code> and <code>hidden</code> if status is <code>inaccessible</code> See [AppNavLinkStatus](./kibana-plugin-core-public.appnavlinkstatus.md) |
 |  [order](./kibana-plugin-core-public.app.order.md) | <code>number</code> | An ordinal used to sort nav links relative to one another for display. |
-|  [searchDeepLinks](./kibana-plugin-core-public.app.searchdeeplinks.md) | <code>AppSearchDeepLink[]</code> | Array of links that represent secondary in-app locations for the app. |
 |  [status](./kibana-plugin-core-public.app.status.md) | <code>AppStatus</code> | The initial status of the application. Defaulting to <code>accessible</code> |
 |  [title](./kibana-plugin-core-public.app.title.md) | <code>string</code> | The title of the application. |
 |  [tooltip](./kibana-plugin-core-public.app.tooltip.md) | <code>string</code> | A tooltip shown when hovering over app link. |
diff --git a/docs/development/core/public/kibana-plugin-core-public.app.meta.md b/docs/development/core/public/kibana-plugin-core-public.app.meta.md
new file mode 100644
index 00000000000000..574fa11605aec9
--- /dev/null
+++ b/docs/development/core/public/kibana-plugin-core-public.app.meta.md
@@ -0,0 +1,43 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [App](./kibana-plugin-core-public.app.md) &gt; [meta](./kibana-plugin-core-public.app.meta.md)
+
+## App.meta property
+
+Meta data for an application that represent additional information for the app. See [AppMeta](./kibana-plugin-core-public.appmeta.md)
+
+<b>Signature:</b>
+
+```typescript
+meta?: AppMeta;
+```
+
+## Remarks
+
+Used to populate navigational search results (where available). Can be updated using the [App.updater$](./kibana-plugin-core-public.app.updater_.md) observable. See [PublicAppSearchDeepLinkInfo](./kibana-plugin-core-public.publicappsearchdeeplinkinfo.md) for more details.
+
+## Example
+
+
+```ts
+core.application.register({
+  id: 'my_app',
+  title: 'Translated title',
+  meta: {
+    keywords: ['translated keyword1', 'translated keyword2'],
+    searchDeepLinks: [
+    { id: 'sub1', title: 'Sub1', path: '/sub1', keywords: ['subpath1'] },
+    {
+      id: 'sub2',
+      title: 'Sub2',
+      searchDeepLinks: [
+        { id: 'subsub', title: 'SubSub', path: '/sub2/sub', keywords: ['subpath2'] }
+      ]
+    }
+  ],
+  },
+  mount: () => { ... }
+})
+
+```
+
diff --git a/docs/development/core/public/kibana-plugin-core-public.app.searchdeeplinks.md b/docs/development/core/public/kibana-plugin-core-public.app.searchdeeplinks.md
deleted file mode 100644
index 667fddbc212a55..00000000000000
--- a/docs/development/core/public/kibana-plugin-core-public.app.searchdeeplinks.md
+++ /dev/null
@@ -1,42 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [App](./kibana-plugin-core-public.app.md) &gt; [searchDeepLinks](./kibana-plugin-core-public.app.searchdeeplinks.md)
-
-## App.searchDeepLinks property
-
-Array of links that represent secondary in-app locations for the app.
-
-<b>Signature:</b>
-
-```typescript
-searchDeepLinks?: AppSearchDeepLink[];
-```
-
-## Remarks
-
-Used to populate navigational search results (where available). Can be updated using the [App.updater$](./kibana-plugin-core-public.app.updater_.md) observable. See  for more details.
-
-## Example
-
-The `path` property on deep links should not include the application's `appRoute`<!-- -->:
-
-```ts
-core.application.register({
-  id: 'my_app',
-  title: 'My App',
-  searchDeepLinks: [
-    { id: 'sub1', title: 'Sub1', path: '/sub1' },
-    {
-      id: 'sub2',
-      title: 'Sub2',
-      searchDeepLinks: [
-        { id: 'subsub', title: 'SubSub', path: '/sub2/sub' }
-      ]
-    }
-  ],
-  mount: () => { ... },
-})
-
-```
-Will produce deep links on these paths: - `/app/my_app/sub1` - `/app/my_app/sub2/sub`
-
diff --git a/docs/development/core/public/kibana-plugin-core-public.appmeta.keywords.md b/docs/development/core/public/kibana-plugin-core-public.appmeta.keywords.md
new file mode 100644
index 00000000000000..13709df68e76a1
--- /dev/null
+++ b/docs/development/core/public/kibana-plugin-core-public.appmeta.keywords.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [AppMeta](./kibana-plugin-core-public.appmeta.md) &gt; [keywords](./kibana-plugin-core-public.appmeta.keywords.md)
+
+## AppMeta.keywords property
+
+Keywords to represent this application
+
+<b>Signature:</b>
+
+```typescript
+keywords?: string[];
+```
diff --git a/docs/development/core/public/kibana-plugin-core-public.appmeta.md b/docs/development/core/public/kibana-plugin-core-public.appmeta.md
new file mode 100644
index 00000000000000..a2b72f7ec799d2
--- /dev/null
+++ b/docs/development/core/public/kibana-plugin-core-public.appmeta.md
@@ -0,0 +1,23 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [AppMeta](./kibana-plugin-core-public.appmeta.md)
+
+## AppMeta interface
+
+Input type for meta data for an application.
+
+Meta fields include `keywords` and `searchDeepLinks` Keywords is an array of string with which to associate the app, must include at least one unique string as an array. `searchDeepLinks` is an array of links that represent secondary in-app locations for the app.
+
+<b>Signature:</b>
+
+```typescript
+export interface AppMeta 
+```
+
+## Properties
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [keywords](./kibana-plugin-core-public.appmeta.keywords.md) | <code>string[]</code> | Keywords to represent this application |
+|  [searchDeepLinks](./kibana-plugin-core-public.appmeta.searchdeeplinks.md) | <code>AppSearchDeepLink[]</code> | Array of links that represent secondary in-app locations for the app. |
+
diff --git a/docs/development/core/public/kibana-plugin-core-public.appmeta.searchdeeplinks.md b/docs/development/core/public/kibana-plugin-core-public.appmeta.searchdeeplinks.md
new file mode 100644
index 00000000000000..7ec0bbaa4b418b
--- /dev/null
+++ b/docs/development/core/public/kibana-plugin-core-public.appmeta.searchdeeplinks.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [AppMeta](./kibana-plugin-core-public.appmeta.md) &gt; [searchDeepLinks](./kibana-plugin-core-public.appmeta.searchdeeplinks.md)
+
+## AppMeta.searchDeepLinks property
+
+Array of links that represent secondary in-app locations for the app.
+
+<b>Signature:</b>
+
+```typescript
+searchDeepLinks?: AppSearchDeepLink[];
+```
diff --git a/docs/development/core/public/kibana-plugin-core-public.appsearchdeeplink.md b/docs/development/core/public/kibana-plugin-core-public.appsearchdeeplink.md
index 7e5ccf7d06ed19..29aad675fb105d 100644
--- a/docs/development/core/public/kibana-plugin-core-public.appsearchdeeplink.md
+++ b/docs/development/core/public/kibana-plugin-core-public.appsearchdeeplink.md
@@ -17,8 +17,10 @@ export declare type AppSearchDeepLink = {
 } & ({
     path: string;
     searchDeepLinks?: AppSearchDeepLink[];
+    keywords?: string[];
 } | {
     path?: string;
     searchDeepLinks: AppSearchDeepLink[];
+    keywords?: string[];
 });
 ```
diff --git a/docs/development/core/public/kibana-plugin-core-public.appupdatablefields.md b/docs/development/core/public/kibana-plugin-core-public.appupdatablefields.md
index b6f404c3d11aa3..55672d9339f615 100644
--- a/docs/development/core/public/kibana-plugin-core-public.appupdatablefields.md
+++ b/docs/development/core/public/kibana-plugin-core-public.appupdatablefields.md
@@ -9,5 +9,5 @@ Defines the list of fields that can be updated via an [AppUpdater](./kibana-plug
 <b>Signature:</b>
 
 ```typescript
-export declare type AppUpdatableFields = Pick<App, 'status' | 'navLinkStatus' | 'tooltip' | 'defaultPath' | 'searchDeepLinks'>;
+export declare type AppUpdatableFields = Pick<App, 'status' | 'navLinkStatus' | 'tooltip' | 'defaultPath' | 'meta'>;
 ```
diff --git a/docs/development/core/public/kibana-plugin-core-public.md b/docs/development/core/public/kibana-plugin-core-public.md
index da19377054499b..7f671d9edcd867 100644
--- a/docs/development/core/public/kibana-plugin-core-public.md
+++ b/docs/development/core/public/kibana-plugin-core-public.md
@@ -37,6 +37,7 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 |  [AppLeaveDefaultAction](./kibana-plugin-core-public.appleavedefaultaction.md) | Action to return from a [AppLeaveHandler](./kibana-plugin-core-public.appleavehandler.md) to execute the default behaviour when leaving the application.<!-- -->See  |
 |  [ApplicationSetup](./kibana-plugin-core-public.applicationsetup.md) |  |
 |  [ApplicationStart](./kibana-plugin-core-public.applicationstart.md) |  |
+|  [AppMeta](./kibana-plugin-core-public.appmeta.md) | Input type for meta data for an application.<!-- -->Meta fields include <code>keywords</code> and <code>searchDeepLinks</code> Keywords is an array of string with which to associate the app, must include at least one unique string as an array. <code>searchDeepLinks</code> is an array of links that represent secondary in-app locations for the app. |
 |  [AppMountContext](./kibana-plugin-core-public.appmountcontext.md) | The context object received when applications are mounted to the DOM. Deprecated, use [CoreSetup.getStartServices](./kibana-plugin-core-public.coresetup.getstartservices.md)<!-- -->. |
 |  [AppMountParameters](./kibana-plugin-core-public.appmountparameters.md) |  |
 |  [Capabilities](./kibana-plugin-core-public.capabilities.md) | The read-only set of capabilities available for the current UI session. Capabilities are simple key-value pairs of (string, boolean), where the string denotes the capability ID, and the boolean is a flag indicating if the capability is enabled or disabled. |
@@ -164,6 +165,7 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 |  [PluginInitializer](./kibana-plugin-core-public.plugininitializer.md) | The <code>plugin</code> export at the root of a plugin's <code>public</code> directory should conform to this interface. |
 |  [PluginOpaqueId](./kibana-plugin-core-public.pluginopaqueid.md) |  |
 |  [PublicAppInfo](./kibana-plugin-core-public.publicappinfo.md) | Public information about a registered [application](./kibana-plugin-core-public.app.md) |
+|  [PublicAppMetaInfo](./kibana-plugin-core-public.publicappmetainfo.md) | Public information about a registered app's [keywords](./kibana-plugin-core-public.appmeta.md) |
 |  [PublicAppSearchDeepLinkInfo](./kibana-plugin-core-public.publicappsearchdeeplinkinfo.md) | Public information about a registered app's [searchDeepLinks](./kibana-plugin-core-public.appsearchdeeplink.md) |
 |  [PublicUiSettingsParams](./kibana-plugin-core-public.publicuisettingsparams.md) | A sub-set of [UiSettingsParams](./kibana-plugin-core-public.uisettingsparams.md) exposed to the client-side. |
 |  [SavedObjectAttribute](./kibana-plugin-core-public.savedobjectattribute.md) | Type definition for a Saved Object attribute value |
diff --git a/docs/development/core/public/kibana-plugin-core-public.publicappinfo.md b/docs/development/core/public/kibana-plugin-core-public.publicappinfo.md
index d56b0ac58cd9b1..9f45a06935fe4c 100644
--- a/docs/development/core/public/kibana-plugin-core-public.publicappinfo.md
+++ b/docs/development/core/public/kibana-plugin-core-public.publicappinfo.md
@@ -9,10 +9,10 @@ Public information about a registered [application](./kibana-plugin-core-public.
 <b>Signature:</b>
 
 ```typescript
-export declare type PublicAppInfo = Omit<App, 'mount' | 'updater$' | 'searchDeepLinks'> & {
+export declare type PublicAppInfo = Omit<App, 'mount' | 'updater$' | 'meta'> & {
     status: AppStatus;
     navLinkStatus: AppNavLinkStatus;
     appRoute: string;
-    searchDeepLinks: PublicAppSearchDeepLinkInfo[];
+    meta: PublicAppMetaInfo;
 };
 ```
diff --git a/docs/development/core/public/kibana-plugin-core-public.publicappmetainfo.md b/docs/development/core/public/kibana-plugin-core-public.publicappmetainfo.md
new file mode 100644
index 00000000000000..3ef0460aec4670
--- /dev/null
+++ b/docs/development/core/public/kibana-plugin-core-public.publicappmetainfo.md
@@ -0,0 +1,16 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [PublicAppMetaInfo](./kibana-plugin-core-public.publicappmetainfo.md)
+
+## PublicAppMetaInfo type
+
+Public information about a registered app's [keywords](./kibana-plugin-core-public.appmeta.md)
+
+<b>Signature:</b>
+
+```typescript
+export declare type PublicAppMetaInfo = Omit<AppMeta, 'keywords' | 'searchDeepLinks'> & {
+    keywords: string[];
+    searchDeepLinks: PublicAppSearchDeepLinkInfo[];
+};
+```
diff --git a/docs/development/core/public/kibana-plugin-core-public.publicappsearchdeeplinkinfo.md b/docs/development/core/public/kibana-plugin-core-public.publicappsearchdeeplinkinfo.md
index 9814f0408d0474..e88cdb7d55edd6 100644
--- a/docs/development/core/public/kibana-plugin-core-public.publicappsearchdeeplinkinfo.md
+++ b/docs/development/core/public/kibana-plugin-core-public.publicappsearchdeeplinkinfo.md
@@ -9,7 +9,8 @@ Public information about a registered app's [searchDeepLinks](./kibana-plugin-co
 <b>Signature:</b>
 
 ```typescript
-export declare type PublicAppSearchDeepLinkInfo = Omit<AppSearchDeepLink, 'searchDeepLinks'> & {
+export declare type PublicAppSearchDeepLinkInfo = Omit<AppSearchDeepLink, 'searchDeepLinks' | 'keywords'> & {
     searchDeepLinks: PublicAppSearchDeepLinkInfo[];
+    keywords: string[];
 };
 ```
diff --git a/src/core/public/application/index.ts b/src/core/public/application/index.ts
index b39aa70c888fec..96d669a7b96f41 100644
--- a/src/core/public/application/index.ts
+++ b/src/core/public/application/index.ts
@@ -31,6 +31,7 @@ export {
   AppNavLinkStatus,
   AppUpdatableFields,
   AppUpdater,
+  AppMeta,
   AppSearchDeepLink,
   ApplicationSetup,
   ApplicationStart,
@@ -41,6 +42,7 @@ export {
   AppLeaveConfirmAction,
   NavigateToAppOptions,
   PublicAppInfo,
+  PublicAppMetaInfo,
   PublicAppSearchDeepLinkInfo,
   // Internal types
   InternalApplicationSetup,
diff --git a/src/core/public/application/types.ts b/src/core/public/application/types.ts
index c161a7f166541b..0a31490ad664c5 100644
--- a/src/core/public/application/types.ts
+++ b/src/core/public/application/types.ts
@@ -83,7 +83,7 @@ export enum AppNavLinkStatus {
  */
 export type AppUpdatableFields = Pick<
   App,
-  'status' | 'navLinkStatus' | 'tooltip' | 'defaultPath' | 'searchDeepLinks'
+  'status' | 'navLinkStatus' | 'tooltip' | 'defaultPath' | 'meta'
 >;
 
 /**
@@ -237,39 +237,76 @@ export interface App<HistoryLocationState = unknown> {
   exactRoute?: boolean;
 
   /**
-   * Array of links that represent secondary in-app locations for the app.
+   * Meta data for an application that represent additional information for the app.
+   * See {@link AppMeta}
    *
    * @remarks
    * Used to populate navigational search results (where available).
-   * Can be updated using the {@link App.updater$} observable. See {@link AppSubLink} for more details.
+   * Can be updated using the {@link App.updater$} observable. See {@link PublicAppSearchDeepLinkInfo} for more details.
    *
    * @example
-   * The `path` property on deep links should not include the application's `appRoute`:
    * ```ts
    * core.application.register({
    *   id: 'my_app',
-   *   title: 'My App',
-   *   searchDeepLinks: [
-   *     { id: 'sub1', title: 'Sub1', path: '/sub1' },
+   *   title: 'Translated title',
+   *   meta: {
+   *     keywords: ['translated keyword1', 'translated keyword2'],
+   *     searchDeepLinks: [
+   *     { id: 'sub1', title: 'Sub1', path: '/sub1', keywords: ['subpath1'] },
    *     {
    *       id: 'sub2',
    *       title: 'Sub2',
    *       searchDeepLinks: [
-   *         { id: 'subsub', title: 'SubSub', path: '/sub2/sub' }
+   *         { id: 'subsub', title: 'SubSub', path: '/sub2/sub', keywords: ['subpath2'] }
    *       ]
    *     }
    *   ],
-   *   mount: () => { ... },
+   *   },
+   *   mount: () => { ... }
    * })
    * ```
-   *
-   * Will produce deep links on these paths:
-   * - `/app/my_app/sub1`
-   * - `/app/my_app/sub2/sub`
    */
+  meta?: AppMeta;
+}
+
+/**
+ * Input type for meta data for an application.
+ *
+ * Meta fields include `keywords` and `searchDeepLinks`
+ * Keywords is an array of string with which to associate the app, must include at least one unique string as an array.
+ * `searchDeepLinks` is an array of links that represent secondary in-app locations for the app.
+ * @public
+ */
+export interface AppMeta {
+  /** Keywords to represent this application */
+  keywords?: string[];
+  /** Array of links that represent secondary in-app locations for the app. */
   searchDeepLinks?: AppSearchDeepLink[];
 }
 
+/**
+ * Public information about a registered app's {@link AppMeta | keywords }
+ *
+ * @public
+ */
+export type PublicAppMetaInfo = Omit<AppMeta, 'keywords' | 'searchDeepLinks'> & {
+  keywords: string[];
+  searchDeepLinks: PublicAppSearchDeepLinkInfo[];
+};
+
+/**
+ * Public information about a registered app's {@link AppSearchDeepLink | searchDeepLinks}
+ *
+ * @public
+ */
+export type PublicAppSearchDeepLinkInfo = Omit<
+  AppSearchDeepLink,
+  'searchDeepLinks' | 'keywords'
+> & {
+  searchDeepLinks: PublicAppSearchDeepLinkInfo[];
+  keywords: string[];
+};
+
 /**
  * Input type for registering secondary in-app locations for an application.
  *
@@ -289,35 +326,30 @@ export type AppSearchDeepLink = {
       path: string;
       /** Optional array of links that are 'underneath' this section in the hierarchy */
       searchDeepLinks?: AppSearchDeepLink[];
+      /** Optional keywords to match with in deep links search for the page at the path */
+      keywords?: string[];
     }
   | {
       /** Optional path to access this section. Omit if this part of the hierarchy does not have a page URL. */
       path?: string;
       /** Array links that are 'underneath' this section in this hierarchy. */
       searchDeepLinks: AppSearchDeepLink[];
+      /** Optional keywords to match with in deep links search. Omit if this part of the hierarchy does not have a page URL. */
+      keywords?: string[];
     }
 );
 
-/**
- * Public information about a registered app's {@link AppSearchDeepLink | searchDeepLinks}
- *
- * @public
- */
-export type PublicAppSearchDeepLinkInfo = Omit<AppSearchDeepLink, 'searchDeepLinks'> & {
-  searchDeepLinks: PublicAppSearchDeepLinkInfo[];
-};
-
 /**
  * Public information about a registered {@link App | application}
  *
  * @public
  */
-export type PublicAppInfo = Omit<App, 'mount' | 'updater$' | 'searchDeepLinks'> & {
+export type PublicAppInfo = Omit<App, 'mount' | 'updater$' | 'meta'> & {
   // remove optional on fields populated with default values
   status: AppStatus;
   navLinkStatus: AppNavLinkStatus;
   appRoute: string;
-  searchDeepLinks: PublicAppSearchDeepLinkInfo[];
+  meta: PublicAppMetaInfo;
 };
 
 /**
diff --git a/src/core/public/application/utils/get_app_info.test.ts b/src/core/public/application/utils/get_app_info.test.ts
index ee0bd4f1eadfaf..ff09a18c8b6550 100644
--- a/src/core/public/application/utils/get_app_info.test.ts
+++ b/src/core/public/application/utils/get_app_info.test.ts
@@ -43,19 +43,24 @@ describe('getAppInfo', () => {
       status: AppStatus.accessible,
       navLinkStatus: AppNavLinkStatus.visible,
       appRoute: `/app/some-id`,
-      searchDeepLinks: [],
+      meta: {
+        keywords: [],
+        searchDeepLinks: [],
+      },
     });
   });
 
   it('populates default values for nested searchDeepLinks', () => {
     const app = createApp({
-      searchDeepLinks: [
-        {
-          id: 'sub-id',
-          title: 'sub-title',
-          searchDeepLinks: [{ id: 'sub-sub-id', title: 'sub-sub-title', path: '/sub-sub' }],
-        },
-      ],
+      meta: {
+        searchDeepLinks: [
+          {
+            id: 'sub-id',
+            title: 'sub-title',
+            searchDeepLinks: [{ id: 'sub-sub-id', title: 'sub-sub-title', path: '/sub-sub' }],
+          },
+        ],
+      },
     });
     const info = getAppInfo(app);
 
@@ -65,20 +70,25 @@ describe('getAppInfo', () => {
       status: AppStatus.accessible,
       navLinkStatus: AppNavLinkStatus.visible,
       appRoute: `/app/some-id`,
-      searchDeepLinks: [
-        {
-          id: 'sub-id',
-          title: 'sub-title',
-          searchDeepLinks: [
-            {
-              id: 'sub-sub-id',
-              title: 'sub-sub-title',
-              path: '/sub-sub',
-              searchDeepLinks: [], // default empty array added
-            },
-          ],
-        },
-      ],
+      meta: {
+        keywords: [],
+        searchDeepLinks: [
+          {
+            id: 'sub-id',
+            title: 'sub-title',
+            keywords: [],
+            searchDeepLinks: [
+              {
+                id: 'sub-sub-id',
+                title: 'sub-sub-title',
+                path: '/sub-sub',
+                keywords: [],
+                searchDeepLinks: [], // default empty array added
+              },
+            ],
+          },
+        ],
+      },
     });
   });
 
@@ -108,4 +118,53 @@ describe('getAppInfo', () => {
       })
     );
   });
+
+  it('adds default meta fields to sublinks when needed', () => {
+    const app = createApp({
+      meta: {
+        searchDeepLinks: [
+          {
+            id: 'sub-id',
+            title: 'sub-title',
+            searchDeepLinks: [
+              {
+                id: 'sub-sub-id',
+                title: 'sub-sub-title',
+                path: '/sub-sub',
+                keywords: ['sub sub'],
+              },
+            ],
+          },
+        ],
+      },
+    });
+    const info = getAppInfo(app);
+
+    expect(info).toEqual({
+      id: 'some-id',
+      title: 'some-title',
+      status: AppStatus.accessible,
+      navLinkStatus: AppNavLinkStatus.visible,
+      appRoute: `/app/some-id`,
+      meta: {
+        keywords: [],
+        searchDeepLinks: [
+          {
+            id: 'sub-id',
+            title: 'sub-title',
+            keywords: [], // default empty array
+            searchDeepLinks: [
+              {
+                id: 'sub-sub-id',
+                title: 'sub-sub-title',
+                path: '/sub-sub',
+                keywords: ['sub sub'],
+                searchDeepLinks: [],
+              },
+            ],
+          },
+        ],
+      },
+    });
+  });
 });
diff --git a/src/core/public/application/utils/get_app_info.ts b/src/core/public/application/utils/get_app_info.ts
index 7316080816da7c..574696c3bd5f2c 100644
--- a/src/core/public/application/utils/get_app_info.ts
+++ b/src/core/public/application/utils/get_app_info.ts
@@ -39,7 +39,10 @@ export function getAppInfo(app: App): PublicAppInfo {
     status: app.status!,
     navLinkStatus,
     appRoute: app.appRoute!,
-    searchDeepLinks: getSearchDeepLinkInfos(app, app.searchDeepLinks),
+    meta: {
+      keywords: app.meta?.keywords ?? [],
+      searchDeepLinks: getSearchDeepLinkInfos(app, app.meta?.searchDeepLinks),
+    },
   };
 }
 
@@ -57,6 +60,7 @@ function getSearchDeepLinkInfos(
         id: rawDeepLink.id,
         title: rawDeepLink.title,
         path: rawDeepLink.path,
+        keywords: rawDeepLink.keywords ?? [],
         searchDeepLinks: getSearchDeepLinkInfos(app, rawDeepLink.searchDeepLinks),
       };
     }
diff --git a/src/core/public/chrome/nav_links/to_nav_link.test.ts b/src/core/public/chrome/nav_links/to_nav_link.test.ts
index 606370c5afd0a9..44feb133cfcec0 100644
--- a/src/core/public/chrome/nav_links/to_nav_link.test.ts
+++ b/src/core/public/chrome/nav_links/to_nav_link.test.ts
@@ -28,7 +28,10 @@ const app = (props: Partial<PublicAppInfo> = {}): PublicAppInfo => ({
   status: AppStatus.accessible,
   navLinkStatus: AppNavLinkStatus.default,
   appRoute: `/app/some-id`,
-  searchDeepLinks: [],
+  meta: {
+    keywords: [],
+    searchDeepLinks: [],
+  },
   ...props,
 });
 
diff --git a/src/core/public/index.ts b/src/core/public/index.ts
index 2e1238df350e05..51375072d3e5a8 100644
--- a/src/core/public/index.ts
+++ b/src/core/public/index.ts
@@ -108,10 +108,12 @@ export {
   AppLeaveConfirmAction,
   AppStatus,
   AppNavLinkStatus,
+  AppMeta,
   AppUpdatableFields,
   AppUpdater,
   AppSearchDeepLink,
   PublicAppInfo,
+  PublicAppMetaInfo,
   PublicAppSearchDeepLinkInfo,
   ScopedHistory,
   NavigateToAppOptions,
diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md
index defe43377172c8..0303eb62b64190 100644
--- a/src/core/public/public.api.md
+++ b/src/core/public/public.api.md
@@ -56,11 +56,10 @@ export interface App<HistoryLocationState = unknown> {
     exactRoute?: boolean;
     icon?: string;
     id: string;
+    meta?: AppMeta;
     mount: AppMount<HistoryLocationState> | AppMountDeprecated<HistoryLocationState>;
     navLinkStatus?: AppNavLinkStatus;
     order?: number;
-    // Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "kibana" does not have an export "AppSubLink"
-    searchDeepLinks?: AppSearchDeepLink[];
     status?: AppStatus;
     title: string;
     tooltip?: string;
@@ -137,6 +136,12 @@ export interface ApplicationStart {
     registerMountContext<T extends keyof AppMountContext>(contextName: T, provider: IContextProvider<AppMountDeprecated, T>): void;
 }
 
+// @public
+export interface AppMeta {
+    keywords?: string[];
+    searchDeepLinks?: AppSearchDeepLink[];
+}
+
 // @public
 export type AppMount<HistoryLocationState = unknown> = (params: AppMountParameters<HistoryLocationState>) => AppUnmount | Promise<AppUnmount>;
 
@@ -186,9 +191,11 @@ export type AppSearchDeepLink = {
 } & ({
     path: string;
     searchDeepLinks?: AppSearchDeepLink[];
+    keywords?: string[];
 } | {
     path?: string;
     searchDeepLinks: AppSearchDeepLink[];
+    keywords?: string[];
 });
 
 // @public
@@ -201,7 +208,7 @@ export enum AppStatus {
 export type AppUnmount = () => void;
 
 // @public
-export type AppUpdatableFields = Pick<App, 'status' | 'navLinkStatus' | 'tooltip' | 'defaultPath' | 'searchDeepLinks'>;
+export type AppUpdatableFields = Pick<App, 'status' | 'navLinkStatus' | 'tooltip' | 'defaultPath' | 'meta'>;
 
 // @public
 export type AppUpdater = (app: App) => Partial<AppUpdatableFields> | undefined;
@@ -1008,16 +1015,23 @@ export interface PluginInitializerContext<ConfigSchema extends object = object>
 export type PluginOpaqueId = symbol;
 
 // @public
-export type PublicAppInfo = Omit<App, 'mount' | 'updater$' | 'searchDeepLinks'> & {
+export type PublicAppInfo = Omit<App, 'mount' | 'updater$' | 'meta'> & {
     status: AppStatus;
     navLinkStatus: AppNavLinkStatus;
     appRoute: string;
+    meta: PublicAppMetaInfo;
+};
+
+// @public
+export type PublicAppMetaInfo = Omit<AppMeta, 'keywords' | 'searchDeepLinks'> & {
+    keywords: string[];
     searchDeepLinks: PublicAppSearchDeepLinkInfo[];
 };
 
 // @public
-export type PublicAppSearchDeepLinkInfo = Omit<AppSearchDeepLink, 'searchDeepLinks'> & {
+export type PublicAppSearchDeepLinkInfo = Omit<AppSearchDeepLink, 'searchDeepLinks' | 'keywords'> & {
     searchDeepLinks: PublicAppSearchDeepLinkInfo[];
+    keywords: string[];
 };
 
 // @public
diff --git a/src/plugins/management/public/plugin.ts b/src/plugins/management/public/plugin.ts
index bf03c649fa6b46..81026927380e0a 100644
--- a/src/plugins/management/public/plugin.ts
+++ b/src/plugins/management/public/plugin.ts
@@ -58,11 +58,12 @@ export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart
         id: mgmtApp.id,
         title: mgmtApp.title,
         path: mgmtApp.basePath,
+        meta: { ...mgmtApp.meta },
       })),
     }));
 
     return {
-      searchDeepLinks: deepLinks,
+      meta: { searchDeepLinks: deepLinks },
     };
   });
 
diff --git a/src/plugins/management/public/utils/management_app.ts b/src/plugins/management/public/utils/management_app.ts
index a27db5522af827..e7fc352ae321b7 100644
--- a/src/plugins/management/public/utils/management_app.ts
+++ b/src/plugins/management/public/utils/management_app.ts
@@ -17,22 +17,28 @@
  * under the License.
  */
 
+import { AppMeta } from 'kibana/public';
 import { CreateManagementItemArgs, Mount } from '../types';
 import { ManagementItem } from './management_item';
 
 export interface RegisterManagementAppArgs extends CreateManagementItemArgs {
   mount: Mount;
   basePath: string;
+  meta?: AppMeta;
 }
 
 export class ManagementApp extends ManagementItem {
   public readonly mount: Mount;
   public readonly basePath: string;
+  public readonly meta: AppMeta;
 
   constructor(args: RegisterManagementAppArgs) {
     super(args);
 
     this.mount = args.mount;
     this.basePath = args.basePath;
+    this.meta = {
+      keywords: args.meta?.keywords || [],
+    };
   }
 }
diff --git a/x-pack/plugins/global_search_providers/public/providers/application.test.ts b/x-pack/plugins/global_search_providers/public/providers/application.test.ts
index dadcf626ace4ad..1e213e1a3a842b 100644
--- a/x-pack/plugins/global_search_providers/public/providers/application.test.ts
+++ b/x-pack/plugins/global_search_providers/public/providers/application.test.ts
@@ -28,7 +28,10 @@ const createApp = (props: Partial<PublicAppInfo> = {}): PublicAppInfo => ({
   status: AppStatus.accessible,
   navLinkStatus: AppNavLinkStatus.visible,
   chromeless: false,
-  searchDeepLinks: [],
+  meta: {
+    keywords: props.meta?.keywords || [],
+    searchDeepLinks: [],
+  },
   ...props,
 });
 
diff --git a/x-pack/plugins/global_search_providers/public/providers/get_app_results.test.ts b/x-pack/plugins/global_search_providers/public/providers/get_app_results.test.ts
index 33fd358f61acac..bc8ea4a9c9649f 100644
--- a/x-pack/plugins/global_search_providers/public/providers/get_app_results.test.ts
+++ b/x-pack/plugins/global_search_providers/public/providers/get_app_results.test.ts
@@ -10,7 +10,13 @@ import {
   PublicAppInfo,
   DEFAULT_APP_CATEGORIES,
 } from 'src/core/public';
-import { AppLink, appToResult, getAppResults, scoreApp } from './get_app_results';
+import {
+  AppLink,
+  appToResult,
+  getAppResults,
+  scoreApp,
+  keywordScoreWeighting,
+} from './get_app_results';
 
 const createApp = (props: Partial<PublicAppInfo> = {}): PublicAppInfo => ({
   id: 'app1',
@@ -19,7 +25,7 @@ const createApp = (props: Partial<PublicAppInfo> = {}): PublicAppInfo => ({
   status: AppStatus.accessible,
   navLinkStatus: AppNavLinkStatus.visible,
   chromeless: false,
-  searchDeepLinks: [],
+  meta: { keywords: [], searchDeepLinks: [] },
   ...props,
 });
 
@@ -27,6 +33,7 @@ const createAppLink = (props: Partial<PublicAppInfo> = {}): AppLink => ({
   id: props.id ?? 'app1',
   path: props.appRoute ?? '/app/app1',
   subLinkTitles: [],
+  keywords: props.meta?.keywords ?? [], // start off with the top level app keywords
   app: createApp(props),
 });
 
@@ -46,17 +53,27 @@ describe('getAppResults', () => {
   it('creates multiple links for apps with searchDeepLinks', () => {
     const apps = [
       createApp({
-        searchDeepLinks: [
-          { id: 'sub1', title: 'Sub1', path: '/sub1', searchDeepLinks: [] },
-          {
-            id: 'sub2',
-            title: 'Sub2',
-            path: '/sub2',
-            searchDeepLinks: [
-              { id: 'sub2sub1', title: 'Sub2Sub1', path: '/sub2/sub1', searchDeepLinks: [] },
-            ],
-          },
-        ],
+        meta: {
+          searchDeepLinks: [
+            { id: 'sub1', title: 'Sub1', path: '/sub1', searchDeepLinks: [], keywords: [] },
+            {
+              id: 'sub2',
+              title: 'Sub2',
+              path: '/sub2',
+              searchDeepLinks: [
+                {
+                  id: 'sub2sub1',
+                  title: 'Sub2Sub1',
+                  path: '/sub2/sub1',
+                  searchDeepLinks: [],
+                  keywords: [],
+                },
+              ],
+              keywords: [],
+            },
+          ],
+          keywords: [],
+        },
       }),
     ];
 
@@ -74,13 +91,65 @@ describe('getAppResults', () => {
   it('only includes searchDeepLinks when search term is non-empty', () => {
     const apps = [
       createApp({
-        searchDeepLinks: [{ id: 'sub1', title: 'Sub1', path: '/sub1', searchDeepLinks: [] }],
+        meta: {
+          searchDeepLinks: [
+            {
+              id: 'sub1',
+              title: 'Sub1',
+              path: '/sub1',
+              searchDeepLinks: [],
+              keywords: [],
+            },
+          ],
+          keywords: [],
+        },
       }),
     ];
 
     expect(getAppResults('', apps).length).toBe(1);
     expect(getAppResults('App 1', apps).length).toBe(2);
   });
+
+  it('retrieves the matching results from keywords', () => {
+    const apps = [
+      createApp({
+        meta: { searchDeepLinks: [], keywords: ['One'] },
+      }),
+    ];
+    const results = getAppResults('One', apps);
+    expect(results.map(({ title }) => title)).toEqual(['App 1']);
+  });
+
+  it('retrieves the matching results from deeplink keywords', () => {
+    const apps = [
+      createApp({
+        meta: {
+          searchDeepLinks: [
+            { id: 'sub1', title: 'Sub1', path: '/sub1', searchDeepLinks: [], keywords: [] },
+            {
+              id: 'sub2',
+              title: 'Sub2',
+              path: '/sub2',
+              searchDeepLinks: [
+                {
+                  id: 'sub2sub1',
+                  title: 'Sub2Sub1',
+                  path: '/sub2/sub1',
+                  searchDeepLinks: [],
+                  keywords: ['TwoOne'],
+                },
+              ],
+              keywords: ['two'],
+            },
+          ],
+          keywords: [],
+        },
+      }),
+    ];
+
+    const results = getAppResults('TwoOne', apps);
+    expect(results.map(({ title }) => title)).toEqual(['App 1 / Sub2 / Sub2Sub1']);
+  });
 });
 
 describe('scoreApp', () => {
@@ -113,6 +182,139 @@ describe('scoreApp', () => {
       expect(scoreApp('1-2-3-4-5', createAppLink({ title: '123456789' }))).toBe(0);
     });
   });
+
+  describe('when the term is included in the keywords but not in the title', () => {
+    it(`returns 100 * ${keywordScoreWeighting} if one of the app meta keywords is an exact match`, () => {
+      expect(
+        scoreApp(
+          'bar',
+          createAppLink({ title: 'foo', meta: { keywords: ['bar'], searchDeepLinks: [] } })
+        )
+      ).toBe(100 * keywordScoreWeighting);
+      expect(
+        scoreApp(
+          'bar',
+          createAppLink({ title: 'foo', meta: { keywords: ['BAR'], searchDeepLinks: [] } })
+        )
+      ).toBe(100 * keywordScoreWeighting);
+    });
+    it(`returns 90 * ${keywordScoreWeighting} if any of the keywords start with the term`, () => {
+      expect(
+        scoreApp(
+          'viz',
+          createAppLink({
+            title: 'Foo',
+            meta: { keywords: ['Vizualize', 'Viz view'], searchDeepLinks: [] },
+          })
+        )
+      ).toBe(90 * keywordScoreWeighting);
+    });
+    it(`returns 75 * ${keywordScoreWeighting} if the term is included in any of the keywords`, () => {
+      expect(
+        scoreApp(
+          'board',
+          createAppLink({
+            title: 'Foo',
+            meta: { keywords: ['dashboard app'], searchDeepLinks: [] },
+          })
+        )
+      ).toBe(75 * keywordScoreWeighting);
+      expect(
+        scoreApp(
+          'shboa',
+          createAppLink({
+            title: 'Foo',
+            meta: { keywords: ['dashboard app'], searchDeepLinks: [] },
+          })
+        )
+      ).toBe(75 * keywordScoreWeighting);
+    });
+  });
+
+  describe('when the term is included in the keywords and the title', () => {
+    it('returns 100 if one of the app meta keywords and the title is an exact match', () => {
+      expect(
+        scoreApp(
+          'home',
+          createAppLink({ title: 'Home', meta: { keywords: ['home'], searchDeepLinks: [] } })
+        )
+      ).toBe(100);
+      expect(
+        scoreApp(
+          'Home',
+          createAppLink({ title: 'Home', meta: { keywords: ['HOME'], searchDeepLinks: [] } })
+        )
+      ).toBe(100);
+    });
+    it('returns 90 if either one of the keywords or the title start with the term', () => {
+      expect(
+        scoreApp(
+          'vis',
+          createAppLink({
+            title: 'Visualize',
+            meta: { keywords: ['Visualise'], searchDeepLinks: [] },
+          })
+        )
+      ).toBe(90);
+    });
+    it('returns 75 if the term is included in the title or any of the keywords', () => {
+      expect(
+        scoreApp(
+          'board',
+          createAppLink({
+            title: 'Dashboard',
+            meta: { keywords: ['dashboard app'], searchDeepLinks: [] },
+          })
+        )
+      ).toBe(75);
+      expect(
+        scoreApp(
+          'shboa',
+          createAppLink({
+            title: 'dashboard',
+            meta: { keywords: ['dashboard app'], searchDeepLinks: [] },
+          })
+        )
+      ).toBe(75);
+    });
+  });
+
+  describe('when the term is not included in the title or the keywords', () => {
+    it('returns the levenshtein ratio if superior or equal to 60', () => {
+      expect(
+        scoreApp(
+          '0123456789',
+          createAppLink({
+            title: '012345',
+            meta: { keywords: ['0345', '9987'], searchDeepLinks: [] },
+          })
+        )
+      ).toBe(60);
+      expect(
+        scoreApp(
+          '--1234567-',
+          createAppLink({
+            title: '123456789',
+            meta: { keywords: ['--345--'], searchDeepLinks: [] },
+          })
+        )
+      ).toBe(60);
+    });
+    it('returns 0 if the levenshtein ratio is inferior to 60', () => {
+      expect(
+        scoreApp(
+          '0123456789',
+          createAppLink({ title: '12345', meta: { keywords: ['12', '34'], searchDeepLinks: [] } })
+        )
+      ).toBe(0);
+      expect(
+        scoreApp(
+          '1-2-3-4-5',
+          createAppLink({ title: '123456789', meta: { keywords: ['12-789'], searchDeepLinks: [] } })
+        )
+      ).toBe(0);
+    });
+  });
 });
 
 describe('appToResult', () => {
@@ -166,6 +368,7 @@ describe('appToResult', () => {
       app,
       path: '/sub1',
       subLinkTitles: ['Sub1'],
+      keywords: [],
     };
 
     expect(appToResult(appLink, 42).title).toEqual('App 1 / Sub1');
@@ -178,6 +381,7 @@ describe('appToResult', () => {
       app,
       path: '/sub1',
       subLinkTitles: ['Sub1'],
+      keywords: [],
     };
 
     expect(appToResult(appLink, 42).title).toEqual('Sub1');
diff --git a/x-pack/plugins/global_search_providers/public/providers/get_app_results.ts b/x-pack/plugins/global_search_providers/public/providers/get_app_results.ts
index 01e6e87f30c94d..c3b093aad8438c 100644
--- a/x-pack/plugins/global_search_providers/public/providers/get_app_results.ts
+++ b/x-pack/plugins/global_search_providers/public/providers/get_app_results.ts
@@ -14,8 +14,12 @@ export interface AppLink {
   app: PublicAppInfo;
   subLinkTitles: string[];
   path: string;
+  keywords: string[];
 }
 
+/** weighting factor for scoring keywords */
+export const keywordScoreWeighting = 0.8;
+
 export const getAppResults = (
   term: string,
   apps: PublicAppInfo[]
@@ -26,7 +30,15 @@ export const getAppResults = (
       .flatMap((app) =>
         term.length > 0
           ? flattenDeepLinks(app)
-          : [{ id: app.id, app, path: app.appRoute, subLinkTitles: [] }]
+          : [
+              {
+                id: app.id,
+                app,
+                path: app.appRoute,
+                subLinkTitles: [],
+                keywords: app.meta?.keywords ?? [],
+              },
+            ]
       )
       .map((appLink) => ({
         appLink,
@@ -40,9 +52,20 @@ export const getAppResults = (
 export const scoreApp = (term: string, appLink: AppLink): number => {
   term = term.toLowerCase();
   const title = [appLink.app.title, ...appLink.subLinkTitles].join(' ').toLowerCase();
+  const appScoreByTerms = scoreAppByTerms(term, title);
+
+  const keywords = [
+    ...appLink.app.meta.keywords.map((keyword) => keyword.toLowerCase()),
+    ...appLink.keywords.map((keyword) => keyword.toLowerCase()),
+  ];
+  const appScoreByKeywords = scoreAppByKeywords(term, keywords);
+
+  return Math.max(appScoreByTerms, appScoreByKeywords * keywordScoreWeighting);
+};
 
-  // shortcuts to avoid calculating the distance when there is an exact match somewhere.
+const scoreAppByTerms = (term: string, title: string): number => {
   if (title === term) {
+    // shortcuts to avoid calculating the distance when there is an exact match somewhere.
     return 100;
   }
   if (title.startsWith(term)) {
@@ -62,6 +85,13 @@ export const scoreApp = (term: string, appLink: AppLink): number => {
   return 0;
 };
 
+const scoreAppByKeywords = (term: string, keywords: string[]): number => {
+  const scores = keywords.map((keyword) => {
+    return scoreAppByTerms(term, keyword);
+  });
+  return Math.max(...scores);
+};
+
 export const appToResult = (appLink: AppLink, score: number): GlobalSearchProviderResult => {
   const titleParts =
     // Stack Management app should not include the app title in the concatenated link label
@@ -95,19 +125,20 @@ const flattenDeepLinks = (
         app,
         path: app.appRoute,
         subLinkTitles: [],
+        keywords: app.meta?.keywords ?? [],
       },
-      ...app.searchDeepLinks.flatMap((appDeepLink) => flattenDeepLinks(app, appDeepLink)),
+      ...app.meta.searchDeepLinks.flatMap((appDeepLink) => flattenDeepLinks(app, appDeepLink)),
     ];
   }
-
   return [
     ...(deepLink.path
       ? [
           {
             id: `${app.id}-${deepLink.id}`,
             app,
-            subLinkTitles: [deepLink.title],
             path: `${app.appRoute}${deepLink.path}`,
+            subLinkTitles: [deepLink.title],
+            keywords: [...(deepLink.keywords ?? [])],
           },
         ]
       : []),
@@ -117,6 +148,8 @@ const flattenDeepLinks = (
         ...deepAppLink,
         // shift current sublink title into array of sub-sublink titles
         subLinkTitles: [deepLink.title, ...deepAppLink.subLinkTitles],
+        // combine current sublink keywords into array of sub-link keywords
+        keywords: [...deepLink.keywords, ...deepAppLink.keywords],
       })),
   ];
 };

From de0aceb4fb3bd296081a6ad950880af1646b830c Mon Sep 17 00:00:00 2001
From: Lisa Cawley <lcawley@elastic.co>
Date: Fri, 18 Dec 2020 07:12:31 -0800
Subject: [PATCH 16/75] [ML] Adds documentation links in the help menu for
 machine learning (#85366)

---
 .../components/help_menu/help_menu.tsx        | 36 +++++++++++++++++++
 .../components/help_menu/index.tsx            |  7 ++++
 .../application/overview/overview_page.tsx    |  7 ++++
 3 files changed, 50 insertions(+)
 create mode 100644 x-pack/plugins/ml/public/application/components/help_menu/help_menu.tsx
 create mode 100644 x-pack/plugins/ml/public/application/components/help_menu/index.tsx

diff --git a/x-pack/plugins/ml/public/application/components/help_menu/help_menu.tsx b/x-pack/plugins/ml/public/application/components/help_menu/help_menu.tsx
new file mode 100644
index 00000000000000..5cf95c773ef8c3
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/help_menu/help_menu.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC, useEffect } from 'react';
+import { i18n } from '@kbn/i18n';
+import { useMlKibana } from '../../contexts/kibana';
+
+interface HelpMenuProps {
+  docLink: string;
+}
+
+// Component for adding a documentation link to the help menu
+export const HelpMenu: FC<HelpMenuProps> = React.memo(({ docLink }) => {
+  const { chrome } = useMlKibana().services;
+
+  useEffect(() => {
+    chrome.setHelpExtension({
+      appName: i18n.translate('xpack.ml.chrome.help.appName', {
+        defaultMessage: 'Machine Learning',
+      }),
+      links: [
+        {
+          href: docLink,
+          linkType: 'documentation',
+        },
+      ],
+    });
+  }, []);
+
+  return null;
+});
+
+HelpMenu.displayName = 'HelpMenu';
diff --git a/x-pack/plugins/ml/public/application/components/help_menu/index.tsx b/x-pack/plugins/ml/public/application/components/help_menu/index.tsx
new file mode 100644
index 00000000000000..47682169c51e03
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/help_menu/index.tsx
@@ -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 { HelpMenu } from './help_menu';
diff --git a/x-pack/plugins/ml/public/application/overview/overview_page.tsx b/x-pack/plugins/ml/public/application/overview/overview_page.tsx
index 1e8b0573813628..bf293ee38ea1a1 100644
--- a/x-pack/plugins/ml/public/application/overview/overview_page.tsx
+++ b/x-pack/plugins/ml/public/application/overview/overview_page.tsx
@@ -14,6 +14,8 @@ import { OverviewContent } from './components/content';
 import { NodeAvailableWarning } from '../components/node_available_warning';
 import { SavedObjectsWarning } from '../components/saved_objects_warning';
 import { UpgradeWarning } from '../components/upgrade';
+import { HelpMenu } from '../components/help_menu';
+import { useMlKibana } from '../contexts/kibana';
 
 export const OverviewPage: FC = () => {
   const disableCreateAnomalyDetectionJob = !checkPermission('canCreateJob') || !mlNodesAvailable();
@@ -21,6 +23,10 @@ export const OverviewPage: FC = () => {
     !mlNodesAvailable() ||
     !checkPermission('canCreateDataFrameAnalytics') ||
     !checkPermission('canStartStopDataFrameAnalytics');
+  const {
+    services: { docLinks },
+  } = useMlKibana();
+  const helpLink = docLinks.links.ml.guide;
   return (
     <Fragment>
       <NavigationMenu tabId="overview" />
@@ -39,6 +45,7 @@ export const OverviewPage: FC = () => {
           </EuiFlexGroup>
         </EuiPageBody>
       </EuiPage>
+      <HelpMenu docLink={helpLink} />
     </Fragment>
   );
 };

From e65c533d10fff360be06dfd5cfa810863a24216c Mon Sep 17 00:00:00 2001
From: Thom Heymann <190132+thomheymann@users.noreply.github.com>
Date: Fri, 18 Dec 2020 15:29:35 +0000
Subject: [PATCH 17/75] Add audit events for spaces (#86343)

* Add audit events for spaces

* fix eslint error
---
 docs/user/security/audit-logging.asciidoc     |  58 ++++--
 .../server/audit/audit_events.test.ts         |  87 +++++++++
 .../security/server/audit/audit_events.ts     |  74 ++++++-
 x-pack/plugins/security/server/audit/index.ts |   2 +
 .../secure_spaces_client_wrapper.test.ts      | 183 +++++++++++++++---
 .../spaces/secure_spaces_client_wrapper.ts    | 152 ++++++++++++---
 .../server/spaces/setup_spaces_client.test.ts |  18 ++
 .../server/spaces/setup_spaces_client.ts      |   8 +-
 8 files changed, 501 insertions(+), 81 deletions(-)

diff --git a/docs/user/security/audit-logging.asciidoc b/docs/user/security/audit-logging.asciidoc
index 4b3512ae3056b5..7facde28e956f9 100644
--- a/docs/user/security/audit-logging.asciidoc
+++ b/docs/user/security/audit-logging.asciidoc
@@ -58,7 +58,6 @@ authorization checks have passed, but before the response from {es} is received.
 Refer to the corresponding {es} logs for potential write errors.
 ============================================================================
 
-
 [cols="3*<"]
 |======
 3+a|
@@ -89,9 +88,12 @@ Refer to the corresponding {es} logs for potential write errors.
 | `failure` | User is not authorized to create a connector.
 
 .2+| `alert_create`
-| `unknown` | User is creating an alert rule.
-| `failure` | User is not authorized to create an alert rule.
+| `unknown` | User is creating an alert.
+| `failure` | User is not authorized to create an alert.
 
+.2+| `space_create`
+| `unknown` | User is creating a space.
+| `failure` | User is not authorized to create a space.
 
 3+a|
 ====== Type: change
@@ -121,28 +123,28 @@ Refer to the corresponding {es} logs for potential write errors.
 | `failure` | User is not authorized to update a connector.
 
 .2+| `alert_update`
-| `unknown` | User is updating an alert rule.
-| `failure` | User is not authorized to update an alert rule.
+| `unknown` | User is updating an alert.
+| `failure` | User is not authorized to update an alert.
 
 .2+| `alert_update_api_key`
-| `unknown` | User is updating the API key of an alert rule.
-| `failure` | User is not authorized to update the API key of an alert rule.
+| `unknown` | User is updating the API key of an alert.
+| `failure` | User is not authorized to update the API key of an alert.
 
 .2+| `alert_enable`
-| `unknown` | User is enabling an alert rule.
-| `failure` | User is not authorized to enable an alert rule.
+| `unknown` | User is enabling an alert.
+| `failure` | User is not authorized to enable an alert.
 
 .2+| `alert_disable`
-| `unknown` | User is disabling an alert rule.
-| `failure` | User is not authorized to disable an alert rule.
+| `unknown` | User is disabling an alert.
+| `failure` | User is not authorized to disable an alert.
 
 .2+| `alert_mute`
-| `unknown` | User is muting an alert rule.
-| `failure` | User is not authorized to mute an alert rule.
+| `unknown` | User is muting an alert.
+| `failure` | User is not authorized to mute an alert.
 
 .2+| `alert_unmute`
-| `unknown` | User is unmuting an alert rule.
-| `failure` | User is not authorized to unmute an alert rule.
+| `unknown` | User is unmuting an alert.
+| `failure` | User is not authorized to unmute an alert.
 
 .2+| `alert_instance_mute`
 | `unknown` | User is muting an alert instance.
@@ -152,6 +154,9 @@ Refer to the corresponding {es} logs for potential write errors.
 | `unknown` | User is unmuting an alert instance.
 | `failure` | User is not authorized to unmute an alert instance.
 
+.2+| `space_update`
+| `unknown` | User is updating a space.
+| `failure` | User is not authorized to update a space.
 
 3+a|
 ====== Type: deletion
@@ -169,8 +174,12 @@ Refer to the corresponding {es} logs for potential write errors.
 | `failure` | User is not authorized to delete a connector.
 
 .2+| `alert_delete`
-| `unknown` | User is deleting an alert rule.
-| `failure` | User is not authorized to delete an alert rule.
+| `unknown` | User is deleting an alert.
+| `failure` | User is not authorized to delete an alert.
+
+.2+| `space_delete`
+| `unknown` | User is deleting a space.
+| `failure` | User is not authorized to delete a space.
 
 3+a|
 ====== Type: access
@@ -196,13 +205,20 @@ Refer to the corresponding {es} logs for potential write errors.
 | `failure` | User is not authorized to search for connectors.
 
 .2+| `alert_get`
-| `success` | User has accessed an alert rule.
-| `failure` | User is not authorized to access an alert rule.
+| `success` | User has accessed an alert.
+| `failure` | User is not authorized to access an alert.
 
 .2+| `alert_find`
-| `success` | User has accessed an alert rule as part of a search operation.
-| `failure` | User is not authorized to search for alert rules.
+| `success` | User has accessed an alert as part of a search operation.
+| `failure` | User is not authorized to search for alerts.
+
+.2+| `space_get`
+| `success` | User has accessed a space.
+| `failure` | User is not authorized to access a space.
 
+.2+| `space_find`
+| `success` | User has accessed a space as part of a search operation.
+| `failure` | User is not authorized to search for spaces.
 
 3+a|
 ===== Category: web
diff --git a/x-pack/plugins/security/server/audit/audit_events.test.ts b/x-pack/plugins/security/server/audit/audit_events.test.ts
index c826bb1d33f999..9bda628df66dcb 100644
--- a/x-pack/plugins/security/server/audit/audit_events.test.ts
+++ b/x-pack/plugins/security/server/audit/audit_events.test.ts
@@ -11,6 +11,8 @@ import {
   savedObjectEvent,
   userLoginEvent,
   httpRequestEvent,
+  spaceAuditEvent,
+  SpaceAuditAction,
 } from './audit_events';
 import { AuthenticationResult } from '../authentication';
 import { mockAuthenticatedUser } from '../../common/model/authenticated_user.mock';
@@ -325,3 +327,88 @@ describe('#httpRequestEvent', () => {
     `);
   });
 });
+
+describe('#spaceAuditEvent', () => {
+  test('creates event with `unknown` outcome', () => {
+    expect(
+      spaceAuditEvent({
+        action: SpaceAuditAction.CREATE,
+        outcome: EventOutcome.UNKNOWN,
+        savedObject: { type: 'space', id: 'SPACE_ID' },
+      })
+    ).toMatchInlineSnapshot(`
+      Object {
+        "error": undefined,
+        "event": Object {
+          "action": "space_create",
+          "category": "database",
+          "outcome": "unknown",
+          "type": "creation",
+        },
+        "kibana": Object {
+          "saved_object": Object {
+            "id": "SPACE_ID",
+            "type": "space",
+          },
+        },
+        "message": "User is creating space [id=SPACE_ID]",
+      }
+    `);
+  });
+
+  test('creates event with `success` outcome', () => {
+    expect(
+      spaceAuditEvent({
+        action: SpaceAuditAction.CREATE,
+        savedObject: { type: 'space', id: 'SPACE_ID' },
+      })
+    ).toMatchInlineSnapshot(`
+      Object {
+        "error": undefined,
+        "event": Object {
+          "action": "space_create",
+          "category": "database",
+          "outcome": "success",
+          "type": "creation",
+        },
+        "kibana": Object {
+          "saved_object": Object {
+            "id": "SPACE_ID",
+            "type": "space",
+          },
+        },
+        "message": "User has created space [id=SPACE_ID]",
+      }
+    `);
+  });
+
+  test('creates event with `failure` outcome', () => {
+    expect(
+      spaceAuditEvent({
+        action: SpaceAuditAction.CREATE,
+        savedObject: { type: 'space', id: 'SPACE_ID' },
+        error: new Error('ERROR_MESSAGE'),
+      })
+    ).toMatchInlineSnapshot(`
+      Object {
+        "error": Object {
+          "code": "Error",
+          "message": "ERROR_MESSAGE",
+        },
+        "event": Object {
+          "action": "space_create",
+          "category": "database",
+          "outcome": "failure",
+          "type": "creation",
+        },
+        "kibana": Object {
+          "saved_object": Object {
+            "id": "SPACE_ID",
+            "type": "space",
+          },
+        },
+        "message": "Failed attempt to create space [id=SPACE_ID]",
+      }
+    `);
+  });
+});
diff --git a/x-pack/plugins/security/server/audit/audit_events.ts b/x-pack/plugins/security/server/audit/audit_events.ts
index 59184562b67ffe..7f0dd39162adff 100644
--- a/x-pack/plugins/security/server/audit/audit_events.ts
+++ b/x-pack/plugins/security/server/audit/audit_events.ts
@@ -20,7 +20,7 @@ export interface AuditEvent {
    * Human readable message describing action, outcome and user.
    *
    * @example
-   * User [jdoe] logged in using basic provider [name=basic1]
+   * Failed attempt to login using basic provider [name=basic1]
    */
   message: string;
   event: {
@@ -208,7 +208,7 @@ export enum SavedObjectAction {
 
 type VerbsTuple = [string, string, string];
 
-const eventVerbs: Record<SavedObjectAction, VerbsTuple> = {
+const savedObjectAuditVerbs: Record<SavedObjectAction, VerbsTuple> = {
   saved_object_create: ['create', 'creating', 'created'],
   saved_object_get: ['access', 'accessing', 'accessed'],
   saved_object_update: ['update', 'updating', 'updated'],
@@ -223,7 +223,7 @@ const eventVerbs: Record<SavedObjectAction, VerbsTuple> = {
   ],
 };
 
-const eventTypes: Record<SavedObjectAction, EventType> = {
+const savedObjectAuditTypes: Record<SavedObjectAction, EventType> = {
   saved_object_create: EventType.CREATION,
   saved_object_get: EventType.ACCESS,
   saved_object_update: EventType.CHANGE,
@@ -252,13 +252,13 @@ export function savedObjectEvent({
   error,
 }: SavedObjectEventParams): AuditEvent | undefined {
   const doc = savedObject ? `${savedObject.type} [id=${savedObject.id}]` : 'saved objects';
-  const [present, progressive, past] = eventVerbs[action];
+  const [present, progressive, past] = savedObjectAuditVerbs[action];
   const message = error
     ? `Failed attempt to ${present} ${doc}`
     : outcome === EventOutcome.UNKNOWN
     ? `User is ${progressive} ${doc}`
     : `User has ${past} ${doc}`;
-  const type = eventTypes[action];
+  const type = savedObjectAuditTypes[action];
 
   if (
     type === EventType.ACCESS &&
@@ -287,3 +287,67 @@ export function savedObjectEvent({
     },
   };
 }
+
+export enum SpaceAuditAction {
+  CREATE = 'space_create',
+  GET = 'space_get',
+  UPDATE = 'space_update',
+  DELETE = 'space_delete',
+  FIND = 'space_find',
+}
+
+const spaceAuditVerbs: Record<SpaceAuditAction, VerbsTuple> = {
+  space_create: ['create', 'creating', 'created'],
+  space_get: ['access', 'accessing', 'accessed'],
+  space_update: ['update', 'updating', 'updated'],
+  space_delete: ['delete', 'deleting', 'deleted'],
+  space_find: ['access', 'accessing', 'accessed'],
+};
+
+const spaceAuditTypes: Record<SpaceAuditAction, EventType> = {
+  space_create: EventType.CREATION,
+  space_get: EventType.ACCESS,
+  space_update: EventType.CHANGE,
+  space_delete: EventType.DELETION,
+  space_find: EventType.ACCESS,
+};
+
+export interface SpacesAuditEventParams {
+  action: SpaceAuditAction;
+  outcome?: EventOutcome;
+  savedObject?: NonNullable<AuditEvent['kibana']>['saved_object'];
+  error?: Error;
+}
+
+export function spaceAuditEvent({
+  action,
+  savedObject,
+  outcome,
+  error,
+}: SpacesAuditEventParams): AuditEvent {
+  const doc = savedObject ? `space [id=${savedObject.id}]` : 'spaces';
+  const [present, progressive, past] = spaceAuditVerbs[action];
+  const message = error
+    ? `Failed attempt to ${present} ${doc}`
+    : outcome === EventOutcome.UNKNOWN
+    ? `User is ${progressive} ${doc}`
+    : `User has ${past} ${doc}`;
+  const type = spaceAuditTypes[action];
+
+  return {
+    message,
+    event: {
+      action,
+      category: EventCategory.DATABASE,
+      type,
+      outcome: outcome ?? (error ? EventOutcome.FAILURE : EventOutcome.SUCCESS),
+    },
+    kibana: {
+      saved_object: savedObject,
+    },
+    error: error && {
+      code: error.name,
+      message: error.message,
+    },
+  };
+}
diff --git a/x-pack/plugins/security/server/audit/index.ts b/x-pack/plugins/security/server/audit/index.ts
index 09f3df8b310e7a..2c79c312beaccd 100644
--- a/x-pack/plugins/security/server/audit/index.ts
+++ b/x-pack/plugins/security/server/audit/index.ts
@@ -13,6 +13,8 @@ export {
   userLoginEvent,
   httpRequestEvent,
   savedObjectEvent,
+  spaceAuditEvent,
   SavedObjectAction,
+  SpaceAuditAction,
 } from './audit_events';
 export { SecurityAuditLogger } from './security_audit_logger';
diff --git a/x-pack/plugins/security/server/spaces/secure_spaces_client_wrapper.test.ts b/x-pack/plugins/security/server/spaces/secure_spaces_client_wrapper.test.ts
index 90ee95f518089f..24f26c38270564 100644
--- a/x-pack/plugins/security/server/spaces/secure_spaces_client_wrapper.test.ts
+++ b/x-pack/plugins/security/server/spaces/secure_spaces_client_wrapper.test.ts
@@ -9,6 +9,7 @@ import { httpServerMock } from '../../../../../src/core/server/mocks';
 import { SecureSpacesClientWrapper } from './secure_spaces_client_wrapper';
 
 import { spacesClientMock } from '../../../spaces/server/mocks';
+import { auditServiceMock } from '../audit/index.mock';
 import { deepFreeze } from '@kbn/std';
 import { Space } from '../../../spaces/server';
 import { authorizationMock } from '../authorization/index.mock';
@@ -17,6 +18,7 @@ import { GetAllSpacesPurpose } from '../../../spaces/common/model/types';
 import { CheckPrivilegesResponse } from '../authorization/types';
 import { LegacySpacesAuditLogger } from './legacy_audit_logger';
 import { SavedObjectsErrorHelpers } from 'src/core/server';
+import { AuditLogger, AuditEvent, EventOutcome, SpaceAuditAction } from '../audit';
 
 interface Opts {
   securityEnabled?: boolean;
@@ -62,12 +64,14 @@ const setup = ({ securityEnabled = false }: Opts = {}) => {
     spacesAuthorizationFailure: jest.fn(),
     spacesAuthorizationSuccess: jest.fn(),
   } as unknown) as jest.Mocked<LegacySpacesAuditLogger>;
+  const auditLogger = auditServiceMock.create().asScoped(httpServerMock.createKibanaRequest());
 
   const request = httpServerMock.createKibanaRequest();
   const wrapper = new SecureSpacesClientWrapper(
     baseClient,
     request,
     authorization,
+    auditLogger,
     legacyAuditLogger
   );
   return {
@@ -75,6 +79,7 @@ const setup = ({ securityEnabled = false }: Opts = {}) => {
     wrapper,
     request,
     baseClient,
+    auditLogger,
     legacyAuditLogger,
   };
 };
@@ -128,6 +133,27 @@ const expectSuccessAuditLogging = (
   expect(auditLogger.spacesAuthorizationFailure).not.toHaveBeenCalled();
 };
 
+const expectAuditEvent = (
+  auditLogger: AuditLogger,
+  action: AuditEvent['event']['action'],
+  outcome: AuditEvent['event']['outcome'],
+  savedObject?: Required<AuditEvent>['kibana']['saved_object']
+) => {
+  expect(auditLogger.log).toHaveBeenCalledWith(
+    expect.objectContaining({
+      event: expect.objectContaining({
+        action,
+        outcome,
+      }),
+      kibana: savedObject
+        ? expect.objectContaining({
+            saved_object: savedObject,
+          })
+        : expect.anything(),
+    })
+  );
+};
+
 describe('SecureSpacesClientWrapper', () => {
   describe('#getAll', () => {
     const savedObjects = [
@@ -158,7 +184,7 @@ describe('SecureSpacesClientWrapper', () => {
     ];
 
     it('delegates to base client when security is not enabled', async () => {
-      const { wrapper, baseClient, authorization, legacyAuditLogger } = setup({
+      const { wrapper, baseClient, authorization, auditLogger, legacyAuditLogger } = setup({
         securityEnabled: false,
       });
 
@@ -168,6 +194,18 @@ describe('SecureSpacesClientWrapper', () => {
       expect(response).toEqual(spaces);
       expectNoAuthorizationCheck(authorization);
       expectNoAuditLogging(legacyAuditLogger);
+      expectAuditEvent(auditLogger, SpaceAuditAction.FIND, EventOutcome.SUCCESS, {
+        type: 'space',
+        id: spaces[0].id,
+      });
+      expectAuditEvent(auditLogger, SpaceAuditAction.FIND, EventOutcome.SUCCESS, {
+        type: 'space',
+        id: spaces[1].id,
+      });
+      expectAuditEvent(auditLogger, SpaceAuditAction.FIND, EventOutcome.SUCCESS, {
+        type: 'space',
+        id: spaces[2].id,
+      });
     });
 
     [
@@ -206,7 +244,14 @@ describe('SecureSpacesClientWrapper', () => {
       describe(`with purpose='${scenario.purpose}'`, () => {
         test(`throws Boom.forbidden when user isn't authorized for any spaces`, async () => {
           const username = 'some-user';
-          const { authorization, wrapper, baseClient, request, legacyAuditLogger } = setup({
+          const {
+            authorization,
+            wrapper,
+            baseClient,
+            request,
+            auditLogger,
+            legacyAuditLogger,
+          } = setup({
             securityEnabled: true,
           });
 
@@ -240,11 +285,19 @@ describe('SecureSpacesClientWrapper', () => {
           );
 
           expectForbiddenAuditLogging(legacyAuditLogger, username, 'getAll');
+          expectAuditEvent(auditLogger, SpaceAuditAction.FIND, EventOutcome.FAILURE);
         });
 
         test(`returns spaces that the user is authorized for`, async () => {
           const username = 'some-user';
-          const { authorization, wrapper, baseClient, request, legacyAuditLogger } = setup({
+          const {
+            authorization,
+            wrapper,
+            baseClient,
+            request,
+            auditLogger,
+            legacyAuditLogger,
+          } = setup({
             securityEnabled: true,
           });
 
@@ -277,6 +330,10 @@ describe('SecureSpacesClientWrapper', () => {
           );
 
           expectSuccessAuditLogging(legacyAuditLogger, username, 'getAll', [spaces[0].id]);
+          expectAuditEvent(auditLogger, SpaceAuditAction.FIND, EventOutcome.SUCCESS, {
+            type: 'space',
+            id: spaces[0].id,
+          });
         });
       });
     });
@@ -284,7 +341,7 @@ describe('SecureSpacesClientWrapper', () => {
 
   describe('#get', () => {
     it('delegates to base client when security is not enabled', async () => {
-      const { wrapper, baseClient, authorization, legacyAuditLogger } = setup({
+      const { wrapper, baseClient, authorization, auditLogger, legacyAuditLogger } = setup({
         securityEnabled: false,
       });
 
@@ -294,15 +351,21 @@ describe('SecureSpacesClientWrapper', () => {
       expect(response).toEqual(spaces[0]);
       expectNoAuthorizationCheck(authorization);
       expectNoAuditLogging(legacyAuditLogger);
+      expectAuditEvent(auditLogger, SpaceAuditAction.GET, EventOutcome.SUCCESS, {
+        type: 'space',
+        id: spaces[0].id,
+      });
     });
 
     test(`throws a forbidden error when unauthorized`, async () => {
       const username = 'some_user';
       const spaceId = 'default';
 
-      const { wrapper, baseClient, authorization, legacyAuditLogger, request } = setup({
-        securityEnabled: true,
-      });
+      const { wrapper, baseClient, authorization, auditLogger, legacyAuditLogger, request } = setup(
+        {
+          securityEnabled: true,
+        }
+      );
 
       const checkPrivileges = jest.fn().mockResolvedValue({
         username,
@@ -329,15 +392,21 @@ describe('SecureSpacesClientWrapper', () => {
       });
 
       expectForbiddenAuditLogging(legacyAuditLogger, username, 'get', spaceId);
+      expectAuditEvent(auditLogger, SpaceAuditAction.GET, EventOutcome.FAILURE, {
+        type: 'space',
+        id: spaces[0].id,
+      });
     });
 
     it('returns the space when authorized', async () => {
       const username = 'some_user';
       const spaceId = 'default';
 
-      const { wrapper, baseClient, authorization, legacyAuditLogger, request } = setup({
-        securityEnabled: true,
-      });
+      const { wrapper, baseClient, authorization, auditLogger, legacyAuditLogger, request } = setup(
+        {
+          securityEnabled: true,
+        }
+      );
 
       const checkPrivileges = jest.fn().mockResolvedValue({
         username,
@@ -363,6 +432,10 @@ describe('SecureSpacesClientWrapper', () => {
       });
 
       expectSuccessAuditLogging(legacyAuditLogger, username, 'get', [spaceId]);
+      expectAuditEvent(auditLogger, SpaceAuditAction.GET, EventOutcome.SUCCESS, {
+        type: 'space',
+        id: spaceId,
+      });
     });
   });
 
@@ -374,7 +447,7 @@ describe('SecureSpacesClientWrapper', () => {
     });
 
     it('delegates to base client when security is not enabled', async () => {
-      const { wrapper, baseClient, authorization, legacyAuditLogger } = setup({
+      const { wrapper, baseClient, authorization, auditLogger, legacyAuditLogger } = setup({
         securityEnabled: false,
       });
 
@@ -384,14 +457,20 @@ describe('SecureSpacesClientWrapper', () => {
       expect(response).toEqual(space);
       expectNoAuthorizationCheck(authorization);
       expectNoAuditLogging(legacyAuditLogger);
+      expectAuditEvent(auditLogger, SpaceAuditAction.CREATE, EventOutcome.UNKNOWN, {
+        type: 'space',
+        id: space.id,
+      });
     });
 
     test(`throws a forbidden error when unauthorized`, async () => {
       const username = 'some_user';
 
-      const { wrapper, baseClient, authorization, legacyAuditLogger, request } = setup({
-        securityEnabled: true,
-      });
+      const { wrapper, baseClient, authorization, auditLogger, legacyAuditLogger, request } = setup(
+        {
+          securityEnabled: true,
+        }
+      );
 
       const checkPrivileges = jest.fn().mockResolvedValue({
         username,
@@ -416,14 +495,20 @@ describe('SecureSpacesClientWrapper', () => {
       });
 
       expectForbiddenAuditLogging(legacyAuditLogger, username, 'create');
+      expectAuditEvent(auditLogger, SpaceAuditAction.CREATE, EventOutcome.FAILURE, {
+        type: 'space',
+        id: space.id,
+      });
     });
 
     it('creates the space when authorized', async () => {
       const username = 'some_user';
 
-      const { wrapper, baseClient, authorization, legacyAuditLogger, request } = setup({
-        securityEnabled: true,
-      });
+      const { wrapper, baseClient, authorization, auditLogger, legacyAuditLogger, request } = setup(
+        {
+          securityEnabled: true,
+        }
+      );
 
       const checkPrivileges = jest.fn().mockResolvedValue({
         username,
@@ -449,6 +534,10 @@ describe('SecureSpacesClientWrapper', () => {
       });
 
       expectSuccessAuditLogging(legacyAuditLogger, username, 'create');
+      expectAuditEvent(auditLogger, SpaceAuditAction.CREATE, EventOutcome.UNKNOWN, {
+        type: 'space',
+        id: space.id,
+      });
     });
   });
 
@@ -460,7 +549,7 @@ describe('SecureSpacesClientWrapper', () => {
     });
 
     it('delegates to base client when security is not enabled', async () => {
-      const { wrapper, baseClient, authorization, legacyAuditLogger } = setup({
+      const { wrapper, baseClient, authorization, auditLogger, legacyAuditLogger } = setup({
         securityEnabled: false,
       });
 
@@ -470,14 +559,20 @@ describe('SecureSpacesClientWrapper', () => {
       expect(response).toEqual(space.id);
       expectNoAuthorizationCheck(authorization);
       expectNoAuditLogging(legacyAuditLogger);
+      expectAuditEvent(auditLogger, SpaceAuditAction.UPDATE, EventOutcome.UNKNOWN, {
+        type: 'space',
+        id: space.id,
+      });
     });
 
     test(`throws a forbidden error when unauthorized`, async () => {
       const username = 'some_user';
 
-      const { wrapper, baseClient, authorization, legacyAuditLogger, request } = setup({
-        securityEnabled: true,
-      });
+      const { wrapper, baseClient, authorization, auditLogger, legacyAuditLogger, request } = setup(
+        {
+          securityEnabled: true,
+        }
+      );
 
       const checkPrivileges = jest.fn().mockResolvedValue({
         username,
@@ -502,14 +597,20 @@ describe('SecureSpacesClientWrapper', () => {
       });
 
       expectForbiddenAuditLogging(legacyAuditLogger, username, 'update');
+      expectAuditEvent(auditLogger, SpaceAuditAction.UPDATE, EventOutcome.FAILURE, {
+        type: 'space',
+        id: space.id,
+      });
     });
 
     it('updates the space when authorized', async () => {
       const username = 'some_user';
 
-      const { wrapper, baseClient, authorization, legacyAuditLogger, request } = setup({
-        securityEnabled: true,
-      });
+      const { wrapper, baseClient, authorization, auditLogger, legacyAuditLogger, request } = setup(
+        {
+          securityEnabled: true,
+        }
+      );
 
       const checkPrivileges = jest.fn().mockResolvedValue({
         username,
@@ -535,6 +636,10 @@ describe('SecureSpacesClientWrapper', () => {
       });
 
       expectSuccessAuditLogging(legacyAuditLogger, username, 'update');
+      expectAuditEvent(auditLogger, SpaceAuditAction.UPDATE, EventOutcome.UNKNOWN, {
+        type: 'space',
+        id: space.id,
+      });
     });
   });
 
@@ -546,7 +651,7 @@ describe('SecureSpacesClientWrapper', () => {
     });
 
     it('delegates to base client when security is not enabled', async () => {
-      const { wrapper, baseClient, authorization, legacyAuditLogger } = setup({
+      const { wrapper, baseClient, authorization, auditLogger, legacyAuditLogger } = setup({
         securityEnabled: false,
       });
 
@@ -555,14 +660,20 @@ describe('SecureSpacesClientWrapper', () => {
       expect(baseClient.delete).toHaveBeenCalledWith(space.id);
       expectNoAuthorizationCheck(authorization);
       expectNoAuditLogging(legacyAuditLogger);
+      expectAuditEvent(auditLogger, SpaceAuditAction.DELETE, EventOutcome.UNKNOWN, {
+        type: 'space',
+        id: space.id,
+      });
     });
 
     test(`throws a forbidden error when unauthorized`, async () => {
       const username = 'some_user';
 
-      const { wrapper, baseClient, authorization, legacyAuditLogger, request } = setup({
-        securityEnabled: true,
-      });
+      const { wrapper, baseClient, authorization, auditLogger, legacyAuditLogger, request } = setup(
+        {
+          securityEnabled: true,
+        }
+      );
 
       const checkPrivileges = jest.fn().mockResolvedValue({
         username,
@@ -587,14 +698,20 @@ describe('SecureSpacesClientWrapper', () => {
       });
 
       expectForbiddenAuditLogging(legacyAuditLogger, username, 'delete');
+      expectAuditEvent(auditLogger, SpaceAuditAction.DELETE, EventOutcome.FAILURE, {
+        type: 'space',
+        id: space.id,
+      });
     });
 
     it('deletes the space when authorized', async () => {
       const username = 'some_user';
 
-      const { wrapper, baseClient, authorization, legacyAuditLogger, request } = setup({
-        securityEnabled: true,
-      });
+      const { wrapper, baseClient, authorization, auditLogger, legacyAuditLogger, request } = setup(
+        {
+          securityEnabled: true,
+        }
+      );
 
       const checkPrivileges = jest.fn().mockResolvedValue({
         username,
@@ -618,6 +735,10 @@ describe('SecureSpacesClientWrapper', () => {
       });
 
       expectSuccessAuditLogging(legacyAuditLogger, username, 'delete');
+      expectAuditEvent(auditLogger, SpaceAuditAction.DELETE, EventOutcome.UNKNOWN, {
+        type: 'space',
+        id: space.id,
+      });
     });
   });
 });
diff --git a/x-pack/plugins/security/server/spaces/secure_spaces_client_wrapper.ts b/x-pack/plugins/security/server/spaces/secure_spaces_client_wrapper.ts
index bd65673422fc16..a0b174d979a8d2 100644
--- a/x-pack/plugins/security/server/spaces/secure_spaces_client_wrapper.ts
+++ b/x-pack/plugins/security/server/spaces/secure_spaces_client_wrapper.ts
@@ -10,6 +10,7 @@ import { GetAllSpacesPurpose, GetSpaceResult } from '../../../spaces/common/mode
 import { Space, ISpacesClient } from '../../../spaces/server';
 import { LegacySpacesAuditLogger } from './legacy_audit_logger';
 import { AuthorizationServiceSetup } from '../authorization';
+import { AuditLogger, EventOutcome, SpaceAuditAction, spaceAuditEvent } from '../audit';
 import { SecurityPluginSetup } from '..';
 
 const PURPOSE_PRIVILEGE_MAP: Record<
@@ -40,6 +41,7 @@ export class SecureSpacesClientWrapper implements ISpacesClient {
     private readonly spacesClient: ISpacesClient,
     private readonly request: KibanaRequest,
     private readonly authorization: AuthorizationServiceSetup,
+    private readonly auditLogger: AuditLogger,
     private readonly legacyAuditLogger: LegacySpacesAuditLogger
   ) {}
 
@@ -50,6 +52,15 @@ export class SecureSpacesClientWrapper implements ISpacesClient {
     const allSpaces = await this.spacesClient.getAll({ purpose, includeAuthorizedPurposes });
 
     if (!this.useRbac) {
+      allSpaces.forEach(({ id }) =>
+        this.auditLogger.log(
+          spaceAuditEvent({
+            action: SpaceAuditAction.FIND,
+            savedObject: { type: 'space', id },
+          })
+        )
+      );
+
       return allSpaces;
     }
 
@@ -108,62 +119,157 @@ export class SecureSpacesClientWrapper implements ISpacesClient {
       .filter(this.filterUnauthorizedSpaceResults);
 
     if (authorizedSpaces.length === 0) {
+      const error = Boom.forbidden();
+
       this.legacyAuditLogger.spacesAuthorizationFailure(username, 'getAll');
-      throw Boom.forbidden(); // Note: there is a catch for this in `SpacesSavedObjectsClient.find`; if we get rid of this error, remove that too
+      this.auditLogger.log(
+        spaceAuditEvent({
+          action: SpaceAuditAction.FIND,
+          error,
+        })
+      );
+
+      throw error; // Note: there is a catch for this in `SpacesSavedObjectsClient.find`; if we get rid of this error, remove that too
     }
 
     const authorizedSpaceIds = authorizedSpaces.map((space) => space.id);
+
     this.legacyAuditLogger.spacesAuthorizationSuccess(username, 'getAll', authorizedSpaceIds);
+    authorizedSpaces.forEach(({ id }) =>
+      this.auditLogger.log(
+        spaceAuditEvent({
+          action: SpaceAuditAction.FIND,
+          savedObject: { type: 'space', id },
+        })
+      )
+    );
 
     return authorizedSpaces;
   }
 
   public async get(id: string) {
     if (this.useRbac) {
-      await this.ensureAuthorizedAtSpace(
-        id,
-        this.authorization.actions.login,
-        'get',
-        `Unauthorized to get ${id} space`
-      );
+      try {
+        await this.ensureAuthorizedAtSpace(
+          id,
+          this.authorization.actions.login,
+          'get',
+          `Unauthorized to get ${id} space`
+        );
+      } catch (error) {
+        this.auditLogger.log(
+          spaceAuditEvent({
+            action: SpaceAuditAction.GET,
+            savedObject: { type: 'space', id },
+            error,
+          })
+        );
+        throw error;
+      }
     }
 
-    return this.spacesClient.get(id);
+    const space = this.spacesClient.get(id);
+
+    this.auditLogger.log(
+      spaceAuditEvent({
+        action: SpaceAuditAction.GET,
+        savedObject: { type: 'space', id },
+      })
+    );
+
+    return space;
   }
 
   public async create(space: Space) {
     if (this.useRbac) {
-      await this.ensureAuthorizedGlobally(
-        this.authorization.actions.space.manage,
-        'create',
-        'Unauthorized to create spaces'
-      );
+      try {
+        await this.ensureAuthorizedGlobally(
+          this.authorization.actions.space.manage,
+          'create',
+          'Unauthorized to create spaces'
+        );
+      } catch (error) {
+        this.auditLogger.log(
+          spaceAuditEvent({
+            action: SpaceAuditAction.CREATE,
+            savedObject: { type: 'space', id: space.id },
+            error,
+          })
+        );
+        throw error;
+      }
     }
 
+    this.auditLogger.log(
+      spaceAuditEvent({
+        action: SpaceAuditAction.CREATE,
+        outcome: EventOutcome.UNKNOWN,
+        savedObject: { type: 'space', id: space.id },
+      })
+    );
+
     return this.spacesClient.create(space);
   }
 
   public async update(id: string, space: Space) {
     if (this.useRbac) {
-      await this.ensureAuthorizedGlobally(
-        this.authorization.actions.space.manage,
-        'update',
-        'Unauthorized to update spaces'
-      );
+      try {
+        await this.ensureAuthorizedGlobally(
+          this.authorization.actions.space.manage,
+          'update',
+          'Unauthorized to update spaces'
+        );
+      } catch (error) {
+        this.auditLogger.log(
+          spaceAuditEvent({
+            action: SpaceAuditAction.UPDATE,
+            savedObject: { type: 'space', id },
+            error,
+          })
+        );
+        throw error;
+      }
     }
 
+    this.auditLogger.log(
+      spaceAuditEvent({
+        action: SpaceAuditAction.UPDATE,
+        outcome: EventOutcome.UNKNOWN,
+        savedObject: { type: 'space', id },
+      })
+    );
+
     return this.spacesClient.update(id, space);
   }
 
   public async delete(id: string) {
     if (this.useRbac) {
-      await this.ensureAuthorizedGlobally(
-        this.authorization.actions.space.manage,
-        'delete',
-        'Unauthorized to delete spaces'
-      );
+      try {
+        await this.ensureAuthorizedGlobally(
+          this.authorization.actions.space.manage,
+          'delete',
+          'Unauthorized to delete spaces'
+        );
+      } catch (error) {
+        this.auditLogger.log(
+          spaceAuditEvent({
+            action: SpaceAuditAction.DELETE,
+            savedObject: { type: 'space', id },
+            error,
+          })
+        );
+        throw error;
+      }
     }
 
+    this.auditLogger.log(
+      spaceAuditEvent({
+        action: SpaceAuditAction.DELETE,
+        outcome: EventOutcome.UNKNOWN,
+        savedObject: { type: 'space', id },
+      })
+    );
+
     return this.spacesClient.delete(id);
   }
 
diff --git a/x-pack/plugins/security/server/spaces/setup_spaces_client.test.ts b/x-pack/plugins/security/server/spaces/setup_spaces_client.test.ts
index ee17f366583ba2..6f0e41a162e588 100644
--- a/x-pack/plugins/security/server/spaces/setup_spaces_client.test.ts
+++ b/x-pack/plugins/security/server/spaces/setup_spaces_client.test.ts
@@ -77,4 +77,22 @@ describe('setupSpacesClient', () => {
     expect(savedObjects.createScopedRepository).toHaveBeenCalledTimes(1);
     expect(savedObjects.createScopedRepository).toHaveBeenCalledWith(request, ['space']);
   });
+
+  it('registers a spaces client wrapper with scoped audit logger', () => {
+    const authz = authorizationMock.create();
+    const audit = auditServiceMock.create();
+    const spaces = spacesMock.createSetup();
+
+    setupSpacesClient({ authz, audit, spaces });
+
+    expect(spaces.spacesClient.registerClientWrapper).toHaveBeenCalledTimes(1);
+    const [wrapper] = spaces.spacesClient.registerClientWrapper.mock.calls[0];
+
+    const request = httpServerMock.createKibanaRequest();
+
+    wrapper(request, {} as any);
+
+    expect(audit.asScoped).toHaveBeenCalledTimes(1);
+    expect(audit.asScoped).toHaveBeenCalledWith(request);
+  });
 });
diff --git a/x-pack/plugins/security/server/spaces/setup_spaces_client.ts b/x-pack/plugins/security/server/spaces/setup_spaces_client.ts
index f9b105d6305162..b285bdb4568af8 100644
--- a/x-pack/plugins/security/server/spaces/setup_spaces_client.ts
+++ b/x-pack/plugins/security/server/spaces/setup_spaces_client.ts
@@ -33,6 +33,12 @@ export const setupSpacesClient = ({ audit, authz, spaces }: Deps) => {
 
   spacesClient.registerClientWrapper(
     (request, baseClient) =>
-      new SecureSpacesClientWrapper(baseClient, request, authz, spacesAuditLogger)
+      new SecureSpacesClientWrapper(
+        baseClient,
+        request,
+        authz,
+        audit.asScoped(request),
+        spacesAuditLogger
+      )
   );
 };

From 899f4dd2f845fd7977cc3a2895b01d6ab35c0544 Mon Sep 17 00:00:00 2001
From: Dmitry <dzmitry.lemechko@elastic.co>
Date: Fri, 18 Dec 2020 16:46:34 +0100
Subject: [PATCH 18/75] [coverage] Improve stability and report stats (#86449)

* improve reporting

* ignore failing tests
---
 packages/kbn-test/jest-preset.js                          | 2 +-
 src/dev/code_coverage/nyc_config/nyc.functional.config.js | 2 +-
 test/scripts/jenkins_unit.sh                              | 2 +-
 test/scripts/jenkins_xpack.sh                             | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/kbn-test/jest-preset.js b/packages/kbn-test/jest-preset.js
index 89ed60909aa556..55514da3e231f5 100644
--- a/packages/kbn-test/jest-preset.js
+++ b/packages/kbn-test/jest-preset.js
@@ -111,7 +111,7 @@ module.exports = {
   // An array of regexp pattern strings that are matched against all source file paths, matched files to include/exclude for code coverage
   collectCoverageFrom: [
     '**/*.{js,mjs,jsx,ts,tsx}',
-    '!**/{__test__,__snapshots__,__examples__,mocks,tests,test_helpers,integration_tests,types}/**/*',
+    '!**/{__test__,__snapshots__,__examples__,*mock*,tests,test_helpers,integration_tests,types}/**/*',
     '!**/*mock*.ts',
     '!**/*.test.ts',
     '!**/*.d.ts',
diff --git a/src/dev/code_coverage/nyc_config/nyc.functional.config.js b/src/dev/code_coverage/nyc_config/nyc.functional.config.js
index 20d266ab9e2c3f..9c025c6a98458c 100644
--- a/src/dev/code_coverage/nyc_config/nyc.functional.config.js
+++ b/src/dev/code_coverage/nyc_config/nyc.functional.config.js
@@ -18,7 +18,7 @@
  */
 
 const defaultExclude = require('@istanbuljs/schema/default-exclude');
-const extraExclude = ['data/optimize/**', 'src/core/server/**', '**/test/**'];
+const extraExclude = ['data/optimize/**', 'src/core/server/**', '**/{test, types}/**/*'];
 const path = require('path');
 
 module.exports = {
diff --git a/test/scripts/jenkins_unit.sh b/test/scripts/jenkins_unit.sh
index 956468d23a59f4..7384cec36b2778 100755
--- a/test/scripts/jenkins_unit.sh
+++ b/test/scripts/jenkins_unit.sh
@@ -35,7 +35,7 @@ if [[ -z "$CODE_COVERAGE" ]] ; then
   ./test/scripts/checks/test_hardening.sh
 else
   echo " -> Running jest tests with coverage"
-  node scripts/jest --ci --verbose --coverage --config jest.config.oss.js
+  node scripts/jest --ci --verbose --coverage --config jest.config.oss.js || true;
   rename_coverage_file "oss"
   echo ""
   echo ""
diff --git a/test/scripts/jenkins_xpack.sh b/test/scripts/jenkins_xpack.sh
index c4604109fe7175..66fb5ae5370bc7 100755
--- a/test/scripts/jenkins_xpack.sh
+++ b/test/scripts/jenkins_xpack.sh
@@ -13,7 +13,7 @@ else
   node ./x-pack/plugins/canvas/scripts/shareable_runtime
   echo " -> Running jest tests with coverage"
   cd x-pack
-  node --max-old-space-size=6144 scripts/jest --ci --verbose --maxWorkers=5 --coverage --config jest.config.js
+  node --max-old-space-size=6144 scripts/jest --ci --verbose --maxWorkers=5 --coverage --config jest.config.js || true;
   # rename file in order to be unique one
   test -f ../target/kibana-coverage/jest/coverage-final.json \
     && mv ../target/kibana-coverage/jest/coverage-final.json \

From f8f17116889f5fcb2f8766d0dceafd1d8b7f231c Mon Sep 17 00:00:00 2001
From: Steph Milovic <stephanie.milovic@elastic.co>
Date: Fri, 18 Dec 2020 09:23:09 -0700
Subject: [PATCH 19/75] [Security Solution] [Cases] Follow up jest tests for
 #84587 (#86231)

---
 .../case/common/api/connectors/mappings.ts    |   2 +
 .../client/configure/get_fields.test.ts       |  60 ++
 .../client/configure/get_mappings.test.ts     |  55 ++
 .../case/server/client/configure/mock.ts      | 625 ++++++++++++++++++
 .../server/client/configure/utils.test.ts     | 545 +--------------
 .../api/__fixtures__/mock_saved_objects.ts    |  24 +-
 .../routes/api/__mocks__/request_responses.ts |  24 +-
 .../api/cases/configure/get_configure.test.ts |   7 +-
 .../routes/api/cases/configure/get_fields.ts  |  70 --
 .../server/routes/api/cases/configure/mock.ts |  35 +-
 .../configure/post_push_to_service.test.ts    | 104 +++
 .../cases/configure/post_push_to_service.ts   |   2 +-
 .../routes/api/cases/configure/utils.test.ts  | 174 ++++-
 .../routes/api/cases/configure/utils.ts       |   6 +-
 .../plugins/case/server/routes/api/index.ts   |   2 -
 .../public/cases/containers/api.ts            |  19 -
 .../cases/containers/use_get_fields.tsx       |  82 ---
 17 files changed, 1087 insertions(+), 749 deletions(-)
 create mode 100644 x-pack/plugins/case/server/client/configure/get_fields.test.ts
 create mode 100644 x-pack/plugins/case/server/client/configure/get_mappings.test.ts
 create mode 100644 x-pack/plugins/case/server/client/configure/mock.ts
 delete mode 100644 x-pack/plugins/case/server/routes/api/cases/configure/get_fields.ts
 create mode 100644 x-pack/plugins/case/server/routes/api/cases/configure/post_push_to_service.test.ts
 delete mode 100644 x-pack/plugins/security_solution/public/cases/containers/use_get_fields.tsx

diff --git a/x-pack/plugins/case/common/api/connectors/mappings.ts b/x-pack/plugins/case/common/api/connectors/mappings.ts
index 3e8baf0af28343..b91f9d69e85e26 100644
--- a/x-pack/plugins/case/common/api/connectors/mappings.ts
+++ b/x-pack/plugins/case/common/api/connectors/mappings.ts
@@ -180,6 +180,8 @@ export const PostPushRequestRt = rt.type({
   params: ServiceConnectorCaseParamsRt,
 });
 
+export type PostPushRequest = rt.TypeOf<typeof PostPushRequestRt>;
+
 export interface SimpleComment {
   comment: string;
   commentId: string;
diff --git a/x-pack/plugins/case/server/client/configure/get_fields.test.ts b/x-pack/plugins/case/server/client/configure/get_fields.test.ts
new file mode 100644
index 00000000000000..b465d916b2292e
--- /dev/null
+++ b/x-pack/plugins/case/server/client/configure/get_fields.test.ts
@@ -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 { ConnectorTypes } from '../../../common/api';
+
+import { createMockSavedObjectsRepository, mockCaseMappings } from '../../routes/api/__fixtures__';
+import { createCaseClientWithMockSavedObjectsClient } from '../mocks';
+import { actionsClientMock } from '../../../../actions/server/actions_client.mock';
+import { actionsErrResponse, mappings, mockGetFieldsResponse } from './mock';
+describe('get_fields', () => {
+  const execute = jest.fn().mockReturnValue(mockGetFieldsResponse);
+  const actionsMock = { ...actionsClientMock.create(), execute };
+  beforeEach(async () => {
+    jest.clearAllMocks();
+  });
+
+  describe('happy path', () => {
+    test('it gets fields', async () => {
+      const savedObjectsClient = createMockSavedObjectsRepository({
+        caseMappingsSavedObject: mockCaseMappings,
+      });
+      const caseClient = await createCaseClientWithMockSavedObjectsClient(savedObjectsClient);
+      const res = await caseClient.client.getFields({
+        actionsClient: actionsMock,
+        connectorType: ConnectorTypes.jira,
+        connectorId: '123',
+      });
+      expect(res).toEqual({
+        fields: [
+          { id: 'summary', name: 'Summary', required: true, type: 'text' },
+          { id: 'description', name: 'Description', required: false, type: 'text' },
+        ],
+        defaultMappings: mappings[ConnectorTypes.jira],
+      });
+    });
+  });
+
+  describe('unhappy path', () => {
+    test('it throws error', async () => {
+      const savedObjectsClient = createMockSavedObjectsRepository({
+        caseMappingsSavedObject: mockCaseMappings,
+      });
+      const caseClient = await createCaseClientWithMockSavedObjectsClient(savedObjectsClient);
+      await caseClient.client
+        .getFields({
+          actionsClient: { ...actionsMock, execute: jest.fn().mockReturnValue(actionsErrResponse) },
+          connectorType: ConnectorTypes.jira,
+          connectorId: '123',
+        })
+        .catch((e) => {
+          expect(e).not.toBeNull();
+          expect(e.isBoom).toBe(true);
+          expect(e.output.statusCode).toBe(424);
+        });
+    });
+  });
+});
diff --git a/x-pack/plugins/case/server/client/configure/get_mappings.test.ts b/x-pack/plugins/case/server/client/configure/get_mappings.test.ts
new file mode 100644
index 00000000000000..e68db5cde940bb
--- /dev/null
+++ b/x-pack/plugins/case/server/client/configure/get_mappings.test.ts
@@ -0,0 +1,55 @@
+/*
+ * 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 { ConnectorTypes } from '../../../common/api';
+
+import { createMockSavedObjectsRepository, mockCaseMappings } from '../../routes/api/__fixtures__';
+import { createCaseClientWithMockSavedObjectsClient } from '../mocks';
+import { actionsClientMock } from '../../../../actions/server/actions_client.mock';
+import { mappings, mockGetFieldsResponse } from './mock';
+
+describe('get_mappings', () => {
+  const execute = jest.fn().mockReturnValue(mockGetFieldsResponse);
+  const actionsMock = { ...actionsClientMock.create(), execute };
+  beforeEach(async () => {
+    jest.restoreAllMocks();
+    const spyOnDate = jest.spyOn(global, 'Date') as jest.SpyInstance<{}, []>;
+    spyOnDate.mockImplementation(() => ({
+      toISOString: jest.fn().mockReturnValue('2019-11-25T21:54:48.952Z'),
+    }));
+  });
+
+  describe('happy path', () => {
+    test('it gets existing mappings', async () => {
+      const savedObjectsClient = createMockSavedObjectsRepository({
+        caseMappingsSavedObject: mockCaseMappings,
+      });
+      const caseClient = await createCaseClientWithMockSavedObjectsClient(savedObjectsClient);
+      const res = await caseClient.client.getMappings({
+        actionsClient: actionsMock,
+        caseClient: caseClient.client,
+        connectorType: ConnectorTypes.jira,
+        connectorId: '123',
+      });
+
+      expect(res).toEqual(mappings[ConnectorTypes.jira]);
+    });
+    test('it creates new mappings', async () => {
+      const savedObjectsClient = createMockSavedObjectsRepository({
+        caseMappingsSavedObject: [],
+      });
+      const caseClient = await createCaseClientWithMockSavedObjectsClient(savedObjectsClient);
+      const res = await caseClient.client.getMappings({
+        actionsClient: actionsMock,
+        caseClient: caseClient.client,
+        connectorType: ConnectorTypes.jira,
+        connectorId: '123',
+      });
+
+      expect(res).toEqual(mappings[ConnectorTypes.jira]);
+    });
+  });
+});
diff --git a/x-pack/plugins/case/server/client/configure/mock.ts b/x-pack/plugins/case/server/client/configure/mock.ts
new file mode 100644
index 00000000000000..bb57755250ba2c
--- /dev/null
+++ b/x-pack/plugins/case/server/client/configure/mock.ts
@@ -0,0 +1,625 @@
+/*
+ * 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 {
+  ConnectorField,
+  ConnectorMappingsAttributes,
+  ConnectorTypes,
+} from '../../../common/api/connectors';
+import {
+  JiraGetFieldsResponse,
+  ResilientGetFieldsResponse,
+  ServiceNowGetFieldsResponse,
+} from './utils.test';
+interface TestMappings {
+  [key: string]: ConnectorMappingsAttributes[];
+}
+export const mappings: TestMappings = {
+  [ConnectorTypes.jira]: [
+    {
+      source: 'title',
+      target: 'summary',
+      action_type: 'overwrite',
+    },
+    {
+      source: 'description',
+      target: 'description',
+      action_type: 'overwrite',
+    },
+    {
+      source: 'comments',
+      target: 'comments',
+      action_type: 'append',
+    },
+  ],
+  [`${ConnectorTypes.jira}-alt`]: [
+    {
+      source: 'title',
+      target: 'title',
+      action_type: 'overwrite',
+    },
+    {
+      source: 'description',
+      target: 'description',
+      action_type: 'overwrite',
+    },
+    {
+      source: 'comments',
+      target: 'comments',
+      action_type: 'append',
+    },
+  ],
+  [ConnectorTypes.resilient]: [
+    {
+      source: 'title',
+      target: 'name',
+      action_type: 'overwrite',
+    },
+    {
+      source: 'description',
+      target: 'description',
+      action_type: 'overwrite',
+    },
+    {
+      source: 'comments',
+      target: 'comments',
+      action_type: 'append',
+    },
+  ],
+  [ConnectorTypes.servicenow]: [
+    {
+      source: 'title',
+      target: 'short_description',
+      action_type: 'overwrite',
+    },
+    {
+      source: 'description',
+      target: 'description',
+      action_type: 'overwrite',
+    },
+    {
+      source: 'comments',
+      target: 'comments',
+      action_type: 'append',
+    },
+  ],
+};
+
+const jiraFields: JiraGetFieldsResponse = {
+  summary: {
+    required: true,
+    allowedValues: [],
+    defaultValue: {},
+    schema: {
+      type: 'string',
+    },
+    name: 'Summary',
+  },
+  issuetype: {
+    required: true,
+    allowedValues: [
+      {
+        self: 'https://siem-kibana.atlassian.net/rest/api/2/issuetype/10023',
+        id: '10023',
+        description: 'A problem or error.',
+        iconUrl:
+          'https://siem-kibana.atlassian.net/secure/viewavatar?size=medium&avatarId=10303&avatarType=issuetype',
+        name: 'Bug',
+        subtask: false,
+        avatarId: 10303,
+      },
+    ],
+    defaultValue: {},
+    schema: {
+      type: 'issuetype',
+    },
+    name: 'Issue Type',
+  },
+  attachment: {
+    required: false,
+    allowedValues: [],
+    defaultValue: {},
+    schema: {
+      type: 'array',
+      items: 'attachment',
+    },
+    name: 'Attachment',
+  },
+  duedate: {
+    required: false,
+    allowedValues: [],
+    defaultValue: {},
+    schema: {
+      type: 'date',
+    },
+    name: 'Due date',
+  },
+  description: {
+    required: false,
+    allowedValues: [],
+    defaultValue: {},
+    schema: {
+      type: 'string',
+    },
+    name: 'Description',
+  },
+  project: {
+    required: true,
+    allowedValues: [
+      {
+        self: 'https://siem-kibana.atlassian.net/rest/api/2/project/10015',
+        id: '10015',
+        key: 'RJ2',
+        name: 'RJ2',
+        projectTypeKey: 'business',
+        simplified: false,
+        avatarUrls: {
+          '48x48':
+            'https://siem-kibana.atlassian.net/secure/projectavatar?pid=10015&avatarId=10412',
+          '24x24':
+            'https://siem-kibana.atlassian.net/secure/projectavatar?size=small&s=small&pid=10015&avatarId=10412',
+          '16x16':
+            'https://siem-kibana.atlassian.net/secure/projectavatar?size=xsmall&s=xsmall&pid=10015&avatarId=10412',
+          '32x32':
+            'https://siem-kibana.atlassian.net/secure/projectavatar?size=medium&s=medium&pid=10015&avatarId=10412',
+        },
+      },
+    ],
+    defaultValue: {},
+    schema: {
+      type: 'project',
+    },
+    name: 'Project',
+  },
+  assignee: {
+    required: false,
+    allowedValues: [],
+    defaultValue: {},
+    schema: {
+      type: 'user',
+    },
+    name: 'Assignee',
+  },
+  labels: {
+    required: false,
+    allowedValues: [],
+    defaultValue: {},
+    schema: {
+      type: 'array',
+      items: 'string',
+    },
+    name: 'Labels',
+  },
+};
+const resilientFields: ResilientGetFieldsResponse = [
+  { input_type: 'text', name: 'addr', read_only: false, text: 'Address' },
+  {
+    input_type: 'boolean',
+    name: 'alberta_health_risk_assessment',
+    read_only: false,
+    text: 'Alberta Health Risk Assessment',
+  },
+  { input_type: 'number', name: 'hard_liability', read_only: true, text: 'Assessed Liability' },
+  { input_type: 'text', name: 'city', read_only: false, text: 'City' },
+  { input_type: 'select', name: 'country', read_only: false, text: 'Country/Region' },
+  { input_type: 'select_owner', name: 'creator_id', read_only: true, text: 'Created By' },
+  { input_type: 'select', name: 'crimestatus_id', read_only: false, text: 'Criminal Activity' },
+  { input_type: 'boolean', name: 'data_encrypted', read_only: false, text: 'Data Encrypted' },
+  { input_type: 'select', name: 'data_format', read_only: false, text: 'Data Format' },
+  { input_type: 'datetimepicker', name: 'end_date', read_only: true, text: 'Date Closed' },
+  { input_type: 'datetimepicker', name: 'create_date', read_only: true, text: 'Date Created' },
+  {
+    input_type: 'datetimepicker',
+    name: 'determined_date',
+    read_only: false,
+    text: 'Date Determined',
+  },
+  {
+    input_type: 'datetimepicker',
+    name: 'discovered_date',
+    read_only: false,
+    required: 'always',
+    text: 'Date Discovered',
+  },
+  { input_type: 'datetimepicker', name: 'start_date', read_only: false, text: 'Date Occurred' },
+  { input_type: 'select', name: 'exposure_dept_id', read_only: false, text: 'Department' },
+  { input_type: 'textarea', name: 'description', read_only: false, text: 'Description' },
+  { input_type: 'boolean', name: 'employee_involved', read_only: false, text: 'Employee Involved' },
+  { input_type: 'boolean', name: 'data_contained', read_only: false, text: 'Exposure Resolved' },
+  { input_type: 'select', name: 'exposure_type_id', read_only: false, text: 'Exposure Type' },
+  {
+    input_type: 'multiselect',
+    name: 'gdpr_breach_circumstances',
+    read_only: false,
+    text: 'GDPR Breach Circumstances',
+  },
+  { input_type: 'select', name: 'gdpr_breach_type', read_only: false, text: 'GDPR Breach Type' },
+  {
+    input_type: 'textarea',
+    name: 'gdpr_breach_type_comment',
+    read_only: false,
+    text: 'GDPR Breach Type Comment',
+  },
+  { input_type: 'select', name: 'gdpr_consequences', read_only: false, text: 'GDPR Consequences' },
+  {
+    input_type: 'textarea',
+    name: 'gdpr_consequences_comment',
+    read_only: false,
+    text: 'GDPR Consequences Comment',
+  },
+  {
+    input_type: 'select',
+    name: 'gdpr_final_assessment',
+    read_only: false,
+    text: 'GDPR Final Assessment',
+  },
+  {
+    input_type: 'textarea',
+    name: 'gdpr_final_assessment_comment',
+    read_only: false,
+    text: 'GDPR Final Assessment Comment',
+  },
+  {
+    input_type: 'select',
+    name: 'gdpr_identification',
+    read_only: false,
+    text: 'GDPR Identification',
+  },
+  {
+    input_type: 'textarea',
+    name: 'gdpr_identification_comment',
+    read_only: false,
+    text: 'GDPR Identification Comment',
+  },
+  {
+    input_type: 'select',
+    name: 'gdpr_personal_data',
+    read_only: false,
+    text: 'GDPR Personal Data',
+  },
+  {
+    input_type: 'textarea',
+    name: 'gdpr_personal_data_comment',
+    read_only: false,
+    text: 'GDPR Personal Data Comment',
+  },
+  {
+    input_type: 'boolean',
+    name: 'gdpr_subsequent_notification',
+    read_only: false,
+    text: 'GDPR Subsequent Notification',
+  },
+  { input_type: 'number', name: 'id', read_only: true, text: 'ID' },
+  { input_type: 'boolean', name: 'impact_likely', read_only: false, text: 'Impact Likely' },
+  {
+    input_type: 'boolean',
+    name: 'ny_impact_likely',
+    read_only: false,
+    text: 'Impact Likely for New York',
+  },
+  {
+    input_type: 'boolean',
+    name: 'or_impact_likely',
+    read_only: false,
+    text: 'Impact Likely for Oregon',
+  },
+  {
+    input_type: 'boolean',
+    name: 'wa_impact_likely',
+    read_only: false,
+    text: 'Impact Likely for Washington',
+  },
+  { input_type: 'boolean', name: 'confirmed', read_only: false, text: 'Incident Disposition' },
+  { input_type: 'multiselect', name: 'incident_type_ids', read_only: false, text: 'Incident Type' },
+  {
+    input_type: 'text',
+    name: 'exposure_individual_name',
+    read_only: false,
+    text: 'Individual Name',
+  },
+  {
+    input_type: 'select',
+    name: 'harmstatus_id',
+    read_only: false,
+    text: 'Is harm/risk/misuse foreseeable?',
+  },
+  { input_type: 'text', name: 'jurisdiction_name', read_only: false, text: 'Jurisdiction' },
+  {
+    input_type: 'datetimepicker',
+    name: 'inc_last_modified_date',
+    read_only: true,
+    text: 'Last Modified',
+  },
+  {
+    input_type: 'multiselect',
+    name: 'gdpr_lawful_data_processing_categories',
+    read_only: false,
+    text: 'Lawful Data Processing Categories',
+  },
+  { input_type: 'multiselect_members', name: 'members', read_only: false, text: 'Members' },
+  { input_type: 'text', name: 'name', read_only: false, required: 'always', text: 'Name' },
+  { input_type: 'boolean', name: 'negative_pr_likely', read_only: false, text: 'Negative PR' },
+  { input_type: 'datetimepicker', name: 'due_date', read_only: true, text: 'Next Due Date' },
+  {
+    input_type: 'multiselect',
+    name: 'nist_attack_vectors',
+    read_only: false,
+    text: 'NIST Attack Vectors',
+  },
+  { input_type: 'select', name: 'org_handle', read_only: true, text: 'Organization' },
+  { input_type: 'select_owner', name: 'owner_id', read_only: false, text: 'Owner' },
+  { input_type: 'select', name: 'phase_id', read_only: true, text: 'Phase' },
+  {
+    input_type: 'select',
+    name: 'pipeda_other_factors',
+    read_only: false,
+    text: 'PIPEDA Other Factors',
+  },
+  {
+    input_type: 'textarea',
+    name: 'pipeda_other_factors_comment',
+    read_only: false,
+    text: 'PIPEDA Other Factors Comment',
+  },
+  {
+    input_type: 'select',
+    name: 'pipeda_overall_assessment',
+    read_only: false,
+    text: 'PIPEDA Overall Assessment',
+  },
+  {
+    input_type: 'textarea',
+    name: 'pipeda_overall_assessment_comment',
+    read_only: false,
+    text: 'PIPEDA Overall Assessment Comment',
+  },
+  {
+    input_type: 'select',
+    name: 'pipeda_probability_of_misuse',
+    read_only: false,
+    text: 'PIPEDA Probability of Misuse',
+  },
+  {
+    input_type: 'textarea',
+    name: 'pipeda_probability_of_misuse_comment',
+    read_only: false,
+    text: 'PIPEDA Probability of Misuse Comment',
+  },
+  {
+    input_type: 'select',
+    name: 'pipeda_sensitivity_of_pi',
+    read_only: false,
+    text: 'PIPEDA Sensitivity of PI',
+  },
+  {
+    input_type: 'textarea',
+    name: 'pipeda_sensitivity_of_pi_comment',
+    read_only: false,
+    text: 'PIPEDA Sensitivity of PI Comment',
+  },
+  { input_type: 'text', name: 'reporter', read_only: false, text: 'Reporting Individual' },
+  {
+    input_type: 'select',
+    name: 'resolution_id',
+    read_only: false,
+    required: 'close',
+    text: 'Resolution',
+  },
+  {
+    input_type: 'textarea',
+    name: 'resolution_summary',
+    read_only: false,
+    required: 'close',
+    text: 'Resolution Summary',
+  },
+  { input_type: 'select', name: 'gdpr_harm_risk', read_only: false, text: 'Risk of Harm' },
+  { input_type: 'select', name: 'severity_code', read_only: false, text: 'Severity' },
+  { input_type: 'boolean', name: 'inc_training', read_only: true, text: 'Simulation' },
+  { input_type: 'multiselect', name: 'data_source_ids', read_only: false, text: 'Source of Data' },
+  { input_type: 'select', name: 'state', read_only: false, text: 'State' },
+  { input_type: 'select', name: 'plan_status', read_only: false, text: 'Status' },
+  { input_type: 'select', name: 'exposure_vendor_id', read_only: false, text: 'Vendor' },
+  {
+    input_type: 'boolean',
+    name: 'data_compromised',
+    read_only: false,
+    text: 'Was personal information or personal data involved?',
+  },
+  {
+    input_type: 'select',
+    name: 'workspace',
+    read_only: false,
+    required: 'always',
+    text: 'Workspace',
+  },
+  { input_type: 'text', name: 'zip', read_only: false, text: 'Zip' },
+];
+const serviceNowFields: ServiceNowGetFieldsResponse = [
+  {
+    column_label: 'Approval',
+    mandatory: 'false',
+    max_length: '40',
+    element: 'approval',
+  },
+  {
+    column_label: 'Close notes',
+    mandatory: 'false',
+    max_length: '4000',
+    element: 'close_notes',
+  },
+  {
+    column_label: 'Contact type',
+    mandatory: 'false',
+    max_length: '40',
+    element: 'contact_type',
+  },
+  {
+    column_label: 'Correlation display',
+    mandatory: 'false',
+    max_length: '100',
+    element: 'correlation_display',
+  },
+  {
+    column_label: 'Correlation ID',
+    mandatory: 'false',
+    max_length: '100',
+    element: 'correlation_id',
+  },
+  {
+    column_label: 'Description',
+    mandatory: 'false',
+    max_length: '4000',
+    element: 'description',
+  },
+  {
+    column_label: 'Number',
+    mandatory: 'false',
+    max_length: '40',
+    element: 'number',
+  },
+  {
+    column_label: 'Short description',
+    mandatory: 'false',
+    max_length: '160',
+    element: 'short_description',
+  },
+  {
+    column_label: 'Created by',
+    mandatory: 'false',
+    max_length: '40',
+    element: 'sys_created_by',
+  },
+  {
+    column_label: 'Updated by',
+    mandatory: 'false',
+    max_length: '40',
+    element: 'sys_updated_by',
+  },
+  {
+    column_label: 'Upon approval',
+    mandatory: 'false',
+    max_length: '40',
+    element: 'upon_approval',
+  },
+  {
+    column_label: 'Upon reject',
+    mandatory: 'false',
+    max_length: '40',
+    element: 'upon_reject',
+  },
+];
+interface FormatFieldsTestData {
+  expected: ConnectorField[];
+  fields: JiraGetFieldsResponse | ResilientGetFieldsResponse | ServiceNowGetFieldsResponse;
+  type: ConnectorTypes;
+}
+export const formatFieldsTestData: FormatFieldsTestData[] = [
+  {
+    expected: [
+      { id: 'summary', name: 'Summary', required: true, type: 'text' },
+      { id: 'description', name: 'Description', required: false, type: 'text' },
+    ],
+    fields: jiraFields,
+    type: ConnectorTypes.jira,
+  },
+  {
+    expected: [
+      { id: 'addr', name: 'Address', required: false, type: 'text' },
+      { id: 'city', name: 'City', required: false, type: 'text' },
+      { id: 'description', name: 'Description', required: false, type: 'textarea' },
+      {
+        id: 'gdpr_breach_type_comment',
+        name: 'GDPR Breach Type Comment',
+        required: false,
+        type: 'textarea',
+      },
+      {
+        id: 'gdpr_consequences_comment',
+        name: 'GDPR Consequences Comment',
+        required: false,
+        type: 'textarea',
+      },
+      {
+        id: 'gdpr_final_assessment_comment',
+        name: 'GDPR Final Assessment Comment',
+        required: false,
+        type: 'textarea',
+      },
+      {
+        id: 'gdpr_identification_comment',
+        name: 'GDPR Identification Comment',
+        required: false,
+        type: 'textarea',
+      },
+      {
+        id: 'gdpr_personal_data_comment',
+        name: 'GDPR Personal Data Comment',
+        required: false,
+        type: 'textarea',
+      },
+      { id: 'exposure_individual_name', name: 'Individual Name', required: false, type: 'text' },
+      { id: 'jurisdiction_name', name: 'Jurisdiction', required: false, type: 'text' },
+      { id: 'name', name: 'Name', required: true, type: 'text' },
+      {
+        id: 'pipeda_other_factors_comment',
+        name: 'PIPEDA Other Factors Comment',
+        required: false,
+        type: 'textarea',
+      },
+      {
+        id: 'pipeda_overall_assessment_comment',
+        name: 'PIPEDA Overall Assessment Comment',
+        required: false,
+        type: 'textarea',
+      },
+      {
+        id: 'pipeda_probability_of_misuse_comment',
+        name: 'PIPEDA Probability of Misuse Comment',
+        required: false,
+        type: 'textarea',
+      },
+      {
+        id: 'pipeda_sensitivity_of_pi_comment',
+        name: 'PIPEDA Sensitivity of PI Comment',
+        required: false,
+        type: 'textarea',
+      },
+      { id: 'reporter', name: 'Reporting Individual', required: false, type: 'text' },
+      { id: 'resolution_summary', name: 'Resolution Summary', required: false, type: 'textarea' },
+      { id: 'zip', name: 'Zip', required: false, type: 'text' },
+    ],
+    fields: resilientFields,
+    type: ConnectorTypes.resilient,
+  },
+  {
+    expected: [
+      { id: 'approval', name: 'Approval', required: false, type: 'text' },
+      { id: 'close_notes', name: 'Close notes', required: false, type: 'textarea' },
+      { id: 'contact_type', name: 'Contact type', required: false, type: 'text' },
+      { id: 'correlation_display', name: 'Correlation display', required: false, type: 'text' },
+      { id: 'correlation_id', name: 'Correlation ID', required: false, type: 'text' },
+      { id: 'description', name: 'Description', required: false, type: 'textarea' },
+      { id: 'number', name: 'Number', required: false, type: 'text' },
+      { id: 'short_description', name: 'Short description', required: false, type: 'text' },
+      { id: 'sys_created_by', name: 'Created by', required: false, type: 'text' },
+      { id: 'sys_updated_by', name: 'Updated by', required: false, type: 'text' },
+      { id: 'upon_approval', name: 'Upon approval', required: false, type: 'text' },
+      { id: 'upon_reject', name: 'Upon reject', required: false, type: 'text' },
+    ],
+    fields: serviceNowFields,
+    type: ConnectorTypes.servicenow,
+  },
+];
+export const mockGetFieldsResponse = {
+  status: 'ok',
+  data: jiraFields,
+  actionId: '123',
+};
+
+export const actionsErrResponse = {
+  status: 'error',
+  serviceMessage: 'this is an actions error',
+};
diff --git a/x-pack/plugins/case/server/client/configure/utils.test.ts b/x-pack/plugins/case/server/client/configure/utils.test.ts
index 91c8259cb2c555..f4f0e077425218 100644
--- a/x-pack/plugins/case/server/client/configure/utils.test.ts
+++ b/x-pack/plugins/case/server/client/configure/utils.test.ts
@@ -4,535 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
+export {
   JiraGetFieldsResponse,
   ResilientGetFieldsResponse,
   ServiceNowGetFieldsResponse,
 } from '../../../../actions/server/types';
-import { formatFields } from './utils';
+import { createDefaultMapping, formatFields } from './utils';
 import { ConnectorTypes } from '../../../common/api/connectors';
+import { mappings, formatFieldsTestData } from './mock';
 
-const jiraFields: JiraGetFieldsResponse = {
-  summary: {
-    required: true,
-    allowedValues: [],
-    defaultValue: {},
-    schema: {
-      type: 'string',
-    },
-    name: 'Summary',
-  },
-  issuetype: {
-    required: true,
-    allowedValues: [
-      {
-        self: 'https://siem-kibana.atlassian.net/rest/api/2/issuetype/10023',
-        id: '10023',
-        description: 'A problem or error.',
-        iconUrl:
-          'https://siem-kibana.atlassian.net/secure/viewavatar?size=medium&avatarId=10303&avatarType=issuetype',
-        name: 'Bug',
-        subtask: false,
-        avatarId: 10303,
-      },
-    ],
-    defaultValue: {},
-    schema: {
-      type: 'issuetype',
-    },
-    name: 'Issue Type',
-  },
-  attachment: {
-    required: false,
-    allowedValues: [],
-    defaultValue: {},
-    schema: {
-      type: 'array',
-      items: 'attachment',
-    },
-    name: 'Attachment',
-  },
-  duedate: {
-    required: false,
-    allowedValues: [],
-    defaultValue: {},
-    schema: {
-      type: 'date',
-    },
-    name: 'Due date',
-  },
-  description: {
-    required: false,
-    allowedValues: [],
-    defaultValue: {},
-    schema: {
-      type: 'string',
-    },
-    name: 'Description',
-  },
-  project: {
-    required: true,
-    allowedValues: [
-      {
-        self: 'https://siem-kibana.atlassian.net/rest/api/2/project/10015',
-        id: '10015',
-        key: 'RJ2',
-        name: 'RJ2',
-        projectTypeKey: 'business',
-        simplified: false,
-        avatarUrls: {
-          '48x48':
-            'https://siem-kibana.atlassian.net/secure/projectavatar?pid=10015&avatarId=10412',
-          '24x24':
-            'https://siem-kibana.atlassian.net/secure/projectavatar?size=small&s=small&pid=10015&avatarId=10412',
-          '16x16':
-            'https://siem-kibana.atlassian.net/secure/projectavatar?size=xsmall&s=xsmall&pid=10015&avatarId=10412',
-          '32x32':
-            'https://siem-kibana.atlassian.net/secure/projectavatar?size=medium&s=medium&pid=10015&avatarId=10412',
-        },
-      },
-    ],
-    defaultValue: {},
-    schema: {
-      type: 'project',
-    },
-    name: 'Project',
-  },
-  assignee: {
-    required: false,
-    allowedValues: [],
-    defaultValue: {},
-    schema: {
-      type: 'user',
-    },
-    name: 'Assignee',
-  },
-  labels: {
-    required: false,
-    allowedValues: [],
-    defaultValue: {},
-    schema: {
-      type: 'array',
-      items: 'string',
-    },
-    name: 'Labels',
-  },
-};
-const resilientFields: ResilientGetFieldsResponse = [
-  { input_type: 'text', name: 'addr', read_only: false, text: 'Address' },
-  {
-    input_type: 'boolean',
-    name: 'alberta_health_risk_assessment',
-    read_only: false,
-    text: 'Alberta Health Risk Assessment',
-  },
-  { input_type: 'number', name: 'hard_liability', read_only: true, text: 'Assessed Liability' },
-  { input_type: 'text', name: 'city', read_only: false, text: 'City' },
-  { input_type: 'select', name: 'country', read_only: false, text: 'Country/Region' },
-  { input_type: 'select_owner', name: 'creator_id', read_only: true, text: 'Created By' },
-  { input_type: 'select', name: 'crimestatus_id', read_only: false, text: 'Criminal Activity' },
-  { input_type: 'boolean', name: 'data_encrypted', read_only: false, text: 'Data Encrypted' },
-  { input_type: 'select', name: 'data_format', read_only: false, text: 'Data Format' },
-  { input_type: 'datetimepicker', name: 'end_date', read_only: true, text: 'Date Closed' },
-  { input_type: 'datetimepicker', name: 'create_date', read_only: true, text: 'Date Created' },
-  {
-    input_type: 'datetimepicker',
-    name: 'determined_date',
-    read_only: false,
-    text: 'Date Determined',
-  },
-  {
-    input_type: 'datetimepicker',
-    name: 'discovered_date',
-    read_only: false,
-    required: 'always',
-    text: 'Date Discovered',
-  },
-  { input_type: 'datetimepicker', name: 'start_date', read_only: false, text: 'Date Occurred' },
-  { input_type: 'select', name: 'exposure_dept_id', read_only: false, text: 'Department' },
-  { input_type: 'textarea', name: 'description', read_only: false, text: 'Description' },
-  { input_type: 'boolean', name: 'employee_involved', read_only: false, text: 'Employee Involved' },
-  { input_type: 'boolean', name: 'data_contained', read_only: false, text: 'Exposure Resolved' },
-  { input_type: 'select', name: 'exposure_type_id', read_only: false, text: 'Exposure Type' },
-  {
-    input_type: 'multiselect',
-    name: 'gdpr_breach_circumstances',
-    read_only: false,
-    text: 'GDPR Breach Circumstances',
-  },
-  { input_type: 'select', name: 'gdpr_breach_type', read_only: false, text: 'GDPR Breach Type' },
-  {
-    input_type: 'textarea',
-    name: 'gdpr_breach_type_comment',
-    read_only: false,
-    text: 'GDPR Breach Type Comment',
-  },
-  { input_type: 'select', name: 'gdpr_consequences', read_only: false, text: 'GDPR Consequences' },
-  {
-    input_type: 'textarea',
-    name: 'gdpr_consequences_comment',
-    read_only: false,
-    text: 'GDPR Consequences Comment',
-  },
-  {
-    input_type: 'select',
-    name: 'gdpr_final_assessment',
-    read_only: false,
-    text: 'GDPR Final Assessment',
-  },
-  {
-    input_type: 'textarea',
-    name: 'gdpr_final_assessment_comment',
-    read_only: false,
-    text: 'GDPR Final Assessment Comment',
-  },
-  {
-    input_type: 'select',
-    name: 'gdpr_identification',
-    read_only: false,
-    text: 'GDPR Identification',
-  },
-  {
-    input_type: 'textarea',
-    name: 'gdpr_identification_comment',
-    read_only: false,
-    text: 'GDPR Identification Comment',
-  },
-  {
-    input_type: 'select',
-    name: 'gdpr_personal_data',
-    read_only: false,
-    text: 'GDPR Personal Data',
-  },
-  {
-    input_type: 'textarea',
-    name: 'gdpr_personal_data_comment',
-    read_only: false,
-    text: 'GDPR Personal Data Comment',
-  },
-  {
-    input_type: 'boolean',
-    name: 'gdpr_subsequent_notification',
-    read_only: false,
-    text: 'GDPR Subsequent Notification',
-  },
-  { input_type: 'number', name: 'id', read_only: true, text: 'ID' },
-  { input_type: 'boolean', name: 'impact_likely', read_only: false, text: 'Impact Likely' },
-  {
-    input_type: 'boolean',
-    name: 'ny_impact_likely',
-    read_only: false,
-    text: 'Impact Likely for New York',
-  },
-  {
-    input_type: 'boolean',
-    name: 'or_impact_likely',
-    read_only: false,
-    text: 'Impact Likely for Oregon',
-  },
-  {
-    input_type: 'boolean',
-    name: 'wa_impact_likely',
-    read_only: false,
-    text: 'Impact Likely for Washington',
-  },
-  { input_type: 'boolean', name: 'confirmed', read_only: false, text: 'Incident Disposition' },
-  { input_type: 'multiselect', name: 'incident_type_ids', read_only: false, text: 'Incident Type' },
-  {
-    input_type: 'text',
-    name: 'exposure_individual_name',
-    read_only: false,
-    text: 'Individual Name',
-  },
-  {
-    input_type: 'select',
-    name: 'harmstatus_id',
-    read_only: false,
-    text: 'Is harm/risk/misuse foreseeable?',
-  },
-  { input_type: 'text', name: 'jurisdiction_name', read_only: false, text: 'Jurisdiction' },
-  {
-    input_type: 'datetimepicker',
-    name: 'inc_last_modified_date',
-    read_only: true,
-    text: 'Last Modified',
-  },
-  {
-    input_type: 'multiselect',
-    name: 'gdpr_lawful_data_processing_categories',
-    read_only: false,
-    text: 'Lawful Data Processing Categories',
-  },
-  { input_type: 'multiselect_members', name: 'members', read_only: false, text: 'Members' },
-  { input_type: 'text', name: 'name', read_only: false, required: 'always', text: 'Name' },
-  { input_type: 'boolean', name: 'negative_pr_likely', read_only: false, text: 'Negative PR' },
-  { input_type: 'datetimepicker', name: 'due_date', read_only: true, text: 'Next Due Date' },
-  {
-    input_type: 'multiselect',
-    name: 'nist_attack_vectors',
-    read_only: false,
-    text: 'NIST Attack Vectors',
-  },
-  { input_type: 'select', name: 'org_handle', read_only: true, text: 'Organization' },
-  { input_type: 'select_owner', name: 'owner_id', read_only: false, text: 'Owner' },
-  { input_type: 'select', name: 'phase_id', read_only: true, text: 'Phase' },
-  {
-    input_type: 'select',
-    name: 'pipeda_other_factors',
-    read_only: false,
-    text: 'PIPEDA Other Factors',
-  },
-  {
-    input_type: 'textarea',
-    name: 'pipeda_other_factors_comment',
-    read_only: false,
-    text: 'PIPEDA Other Factors Comment',
-  },
-  {
-    input_type: 'select',
-    name: 'pipeda_overall_assessment',
-    read_only: false,
-    text: 'PIPEDA Overall Assessment',
-  },
-  {
-    input_type: 'textarea',
-    name: 'pipeda_overall_assessment_comment',
-    read_only: false,
-    text: 'PIPEDA Overall Assessment Comment',
-  },
-  {
-    input_type: 'select',
-    name: 'pipeda_probability_of_misuse',
-    read_only: false,
-    text: 'PIPEDA Probability of Misuse',
-  },
-  {
-    input_type: 'textarea',
-    name: 'pipeda_probability_of_misuse_comment',
-    read_only: false,
-    text: 'PIPEDA Probability of Misuse Comment',
-  },
-  {
-    input_type: 'select',
-    name: 'pipeda_sensitivity_of_pi',
-    read_only: false,
-    text: 'PIPEDA Sensitivity of PI',
-  },
-  {
-    input_type: 'textarea',
-    name: 'pipeda_sensitivity_of_pi_comment',
-    read_only: false,
-    text: 'PIPEDA Sensitivity of PI Comment',
-  },
-  { input_type: 'text', name: 'reporter', read_only: false, text: 'Reporting Individual' },
-  {
-    input_type: 'select',
-    name: 'resolution_id',
-    read_only: false,
-    required: 'close',
-    text: 'Resolution',
-  },
-  {
-    input_type: 'textarea',
-    name: 'resolution_summary',
-    read_only: false,
-    required: 'close',
-    text: 'Resolution Summary',
-  },
-  { input_type: 'select', name: 'gdpr_harm_risk', read_only: false, text: 'Risk of Harm' },
-  { input_type: 'select', name: 'severity_code', read_only: false, text: 'Severity' },
-  { input_type: 'boolean', name: 'inc_training', read_only: true, text: 'Simulation' },
-  { input_type: 'multiselect', name: 'data_source_ids', read_only: false, text: 'Source of Data' },
-  { input_type: 'select', name: 'state', read_only: false, text: 'State' },
-  { input_type: 'select', name: 'plan_status', read_only: false, text: 'Status' },
-  { input_type: 'select', name: 'exposure_vendor_id', read_only: false, text: 'Vendor' },
-  {
-    input_type: 'boolean',
-    name: 'data_compromised',
-    read_only: false,
-    text: 'Was personal information or personal data involved?',
-  },
-  {
-    input_type: 'select',
-    name: 'workspace',
-    read_only: false,
-    required: 'always',
-    text: 'Workspace',
-  },
-  { input_type: 'text', name: 'zip', read_only: false, text: 'Zip' },
-];
-const serviceNowFields: ServiceNowGetFieldsResponse = [
-  {
-    column_label: 'Approval',
-    mandatory: 'false',
-    max_length: '40',
-    element: 'approval',
-  },
-  {
-    column_label: 'Close notes',
-    mandatory: 'false',
-    max_length: '4000',
-    element: 'close_notes',
-  },
-  {
-    column_label: 'Contact type',
-    mandatory: 'false',
-    max_length: '40',
-    element: 'contact_type',
-  },
-  {
-    column_label: 'Correlation display',
-    mandatory: 'false',
-    max_length: '100',
-    element: 'correlation_display',
-  },
-  {
-    column_label: 'Correlation ID',
-    mandatory: 'false',
-    max_length: '100',
-    element: 'correlation_id',
-  },
-  {
-    column_label: 'Description',
-    mandatory: 'false',
-    max_length: '4000',
-    element: 'description',
-  },
-  {
-    column_label: 'Number',
-    mandatory: 'false',
-    max_length: '40',
-    element: 'number',
-  },
-  {
-    column_label: 'Short description',
-    mandatory: 'false',
-    max_length: '160',
-    element: 'short_description',
-  },
-  {
-    column_label: 'Created by',
-    mandatory: 'false',
-    max_length: '40',
-    element: 'sys_created_by',
-  },
-  {
-    column_label: 'Updated by',
-    mandatory: 'false',
-    max_length: '40',
-    element: 'sys_updated_by',
-  },
-  {
-    column_label: 'Upon approval',
-    mandatory: 'false',
-    max_length: '40',
-    element: 'upon_approval',
-  },
-  {
-    column_label: 'Upon reject',
-    mandatory: 'false',
-    max_length: '40',
-    element: 'upon_reject',
-  },
-];
-
-const formatFieldsTestData = [
-  {
-    expected: [
-      { id: 'summary', name: 'Summary', required: true, type: 'text' },
-      { id: 'description', name: 'Description', required: false, type: 'text' },
-    ],
-    fields: jiraFields,
-    type: ConnectorTypes.jira,
-  },
-  {
-    expected: [
-      { id: 'addr', name: 'Address', required: false, type: 'text' },
-      { id: 'city', name: 'City', required: false, type: 'text' },
-      { id: 'description', name: 'Description', required: false, type: 'textarea' },
-      {
-        id: 'gdpr_breach_type_comment',
-        name: 'GDPR Breach Type Comment',
-        required: false,
-        type: 'textarea',
-      },
-      {
-        id: 'gdpr_consequences_comment',
-        name: 'GDPR Consequences Comment',
-        required: false,
-        type: 'textarea',
-      },
-      {
-        id: 'gdpr_final_assessment_comment',
-        name: 'GDPR Final Assessment Comment',
-        required: false,
-        type: 'textarea',
-      },
-      {
-        id: 'gdpr_identification_comment',
-        name: 'GDPR Identification Comment',
-        required: false,
-        type: 'textarea',
-      },
-      {
-        id: 'gdpr_personal_data_comment',
-        name: 'GDPR Personal Data Comment',
-        required: false,
-        type: 'textarea',
-      },
-      { id: 'exposure_individual_name', name: 'Individual Name', required: false, type: 'text' },
-      { id: 'jurisdiction_name', name: 'Jurisdiction', required: false, type: 'text' },
-      { id: 'name', name: 'Name', required: true, type: 'text' },
-      {
-        id: 'pipeda_other_factors_comment',
-        name: 'PIPEDA Other Factors Comment',
-        required: false,
-        type: 'textarea',
-      },
-      {
-        id: 'pipeda_overall_assessment_comment',
-        name: 'PIPEDA Overall Assessment Comment',
-        required: false,
-        type: 'textarea',
-      },
-      {
-        id: 'pipeda_probability_of_misuse_comment',
-        name: 'PIPEDA Probability of Misuse Comment',
-        required: false,
-        type: 'textarea',
-      },
-      {
-        id: 'pipeda_sensitivity_of_pi_comment',
-        name: 'PIPEDA Sensitivity of PI Comment',
-        required: false,
-        type: 'textarea',
-      },
-      { id: 'reporter', name: 'Reporting Individual', required: false, type: 'text' },
-      { id: 'resolution_summary', name: 'Resolution Summary', required: false, type: 'textarea' },
-      { id: 'zip', name: 'Zip', required: false, type: 'text' },
-    ],
-    fields: resilientFields,
-    type: ConnectorTypes.resilient,
-  },
-  {
-    expected: [
-      { id: 'approval', name: 'Approval', required: false, type: 'text' },
-      { id: 'close_notes', name: 'Close notes', required: false, type: 'textarea' },
-      { id: 'contact_type', name: 'Contact type', required: false, type: 'text' },
-      { id: 'correlation_display', name: 'Correlation display', required: false, type: 'text' },
-      { id: 'correlation_id', name: 'Correlation ID', required: false, type: 'text' },
-      { id: 'description', name: 'Description', required: false, type: 'textarea' },
-      { id: 'number', name: 'Number', required: false, type: 'text' },
-      { id: 'short_description', name: 'Short description', required: false, type: 'text' },
-      { id: 'sys_created_by', name: 'Created by', required: false, type: 'text' },
-      { id: 'sys_updated_by', name: 'Updated by', required: false, type: 'text' },
-      { id: 'upon_approval', name: 'Upon approval', required: false, type: 'text' },
-      { id: 'upon_reject', name: 'Upon reject', required: false, type: 'text' },
-    ],
-    fields: serviceNowFields,
-    type: ConnectorTypes.servicenow,
-  },
-];
 describe('client/configure/utils', () => {
   describe('formatFields', () => {
     formatFieldsTestData.forEach(({ expected, fields, type }) => {
@@ -542,4 +22,23 @@ describe('client/configure/utils', () => {
       });
     });
   });
+  describe('createDefaultMapping', () => {
+    formatFieldsTestData.forEach(({ expected, fields, type }) => {
+      it(`normalizes ${type} fields to common type ConnectorField`, () => {
+        const result = createDefaultMapping(expected, type);
+        expect(result).toEqual(mappings[type]);
+      });
+    });
+    it(`if the preferredField is not required and another field is, use the other field`, () => {
+      const result = createDefaultMapping(
+        [
+          { id: 'summary', name: 'Summary', required: false, type: 'text' },
+          { id: 'title', name: 'Title', required: true, type: 'text' },
+          { id: 'description', name: 'Description', required: false, type: 'text' },
+        ],
+        ConnectorTypes.jira
+      );
+      expect(result).toEqual(mappings[`${ConnectorTypes.jira}-alt`]);
+    });
+  });
 });
diff --git a/x-pack/plugins/case/server/routes/api/__fixtures__/mock_saved_objects.ts b/x-pack/plugins/case/server/routes/api/__fixtures__/mock_saved_objects.ts
index 45ccb4f2c539fa..0d78bceeaf2fa9 100644
--- a/x-pack/plugins/case/server/routes/api/__fixtures__/mock_saved_objects.ts
+++ b/x-pack/plugins/case/server/routes/api/__fixtures__/mock_saved_objects.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { SavedObject, SavedObjectsFindResponse } from 'kibana/server';
+import { SavedObject } from 'kibana/server';
 import {
   CaseStatuses,
   CommentAttributes,
@@ -14,8 +14,8 @@ import {
   ESCaseAttributes,
   ESCasesConfigureAttributes,
 } from '../../../../common/api';
-import { mappings } from '../cases/configure/mock';
 import { CASE_CONNECTOR_MAPPINGS_SAVED_OBJECT } from '../../../saved_object_types';
+import { mappings } from '../../../client/configure/mock';
 
 export const mockCases: Array<SavedObject<ESCaseAttributes>> = [
   {
@@ -381,31 +381,13 @@ export const mockCaseConfigure: Array<SavedObject<ESCasesConfigureAttributes>> =
   },
 ];
 
-export const mockCaseConfigureFind: Array<SavedObjectsFindResponse<ESCasesConfigureAttributes>> = [
-  {
-    page: 1,
-    per_page: 5,
-    total: mockCaseConfigure.length,
-    saved_objects: [{ ...mockCaseConfigure[0], score: 0 }],
-  },
-];
-
 export const mockCaseMappings: Array<SavedObject<ConnectorMappings>> = [
   {
     type: CASE_CONNECTOR_MAPPINGS_SAVED_OBJECT,
     id: 'mock-mappings-1',
     attributes: {
-      mappings,
+      mappings: mappings[ConnectorTypes.jira],
     },
     references: [],
   },
 ];
-
-export const mockCaseMappingsFind: Array<SavedObjectsFindResponse<ConnectorMappings>> = [
-  {
-    page: 1,
-    per_page: 5,
-    total: mockCaseConfigure.length,
-    saved_objects: [{ ...mockCaseMappings[0], score: 0 }],
-  },
-];
diff --git a/x-pack/plugins/case/server/routes/api/__mocks__/request_responses.ts b/x-pack/plugins/case/server/routes/api/__mocks__/request_responses.ts
index b6da21927e342e..efc3b6044a8045 100644
--- a/x-pack/plugins/case/server/routes/api/__mocks__/request_responses.ts
+++ b/x-pack/plugins/case/server/routes/api/__mocks__/request_responses.ts
@@ -3,9 +3,15 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { CasePostRequest, CasesConfigureRequest, ConnectorTypes } from '../../../../common/api';
+import {
+  CasePostRequest,
+  CasesConfigureRequest,
+  ConnectorTypes,
+  PostPushRequest,
+} from '../../../../common/api';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { FindActionResult } from '../../../../../actions/server/types';
+import { params } from '../cases/configure/mock';
 
 export const newCase: CasePostRequest = {
   title: 'My new case',
@@ -76,3 +82,19 @@ export const newConfiguration: CasesConfigureRequest = {
   },
   closure_type: 'close-by-pushing',
 };
+
+export const newPostPushRequest: PostPushRequest = {
+  params: params[ConnectorTypes.jira],
+  connector_type: ConnectorTypes.jira,
+};
+
+export const executePushResponse = {
+  status: 'ok',
+  data: {
+    title: 'RJ2-200',
+    id: '10663',
+    pushedDate: '2020-12-17T00:32:40.738Z',
+    url: 'https://siem-kibana.atlassian.net/browse/RJ2-200',
+    comments: [],
+  },
+};
diff --git a/x-pack/plugins/case/server/routes/api/cases/configure/get_configure.test.ts b/x-pack/plugins/case/server/routes/api/cases/configure/get_configure.test.ts
index d75f42f6e486bc..87e165f8e00147 100644
--- a/x-pack/plugins/case/server/routes/api/cases/configure/get_configure.test.ts
+++ b/x-pack/plugins/case/server/routes/api/cases/configure/get_configure.test.ts
@@ -17,7 +17,8 @@ import {
 
 import { initGetCaseConfigure } from './get_configure';
 import { CASE_CONFIGURE_URL } from '../../../../../common/constants';
-import { mappings } from './mock';
+import { mappings } from '../../../../client/configure/mock';
+import { ConnectorTypes } from '../../../../../common/api/connectors';
 
 describe('GET configuration', () => {
   let routeHandler: RequestHandler<any, any, any>;
@@ -42,7 +43,7 @@ describe('GET configuration', () => {
     expect(res.status).toEqual(200);
     expect(res.payload).toEqual({
       ...mockCaseConfigure[0].attributes,
-      mappings,
+      mappings: mappings[ConnectorTypes.jira],
       version: mockCaseConfigure[0].version,
     });
   });
@@ -76,7 +77,7 @@ describe('GET configuration', () => {
         email: 'testemail@elastic.co',
         username: 'elastic',
       },
-      mappings,
+      mappings: mappings[ConnectorTypes.jira],
       updated_at: '2020-04-09T09:43:51.778Z',
       updated_by: {
         full_name: 'elastic',
diff --git a/x-pack/plugins/case/server/routes/api/cases/configure/get_fields.ts b/x-pack/plugins/case/server/routes/api/cases/configure/get_fields.ts
deleted file mode 100644
index c9b8e671b7df82..00000000000000
--- a/x-pack/plugins/case/server/routes/api/cases/configure/get_fields.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 Boom from '@hapi/boom';
-import { pipe } from 'fp-ts/lib/pipeable';
-import { fold } from 'fp-ts/lib/Either';
-import { identity } from 'fp-ts/lib/function';
-import { RouteDeps } from '../../types';
-import { escapeHatch, wrapError } from '../../utils';
-
-import { CASE_CONFIGURE_CONNECTOR_DETAILS_URL } from '../../../../../common/constants';
-import {
-  ConnectorRequestParamsRt,
-  GetFieldsRequestQueryRt,
-  throwErrors,
-} from '../../../../../common/api';
-
-export function initCaseConfigureGetFields({ router }: RouteDeps) {
-  router.get(
-    {
-      path: CASE_CONFIGURE_CONNECTOR_DETAILS_URL,
-      validate: {
-        params: escapeHatch,
-        query: escapeHatch,
-      },
-    },
-    async (context, request, response) => {
-      try {
-        if (!context.case) {
-          throw Boom.badRequest('RouteHandlerContext is not registered for cases');
-        }
-        const query = pipe(
-          GetFieldsRequestQueryRt.decode(request.query),
-          fold(throwErrors(Boom.badRequest), identity)
-        );
-        const params = pipe(
-          ConnectorRequestParamsRt.decode(request.params),
-          fold(throwErrors(Boom.badRequest), identity)
-        );
-
-        const caseClient = context.case.getCaseClient();
-
-        const connectorType = query.connector_type;
-        if (connectorType == null) {
-          throw Boom.illegal('no connectorType value provided');
-        }
-
-        const actionsClient = await context.actions?.getActionsClient();
-        if (actionsClient == null) {
-          throw Boom.notFound('Action client have not been found');
-        }
-
-        const res = await caseClient.getFields({
-          actionsClient,
-          connectorId: params.connector_id,
-          connectorType,
-        });
-
-        return response.ok({
-          body: res.fields,
-        });
-      } catch (error) {
-        return response.customError(wrapError(error));
-      }
-    }
-  );
-}
diff --git a/x-pack/plugins/case/server/routes/api/cases/configure/mock.ts b/x-pack/plugins/case/server/routes/api/cases/configure/mock.ts
index ed8b2088646115..771b09cec2a359 100644
--- a/x-pack/plugins/case/server/routes/api/cases/configure/mock.ts
+++ b/x-pack/plugins/case/server/routes/api/cases/configure/mock.ts
@@ -7,6 +7,7 @@ import {
   ServiceConnectorCaseParams,
   ServiceConnectorCommentParams,
   ConnectorMappingsAttributes,
+  ConnectorTypes,
 } from '../../../../../common/api/connectors';
 export const updateUser = {
   updatedAt: '2020-03-13T08:34:53.450Z',
@@ -24,16 +25,36 @@ export const comment: ServiceConnectorCommentParams = {
   ...entity,
 };
 export const defaultPipes = ['informationCreated'];
-export const params = {
+const basicParams = {
   comments: [comment],
   description: 'a description',
-  impact: '3',
-  savedObjectId: '1231231231232',
-  severity: '1',
   title: 'a title',
-  urgency: '2',
-  ...entity,
-} as ServiceConnectorCaseParams;
+  savedObjectId: '1231231231232',
+  externalId: null,
+};
+export const params = {
+  [ConnectorTypes.jira]: {
+    ...basicParams,
+    issueType: '10003',
+    priority: 'Highest',
+    parent: '5002',
+    ...entity,
+  } as ServiceConnectorCaseParams,
+  [ConnectorTypes.resilient]: {
+    ...basicParams,
+    incidentTypes: ['10003'],
+    severityCode: '1',
+    ...entity,
+  } as ServiceConnectorCaseParams,
+  [ConnectorTypes.servicenow]: {
+    ...basicParams,
+    impact: '3',
+    severity: '1',
+    urgency: '2',
+    ...entity,
+  } as ServiceConnectorCaseParams,
+  [ConnectorTypes.none]: {},
+};
 export const mappings: ConnectorMappingsAttributes[] = [
   {
     source: 'title',
diff --git a/x-pack/plugins/case/server/routes/api/cases/configure/post_push_to_service.test.ts b/x-pack/plugins/case/server/routes/api/cases/configure/post_push_to_service.test.ts
new file mode 100644
index 00000000000000..ff0939fdcce1fa
--- /dev/null
+++ b/x-pack/plugins/case/server/routes/api/cases/configure/post_push_to_service.test.ts
@@ -0,0 +1,104 @@
+/*
+ * 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 { kibanaResponseFactory, RequestHandler, RequestHandlerContext } from 'src/core/server';
+import { httpServerMock } from 'src/core/server/mocks';
+
+import {
+  createMockSavedObjectsRepository,
+  createRoute,
+  createRouteContext,
+  mockCaseMappings,
+} from '../../__fixtures__';
+
+import { initPostPushToService } from './post_push_to_service';
+import { executePushResponse, newPostPushRequest } from '../../__mocks__/request_responses';
+import { CASE_CONFIGURE_PUSH_URL } from '../../../../../common/constants';
+
+describe('Post push to service', () => {
+  let routeHandler: RequestHandler<any, any, any>;
+  const req = httpServerMock.createKibanaRequest({
+    path: `${CASE_CONFIGURE_PUSH_URL}`,
+    method: 'post',
+    params: {
+      connector_id: '666',
+    },
+    body: newPostPushRequest,
+  });
+  let context: RequestHandlerContext;
+  beforeAll(async () => {
+    routeHandler = await createRoute(initPostPushToService, 'post');
+    const spyOnDate = jest.spyOn(global, 'Date') as jest.SpyInstance<{}, []>;
+    spyOnDate.mockImplementation(() => ({
+      toISOString: jest.fn().mockReturnValue('2020-04-09T09:43:51.778Z'),
+    }));
+    context = await createRouteContext(
+      createMockSavedObjectsRepository({
+        caseMappingsSavedObject: mockCaseMappings,
+      })
+    );
+  });
+
+  it('Happy path - posts success', async () => {
+    const betterContext = ({
+      ...context,
+      actions: {
+        ...context.actions,
+        getActionsClient: () => {
+          const actions = context!.actions!.getActionsClient();
+          return {
+            ...actions,
+            execute: jest.fn().mockImplementation(({ actionId }) => {
+              return {
+                status: 'ok',
+                data: {
+                  title: 'RJ2-200',
+                  id: '10663',
+                  pushedDate: '2020-12-17T00:32:40.738Z',
+                  url: 'https://siem-kibana.atlassian.net/browse/RJ2-200',
+                  comments: [],
+                },
+                actionId,
+              };
+            }),
+          };
+        },
+      },
+    } as unknown) as RequestHandlerContext;
+
+    const res = await routeHandler(betterContext, req, kibanaResponseFactory);
+
+    expect(res.status).toEqual(200);
+    expect(res.payload).toEqual({
+      ...executePushResponse,
+      actionId: '666',
+    });
+  });
+  it('Unhappy path - context case missing', async () => {
+    const betterContext = ({
+      ...context,
+      case: null,
+    } as unknown) as RequestHandlerContext;
+
+    const res = await routeHandler(betterContext, req, kibanaResponseFactory);
+    expect(res.status).toEqual(400);
+    expect(res.payload.isBoom).toBeTruthy();
+    expect(res.payload.output.payload.message).toEqual(
+      'RouteHandlerContext is not registered for cases'
+    );
+  });
+  it('Unhappy path - context actions missing', async () => {
+    const betterContext = ({
+      ...context,
+      actions: null,
+    } as unknown) as RequestHandlerContext;
+
+    const res = await routeHandler(betterContext, req, kibanaResponseFactory);
+    expect(res.status).toEqual(404);
+    expect(res.payload.isBoom).toBeTruthy();
+    expect(res.payload.output.payload.message).toEqual('Action client have not been found');
+  });
+});
diff --git a/x-pack/plugins/case/server/routes/api/cases/configure/post_push_to_service.ts b/x-pack/plugins/case/server/routes/api/cases/configure/post_push_to_service.ts
index 9c4c06c5f4e186..fb7a91d0463136 100644
--- a/x-pack/plugins/case/server/routes/api/cases/configure/post_push_to_service.ts
+++ b/x-pack/plugins/case/server/routes/api/cases/configure/post_push_to_service.ts
@@ -19,7 +19,7 @@ import {
 } from '../../../../../common/api';
 import { mapIncident } from './utils';
 
-export function initPostPushToService({ router, connectorMappingsService }: RouteDeps) {
+export function initPostPushToService({ router }: RouteDeps) {
   router.post(
     {
       path: CASE_CONFIGURE_PUSH_URL,
diff --git a/x-pack/plugins/case/server/routes/api/cases/configure/utils.test.ts b/x-pack/plugins/case/server/routes/api/cases/configure/utils.test.ts
index d2ecdf61c882d7..d1f8391ad082a0 100644
--- a/x-pack/plugins/case/server/routes/api/cases/configure/utils.test.ts
+++ b/x-pack/plugins/case/server/routes/api/cases/configure/utils.test.ts
@@ -5,25 +5,31 @@
  */
 
 import {
+  mapIncident,
   prepareFieldsForTransformation,
-  transformFields,
+  serviceFormatter,
   transformComments,
   transformers,
+  transformFields,
 } from './utils';
 
-import { comment as commentObj, defaultPipes, mappings, params, updateUser } from './mock';
+import { comment as commentObj, mappings, defaultPipes, params, updateUser } from './mock';
 import {
-  ServiceConnectorCaseParams,
+  ConnectorTypes,
   ExternalServiceParams,
   Incident,
+  ServiceConnectorCaseParams,
 } from '../../../../../common/api/connectors';
+import { actionsClientMock } from '../../../../../../actions/server/actions_client.mock';
+import { mappings as mappingsMock } from '../../../../client/configure/mock';
 const formatComment = { commentId: commentObj.commentId, comment: commentObj.comment };
+const serviceNowParams = params[ConnectorTypes.servicenow] as ServiceConnectorCaseParams;
 describe('api/cases/configure/utils', () => {
   describe('prepareFieldsForTransformation', () => {
     test('prepare fields with defaults', () => {
       const res = prepareFieldsForTransformation({
         defaultPipes,
-        params,
+        params: serviceNowParams,
         mappings,
       });
       expect(res).toEqual([
@@ -46,7 +52,7 @@ describe('api/cases/configure/utils', () => {
       const res = prepareFieldsForTransformation({
         defaultPipes: ['myTestPipe'],
         mappings,
-        params,
+        params: serviceNowParams,
       });
       expect(res).toEqual([
         {
@@ -69,11 +75,11 @@ describe('api/cases/configure/utils', () => {
       const fields = prepareFieldsForTransformation({
         defaultPipes,
         mappings,
-        params,
+        params: serviceNowParams,
       });
 
       const res = transformFields<ServiceConnectorCaseParams, ExternalServiceParams, Incident>({
-        params,
+        params: serviceNowParams,
         fields,
       });
 
@@ -85,14 +91,14 @@ describe('api/cases/configure/utils', () => {
 
     test('transform fields for update correctly', () => {
       const fields = prepareFieldsForTransformation({
-        params,
+        params: serviceNowParams,
         mappings,
         defaultPipes: ['informationUpdated'],
       });
 
       const res = transformFields<ServiceConnectorCaseParams, ExternalServiceParams, Incident>({
         params: {
-          ...params,
+          ...serviceNowParams,
           updatedAt: '2020-03-15T08:34:53.450Z',
           updatedBy: {
             username: 'anotherUser',
@@ -114,13 +120,13 @@ describe('api/cases/configure/utils', () => {
 
     test('add newline character to description', () => {
       const fields = prepareFieldsForTransformation({
-        params,
+        params: serviceNowParams,
         mappings,
         defaultPipes: ['informationUpdated'],
       });
 
       const res = transformFields<ServiceConnectorCaseParams, ExternalServiceParams, Incident>({
-        params,
+        params: serviceNowParams,
         fields,
         currentIncident: {
           short_description: 'first title',
@@ -134,12 +140,12 @@ describe('api/cases/configure/utils', () => {
       const fields = prepareFieldsForTransformation({
         defaultPipes,
         mappings,
-        params,
+        params: serviceNowParams,
       });
 
       const res = transformFields<ServiceConnectorCaseParams, ExternalServiceParams, Incident>({
         params: {
-          ...params,
+          ...serviceNowParams,
           createdBy: { fullName: '', username: 'elastic' },
         },
         fields,
@@ -155,12 +161,12 @@ describe('api/cases/configure/utils', () => {
       const fields = prepareFieldsForTransformation({
         defaultPipes: ['informationUpdated'],
         mappings,
-        params,
+        params: serviceNowParams,
       });
 
       const res = transformFields<ServiceConnectorCaseParams, ExternalServiceParams, Incident>({
         params: {
-          ...params,
+          ...serviceNowParams,
           updatedAt: '2020-03-15T08:34:53.450Z',
           updatedBy: { username: 'anotherUser', fullName: '' },
         },
@@ -382,4 +388,142 @@ describe('api/cases/configure/utils', () => {
       });
     });
   });
+  describe('mapIncident', () => {
+    let actionsMock = actionsClientMock.create();
+    it('maps an external incident', async () => {
+      const res = await mapIncident(
+        actionsMock,
+        '123',
+        ConnectorTypes.servicenow,
+        mappingsMock[ConnectorTypes.servicenow],
+        serviceNowParams
+      );
+      expect(res).toEqual({
+        incident: {
+          description: 'a description (created at 2020-03-13T08:34:53.450Z by Elastic User)',
+          externalId: null,
+          impact: '3',
+          severity: '1',
+          short_description: 'a title (created at 2020-03-13T08:34:53.450Z by Elastic User)',
+          urgency: '2',
+        },
+        comments: [
+          {
+            comment: 'first comment (added at 2020-03-13T08:34:53.450Z by Elastic User)',
+            commentId: 'b5b4c4d0-574e-11ea-9e2e-21b90f8a9631',
+          },
+        ],
+      });
+    });
+    it('throws error if invalid service', async () => {
+      await mapIncident(
+        actionsMock,
+        '123',
+        'invalid',
+        mappingsMock[ConnectorTypes.servicenow],
+        serviceNowParams
+      ).catch((e) => {
+        expect(e).not.toBeNull();
+        expect(e).toEqual(new Error(`Invalid service`));
+      });
+    });
+    it('updates an existing incident', async () => {
+      const existingIncidentData = {
+        description: 'fun description',
+        impact: '3',
+        severity: '3',
+        short_description: 'fun title',
+        urgency: '3',
+      };
+      const execute = jest.fn().mockReturnValue(existingIncidentData);
+      actionsMock = { ...actionsMock, execute };
+      const res = await mapIncident(
+        actionsMock,
+        '123',
+        ConnectorTypes.servicenow,
+        mappingsMock[ConnectorTypes.servicenow],
+        { ...serviceNowParams, externalId: '123' }
+      );
+      expect(res).toEqual({
+        incident: {
+          description: 'a description (updated at 2020-03-13T08:34:53.450Z by Elastic User)',
+          externalId: '123',
+          impact: '3',
+          severity: '1',
+          short_description: 'a title (updated at 2020-03-13T08:34:53.450Z by Elastic User)',
+          urgency: '2',
+        },
+        comments: [
+          {
+            comment: 'first comment (added at 2020-03-13T08:34:53.450Z by Elastic User)',
+            commentId: 'b5b4c4d0-574e-11ea-9e2e-21b90f8a9631',
+          },
+        ],
+      });
+    });
+    it('throws error when existing incident throws', async () => {
+      const execute = jest.fn().mockImplementation(() => {
+        throw new Error('exception');
+      });
+      actionsMock = { ...actionsMock, execute };
+      await mapIncident(
+        actionsMock,
+        '123',
+        ConnectorTypes.servicenow,
+        mappingsMock[ConnectorTypes.servicenow],
+        { ...serviceNowParams, externalId: '123' }
+      ).catch((e) => {
+        expect(e).not.toBeNull();
+        expect(e).toEqual(
+          new Error(
+            `Retrieving Incident by id 123 from ServiceNow failed with exception: Error: exception`
+          )
+        );
+      });
+    });
+  });
+
+  const connectors = [
+    {
+      name: ConnectorTypes.jira,
+      result: {
+        incident: {
+          issueType: '10003',
+          parent: '5002',
+          priority: 'Highest',
+        },
+        thirdPartyName: 'Jira',
+      },
+    },
+    {
+      name: ConnectorTypes.resilient,
+      result: {
+        incident: {
+          incidentTypes: ['10003'],
+          severityCode: '1',
+        },
+        thirdPartyName: 'Resilient',
+      },
+    },
+    {
+      name: ConnectorTypes.servicenow,
+      result: {
+        incident: {
+          impact: '3',
+          severity: '1',
+          urgency: '2',
+        },
+        thirdPartyName: 'ServiceNow',
+      },
+    },
+  ];
+  describe('serviceFormatter', () => {
+    connectors.forEach((c) =>
+      it(`formats ${c.name}`, () => {
+        const caseParams = params[c.name] as ServiceConnectorCaseParams;
+        const res = serviceFormatter(c.name, caseParams);
+        expect(res).toEqual(c.result);
+      })
+    );
+  });
 });
diff --git a/x-pack/plugins/case/server/routes/api/cases/configure/utils.ts b/x-pack/plugins/case/server/routes/api/cases/configure/utils.ts
index b8a37661fe9f77..89109af4cecb9d 100644
--- a/x-pack/plugins/case/server/routes/api/cases/configure/utils.ts
+++ b/x-pack/plugins/case/server/routes/api/cases/configure/utils.ts
@@ -25,9 +25,7 @@ import {
   TransformerArgs,
   TransformFieldsArgs,
 } from '../../../../../common/api';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { ActionsClient } from '../../../../../../actions/server/actions_client';
-
+import { ActionsClient } from '../../../../../../actions/server';
 export const mapIncident = async (
   actionsClient: ActionsClient,
   connectorId: string,
@@ -59,13 +57,11 @@ export const mapIncident = async (
       );
     }
   }
-
   const fields = prepareFieldsForTransformation({
     defaultPipes,
     mappings,
     params,
   });
-
   const transformedFields = transformFields<
     ServiceConnectorCaseParams,
     ExternalServiceParams,
diff --git a/x-pack/plugins/case/server/routes/api/index.ts b/x-pack/plugins/case/server/routes/api/index.ts
index 587e43b218f446..15817b425021e9 100644
--- a/x-pack/plugins/case/server/routes/api/index.ts
+++ b/x-pack/plugins/case/server/routes/api/index.ts
@@ -25,7 +25,6 @@ import { initPostCommentApi } from './cases/comments/post_comment';
 
 import { initCaseConfigureGetActionConnector } from './cases/configure/get_connectors';
 import { initGetCaseConfigure } from './cases/configure/get_configure';
-import { initCaseConfigureGetFields } from './cases/configure/get_fields';
 import { initPatchCaseConfigure } from './cases/configure/patch_configure';
 import { initPostCaseConfigure } from './cases/configure/post_configure';
 import { initPostPushToService } from './cases/configure/post_push_to_service';
@@ -54,7 +53,6 @@ export function initCaseApi(deps: RouteDeps) {
   initGetCaseConfigure(deps);
   initPatchCaseConfigure(deps);
   initPostCaseConfigure(deps);
-  initCaseConfigureGetFields(deps);
   initPostPushToService(deps);
   // Reporters
   initGetReportersApi(deps);
diff --git a/x-pack/plugins/security_solution/public/cases/containers/api.ts b/x-pack/plugins/security_solution/public/cases/containers/api.ts
index ef1e35b8ceb4b2..07f7391ca94d90 100644
--- a/x-pack/plugins/security_solution/public/cases/containers/api.ts
+++ b/x-pack/plugins/security_solution/public/cases/containers/api.ts
@@ -16,7 +16,6 @@ import {
   CaseUserActionsResponse,
   CommentRequest,
   CommentType,
-  ConnectorField,
   ServiceConnectorCaseParams,
   ServiceConnectorCaseResponse,
   User,
@@ -24,7 +23,6 @@ import {
 
 import {
   ACTION_TYPES_URL,
-  CASE_CONFIGURE_CONNECTORS_URL,
   CASE_REPORTERS_URL,
   CASE_STATUS_URL,
   CASE_TAGS_URL,
@@ -273,20 +271,3 @@ export const getActionLicense = async (signal: AbortSignal): Promise<ActionLicen
   });
   return response;
 };
-export const getFields = async (
-  connectorId: string,
-  connectorType: string,
-  signal: AbortSignal
-): Promise<ConnectorField[]> => {
-  const response = await KibanaServices.get().http.fetch<ConnectorField[]>(
-    `${CASE_CONFIGURE_CONNECTORS_URL}/${connectorId}`,
-    {
-      query: {
-        connector_type: connectorType,
-      },
-      method: 'GET',
-      signal,
-    }
-  );
-  return response;
-};
diff --git a/x-pack/plugins/security_solution/public/cases/containers/use_get_fields.tsx b/x-pack/plugins/security_solution/public/cases/containers/use_get_fields.tsx
deleted file mode 100644
index 6b594fa60e0c73..00000000000000
--- a/x-pack/plugins/security_solution/public/cases/containers/use_get_fields.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.
- */
-
-import { useCallback, useEffect, useState } from 'react';
-
-import { errorToToaster, useStateToaster } from '../../common/components/toasters';
-import { getFields } from './api';
-import * as i18n from './translations';
-import { ConnectorField } from '../../../../case/common/api';
-
-interface FieldsState {
-  fields: ConnectorField[];
-  isLoading: boolean;
-  isError: boolean;
-}
-
-const initialData: FieldsState = {
-  fields: [],
-  isLoading: false,
-  isError: false,
-};
-
-export interface UseGetFields extends FieldsState {
-  fetchFields: () => void;
-}
-
-export const useGetFields = (connectorId: string, connectorType: string): UseGetFields => {
-  const [fieldsState, setFieldsState] = useState<FieldsState>(initialData);
-  const [, dispatchToaster] = useStateToaster();
-
-  const fetchFields = useCallback(() => {
-    let didCancel = false;
-    const abortCtrl = new AbortController();
-    const fetchData = async () => {
-      setFieldsState({
-        ...fieldsState,
-        isLoading: true,
-      });
-      try {
-        const response = await getFields(connectorId, connectorType, abortCtrl.signal);
-        if (!didCancel) {
-          setFieldsState({
-            fields: response,
-            isLoading: false,
-            isError: false,
-          });
-        }
-      } catch (error) {
-        if (!didCancel) {
-          errorToToaster({
-            title: i18n.ERROR_TITLE,
-            error: error.body && error.body.message ? new Error(error.body.message) : error,
-            dispatchToaster,
-          });
-          setFieldsState({
-            fields: [],
-            isLoading: false,
-            isError: true,
-          });
-        }
-      }
-    };
-    fetchData();
-    return () => {
-      didCancel = true;
-      abortCtrl.abort();
-    };
-  }, [connectorId, connectorType, dispatchToaster, fieldsState]);
-
-  useEffect(() => {
-    fetchFields();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return {
-    ...fieldsState,
-    fetchFields,
-  };
-};

From 62833a35df8e6d279113498b51d7ec68865b040f Mon Sep 17 00:00:00 2001
From: Scotty Bollinger <scotty.bollinger@elastic.co>
Date: Fri, 18 Dec 2020 10:32:13 -0600
Subject: [PATCH 20/75] [Workplace Search] Add AddSourceLogic tests (#86334)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Remove missed action calls

These were missed in the PR that split apart add_source_logic from source_logic. These 2 mthods aren’t even in this file. My mistake

* Change order of method calls

For some reason the test would not pass with the order of the methods the way they were. Changing the order to where the error callback is called first somehow made the test pass

* Fix bug where query params never set

Uncovered a bug while writing this test. After moving from ent-search to Kibana, it was discovered that the Kibana server did not work well with an empty question mark in the URL. The fix attempted to use lodash’s isEmpty metthod. The problem is that the URLSearchParams class instance created is not an object but has getter/setter functionality so isEmpty always returned true. This fixes it to actually work.

* Remove throw blocks

In ent-search we had to account for edge cases where the error state wasn’t bubbling up. One of these has been covered with global flash messages. The other will be tested at later date. A tech-debt item has been created.

Reference PRs:
https://github.com/elastic/ent-search/pull/394
https://github.com/elastic/ent-search/pull/701

* Export interfaces for use in tests

* Add tests for add_source_logic

* Remove weird import

I guess the IDE autocompleted that. Should not have been there

* Remove redundant test

This test was added before this comit when trying to get coverage for the throw blocks
https://github.com/elastic/kibana/pull/86334/commits/7ca9c2b2440eeff22d04bdce7290c136a07f320c

* Lint fixes
---
 .../add_source/add_source_logic.test.ts       | 553 ++++++++++++++++++
 .../components/add_source/add_source_logic.ts |  18 +-
 2 files changed, 560 insertions(+), 11 deletions(-)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_logic.test.ts

diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_logic.test.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_logic.test.ts
new file mode 100644
index 00000000000000..ba38b46aa05521
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_logic.test.ts
@@ -0,0 +1,553 @@
+/*
+ * 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 { resetContext } from 'kea';
+import { mockHttpValues } from '../../../../../__mocks__';
+jest.mock('../../../../../shared/http', () => ({
+  HttpLogic: {
+    values: { http: mockHttpValues.http },
+  },
+}));
+import { HttpLogic } from '../../../../../shared/http';
+
+jest.mock('../../../../../shared/flash_messages', () => ({
+  FlashMessagesLogic: { actions: { clearFlashMessages: jest.fn(), setQueuedMessages: jest.fn() } },
+  flashAPIErrors: jest.fn(),
+  setSuccessMessage: jest.fn(),
+  setQueuedSuccessMessage: jest.fn(),
+}));
+import { FlashMessagesLogic, flashAPIErrors } from '../../../../../shared/flash_messages';
+
+import { AppLogic } from '../../../../app_logic';
+jest.mock('../../../../app_logic', () => ({
+  AppLogic: { values: { isOrganization: true } },
+}));
+
+import { CustomSource } from '../../../../types';
+
+import { sourceConfigData } from '../../../../__mocks__/content_sources.mock';
+
+import {
+  AddSourceLogic,
+  SourceConfigData,
+  SourceConnectData,
+  OrganizationsMap,
+} from './add_source_logic';
+
+describe('AddSourceLogic', () => {
+  const defaultValues = {
+    dataLoading: true,
+    sectionLoading: true,
+    buttonLoading: false,
+    customSourceNameValue: '',
+    clientIdValue: '',
+    clientSecretValue: '',
+    baseUrlValue: '',
+    loginValue: '',
+    passwordValue: '',
+    subdomainValue: '',
+    indexPermissionsValue: false,
+    sourceConfigData: {} as SourceConfigData,
+    sourceConnectData: {} as SourceConnectData,
+    newCustomSource: {} as CustomSource,
+    currentServiceType: '',
+    githubOrganizations: [],
+    selectedGithubOrganizationsMap: {} as OrganizationsMap,
+    selectedGithubOrganizations: [],
+  };
+
+  const sourceConnectData = {
+    oauthUrl: 'http://foo',
+    serviceType: 'gmail',
+  };
+
+  const config = {
+    id: '123key',
+    serviceType: 'github',
+    githubOrganizations: ['foo', 'bar'],
+  };
+
+  const clearFlashMessagesSpy = jest.spyOn(FlashMessagesLogic.actions, 'clearFlashMessages');
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    resetContext({});
+    AddSourceLogic.mount();
+  });
+
+  it('has expected default values', () => {
+    expect(AddSourceLogic.values).toEqual(defaultValues);
+  });
+
+  describe('actions', () => {
+    it('setSourceConfigData', () => {
+      AddSourceLogic.actions.setSourceConfigData(sourceConfigData);
+
+      expect(AddSourceLogic.values.sourceConfigData).toEqual(sourceConfigData);
+      expect(AddSourceLogic.values.dataLoading).toEqual(false);
+      expect(AddSourceLogic.values.buttonLoading).toEqual(false);
+      expect(AddSourceLogic.values.clientIdValue).toEqual(
+        sourceConfigData.configuredFields.clientId
+      );
+      expect(AddSourceLogic.values.clientSecretValue).toEqual(
+        sourceConfigData.configuredFields.clientSecret
+      );
+      expect(AddSourceLogic.values.baseUrlValue).toEqual(sourceConfigData.configuredFields.baseUrl);
+    });
+
+    it('setSourceConnectData', () => {
+      AddSourceLogic.actions.setSourceConnectData(sourceConnectData);
+
+      expect(AddSourceLogic.values.sourceConnectData).toEqual(sourceConnectData);
+      expect(AddSourceLogic.values.buttonLoading).toEqual(false);
+    });
+
+    it('setClientIdValue', () => {
+      AddSourceLogic.actions.setClientIdValue('id');
+
+      expect(AddSourceLogic.values.clientIdValue).toEqual('id');
+    });
+
+    it('setClientSecretValue', () => {
+      AddSourceLogic.actions.setClientSecretValue('secret');
+
+      expect(AddSourceLogic.values.clientSecretValue).toEqual('secret');
+    });
+
+    it('setBaseUrlValue', () => {
+      AddSourceLogic.actions.setBaseUrlValue('secret');
+
+      expect(AddSourceLogic.values.baseUrlValue).toEqual('secret');
+    });
+
+    it('setCustomSourceNameValue', () => {
+      AddSourceLogic.actions.setCustomSourceNameValue('name');
+
+      expect(AddSourceLogic.values.customSourceNameValue).toEqual('name');
+    });
+
+    it('setSourceLoginValue', () => {
+      AddSourceLogic.actions.setSourceLoginValue('login');
+
+      expect(AddSourceLogic.values.loginValue).toEqual('login');
+    });
+
+    it('setSourcePasswordValue', () => {
+      AddSourceLogic.actions.setSourcePasswordValue('password');
+
+      expect(AddSourceLogic.values.passwordValue).toEqual('password');
+    });
+
+    it('setSourceSubdomainValue', () => {
+      AddSourceLogic.actions.setSourceSubdomainValue('subdomain');
+
+      expect(AddSourceLogic.values.subdomainValue).toEqual('subdomain');
+    });
+
+    it('setSourceIndexPermissionsValue', () => {
+      AddSourceLogic.actions.setSourceIndexPermissionsValue(true);
+
+      expect(AddSourceLogic.values.indexPermissionsValue).toEqual(true);
+    });
+
+    it('setCustomSourceData', () => {
+      const newCustomSource = {
+        accessToken: 'foo',
+        key: 'bar',
+        name: 'source',
+        id: '123key',
+      };
+
+      AddSourceLogic.actions.setCustomSourceData(newCustomSource);
+
+      expect(AddSourceLogic.values.newCustomSource).toEqual(newCustomSource);
+    });
+
+    it('setPreContentSourceConfigData', () => {
+      AddSourceLogic.actions.setPreContentSourceConfigData(config);
+
+      expect(AddSourceLogic.values.dataLoading).toEqual(false);
+      expect(AddSourceLogic.values.sectionLoading).toEqual(false);
+      expect(AddSourceLogic.values.currentServiceType).toEqual(config.serviceType);
+      expect(AddSourceLogic.values.githubOrganizations).toEqual(config.githubOrganizations);
+    });
+
+    it('setSelectedGithubOrganizations', () => {
+      AddSourceLogic.actions.setSelectedGithubOrganizations('foo');
+
+      expect(AddSourceLogic.values.selectedGithubOrganizationsMap).toEqual({ foo: true });
+    });
+
+    it('setButtonNotLoading', () => {
+      AddSourceLogic.actions.setButtonNotLoading();
+
+      expect(AddSourceLogic.values.buttonLoading).toEqual(false);
+    });
+
+    it('resetSourceState', () => {
+      AddSourceLogic.actions.resetSourceState();
+
+      expect(AddSourceLogic.values.dataLoading).toEqual(false);
+      expect(AddSourceLogic.values.buttonLoading).toEqual(false);
+      expect(AddSourceLogic.values.clientIdValue).toEqual('');
+      expect(AddSourceLogic.values.clientSecretValue).toEqual('');
+      expect(AddSourceLogic.values.baseUrlValue).toEqual('');
+      expect(AddSourceLogic.values.loginValue).toEqual('');
+      expect(AddSourceLogic.values.passwordValue).toEqual('');
+      expect(AddSourceLogic.values.subdomainValue).toEqual('');
+      expect(AddSourceLogic.values.indexPermissionsValue).toEqual(false);
+      expect(AddSourceLogic.values.customSourceNameValue).toEqual('');
+      expect(AddSourceLogic.values.newCustomSource).toEqual({});
+      expect(AddSourceLogic.values.currentServiceType).toEqual('');
+      expect(AddSourceLogic.values.githubOrganizations).toEqual([]);
+      expect(AddSourceLogic.values.selectedGithubOrganizationsMap).toEqual({});
+    });
+
+    it('handles fallback states', () => {
+      const { publicKey, privateKey, consumerKey } = sourceConfigData.configuredFields;
+      AddSourceLogic.actions.setSourceConfigData({
+        ...sourceConfigData,
+        configuredFields: {
+          publicKey,
+          privateKey,
+          consumerKey,
+        },
+      });
+
+      expect(AddSourceLogic.values.clientIdValue).toEqual('');
+      expect(AddSourceLogic.values.clientSecretValue).toEqual('');
+      expect(AddSourceLogic.values.baseUrlValue).toEqual('');
+    });
+  });
+
+  describe('listeners', () => {
+    describe('organization context', () => {
+      describe('getSourceConfigData', () => {
+        it('calls API and sets values', async () => {
+          const setSourceConfigDataSpy = jest.spyOn(AddSourceLogic.actions, 'setSourceConfigData');
+          const promise = Promise.resolve(sourceConfigData);
+          (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+          AddSourceLogic.actions.getSourceConfigData('github');
+          expect(HttpLogic.values.http.get).toHaveBeenCalledWith(
+            '/api/workplace_search/org/settings/connectors/github'
+          );
+          await promise;
+          expect(setSourceConfigDataSpy).toHaveBeenCalledWith(sourceConfigData);
+        });
+
+        it('handles error', async () => {
+          const promise = Promise.reject('this is an error');
+          (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+          AddSourceLogic.actions.getSourceConfigData('github');
+          try {
+            await promise;
+          } catch {
+            // Do nothing
+          }
+          expect(flashAPIErrors).toHaveBeenCalledWith('this is an error');
+        });
+      });
+
+      describe('getSourceConnectData', () => {
+        const successCallback = jest.fn();
+
+        it('calls API and sets values', async () => {
+          const setButtonNotLoadingSpy = jest.spyOn(AddSourceLogic.actions, 'setButtonNotLoading');
+          const setSourceConnectDataSpy = jest.spyOn(
+            AddSourceLogic.actions,
+            'setSourceConnectData'
+          );
+          const promise = Promise.resolve(sourceConnectData);
+          (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+          AddSourceLogic.actions.getSourceConnectData('github', successCallback);
+
+          expect(clearFlashMessagesSpy).toHaveBeenCalled();
+          expect(AddSourceLogic.values.buttonLoading).toEqual(true);
+          expect(HttpLogic.values.http.get).toHaveBeenCalledWith(
+            '/api/workplace_search/org/sources/github/prepare'
+          );
+          await promise;
+          expect(setSourceConnectDataSpy).toHaveBeenCalledWith(sourceConnectData);
+          expect(successCallback).toHaveBeenCalledWith(sourceConnectData.oauthUrl);
+          expect(setButtonNotLoadingSpy).toHaveBeenCalled();
+        });
+
+        it('appends query params', () => {
+          AddSourceLogic.actions.setSourceSubdomainValue('subdomain');
+          AddSourceLogic.actions.setSourceIndexPermissionsValue(true);
+          AddSourceLogic.actions.getSourceConnectData('github', successCallback);
+
+          expect(HttpLogic.values.http.get).toHaveBeenCalledWith(
+            '/api/workplace_search/org/sources/github/prepare?subdomain=subdomain&index_permissions=true'
+          );
+        });
+
+        it('handles error', async () => {
+          const promise = Promise.reject('this is an error');
+          (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+          AddSourceLogic.actions.getSourceConnectData('github', successCallback);
+          try {
+            await promise;
+          } catch {
+            // Do nothing
+          }
+          expect(flashAPIErrors).toHaveBeenCalledWith('this is an error');
+        });
+      });
+
+      describe('getSourceReConnectData', () => {
+        it('calls API and sets values', async () => {
+          const setSourceConnectDataSpy = jest.spyOn(
+            AddSourceLogic.actions,
+            'setSourceConnectData'
+          );
+          const promise = Promise.resolve(sourceConnectData);
+          (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+          AddSourceLogic.actions.getSourceReConnectData('github');
+
+          expect(HttpLogic.values.http.get).toHaveBeenCalledWith(
+            '/api/workplace_search/org/sources/github/reauth_prepare'
+          );
+          await promise;
+          expect(setSourceConnectDataSpy).toHaveBeenCalledWith(sourceConnectData);
+        });
+
+        it('handles error', async () => {
+          const promise = Promise.reject('this is an error');
+          (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+          AddSourceLogic.actions.getSourceReConnectData('github');
+          try {
+            await promise;
+          } catch {
+            // Do nothing
+          }
+          expect(flashAPIErrors).toHaveBeenCalledWith('this is an error');
+        });
+      });
+
+      describe('getPreContentSourceConfigData', () => {
+        it('calls API and sets values', async () => {
+          const setPreContentSourceConfigDataSpy = jest.spyOn(
+            AddSourceLogic.actions,
+            'setPreContentSourceConfigData'
+          );
+          const promise = Promise.resolve(config);
+          (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+          AddSourceLogic.actions.getPreContentSourceConfigData('123');
+
+          expect(HttpLogic.values.http.get).toHaveBeenCalledWith(
+            '/api/workplace_search/org/pre_sources/123'
+          );
+          await promise;
+          expect(setPreContentSourceConfigDataSpy).toHaveBeenCalledWith(config);
+        });
+
+        it('handles error', async () => {
+          const promise = Promise.reject('this is an error');
+          (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+          AddSourceLogic.actions.getPreContentSourceConfigData('123');
+          try {
+            await promise;
+          } catch {
+            // Do nothing
+          }
+          expect(flashAPIErrors).toHaveBeenCalledWith('this is an error');
+        });
+      });
+
+      describe('saveSourceConfig', () => {
+        let params: any;
+
+        beforeEach(() => {
+          AddSourceLogic.actions.setSourceConfigData(sourceConfigData);
+
+          params = {
+            base_url: AddSourceLogic.values.baseUrlValue,
+            client_id: AddSourceLogic.values.clientIdValue,
+            client_secret: AddSourceLogic.values.clientSecretValue,
+            service_type: sourceConfigData.serviceType,
+            private_key: sourceConfigData.configuredFields?.privateKey,
+            public_key: sourceConfigData.configuredFields?.publicKey,
+            consumer_key: sourceConfigData.configuredFields?.consumerKey,
+          };
+        });
+
+        it('calls API and sets values when updating', async () => {
+          const successCallback = jest.fn();
+          const setButtonNotLoadingSpy = jest.spyOn(AddSourceLogic.actions, 'setButtonNotLoading');
+          const setSourceConfigDataSpy = jest.spyOn(AddSourceLogic.actions, 'setSourceConfigData');
+          const promise = Promise.resolve({ sourceConfigData });
+          (HttpLogic.values.http.put as jest.Mock).mockReturnValue(promise);
+
+          AddSourceLogic.actions.saveSourceConfig(true, successCallback);
+
+          expect(clearFlashMessagesSpy).toHaveBeenCalled();
+          expect(AddSourceLogic.values.buttonLoading).toEqual(true);
+          expect(
+            HttpLogic.values.http.put
+          ).toHaveBeenCalledWith(
+            `/api/workplace_search/org/settings/connectors/${sourceConfigData.serviceType}`,
+            { body: JSON.stringify({ params }) }
+          );
+
+          await promise;
+          expect(successCallback).toHaveBeenCalled();
+          expect(setSourceConfigDataSpy).toHaveBeenCalledWith({ sourceConfigData });
+          expect(setButtonNotLoadingSpy).toHaveBeenCalled();
+        });
+
+        it('calls API when creating with empty attributes', () => {
+          AddSourceLogic.actions.setClientIdValue('');
+          AddSourceLogic.actions.setClientSecretValue('');
+          AddSourceLogic.actions.setBaseUrlValue('');
+          AddSourceLogic.actions.saveSourceConfig(false);
+
+          const createParams = {
+            service_type: sourceConfigData.serviceType,
+            private_key: sourceConfigData.configuredFields?.privateKey,
+            public_key: sourceConfigData.configuredFields?.publicKey,
+            consumer_key: sourceConfigData.configuredFields?.consumerKey,
+          };
+
+          expect(HttpLogic.values.http.post).toHaveBeenCalledWith(
+            '/api/workplace_search/org/settings/connectors',
+            {
+              body: JSON.stringify({ params: createParams }),
+            }
+          );
+        });
+
+        it('handles error', async () => {
+          const promise = Promise.reject('this is an error');
+          (HttpLogic.values.http.put as jest.Mock).mockReturnValue(promise);
+
+          AddSourceLogic.actions.saveSourceConfig(true);
+          try {
+            await promise;
+          } catch {
+            // Do nothing
+          }
+          expect(flashAPIErrors).toHaveBeenCalledWith('this is an error');
+        });
+      });
+
+      describe('createContentSource', () => {
+        const successCallback = jest.fn();
+        const errorCallback = jest.fn();
+
+        const serviceType = 'zendesk';
+        const name = 'name';
+        const login = 'login';
+        const password = 'password';
+        const indexPermissions = false;
+
+        let params: any;
+
+        beforeEach(() => {
+          AddSourceLogic.actions.setCustomSourceNameValue(name);
+          AddSourceLogic.actions.setSourceLoginValue(login);
+          AddSourceLogic.actions.setSourcePasswordValue(password);
+          AddSourceLogic.actions.setPreContentSourceConfigData(config);
+          AddSourceLogic.actions.setSourceIndexPermissionsValue(indexPermissions);
+          AddSourceLogic.actions.setSelectedGithubOrganizations('foo');
+
+          params = {
+            service_type: serviceType,
+            name,
+            login,
+            password,
+            organizations: ['foo'],
+          };
+        });
+
+        it('calls API and sets values', async () => {
+          const setButtonNotLoadingSpy = jest.spyOn(AddSourceLogic.actions, 'setButtonNotLoading');
+          const setCustomSourceDataSpy = jest.spyOn(AddSourceLogic.actions, 'setCustomSourceData');
+          const promise = Promise.resolve({ sourceConfigData });
+          (HttpLogic.values.http.post as jest.Mock).mockReturnValue(promise);
+
+          AddSourceLogic.actions.createContentSource(serviceType, successCallback, errorCallback);
+
+          expect(clearFlashMessagesSpy).toHaveBeenCalled();
+          expect(AddSourceLogic.values.buttonLoading).toEqual(true);
+          expect(HttpLogic.values.http.post).toHaveBeenCalledWith(
+            '/api/workplace_search/org/create_source',
+            {
+              body: JSON.stringify({ ...params }),
+            }
+          );
+          await promise;
+          expect(setCustomSourceDataSpy).toHaveBeenCalledWith({ sourceConfigData });
+          expect(successCallback).toHaveBeenCalled();
+          expect(setButtonNotLoadingSpy).toHaveBeenCalled();
+        });
+
+        it('handles error', async () => {
+          const promise = Promise.reject('this is an error');
+          (HttpLogic.values.http.post as jest.Mock).mockReturnValue(promise);
+
+          AddSourceLogic.actions.createContentSource(serviceType, successCallback, errorCallback);
+          try {
+            await promise;
+          } catch {
+            // Do nothing
+          }
+          expect(errorCallback).toHaveBeenCalled();
+          expect(flashAPIErrors).toHaveBeenCalledWith('this is an error');
+        });
+      });
+    });
+
+    describe('account context routes', () => {
+      beforeEach(() => {
+        AppLogic.values.isOrganization = false;
+      });
+
+      it('getSourceConnectData', () => {
+        AddSourceLogic.actions.getSourceConnectData('github', jest.fn());
+
+        expect(HttpLogic.values.http.get).toHaveBeenCalledWith(
+          '/api/workplace_search/account/sources/github/prepare'
+        );
+      });
+
+      it('getSourceReConnectData', () => {
+        AddSourceLogic.actions.getSourceReConnectData('123');
+
+        expect(HttpLogic.values.http.get).toHaveBeenCalledWith(
+          '/api/workplace_search/account/sources/123/reauth_prepare'
+        );
+      });
+
+      it('getPreContentSourceConfigData', () => {
+        AddSourceLogic.actions.getPreContentSourceConfigData('123');
+
+        expect(HttpLogic.values.http.get).toHaveBeenCalledWith(
+          '/api/workplace_search/account/pre_sources/123'
+        );
+      });
+
+      it('createContentSource', () => {
+        AddSourceLogic.actions.createContentSource('github', jest.fn());
+
+        expect(HttpLogic.values.http.post).toHaveBeenCalledWith(
+          '/api/workplace_search/account/create_source',
+          {
+            body: JSON.stringify({ service_type: 'github' }),
+          }
+        );
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_logic.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_logic.ts
index bea69a86edebbb..c487b584d8acef 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_logic.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_logic.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { keys, pickBy, isEmpty } from 'lodash';
+import { keys, pickBy } from 'lodash';
 
 import { kea, MakeLogicType } from 'kea';
 
@@ -55,7 +55,7 @@ export interface AddSourceActions {
   setButtonNotLoading(): void;
 }
 
-interface SourceConfigData {
+export interface SourceConfigData {
   serviceType: string;
   name: string;
   configured: boolean;
@@ -73,12 +73,12 @@ interface SourceConfigData {
   accountContextOnly?: boolean;
 }
 
-interface SourceConnectData {
+export interface SourceConnectData {
   oauthUrl: string;
   serviceType: string;
 }
 
-interface OrganizationsMap {
+export interface OrganizationsMap {
   [key: string]: string | boolean;
 }
 
@@ -160,7 +160,6 @@ export const AddSourceLogic = kea<MakeLogicType<AddSourceValues, AddSourceAction
     dataLoading: [
       true,
       {
-        onInitializeSource: () => false,
         setSourceConfigData: () => false,
         resetSourceState: () => false,
         setPreContentSourceConfigData: () => false,
@@ -182,7 +181,6 @@ export const AddSourceLogic = kea<MakeLogicType<AddSourceValues, AddSourceAction
       true,
       {
         getPreContentSourceConfigData: () => true,
-        setSearchResults: () => false,
         setPreContentSourceConfigData: () => false,
       },
     ],
@@ -306,8 +304,8 @@ export const AddSourceLogic = kea<MakeLogicType<AddSourceValues, AddSourceAction
       const params = new URLSearchParams();
       if (subdomain) params.append('subdomain', subdomain);
       if (indexPermissions) params.append('index_permissions', indexPermissions.toString());
-
-      const paramsString = !isEmpty(params) ? `?${params}` : '';
+      const hasParams = params.has('subdomain') || params.has('index_permissions');
+      const paramsString = hasParams ? `?${params}` : '';
 
       try {
         const response = await HttpLogic.values.http.get(`${route}${paramsString}`);
@@ -375,6 +373,7 @@ export const AddSourceLogic = kea<MakeLogicType<AddSourceValues, AddSourceAction
         const response = await http(route, {
           body: JSON.stringify({ params }),
         });
+        if (successCallback) successCallback();
         if (isUpdating) {
           setSuccessMessage(
             i18n.translate(
@@ -386,10 +385,8 @@ export const AddSourceLogic = kea<MakeLogicType<AddSourceValues, AddSourceAction
           );
         }
         actions.setSourceConfigData(response);
-        if (successCallback) successCallback();
       } catch (e) {
         flashAPIErrors(e);
-        if (!isUpdating) throw new Error(e);
       } finally {
         actions.setButtonNotLoading();
       }
@@ -432,7 +429,6 @@ export const AddSourceLogic = kea<MakeLogicType<AddSourceValues, AddSourceAction
       } catch (e) {
         flashAPIErrors(e);
         if (errorCallback) errorCallback();
-        throw new Error('Auth Error');
       } finally {
         actions.setButtonNotLoading();
       }

From 5376d6c8f1c9b1cd0dd879ccbf419e2c9ec697a2 Mon Sep 17 00:00:00 2001
From: Dan Panzarella <pzl@users.noreply.github.com>
Date: Fri, 18 Dec 2020 11:35:15 -0500
Subject: [PATCH 21/75] [Security Solution] Fix Policy-License-Watcher payload
 (#86185)

---
 .../endpoint/lib/policy/license_watch.ts      | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/security_solution/server/endpoint/lib/policy/license_watch.ts b/x-pack/plugins/security_solution/server/endpoint/lib/policy/license_watch.ts
index cae3b9f33850ab..2f0c3bf8fd5ba9 100644
--- a/x-pack/plugins/security_solution/server/endpoint/lib/policy/license_watch.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/lib/policy/license_watch.ts
@@ -12,7 +12,11 @@ import {
   SavedObjectsClientContract,
   SavedObjectsServiceStart,
 } from 'src/core/server';
-import { PackagePolicy, PACKAGE_POLICY_SAVED_OBJECT_TYPE } from '../../../../../fleet/common';
+import {
+  PackagePolicy,
+  PACKAGE_POLICY_SAVED_OBJECT_TYPE,
+  UpdatePackagePolicy,
+} from '../../../../../fleet/common';
 import { PackagePolicyServiceInterface } from '../../../../../fleet/server';
 import { ILicense } from '../../../../../licensing/common/types';
 import {
@@ -91,18 +95,29 @@ export class PolicyWatcher {
         return;
       }
       response.items.forEach(async (policy) => {
-        const policyConfig = policy.inputs[0].config?.policy.value;
+        const updatePolicy: UpdatePackagePolicy = {
+          name: policy.name,
+          description: policy.description,
+          namespace: policy.namespace,
+          enabled: policy.enabled,
+          policy_id: policy.policy_id,
+          output_id: policy.output_id,
+          package: policy.package,
+          inputs: policy.inputs,
+          version: policy.version,
+        };
+        const policyConfig = updatePolicy.inputs[0].config?.policy.value;
         if (!isEndpointPolicyValidForLicense(policyConfig, license)) {
-          policy.inputs[0].config!.policy.value = unsetPolicyFeaturesAboveLicenseLevel(
+          updatePolicy.inputs[0].config!.policy.value = unsetPolicyFeaturesAboveLicenseLevel(
             policyConfig,
             license
           );
           try {
-            await this.policyService.update(this.soClient, policy.id, policy);
+            await this.policyService.update(this.soClient, policy.id, updatePolicy);
           } catch (e) {
             // try again for transient issues
             try {
-              await this.policyService.update(this.soClient, policy.id, policy);
+              await this.policyService.update(this.soClient, policy.id, updatePolicy);
             } catch (ee) {
               this.logger.warn(
                 `Unable to remove platinum features from policy ${policy.id}: ${ee.message}`

From 0155974591f9a385134fd916eca76c71705c79c8 Mon Sep 17 00:00:00 2001
From: "Christiane (Tina) Heiligers" <christiane.heiligers@elastic.co>
Date: Fri, 18 Dec 2020 10:53:34 -0700
Subject: [PATCH 22/75] Migrates elasticsearch client in the settings usage
 collector (#86397)

---
 .../xpack_legacy/server/routes/settings.test.ts        | 10 ++++++++--
 x-pack/plugins/xpack_legacy/server/routes/settings.ts  |  7 +++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/xpack_legacy/server/routes/settings.test.ts b/x-pack/plugins/xpack_legacy/server/routes/settings.test.ts
index 5d22e22ee0eb6f..5d3a2c105c4a45 100644
--- a/x-pack/plugins/xpack_legacy/server/routes/settings.test.ts
+++ b/x-pack/plugins/xpack_legacy/server/routes/settings.test.ts
@@ -24,6 +24,12 @@ import { registerSettingsRoute } from './settings';
 type HttpService = ReturnType<typeof createHttpServer>;
 type HttpSetup = UnwrapPromise<ReturnType<HttpService['setup']>>;
 
+export function mockGetClusterInfo(clusterInfo: any) {
+  const esClient = elasticsearchServiceMock.createScopedClusterClient().asCurrentUser;
+  // @ts-ignore we only care about the response body
+  esClient.info.mockResolvedValue({ body: { ...clusterInfo } });
+  return esClient;
+}
 describe('/api/settings', () => {
   let server: HttpService;
   let httpSetup: HttpSetup;
@@ -31,7 +37,7 @@ describe('/api/settings', () => {
   let mockApiCaller: jest.Mocked<LegacyAPICaller>;
 
   beforeEach(async () => {
-    mockApiCaller = jest.fn().mockResolvedValue({ cluster_uuid: 'yyy-yyyyy' });
+    mockApiCaller = jest.fn();
     server = createHttpServer();
     httpSetup = await server.setup({
       context: contextServiceMock.createSetupContract({
@@ -43,7 +49,7 @@ describe('/api/settings', () => {
               },
             },
             client: {
-              asCurrentUser: elasticsearchServiceMock.createScopedClusterClient().asCurrentUser,
+              asCurrentUser: mockGetClusterInfo({ cluster_uuid: 'yyy-yyyyy' }),
             },
           },
           savedObjects: {
diff --git a/x-pack/plugins/xpack_legacy/server/routes/settings.ts b/x-pack/plugins/xpack_legacy/server/routes/settings.ts
index 9a30ca30616b75..93dc6898f0c2e7 100644
--- a/x-pack/plugins/xpack_legacy/server/routes/settings.ts
+++ b/x-pack/plugins/xpack_legacy/server/routes/settings.ts
@@ -58,9 +58,9 @@ export function registerSettingsRoute({
       const settings =
         (await settingsCollector.fetch(collectorFetchContext)) ??
         settingsCollector.getEmailValueStructure(null);
-      const { cluster_uuid: uuid } = await callAsCurrentUser('info', {
-        filterPath: 'cluster_uuid',
-      });
+
+      const { body } = await collectorFetchContext.esClient.info({ filter_path: 'cluster_uuid' });
+      const uuid: string = body.cluster_uuid;
 
       const overallStatus = await overallStatus$.pipe(first()).toPromise();
 
@@ -76,7 +76,6 @@ export function registerSettingsRoute({
         snapshot: SNAPSHOT_REGEX.test(config.kibanaVersion),
         status: ServiceStatusToLegacyState[overallStatus.level.toString()],
       };
-
       return res.ok({
         body: {
           cluster_uuid: uuid,

From 6a517411ebcdba1499e210111868e5aa925b07d9 Mon Sep 17 00:00:00 2001
From: "Christiane (Tina) Heiligers" <christiane.heiligers@elastic.co>
Date: Fri, 18 Dec 2020 10:55:46 -0700
Subject: [PATCH 23/75] Migrates elasticsearch client in the
 kibana_usage_collector (#86406)

---
 .../kibana/get_saved_object_counts.test.ts    | 23 ++++++++++++++-----
 .../kibana/get_saved_object_counts.ts         |  8 +++----
 .../server/collectors/kibana/index.test.ts    |  7 ++++--
 .../kibana/kibana_usage_collector.ts          |  4 ++--
 4 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/plugins/kibana_usage_collection/server/collectors/kibana/get_saved_object_counts.test.ts b/src/plugins/kibana_usage_collection/server/collectors/kibana/get_saved_object_counts.test.ts
index a7681e17664272..64f1088dc33923 100644
--- a/src/plugins/kibana_usage_collection/server/collectors/kibana/get_saved_object_counts.test.ts
+++ b/src/plugins/kibana_usage_collection/server/collectors/kibana/get_saved_object_counts.test.ts
@@ -16,14 +16,25 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
+import { elasticsearchServiceMock } from '../../../../../../src/core/server/mocks';
 import { getSavedObjectsCounts } from './get_saved_object_counts';
 
+export function mockGetSavedObjectsCounts(params: any) {
+  const esClient = elasticsearchServiceMock.createClusterClient().asInternalUser;
+  esClient.search.mockResolvedValue(
+    // @ts-ignore we only care about the response body
+    {
+      body: { ...params },
+    }
+  );
+  return esClient;
+}
+
 describe('getSavedObjectsCounts', () => {
   test('Get all the saved objects equal to 0 because no results were found', async () => {
-    const callCluster = jest.fn(() => ({}));
+    const esClient = mockGetSavedObjectsCounts({});
 
-    const results = await getSavedObjectsCounts(callCluster as any, '.kibana');
+    const results = await getSavedObjectsCounts(esClient, '.kibana');
     expect(results).toStrictEqual({
       dashboard: { total: 0 },
       visualization: { total: 0 },
@@ -35,7 +46,7 @@ describe('getSavedObjectsCounts', () => {
   });
 
   test('Merge the zeros with the results', async () => {
-    const callCluster = jest.fn(() => ({
+    const esClient = mockGetSavedObjectsCounts({
       aggregations: {
         types: {
           buckets: [
@@ -46,9 +57,9 @@ describe('getSavedObjectsCounts', () => {
           ],
         },
       },
-    }));
+    });
 
-    const results = await getSavedObjectsCounts(callCluster as any, '.kibana');
+    const results = await getSavedObjectsCounts(esClient, '.kibana');
     expect(results).toStrictEqual({
       dashboard: { total: 1 },
       visualization: { total: 0 },
diff --git a/src/plugins/kibana_usage_collection/server/collectors/kibana/get_saved_object_counts.ts b/src/plugins/kibana_usage_collection/server/collectors/kibana/get_saved_object_counts.ts
index e88d90fe5b24ba..65cc3643a88cb6 100644
--- a/src/plugins/kibana_usage_collection/server/collectors/kibana/get_saved_object_counts.ts
+++ b/src/plugins/kibana_usage_collection/server/collectors/kibana/get_saved_object_counts.ts
@@ -27,7 +27,7 @@
  */
 
 import { snakeCase } from 'lodash';
-import { LegacyAPICaller } from 'kibana/server';
+import { ElasticsearchClient } from 'src/core/server';
 
 const TYPES = [
   'dashboard',
@@ -48,7 +48,7 @@ export interface KibanaSavedObjectCounts {
 }
 
 export async function getSavedObjectsCounts(
-  callCluster: LegacyAPICaller,
+  esClient: ElasticsearchClient,
   kibanaIndex: string // Typically '.kibana'. We might need a way to obtain it from the SavedObjects client (or the SavedObjects client to provide a way to run aggregations?)
 ): Promise<KibanaSavedObjectCounts> {
   const savedObjectCountSearchParams = {
@@ -67,9 +67,9 @@ export async function getSavedObjectsCounts(
       },
     },
   };
-  const resp = await callCluster('search', savedObjectCountSearchParams);
+  const { body } = await esClient.search(savedObjectCountSearchParams);
   const buckets: Array<{ key: string; doc_count: number }> =
-    resp.aggregations?.types?.buckets || [];
+    body.aggregations?.types?.buckets || [];
 
   // Initialise the object with all zeros for all the types
   const allZeros: KibanaSavedObjectCounts = TYPES.reduce(
diff --git a/src/plugins/kibana_usage_collection/server/collectors/kibana/index.test.ts b/src/plugins/kibana_usage_collection/server/collectors/kibana/index.test.ts
index 83cac1d456a3ae..dee9ca4d32c5fb 100644
--- a/src/plugins/kibana_usage_collection/server/collectors/kibana/index.test.ts
+++ b/src/plugins/kibana_usage_collection/server/collectors/kibana/index.test.ts
@@ -20,12 +20,13 @@
 import {
   loggingSystemMock,
   pluginInitializerContextConfigMock,
+  elasticsearchServiceMock,
 } from '../../../../../core/server/mocks';
 import {
   Collector,
+  createCollectorFetchContextMock,
   createUsageCollectionSetupMock,
 } from '../../../../usage_collection/server/usage_collection.mock';
-import { createCollectorFetchContextMock } from '../../../../usage_collection/server/mocks';
 import { registerKibanaUsageCollector } from './';
 
 const logger = loggingSystemMock.createLogger();
@@ -43,7 +44,9 @@ describe('telemetry_kibana', () => {
 
   const getMockFetchClients = (hits?: unknown[]) => {
     const fetchParamsMock = createCollectorFetchContextMock();
-    fetchParamsMock.callCluster.mockResolvedValue({ hits: { hits } });
+    const esClient = elasticsearchServiceMock.createClusterClient().asInternalUser;
+    esClient.search.mockResolvedValue({ body: { hits: { hits } } } as any);
+    fetchParamsMock.esClient = esClient;
     return fetchParamsMock;
   };
 
diff --git a/src/plugins/kibana_usage_collection/server/collectors/kibana/kibana_usage_collector.ts b/src/plugins/kibana_usage_collection/server/collectors/kibana/kibana_usage_collector.ts
index 6c2e0a2c926ad0..5dd39d172e1c2c 100644
--- a/src/plugins/kibana_usage_collection/server/collectors/kibana/kibana_usage_collector.ts
+++ b/src/plugins/kibana_usage_collection/server/collectors/kibana/kibana_usage_collector.ts
@@ -43,13 +43,13 @@ export function getKibanaUsageCollector(
       graph_workspace: { total: { type: 'long' } },
       timelion_sheet: { total: { type: 'long' } },
     },
-    async fetch({ callCluster }) {
+    async fetch({ esClient }) {
       const {
         kibana: { index },
       } = await legacyConfig$.pipe(take(1)).toPromise();
       return {
         index,
-        ...(await getSavedObjectsCounts(callCluster, index)),
+        ...(await getSavedObjectsCounts(esClient, index)),
       };
     },
   });

From fc7ae0e1a682748c67bbe81fd8de76b148742dc2 Mon Sep 17 00:00:00 2001
From: Angela Chuang <6295984+angorayc@users.noreply.github.com>
Date: Fri, 18 Dec 2020 18:02:19 +0000
Subject: [PATCH 24/75] [Security Solution] Fix 'disable usage data here.' link
 (#86452)

* fix 'disable usage data here.' link

* update snapshot

* update link

* update mocks

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 src/plugins/telemetry/common/constants.ts            |  2 +-
 .../opted_in_notice_banner.test.tsx.snap             |  2 +-
 .../components/opted_in_notice_banner.test.tsx       | 12 ++++++++++--
 .../public/components/opted_in_notice_banner.tsx     |  8 ++++++--
 src/plugins/telemetry/public/mocks.ts                |  1 +
 src/plugins/telemetry/public/plugin.ts               |  1 +
 .../render_opted_in_notice_banner.test.ts            |  4 ++++
 .../render_opted_in_notice_banner.tsx                |  5 +++--
 .../telemetry_notifications.ts                       |  6 +++++-
 9 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/plugins/telemetry/common/constants.ts b/src/plugins/telemetry/common/constants.ts
index fc77332c18fc90..2fa8b32f682913 100644
--- a/src/plugins/telemetry/common/constants.ts
+++ b/src/plugins/telemetry/common/constants.ts
@@ -49,7 +49,7 @@ export const LOCALSTORAGE_KEY = 'telemetry.data';
 /**
  * Link to Advanced Settings.
  */
-export const PATH_TO_ADVANCED_SETTINGS = 'management/kibana/settings';
+export const PATH_TO_ADVANCED_SETTINGS = '/app/management/kibana/settings';
 
 /**
  * Link to the Elastic Telemetry privacy statement.
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 62998da73d6f93..897e3b2761c744 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
@@ -10,7 +10,7 @@ exports[`OptInDetailsComponent renders as expected 1`] = `
     values={
       Object {
         "disableLink": <EuiLink
-          href="management/kibana/settings"
+          href="/app/management/kibana/settings"
           onClick={[Function]}
         >
           <FormattedMessage
diff --git a/src/plugins/telemetry/public/components/opted_in_notice_banner.test.tsx b/src/plugins/telemetry/public/components/opted_in_notice_banner.test.tsx
index 6c5fb2473023eb..11f888b450f989 100644
--- a/src/plugins/telemetry/public/components/opted_in_notice_banner.test.tsx
+++ b/src/plugins/telemetry/public/components/opted_in_notice_banner.test.tsx
@@ -20,15 +20,23 @@ import React from 'react';
 import { EuiButton } from '@elastic/eui';
 import { shallowWithIntl } from '@kbn/test/jest';
 import { OptedInNoticeBanner } from './opted_in_notice_banner';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { httpServiceMock } from '../../../../core/public/http/http_service.mock';
+
+const mockHttp = httpServiceMock.createStartContract();
 
 describe('OptInDetailsComponent', () => {
   it('renders as expected', () => {
-    expect(shallowWithIntl(<OptedInNoticeBanner onSeenBanner={() => {}} />)).toMatchSnapshot();
+    expect(
+      shallowWithIntl(<OptedInNoticeBanner onSeenBanner={() => {}} http={mockHttp} />)
+    ).toMatchSnapshot();
   });
 
   it('fires the "onSeenBanner" prop when a link is clicked', () => {
     const onLinkClick = jest.fn();
-    const component = shallowWithIntl(<OptedInNoticeBanner onSeenBanner={onLinkClick} />);
+    const component = shallowWithIntl(
+      <OptedInNoticeBanner onSeenBanner={onLinkClick} http={mockHttp} />
+    );
 
     const button = component.findWhere((n) => n.type() === EuiButton);
 
diff --git a/src/plugins/telemetry/public/components/opted_in_notice_banner.tsx b/src/plugins/telemetry/public/components/opted_in_notice_banner.tsx
index 090893964c8810..46ae17171203ce 100644
--- a/src/plugins/telemetry/public/components/opted_in_notice_banner.tsx
+++ b/src/plugins/telemetry/public/components/opted_in_notice_banner.tsx
@@ -24,14 +24,18 @@ import { EuiButton, EuiLink, EuiCallOut, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { PATH_TO_ADVANCED_SETTINGS, PRIVACY_STATEMENT_URL } from '../../common/constants';
+import { HttpSetup } from '../../../../core/public';
 
 interface Props {
+  http: HttpSetup;
   onSeenBanner: () => any;
 }
 
 export class OptedInNoticeBanner extends React.PureComponent<Props> {
   render() {
-    const { onSeenBanner } = this.props;
+    const { onSeenBanner, http } = this.props;
+    const basePath = http.basePath.get();
+
     const bannerTitle = i18n.translate('telemetry.telemetryOptedInNoticeTitle', {
       defaultMessage: 'Help us improve the Elastic Stack',
     });
@@ -56,7 +60,7 @@ export class OptedInNoticeBanner extends React.PureComponent<Props> {
               </EuiLink>
             ),
             disableLink: (
-              <EuiLink href={PATH_TO_ADVANCED_SETTINGS} onClick={onSeenBanner}>
+              <EuiLink href={`${basePath}${PATH_TO_ADVANCED_SETTINGS}`} onClick={onSeenBanner}>
                 <FormattedMessage
                   id="telemetry.telemetryOptedInDisableUsage"
                   defaultMessage="disable usage data here"
diff --git a/src/plugins/telemetry/public/mocks.ts b/src/plugins/telemetry/public/mocks.ts
index 4a2e0fde3cc119..1354b6808ce9de 100644
--- a/src/plugins/telemetry/public/mocks.ts
+++ b/src/plugins/telemetry/public/mocks.ts
@@ -76,6 +76,7 @@ export function mockTelemetryNotifications({
   telemetryService: TelemetryService;
 }) {
   return new TelemetryNotifications({
+    http: httpServiceMock.createSetupContract(),
     overlays: overlayServiceMock.createStartContract(),
     telemetryService,
   });
diff --git a/src/plugins/telemetry/public/plugin.ts b/src/plugins/telemetry/public/plugin.ts
index ed9c73da404032..9ca9d396bb171e 100644
--- a/src/plugins/telemetry/public/plugin.ts
+++ b/src/plugins/telemetry/public/plugin.ts
@@ -104,6 +104,7 @@ export class TelemetryPlugin implements Plugin<TelemetryPluginSetup, TelemetryPl
     this.telemetryService.userCanChangeSettings = this.canUserChangeSettings;
 
     this.telemetryNotifications = new TelemetryNotifications({
+      http,
       overlays,
       telemetryService: this.telemetryService,
     });
diff --git a/src/plugins/telemetry/public/services/telemetry_notifications/render_opted_in_notice_banner.test.ts b/src/plugins/telemetry/public/services/telemetry_notifications/render_opted_in_notice_banner.test.ts
index 2d175024a74fb6..64a3ea51961445 100644
--- a/src/plugins/telemetry/public/services/telemetry_notifications/render_opted_in_notice_banner.test.ts
+++ b/src/plugins/telemetry/public/services/telemetry_notifications/render_opted_in_notice_banner.test.ts
@@ -20,14 +20,18 @@
 import { renderOptedInNoticeBanner } from './render_opted_in_notice_banner';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { overlayServiceMock } from '../../../../../core/public/overlays/overlay_service.mock';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { httpServiceMock } from '../../../../../core/public/http/http_service.mock';
 
 describe('renderOptedInNoticeBanner', () => {
   it('adds a banner to banners with priority of 10000', () => {
     const bannerID = 'brucer-wayne';
     const overlays = overlayServiceMock.createStartContract();
+    const mockHttp = httpServiceMock.createStartContract();
     overlays.banners.add.mockReturnValue(bannerID);
 
     const returnedBannerId = renderOptedInNoticeBanner({
+      http: mockHttp,
       onSeen: jest.fn(),
       overlays,
     });
diff --git a/src/plugins/telemetry/public/services/telemetry_notifications/render_opted_in_notice_banner.tsx b/src/plugins/telemetry/public/services/telemetry_notifications/render_opted_in_notice_banner.tsx
index e63e46af6e8ca3..e1feea4b6cbe11 100644
--- a/src/plugins/telemetry/public/services/telemetry_notifications/render_opted_in_notice_banner.tsx
+++ b/src/plugins/telemetry/public/services/telemetry_notifications/render_opted_in_notice_banner.tsx
@@ -23,11 +23,12 @@ import { OptedInNoticeBanner } from '../../components/opted_in_notice_banner';
 import { toMountPoint } from '../../../../kibana_react/public';
 
 interface RenderBannerConfig {
+  http: CoreStart['http'];
   overlays: CoreStart['overlays'];
   onSeen: () => void;
 }
-export function renderOptedInNoticeBanner({ onSeen, overlays }: RenderBannerConfig) {
-  const mount = toMountPoint(<OptedInNoticeBanner onSeenBanner={onSeen} />);
+export function renderOptedInNoticeBanner({ onSeen, overlays, http }: RenderBannerConfig) {
+  const mount = toMountPoint(<OptedInNoticeBanner onSeenBanner={onSeen} http={http} />);
   const bannerId = overlays.banners.add(mount, 10000);
 
   return bannerId;
diff --git a/src/plugins/telemetry/public/services/telemetry_notifications/telemetry_notifications.ts b/src/plugins/telemetry/public/services/telemetry_notifications/telemetry_notifications.ts
index fc44a4db7cf5e8..6ebbfcfb913368 100644
--- a/src/plugins/telemetry/public/services/telemetry_notifications/telemetry_notifications.ts
+++ b/src/plugins/telemetry/public/services/telemetry_notifications/telemetry_notifications.ts
@@ -23,18 +23,21 @@ import { renderOptInBanner } from './render_opt_in_banner';
 import { TelemetryService } from '../telemetry_service';
 
 interface TelemetryNotificationsConstructor {
+  http: CoreStart['http'];
   overlays: CoreStart['overlays'];
   telemetryService: TelemetryService;
 }
 
 export class TelemetryNotifications {
+  private readonly http: CoreStart['http'];
   private readonly overlays: CoreStart['overlays'];
   private readonly telemetryService: TelemetryService;
   private optedInNoticeBannerId?: string;
   private optInBannerId?: string;
 
-  constructor({ overlays, telemetryService }: TelemetryNotificationsConstructor) {
+  constructor({ http, overlays, telemetryService }: TelemetryNotificationsConstructor) {
     this.telemetryService = telemetryService;
+    this.http = http;
     this.overlays = overlays;
   }
 
@@ -46,6 +49,7 @@ export class TelemetryNotifications {
 
   public renderOptedInNoticeBanner = (): void => {
     const bannerId = renderOptedInNoticeBanner({
+      http: this.http,
       onSeen: this.setOptedInNoticeSeen,
       overlays: this.overlays,
     });

From d73af3282f6cf9c9f8520999982c5085db4a7cb4 Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Fri, 18 Dec 2020 10:16:27 -0800
Subject: [PATCH 25/75] [Enterprise Search] Basic DocumentCreation creation
 mode modal views (#86056)

* Add ApiCodeExample modal component

- Previously lived in EngineOverview / Onboarding

* Add basic PasteJsonText component

* Add basic UploadJsonFile component

* [Refactor] Have all modal components manage their own ModalHeader & ModalFooters

- Per feedback from Casey
+ Update DocumentCreationModal to use switch

* Set basic empty/disabled validation on ModalFooter continue buttons

* Update x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.tsx

Co-authored-by: Jason Stoltzfus <jastoltz24@gmail.com>

* [PR feedback] Typescript improvements

* [PR feedback] Remove need for hasFile reducer

- by storing either 1 file or null
- which gets around the stored FileList reference not triggering a rerender/change

Co-authored-by: Jason Stoltzfus <jastoltz24@gmail.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../document_creation/constants.tsx           |  46 ++++++-
 .../api_code_example.test.tsx                 |  75 ++++++++++
 .../api_code_example.tsx                      | 128 ++++++++++++++++++
 .../creation_mode_components/index.ts         |  10 ++
 .../paste_json_text.scss                      |   9 ++
 .../paste_json_text.test.tsx                  |  80 +++++++++++
 .../paste_json_text.tsx                       | 101 ++++++++++++++
 .../show_creation_modes.test.tsx              |  37 +++++
 .../show_creation_modes.tsx                   |  45 ++++++
 .../upload_json_file.test.tsx                 |  85 ++++++++++++
 .../upload_json_file.tsx                      |  98 ++++++++++++++
 .../document_creation_logic.test.ts           |  33 +++++
 .../document_creation_logic.ts                |  20 +++
 .../document_creation_modal.test.tsx          |  45 +++---
 .../document_creation_modal.tsx               |  77 ++++++-----
 15 files changed, 830 insertions(+), 59 deletions(-)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.test.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/index.ts
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.scss
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.test.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.test.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.test.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.tsx

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/constants.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/constants.tsx
index 5406a90a75a35d..c4237da0d0e804 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/constants.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/constants.tsx
@@ -4,4 +4,48 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// TODO: This will be used shortly in an upcoming PR
+import { i18n } from '@kbn/i18n';
+
+export const MODAL_CANCEL_BUTTON = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.documentCreation.modalCancel',
+  { defaultMessage: 'Cancel' }
+);
+export const MODAL_CONTINUE_BUTTON = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.documentCreation.modalContinue',
+  { defaultMessage: 'Continue' }
+);
+
+// This is indented the way it is to work with ApiCodeExample.
+// Use dedent() when calling this alone
+export const DOCUMENTS_API_JSON_EXAMPLE = `[
+                {
+                  "id": "park_rocky-mountain",
+                  "title": "Rocky Mountain",
+                  "description": "Bisected north to south by the Continental Divide, this portion of the Rockies has ecosystems varying from over 150 riparian lakes to montane and subalpine forests to treeless alpine tundra. Wildlife including mule deer, bighorn sheep, black bears, and cougars inhabit its igneous mountains and glacial valleys. Longs Peak, a classic Colorado fourteener, and the scenic Bear Lake are popular destinations, as well as the historic Trail Ridge Road, which reaches an elevation of more than 12,000 feet (3,700 m).",
+                  "nps_link": "https://www.nps.gov/romo/index.htm",
+                  "states": [
+                    "Colorado"
+                  ],
+                  "visitors": 4517585,
+                  "world_heritage_site": false,
+                  "location": "40.4,-105.58",
+                  "acres": 265795.2,
+                  "square_km": 1075.6,
+                  "date_established": "1915-01-26T06:00:00Z"
+                },
+                {
+                  "id": "park_saguaro",
+                  "title": "Saguaro",
+                  "description": "Split into the separate Rincon Mountain and Tucson Mountain districts, this park is evidence that the dry Sonoran Desert is still home to a great variety of life spanning six biotic communities. Beyond the namesake giant saguaro cacti, there are barrel cacti, chollas, and prickly pears, as well as lesser long-nosed bats, spotted owls, and javelinas.",
+                  "nps_link": "https://www.nps.gov/sagu/index.htm",
+                  "states": [
+                    "Arizona"
+                  ],
+                  "visitors": 820426,
+                  "world_heritage_site": false,
+                  "location": "32.25,-110.5",
+                  "acres": 91715.72,
+                  "square_km": 371.2,
+                  "date_established": "1994-10-14T05:00:00Z"
+                }
+              ]`;
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.test.tsx
new file mode 100644
index 00000000000000..2dd46419528c1b
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.test.tsx
@@ -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 '../../../../__mocks__/enterprise_search_url.mock';
+import { setMockValues, setMockActions } from '../../../../__mocks__/kea.mock';
+
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { EuiCode, EuiCodeBlock, EuiButtonEmpty } from '@elastic/eui';
+
+import { ApiCodeExample, ModalHeader, ModalBody, ModalFooter } from './api_code_example';
+
+describe('ApiCodeExample', () => {
+  const values = {
+    engineName: 'test-engine',
+    engine: { apiKey: 'test-key' },
+  };
+  const actions = {
+    closeDocumentCreation: jest.fn(),
+  };
+
+  beforeAll(() => {
+    setMockValues(values);
+    setMockActions(actions);
+  });
+
+  it('renders', () => {
+    const wrapper = shallow(<ApiCodeExample />);
+    expect(wrapper.find(ModalHeader)).toHaveLength(1);
+    expect(wrapper.find(ModalBody)).toHaveLength(1);
+    expect(wrapper.find(ModalFooter)).toHaveLength(1);
+  });
+
+  describe('ModalHeader', () => {
+    it('renders', () => {
+      const wrapper = shallow(<ModalHeader />);
+      expect(wrapper.find('h2').text()).toEqual('Indexing by API');
+    });
+  });
+
+  describe('ModalBody', () => {
+    let wrapper: ShallowWrapper;
+
+    beforeAll(() => {
+      wrapper = shallow(<ModalBody />);
+    });
+
+    it('renders with the full remote Enterprise Search API URL', () => {
+      expect(wrapper.find(EuiCode).dive().dive().text()).toEqual(
+        'http://localhost:3002/api/as/v1/engines/test-engine/documents'
+      );
+      expect(wrapper.find(EuiCodeBlock).dive().dive().text()).toEqual(
+        expect.stringContaining('http://localhost:3002/api/as/v1/engines/test-engine/documents')
+      );
+    });
+
+    it('renders with the API key', () => {
+      expect(wrapper.find(EuiCodeBlock).dive().dive().text()).toEqual(
+        expect.stringContaining('test-key')
+      );
+    });
+  });
+
+  describe('ModalFooter', () => {
+    it('closes the modal', () => {
+      const wrapper = shallow(<ModalFooter />);
+
+      wrapper.find(EuiButtonEmpty).simulate('click');
+      expect(actions.closeDocumentCreation).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.tsx
new file mode 100644
index 00000000000000..1dd57ffe8bc014
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.tsx
@@ -0,0 +1,128 @@
+/*
+ * 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 dedent from 'dedent';
+import React from 'react';
+import { useValues, useActions } from 'kea';
+
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiButtonEmpty,
+  EuiText,
+  EuiLink,
+  EuiSpacer,
+  EuiPanel,
+  EuiBadge,
+  EuiCode,
+  EuiCodeBlock,
+} from '@elastic/eui';
+
+import { getEnterpriseSearchUrl } from '../../../../shared/enterprise_search_url';
+import { EngineLogic } from '../../engine';
+import { EngineDetails } from '../../engine/types';
+
+import { DOCS_PREFIX } from '../../../routes';
+import { DOCUMENTS_API_JSON_EXAMPLE, MODAL_CANCEL_BUTTON } from '../constants';
+import { DocumentCreationLogic } from '../';
+
+export const ApiCodeExample: React.FC = () => (
+  <>
+    <ModalHeader />
+    <ModalBody />
+    <ModalFooter />
+  </>
+);
+
+export const ModalHeader: React.FC = () => {
+  return (
+    <EuiModalHeader>
+      <EuiModalHeaderTitle>
+        <h2>
+          {i18n.translate('xpack.enterpriseSearch.appSearch.documentCreation.api.title', {
+            defaultMessage: 'Indexing by API',
+          })}
+        </h2>
+      </EuiModalHeaderTitle>
+    </EuiModalHeader>
+  );
+};
+
+export const ModalBody: React.FC = () => {
+  const { engineName, engine } = useValues(EngineLogic);
+  const { apiKey } = engine as EngineDetails;
+
+  const documentsApiUrl = getEnterpriseSearchUrl(`/api/as/v1/engines/${engineName}/documents`);
+
+  return (
+    <EuiModalBody>
+      <EuiText color="subdued">
+        <p>
+          <FormattedMessage
+            id="xpack.enterpriseSearch.appSearch.documentCreation.api.description"
+            defaultMessage="The {documentsApiLink} can be used to add new documents to your engine, update documents, retrieve documents by id, and delete documents. There are a variety of {clientLibrariesLink} to help you get started."
+            values={{
+              documentsApiLink: (
+                <EuiLink target="_blank" href={`${DOCS_PREFIX}/indexing-documents-guide.html`}>
+                  documents API
+                </EuiLink>
+              ),
+              clientLibrariesLink: (
+                <EuiLink target="_blank" href={`${DOCS_PREFIX}/api-clients.html`}>
+                  client libraries
+                </EuiLink>
+              ),
+            }}
+          />
+        </p>
+        <p>
+          {i18n.translate('xpack.enterpriseSearch.appSearch.documentCreation.api.example', {
+            defaultMessage:
+              'To see the API in action, you can experiment with the example request below using a command line or a client library.',
+          })}
+        </p>
+      </EuiText>
+      <EuiSpacer />
+      <EuiPanel hasShadow={false} paddingSize="s" className="eui-textBreakAll">
+        <EuiBadge color="primary">POST</EuiBadge>
+        <EuiCode transparentBackground>{documentsApiUrl}</EuiCode>
+      </EuiPanel>
+      <EuiCodeBlock language="bash" fontSize="m" isCopyable>
+        {dedent(`
+        curl -X POST '${documentsApiUrl}'
+          -H 'Content-Type: application/json'
+          -H 'Authorization: Bearer ${apiKey}'
+          -d '${DOCUMENTS_API_JSON_EXAMPLE}'
+        # Returns
+        # [
+        #   {
+        #     "id": "park_rocky-mountain",
+        #     "errors": []
+        #   },
+        #   {
+        #     "id": "park_saguaro",
+        #     "errors": []
+        #   }
+        # ]
+      `)}
+      </EuiCodeBlock>
+    </EuiModalBody>
+  );
+};
+
+export const ModalFooter: React.FC = () => {
+  const { closeDocumentCreation } = useActions(DocumentCreationLogic);
+
+  return (
+    <EuiModalFooter>
+      <EuiButtonEmpty onClick={closeDocumentCreation}>{MODAL_CANCEL_BUTTON}</EuiButtonEmpty>
+    </EuiModalFooter>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/index.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/index.ts
new file mode 100644
index 00000000000000..b9a6f2b3e750f6
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/index.ts
@@ -0,0 +1,10 @@
+/*
+ * 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 { ShowCreationModes } from './show_creation_modes';
+export { ApiCodeExample } from './api_code_example';
+export { PasteJsonText } from './paste_json_text';
+export { UploadJsonFile } from './upload_json_file';
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.scss b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.scss
new file mode 100644
index 00000000000000..cca179e8c06080
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.scss
@@ -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.
+ */
+
+.pasteJsonTextArea {
+  font-family: $euiCodeFontFamily;
+}
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.test.tsx
new file mode 100644
index 00000000000000..ede1529c049d70
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.test.tsx
@@ -0,0 +1,80 @@
+/*
+ * 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 { setMockValues, setMockActions } from '../../../../__mocks__/kea.mock';
+import { rerender } from '../../../../__mocks__';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { EuiTextArea, EuiButtonEmpty, EuiButton } from '@elastic/eui';
+
+import { PasteJsonText, ModalHeader, ModalBody, ModalFooter } from './paste_json_text';
+
+describe('PasteJsonText', () => {
+  const values = {
+    textInput: 'hello world',
+    configuredLimits: {
+      engine: {
+        maxDocumentByteSize: 102400,
+      },
+    },
+  };
+  const actions = {
+    setTextInput: jest.fn(),
+    closeDocumentCreation: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setMockValues(values);
+    setMockActions(actions);
+  });
+
+  it('renders', () => {
+    const wrapper = shallow(<PasteJsonText />);
+    expect(wrapper.find(ModalHeader)).toHaveLength(1);
+    expect(wrapper.find(ModalBody)).toHaveLength(1);
+    expect(wrapper.find(ModalFooter)).toHaveLength(1);
+  });
+
+  describe('ModalHeader', () => {
+    it('renders', () => {
+      const wrapper = shallow(<ModalHeader />);
+      expect(wrapper.find('h2').text()).toEqual('Create documents');
+    });
+  });
+
+  describe('ModalBody', () => {
+    it('renders and updates the textarea value', () => {
+      setMockValues({ ...values, textInput: 'lorem ipsum' });
+      const wrapper = shallow(<ModalBody />);
+      const textarea = wrapper.find(EuiTextArea);
+
+      expect(textarea.prop('value')).toEqual('lorem ipsum');
+
+      textarea.simulate('change', { target: { value: 'dolor sit amet' } });
+      expect(actions.setTextInput).toHaveBeenCalledWith('dolor sit amet');
+    });
+  });
+
+  describe('ModalFooter', () => {
+    it('closes the modal', () => {
+      const wrapper = shallow(<ModalFooter />);
+
+      wrapper.find(EuiButtonEmpty).simulate('click');
+      expect(actions.closeDocumentCreation).toHaveBeenCalled();
+    });
+
+    it('disables/enables the Continue button based on whether text has been entered', () => {
+      const wrapper = shallow(<ModalFooter />);
+      expect(wrapper.find(EuiButton).prop('isDisabled')).toBe(false);
+
+      setMockValues({ ...values, textInput: '' });
+      rerender(wrapper);
+      expect(wrapper.find(EuiButton).prop('isDisabled')).toBe(true);
+    });
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.tsx
new file mode 100644
index 00000000000000..614704701222b0
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.tsx
@@ -0,0 +1,101 @@
+/*
+ * 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 { useValues, useActions } from 'kea';
+
+import { i18n } from '@kbn/i18n';
+import {
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiTextArea,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+
+import { AppLogic } from '../../../app_logic';
+
+import { MODAL_CANCEL_BUTTON, MODAL_CONTINUE_BUTTON } from '../constants';
+import { DocumentCreationLogic } from '../';
+
+import './paste_json_text.scss';
+
+export const PasteJsonText: React.FC = () => (
+  <>
+    <ModalHeader />
+    <ModalBody />
+    <ModalFooter />
+  </>
+);
+
+export const ModalHeader: React.FC = () => {
+  return (
+    <EuiModalHeader>
+      <EuiModalHeaderTitle>
+        <h2>
+          {i18n.translate('xpack.enterpriseSearch.appSearch.documentCreation.pasteJsonText.title', {
+            defaultMessage: 'Create documents',
+          })}
+        </h2>
+      </EuiModalHeaderTitle>
+    </EuiModalHeader>
+  );
+};
+
+export const ModalBody: React.FC = () => {
+  const { configuredLimits } = useValues(AppLogic);
+  const maxDocumentByteSize = configuredLimits?.engine?.maxDocumentByteSize;
+
+  const { textInput } = useValues(DocumentCreationLogic);
+  const { setTextInput } = useActions(DocumentCreationLogic);
+
+  return (
+    <EuiModalBody>
+      <EuiText color="subdued">
+        <p>
+          {i18n.translate(
+            'xpack.enterpriseSearch.appSearch.documentCreation.pasteJsonText.description',
+            {
+              defaultMessage:
+                'Paste an array of JSON documents. Ensure the JSON is valid and that each document object is less than {maxDocumentByteSize} bytes.',
+              values: { maxDocumentByteSize },
+            }
+          )}
+        </p>
+      </EuiText>
+      <EuiSpacer />
+      <EuiTextArea
+        value={textInput}
+        onChange={(e) => setTextInput(e.target.value)}
+        aria-label={i18n.translate(
+          'xpack.enterpriseSearch.appSearch.documentCreation.pasteJsonText.label',
+          { defaultMessage: 'Paste JSON here' }
+        )}
+        className="pasteJsonTextArea"
+        fullWidth
+        rows={12}
+      />
+    </EuiModalBody>
+  );
+};
+
+export const ModalFooter: React.FC = () => {
+  const { textInput } = useValues(DocumentCreationLogic);
+  const { closeDocumentCreation } = useActions(DocumentCreationLogic);
+
+  return (
+    <EuiModalFooter>
+      <EuiButtonEmpty onClick={closeDocumentCreation}>{MODAL_CANCEL_BUTTON}</EuiButtonEmpty>
+      <EuiButton fill isDisabled={!textInput.length}>
+        {MODAL_CONTINUE_BUTTON}
+      </EuiButton>
+    </EuiModalFooter>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.test.tsx
new file mode 100644
index 00000000000000..eadcf6df473e5e
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.test.tsx
@@ -0,0 +1,37 @@
+/*
+ * 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 { setMockActions } from '../../../../__mocks__/kea.mock';
+
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { EuiButtonEmpty } from '@elastic/eui';
+
+import { DocumentCreationButtons } from '../';
+import { ShowCreationModes } from './';
+
+describe('ShowCreationModes', () => {
+  const actions = {
+    closeDocumentCreation: jest.fn(),
+  };
+  let wrapper: ShallowWrapper;
+
+  beforeAll(() => {
+    jest.clearAllMocks();
+    setMockActions(actions);
+    wrapper = shallow(<ShowCreationModes />);
+  });
+
+  it('renders', () => {
+    expect(wrapper.find('h2').text()).toEqual('Add new documents');
+    expect(wrapper.find(DocumentCreationButtons)).toHaveLength(1);
+  });
+
+  it('closes the modal', () => {
+    wrapper.find(EuiButtonEmpty).simulate('click');
+    expect(actions.closeDocumentCreation).toHaveBeenCalled();
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.tsx
new file mode 100644
index 00000000000000..1f7c4db83ab06c
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.tsx
@@ -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 React from 'react';
+import { useActions } from 'kea';
+
+import { i18n } from '@kbn/i18n';
+import {
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+
+import { MODAL_CANCEL_BUTTON } from '../constants';
+import { DocumentCreationLogic, DocumentCreationButtons } from '../';
+
+export const ShowCreationModes: React.FC = () => {
+  const { closeDocumentCreation } = useActions(DocumentCreationLogic);
+
+  return (
+    <>
+      <EuiModalHeader>
+        <EuiModalHeaderTitle>
+          <h2>
+            {i18n.translate(
+              'xpack.enterpriseSearch.appSearch.documentCreation.showCreationModes.title',
+              { defaultMessage: 'Add new documents' }
+            )}
+          </h2>
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+      <EuiModalBody>
+        <DocumentCreationButtons />
+      </EuiModalBody>
+      <EuiModalFooter>
+        <EuiButtonEmpty onClick={closeDocumentCreation}>{MODAL_CANCEL_BUTTON}</EuiButtonEmpty>
+      </EuiModalFooter>
+    </>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.test.tsx
new file mode 100644
index 00000000000000..dae085617cad8d
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.test.tsx
@@ -0,0 +1,85 @@
+/*
+ * 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 { setMockValues, setMockActions } from '../../../../__mocks__/kea.mock';
+import { rerender } from '../../../../__mocks__';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { EuiFilePicker, EuiButtonEmpty, EuiButton } from '@elastic/eui';
+
+import { UploadJsonFile, ModalHeader, ModalBody, ModalFooter } from './upload_json_file';
+
+describe('UploadJsonFile', () => {
+  const mockFile = new File(['mock'], 'mock.json', { type: 'application/json' });
+  const values = {
+    fileInput: null,
+    configuredLimits: {
+      engine: {
+        maxDocumentByteSize: 102400,
+      },
+    },
+  };
+  const actions = {
+    setFileInput: jest.fn(),
+    closeDocumentCreation: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setMockValues(values);
+    setMockActions(actions);
+  });
+
+  it('renders', () => {
+    const wrapper = shallow(<UploadJsonFile />);
+    expect(wrapper.find(ModalHeader)).toHaveLength(1);
+    expect(wrapper.find(ModalBody)).toHaveLength(1);
+    expect(wrapper.find(ModalFooter)).toHaveLength(1);
+  });
+
+  describe('ModalHeader', () => {
+    it('renders', () => {
+      const wrapper = shallow(<ModalHeader />);
+      expect(wrapper.find('h2').text()).toEqual('Drag and drop .json');
+    });
+  });
+
+  describe('ModalBody', () => {
+    it('updates fileInput when files are added & removed', () => {
+      const wrapper = shallow(<ModalBody />);
+
+      wrapper.find(EuiFilePicker).simulate('change', [mockFile]);
+      expect(actions.setFileInput).toHaveBeenCalledWith(mockFile);
+
+      wrapper.find(EuiFilePicker).simulate('change', []);
+      expect(actions.setFileInput).toHaveBeenCalledWith(null);
+    });
+  });
+
+  describe('ModalFooter', () => {
+    it('closes the modal', () => {
+      const wrapper = shallow(<ModalFooter />);
+
+      wrapper.find(EuiButtonEmpty).simulate('click');
+      expect(actions.closeDocumentCreation).toHaveBeenCalled();
+    });
+
+    it('disables/enables the Continue button based on whether files have been uploaded', () => {
+      const wrapper = shallow(<ModalFooter />);
+      expect(wrapper.find(EuiButton).prop('isDisabled')).toBe(true);
+
+      setMockValues({ ...values, fineInput: mockFile });
+      rerender(wrapper);
+      expect(wrapper.find(EuiButton).prop('isDisabled')).toBe(true);
+    });
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.tsx
new file mode 100644
index 00000000000000..d4c005d5cfa2b1
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.tsx
@@ -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.
+ */
+/*
+ * 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 { useValues, useActions } from 'kea';
+
+import { i18n } from '@kbn/i18n';
+import {
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFilePicker,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+
+import { AppLogic } from '../../../app_logic';
+
+import { MODAL_CANCEL_BUTTON, MODAL_CONTINUE_BUTTON } from '../constants';
+import { DocumentCreationLogic } from '../';
+
+export const UploadJsonFile: React.FC = () => (
+  <>
+    <ModalHeader />
+    <ModalBody />
+    <ModalFooter />
+  </>
+);
+
+export const ModalHeader: React.FC = () => {
+  return (
+    <EuiModalHeader>
+      <EuiModalHeaderTitle>
+        <h2>
+          {i18n.translate(
+            'xpack.enterpriseSearch.appSearch.documentCreation.uploadJsonFile.title',
+            { defaultMessage: 'Drag and drop .json' }
+          )}
+        </h2>
+      </EuiModalHeaderTitle>
+    </EuiModalHeader>
+  );
+};
+
+export const ModalBody: React.FC = () => {
+  const { configuredLimits } = useValues(AppLogic);
+  const maxDocumentByteSize = configuredLimits?.engine?.maxDocumentByteSize;
+
+  const { setFileInput } = useActions(DocumentCreationLogic);
+
+  return (
+    <EuiModalBody>
+      <EuiText color="subdued">
+        <p>
+          {i18n.translate(
+            'xpack.enterpriseSearch.appSearch.documentCreation.uploadJsonFile.label',
+            {
+              defaultMessage:
+                'If you have a .json file, drag and drop or upload it. Ensure the JSON is valid and that each document object is less than {maxDocumentByteSize} bytes.',
+              values: { maxDocumentByteSize },
+            }
+          )}
+        </p>
+      </EuiText>
+      <EuiSpacer />
+      <EuiFilePicker
+        onChange={(files) => setFileInput(files?.length ? files[0] : null)}
+        accept="application/json"
+        fullWidth
+      />
+    </EuiModalBody>
+  );
+};
+
+export const ModalFooter: React.FC = () => {
+  const { fileInput } = useValues(DocumentCreationLogic);
+  const { closeDocumentCreation } = useActions(DocumentCreationLogic);
+
+  return (
+    <EuiModalFooter>
+      <EuiButtonEmpty onClick={closeDocumentCreation}>{MODAL_CANCEL_BUTTON}</EuiButtonEmpty>
+      <EuiButton fill isDisabled={!fileInput}>
+        {MODAL_CONTINUE_BUTTON}
+      </EuiButton>
+    </EuiModalFooter>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_logic.test.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_logic.test.ts
index ff38ab5add3672..1145d7853cb1a1 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_logic.test.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_logic.test.ts
@@ -5,7 +5,9 @@
  */
 
 import { resetContext } from 'kea';
+import dedent from 'dedent';
 
+import { DOCUMENTS_API_JSON_EXAMPLE } from './constants';
 import { DocumentCreationStep } from './types';
 import { DocumentCreationLogic } from './';
 
@@ -14,7 +16,10 @@ describe('DocumentCreationLogic', () => {
     isDocumentCreationOpen: false,
     creationMode: 'text',
     creationStep: DocumentCreationStep.AddDocuments,
+    textInput: dedent(DOCUMENTS_API_JSON_EXAMPLE),
+    fileInput: null,
   };
+  const mockFile = new File(['mockFile'], 'mockFile.json');
 
   const mount = () => {
     resetContext({});
@@ -130,5 +135,33 @@ describe('DocumentCreationLogic', () => {
         });
       });
     });
+
+    describe('setTextInput', () => {
+      describe('textInput', () => {
+        it('should be set to the provided value', () => {
+          mount();
+          DocumentCreationLogic.actions.setTextInput('hello world');
+
+          expect(DocumentCreationLogic.values).toEqual({
+            ...DEFAULT_VALUES,
+            textInput: 'hello world',
+          });
+        });
+      });
+    });
+
+    describe('setFileInput', () => {
+      describe('fileInput', () => {
+        it('should be set to the provided value', () => {
+          mount();
+          DocumentCreationLogic.actions.setFileInput(mockFile);
+
+          expect(DocumentCreationLogic.values).toEqual({
+            ...DEFAULT_VALUES,
+            fileInput: mockFile,
+          });
+        });
+      });
+    });
   });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_logic.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_logic.ts
index 26f7a1f3d50ece..a5e015391d8fd0 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_logic.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_logic.ts
@@ -5,13 +5,17 @@
  */
 
 import { kea, MakeLogicType } from 'kea';
+import dedent from 'dedent';
 
+import { DOCUMENTS_API_JSON_EXAMPLE } from './constants';
 import { DocumentCreationMode, DocumentCreationStep } from './types';
 
 interface DocumentCreationValues {
   isDocumentCreationOpen: boolean;
   creationMode: DocumentCreationMode;
   creationStep: DocumentCreationStep;
+  textInput: string;
+  fileInput: File | null;
 }
 
 interface DocumentCreationActions {
@@ -19,6 +23,8 @@ interface DocumentCreationActions {
   openDocumentCreation(creationMode: DocumentCreationMode): { creationMode: DocumentCreationMode };
   closeDocumentCreation(): void;
   setCreationStep(creationStep: DocumentCreationStep): { creationStep: DocumentCreationStep };
+  setTextInput(textInput: string): { textInput: string };
+  setFileInput(fileInput: File | null): { fileInput: File | null };
 }
 
 export const DocumentCreationLogic = kea<
@@ -30,6 +36,8 @@ export const DocumentCreationLogic = kea<
     openDocumentCreation: (creationMode) => ({ creationMode }),
     closeDocumentCreation: () => null,
     setCreationStep: (creationStep) => ({ creationStep }),
+    setTextInput: (textInput) => ({ textInput }),
+    setFileInput: (fileInput) => ({ fileInput }),
   }),
   reducers: () => ({
     isDocumentCreationOpen: [
@@ -54,5 +62,17 @@ export const DocumentCreationLogic = kea<
         setCreationStep: (_, { creationStep }) => creationStep,
       },
     ],
+    textInput: [
+      dedent(DOCUMENTS_API_JSON_EXAMPLE),
+      {
+        setTextInput: (_, { textInput }) => textInput,
+      },
+    ],
+    fileInput: [
+      null,
+      {
+        setFileInput: (_, { fileInput }) => fileInput,
+      },
+    ],
   }),
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.test.tsx
index a00aed96a6fbcb..a0bca62dc74191 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.test.tsx
@@ -8,10 +8,17 @@ import { setMockValues, setMockActions } from '../../../__mocks__/kea.mock';
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import { EuiModal, EuiModalBody } from '@elastic/eui';
-
+import { EuiModal } from '@elastic/eui';
+
+import {
+  ShowCreationModes,
+  ApiCodeExample,
+  PasteJsonText,
+  UploadJsonFile,
+} from './creation_mode_components';
 import { DocumentCreationStep } from './types';
-import { DocumentCreationModal, DocumentCreationButtons } from './';
+
+import { DocumentCreationModal, ModalContent } from './document_creation_modal';
 
 describe('DocumentCreationModal', () => {
   const values = {
@@ -44,58 +51,58 @@ describe('DocumentCreationModal', () => {
     expect(wrapper.isEmptyRender()).toBe(true);
   });
 
-  describe('modal content', () => {
-    it('renders document creation mode buttons', () => {
+  describe('ModalContent', () => {
+    it('renders ShowCreationModes', () => {
       setMockValues({ ...values, creationStep: DocumentCreationStep.ShowCreationModes });
-      const wrapper = shallow(<DocumentCreationModal />);
+      const wrapper = shallow(<ModalContent />);
 
-      expect(wrapper.find(DocumentCreationButtons)).toHaveLength(1);
+      expect(wrapper.find(ShowCreationModes)).toHaveLength(1);
     });
 
     describe('creation modes', () => {
       it('renders ApiCodeExample', () => {
         setMockValues({ ...values, creationMode: 'api' });
-        const wrapper = shallow(<DocumentCreationModal />);
+        const wrapper = shallow(<ModalContent />);
 
-        expect(wrapper.find(EuiModalBody).dive().text()).toBe('ApiCodeExample'); // TODO: actual component
+        expect(wrapper.find(ApiCodeExample)).toHaveLength(1);
       });
 
       it('renders PasteJsonText', () => {
         setMockValues({ ...values, creationMode: 'text' });
-        const wrapper = shallow(<DocumentCreationModal />);
+        const wrapper = shallow(<ModalContent />);
 
-        expect(wrapper.find(EuiModalBody).dive().text()).toBe('PasteJsonText'); // TODO: actual component
+        expect(wrapper.find(PasteJsonText)).toHaveLength(1);
       });
 
       it('renders UploadJsonFile', () => {
         setMockValues({ ...values, creationMode: 'file' });
-        const wrapper = shallow(<DocumentCreationModal />);
+        const wrapper = shallow(<ModalContent />);
 
-        expect(wrapper.find(EuiModalBody).dive().text()).toBe('UploadJsonFile'); // TODO: actual component
+        expect(wrapper.find(UploadJsonFile)).toHaveLength(1);
       });
     });
 
     describe('creation steps', () => {
       it('renders an error page', () => {
         setMockValues({ ...values, creationStep: DocumentCreationStep.ShowError });
-        const wrapper = shallow(<DocumentCreationModal />);
+        const wrapper = shallow(<ModalContent />);
 
-        expect(wrapper.find(EuiModalBody).dive().text()).toBe('DocumentCreationError'); // TODO: actual component
+        expect(wrapper.text()).toBe('DocumentCreationError'); // TODO: actual component
       });
 
       it('renders an error summary', () => {
         setMockValues({ ...values, creationStep: DocumentCreationStep.ShowErrorSummary });
-        const wrapper = shallow(<DocumentCreationModal />);
+        const wrapper = shallow(<ModalContent />);
 
-        expect(wrapper.find(EuiModalBody).dive().text()).toBe('DocumentCreationSummary'); // TODO: actual component
+        expect(wrapper.text()).toBe('DocumentCreationSummary'); // TODO: actual component
       });
 
       it('renders a success summary', () => {
         setMockValues({ ...values, creationStep: DocumentCreationStep.ShowSuccessSummary });
-        const wrapper = shallow(<DocumentCreationModal />);
+        const wrapper = shallow(<ModalContent />);
 
         // TODO: Figure out if the error and success summary should remain the same vs different components
-        expect(wrapper.find(EuiModalBody).dive().text()).toBe('DocumentCreationSummary'); // TODO: actual component
+        expect(wrapper.text()).toBe('DocumentCreationSummary'); // TODO: actual component
       });
     });
   });
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.tsx
index 95ce5456ef9a83..e6662a7c30407b 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.tsx
@@ -7,52 +7,51 @@
 import React from 'react';
 import { useValues, useActions } from 'kea';
 
-import { i18n } from '@kbn/i18n';
-import {
-  EuiOverlayMask,
-  EuiModal,
-  EuiModalHeader,
-  EuiModalHeaderTitle,
-  EuiModalBody,
-  EuiModalFooter,
-} from '@elastic/eui';
-
-import { DocumentCreationLogic, DocumentCreationButtons } from './';
+import { EuiOverlayMask, EuiModal } from '@elastic/eui';
+
+import { DocumentCreationLogic } from './';
 import { DocumentCreationStep } from './types';
 
+import {
+  ShowCreationModes,
+  ApiCodeExample,
+  PasteJsonText,
+  UploadJsonFile,
+} from './creation_mode_components';
+
 export const DocumentCreationModal: React.FC = () => {
   const { closeDocumentCreation } = useActions(DocumentCreationLogic);
-  const { isDocumentCreationOpen, creationMode, creationStep } = useValues(DocumentCreationLogic);
+  const { isDocumentCreationOpen } = useValues(DocumentCreationLogic);
 
-  if (!isDocumentCreationOpen) return null;
-
-  return (
+  return isDocumentCreationOpen ? (
     <EuiOverlayMask>
       <EuiModal onClose={closeDocumentCreation}>
-        <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            {i18n.translate('xpack.enterpriseSearch.appSearch.documentCreation.modalTitle', {
-              defaultMessage: 'Document Import',
-            })}
-          </EuiModalHeaderTitle>
-        </EuiModalHeader>
-        <EuiModalBody>
-          {creationStep === DocumentCreationStep.ShowError && <>DocumentCreationError</>}
-          {creationStep === DocumentCreationStep.ShowCreationModes && <DocumentCreationButtons />}
-          {creationStep === DocumentCreationStep.AddDocuments && creationMode === 'api' && (
-            <>ApiCodeExample</>
-          )}
-          {creationStep === DocumentCreationStep.AddDocuments && creationMode === 'text' && (
-            <>PasteJsonText</>
-          )}
-          {creationStep === DocumentCreationStep.AddDocuments && creationMode === 'file' && (
-            <>UploadJsonFile</>
-          )}
-          {creationStep === DocumentCreationStep.ShowErrorSummary && <>DocumentCreationSummary</>}
-          {creationStep === DocumentCreationStep.ShowSuccessSummary && <>DocumentCreationSummary</>}
-        </EuiModalBody>
-        <EuiModalFooter />
+        <ModalContent />
       </EuiModal>
     </EuiOverlayMask>
-  );
+  ) : null;
+};
+
+export const ModalContent: React.FC = () => {
+  const { creationStep, creationMode } = useValues(DocumentCreationLogic);
+
+  switch (creationStep) {
+    case DocumentCreationStep.ShowCreationModes:
+      return <ShowCreationModes />;
+    case DocumentCreationStep.AddDocuments:
+      switch (creationMode) {
+        case 'api':
+          return <ApiCodeExample />;
+        case 'text':
+          return <PasteJsonText />;
+        case 'file':
+          return <UploadJsonFile />;
+      }
+    case DocumentCreationStep.ShowError:
+      return <>DocumentCreationError</>;
+    case DocumentCreationStep.ShowErrorSummary:
+      return <>DocumentCreationSummary</>;
+    case DocumentCreationStep.ShowSuccessSummary:
+      return <>DocumentCreationSummary</>;
+  }
 };

From e71610630734d6b55df9731f2ee5a2876eed5729 Mon Sep 17 00:00:00 2001
From: Dan Panzarella <pzl@users.noreply.github.com>
Date: Fri, 18 Dec 2020 13:41:05 -0500
Subject: [PATCH 26/75] [Security Solution] Correct Policy Config to current
 license level on fetch (#85206)

---
 .../common/license/license.ts                 |  2 +-
 .../components/current_license/index.tsx      | 29 ++++++++++++
 .../policy/store/policy_details/action.ts     |  9 +++-
 .../policy/store/policy_details/index.test.ts | 44 +++++++++++++++++++
 .../policy/store/policy_details/middleware.ts |  1 -
 .../policy/store/policy_details/reducer.ts    |  8 ++++
 .../policy/store/policy_details/selectors.ts  | 24 +++++++++-
 .../public/management/pages/policy/types.ts   |  3 ++
 .../with_security_context.tsx                 |  5 ++-
 .../public/management/routes.tsx              | 11 +++--
 10 files changed, 126 insertions(+), 10 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/public/common/components/current_license/index.tsx

diff --git a/x-pack/plugins/security_solution/common/license/license.ts b/x-pack/plugins/security_solution/common/license/license.ts
index 2d424ab9c960ad..9c093016f4a38c 100644
--- a/x-pack/plugins/security_solution/common/license/license.ts
+++ b/x-pack/plugins/security_solution/common/license/license.ts
@@ -51,5 +51,5 @@ export class LicenseService {
 }
 
 export const isAtLeast = (license: ILicense | null, level: LicenseType): boolean => {
-  return license !== null && license.isAvailable && license.isActive && license.hasAtLeast(level);
+  return !!license && license.isAvailable && license.isActive && license.hasAtLeast(level);
 };
diff --git a/x-pack/plugins/security_solution/public/common/components/current_license/index.tsx b/x-pack/plugins/security_solution/public/common/components/current_license/index.tsx
new file mode 100644
index 00000000000000..27d34f5cf418f9
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/current_license/index.tsx
@@ -0,0 +1,29 @@
+/*
+ * 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, memo, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { Dispatch } from 'redux';
+import { licenseService } from '../../hooks/use_license';
+import { AppAction } from '../../store/actions';
+import { ILicense } from '../../../../../licensing/common/types';
+
+export const CurrentLicense: FC = memo(({ children }) => {
+  const dispatch = useDispatch<Dispatch<AppAction>>();
+  useEffect(() => {
+    const subscription = licenseService
+      .getLicenseInformation$()
+      ?.subscribe((licenseInformation: ILicense) => {
+        dispatch({
+          type: 'licenseChanged',
+          payload: licenseInformation,
+        });
+      });
+    return () => subscription?.unsubscribe();
+  }, [dispatch]);
+  return <>{children}</>;
+});
+
+CurrentLicense.displayName = 'CurrentLicense';
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/action.ts b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/action.ts
index bda408cd00e75e..573442de807ae9 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/action.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/action.ts
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { ILicense } from '../../../../../../../licensing/common/types';
 import { GetAgentStatusResponse } from '../../../../../../../fleet/common/types/rest_spec';
 import { PolicyData, UIPolicyConfig } from '../../../../../../common/endpoint/types';
 import { ServerApiError } from '../../../../../common/types';
@@ -62,6 +63,11 @@ interface UserClickedPolicyDetailsSaveButton {
   type: 'userClickedPolicyDetailsSaveButton';
 }
 
+interface LicenseChanged {
+  type: 'licenseChanged';
+  payload: ILicense;
+}
+
 export type PolicyDetailsAction =
   | ServerReturnedPolicyDetailsData
   | UserClickedPolicyDetailsSaveButton
@@ -70,4 +76,5 @@ export type PolicyDetailsAction =
   | ServerReturnedUpdatedPolicyDetailsData
   | ServerFailedToReturnPolicyDetailsData
   | UserChangedPolicyConfig
-  | UserChangedAntivirusRegistration;
+  | UserChangedAntivirusRegistration
+  | LicenseChanged;
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/index.test.ts b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/index.test.ts
index 69c2afbd019607..70ffc1f8a9fc40 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/index.test.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/index.test.ts
@@ -20,6 +20,7 @@ import {
 } from '../../../../../common/mock/endpoint';
 import { HttpFetchOptions } from 'kibana/public';
 import { cloneDeep } from 'lodash';
+import { licenseMock } from '../../../../../../../licensing/common/licensing.mock';
 
 describe('policy details: ', () => {
   let store: Store;
@@ -151,6 +152,49 @@ describe('policy details: ', () => {
         expect(config!.linux.events.file).toEqual(true);
       });
     });
+
+    describe('when the policy config has paid features enabled', () => {
+      const CustomMessage = 'Some Popup message change';
+      const Basic = licenseMock.createLicense({ license: { type: 'basic', mode: 'basic' } });
+      const Platinum = licenseMock.createLicense({
+        license: { type: 'platinum', mode: 'platinum' },
+      });
+
+      beforeEach(() => {
+        const config = policyConfig(getState());
+        if (!config) {
+          throw new Error();
+        }
+
+        // have a paid-policy field existing in the store from a previous time
+        const newPayload1 = cloneDeep(config);
+        newPayload1.windows.popup.malware.message = CustomMessage;
+        dispatch({
+          type: 'userChangedPolicyConfig',
+          payload: { policyConfig: newPayload1 },
+        });
+      });
+
+      it('preserves paid fields when license level allows', () => {
+        dispatch({
+          type: 'licenseChanged',
+          payload: Platinum,
+        });
+        const config = policyConfig(getState());
+
+        expect(config.windows.popup.malware.message).toEqual(CustomMessage);
+      });
+
+      it('reverts paid fields to default when license level does not allow', () => {
+        dispatch({
+          type: 'licenseChanged',
+          payload: Basic,
+        });
+        const config = policyConfig(getState());
+
+        expect(config.windows.popup.malware.message).not.toEqual(CustomMessage);
+      });
+    });
   });
 
   describe('when saving policy data', () => {
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/middleware.ts b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/middleware.ts
index f039324b3af648..2f9f0d67237495 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/middleware.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/middleware.ts
@@ -26,7 +26,6 @@ export const policyDetailsMiddlewareFactory: ImmutableMiddlewareFactory<PolicyDe
   coreStart
 ) => {
   const http = coreStart.http;
-
   return ({ getState, dispatch }) => (next) => async (action) => {
     next(action);
     const state = getState();
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/reducer.ts b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/reducer.ts
index bcdc7ba2089c64..a6e94d3715ca35 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/reducer.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/reducer.ts
@@ -45,6 +45,7 @@ export const initialPolicyDetailsState: () => Immutable<PolicyDetailsState> = ()
     total: 0,
     other: 0,
   },
+  license: undefined,
 });
 
 export const policyDetailsReducer: ImmutableReducer<PolicyDetailsState, AppAction> = (
@@ -93,6 +94,13 @@ export const policyDetailsReducer: ImmutableReducer<PolicyDetailsState, AppActio
     };
   }
 
+  if (action.type === 'licenseChanged') {
+    return {
+      ...state,
+      license: action.payload,
+    };
+  }
+
   if (action.type === 'userChangedUrl') {
     const newState: Immutable<PolicyDetailsState> = {
       ...state,
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/selectors.ts b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/selectors.ts
index 77e975a46d37bb..c52bef9a23b25b 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/selectors.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/selectors.ts
@@ -6,6 +6,8 @@
 
 import { createSelector } from 'reselect';
 import { matchPath } from 'react-router-dom';
+import { ILicense } from '../../../../../../../licensing/common/types';
+import { unsetPolicyFeaturesAboveLicenseLevel } from '../../../../../../common/license/policy_config';
 import { PolicyDetailsState } from '../../types';
 import {
   Immutable,
@@ -20,6 +22,24 @@ import { ManagementRoutePolicyDetailsParams } from '../../../../types';
 
 /** Returns the policy details */
 export const policyDetails = (state: Immutable<PolicyDetailsState>) => state.policyItem;
+/** Returns current active license */
+export const licenseState = (state: Immutable<PolicyDetailsState>) => state.license;
+
+export const licensedPolicy: (
+  state: Immutable<PolicyDetailsState>
+) => Immutable<PolicyData> | undefined = createSelector(
+  policyDetails,
+  licenseState,
+  (policyData, license) => {
+    if (policyData) {
+      unsetPolicyFeaturesAboveLicenseLevel(
+        policyData?.inputs[0]?.config.policy.value,
+        license as ILicense
+      );
+    }
+    return policyData;
+  }
+);
 
 /**
  * Given a Policy Data (package policy) object, return back a new object with only the field
@@ -75,7 +95,7 @@ export const getPolicyDataForUpdate = (
  */
 export const policyDetailsForUpdate: (
   state: Immutable<PolicyDetailsState>
-) => Immutable<NewPolicyData> | undefined = createSelector(policyDetails, (policy) => {
+) => Immutable<NewPolicyData> | undefined = createSelector(licensedPolicy, (policy) => {
   if (policy) {
     return getPolicyDataForUpdate(policy);
   }
@@ -111,7 +131,7 @@ const defaultFullPolicy: Immutable<PolicyConfig> = policyConfigFactory();
  * Note: this will return a default full policy if the `policyItem` is `undefined`
  */
 export const fullPolicy: (s: Immutable<PolicyDetailsState>) => PolicyConfig = createSelector(
-  policyDetails,
+  licensedPolicy,
   (policyData) => {
     return policyData?.inputs[0]?.config?.policy?.value ?? defaultFullPolicy;
   }
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/types.ts b/x-pack/plugins/security_solution/public/management/pages/policy/types.ts
index 3926ad2220e35d..889bcc15d8df00 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/types.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/types.ts
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { ILicense } from '../../../../../licensing/common/types';
 import {
   AppLocation,
   Immutable,
@@ -66,6 +67,8 @@ export interface PolicyDetailsState {
     success: boolean;
     error?: ServerApiError;
   };
+  /** current license */
+  license?: ILicense;
 }
 
 /**
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/with_security_context.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/with_security_context.tsx
index f65dbaf1087d8e..118ebdf56db907 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/with_security_context.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/with_security_context.tsx
@@ -8,6 +8,7 @@ import React, { ComponentType, memo } from 'react';
 import { CoreStart } from 'kibana/public';
 import { combineReducers, createStore, compose, applyMiddleware } from 'redux';
 import { Provider as ReduxStoreProvider } from 'react-redux';
+import { CurrentLicense } from '../../../../../common/components/current_license';
 import { StartPlugins } from '../../../../../types';
 import { managementReducer } from '../../../../store/reducer';
 import { managementMiddlewareFactory } from '../../../../store/middleware';
@@ -57,7 +58,9 @@ export const withSecurityContext = <P extends {}>({
 
     return (
       <ReduxStoreProvider store={store}>
-        <WrappedComponent {...props} />
+        <CurrentLicense>
+          <WrappedComponent {...props} />
+        </CurrentLicense>
       </ReduxStoreProvider>
     );
   });
diff --git a/x-pack/plugins/security_solution/public/management/routes.tsx b/x-pack/plugins/security_solution/public/management/routes.tsx
index 209d7dd6dbcde4..bc24b9ca519800 100644
--- a/x-pack/plugins/security_solution/public/management/routes.tsx
+++ b/x-pack/plugins/security_solution/public/management/routes.tsx
@@ -8,13 +8,16 @@ import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { ManagementContainer } from './pages';
 import { NotFoundPage } from '../app/404';
+import { CurrentLicense } from '../common/components/current_license';
 
 /**
  * Returns the React Router Routes for the management area
  */
 export const ManagementRoutes = () => (
-  <Switch>
-    <Route path="/" component={ManagementContainer} />
-    <Route render={() => <NotFoundPage />} />
-  </Switch>
+  <CurrentLicense>
+    <Switch>
+      <Route path="/" component={ManagementContainer} />
+      <Route render={() => <NotFoundPage />} />
+    </Switch>
+  </CurrentLicense>
 );

From 3379763965cec86d6a907bd311111939c831fc15 Mon Sep 17 00:00:00 2001
From: Scotty Bollinger <scotty.bollinger@elastic.co>
Date: Fri, 18 Dec 2020 12:54:59 -0600
Subject: [PATCH 27/75] [Workplace Search] Refactor AddSource component state
 and add tests (#86482)

* Rename variables

This will make reviewing later commits easier

* Use internal routing instead of history.push

Also updates path to Loading

* Move state from component to logic

* Add tests
---
 .../components/add_source/add_source.test.tsx | 164 ++++++++++++++++++
 .../components/add_source/add_source.tsx      |  89 ++++------
 .../add_source/add_source_logic.test.ts       |  52 ++++++
 .../components/add_source/add_source_logic.ts |  67 +++++++
 4 files changed, 312 insertions(+), 60 deletions(-)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source.test.tsx

diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source.test.tsx
new file mode 100644
index 00000000000000..a45094ac55ba0a
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source.test.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 '../../../../../__mocks__/kea.mock';
+import '../../../../../__mocks__/shallow_useeffect.mock';
+
+import { setMockActions, setMockValues } from '../../../../../__mocks__';
+import { sourceConfigData } from '../../../../__mocks__/content_sources.mock';
+
+jest.mock('../../../../../shared/kibana', () => ({
+  KibanaLogic: { values: { navigateToUrl: jest.fn() } },
+}));
+import { KibanaLogic } from '../../../../../shared/kibana';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Loading } from '../../../../../shared/loading';
+
+import { AddSource } from './add_source';
+import { AddSourceSteps } from './add_source_logic';
+import { ConfigCompleted } from './config_completed';
+import { ConfigurationIntro } from './configuration_intro';
+import { ConfigureCustom } from './configure_custom';
+import { ConfigureOauth } from './configure_oauth';
+import { ConnectInstance } from './connect_instance';
+import { ReAuthenticate } from './re_authenticate';
+import { SaveConfig } from './save_config';
+import { SaveCustom } from './save_custom';
+
+describe('AddSourceList', () => {
+  const initializeAddSource = jest.fn();
+  const setAddSourceStep = jest.fn();
+  const saveSourceConfig = jest.fn((_, setConfigCompletedStep) => {
+    setConfigCompletedStep();
+  });
+  const createContentSource = jest.fn((_, formSubmitSuccess) => {
+    formSubmitSuccess();
+  });
+  const resetSourcesState = jest.fn();
+
+  const mockValues = {
+    addSourceCurrentStep: AddSourceSteps.ConfigIntroStep,
+    sourceConfigData,
+    dataLoading: false,
+    newCustomSource: {},
+    isOrganization: true,
+  };
+
+  beforeEach(() => {
+    setMockActions({
+      initializeAddSource,
+      setAddSourceStep,
+      saveSourceConfig,
+      createContentSource,
+      resetSourcesState,
+    });
+    setMockValues(mockValues);
+  });
+
+  it('renders default state', () => {
+    const wrapper = shallow(<AddSource sourceIndex={1} />);
+    wrapper.find(ConfigurationIntro).prop('advanceStep')();
+
+    expect(setAddSourceStep).toHaveBeenCalledWith(AddSourceSteps.SaveConfigStep);
+  });
+
+  it('handles loading state', () => {
+    setMockValues({ ...mockValues, dataLoading: true });
+    const wrapper = shallow(<AddSource sourceIndex={1} />);
+
+    expect(wrapper.find(Loading)).toHaveLength(1);
+  });
+
+  it('renders Config Completed step', () => {
+    setMockValues({
+      ...mockValues,
+      addSourceCurrentStep: AddSourceSteps.ConfigCompletedStep,
+    });
+    const wrapper = shallow(<AddSource sourceIndex={1} />);
+    wrapper.find(ConfigCompleted).prop('advanceStep')();
+
+    expect(KibanaLogic.values.navigateToUrl).toHaveBeenCalledWith(
+      '/sources/add/confluence_cloud/connect'
+    );
+    expect(setAddSourceStep).toHaveBeenCalledWith(AddSourceSteps.ConnectInstanceStep);
+  });
+
+  it('renders Save Config step', () => {
+    setMockValues({
+      ...mockValues,
+      addSourceCurrentStep: AddSourceSteps.SaveConfigStep,
+    });
+    const wrapper = shallow(<AddSource sourceIndex={1} />);
+    const saveConfig = wrapper.find(SaveConfig);
+    saveConfig.prop('advanceStep')();
+    saveConfig.prop('goBackStep')!();
+
+    expect(setAddSourceStep).toHaveBeenCalledWith(AddSourceSteps.ConfigIntroStep);
+    expect(saveSourceConfig).toHaveBeenCalled();
+  });
+
+  it('renders Connect Instance step', () => {
+    setMockValues({
+      ...mockValues,
+      sourceConfigData,
+      addSourceCurrentStep: AddSourceSteps.ConnectInstanceStep,
+    });
+    const wrapper = shallow(<AddSource sourceIndex={1} connect />);
+    wrapper.find(ConnectInstance).prop('onFormCreated')('foo');
+
+    expect(KibanaLogic.values.navigateToUrl).toHaveBeenCalledWith(
+      '/sources/add/confluence_cloud/connect'
+    );
+  });
+
+  it('renders Configure Custom step', () => {
+    setMockValues({
+      ...mockValues,
+      addSourceCurrentStep: AddSourceSteps.ConfigureCustomStep,
+    });
+    const wrapper = shallow(<AddSource sourceIndex={1} />);
+    wrapper.find(ConfigureCustom).prop('advanceStep')();
+
+    expect(createContentSource).toHaveBeenCalled();
+  });
+
+  it('renders Configure Oauth step', () => {
+    setMockValues({
+      ...mockValues,
+      addSourceCurrentStep: AddSourceSteps.ConfigureOauthStep,
+    });
+    const wrapper = shallow(<AddSource sourceIndex={1} />);
+
+    wrapper.find(ConfigureOauth).prop('onFormCreated')('foo');
+
+    expect(KibanaLogic.values.navigateToUrl).toHaveBeenCalledWith(
+      '/sources/add/confluence_cloud/connect'
+    );
+  });
+
+  it('renders Save Custom step', () => {
+    setMockValues({
+      ...mockValues,
+      addSourceCurrentStep: AddSourceSteps.SaveCustomStep,
+    });
+    const wrapper = shallow(<AddSource sourceIndex={1} />);
+
+    expect(wrapper.find(SaveCustom)).toHaveLength(1);
+  });
+
+  it('renders ReAuthenticate step', () => {
+    setMockValues({
+      ...mockValues,
+      addSourceCurrentStep: AddSourceSteps.ReAuthenticateStep,
+    });
+    const wrapper = shallow(<AddSource sourceIndex={1} />);
+
+    expect(wrapper.find(ReAuthenticate)).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source.tsx
index eca363da89433d..b3f02c831d977c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source.tsx
@@ -4,17 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
-import { History } from 'history';
 import { useActions, useValues } from 'kea';
-import { useHistory } from 'react-router-dom';
 
 import { AppLogic } from '../../../../app_logic';
-import { Loading } from '../../../../../../applications/shared/loading';
+import { KibanaLogic } from '../../../../../shared/kibana';
+import { Loading } from '../../../../../shared/loading';
 import { CUSTOM_SERVICE_TYPE } from '../../../../constants';
 import { staticSourceData } from '../../source_data';
-import { AddSourceLogic } from './add_source_logic';
+import { AddSourceLogic, AddSourceProps, AddSourceSteps } from './add_source_logic';
 import { SourceDataItem } from '../../../../types';
 import { SOURCE_ADDED_PATH, getSourcesPath } from '../../../../routes';
 
@@ -28,38 +27,16 @@ import { ReAuthenticate } from './re_authenticate';
 import { SaveConfig } from './save_config';
 import { SaveCustom } from './save_custom';
 
-enum Steps {
-  ConfigIntroStep = 'Config Intro',
-  SaveConfigStep = 'Save Config',
-  ConfigCompletedStep = 'Config Completed',
-  ConnectInstanceStep = 'Connect Instance',
-  ConfigureCustomStep = 'Configure Custom',
-  ConfigureOauthStep = 'Configure Oauth',
-  SaveCustomStep = 'Save Custom',
-  ReAuthenticateStep = 'ReAuthenticate',
-}
-
-interface AddSourceProps {
-  sourceIndex: number;
-  connect?: boolean;
-  configure?: boolean;
-  reAuthenticate?: boolean;
-}
-
-export const AddSource: React.FC<AddSourceProps> = ({
-  sourceIndex,
-  connect,
-  configure,
-  reAuthenticate,
-}) => {
-  const history = useHistory() as History;
+export const AddSource: React.FC<AddSourceProps> = (props) => {
   const {
-    getSourceConfigData,
+    initializeAddSource,
+    setAddSourceStep,
     saveSourceConfig,
     createContentSource,
     resetSourceState,
   } = useActions(AddSourceLogic);
   const {
+    addSourceCurrentStep,
     sourceConfigData: {
       name,
       categories,
@@ -79,54 +56,44 @@ export const AddSource: React.FC<AddSourceProps> = ({
     sourceDescription,
     connectStepDescription,
     addPath,
-  } = staticSourceData[sourceIndex] as SourceDataItem;
+  } = staticSourceData[props.sourceIndex] as SourceDataItem;
 
   const { isOrganization } = useValues(AppLogic);
 
   useEffect(() => {
-    getSourceConfigData(serviceType);
+    initializeAddSource(props);
     return resetSourceState;
   }, []);
 
-  const isCustom = serviceType === CUSTOM_SERVICE_TYPE;
-
-  const getFirstStep = () => {
-    if (isCustom) return Steps.ConfigureCustomStep;
-    if (connect) return Steps.ConnectInstanceStep;
-    if (configure) return Steps.ConfigureOauthStep;
-    if (reAuthenticate) return Steps.ReAuthenticateStep;
-    return Steps.ConfigIntroStep;
-  };
-
-  const [currentStep, setStep] = useState(getFirstStep());
-
   if (dataLoading) return <Loading />;
 
-  const goToConfigurationIntro = () => setStep(Steps.ConfigIntroStep);
-  const goToSaveConfig = () => setStep(Steps.SaveConfigStep);
-  const setConfigCompletedStep = () => setStep(Steps.ConfigCompletedStep);
+  const goToConfigurationIntro = () => setAddSourceStep(AddSourceSteps.ConfigIntroStep);
+  const goToSaveConfig = () => setAddSourceStep(AddSourceSteps.SaveConfigStep);
+  const setConfigCompletedStep = () => setAddSourceStep(AddSourceSteps.ConfigCompletedStep);
   const goToConfigCompleted = () => saveSourceConfig(false, setConfigCompletedStep);
 
   const goToConnectInstance = () => {
-    setStep(Steps.ConnectInstanceStep);
-    history.push(`${getSourcesPath(addPath, isOrganization)}/connect`);
+    setAddSourceStep(AddSourceSteps.ConnectInstanceStep);
+    KibanaLogic.values.navigateToUrl(`${getSourcesPath(addPath, isOrganization)}/connect`);
   };
 
-  const saveCustomSuccess = () => setStep(Steps.SaveCustomStep);
+  const saveCustomSuccess = () => setAddSourceStep(AddSourceSteps.SaveCustomStep);
   const goToSaveCustom = () => createContentSource(CUSTOM_SERVICE_TYPE, saveCustomSuccess);
 
   const goToFormSourceCreated = (sourceName: string) => {
-    history.push(`${getSourcesPath(SOURCE_ADDED_PATH, isOrganization)}/?name=${sourceName}`);
+    KibanaLogic.values.navigateToUrl(
+      `${getSourcesPath(SOURCE_ADDED_PATH, isOrganization)}/?name=${sourceName}`
+    );
   };
 
   const header = <AddSourceHeader name={name} serviceType={serviceType} categories={categories} />;
 
   return (
     <>
-      {currentStep === Steps.ConfigIntroStep && (
+      {addSourceCurrentStep === AddSourceSteps.ConfigIntroStep && (
         <ConfigurationIntro name={name} advanceStep={goToSaveConfig} header={header} />
       )}
-      {currentStep === Steps.SaveConfigStep && (
+      {addSourceCurrentStep === AddSourceSteps.SaveConfigStep && (
         <SaveConfig
           name={name}
           configuration={configuration}
@@ -135,7 +102,7 @@ export const AddSource: React.FC<AddSourceProps> = ({
           header={header}
         />
       )}
-      {currentStep === Steps.ConfigCompletedStep && (
+      {addSourceCurrentStep === AddSourceSteps.ConfigCompletedStep && (
         <ConfigCompleted
           name={name}
           accountContextOnly={accountContextOnly}
@@ -144,7 +111,7 @@ export const AddSource: React.FC<AddSourceProps> = ({
           header={header}
         />
       )}
-      {currentStep === Steps.ConnectInstanceStep && (
+      {addSourceCurrentStep === AddSourceSteps.ConnectInstanceStep && (
         <ConnectInstance
           name={name}
           serviceType={serviceType}
@@ -158,17 +125,17 @@ export const AddSource: React.FC<AddSourceProps> = ({
           header={header}
         />
       )}
-      {currentStep === Steps.ConfigureCustomStep && (
+      {addSourceCurrentStep === AddSourceSteps.ConfigureCustomStep && (
         <ConfigureCustom
           helpText={configuration.helpText}
           advanceStep={goToSaveCustom}
           header={header}
         />
       )}
-      {currentStep === Steps.ConfigureOauthStep && (
+      {addSourceCurrentStep === AddSourceSteps.ConfigureOauthStep && (
         <ConfigureOauth name={name} onFormCreated={goToFormSourceCreated} header={header} />
       )}
-      {currentStep === Steps.SaveCustomStep && (
+      {addSourceCurrentStep === AddSourceSteps.SaveCustomStep && (
         <SaveCustom
           documentationUrl={configuration.documentationUrl}
           newCustomSource={newCustomSource}
@@ -176,7 +143,9 @@ export const AddSource: React.FC<AddSourceProps> = ({
           header={header}
         />
       )}
-      {currentStep === Steps.ReAuthenticateStep && <ReAuthenticate name={name} header={header} />}
+      {addSourceCurrentStep === AddSourceSteps.ReAuthenticateStep && (
+        <ReAuthenticate name={name} header={header} />
+      )}
     </>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_logic.test.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_logic.test.ts
index ba38b46aa05521..084c3d1fb9c4f1 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_logic.test.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_logic.test.ts
@@ -32,6 +32,7 @@ import { sourceConfigData } from '../../../../__mocks__/content_sources.mock';
 
 import {
   AddSourceLogic,
+  AddSourceSteps,
   SourceConfigData,
   SourceConnectData,
   OrganizationsMap,
@@ -39,6 +40,8 @@ import {
 
 describe('AddSourceLogic', () => {
   const defaultValues = {
+    addSourceCurrentStep: AddSourceSteps.ConfigIntroStep,
+    addSourceProps: {},
     dataLoading: true,
     sectionLoading: true,
     buttonLoading: false,
@@ -70,6 +73,8 @@ describe('AddSourceLogic', () => {
     githubOrganizations: ['foo', 'bar'],
   };
 
+  const CUSTOM_SERVICE_TYPE_INDEX = 17;
+
   const clearFlashMessagesSpy = jest.spyOn(FlashMessagesLogic.actions, 'clearFlashMessages');
 
   beforeEach(() => {
@@ -224,6 +229,53 @@ describe('AddSourceLogic', () => {
   });
 
   describe('listeners', () => {
+    it('initializeAddSource', () => {
+      const addSourceProps = { sourceIndex: 1 };
+      const getSourceConfigDataSpy = jest.spyOn(AddSourceLogic.actions, 'getSourceConfigData');
+      const setAddSourcePropsSpy = jest.spyOn(AddSourceLogic.actions, 'setAddSourceProps');
+      const setAddSourceStepSpy = jest.spyOn(AddSourceLogic.actions, 'setAddSourceStep');
+
+      AddSourceLogic.actions.initializeAddSource(addSourceProps);
+
+      expect(setAddSourcePropsSpy).toHaveBeenCalledWith({ addSourceProps });
+      expect(setAddSourceStepSpy).toHaveBeenCalledWith(AddSourceSteps.ConfigIntroStep);
+      expect(getSourceConfigDataSpy).toHaveBeenCalledWith('confluence_cloud');
+    });
+
+    describe('getFirstStep', () => {
+      it('sets custom as first step', () => {
+        const setAddSourceStepSpy = jest.spyOn(AddSourceLogic.actions, 'setAddSourceStep');
+        const addSourceProps = { sourceIndex: CUSTOM_SERVICE_TYPE_INDEX };
+        AddSourceLogic.actions.initializeAddSource(addSourceProps);
+
+        expect(setAddSourceStepSpy).toHaveBeenCalledWith(AddSourceSteps.ConfigureCustomStep);
+      });
+
+      it('sets connect as first step', () => {
+        const setAddSourceStepSpy = jest.spyOn(AddSourceLogic.actions, 'setAddSourceStep');
+        const addSourceProps = { sourceIndex: 1, connect: true };
+        AddSourceLogic.actions.initializeAddSource(addSourceProps);
+
+        expect(setAddSourceStepSpy).toHaveBeenCalledWith(AddSourceSteps.ConnectInstanceStep);
+      });
+
+      it('sets configure as first step', () => {
+        const setAddSourceStepSpy = jest.spyOn(AddSourceLogic.actions, 'setAddSourceStep');
+        const addSourceProps = { sourceIndex: 1, configure: true };
+        AddSourceLogic.actions.initializeAddSource(addSourceProps);
+
+        expect(setAddSourceStepSpy).toHaveBeenCalledWith(AddSourceSteps.ConfigureOauthStep);
+      });
+
+      it('sets reAuthenticate as first step', () => {
+        const setAddSourceStepSpy = jest.spyOn(AddSourceLogic.actions, 'setAddSourceStep');
+        const addSourceProps = { sourceIndex: 1, reAuthenticate: true };
+        AddSourceLogic.actions.initializeAddSource(addSourceProps);
+
+        expect(setAddSourceStepSpy).toHaveBeenCalledWith(AddSourceSteps.ReAuthenticateStep);
+      });
+    });
+
     describe('organization context', () => {
       describe('getSourceConfigData', () => {
         it('calls API and sets values', async () => {
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_logic.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_logic.ts
index c487b584d8acef..ec5cf541c2316e 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_logic.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_logic.ts
@@ -18,10 +18,40 @@ import {
   FlashMessagesLogic,
 } from '../../../../../shared/flash_messages';
 
+import { staticSourceData } from '../../source_data';
+import { CUSTOM_SERVICE_TYPE } from '../../../../constants';
+
 import { AppLogic } from '../../../../app_logic';
 import { CustomSource } from '../../../../types';
 
+export interface AddSourceProps {
+  sourceIndex: number;
+  connect?: boolean;
+  configure?: boolean;
+  reAuthenticate?: boolean;
+}
+
+export enum AddSourceSteps {
+  ConfigIntroStep = 'Config Intro',
+  SaveConfigStep = 'Save Config',
+  ConfigCompletedStep = 'Config Completed',
+  ConnectInstanceStep = 'Connect Instance',
+  ConfigureCustomStep = 'Configure Custom',
+  ConfigureOauthStep = 'Configure Oauth',
+  SaveCustomStep = 'Save Custom',
+  ReAuthenticateStep = 'ReAuthenticate',
+}
+
 export interface AddSourceActions {
+  initializeAddSource: (addSourceProps: AddSourceProps) => { addSourceProps: AddSourceProps };
+  setAddSourceProps: ({
+    addSourceProps,
+  }: {
+    addSourceProps: AddSourceProps;
+  }) => {
+    addSourceProps: AddSourceProps;
+  };
+  setAddSourceStep(addSourceCurrentStep: AddSourceSteps): AddSourceSteps;
   setSourceConfigData(sourceConfigData: SourceConfigData): SourceConfigData;
   setSourceConnectData(sourceConnectData: SourceConnectData): SourceConnectData;
   setClientIdValue(clientIdValue: string): string;
@@ -83,6 +113,8 @@ export interface OrganizationsMap {
 }
 
 interface AddSourceValues {
+  addSourceProps: AddSourceProps;
+  addSourceCurrentStep: AddSourceSteps;
   dataLoading: boolean;
   sectionLoading: boolean;
   buttonLoading: boolean;
@@ -112,6 +144,11 @@ interface PreContentSourceResponse {
 export const AddSourceLogic = kea<MakeLogicType<AddSourceValues, AddSourceActions>>({
   path: ['enterprise_search', 'workplace_search', 'add_source_logic'],
   actions: {
+    initializeAddSource: (addSourceProps: AddSourceProps) => ({ addSourceProps }),
+    setAddSourceProps: ({ addSourceProps }: { addSourceProps: AddSourceProps }) => ({
+      addSourceProps,
+    }),
+    setAddSourceStep: (addSourceCurrentStep: AddSourceSteps) => addSourceCurrentStep,
     setSourceConfigData: (sourceConfigData: SourceConfigData) => sourceConfigData,
     setSourceConnectData: (sourceConnectData: SourceConnectData) => sourceConnectData,
     setClientIdValue: (clientIdValue: string) => clientIdValue,
@@ -145,6 +182,18 @@ export const AddSourceLogic = kea<MakeLogicType<AddSourceValues, AddSourceAction
     setButtonNotLoading: () => false,
   },
   reducers: {
+    addSourceProps: [
+      {} as AddSourceProps,
+      {
+        setAddSourceProps: (_, { addSourceProps }) => addSourceProps,
+      },
+    ],
+    addSourceCurrentStep: [
+      AddSourceSteps.ConfigIntroStep,
+      {
+        setAddSourceStep: (_, addSourceCurrentStep) => addSourceCurrentStep,
+      },
+    ],
     sourceConfigData: [
       {} as SourceConfigData,
       {
@@ -282,6 +331,12 @@ export const AddSourceLogic = kea<MakeLogicType<AddSourceValues, AddSourceAction
     ],
   }),
   listeners: ({ actions, values }) => ({
+    initializeAddSource: ({ addSourceProps }) => {
+      const { serviceType } = staticSourceData[addSourceProps.sourceIndex];
+      actions.setAddSourceProps({ addSourceProps });
+      actions.setAddSourceStep(getFirstStep(addSourceProps));
+      actions.getSourceConfigData(serviceType);
+    },
     getSourceConfigData: async ({ serviceType }) => {
       const route = `/api/workplace_search/org/settings/connectors/${serviceType}`;
 
@@ -435,3 +490,15 @@ export const AddSourceLogic = kea<MakeLogicType<AddSourceValues, AddSourceAction
     },
   }),
 });
+
+const getFirstStep = (props: AddSourceProps): AddSourceSteps => {
+  const { sourceIndex, connect, configure, reAuthenticate } = props;
+  const { serviceType } = staticSourceData[sourceIndex];
+  const isCustom = serviceType === CUSTOM_SERVICE_TYPE;
+
+  if (isCustom) return AddSourceSteps.ConfigureCustomStep;
+  if (connect) return AddSourceSteps.ConnectInstanceStep;
+  if (configure) return AddSourceSteps.ConfigureOauthStep;
+  if (reAuthenticate) return AddSourceSteps.ReAuthenticateStep;
+  return AddSourceSteps.ConfigIntroStep;
+};

From b484071096f6e45de3efbbf1b31738a3182091a9 Mon Sep 17 00:00:00 2001
From: Candace Park <56409205+parkiino@users.noreply.github.com>
Date: Fri, 18 Dec 2020 11:07:26 -0800
Subject: [PATCH 28/75] [Security Solution][Endpoint][Admin] Disables malware
 checkbox when switch is off and can now save in detect mode (#86402)

---
 .../view/policy_forms/protections/malware.tsx | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/protections/malware.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/protections/malware.tsx
index d611c4102e8f8c..8e631e497e57bd 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/protections/malware.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/protections/malware.tsx
@@ -55,16 +55,19 @@ const ProtectionRadio = React.memo(({ id, label }: { id: ProtectionModes; label:
   const radioButtonId = useMemo(() => htmlIdGenerator()(), []);
   // currently just taking windows.malware, but both windows.malware and mac.malware should be the same value
   const selected = policyDetailsConfig && policyDetailsConfig.windows.malware.mode;
+  const isPlatinumPlus = useLicense().isPlatinumPlus();
 
   const handleRadioChange = useCallback(() => {
     if (policyDetailsConfig) {
       const newPayload = cloneDeep(policyDetailsConfig);
       for (const os of OSes) {
         newPayload[os][protection].mode = id;
-        if (id === ProtectionModes.prevent) {
-          newPayload[os].popup[protection].enabled = true;
-        } else {
-          newPayload[os].popup[protection].enabled = false;
+        if (isPlatinumPlus) {
+          if (id === ProtectionModes.prevent) {
+            newPayload[os].popup[protection].enabled = true;
+          } else {
+            newPayload[os].popup[protection].enabled = false;
+          }
         }
       }
       dispatch({
@@ -72,7 +75,7 @@ const ProtectionRadio = React.memo(({ id, label }: { id: ProtectionModes; label:
         payload: { policyConfig: newPayload },
       });
     }
-  }, [dispatch, id, policyDetailsConfig]);
+  }, [dispatch, id, policyDetailsConfig, isPlatinumPlus]);
 
   /**
    *  Passing an arbitrary id because EuiRadio
@@ -158,12 +161,16 @@ export const MalwareProtections = React.memo(() => {
         if (event.target.checked === false) {
           for (const os of OSes) {
             newPayload[os][protection].mode = ProtectionModes.off;
-            newPayload[os].popup[protection].enabled = event.target.checked;
+            if (isPlatinumPlus) {
+              newPayload[os].popup[protection].enabled = event.target.checked;
+            }
           }
         } else {
           for (const os of OSes) {
             newPayload[os][protection].mode = ProtectionModes.prevent;
-            newPayload[os].popup[protection].enabled = event.target.checked;
+            if (isPlatinumPlus) {
+              newPayload[os].popup[protection].enabled = event.target.checked;
+            }
           }
         }
         dispatch({
@@ -172,7 +179,7 @@ export const MalwareProtections = React.memo(() => {
         });
       }
     },
-    [dispatch, policyDetailsConfig]
+    [dispatch, policyDetailsConfig, isPlatinumPlus]
   );
 
   const handleUserNotificationCheckbox = useCallback(
@@ -243,6 +250,7 @@ export const MalwareProtections = React.memo(() => {
               id="xpack.securitySolution.endpoint.policyDetail.malware.userNotification"
               onChange={handleUserNotificationCheckbox}
               checked={userNotificationSelected}
+              disabled={selected === ProtectionModes.off}
               label={i18n.translate(
                 'xpack.securitySolution.endpoint.policyDetail.malware.notifyUser',
                 {
@@ -305,6 +313,7 @@ export const MalwareProtections = React.memo(() => {
     );
   }, [
     radios,
+    selected,
     isPlatinumPlus,
     handleUserNotificationCheckbox,
     userNotificationSelected,

From 73068e755c115f7a14101ad2d2b54ad98d072a69 Mon Sep 17 00:00:00 2001
From: Candace Park <56409205+parkiino@users.noreply.github.com>
Date: Fri, 18 Dec 2020 11:45:29 -0800
Subject: [PATCH 29/75] [Security Solution][Endpoint][Admin] Remove spaces in
 custom malware message brackets (#86393)

---
 .../common/endpoint/models/policy_config.ts          |  2 +-
 .../apps/endpoint/policy_details.ts                  | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/security_solution/common/endpoint/models/policy_config.ts b/x-pack/plugins/security_solution/common/endpoint/models/policy_config.ts
index 22037c021701f7..14941b019421b8 100644
--- a/x-pack/plugins/security_solution/common/endpoint/models/policy_config.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/models/policy_config.ts
@@ -72,4 +72,4 @@ export const factory = (): PolicyConfig => {
 /**
  * Reflects what string the Endpoint will use when message field is default/empty
  */
-export const DefaultMalwareMessage = 'Elastic Security { action } { filename }';
+export const DefaultMalwareMessage = 'Elastic Security {action} {filename}';
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 1a5c99294c281a..e344d4c3c27e49 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
@@ -222,7 +222,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
                 popup: {
                   malware: {
                     enabled: true,
-                    message: 'Elastic Security { action } { filename }',
+                    message: 'Elastic Security {action} {filename}',
                   },
                 },
               },
@@ -241,7 +241,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
                 popup: {
                   malware: {
                     enabled: true,
-                    message: 'Elastic Security { action } { filename }',
+                    message: 'Elastic Security {action} {filename}',
                   },
                 },
                 antivirus_registration: {
@@ -366,7 +366,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
                 popup: {
                   malware: {
                     enabled: true,
-                    message: 'Elastic Security { action } { filename }',
+                    message: 'Elastic Security {action} {filename}',
                   },
                 },
               },
@@ -385,7 +385,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
                 popup: {
                   malware: {
                     enabled: true,
-                    message: 'Elastic Security { action } { filename }',
+                    message: 'Elastic Security {action} {filename}',
                   },
                 },
                 antivirus_registration: {
@@ -503,7 +503,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
                 popup: {
                   malware: {
                     enabled: true,
-                    message: 'Elastic Security { action } { filename }',
+                    message: 'Elastic Security {action} {filename}',
                   },
                 },
               },
@@ -522,7 +522,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
                 popup: {
                   malware: {
                     enabled: true,
-                    message: 'Elastic Security { action } { filename }',
+                    message: 'Elastic Security {action} {filename}',
                   },
                 },
                 antivirus_registration: {

From c33835e87cab3f1ad9f66a32520b9080541334ca Mon Sep 17 00:00:00 2001
From: Jonathan Budzenski <jon@budzenski.me>
Date: Fri, 18 Dec 2020 14:02:21 -0600
Subject: [PATCH 30/75] [docs] Add kibana-encryption-keys (#84577)

Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../security/encryption-keys/index.asciidoc   | 44 +++++++++++++++++++
 docs/user/security/index.asciidoc             |  1 +
 2 files changed, 45 insertions(+)
 create mode 100644 docs/user/security/encryption-keys/index.asciidoc

diff --git a/docs/user/security/encryption-keys/index.asciidoc b/docs/user/security/encryption-keys/index.asciidoc
new file mode 100644
index 00000000000000..58c0c0bb775caa
--- /dev/null
+++ b/docs/user/security/encryption-keys/index.asciidoc
@@ -0,0 +1,44 @@
+[[kibana-encryption-keys]]
+=== Set up encryptions keys to protect sensitive information
+
+The `kibana-encryption-keys` command helps you set up encryption keys that {kib} uses
+to protect sensitive information.
+
+[discrete]
+=== Synopsis
+
+[source,shell]
+--------------------------------------------------
+bin/kibana-encryption-keys generate
+[-i, --interactive] [-q, --quiet]
+[-f, --force] [-h, --help]
+--------------------------------------------------
+
+[discrete]
+=== Description
+
+{kib} uses encryption keys in several areas, ranging from encrypting data
+in {kib} associated indices to storing session information.  By defining these
+encryption keys in your configuration, you'll ensure consistent operations
+across restarts.
+
+[discrete]
+[[encryption-key-parameters]]
+=== Parameters
+
+`generate`::  Randomly generates passwords to the console.
+
+`-i, --interactive`:: Prompts you for which encryption keys to set and optionally
+where to save a sample configuration file.
+
+`-q, --quiet`:: Outputs the encryption keys without helper information.
+
+`-f, --force`:: Shows help information.
+
+[discrete]
+=== Examples
+
+[source,shell]
+--------------------------------------------------
+bin/kibana-encryption-keys generate
+--------------------------------------------------
diff --git a/docs/user/security/index.asciidoc b/docs/user/security/index.asciidoc
index f84e9de87c734a..6a5c4a83aa3ad5 100644
--- a/docs/user/security/index.asciidoc
+++ b/docs/user/security/index.asciidoc
@@ -45,5 +45,6 @@ cause Kibana's authorization to behave unexpectedly.
 include::authorization/index.asciidoc[]
 include::authorization/kibana-privileges.asciidoc[]
 include::api-keys/index.asciidoc[]
+include::encryption-keys/index.asciidoc[]
 include::role-mappings/index.asciidoc[]
 include::rbac_tutorial.asciidoc[]

From 8ce9b474d671dab83591254f973e3cb506aca511 Mon Sep 17 00:00:00 2001
From: Devon Thomson <devon.thomson@hotmail.com>
Date: Fri, 18 Dec 2020 15:07:36 -0500
Subject: [PATCH 31/75] [Time to Visualize] Fix Dashboard OnAppLeave (#86193)

Added isTransferInProgress to embeddable_state_transfer for apps to determine whether or not to show onAppLeave confirm
---
 ...c.embeddablestatetransfer._constructor_.md |  3 +-
 ...dablestatetransfer.istransferinprogress.md | 11 +++++++
 ...beddable-public.embeddablestatetransfer.md |  3 +-
 .../public/application/dashboard_app.tsx      | 17 +++++++---
 .../embeddable_state_transfer.test.ts         | 31 +++++++++++++++++--
 .../embeddable_state_transfer.ts              |  8 +++++
 src/plugins/embeddable/public/plugin.tsx      |  8 ++++-
 src/plugins/embeddable/public/public.api.md   |  4 ++-
 test/common/services/security/test_user.ts    |  6 ++--
 .../dashboard/create_and_add_embeddables.ts   |  2 +-
 .../apps/dashboard/dashboard_time_picker.ts   |  6 ++++
 .../apps/dashboard/panel_context_menu.ts      |  2 +-
 .../apps/dashboard/panel_replacing.ts         |  2 ++
 test/functional/page_objects/header_page.ts   | 17 ++++++++--
 .../services/dashboard/visualizations.ts      |  3 +-
 15 files changed, 102 insertions(+), 21 deletions(-)
 create mode 100644 docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.istransferinprogress.md

diff --git a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer._constructor_.md b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer._constructor_.md
index 276499b435e1f8..77e9c2d00b2dd8 100644
--- a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer._constructor_.md
+++ b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer._constructor_.md
@@ -9,7 +9,7 @@ Constructs a new instance of the `EmbeddableStateTransfer` class
 <b>Signature:</b>
 
 ```typescript
-constructor(navigateToApp: ApplicationStart['navigateToApp'], appList?: ReadonlyMap<string, PublicAppInfo> | undefined, customStorage?: Storage);
+constructor(navigateToApp: ApplicationStart['navigateToApp'], currentAppId$: ApplicationStart['currentAppId$'], appList?: ReadonlyMap<string, PublicAppInfo> | undefined, customStorage?: Storage);
 ```
 
 ## Parameters
@@ -17,6 +17,7 @@ constructor(navigateToApp: ApplicationStart['navigateToApp'], appList?: Readonly
 |  Parameter | Type | Description |
 |  --- | --- | --- |
 |  navigateToApp | <code>ApplicationStart['navigateToApp']</code> |  |
+|  currentAppId$ | <code>ApplicationStart['currentAppId$']</code> |  |
 |  appList | <code>ReadonlyMap&lt;string, PublicAppInfo&gt; &#124; undefined</code> |  |
 |  customStorage | <code>Storage</code> |  |
 
diff --git a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.istransferinprogress.md b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.istransferinprogress.md
new file mode 100644
index 00000000000000..f00d015f316d2a
--- /dev/null
+++ b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.istransferinprogress.md
@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-embeddable-public](./kibana-plugin-plugins-embeddable-public.md) &gt; [EmbeddableStateTransfer](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.md) &gt; [isTransferInProgress](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.istransferinprogress.md)
+
+## EmbeddableStateTransfer.isTransferInProgress property
+
+<b>Signature:</b>
+
+```typescript
+isTransferInProgress: boolean;
+```
diff --git a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.md b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.md
index 3676b744b8cc9c..76b6708b93bd12 100644
--- a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.md
+++ b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.md
@@ -16,13 +16,14 @@ export declare class EmbeddableStateTransfer
 
 |  Constructor | Modifiers | Description |
 |  --- | --- | --- |
-|  [(constructor)(navigateToApp, appList, customStorage)](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer._constructor_.md) |  | Constructs a new instance of the <code>EmbeddableStateTransfer</code> class |
+|  [(constructor)(navigateToApp, currentAppId$, appList, customStorage)](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer._constructor_.md) |  | Constructs a new instance of the <code>EmbeddableStateTransfer</code> class |
 
 ## Properties
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [getAppNameFromId](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.getappnamefromid.md) |  | <code>(appId: string) =&gt; string &#124; undefined</code> | Fetches an internationalized app title when given an appId. |
+|  [isTransferInProgress](./kibana-plugin-plugins-embeddable-public.embeddablestatetransfer.istransferinprogress.md) |  | <code>boolean</code> |  |
 
 ## Methods
 
diff --git a/src/plugins/dashboard/public/application/dashboard_app.tsx b/src/plugins/dashboard/public/application/dashboard_app.tsx
index 8eff48251b371e..845d64c16500df 100644
--- a/src/plugins/dashboard/public/application/dashboard_app.tsx
+++ b/src/plugins/dashboard/public/application/dashboard_app.tsx
@@ -45,6 +45,7 @@ import { removeQueryParam } from '../services/kibana_utils';
 import { IndexPattern } from '../services/data';
 import { EmbeddableRenderer } from '../services/embeddable';
 import { DashboardContainerInput } from '.';
+import { leaveConfirmStrings } from '../dashboard_strings';
 
 export interface DashboardAppProps {
   history: History;
@@ -64,8 +65,9 @@ export function DashboardApp({
     core,
     onAppLeave,
     uiSettings,
-    indexPatterns: indexPatternService,
+    embeddable,
     dashboardCapabilities,
+    indexPatterns: indexPatternService,
   } = useKibana<DashboardAppServices>().services;
 
   const [lastReloadTime, setLastReloadTime] = useState(0);
@@ -196,9 +198,14 @@ export function DashboardApp({
       return;
     }
     onAppLeave((actions) => {
-      if (dashboardStateManager?.getIsDirty()) {
-        // TODO: Finish App leave handler with overrides when redirecting to an editor.
-        // return actions.confirm(leaveConfirmStrings.leaveSubtitle, leaveConfirmStrings.leaveTitle);
+      if (
+        dashboardStateManager?.getIsDirty() &&
+        !embeddable.getStateTransfer().isTransferInProgress
+      ) {
+        return actions.confirm(
+          leaveConfirmStrings.getLeaveSubtitle(),
+          leaveConfirmStrings.getLeaveTitle()
+        );
       }
       return actions.default();
     });
@@ -206,7 +213,7 @@ export function DashboardApp({
       // reset on app leave handler so leaving from the listing page doesn't trigger a confirmation
       onAppLeave((actions) => actions.default());
     };
-  }, [dashboardStateManager, dashboardContainer, onAppLeave]);
+  }, [dashboardStateManager, dashboardContainer, onAppLeave, embeddable]);
 
   // Refresh the dashboard container when lastReloadTime changes
   useEffect(() => {
diff --git a/src/plugins/embeddable/public/lib/state_transfer/embeddable_state_transfer.test.ts b/src/plugins/embeddable/public/lib/state_transfer/embeddable_state_transfer.test.ts
index cbaeddf472d52c..be034d125dceef 100644
--- a/src/plugins/embeddable/public/lib/state_transfer/embeddable_state_transfer.test.ts
+++ b/src/plugins/embeddable/public/lib/state_transfer/embeddable_state_transfer.test.ts
@@ -23,6 +23,7 @@ import { EmbeddableStateTransfer } from '.';
 import { ApplicationStart, PublicAppInfo } from '../../../../../core/public';
 import { EMBEDDABLE_EDITOR_STATE_KEY, EMBEDDABLE_PACKAGE_STATE_KEY } from './types';
 import { EMBEDDABLE_STATE_TRANSFER_STORAGE_KEY } from './embeddable_state_transfer';
+import { Subject } from 'rxjs';
 
 const createStorage = (): Storage => {
   const createMockStore = () => {
@@ -46,16 +47,24 @@ const createStorage = (): Storage => {
 describe('embeddable state transfer', () => {
   let application: jest.Mocked<ApplicationStart>;
   let stateTransfer: EmbeddableStateTransfer;
+  let currentAppId$: Subject<string | undefined>;
   let store: Storage;
 
   const destinationApp = 'superUltraVisualize';
   const originatingApp = 'superUltraTestDashboard';
 
   beforeEach(() => {
+    currentAppId$ = new Subject();
+    currentAppId$.next(originatingApp);
     const core = coreMock.createStart();
     application = core.application;
     store = createStorage();
-    stateTransfer = new EmbeddableStateTransfer(application.navigateToApp, undefined, store);
+    stateTransfer = new EmbeddableStateTransfer(
+      application.navigateToApp,
+      currentAppId$,
+      undefined,
+      store
+    );
   });
 
   it('cannot fetch app name when given no app list', async () => {
@@ -67,7 +76,7 @@ describe('embeddable state transfer', () => {
       ['testId', { title: 'State Transfer Test App Hello' } as PublicAppInfo],
       ['testId2', { title: 'State Transfer Test App Goodbye' } as PublicAppInfo],
     ]);
-    stateTransfer = new EmbeddableStateTransfer(application.navigateToApp, appsList);
+    stateTransfer = new EmbeddableStateTransfer(application.navigateToApp, currentAppId$, appsList);
     expect(stateTransfer.getAppNameFromId('kibanana')).toBeUndefined();
   });
 
@@ -76,7 +85,7 @@ describe('embeddable state transfer', () => {
       ['testId', { title: 'State Transfer Test App Hello' } as PublicAppInfo],
       ['testId2', { title: 'State Transfer Test App Goodbye' } as PublicAppInfo],
     ]);
-    stateTransfer = new EmbeddableStateTransfer(application.navigateToApp, appsList);
+    stateTransfer = new EmbeddableStateTransfer(application.navigateToApp, currentAppId$, appsList);
     expect(stateTransfer.getAppNameFromId('testId')).toBe('State Transfer Test App Hello');
     expect(stateTransfer.getAppNameFromId('testId2')).toBe('State Transfer Test App Goodbye');
   });
@@ -107,6 +116,13 @@ describe('embeddable state transfer', () => {
     });
   });
 
+  it('sets isTransferInProgress to true when sending an outgoing editor state', async () => {
+    await stateTransfer.navigateToEditor(destinationApp, { state: { originatingApp } });
+    expect(stateTransfer.isTransferInProgress).toEqual(true);
+    currentAppId$.next(destinationApp);
+    expect(stateTransfer.isTransferInProgress).toEqual(false);
+  });
+
   it('can send an outgoing embeddable package state', async () => {
     await stateTransfer.navigateToWithEmbeddablePackage(destinationApp, {
       state: { type: 'coolestType', input: { savedObjectId: '150' } },
@@ -135,6 +151,15 @@ describe('embeddable state transfer', () => {
     });
   });
 
+  it('sets isTransferInProgress to true when sending an outgoing embeddable package state', async () => {
+    await stateTransfer.navigateToWithEmbeddablePackage(destinationApp, {
+      state: { type: 'coolestType', input: { savedObjectId: '150' } },
+    });
+    expect(stateTransfer.isTransferInProgress).toEqual(true);
+    currentAppId$.next(destinationApp);
+    expect(stateTransfer.isTransferInProgress).toEqual(false);
+  });
+
   it('can fetch an incoming editor state', async () => {
     store.set(EMBEDDABLE_STATE_TRANSFER_STORAGE_KEY, {
       [EMBEDDABLE_EDITOR_STATE_KEY]: { originatingApp: 'superUltraTestDashboard' },
diff --git a/src/plugins/embeddable/public/lib/state_transfer/embeddable_state_transfer.ts b/src/plugins/embeddable/public/lib/state_transfer/embeddable_state_transfer.ts
index 0b34bea8105205..92900059668db6 100644
--- a/src/plugins/embeddable/public/lib/state_transfer/embeddable_state_transfer.ts
+++ b/src/plugins/embeddable/public/lib/state_transfer/embeddable_state_transfer.ts
@@ -38,14 +38,20 @@ export const EMBEDDABLE_STATE_TRANSFER_STORAGE_KEY = 'EMBEDDABLE_STATE_TRANSFER'
  * @public
  */
 export class EmbeddableStateTransfer {
+  public isTransferInProgress: boolean;
   private storage: Storage;
 
   constructor(
     private navigateToApp: ApplicationStart['navigateToApp'],
+    currentAppId$: ApplicationStart['currentAppId$'],
     private appList?: ReadonlyMap<string, PublicAppInfo> | undefined,
     customStorage?: Storage
   ) {
     this.storage = customStorage ? customStorage : new Storage(sessionStorage);
+    this.isTransferInProgress = false;
+    currentAppId$.subscribe(() => {
+      this.isTransferInProgress = false;
+    });
   }
 
   /**
@@ -105,6 +111,7 @@ export class EmbeddableStateTransfer {
       state: EmbeddableEditorState;
     }
   ): Promise<void> {
+    this.isTransferInProgress = true;
     await this.navigateToWithState<EmbeddableEditorState>(appId, EMBEDDABLE_EDITOR_STATE_KEY, {
       ...options,
       appendToExistingState: true,
@@ -119,6 +126,7 @@ export class EmbeddableStateTransfer {
     appId: string,
     options?: { path?: string; state: EmbeddablePackageState }
   ): Promise<void> {
+    this.isTransferInProgress = true;
     await this.navigateToWithState<EmbeddablePackageState>(appId, EMBEDDABLE_PACKAGE_STATE_KEY, {
       ...options,
       appendToExistingState: true,
diff --git a/src/plugins/embeddable/public/plugin.tsx b/src/plugins/embeddable/public/plugin.tsx
index 5118a1a8818c0e..6f43d87bdcd53c 100644
--- a/src/plugins/embeddable/public/plugin.tsx
+++ b/src/plugins/embeddable/public/plugin.tsx
@@ -161,6 +161,7 @@ export class EmbeddablePublicPlugin implements Plugin<EmbeddableSetup, Embeddabl
 
     this.stateTransferService = new EmbeddableStateTransfer(
       core.application.navigateToApp,
+      core.application.currentAppId$,
       this.appList
     );
     this.isRegistryReady = true;
@@ -206,7 +207,12 @@ export class EmbeddablePublicPlugin implements Plugin<EmbeddableSetup, Embeddabl
         ),
       getStateTransfer: (storage?: Storage) =>
         storage
-          ? new EmbeddableStateTransfer(core.application.navigateToApp, this.appList, storage)
+          ? new EmbeddableStateTransfer(
+              core.application.navigateToApp,
+              core.application.currentAppId$,
+              this.appList,
+              storage
+            )
           : this.stateTransferService,
       EmbeddablePanel: getEmbeddablePanelHoc(),
       telemetry: getTelemetryFunction(commonContract),
diff --git a/src/plugins/embeddable/public/public.api.md b/src/plugins/embeddable/public/public.api.md
index 03818fccda0bc4..7563b66e58ae9a 100644
--- a/src/plugins/embeddable/public/public.api.md
+++ b/src/plugins/embeddable/public/public.api.md
@@ -628,12 +628,14 @@ export interface EmbeddableStartDependencies {
 export class EmbeddableStateTransfer {
     // Warning: (ae-forgotten-export) The symbol "ApplicationStart" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "PublicAppInfo" needs to be exported by the entry point index.d.ts
-    constructor(navigateToApp: ApplicationStart['navigateToApp'], appList?: ReadonlyMap<string, PublicAppInfo> | undefined, customStorage?: Storage);
+    constructor(navigateToApp: ApplicationStart['navigateToApp'], currentAppId$: ApplicationStart['currentAppId$'], appList?: ReadonlyMap<string, PublicAppInfo> | undefined, customStorage?: Storage);
     // (undocumented)
     clearEditorState(): void;
     getAppNameFromId: (appId: string) => string | undefined;
     getIncomingEditorState(removeAfterFetch?: boolean): EmbeddableEditorState | undefined;
     getIncomingEmbeddablePackage(removeAfterFetch?: boolean): EmbeddablePackageState | undefined;
+    // (undocumented)
+    isTransferInProgress: boolean;
     // Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "kibana" does not have an export "ApplicationStart"
     navigateToEditor(appId: string, options?: {
         path?: string;
diff --git a/test/common/services/security/test_user.ts b/test/common/services/security/test_user.ts
index 7183943591c884..25a36fed9c9c5e 100644
--- a/test/common/services/security/test_user.ts
+++ b/test/common/services/security/test_user.ts
@@ -87,11 +87,11 @@ export async function createTestUserService(
         });
 
         if (browser && testSubjects && shouldRefreshBrowser) {
-          // accept alert if it pops up
-          const alert = await browser.getAlert();
-          await alert?.accept();
           if (await testSubjects.exists('kibanaChrome', { allowHidden: true })) {
             await browser.refresh();
+            // accept alert if it pops up
+            const alert = await browser.getAlert();
+            await alert?.accept();
             await testSubjects.find('kibanaChrome', config.get('timeouts.find') * 10);
           }
         }
diff --git a/test/functional/apps/dashboard/create_and_add_embeddables.ts b/test/functional/apps/dashboard/create_and_add_embeddables.ts
index d8b8a6f91fe317..605ea26b76c6f7 100644
--- a/test/functional/apps/dashboard/create_and_add_embeddables.ts
+++ b/test/functional/apps/dashboard/create_and_add_embeddables.ts
@@ -81,7 +81,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
 
       it('saves the saved visualization url to the app link', async () => {
-        await PageObjects.header.clickVisualize();
+        await PageObjects.header.clickVisualize(true);
         const currentUrl = await browser.getCurrentUrl();
         expect(currentUrl).to.contain(VisualizeConstants.EDIT_PATH);
       });
diff --git a/test/functional/apps/dashboard/dashboard_time_picker.ts b/test/functional/apps/dashboard/dashboard_time_picker.ts
index 274a4355e26e23..c759edd638260a 100644
--- a/test/functional/apps/dashboard/dashboard_time_picker.ts
+++ b/test/functional/apps/dashboard/dashboard_time_picker.ts
@@ -40,6 +40,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     after(async () => {
       await kibanaServer.uiSettings.replace({});
       await browser.refresh();
+      const alert = await browser.getAlert();
+      await alert?.accept();
     });
 
     it('Visualization updated when time picker changes', async () => {
@@ -88,6 +90,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         `)`;
       log.debug('go to url' + `${kibanaBaseUrl}#${urlQuery}`);
       await browser.get(`${kibanaBaseUrl}#${urlQuery}`, true);
+      const alert = await browser.getAlert();
+      await alert?.accept();
       await PageObjects.header.waitUntilLoadingHasFinished();
       const time = await PageObjects.timePicker.getTimeConfig();
       const refresh = await PageObjects.timePicker.getRefreshConfig();
@@ -99,6 +103,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     it('Timepicker respects dateFormat from UI settings', async () => {
       await kibanaServer.uiSettings.replace({ dateFormat: 'YYYY-MM-DD HH:mm:ss.SSS' });
       await browser.refresh();
+      const alert = await browser.getAlert();
+      await alert?.accept();
       await PageObjects.dashboard.gotoDashboardLandingPage();
       await PageObjects.dashboard.clickNewDashboard();
       await PageObjects.dashboard.addVisualizations([PIE_CHART_VIS_NAME]);
diff --git a/test/functional/apps/dashboard/panel_context_menu.ts b/test/functional/apps/dashboard/panel_context_menu.ts
index 0b9e873f46151b..bd6756835af319 100644
--- a/test/functional/apps/dashboard/panel_context_menu.ts
+++ b/test/functional/apps/dashboard/panel_context_menu.ts
@@ -110,7 +110,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       const searchName = 'my search';
 
       before(async () => {
-        await PageObjects.header.clickDiscover();
+        await PageObjects.header.clickDiscover(true);
         await PageObjects.discover.clickNewSearchButton();
         await dashboardVisualizations.createSavedSearch({ name: searchName, fields: ['bytes'] });
         await PageObjects.header.waitUntilLoadingHasFinished();
diff --git a/test/functional/apps/dashboard/panel_replacing.ts b/test/functional/apps/dashboard/panel_replacing.ts
index 6bf3dbbe47b1d1..c9ecf42dbc8e8a 100644
--- a/test/functional/apps/dashboard/panel_replacing.ts
+++ b/test/functional/apps/dashboard/panel_replacing.ts
@@ -70,6 +70,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     it('replaced panel persisted correctly when dashboard is hard refreshed', async () => {
       const currentUrl = await browser.getCurrentUrl();
       await browser.get(currentUrl, true);
+      const alert = await browser.getAlert();
+      await alert?.accept();
       await PageObjects.header.waitUntilLoadingHasFinished();
       await PageObjects.dashboard.waitForRenderComplete();
       const panelTitles = await PageObjects.dashboard.getPanelTitles();
diff --git a/test/functional/page_objects/header_page.ts b/test/functional/page_objects/header_page.ts
index d69a01ab6bb264..5a892bb4f6ca3b 100644
--- a/test/functional/page_objects/header_page.ts
+++ b/test/functional/page_objects/header_page.ts
@@ -31,14 +31,16 @@ export function HeaderPageProvider({ getService, getPageObjects }: FtrProviderCo
   const defaultFindTimeout = config.get('timeouts.find');
 
   class HeaderPage {
-    public async clickDiscover() {
+    public async clickDiscover(ignoreAppLeaveWarning = false) {
       await appsMenu.clickLink('Discover', { category: 'kibana' });
+      await this.onAppLeaveWarning(ignoreAppLeaveWarning);
       await PageObjects.common.waitForTopNavToBeVisible();
       await this.awaitGlobalLoadingIndicatorHidden();
     }
 
-    public async clickVisualize() {
+    public async clickVisualize(ignoreAppLeaveWarning = false) {
       await appsMenu.clickLink('Visualize', { category: 'kibana' });
+      await this.onAppLeaveWarning(ignoreAppLeaveWarning);
       await this.awaitGlobalLoadingIndicatorHidden();
       await retry.waitFor('first breadcrumb to be "Visualize"', async () => {
         const firstBreadcrumb = await globalNav.getFirstBreadcrumb();
@@ -95,6 +97,17 @@ export function HeaderPageProvider({ getService, getPageObjects }: FtrProviderCo
       log.debug('awaitKibanaChrome');
       await testSubjects.find('kibanaChrome', defaultFindTimeout * 10);
     }
+
+    public async onAppLeaveWarning(ignoreWarning = false) {
+      await retry.try(async () => {
+        const warning = await testSubjects.exists('confirmModalTitleText');
+        if (warning) {
+          await testSubjects.click(
+            ignoreWarning ? 'confirmModalConfirmButton' : 'confirmModalCancelButton'
+          );
+        }
+      });
+    }
   }
 
   return new HeaderPage();
diff --git a/test/functional/services/dashboard/visualizations.ts b/test/functional/services/dashboard/visualizations.ts
index b35ef1e8f2f9a9..22e1769145f884 100644
--- a/test/functional/services/dashboard/visualizations.ts
+++ b/test/functional/services/dashboard/visualizations.ts
@@ -58,8 +58,7 @@ export function DashboardVisualizationProvider({ getService, getPageObjects }: F
       fields?: string[];
     }) {
       log.debug(`createSavedSearch(${name})`);
-      await PageObjects.header.clickDiscover();
-
+      await PageObjects.header.clickDiscover(true);
       await PageObjects.timePicker.setHistoricalDataRange();
 
       if (query) {

From b5197a36d47007d78f5bdb223580d341236cc4d4 Mon Sep 17 00:00:00 2001
From: ymao1 <ying.mao@elastic.co>
Date: Fri, 18 Dec 2020 15:26:24 -0500
Subject: [PATCH 32/75] [Alerting UI] Centered loading spinners (#86186)

* Creating shared loading spinner component

* Using section loading component where it makes sense

* Fixing tests

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../components/center_justified_spinner.tsx   | 22 ++++++++++++++
 .../application/components/health_check.tsx   | 13 ++++++--
 .../lib/suspended_component_with_props.tsx    | 12 ++------
 .../action_connector_form.tsx                 | 15 +++++-----
 .../action_type_form.tsx                      | 11 +------
 .../action_type_menu.tsx                      | 21 ++++++++++---
 .../components/actions_connectors_list.tsx    | 10 ++-----
 .../components/alert_details_route.test.tsx   |  4 +--
 .../components/alert_details_route.tsx        | 11 ++-----
 .../components/alert_instances_route.test.tsx |  4 +--
 .../components/alert_instances_route.tsx      | 11 ++-----
 .../sections/alert_form/alert_form.tsx        | 30 +++++++++++--------
 .../alerts_list/components/alerts_list.tsx    |  8 ++---
 13 files changed, 90 insertions(+), 82 deletions(-)
 create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/components/center_justified_spinner.tsx

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/center_justified_spinner.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/center_justified_spinner.tsx
new file mode 100644
index 00000000000000..2dec2dcb001d70
--- /dev/null
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/center_justified_spinner.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 { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import { EuiLoadingSpinnerSize } from '@elastic/eui/src/components/loading/loading_spinner';
+
+interface Props {
+  size?: EuiLoadingSpinnerSize;
+}
+
+export const CenterJustifiedSpinner: React.FunctionComponent<Props> = ({ size }) => (
+  <EuiFlexGroup justifyContent="center">
+    <EuiFlexItem grow={false}>
+      <EuiLoadingSpinner size={size || 'xl'} />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/health_check.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/health_check.tsx
index 0f20ade8187fdb..66f7c1d36dfb21 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/health_check.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/health_check.tsx
@@ -9,7 +9,7 @@ import { Option, none, some, fold } from 'fp-ts/lib/Option';
 import { pipe } from 'fp-ts/lib/pipeable';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { EuiLink, EuiLoadingSpinner } from '@elastic/eui';
+import { EuiLink, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { EuiEmptyPrompt, EuiCode } from '@elastic/eui';
@@ -19,6 +19,7 @@ import { health } from '../lib/alert_api';
 import './health_check.scss';
 import { useHealthContext } from '../context/health_context';
 import { useKibana } from '../../common/lib/kibana';
+import { CenterJustifiedSpinner } from './center_justified_spinner';
 
 interface Props {
   inFlyout?: boolean;
@@ -47,7 +48,15 @@ export const HealthCheck: React.FunctionComponent<Props> = ({
   return pipe(
     alertingHealth,
     fold(
-      () => (waitForCheck ? <EuiLoadingSpinner size="m" /> : <Fragment>{children}</Fragment>),
+      () =>
+        waitForCheck ? (
+          <Fragment>
+            <EuiSpacer size="m" />
+            <CenterJustifiedSpinner />
+          </Fragment>
+        ) : (
+          <Fragment>{children}</Fragment>
+        ),
       (healthCheck) => {
         return healthCheck?.isSufficientlySecure && healthCheck?.hasPermanentEncryptionKey ? (
           <Fragment>{children}</Fragment>
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/lib/suspended_component_with_props.tsx b/x-pack/plugins/triggers_actions_ui/public/application/lib/suspended_component_with_props.tsx
index 563353793f991f..98c20c5abcc2de 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/lib/suspended_component_with_props.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/lib/suspended_component_with_props.tsx
@@ -4,23 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { Suspense } from 'react';
-import { EuiLoadingSpinner, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { EuiLoadingSpinnerSize } from '@elastic/eui/src/components/loading/loading_spinner';
+import { CenterJustifiedSpinner } from '../components/center_justified_spinner';
 
 export function suspendedComponentWithProps<T = unknown>(
   ComponentToSuspend: React.ComponentType<T>,
   size?: EuiLoadingSpinnerSize
 ) {
   return (props: T) => (
-    <Suspense
-      fallback={
-        <EuiFlexGroup justifyContent="center">
-          <EuiFlexItem grow={false}>
-            <EuiLoadingSpinner size={size ?? 'm'} />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      }
-    >
+    <Suspense fallback={<CenterJustifiedSpinner size={size ?? 'm'} />}>
       <ComponentToSuspend {...props} />
     </Suspense>
   );
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_connector_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_connector_form.tsx
index 7d8949421126c9..a83194d67a759b 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_connector_form.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_connector_form.tsx
@@ -12,9 +12,6 @@ import {
   EuiSpacer,
   EuiFieldText,
   EuiFormRow,
-  EuiLoadingSpinner,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiErrorBoundary,
   EuiTitle,
 } from '@elastic/eui';
@@ -29,6 +26,7 @@ import {
 } from '../../../types';
 import { hasSaveActionsCapability } from '../../lib/capabilities';
 import { useKibana } from '../../../common/lib/kibana';
+import { SectionLoading } from '../../components/section_loading';
 
 export function validateBaseProperties(actionObject: ActionConnector) {
   const validationResult = { errors: {} };
@@ -181,11 +179,12 @@ export const ActionConnectorForm = ({
           <EuiErrorBoundary>
             <Suspense
               fallback={
-                <EuiFlexGroup justifyContent="center">
-                  <EuiFlexItem grow={false}>
-                    <EuiLoadingSpinner size="m" />
-                  </EuiFlexItem>
-                </EuiFlexGroup>
+                <SectionLoading>
+                  <FormattedMessage
+                    id="xpack.triggersActionsUI.sections.actionConnectorForm.loadingConnectorSettingsDescription"
+                    defaultMessage="Loading connector settings…"
+                  />
+                </SectionLoading>
               }
             >
               <FieldsComponent
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.tsx
index 9a721b2f2bed00..ff962b9b9d9c43 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.tsx
@@ -22,7 +22,6 @@ import {
   EuiFormLabel,
   EuiFormControlLayout,
   EuiSuperSelect,
-  EuiLoadingSpinner,
   EuiBadge,
   EuiErrorBoundary,
 } from '@elastic/eui';
@@ -280,15 +279,7 @@ export const ActionTypeForm = ({
       <EuiSpacer size="xl" />
       {ParamsFieldsComponent ? (
         <EuiErrorBoundary>
-          <Suspense
-            fallback={
-              <EuiFlexGroup justifyContent="center">
-                <EuiFlexItem grow={false}>
-                  <EuiLoadingSpinner size="m" />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            }
-          >
+          <Suspense fallback={null}>
             <ParamsFieldsComponent
               actionParams={actionItem.params as any}
               index={index}
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_menu.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_menu.tsx
index e1955cc3db7860..90579e80257120 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_menu.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_menu.tsx
@@ -7,12 +7,14 @@ import React, { useEffect, useState } from 'react';
 import { EuiFlexItem, EuiCard, EuiIcon, EuiFlexGrid, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { EuiToolTip } from '@elastic/eui';
+import { FormattedMessage } from 'react-intl';
 import { ActionType, ActionTypeIndex, ActionTypeRegistryContract } from '../../../types';
 import { loadActionTypes } from '../../lib/action_connector_api';
 import { actionTypeCompare } from '../../lib/action_type_compare';
 import { checkActionTypeEnabled } from '../../lib/check_action_type_enabled';
 import { useKibana } from '../../../common/lib/kibana';
 import { DEFAULT_HIDDEN_ACTION_TYPES } from '../../..';
+import { SectionLoading } from '../../components/section_loading';
 
 interface Props {
   onActionTypeChange: (actionType: ActionType) => void;
@@ -31,6 +33,7 @@ export const ActionTypeMenu = ({
     http,
     notifications: { toasts },
   } = useKibana().services;
+  const [loadingActionTypes, setLoadingActionTypes] = useState<boolean>(false);
   const [actionTypesIndex, setActionTypesIndex] = useState<ActionTypeIndex | undefined>(undefined);
 
   useEffect(() => {
@@ -43,11 +46,14 @@ export const ActionTypeMenu = ({
          *
          * TODO: Remove when cases connector is available across Kibana. Issue: https://github.com/elastic/kibana/issues/82502.
          *  */
-        const availableActionTypes =
-          actionTypes ??
-          (await loadActionTypes({ http })).filter(
+        let availableActionTypes = actionTypes;
+        if (!availableActionTypes) {
+          setLoadingActionTypes(true);
+          availableActionTypes = (await loadActionTypes({ http })).filter(
             (actionType) => !DEFAULT_HIDDEN_ACTION_TYPES.includes(actionType.id)
           );
+          setLoadingActionTypes(false);
+        }
         const index: ActionTypeIndex = {};
         for (const actionTypeItem of availableActionTypes) {
           index[actionTypeItem.id] = actionTypeItem;
@@ -117,7 +123,14 @@ export const ActionTypeMenu = ({
       );
     });
 
-  return (
+  return loadingActionTypes ? (
+    <SectionLoading>
+      <FormattedMessage
+        id="xpack.triggersActionsUI.sections.actionsConnectorsList.loadingConnectorTypesDescription"
+        defaultMessage="Loading connector types…"
+      />
+    </SectionLoading>
+  ) : (
     <div className="actConnectorsListGrid">
       <EuiSpacer size="s" />
       <EuiFlexGrid gutterSize="xl" columns={3}>
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
index 2df75436f5f96b..bf6786d0d4e4ca 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
@@ -10,7 +10,6 @@ import {
   EuiSpacer,
   EuiButton,
   EuiLink,
-  EuiLoadingSpinner,
   EuiIconTip,
   EuiFlexGroup,
   EuiFlexItem,
@@ -40,6 +39,7 @@ import { ActionConnector, ActionConnectorTableItem, ActionTypeIndex } from '../.
 import { EmptyConnectorsPrompt } from '../../../components/prompts/empty_connectors_prompt';
 import { useKibana } from '../../../../common/lib/kibana';
 import { DEFAULT_HIDDEN_ACTION_TYPES } from '../../../../';
+import { CenterJustifiedSpinner } from '../../../components/center_justified_spinner';
 
 export const ActionsConnectorsList: React.FunctionComponent = () => {
   const {
@@ -355,13 +355,7 @@ export const ActionsConnectorsList: React.FunctionComponent = () => {
       />
       <EuiSpacer size="m" />
       {/* Render the view based on if there's data or if they can save */}
-      {(isLoadingActions || isLoadingActionTypes) && (
-        <EuiFlexGroup justifyContent="center" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiLoadingSpinner size="xl" />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      )}
+      {(isLoadingActions || isLoadingActionTypes) && <CenterJustifiedSpinner />}
       {actionConnectorTableItems.length !== 0 && table}
       {actionConnectorTableItems.length === 0 &&
         canSave &&
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details_route.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details_route.test.tsx
index 48360647e24ee5..7a12c43427a913 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details_route.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details_route.test.tsx
@@ -10,7 +10,7 @@ import { createMemoryHistory, createLocation } from 'history';
 import { ToastsApi } from 'kibana/public';
 import { AlertDetailsRoute, getAlertData } from './alert_details_route';
 import { Alert } from '../../../../types';
-import { EuiLoadingSpinner } from '@elastic/eui';
+import { CenterJustifiedSpinner } from '../../../components/center_justified_spinner';
 jest.mock('../../../../common/lib/kibana');
 
 describe('alert_details_route', () => {
@@ -20,7 +20,7 @@ describe('alert_details_route', () => {
     expect(
       shallow(
         <AlertDetailsRoute {...mockRouterProps(alert)} {...mockApis()} />
-      ).containsMatchingElement(<EuiLoadingSpinner size="l" />)
+      ).containsMatchingElement(<CenterJustifiedSpinner />)
     ).toBeTruthy();
   });
 });
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details_route.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details_route.tsx
index fc3e05fbfaed0e..ae729dd4f0095e 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details_route.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details_route.tsx
@@ -7,7 +7,6 @@
 import { i18n } from '@kbn/i18n';
 import React, { useState, useEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { EuiLoadingSpinner } from '@elastic/eui';
 import { ToastsApi } from 'kibana/public';
 import { Alert, AlertType, ActionType } from '../../../../types';
 import { AlertDetailsWithApi as AlertDetails } from './alert_details';
@@ -21,6 +20,7 @@ import {
   withActionOperations,
 } from '../../common/components/with_actions_api_operations';
 import { useKibana } from '../../../../common/lib/kibana';
+import { CenterJustifiedSpinner } from '../../../components/center_justified_spinner';
 
 type AlertDetailsRouteProps = RouteComponentProps<{
   alertId: string;
@@ -66,14 +66,7 @@ export const AlertDetailsRoute: React.FunctionComponent<AlertDetailsRouteProps>
       requestRefresh={async () => requestRefresh(Date.now())}
     />
   ) : (
-    <div
-      style={{
-        textAlign: 'center',
-        margin: '4em 0em',
-      }}
-    >
-      <EuiLoadingSpinner size="l" />
-    </div>
+    <CenterJustifiedSpinner />
   );
 };
 
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances_route.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances_route.test.tsx
index e3fe9cd86356ae..dfaed32ff72aea 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances_route.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances_route.test.tsx
@@ -9,7 +9,7 @@ import { shallow } from 'enzyme';
 import { ToastsApi } from 'kibana/public';
 import { AlertInstancesRoute, getAlertInstanceSummary } from './alert_instances_route';
 import { Alert, AlertInstanceSummary, AlertType } from '../../../../types';
-import { EuiLoadingSpinner } from '@elastic/eui';
+import { CenterJustifiedSpinner } from '../../../components/center_justified_spinner';
 jest.mock('../../../../common/lib/kibana');
 
 const fakeNow = new Date('2020-02-09T23:15:41.941Z');
@@ -23,7 +23,7 @@ describe('alert_instance_summary_route', () => {
     expect(
       shallow(
         <AlertInstancesRoute readOnly={false} alert={alert} alertType={alertType} {...mockApis()} />
-      ).containsMatchingElement(<EuiLoadingSpinner size="l" />)
+      ).containsMatchingElement(<CenterJustifiedSpinner />)
     ).toBeTruthy();
   });
 });
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances_route.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances_route.tsx
index e1e0866d886a30..a122d59959156f 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances_route.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances_route.tsx
@@ -7,7 +7,6 @@
 import { i18n } from '@kbn/i18n';
 import { ToastsApi } from 'kibana/public';
 import React, { useState, useEffect } from 'react';
-import { EuiLoadingSpinner } from '@elastic/eui';
 import { Alert, AlertInstanceSummary, AlertType } from '../../../../types';
 import {
   ComponentOpts as AlertApis,
@@ -15,6 +14,7 @@ import {
 } from '../../common/components/with_bulk_alert_api_operations';
 import { AlertInstancesWithApi as AlertInstances } from './alert_instances';
 import { useKibana } from '../../../../common/lib/kibana';
+import { CenterJustifiedSpinner } from '../../../components/center_justified_spinner';
 
 type WithAlertInstanceSummaryProps = {
   alert: Alert;
@@ -52,14 +52,7 @@ export const AlertInstancesRoute: React.FunctionComponent<WithAlertInstanceSumma
       alertInstanceSummary={alertInstanceSummary}
     />
   ) : (
-    <div
-      style={{
-        textAlign: 'center',
-        margin: '4em 0em',
-      }}
-    >
-      <EuiLoadingSpinner size="l" />
-    </div>
+    <CenterJustifiedSpinner />
   );
 };
 
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx
index 3210d538419937..cf3d0bf1544c25 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx
@@ -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 React, { Fragment, useState, useEffect, Suspense, useCallback } from 'react';
+import React, { Fragment, useState, useEffect, useCallback, Suspense } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
@@ -23,7 +23,6 @@ import {
   EuiIconTip,
   EuiButtonIcon,
   EuiHorizontalRule,
-  EuiLoadingSpinner,
   EuiEmptyPrompt,
   EuiListGroupItem,
   EuiListGroup,
@@ -71,6 +70,7 @@ import { AlertNotifyWhen } from './alert_notify_when';
 import { checkAlertTypeEnabled } from '../../lib/check_alert_type_enabled';
 import { alertTypeCompare, alertTypeGroupCompare } from '../../lib/alert_type_compare';
 import { VIEW_LICENSE_OPTIONS_LINK } from '../../../common/constants';
+import { SectionLoading } from '../../components/section_loading';
 
 const ENTER_KEY = 13;
 
@@ -535,7 +535,16 @@ export const AlertForm = ({
       alert.alertTypeId &&
       selectedAlertType ? (
         <EuiErrorBoundary>
-          <Suspense fallback={<CenterJustifiedSpinner />}>
+          <Suspense
+            fallback={
+              <SectionLoading>
+                <FormattedMessage
+                  id="xpack.triggersActionsUI.sections.alertForm.loadingAlertTypeParamsDescription"
+                  defaultMessage="Loading alert type params…"
+                />
+              </SectionLoading>
+            }
+          >
             <AlertParamsExpressionComponent
               alertParams={alert.params}
               alertInterval={`${alertInterval ?? 1}${alertIntervalUnit}`}
@@ -805,20 +814,17 @@ export const AlertForm = ({
       ) : alertTypesIndex ? (
         <NoAuthorizedAlertTypes operation={operation} />
       ) : (
-        <CenterJustifiedSpinner />
+        <SectionLoading>
+          <FormattedMessage
+            id="xpack.triggersActionsUI.sections.alertForm.loadingAlertTypesDescription"
+            defaultMessage="Loading alert types…"
+          />
+        </SectionLoading>
       )}
     </EuiForm>
   );
 };
 
-const CenterJustifiedSpinner = () => (
-  <EuiFlexGroup justifyContent="center">
-    <EuiFlexItem grow={false}>
-      <EuiLoadingSpinner size="m" />
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
-
 const NoAuthorizedAlertTypes = ({ operation }: { operation: string }) => (
   <EuiEmptyPrompt
     iconType="lock"
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
index 92f74c5829cc01..a1a4cfcab18ef7 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
@@ -19,7 +19,6 @@ import {
   EuiFlexItem,
   EuiSpacer,
   EuiLink,
-  EuiLoadingSpinner,
   EuiEmptyPrompt,
   EuiCallOut,
   EuiButtonEmpty,
@@ -60,6 +59,7 @@ import { useKibana } from '../../../../common/lib/kibana';
 import { checkAlertTypeEnabled } from '../../../lib/check_alert_type_enabled';
 import { DEFAULT_HIDDEN_ACTION_TYPES } from '../../../../common/constants';
 import './alerts_list.scss';
+import { CenterJustifiedSpinner } from '../../../components/center_justified_spinner';
 
 const ENTER_KEY = 13;
 
@@ -674,11 +674,7 @@ export const AlertsList: React.FunctionComponent = () => {
       {loadedItems.length || isFilterApplied ? (
         table
       ) : alertTypesState.isLoading || alertsState.isLoading ? (
-        <EuiFlexGroup justifyContent="center" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiLoadingSpinner size="xl" />
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        <CenterJustifiedSpinner />
       ) : authorizedToCreateAnyAlerts ? (
         <EmptyPrompt onCTAClicked={() => setAlertFlyoutVisibility(true)} />
       ) : (

From 319a4070d7b913af3894358a65897171884c09df Mon Sep 17 00:00:00 2001
From: Devon Thomson <devon.thomson@hotmail.com>
Date: Fri, 18 Dec 2020 15:59:24 -0500
Subject: [PATCH 33/75] Fixed duplication of create new modal (#86489)

---
 .../public/application/top_nav/dashboard_top_nav.tsx        | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
index 937e6737d27168..915f245fbcd191 100644
--- a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
+++ b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
@@ -27,6 +27,7 @@ import { useKibana } from '../../services/kibana_react';
 import { IndexPattern, SavedQuery, TimefilterContract } from '../../services/data';
 import {
   EmbeddableFactoryNotFoundError,
+  EmbeddableInput,
   isErrorEmbeddable,
   openAddPanelFlyout,
   ViewMode,
@@ -135,10 +136,7 @@ export function DashboardTopNav({
     if (!factory) {
       throw new EmbeddableFactoryNotFoundError(type);
     }
-    const explicitInput = await factory.getExplicitInput();
-    if (dashboardContainer) {
-      await dashboardContainer.addNewEmbeddable(type, explicitInput);
-    }
+    await factory.create({} as EmbeddableInput, dashboardContainer);
   }, [dashboardContainer, embeddable]);
 
   const onChangeViewMode = useCallback(

From 8e717205021677bb3fb4a40a0efc40385a8b8692 Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Fri, 18 Dec 2020 13:25:35 -0800
Subject: [PATCH 34/75] [App Search] Sample Engines should have access to the
 Crawler (#86502)

* Remove logic preventing Crawler from being used on sample engines

* Remove check around crawler button in DocumentCreationButtons

- primarily a UI thing - ideally we always want to show 4 buttons
---
 .../document_creation_buttons.test.tsx        | 24 +-------
 .../document_creation_buttons.tsx             | 57 ++++++++-----------
 .../components/engine/engine_nav.test.tsx     |  6 --
 .../components/engine/engine_nav.tsx          |  2 +-
 4 files changed, 29 insertions(+), 60 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_buttons.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_buttons.test.tsx
index 8bd473c003eb12..c76cc4b45fc19b 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_buttons.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_buttons.test.tsx
@@ -16,8 +16,6 @@ import { DocumentCreationButtons } from './';
 describe('DocumentCreationButtons', () => {
   const values = {
     engineName: 'test-engine',
-    isSampleEngine: false,
-    myRole: { canViewEngineCrawler: true },
   };
   const actions = {
     openDocumentCreation: jest.fn(),
@@ -56,25 +54,9 @@ describe('DocumentCreationButtons', () => {
     expect(actions.openDocumentCreation).toHaveBeenCalledWith('api');
   });
 
-  describe('crawler card', () => {
-    it('renders the crawler button with a link to the crawler page', () => {
-      const wrapper = shallow(<DocumentCreationButtons />);
-
-      expect(wrapper.find(EuiCardTo).prop('to')).toEqual('/engines/test-engine/crawler');
-    });
-
-    it('does not render the crawler button if the user does not have access', () => {
-      setMockValues({ ...values, myRole: { canViewEngineCrawler: false } });
-      const wrapper = shallow(<DocumentCreationButtons />);
-
-      expect(wrapper.find(EuiCardTo)).toHaveLength(0);
-    });
-
-    it('does not render the crawler button for the sample engine', () => {
-      setMockValues({ ...values, isSampleEngine: true });
-      const wrapper = shallow(<DocumentCreationButtons />);
+  it('renders the crawler button with a link to the crawler page', () => {
+    const wrapper = shallow(<DocumentCreationButtons />);
 
-      expect(wrapper.find(EuiCardTo)).toHaveLength(0);
-    });
+    expect(wrapper.find(EuiCardTo).prop('to')).toEqual('/engines/test-engine/crawler');
   });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_buttons.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_buttons.tsx
index edeae5205b6467..ce7cae56783382 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_buttons.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_buttons.tsx
@@ -22,7 +22,6 @@ import {
 
 import { EuiCardTo } from '../../../shared/react_router_helpers';
 import { DOCS_PREFIX, getEngineRoute, ENGINE_CRAWLER_PATH } from '../../routes';
-import { AppLogic } from '../../app_logic';
 import { EngineLogic } from '../engine';
 
 import { DocumentCreationLogic } from './';
@@ -34,11 +33,7 @@ interface Props {
 export const DocumentCreationButtons: React.FC<Props> = ({ disabled = false }) => {
   const { openDocumentCreation } = useActions(DocumentCreationLogic);
 
-  const { engineName, isSampleEngine } = useValues(EngineLogic);
-  const {
-    myRole: { canViewEngineCrawler },
-  } = useValues(AppLogic);
-  const showCrawlerLink = canViewEngineCrawler && !isSampleEngine;
+  const { engineName } = useValues(EngineLogic);
   const crawlerLink = getEngineRoute(engineName) + ENGINE_CRAWLER_PATH;
 
   return (
@@ -61,7 +56,7 @@ export const DocumentCreationButtons: React.FC<Props> = ({ disabled = false }) =
         </p>
       </EuiText>
       <EuiSpacer />
-      <EuiFlexGrid columns={showCrawlerLink ? 2 : 3}>
+      <EuiFlexGrid columns={2}>
         <EuiFlexItem>
           <EuiCard
             title={i18n.translate(
@@ -98,31 +93,29 @@ export const DocumentCreationButtons: React.FC<Props> = ({ disabled = false }) =
             isDisabled={disabled}
           />
         </EuiFlexItem>
-        {showCrawlerLink && (
-          <EuiFlexItem>
-            <EuiCardTo
-              title={i18n.translate(
-                'xpack.enterpriseSearch.appSearch.documentCreation.buttons.crawl',
-                { defaultMessage: 'Use the Crawler' }
-              )}
-              description=""
-              icon={<EuiIcon type="globe" size="xxl" color="primary" />}
-              betaBadgeLabel={i18n.translate(
-                'xpack.enterpriseSearch.appSearch.documentCreation.buttons.betaTitle',
-                { defaultMessage: 'Beta' }
-              )}
-              betaBadgeTooltipContent={i18n.translate(
-                'xpack.enterpriseSearch.appSearch.documentCreation.buttons.betaTooltip',
-                {
-                  defaultMessage:
-                    'The Elastic Crawler is not GA. Please help us by reporting any bugs.',
-                }
-              )}
-              to={crawlerLink}
-              isDisabled={disabled}
-            />
-          </EuiFlexItem>
-        )}
+        <EuiFlexItem>
+          <EuiCardTo
+            title={i18n.translate(
+              'xpack.enterpriseSearch.appSearch.documentCreation.buttons.crawl',
+              { defaultMessage: 'Use the Crawler' }
+            )}
+            description=""
+            icon={<EuiIcon type="globe" size="xxl" color="primary" />}
+            betaBadgeLabel={i18n.translate(
+              'xpack.enterpriseSearch.appSearch.documentCreation.buttons.betaTitle',
+              { defaultMessage: 'Beta' }
+            )}
+            betaBadgeTooltipContent={i18n.translate(
+              'xpack.enterpriseSearch.appSearch.documentCreation.buttons.betaTooltip',
+              {
+                defaultMessage:
+                  'The Elastic Crawler is not GA. Please help us by reporting any bugs.',
+              }
+            )}
+            to={crawlerLink}
+            isDisabled={disabled}
+          />
+        </EuiFlexItem>
       </EuiFlexGrid>
     </>
   );
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_nav.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_nav.test.tsx
index 0d2ce654d4a0ab..2e419168f2e1bb 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_nav.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_nav.test.tsx
@@ -102,12 +102,6 @@ describe('EngineNav', () => {
       const wrapper = shallow(<EngineNav />);
       expect(wrapper.find('[data-test-subj="EngineCrawlerLink"]')).toHaveLength(0);
     });
-
-    it('does not render for sample engine', () => {
-      setMockValues({ ...values, myRole, isSampleEngine: true });
-      const wrapper = shallow(<EngineNav />);
-      expect(wrapper.find('[data-test-subj="EngineCrawlerLink"]')).toHaveLength(0);
-    });
   });
 
   describe('meta engine source engines link', () => {
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_nav.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_nav.tsx
index 35389bbe4b3ba7..0fed7cd0fc8fc6 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_nav.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_nav.tsx
@@ -153,7 +153,7 @@ export const EngineNav: React.FC = () => {
           </EuiFlexGroup>
         </SideNavLink>
       )}
-      {canViewEngineCrawler && !isMetaEngine && !isSampleEngine && (
+      {canViewEngineCrawler && !isMetaEngine && (
         <SideNavLink
           isExternal
           to={getAppSearchUrl(engineRoute + ENGINE_CRAWLER_PATH)}

From 122f1e199b9c7028a4896cf1cc18e5748e6cb62d Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Fri, 18 Dec 2020 13:31:21 -0800
Subject: [PATCH 35/75] [App Search] Convert DocumentCreationModal to
 DocumentCreationFlyout (#86508)

* Convert DocumentCreationModal to a Flyout

- Per discussion w/ Davey - it handles longer/detailed content better

* Update instances referencing DocumentCreationFlyout

* Update flyout children

- modal->flyout
- add hasBorder, set EuiTitle sizes, add flexgroup to footer buttons
---
 .../document_creation/constants.tsx           | 10 ++--
 .../api_code_example.test.tsx                 | 22 ++++----
 .../api_code_example.tsx                      | 46 ++++++++-------
 .../paste_json_text.test.tsx                  | 22 ++++----
 .../paste_json_text.tsx                       | 56 +++++++++++--------
 .../show_creation_modes.test.tsx              |  2 +-
 .../show_creation_modes.tsx                   | 30 +++++-----
 .../upload_json_file.test.tsx                 | 24 ++++----
 .../upload_json_file.tsx                      | 56 +++++++++++--------
 .../document_creation_buttons.test.tsx        |  2 +-
 ....tsx => document_creation_flyout.test.tsx} | 32 +++++------
 ...modal.tsx => document_creation_flyout.tsx} | 17 +++---
 .../document_creation_logic.ts                |  2 +-
 .../components/document_creation/index.ts     |  2 +-
 .../document_creation_button.test.tsx         |  4 +-
 .../documents/document_creation_button.tsx    |  4 +-
 .../engine_overview_empty.test.tsx            |  4 +-
 .../engine_overview/engine_overview_empty.tsx |  4 +-
 18 files changed, 181 insertions(+), 158 deletions(-)
 rename x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/{document_creation_modal.test.tsx => document_creation_flyout.test.tsx} (77%)
 rename x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/{document_creation_modal.tsx => document_creation_flyout.tsx} (78%)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/constants.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/constants.tsx
index c4237da0d0e804..27c3410767d8ad 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/constants.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/constants.tsx
@@ -6,12 +6,14 @@
 
 import { i18n } from '@kbn/i18n';
 
-export const MODAL_CANCEL_BUTTON = i18n.translate(
-  'xpack.enterpriseSearch.appSearch.documentCreation.modalCancel',
+export const FLYOUT_ARIA_LABEL_ID = 'documentCreationFlyoutHeadingId';
+
+export const FLYOUT_CANCEL_BUTTON = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.documentCreation.flyoutCancel',
   { defaultMessage: 'Cancel' }
 );
-export const MODAL_CONTINUE_BUTTON = i18n.translate(
-  'xpack.enterpriseSearch.appSearch.documentCreation.modalContinue',
+export const FLYOUT_CONTINUE_BUTTON = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.documentCreation.flyoutContinue',
   { defaultMessage: 'Continue' }
 );
 
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.test.tsx
index 2dd46419528c1b..ddce27789b82cb 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.test.tsx
@@ -11,7 +11,7 @@ import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { EuiCode, EuiCodeBlock, EuiButtonEmpty } from '@elastic/eui';
 
-import { ApiCodeExample, ModalHeader, ModalBody, ModalFooter } from './api_code_example';
+import { ApiCodeExample, FlyoutHeader, FlyoutBody, FlyoutFooter } from './api_code_example';
 
 describe('ApiCodeExample', () => {
   const values = {
@@ -29,23 +29,23 @@ describe('ApiCodeExample', () => {
 
   it('renders', () => {
     const wrapper = shallow(<ApiCodeExample />);
-    expect(wrapper.find(ModalHeader)).toHaveLength(1);
-    expect(wrapper.find(ModalBody)).toHaveLength(1);
-    expect(wrapper.find(ModalFooter)).toHaveLength(1);
+    expect(wrapper.find(FlyoutHeader)).toHaveLength(1);
+    expect(wrapper.find(FlyoutBody)).toHaveLength(1);
+    expect(wrapper.find(FlyoutFooter)).toHaveLength(1);
   });
 
-  describe('ModalHeader', () => {
+  describe('FlyoutHeader', () => {
     it('renders', () => {
-      const wrapper = shallow(<ModalHeader />);
+      const wrapper = shallow(<FlyoutHeader />);
       expect(wrapper.find('h2').text()).toEqual('Indexing by API');
     });
   });
 
-  describe('ModalBody', () => {
+  describe('FlyoutBody', () => {
     let wrapper: ShallowWrapper;
 
     beforeAll(() => {
-      wrapper = shallow(<ModalBody />);
+      wrapper = shallow(<FlyoutBody />);
     });
 
     it('renders with the full remote Enterprise Search API URL', () => {
@@ -64,9 +64,9 @@ describe('ApiCodeExample', () => {
     });
   });
 
-  describe('ModalFooter', () => {
-    it('closes the modal', () => {
-      const wrapper = shallow(<ModalFooter />);
+  describe('FlyoutFooter', () => {
+    it('closes the flyout', () => {
+      const wrapper = shallow(<FlyoutFooter />);
 
       wrapper.find(EuiButtonEmpty).simulate('click');
       expect(actions.closeDocumentCreation).toHaveBeenCalled();
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.tsx
index 1dd57ffe8bc014..9ebe404659ca2c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.tsx
@@ -11,10 +11,10 @@ import { useValues, useActions } from 'kea';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
-  EuiModalHeader,
-  EuiModalHeaderTitle,
-  EuiModalBody,
-  EuiModalFooter,
+  EuiFlyoutHeader,
+  EuiTitle,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
   EuiButtonEmpty,
   EuiText,
   EuiLink,
@@ -30,39 +30,43 @@ import { EngineLogic } from '../../engine';
 import { EngineDetails } from '../../engine/types';
 
 import { DOCS_PREFIX } from '../../../routes';
-import { DOCUMENTS_API_JSON_EXAMPLE, MODAL_CANCEL_BUTTON } from '../constants';
+import {
+  DOCUMENTS_API_JSON_EXAMPLE,
+  FLYOUT_ARIA_LABEL_ID,
+  FLYOUT_CANCEL_BUTTON,
+} from '../constants';
 import { DocumentCreationLogic } from '../';
 
 export const ApiCodeExample: React.FC = () => (
   <>
-    <ModalHeader />
-    <ModalBody />
-    <ModalFooter />
+    <FlyoutHeader />
+    <FlyoutBody />
+    <FlyoutFooter />
   </>
 );
 
-export const ModalHeader: React.FC = () => {
+export const FlyoutHeader: React.FC = () => {
   return (
-    <EuiModalHeader>
-      <EuiModalHeaderTitle>
-        <h2>
+    <EuiFlyoutHeader hasBorder>
+      <EuiTitle size="m">
+        <h2 id={FLYOUT_ARIA_LABEL_ID}>
           {i18n.translate('xpack.enterpriseSearch.appSearch.documentCreation.api.title', {
             defaultMessage: 'Indexing by API',
           })}
         </h2>
-      </EuiModalHeaderTitle>
-    </EuiModalHeader>
+      </EuiTitle>
+    </EuiFlyoutHeader>
   );
 };
 
-export const ModalBody: React.FC = () => {
+export const FlyoutBody: React.FC = () => {
   const { engineName, engine } = useValues(EngineLogic);
   const { apiKey } = engine as EngineDetails;
 
   const documentsApiUrl = getEnterpriseSearchUrl(`/api/as/v1/engines/${engineName}/documents`);
 
   return (
-    <EuiModalBody>
+    <EuiFlyoutBody>
       <EuiText color="subdued">
         <p>
           <FormattedMessage
@@ -113,16 +117,16 @@ export const ModalBody: React.FC = () => {
         # ]
       `)}
       </EuiCodeBlock>
-    </EuiModalBody>
+    </EuiFlyoutBody>
   );
 };
 
-export const ModalFooter: React.FC = () => {
+export const FlyoutFooter: React.FC = () => {
   const { closeDocumentCreation } = useActions(DocumentCreationLogic);
 
   return (
-    <EuiModalFooter>
-      <EuiButtonEmpty onClick={closeDocumentCreation}>{MODAL_CANCEL_BUTTON}</EuiButtonEmpty>
-    </EuiModalFooter>
+    <EuiFlyoutFooter>
+      <EuiButtonEmpty onClick={closeDocumentCreation}>{FLYOUT_CANCEL_BUTTON}</EuiButtonEmpty>
+    </EuiFlyoutFooter>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.test.tsx
index ede1529c049d70..50e4d473e5f78a 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.test.tsx
@@ -11,7 +11,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { EuiTextArea, EuiButtonEmpty, EuiButton } from '@elastic/eui';
 
-import { PasteJsonText, ModalHeader, ModalBody, ModalFooter } from './paste_json_text';
+import { PasteJsonText, FlyoutHeader, FlyoutBody, FlyoutFooter } from './paste_json_text';
 
 describe('PasteJsonText', () => {
   const values = {
@@ -35,22 +35,22 @@ describe('PasteJsonText', () => {
 
   it('renders', () => {
     const wrapper = shallow(<PasteJsonText />);
-    expect(wrapper.find(ModalHeader)).toHaveLength(1);
-    expect(wrapper.find(ModalBody)).toHaveLength(1);
-    expect(wrapper.find(ModalFooter)).toHaveLength(1);
+    expect(wrapper.find(FlyoutHeader)).toHaveLength(1);
+    expect(wrapper.find(FlyoutBody)).toHaveLength(1);
+    expect(wrapper.find(FlyoutFooter)).toHaveLength(1);
   });
 
-  describe('ModalHeader', () => {
+  describe('FlyoutHeader', () => {
     it('renders', () => {
-      const wrapper = shallow(<ModalHeader />);
+      const wrapper = shallow(<FlyoutHeader />);
       expect(wrapper.find('h2').text()).toEqual('Create documents');
     });
   });
 
-  describe('ModalBody', () => {
+  describe('FlyoutBody', () => {
     it('renders and updates the textarea value', () => {
       setMockValues({ ...values, textInput: 'lorem ipsum' });
-      const wrapper = shallow(<ModalBody />);
+      const wrapper = shallow(<FlyoutBody />);
       const textarea = wrapper.find(EuiTextArea);
 
       expect(textarea.prop('value')).toEqual('lorem ipsum');
@@ -60,16 +60,16 @@ describe('PasteJsonText', () => {
     });
   });
 
-  describe('ModalFooter', () => {
+  describe('FlyoutFooter', () => {
     it('closes the modal', () => {
-      const wrapper = shallow(<ModalFooter />);
+      const wrapper = shallow(<FlyoutFooter />);
 
       wrapper.find(EuiButtonEmpty).simulate('click');
       expect(actions.closeDocumentCreation).toHaveBeenCalled();
     });
 
     it('disables/enables the Continue button based on whether text has been entered', () => {
-      const wrapper = shallow(<ModalFooter />);
+      const wrapper = shallow(<FlyoutFooter />);
       expect(wrapper.find(EuiButton).prop('isDisabled')).toBe(false);
 
       setMockValues({ ...values, textInput: '' });
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.tsx
index 614704701222b0..ad83e0eb1a286a 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.tsx
@@ -9,10 +9,12 @@ import { useValues, useActions } from 'kea';
 
 import { i18n } from '@kbn/i18n';
 import {
-  EuiModalHeader,
-  EuiModalHeaderTitle,
-  EuiModalBody,
-  EuiModalFooter,
+  EuiFlyoutHeader,
+  EuiTitle,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiButton,
   EuiButtonEmpty,
   EuiTextArea,
@@ -22,34 +24,34 @@ import {
 
 import { AppLogic } from '../../../app_logic';
 
-import { MODAL_CANCEL_BUTTON, MODAL_CONTINUE_BUTTON } from '../constants';
+import { FLYOUT_ARIA_LABEL_ID, FLYOUT_CANCEL_BUTTON, FLYOUT_CONTINUE_BUTTON } from '../constants';
 import { DocumentCreationLogic } from '../';
 
 import './paste_json_text.scss';
 
 export const PasteJsonText: React.FC = () => (
   <>
-    <ModalHeader />
-    <ModalBody />
-    <ModalFooter />
+    <FlyoutHeader />
+    <FlyoutBody />
+    <FlyoutFooter />
   </>
 );
 
-export const ModalHeader: React.FC = () => {
+export const FlyoutHeader: React.FC = () => {
   return (
-    <EuiModalHeader>
-      <EuiModalHeaderTitle>
-        <h2>
+    <EuiFlyoutHeader hasBorder>
+      <EuiTitle size="m">
+        <h2 id={FLYOUT_ARIA_LABEL_ID}>
           {i18n.translate('xpack.enterpriseSearch.appSearch.documentCreation.pasteJsonText.title', {
             defaultMessage: 'Create documents',
           })}
         </h2>
-      </EuiModalHeaderTitle>
-    </EuiModalHeader>
+      </EuiTitle>
+    </EuiFlyoutHeader>
   );
 };
 
-export const ModalBody: React.FC = () => {
+export const FlyoutBody: React.FC = () => {
   const { configuredLimits } = useValues(AppLogic);
   const maxDocumentByteSize = configuredLimits?.engine?.maxDocumentByteSize;
 
@@ -57,7 +59,7 @@ export const ModalBody: React.FC = () => {
   const { setTextInput } = useActions(DocumentCreationLogic);
 
   return (
-    <EuiModalBody>
+    <EuiFlyoutBody>
       <EuiText color="subdued">
         <p>
           {i18n.translate(
@@ -82,20 +84,26 @@ export const ModalBody: React.FC = () => {
         fullWidth
         rows={12}
       />
-    </EuiModalBody>
+    </EuiFlyoutBody>
   );
 };
 
-export const ModalFooter: React.FC = () => {
+export const FlyoutFooter: React.FC = () => {
   const { textInput } = useValues(DocumentCreationLogic);
   const { closeDocumentCreation } = useActions(DocumentCreationLogic);
 
   return (
-    <EuiModalFooter>
-      <EuiButtonEmpty onClick={closeDocumentCreation}>{MODAL_CANCEL_BUTTON}</EuiButtonEmpty>
-      <EuiButton fill isDisabled={!textInput.length}>
-        {MODAL_CONTINUE_BUTTON}
-      </EuiButton>
-    </EuiModalFooter>
+    <EuiFlyoutFooter>
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty onClick={closeDocumentCreation}>{FLYOUT_CANCEL_BUTTON}</EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton fill isDisabled={!textInput.length}>
+            {FLYOUT_CONTINUE_BUTTON}
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlyoutFooter>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.test.tsx
index eadcf6df473e5e..d02545625345d9 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.test.tsx
@@ -30,7 +30,7 @@ describe('ShowCreationModes', () => {
     expect(wrapper.find(DocumentCreationButtons)).toHaveLength(1);
   });
 
-  it('closes the modal', () => {
+  it('closes the flyout', () => {
     wrapper.find(EuiButtonEmpty).simulate('click');
     expect(actions.closeDocumentCreation).toHaveBeenCalled();
   });
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.tsx
index 1f7c4db83ab06c..f923661a57bcc1 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.tsx
@@ -9,14 +9,14 @@ import { useActions } from 'kea';
 
 import { i18n } from '@kbn/i18n';
 import {
-  EuiModalHeader,
-  EuiModalHeaderTitle,
-  EuiModalBody,
-  EuiModalFooter,
+  EuiFlyoutHeader,
+  EuiTitle,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
   EuiButtonEmpty,
 } from '@elastic/eui';
 
-import { MODAL_CANCEL_BUTTON } from '../constants';
+import { FLYOUT_ARIA_LABEL_ID, FLYOUT_CANCEL_BUTTON } from '../constants';
 import { DocumentCreationLogic, DocumentCreationButtons } from '../';
 
 export const ShowCreationModes: React.FC = () => {
@@ -24,22 +24,22 @@ export const ShowCreationModes: React.FC = () => {
 
   return (
     <>
-      <EuiModalHeader>
-        <EuiModalHeaderTitle>
-          <h2>
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="m">
+          <h2 id={FLYOUT_ARIA_LABEL_ID}>
             {i18n.translate(
               'xpack.enterpriseSearch.appSearch.documentCreation.showCreationModes.title',
               { defaultMessage: 'Add new documents' }
             )}
           </h2>
-        </EuiModalHeaderTitle>
-      </EuiModalHeader>
-      <EuiModalBody>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
         <DocumentCreationButtons />
-      </EuiModalBody>
-      <EuiModalFooter>
-        <EuiButtonEmpty onClick={closeDocumentCreation}>{MODAL_CANCEL_BUTTON}</EuiButtonEmpty>
-      </EuiModalFooter>
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiButtonEmpty onClick={closeDocumentCreation}>{FLYOUT_CANCEL_BUTTON}</EuiButtonEmpty>
+      </EuiFlyoutFooter>
     </>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.test.tsx
index dae085617cad8d..72a245df817ba9 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.test.tsx
@@ -16,7 +16,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { EuiFilePicker, EuiButtonEmpty, EuiButton } from '@elastic/eui';
 
-import { UploadJsonFile, ModalHeader, ModalBody, ModalFooter } from './upload_json_file';
+import { UploadJsonFile, FlyoutHeader, FlyoutBody, FlyoutFooter } from './upload_json_file';
 
 describe('UploadJsonFile', () => {
   const mockFile = new File(['mock'], 'mock.json', { type: 'application/json' });
@@ -41,21 +41,21 @@ describe('UploadJsonFile', () => {
 
   it('renders', () => {
     const wrapper = shallow(<UploadJsonFile />);
-    expect(wrapper.find(ModalHeader)).toHaveLength(1);
-    expect(wrapper.find(ModalBody)).toHaveLength(1);
-    expect(wrapper.find(ModalFooter)).toHaveLength(1);
+    expect(wrapper.find(FlyoutHeader)).toHaveLength(1);
+    expect(wrapper.find(FlyoutBody)).toHaveLength(1);
+    expect(wrapper.find(FlyoutFooter)).toHaveLength(1);
   });
 
-  describe('ModalHeader', () => {
+  describe('FlyoutHeader', () => {
     it('renders', () => {
-      const wrapper = shallow(<ModalHeader />);
+      const wrapper = shallow(<FlyoutHeader />);
       expect(wrapper.find('h2').text()).toEqual('Drag and drop .json');
     });
   });
 
-  describe('ModalBody', () => {
+  describe('FlyoutBody', () => {
     it('updates fileInput when files are added & removed', () => {
-      const wrapper = shallow(<ModalBody />);
+      const wrapper = shallow(<FlyoutBody />);
 
       wrapper.find(EuiFilePicker).simulate('change', [mockFile]);
       expect(actions.setFileInput).toHaveBeenCalledWith(mockFile);
@@ -65,16 +65,16 @@ describe('UploadJsonFile', () => {
     });
   });
 
-  describe('ModalFooter', () => {
-    it('closes the modal', () => {
-      const wrapper = shallow(<ModalFooter />);
+  describe('FlyoutFooter', () => {
+    it('closes the flyout', () => {
+      const wrapper = shallow(<FlyoutFooter />);
 
       wrapper.find(EuiButtonEmpty).simulate('click');
       expect(actions.closeDocumentCreation).toHaveBeenCalled();
     });
 
     it('disables/enables the Continue button based on whether files have been uploaded', () => {
-      const wrapper = shallow(<ModalFooter />);
+      const wrapper = shallow(<FlyoutFooter />);
       expect(wrapper.find(EuiButton).prop('isDisabled')).toBe(true);
 
       setMockValues({ ...values, fineInput: mockFile });
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.tsx
index d4c005d5cfa2b1..6c5b1de79c3207 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.tsx
@@ -14,10 +14,12 @@ import { useValues, useActions } from 'kea';
 
 import { i18n } from '@kbn/i18n';
 import {
-  EuiModalHeader,
-  EuiModalHeaderTitle,
-  EuiModalBody,
-  EuiModalFooter,
+  EuiFlyoutHeader,
+  EuiTitle,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiButton,
   EuiButtonEmpty,
   EuiFilePicker,
@@ -27,40 +29,40 @@ import {
 
 import { AppLogic } from '../../../app_logic';
 
-import { MODAL_CANCEL_BUTTON, MODAL_CONTINUE_BUTTON } from '../constants';
+import { FLYOUT_ARIA_LABEL_ID, FLYOUT_CANCEL_BUTTON, FLYOUT_CONTINUE_BUTTON } from '../constants';
 import { DocumentCreationLogic } from '../';
 
 export const UploadJsonFile: React.FC = () => (
   <>
-    <ModalHeader />
-    <ModalBody />
-    <ModalFooter />
+    <FlyoutHeader />
+    <FlyoutBody />
+    <FlyoutFooter />
   </>
 );
 
-export const ModalHeader: React.FC = () => {
+export const FlyoutHeader: React.FC = () => {
   return (
-    <EuiModalHeader>
-      <EuiModalHeaderTitle>
-        <h2>
+    <EuiFlyoutHeader hasBorder>
+      <EuiTitle size="m">
+        <h2 id={FLYOUT_ARIA_LABEL_ID}>
           {i18n.translate(
             'xpack.enterpriseSearch.appSearch.documentCreation.uploadJsonFile.title',
             { defaultMessage: 'Drag and drop .json' }
           )}
         </h2>
-      </EuiModalHeaderTitle>
-    </EuiModalHeader>
+      </EuiTitle>
+    </EuiFlyoutHeader>
   );
 };
 
-export const ModalBody: React.FC = () => {
+export const FlyoutBody: React.FC = () => {
   const { configuredLimits } = useValues(AppLogic);
   const maxDocumentByteSize = configuredLimits?.engine?.maxDocumentByteSize;
 
   const { setFileInput } = useActions(DocumentCreationLogic);
 
   return (
-    <EuiModalBody>
+    <EuiFlyoutBody>
       <EuiText color="subdued">
         <p>
           {i18n.translate(
@@ -79,20 +81,26 @@ export const ModalBody: React.FC = () => {
         accept="application/json"
         fullWidth
       />
-    </EuiModalBody>
+    </EuiFlyoutBody>
   );
 };
 
-export const ModalFooter: React.FC = () => {
+export const FlyoutFooter: React.FC = () => {
   const { fileInput } = useValues(DocumentCreationLogic);
   const { closeDocumentCreation } = useActions(DocumentCreationLogic);
 
   return (
-    <EuiModalFooter>
-      <EuiButtonEmpty onClick={closeDocumentCreation}>{MODAL_CANCEL_BUTTON}</EuiButtonEmpty>
-      <EuiButton fill isDisabled={!fileInput}>
-        {MODAL_CONTINUE_BUTTON}
-      </EuiButton>
-    </EuiModalFooter>
+    <EuiFlyoutFooter>
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty onClick={closeDocumentCreation}>{FLYOUT_CANCEL_BUTTON}</EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton fill isDisabled={!fileInput}>
+            {FLYOUT_CONTINUE_BUTTON}
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlyoutFooter>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_buttons.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_buttons.test.tsx
index c76cc4b45fc19b..93aff04b3f7c07 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_buttons.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_buttons.test.tsx
@@ -41,7 +41,7 @@ describe('DocumentCreationButtons', () => {
     expect(wrapper.find(EuiCardTo).prop('isDisabled')).toEqual(true);
   });
 
-  it('opens the DocumentCreationModal on click', () => {
+  it('opens the DocumentCreationFlyout on click', () => {
     const wrapper = shallow(<DocumentCreationButtons />);
 
     wrapper.find(EuiCard).at(0).simulate('click');
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_flyout.test.tsx
similarity index 77%
rename from x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.test.tsx
rename to x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_flyout.test.tsx
index a0bca62dc74191..f2799cde41e971 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_flyout.test.tsx
@@ -8,7 +8,7 @@ import { setMockValues, setMockActions } from '../../../__mocks__/kea.mock';
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import { EuiModal } from '@elastic/eui';
+import { EuiFlyout } from '@elastic/eui';
 
 import {
   ShowCreationModes,
@@ -18,9 +18,9 @@ import {
 } from './creation_mode_components';
 import { DocumentCreationStep } from './types';
 
-import { DocumentCreationModal, ModalContent } from './document_creation_modal';
+import { DocumentCreationFlyout, FlyoutContent } from './document_creation_flyout';
 
-describe('DocumentCreationModal', () => {
+describe('DocumentCreationFlyout', () => {
   const values = {
     isDocumentCreationOpen: true,
     creationMode: 'text',
@@ -36,25 +36,25 @@ describe('DocumentCreationModal', () => {
     setMockActions(actions);
   });
 
-  it('renders a closeable modal', () => {
-    const wrapper = shallow(<DocumentCreationModal />);
-    expect(wrapper.find(EuiModal)).toHaveLength(1);
+  it('renders a closeable flyout', () => {
+    const wrapper = shallow(<DocumentCreationFlyout />);
+    expect(wrapper.find(EuiFlyout)).toHaveLength(1);
 
-    wrapper.find(EuiModal).prop('onClose')();
+    wrapper.find(EuiFlyout).prop('onClose')();
     expect(actions.closeDocumentCreation).toHaveBeenCalled();
   });
 
   it('does not render if isDocumentCreationOpen is false', () => {
     setMockValues({ ...values, isDocumentCreationOpen: false });
-    const wrapper = shallow(<DocumentCreationModal />);
+    const wrapper = shallow(<DocumentCreationFlyout />);
 
     expect(wrapper.isEmptyRender()).toBe(true);
   });
 
-  describe('ModalContent', () => {
+  describe('FlyoutContent', () => {
     it('renders ShowCreationModes', () => {
       setMockValues({ ...values, creationStep: DocumentCreationStep.ShowCreationModes });
-      const wrapper = shallow(<ModalContent />);
+      const wrapper = shallow(<FlyoutContent />);
 
       expect(wrapper.find(ShowCreationModes)).toHaveLength(1);
     });
@@ -62,21 +62,21 @@ describe('DocumentCreationModal', () => {
     describe('creation modes', () => {
       it('renders ApiCodeExample', () => {
         setMockValues({ ...values, creationMode: 'api' });
-        const wrapper = shallow(<ModalContent />);
+        const wrapper = shallow(<FlyoutContent />);
 
         expect(wrapper.find(ApiCodeExample)).toHaveLength(1);
       });
 
       it('renders PasteJsonText', () => {
         setMockValues({ ...values, creationMode: 'text' });
-        const wrapper = shallow(<ModalContent />);
+        const wrapper = shallow(<FlyoutContent />);
 
         expect(wrapper.find(PasteJsonText)).toHaveLength(1);
       });
 
       it('renders UploadJsonFile', () => {
         setMockValues({ ...values, creationMode: 'file' });
-        const wrapper = shallow(<ModalContent />);
+        const wrapper = shallow(<FlyoutContent />);
 
         expect(wrapper.find(UploadJsonFile)).toHaveLength(1);
       });
@@ -85,21 +85,21 @@ describe('DocumentCreationModal', () => {
     describe('creation steps', () => {
       it('renders an error page', () => {
         setMockValues({ ...values, creationStep: DocumentCreationStep.ShowError });
-        const wrapper = shallow(<ModalContent />);
+        const wrapper = shallow(<FlyoutContent />);
 
         expect(wrapper.text()).toBe('DocumentCreationError'); // TODO: actual component
       });
 
       it('renders an error summary', () => {
         setMockValues({ ...values, creationStep: DocumentCreationStep.ShowErrorSummary });
-        const wrapper = shallow(<ModalContent />);
+        const wrapper = shallow(<FlyoutContent />);
 
         expect(wrapper.text()).toBe('DocumentCreationSummary'); // TODO: actual component
       });
 
       it('renders a success summary', () => {
         setMockValues({ ...values, creationStep: DocumentCreationStep.ShowSuccessSummary });
-        const wrapper = shallow(<ModalContent />);
+        const wrapper = shallow(<FlyoutContent />);
 
         // TODO: Figure out if the error and success summary should remain the same vs different components
         expect(wrapper.text()).toBe('DocumentCreationSummary'); // TODO: actual component
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_flyout.tsx
similarity index 78%
rename from x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.tsx
rename to x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_flyout.tsx
index e6662a7c30407b..ca52d14befb380 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_flyout.tsx
@@ -7,10 +7,11 @@
 import React from 'react';
 import { useValues, useActions } from 'kea';
 
-import { EuiOverlayMask, EuiModal } from '@elastic/eui';
+import { EuiPortal, EuiFlyout } from '@elastic/eui';
 
 import { DocumentCreationLogic } from './';
 import { DocumentCreationStep } from './types';
+import { FLYOUT_ARIA_LABEL_ID } from './constants';
 
 import {
   ShowCreationModes,
@@ -19,20 +20,20 @@ import {
   UploadJsonFile,
 } from './creation_mode_components';
 
-export const DocumentCreationModal: React.FC = () => {
+export const DocumentCreationFlyout: React.FC = () => {
   const { closeDocumentCreation } = useActions(DocumentCreationLogic);
   const { isDocumentCreationOpen } = useValues(DocumentCreationLogic);
 
   return isDocumentCreationOpen ? (
-    <EuiOverlayMask>
-      <EuiModal onClose={closeDocumentCreation}>
-        <ModalContent />
-      </EuiModal>
-    </EuiOverlayMask>
+    <EuiPortal>
+      <EuiFlyout ownFocus aria-labelledby={FLYOUT_ARIA_LABEL_ID} onClose={closeDocumentCreation}>
+        <FlyoutContent />
+      </EuiFlyout>
+    </EuiPortal>
   ) : null;
 };
 
-export const ModalContent: React.FC = () => {
+export const FlyoutContent: React.FC = () => {
   const { creationStep, creationMode } = useValues(DocumentCreationLogic);
 
   switch (creationStep) {
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_logic.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_logic.ts
index a5e015391d8fd0..5b85e7f2ab54e1 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_logic.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_logic.ts
@@ -30,7 +30,7 @@ interface DocumentCreationActions {
 export const DocumentCreationLogic = kea<
   MakeLogicType<DocumentCreationValues, DocumentCreationActions>
 >({
-  path: ['enterprise_search', 'app_search', 'document_creation_modal_logic'],
+  path: ['enterprise_search', 'app_search', 'document_creation_logic'],
   actions: () => ({
     showCreationModes: () => null,
     openDocumentCreation: (creationMode) => ({ creationMode }),
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/index.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/index.ts
index 0f4eaaeda0e1a2..d443b02393c057 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/index.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/index.ts
@@ -5,5 +5,5 @@
  */
 
 export { DocumentCreationButtons } from './document_creation_buttons';
-export { DocumentCreationModal } from './document_creation_modal';
+export { DocumentCreationFlyout } from './document_creation_flyout';
 export { DocumentCreationLogic } from './document_creation_logic';
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.test.tsx
index 17e6e2538f044b..52fa0d03a9719d 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.test.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { EuiButton } from '@elastic/eui';
 
-import { DocumentCreationModal } from '../document_creation';
+import { DocumentCreationFlyout } from '../document_creation';
 import { DocumentCreationButton } from './document_creation_button';
 
 describe('DocumentCreationButton', () => {
@@ -24,7 +24,7 @@ describe('DocumentCreationButton', () => {
 
   it('renders', () => {
     expect(wrapper.find(EuiButton).length).toEqual(1);
-    expect(wrapper.find(DocumentCreationModal).length).toEqual(1);
+    expect(wrapper.find(DocumentCreationFlyout).length).toEqual(1);
   });
 
   it('opens the document creation modes modal on click', () => {
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.tsx
index 6d211cf45ca9f3..3e4039bafcac73 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.tsx
@@ -10,7 +10,7 @@ import { useActions } from 'kea';
 import { i18n } from '@kbn/i18n';
 import { EuiButton } from '@elastic/eui';
 
-import { DocumentCreationLogic, DocumentCreationModal } from '../document_creation';
+import { DocumentCreationLogic, DocumentCreationFlyout } from '../document_creation';
 
 export const DocumentCreationButton: React.FC = () => {
   const { showCreationModes } = useActions(DocumentCreationLogic);
@@ -27,7 +27,7 @@ export const DocumentCreationButton: React.FC = () => {
           defaultMessage: 'Index documents',
         })}
       </EuiButton>
-      <DocumentCreationModal />
+      <DocumentCreationFlyout />
     </>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.test.tsx
index ad7874c01655bc..6c46c849c79bc0 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.test.tsx
@@ -10,7 +10,7 @@ import { EuiButton } from '@elastic/eui';
 
 import { CURRENT_MAJOR_VERSION } from '../../../../../common/version';
 
-import { DocumentCreationButtons, DocumentCreationModal } from '../document_creation';
+import { DocumentCreationButtons, DocumentCreationFlyout } from '../document_creation';
 import { EmptyEngineOverview } from './engine_overview_empty';
 
 describe('EmptyEngineOverview', () => {
@@ -32,6 +32,6 @@ describe('EmptyEngineOverview', () => {
 
   it('renders document creation components', () => {
     expect(wrapper.find(DocumentCreationButtons)).toHaveLength(1);
-    expect(wrapper.find(DocumentCreationModal)).toHaveLength(1);
+    expect(wrapper.find(DocumentCreationFlyout)).toHaveLength(1);
   });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.tsx
index d65ca4868d2828..83dd396e5e0801 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.tsx
@@ -16,7 +16,7 @@ import {
 } from '@elastic/eui';
 
 import { DOCS_PREFIX } from '../../routes';
-import { DocumentCreationButtons, DocumentCreationModal } from '../document_creation';
+import { DocumentCreationButtons, DocumentCreationFlyout } from '../document_creation';
 
 export const EmptyEngineOverview: React.FC = () => {
   return (
@@ -42,7 +42,7 @@ export const EmptyEngineOverview: React.FC = () => {
       </EuiPageHeader>
       <EuiPageContentBody>
         <DocumentCreationButtons />
-        <DocumentCreationModal />
+        <DocumentCreationFlyout />
       </EuiPageContentBody>
     </>
   );

From 4bf2de7b0d84b002b103bdbdc0097dedd55d4799 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Fri, 18 Dec 2020 22:59:59 +0100
Subject: [PATCH 36/75] [Discover] Change default sort handling  (#85561)

---
 .../public/application/angular/discover.js    |  8 ++-
 .../doc_table/lib/get_default_sort.test.ts    | 43 ++++++++++++++++
 .../angular/doc_table/lib/get_default_sort.ts |  7 ++-
 .../lib/get_sort_for_search_source.test.ts    | 51 +++++++++++++++++++
 .../lib/get_sort_for_search_source.ts         | 12 +++--
 .../embeddable/search_embeddable.ts           | 17 ++++++-
 .../helpers/get_sharing_data.test.ts          | 14 ++++-
 .../functional/apps/discover/_shared_links.ts |  2 +-
 8 files changed, 140 insertions(+), 14 deletions(-)
 create mode 100644 src/plugins/discover/public/application/angular/doc_table/lib/get_default_sort.test.ts
 create mode 100644 src/plugins/discover/public/application/angular/doc_table/lib/get_sort_for_search_source.test.ts

diff --git a/src/plugins/discover/public/application/angular/discover.js b/src/plugins/discover/public/application/angular/discover.js
index 2c3b8fd9606a95..99497d61c716e8 100644
--- a/src/plugins/discover/public/application/angular/discover.js
+++ b/src/plugins/discover/public/application/angular/discover.js
@@ -65,11 +65,13 @@ import {
   MODIFY_COLUMNS_ON_SWITCH,
   SAMPLE_SIZE_SETTING,
   SEARCH_ON_PAGE_LOAD_SETTING,
+  SORT_DEFAULT_ORDER_SETTING,
 } from '../../../common';
 import { loadIndexPattern, resolveIndexPattern } from '../helpers/resolve_index_pattern';
 import { getTopNavLinks } from '../components/top_nav/get_top_nav_links';
 import { updateSearchSource } from '../helpers/update_search_source';
 import { calcFieldCounts } from '../helpers/calc_field_counts';
+import { getDefaultSort } from './doc_table/lib/get_default_sort';
 
 const services = getServices();
 
@@ -410,9 +412,13 @@ function discoverController($element, $route, $scope, $timeout, Promise, uiCapab
 
   function getStateDefaults() {
     const query = $scope.searchSource.getField('query') || data.query.queryString.getDefaultQuery();
+    const sort = getSortArray(savedSearch.sort, $scope.indexPattern);
+
     return {
       query,
-      sort: getSortArray(savedSearch.sort, $scope.indexPattern),
+      sort: !sort.length
+        ? getDefaultSort($scope.indexPattern, config.get(SORT_DEFAULT_ORDER_SETTING, 'desc'))
+        : sort,
       columns:
         savedSearch.columns.length > 0
           ? savedSearch.columns
diff --git a/src/plugins/discover/public/application/angular/doc_table/lib/get_default_sort.test.ts b/src/plugins/discover/public/application/angular/doc_table/lib/get_default_sort.test.ts
new file mode 100644
index 00000000000000..9ad19653a6c12d
--- /dev/null
+++ b/src/plugins/discover/public/application/angular/doc_table/lib/get_default_sort.test.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 { getDefaultSort } from './get_default_sort';
+// @ts-ignore
+import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
+import { IndexPattern } from '../../../../kibana_services';
+
+describe('getDefaultSort function', function () {
+  let indexPattern: IndexPattern;
+  beforeEach(() => {
+    indexPattern = FixturesStubbedLogstashIndexPatternProvider() as IndexPattern;
+  });
+  test('should be a function', function () {
+    expect(typeof getDefaultSort === 'function').toBeTruthy();
+  });
+
+  test('should return default sort for an index pattern with timeFieldName', function () {
+    expect(getDefaultSort(indexPattern, 'desc')).toEqual([['time', 'desc']]);
+    expect(getDefaultSort(indexPattern, 'asc')).toEqual([['time', 'asc']]);
+  });
+
+  test('should return default sort for an index pattern without timeFieldName', function () {
+    delete indexPattern.timeFieldName;
+    expect(getDefaultSort(indexPattern, 'desc')).toEqual([]);
+    expect(getDefaultSort(indexPattern, 'asc')).toEqual([]);
+  });
+});
diff --git a/src/plugins/discover/public/application/angular/doc_table/lib/get_default_sort.ts b/src/plugins/discover/public/application/angular/doc_table/lib/get_default_sort.ts
index 634e3cfec3a0bd..c1e4da0bab54d3 100644
--- a/src/plugins/discover/public/application/angular/doc_table/lib/get_default_sort.ts
+++ b/src/plugins/discover/public/application/angular/doc_table/lib/get_default_sort.ts
@@ -17,7 +17,6 @@
  * under the License.
  */
 import { IndexPattern } from '../../../../kibana_services';
-// @ts-ignore
 import { isSortable } from './get_sort';
 import { SortOrder } from '../components/table_header/helpers';
 
@@ -26,12 +25,12 @@ import { SortOrder } from '../components/table_header/helpers';
  * the default sort is returned depending of the index pattern
  */
 export function getDefaultSort(
-  indexPattern: IndexPattern,
+  indexPattern: IndexPattern | undefined,
   defaultSortOrder: string = 'desc'
 ): SortOrder[] {
-  if (indexPattern.timeFieldName && isSortable(indexPattern.timeFieldName, indexPattern)) {
+  if (indexPattern?.timeFieldName && isSortable(indexPattern.timeFieldName, indexPattern)) {
     return [[indexPattern.timeFieldName, defaultSortOrder]];
   } else {
-    return [['_score', defaultSortOrder]];
+    return [];
   }
 }
diff --git a/src/plugins/discover/public/application/angular/doc_table/lib/get_sort_for_search_source.test.ts b/src/plugins/discover/public/application/angular/doc_table/lib/get_sort_for_search_source.test.ts
new file mode 100644
index 00000000000000..1dbd31897d3077
--- /dev/null
+++ b/src/plugins/discover/public/application/angular/doc_table/lib/get_sort_for_search_source.test.ts
@@ -0,0 +1,51 @@
+/*
+ * 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 { getSortForSearchSource } from './get_sort_for_search_source';
+// @ts-ignore
+import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
+import { IndexPattern } from '../../../../kibana_services';
+import { SortOrder } from '../components/table_header/helpers';
+
+describe('getSortForSearchSource function', function () {
+  let indexPattern: IndexPattern;
+  beforeEach(() => {
+    indexPattern = FixturesStubbedLogstashIndexPatternProvider() as IndexPattern;
+  });
+  test('should be a function', function () {
+    expect(typeof getSortForSearchSource === 'function').toBeTruthy();
+  });
+
+  test('should return an object to use for searchSource when columns are given', function () {
+    const cols = [['bytes', 'desc']] as SortOrder[];
+    expect(getSortForSearchSource(cols, indexPattern)).toEqual([{ bytes: 'desc' }]);
+    expect(getSortForSearchSource(cols, indexPattern, 'asc')).toEqual([{ bytes: 'desc' }]);
+    delete indexPattern.timeFieldName;
+    expect(getSortForSearchSource(cols, indexPattern)).toEqual([{ bytes: 'desc' }]);
+    expect(getSortForSearchSource(cols, indexPattern, 'asc')).toEqual([{ bytes: 'desc' }]);
+  });
+
+  test('should return an object to use for searchSource when no columns are given', function () {
+    const cols = [] as SortOrder[];
+    expect(getSortForSearchSource(cols, indexPattern)).toEqual([{ _doc: 'desc' }]);
+    expect(getSortForSearchSource(cols, indexPattern, 'asc')).toEqual([{ _doc: 'asc' }]);
+    delete indexPattern.timeFieldName;
+    expect(getSortForSearchSource(cols, indexPattern)).toEqual([{ _score: 'desc' }]);
+    expect(getSortForSearchSource(cols, indexPattern, 'asc')).toEqual([{ _score: 'asc' }]);
+  });
+});
diff --git a/src/plugins/discover/public/application/angular/doc_table/lib/get_sort_for_search_source.ts b/src/plugins/discover/public/application/angular/doc_table/lib/get_sort_for_search_source.ts
index 6721f7a03584cd..1244a0e229cdbd 100644
--- a/src/plugins/discover/public/application/angular/doc_table/lib/get_sort_for_search_source.ts
+++ b/src/plugins/discover/public/application/angular/doc_table/lib/get_sort_for_search_source.ts
@@ -19,7 +19,6 @@
 import { EsQuerySortValue, IndexPattern } from '../../../../kibana_services';
 import { SortOrder } from '../components/table_header/helpers';
 import { getSort } from './get_sort';
-import { getDefaultSort } from './get_default_sort';
 
 /**
  * Prepares sort for search source, that's sending the request to ES
@@ -33,10 +32,13 @@ export function getSortForSearchSource(
   indexPattern?: IndexPattern,
   defaultDirection: string = 'desc'
 ): EsQuerySortValue[] {
-  if (!sort || !indexPattern) {
-    return [];
-  } else if (Array.isArray(sort) && sort.length === 0) {
-    sort = getDefaultSort(indexPattern, defaultDirection);
+  if (!sort || !indexPattern || (Array.isArray(sort) && sort.length === 0)) {
+    if (indexPattern?.timeFieldName) {
+      // sorting by index order
+      return [{ _doc: defaultDirection } as EsQuerySortValue];
+    } else {
+      return [{ _score: defaultDirection } as EsQuerySortValue];
+    }
   }
   const { timeFieldName } = indexPattern;
   return getSort(sort, indexPattern).map((sortPair: Record<string, string>) => {
diff --git a/src/plugins/discover/public/application/embeddable/search_embeddable.ts b/src/plugins/discover/public/application/embeddable/search_embeddable.ts
index b143afd1988e68..ff408ba431ed95 100644
--- a/src/plugins/discover/public/application/embeddable/search_embeddable.ts
+++ b/src/plugins/discover/public/application/embeddable/search_embeddable.ts
@@ -48,6 +48,7 @@ import {
 import { SEARCH_EMBEDDABLE_TYPE } from './constants';
 import { SavedSearch } from '../..';
 import { SAMPLE_SIZE_SETTING, SORT_DEFAULT_ORDER_SETTING } from '../../../common';
+import { getDefaultSort } from '../angular/doc_table/lib/get_default_sort';
 
 interface SearchScope extends ng.IScope {
   columns?: string[];
@@ -200,6 +201,13 @@ export class SearchEmbeddable
     const { searchSource } = this.savedSearch;
     const indexPattern = (searchScope.indexPattern = searchSource.getField('index'))!;
 
+    if (!this.savedSearch.sort || !this.savedSearch.sort.length) {
+      this.savedSearch.sort = getDefaultSort(
+        indexPattern,
+        getServices().uiSettings.get(SORT_DEFAULT_ORDER_SETTING, 'desc')
+      );
+    }
+
     const timeRangeSearchSource = searchSource.create();
     timeRangeSearchSource.setField('filter', () => {
       if (!this.searchScope || !this.input.timeRange) return;
@@ -341,7 +349,14 @@ export class SearchEmbeddable
     // If there is column or sort data on the panel, that means the original columns or sort settings have
     // been overridden in a dashboard.
     searchScope.columns = this.input.columns || this.savedSearch.columns;
-    searchScope.sort = this.input.sort || this.savedSearch.sort;
+    const savedSearchSort =
+      this.savedSearch.sort && this.savedSearch.sort.length
+        ? this.savedSearch.sort
+        : getDefaultSort(
+            this.searchScope?.indexPattern,
+            getServices().uiSettings.get(SORT_DEFAULT_ORDER_SETTING, 'desc')
+          );
+    searchScope.sort = this.input.sort || savedSearchSort;
     searchScope.sharedItemTitle = this.panelTitle;
 
     if (forceFetch || isFetchRequired) {
diff --git a/src/plugins/discover/public/application/helpers/get_sharing_data.test.ts b/src/plugins/discover/public/application/helpers/get_sharing_data.test.ts
index b2aa3a05d7eb02..4dec1f75ba322b 100644
--- a/src/plugins/discover/public/application/helpers/get_sharing_data.test.ts
+++ b/src/plugins/discover/public/application/helpers/get_sharing_data.test.ts
@@ -21,6 +21,7 @@ import { getSharingData } from './get_sharing_data';
 import { IUiSettingsClient } from 'kibana/public';
 import { createSearchSourceMock } from '../../../../data/common/search/search_source/mocks';
 import { indexPatternMock } from '../../__mocks__/index_pattern';
+import { SORT_DEFAULT_ORDER_SETTING } from '../../../common';
 
 describe('getSharingData', () => {
   test('returns valid data for sharing', async () => {
@@ -29,7 +30,10 @@ describe('getSharingData', () => {
       searchSourceMock,
       { columns: [] },
       ({
-        get: () => {
+        get: (key: string) => {
+          if (key === SORT_DEFAULT_ORDER_SETTING) {
+            return 'desc';
+          }
           return false;
         },
       } as unknown) as IUiSettingsClient,
@@ -57,7 +61,13 @@ describe('getSharingData', () => {
               },
             },
             "script_fields": Object {},
-            "sort": Array [],
+            "sort": Array [
+              Object {
+                "_score": Object {
+                  "order": "desc",
+                },
+              },
+            ],
             "stored_fields": undefined,
           },
           "index": "the-index-pattern-title",
diff --git a/test/functional/apps/discover/_shared_links.ts b/test/functional/apps/discover/_shared_links.ts
index a676878382865c..51ea5f997e859d 100644
--- a/test/functional/apps/discover/_shared_links.ts
+++ b/test/functional/apps/discover/_shared_links.ts
@@ -90,7 +90,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
             ":(from:'2015-09-19T06:31:44.000Z',to:'2015-09" +
             "-23T18:31:44.000Z'))&_a=(columns:!(_source),filters:!(),index:'logstash-" +
             "*',interval:auto,query:(language:kuery,query:'')" +
-            ',sort:!())';
+            ",sort:!(!('@timestamp',desc)))";
           const actualUrl = await PageObjects.share.getSharedUrl();
           // strip the timestamp out of each URL
           expect(actualUrl.replace(/_t=\d{13}/, '_t=TIMESTAMP')).to.be(

From 563fa6de22be7f0c00133e17cbe3639e37eb031f Mon Sep 17 00:00:00 2001
From: Jason Stoltzfus <jastoltz24@gmail.com>
Date: Fri, 18 Dec 2020 17:01:05 -0500
Subject: [PATCH 37/75] [App Search] Updates to results on the documents view
 (#86181)

---
 .../build_search_ui_config.test.ts            | 38 ++++++++++
 .../build_search_ui_config.ts                 | 34 +++++++++
 .../search_experience/search_experience.tsx   | 11 +--
 .../search_experience_content.test.tsx        | 11 ++-
 .../search_experience_content.tsx             |  4 +-
 .../views/result_view.test.tsx                | 13 +++-
 .../search_experience/views/result_view.tsx   | 10 ++-
 .../app_search/components/library/library.tsx | 37 +++++++++-
 .../app_search/components/result/result.scss  |  1 +
 .../components/result/result.test.tsx         | 36 +++++++++
 .../app_search/components/result/result.tsx   | 73 +++++++++++++------
 .../components/result/result_field_value.scss |  5 --
 .../result/result_field_value.test.tsx        |  4 +-
 .../components/result/result_field_value.tsx  |  5 +-
 .../public/applications/app_search/routes.ts  |  3 +
 15 files changed, 235 insertions(+), 50 deletions(-)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/build_search_ui_config.test.ts
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/build_search_ui_config.ts

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/build_search_ui_config.test.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/build_search_ui_config.test.ts
new file mode 100644
index 00000000000000..dd52f6b8227ba6
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/build_search_ui_config.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 { SchemaTypes } from '../../../../shared/types';
+
+import { buildSearchUIConfig } from './build_search_ui_config';
+
+describe('buildSearchUIConfig', () => {
+  it('builds a configuration object for Search UI', () => {
+    const connector = {};
+    const schema = {
+      foo: 'text' as SchemaTypes,
+      bar: 'number' as SchemaTypes,
+    };
+
+    const config = buildSearchUIConfig(connector, schema);
+    expect(config.apiConnector).toEqual(connector);
+    expect(config.searchQuery.result_fields).toEqual({
+      bar: {
+        raw: {},
+        snippet: {
+          fallback: true,
+          size: 300,
+        },
+      },
+      foo: {
+        raw: {},
+        snippet: {
+          fallback: true,
+          size: 300,
+        },
+      },
+    });
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/build_search_ui_config.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/build_search_ui_config.ts
new file mode 100644
index 00000000000000..533adbaf5bab93
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/build_search_ui_config.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 { Schema } from '../../../../shared/types';
+
+export const buildSearchUIConfig = (apiConnector: object, schema: Schema) => {
+  return {
+    alwaysSearchOnInitialLoad: true,
+    apiConnector,
+    trackUrlState: false,
+    initialState: {
+      sortDirection: 'desc',
+      sortField: 'id',
+    },
+    searchQuery: {
+      result_fields: Object.keys(schema || {}).reduce(
+        (acc: { [key: string]: object }, key: string) => {
+          acc[key] = {
+            snippet: {
+              size: 300,
+              fallback: true,
+            },
+            raw: {},
+          };
+          return acc;
+        },
+        {}
+      ),
+    },
+  };
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/search_experience.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/search_experience.tsx
index 49cc573b686bc2..1501efc589fc08 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/search_experience.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/search_experience.tsx
@@ -20,6 +20,7 @@ import { externalUrl } from '../../../../shared/enterprise_search_url';
 
 import { SearchBoxView, SortingView } from './views';
 import { SearchExperienceContent } from './search_experience_content';
+import { buildSearchUIConfig } from './build_search_ui_config';
 
 const DEFAULT_SORT_OPTIONS = [
   {
@@ -52,15 +53,7 @@ export const SearchExperience: React.FC = () => {
     searchKey: engine.apiKey,
   });
 
-  const searchProviderConfig = {
-    alwaysSearchOnInitialLoad: true,
-    apiConnector: connector,
-    trackUrlState: false,
-    initialState: {
-      sortDirection: 'desc',
-      sortField: 'id',
-    },
-  };
+  const searchProviderConfig = buildSearchUIConfig(connector, engine.schema || {});
 
   return (
     <div className="documentsSearchExperience">
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/search_experience_content.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/search_experience_content.test.tsx
index 455e237848a4bc..a46ec560a13e0a 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/search_experience_content.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/search_experience_content.test.tsx
@@ -15,6 +15,7 @@ import { Results } from '@elastic/react-search-ui';
 
 import { ResultView } from './views';
 import { Pagination } from './pagination';
+import { SchemaTypes } from '../../../../shared/types';
 import { SearchExperienceContent } from './search_experience_content';
 
 describe('SearchExperienceContent', () => {
@@ -27,6 +28,11 @@ describe('SearchExperienceContent', () => {
     engineName: 'engine1',
     isMetaEngine: false,
     myRole: { canManageEngineDocuments: true },
+    engine: {
+      schema: {
+        title: 'string' as SchemaTypes,
+      },
+    },
   };
 
   beforeEach(() => {
@@ -40,7 +46,7 @@ describe('SearchExperienceContent', () => {
     expect(wrapper.isEmptyRender()).toBe(false);
   });
 
-  it('passes engineName to the result view', () => {
+  it('passes engineName and schema to the result view', () => {
     const props = {
       result: {
         id: {
@@ -56,6 +62,9 @@ describe('SearchExperienceContent', () => {
           raw: 'bar',
         },
       },
+      schemaForTypeHighlights: {
+        title: 'string' as SchemaTypes,
+      },
     };
 
     const wrapper = shallow(<SearchExperienceContent />);
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/search_experience_content.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/search_experience_content.tsx
index 9194a3a1db5e44..55a8377261dd9b 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/search_experience_content.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/search_experience_content.tsx
@@ -25,7 +25,7 @@ export const SearchExperienceContent: React.FC = () => {
   const { resultSearchTerm, totalResults, wasSearched } = useSearchContextState();
 
   const { myRole } = useValues(AppLogic);
-  const { isMetaEngine } = useValues(EngineLogic);
+  const { isMetaEngine, engine } = useValues(EngineLogic);
 
   if (!wasSearched) return null;
 
@@ -44,7 +44,7 @@ export const SearchExperienceContent: React.FC = () => {
         <Results
           titleField="id"
           resultView={(props: ResultViewProps) => {
-            return <ResultView {...props} />;
+            return <ResultView {...props} schemaForTypeHighlights={engine.schema} />;
           }}
         />
         <EuiSpacer />
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.test.tsx
index 049a3ad1bed66f..91334f312623df 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.test.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { ResultView } from '.';
+import { SchemaTypes } from '../../../../../shared/types';
 import { Result } from '../../../result/result';
 
 describe('ResultView', () => {
@@ -27,8 +28,16 @@ describe('ResultView', () => {
     },
   };
 
+  const schema = {
+    title: 'string' as SchemaTypes,
+  };
+
   it('renders', () => {
-    const wrapper = shallow(<ResultView result={result} />);
-    expect(wrapper.find(Result).exists()).toBe(true);
+    const wrapper = shallow(<ResultView result={result} schemaForTypeHighlights={schema} />);
+    expect(wrapper.find(Result).props()).toEqual({
+      result,
+      shouldLinkToDetailPage: true,
+      schemaForTypeHighlights: schema,
+    });
   });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.tsx
index 52b845a1aee2d8..543c63b3349407 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.tsx
@@ -7,16 +7,22 @@
 import React from 'react';
 
 import { Result as ResultType } from '../../../result/types';
+import { Schema } from '../../../../../shared/types';
 import { Result } from '../../../result/result';
 
 export interface Props {
   result: ResultType;
+  schemaForTypeHighlights?: Schema;
 }
 
-export const ResultView: React.FC<Props> = ({ result }) => {
+export const ResultView: React.FC<Props> = ({ result, schemaForTypeHighlights }) => {
   return (
     <li>
-      <Result result={result} />
+      <Result
+        result={result}
+        shouldLinkToDetailPage={true}
+        schemaForTypeHighlights={schemaForTypeHighlights}
+      />
     </li>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx
index 66c0cc165fc056..1b222cfaacf7c1 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx
@@ -15,6 +15,7 @@ import {
 import React from 'react';
 
 import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
+import { Schema } from '../../../shared/types';
 import { Result } from '../result/result';
 
 export const Library: React.FC = () => {
@@ -35,12 +36,18 @@ export const Library: React.FC = () => {
       description: {
         raw: 'A description',
       },
-      states: {
-        raw: ['Pennsylvania', 'Ohio'],
+      date_established: {
+        raw: '1968-10-02T05:00:00Z',
+      },
+      location: {
+        raw: '37.3,-113.05',
       },
       visitors: {
         raw: 1000,
       },
+      states: {
+        raw: ['Pennsylvania', 'Ohio'],
+      },
       size: {
         raw: 200,
       },
@@ -50,6 +57,17 @@ export const Library: React.FC = () => {
     },
   };
 
+  const schema: Schema = {
+    title: 'text',
+    description: 'text',
+    date_established: 'date',
+    location: 'geolocation',
+    states: 'text',
+    visitors: 'number',
+    size: 'number',
+    length: 'number',
+  };
+
   return (
     <>
       <SetPageChrome trail={['Library']} />
@@ -170,6 +188,21 @@ export const Library: React.FC = () => {
               },
             }}
           />
+
+          <EuiSpacer />
+          <EuiTitle size="s">
+            <h3>With a link</h3>
+          </EuiTitle>
+          <EuiSpacer />
+          <Result {...props} shouldLinkToDetailPage={true} />
+          <EuiSpacer />
+
+          <EuiSpacer />
+          <EuiTitle size="s">
+            <h3>With field value type highlights</h3>
+          </EuiTitle>
+          <EuiSpacer />
+          <Result {...props} schemaForTypeHighlights={schema} />
           <EuiSpacer />
         </EuiPageContentBody>
       </EuiPageContent>
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.scss b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.scss
index ed8ce512a2eb80..8342061ee00c3b 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.scss
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.scss
@@ -5,6 +5,7 @@
     width: 100%;
     padding: $euiSize;
     overflow: hidden;
+    color: $euiTextColor;
   }
 
   &__hiddenFieldsIndicator {
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx
index ade26551039faa..5b598a0b8565ec 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx
@@ -11,6 +11,9 @@ import { EuiPanel } from '@elastic/eui';
 
 import { ResultField } from './result_field';
 import { ResultHeader } from './result_header';
+import { ReactRouterHelper } from '../../../shared/react_router_helpers/eui_components';
+import { SchemaTypes } from '../../../shared/types';
+
 import { Result } from './result';
 
 describe('Result', () => {
@@ -37,6 +40,12 @@ describe('Result', () => {
     },
   };
 
+  const schema = {
+    title: 'text' as SchemaTypes,
+    description: 'text' as SchemaTypes,
+    length: 'number' as SchemaTypes,
+  };
+
   it('renders', () => {
     const wrapper = shallow(<Result {...props} />);
     expect(wrapper.find(EuiPanel).exists()).toBe(true);
@@ -62,6 +71,33 @@ describe('Result', () => {
     });
   });
 
+  describe('document detail link', () => {
+    it('will render a link if shouldLinkToDetailPage is true', () => {
+      const wrapper = shallow(<Result {...props} shouldLinkToDetailPage={true} />);
+      expect(wrapper.find(ReactRouterHelper).prop('to')).toEqual('/engines/my-engine/documents/1');
+      expect(wrapper.find('article.appSearchResult__content').exists()).toBe(false);
+      expect(wrapper.find('a.appSearchResult__content').exists()).toBe(true);
+    });
+
+    it('will not render a link if shouldLinkToDetailPage is not set', () => {
+      const wrapper = shallow(<Result {...props} />);
+      expect(wrapper.find(ReactRouterHelper).exists()).toBe(false);
+      expect(wrapper.find('article.appSearchResult__content').exists()).toBe(true);
+      expect(wrapper.find('a.appSearchResult__content').exists()).toBe(false);
+    });
+  });
+
+  it('will render field details with type highlights if schemaForTypeHighlights has been provided', () => {
+    const wrapper = shallow(
+      <Result {...props} shouldLinkToDetailPage={true} schemaForTypeHighlights={schema} />
+    );
+    expect(wrapper.find(ResultField).map((rf) => rf.prop('type'))).toEqual([
+      'text',
+      'text',
+      'number',
+    ]);
+  });
+
   describe('when there are more than 5 fields', () => {
     const propsWithMoreFields = {
       result: {
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx
index 4f343e64b12ae5..11415f55123804 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx
@@ -14,15 +14,25 @@ import { i18n } from '@kbn/i18n';
 import { FieldValue, Result as ResultType } from './types';
 import { ResultField } from './result_field';
 import { ResultHeader } from './result_header';
+import { getDocumentDetailRoute } from '../../routes';
+import { ReactRouterHelper } from '../../../shared/react_router_helpers/eui_components';
+import { Schema } from '../../../shared/types';
 
 interface Props {
   result: ResultType;
   showScore?: boolean;
+  shouldLinkToDetailPage?: boolean;
+  schemaForTypeHighlights?: Schema;
 }
 
 const RESULT_CUTOFF = 5;
 
-export const Result: React.FC<Props> = ({ result, showScore }) => {
+export const Result: React.FC<Props> = ({
+  result,
+  showScore = false,
+  shouldLinkToDetailPage = false,
+  schemaForTypeHighlights,
+}) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const ID = 'id';
@@ -33,6 +43,19 @@ export const Result: React.FC<Props> = ({ result, showScore }) => {
     [result]
   );
   const numResults = resultFields.length;
+  const typeForField = (fieldName: string) => {
+    if (schemaForTypeHighlights) return schemaForTypeHighlights[fieldName];
+  };
+
+  const conditionallyLinkedArticle = (children: React.ReactNode) => {
+    return shouldLinkToDetailPage ? (
+      <ReactRouterHelper to={getDocumentDetailRoute(resultMeta.engine, resultMeta.id)}>
+        <a className="appSearchResult__content">{children}</a>
+      </ReactRouterHelper>
+    ) : (
+      <article className="appSearchResult__content">{children}</article>
+    );
+  };
 
   return (
     <EuiPanel
@@ -43,26 +66,34 @@ export const Result: React.FC<Props> = ({ result, showScore }) => {
         defaultMessage: 'View document details',
       })}
     >
-      <article className="appSearchResult__content">
-        <ResultHeader resultMeta={resultMeta} showScore={!!showScore} />
-        <div className="appSearchResult__body">
-          {resultFields
-            .slice(0, isOpen ? resultFields.length : RESULT_CUTOFF)
-            .map(([field, value]: [string, FieldValue]) => (
-              <ResultField key={field} field={field} raw={value.raw} snippet={value.snippet} />
-            ))}
-        </div>
-        {numResults > RESULT_CUTOFF && !isOpen && (
-          <footer className="appSearchResult__hiddenFieldsIndicator">
-            {i18n.translate('xpack.enterpriseSearch.appSearch.result.numberOfAdditionalFields', {
-              defaultMessage: '{numberOfAdditionalFields} more fields',
-              values: {
-                numberOfAdditionalFields: numResults - RESULT_CUTOFF,
-              },
-            })}
-          </footer>
-        )}
-      </article>
+      {conditionallyLinkedArticle(
+        <>
+          <ResultHeader resultMeta={resultMeta} showScore={!!showScore} />
+          <div className="appSearchResult__body">
+            {resultFields
+              .slice(0, isOpen ? resultFields.length : RESULT_CUTOFF)
+              .map(([field, value]: [string, FieldValue]) => (
+                <ResultField
+                  key={field}
+                  field={field}
+                  raw={value.raw}
+                  snippet={value.snippet}
+                  type={typeForField(field)}
+                />
+              ))}
+          </div>
+          {numResults > RESULT_CUTOFF && !isOpen && (
+            <footer className="appSearchResult__hiddenFieldsIndicator">
+              {i18n.translate('xpack.enterpriseSearch.appSearch.result.numberOfAdditionalFields', {
+                defaultMessage: '{numberOfAdditionalFields} more fields',
+                values: {
+                  numberOfAdditionalFields: numResults - RESULT_CUTOFF,
+                },
+              })}
+            </footer>
+          )}
+        </>
+      )}
       {numResults > RESULT_CUTOFF && (
         <button
           type="button"
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_field_value.scss b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_field_value.scss
index 996124a725aab1..10bc851d97479c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_field_value.scss
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_field_value.scss
@@ -21,8 +21,3 @@
     font-family: $euiCodeFontFamily;
   }
 }
-
-.enterpriseSearchResultHighlight {
-  color: $euiColorPrimary;
-  font-weight: $euiFontWeightSemiBold;
-}
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_field_value.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_field_value.test.tsx
index 227700bdd0cd20..09b09999e5c1a8 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_field_value.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_field_value.test.tsx
@@ -159,9 +159,9 @@ describe('ResultFieldValue', () => {
       );
     });
 
-    it('will render content as html with class names appended to em tags', () => {
+    it('will render content as html with mark tags', () => {
       expect(wrapper.find('div').html()).toContain(
-        'a <em class="enterpriseSearchResultHighlight">long</em> description'
+        'a <mark class="euiMark">long</mark> description'
       );
     });
 
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_field_value.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_field_value.tsx
index 8e4b264017c0bd..4d58a86a2ce557 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_field_value.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_field_value.tsx
@@ -22,10 +22,7 @@ const getRawArrayDisplay = (rawArray: Array<string | number>): string => {
 };
 
 const parseHighlights = (highlight: string): string => {
-  return highlight.replace(
-    /<em>(.+?)<\/em>/gi,
-    '<em class="enterpriseSearchResultHighlight">$1</em>'
-  );
+  return highlight.replace(/<em>(.+?)<\/em>/gi, '<mark class="euiMark">$1</mark>');
 };
 
 const isFieldValueEmpty = (type?: string, raw?: Raw, snippet?: Snippet) => {
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/routes.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/routes.ts
index ade3c9a9174104..ca2ce177617b8f 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/routes.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/routes.ts
@@ -29,6 +29,9 @@ export const ENGINE_ANALYTICS_PATH = '/analytics';
 
 export const ENGINE_DOCUMENTS_PATH = '/documents';
 export const ENGINE_DOCUMENT_DETAIL_PATH = `${ENGINE_DOCUMENTS_PATH}/:documentId`;
+export const getDocumentDetailRoute = (engineName: string, documentId: string) => {
+  return generatePath(ENGINE_PATH + ENGINE_DOCUMENT_DETAIL_PATH, { engineName, documentId });
+};
 
 export const ENGINE_SCHEMA_PATH = '/schema/edit';
 export const ENGINE_REINDEX_JOB_PATH = '/reindex-job/:activeReindexJobId';

From 646a34043ab9c18fba13e24523bc9c9686a85066 Mon Sep 17 00:00:00 2001
From: Brian Seeders <brian.seeders@elastic.co>
Date: Fri, 18 Dec 2020 17:32:58 -0500
Subject: [PATCH 38/75] Explicitly set Elasticsearch heap size during CI and
 local development (#86513)

---
 packages/kbn-es/src/cluster.js | 9 +++++++++
 vars/workers.groovy            | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/kbn-es/src/cluster.js b/packages/kbn-es/src/cluster.js
index 68bcc37c65600a..eaf353b3e55d03 100644
--- a/packages/kbn-es/src/cluster.js
+++ b/packages/kbn-es/src/cluster.js
@@ -275,6 +275,15 @@ exports.Cluster = class Cluster {
 
     this._log.debug('%s %s', ES_BIN, args.join(' '));
 
+    options.esEnvVars = options.esEnvVars || {};
+
+    // ES now automatically sets heap size to 50% of the machine's available memory
+    // so we need to set it to a smaller size for local dev and CI
+    // especially because we currently run many instances of ES on the same machine during CI
+    options.esEnvVars.ES_JAVA_OPTS =
+      (options.esEnvVars.ES_JAVA_OPTS ? `${options.esEnvVars.ES_JAVA_OPTS} ` : '') +
+      '-Xms1g -Xmx1g';
+
     this._process = execa(ES_BIN, args, {
       cwd: installPath,
       env: {
diff --git a/vars/workers.groovy b/vars/workers.groovy
index 365c30204ebdc0..a1d569595ab4b9 100644
--- a/vars/workers.groovy
+++ b/vars/workers.groovy
@@ -147,7 +147,7 @@ def intake(jobName, String script) {
 // Worker for running functional tests. Runs a setup process (e.g. the kibana build) then executes a map of closures in parallel (e.g. one for each ciGroup)
 def functional(name, Closure setup, Map processes) {
   return {
-    parallelProcesses(name: name, setup: setup, processes: processes, delayBetweenProcesses: 20, size: 'xl-highmem')
+    parallelProcesses(name: name, setup: setup, processes: processes, delayBetweenProcesses: 20, size: 'xl')
   }
 }
 

From e3e166e05aaa36ac1ec0f0229ba28f4e60d79b92 Mon Sep 17 00:00:00 2001
From: Brian Seeders <brian.seeders@elastic.co>
Date: Fri, 18 Dec 2020 17:39:32 -0500
Subject: [PATCH 39/75] [CI] Bump memory for main CI workers (#86541)

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

diff --git a/vars/workers.groovy b/vars/workers.groovy
index a1d569595ab4b9..dd634f3c25a326 100644
--- a/vars/workers.groovy
+++ b/vars/workers.groovy
@@ -18,7 +18,7 @@ def label(size) {
     case 'xl-highmem':
       return 'docker && tests-xl-highmem'
     case 'xxl':
-      return 'docker && tests-xxl'
+      return 'docker && tests-xxl && gobld/machineType:custom-64-270336'
   }
 
   error "unknown size '${size}'"

From 94b49451efa40bf3376bc74c0c3d1547e8c124c5 Mon Sep 17 00:00:00 2001
From: igoristic <igor.zaytsev.dev@gmail.com>
Date: Fri, 18 Dec 2020 18:09:14 -0500
Subject: [PATCH 40/75] [Monitoring][Alerting] CCR read exceptions alert
 (#85908)

* CCR read exceptions all branches

* cleanup

* CR feedback

* Added UI/UX to ccr/shards listing and details

* Fixed snaps

* Added reason for the exception

* Added setup mode funtionality and alert status
---
 x-pack/plugins/monitoring/common/constants.ts |  22 ++
 .../plugins/monitoring/common/types/alerts.ts |  16 +
 .../monitoring/public/alerts/callout.tsx      |  29 +-
 .../ccr_read_exceptions_alert/index.tsx       |  49 +++
 .../lib/get_alert_panels_by_category.tsx      |   3 +-
 .../alerts/lib/get_alert_panels_by_node.tsx   |   6 +-
 .../public/alerts/lib/replace_tokens.tsx      |   1 +
 .../monitoring/public/alerts/panel.tsx        |  13 +
 .../cluster/overview/elasticsearch_panel.js   |   7 +-
 .../ccr/__snapshots__/ccr.test.js.snap        |   6 +
 .../components/elasticsearch/ccr/ccr.js       | 117 ++++---
 .../__snapshots__/ccr_shard.test.js.snap      | 154 +++++-----
 .../elasticsearch/ccr_shard/ccr_shard.js      |  16 +-
 .../elasticsearch/ccr_shard/status.js         |   9 +-
 x-pack/plugins/monitoring/public/plugin.ts    |   2 +
 .../public/views/elasticsearch/ccr/index.js   |  29 +-
 .../views/elasticsearch/ccr/shard/index.js    |  35 ++-
 .../server/alerts/alerts_factory.ts           |   4 +-
 .../monitoring/server/alerts/base_alert.ts    |  13 +-
 .../alerts/ccr_read_exceptions_alert.ts       | 289 ++++++++++++++++++
 .../server/alerts/cpu_usage_alert.test.ts     |   7 +
 .../plugins/monitoring/server/alerts/index.ts |   1 +
 .../missing_monitoring_data_alert.test.ts     |   8 +
 .../lib/alerts/fetch_ccr_read_exceptions.ts   | 131 ++++++++
 24 files changed, 825 insertions(+), 142 deletions(-)
 create mode 100644 x-pack/plugins/monitoring/public/alerts/ccr_read_exceptions_alert/index.tsx
 create mode 100644 x-pack/plugins/monitoring/server/alerts/ccr_read_exceptions_alert.ts
 create mode 100644 x-pack/plugins/monitoring/server/lib/alerts/fetch_ccr_read_exceptions.ts

diff --git a/x-pack/plugins/monitoring/common/constants.ts b/x-pack/plugins/monitoring/common/constants.ts
index cf382701ca40f6..c8b3ae0be631a7 100644
--- a/x-pack/plugins/monitoring/common/constants.ts
+++ b/x-pack/plugins/monitoring/common/constants.ts
@@ -251,6 +251,7 @@ export const ALERT_MEMORY_USAGE = `${ALERT_PREFIX}alert_jvm_memory_usage`;
 export const ALERT_MISSING_MONITORING_DATA = `${ALERT_PREFIX}alert_missing_monitoring_data`;
 export const ALERT_THREAD_POOL_SEARCH_REJECTIONS = `${ALERT_PREFIX}alert_thread_pool_search_rejections`;
 export const ALERT_THREAD_POOL_WRITE_REJECTIONS = `${ALERT_PREFIX}alert_thread_pool_write_rejections`;
+export const ALERT_CCR_READ_EXCEPTIONS = `${ALERT_PREFIX}ccr_read_exceptions`;
 
 /**
  * Legacy alerts details/label for server and public use
@@ -451,6 +452,25 @@ export const ALERT_DETAILS = {
         'Alert when the number of rejections in the write thread pool exceeds the threshold.',
     }),
   },
+  [ALERT_CCR_READ_EXCEPTIONS]: {
+    paramDetails: {
+      duration: {
+        label: i18n.translate(
+          'xpack.monitoring.alerts.ccrReadExceptions.paramDetails.duration.label',
+          {
+            defaultMessage: `In the last`,
+          }
+        ),
+        type: AlertParamType.Duration,
+      },
+    },
+    label: i18n.translate('xpack.monitoring.alerts.ccrReadExceptions.label', {
+      defaultMessage: 'CCR read exceptions',
+    }),
+    description: i18n.translate('xpack.monitoring.alerts.ccrReadExceptions.description', {
+      defaultMessage: 'Alert if any CCR read exceptions have been detected.',
+    }),
+  },
 };
 
 export const ALERT_PANEL_MENU = [
@@ -485,6 +505,7 @@ export const ALERT_PANEL_MENU = [
       { alertName: ALERT_LICENSE_EXPIRATION },
       { alertName: ALERT_THREAD_POOL_SEARCH_REJECTIONS },
       { alertName: ALERT_THREAD_POOL_WRITE_REJECTIONS },
+      { alertName: ALERT_CCR_READ_EXCEPTIONS },
     ],
   },
 ];
@@ -505,6 +526,7 @@ export const ALERTS = [
   ALERT_MISSING_MONITORING_DATA,
   ALERT_THREAD_POOL_SEARCH_REJECTIONS,
   ALERT_THREAD_POOL_WRITE_REJECTIONS,
+  ALERT_CCR_READ_EXCEPTIONS,
 ];
 
 /**
diff --git a/x-pack/plugins/monitoring/common/types/alerts.ts b/x-pack/plugins/monitoring/common/types/alerts.ts
index 0f10e0e48962b7..93807f9df12b08 100644
--- a/x-pack/plugins/monitoring/common/types/alerts.ts
+++ b/x-pack/plugins/monitoring/common/types/alerts.ts
@@ -22,6 +22,7 @@ export interface CommonAlertState {
 
 export interface CommonAlertFilter {
   nodeUuid?: string;
+  shardId?: string;
 }
 
 export interface CommonAlertParamDetail {
@@ -103,6 +104,7 @@ export interface AlertUiState {
 
 export interface AlertMessage {
   text: string; // Do this. #link this is a link #link
+  code?: string;
   nextSteps?: AlertMessage[];
   tokens?: AlertMessageToken[];
 }
@@ -165,6 +167,20 @@ export interface AlertMemoryUsageNodeStats extends AlertNodeStats {
 export interface AlertMissingData extends AlertNodeStats {
   gapDuration: number;
 }
+export interface CCRReadExceptionsStats {
+  remoteCluster: string;
+  followerIndex: string;
+  shardId: number;
+  leaderIndex: string;
+  lastReadException: { type: string; reason: string };
+  clusterUuid: string;
+  ccs: string;
+}
+
+export interface CCRReadExceptionsUIMeta extends CCRReadExceptionsStats {
+  instanceId: string;
+  itemLabel: string;
+}
 
 export interface AlertData {
   nodeName?: string;
diff --git a/x-pack/plugins/monitoring/public/alerts/callout.tsx b/x-pack/plugins/monitoring/public/alerts/callout.tsx
index d3feb148cf9869..af2d8c3fef60ae 100644
--- a/x-pack/plugins/monitoring/public/alerts/callout.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/callout.tsx
@@ -15,6 +15,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
+  EuiCodeBlock,
 } from '@elastic/eui';
 import { replaceTokens } from './lib/replace_tokens';
 import { AlertMessage } from '../../common/types/alerts';
@@ -66,12 +67,24 @@ export const AlertsCallout: React.FC<Props> = (props: Props) => {
       </div>
     );
 
+    const { code } = status.state.state.ui.message;
     const accordion = (
       <EuiAccordion
         id={`monitoringAlertCallout_${index}`}
         buttonContent={buttonContent}
         paddingSize="s"
       >
+        {code?.length ? (
+          <EuiCodeBlock
+            fontSize="s"
+            paddingSize="s"
+            language="json"
+            isCopyable={true}
+            overflowHeight={300}
+          >
+            {code}
+          </EuiCodeBlock>
+        ) : null}
         <EuiListGroup
           flush={true}
           bordered={true}
@@ -84,11 +97,19 @@ export const AlertsCallout: React.FC<Props> = (props: Props) => {
             paddingLeft: `0.5rem`,
           }}
         >
-          {(status.state.state.ui.message.nextSteps || []).map((step: AlertMessage) => {
-            return <EuiListGroupItem onClick={() => {}} label={replaceTokens(step)} />;
-          })}
+          {(status.state.state.ui.message.nextSteps || []).map(
+            (step: AlertMessage, stepIndex: number) => {
+              return (
+                <EuiListGroupItem
+                  onClick={() => {}}
+                  label={replaceTokens(step)}
+                  key={index + stepIndex}
+                />
+              );
+            }
+          )}
           <EuiListGroupItem
-            label={<AlertConfiguration alert={status.alert.rawAlert} compressed />}
+            label={<AlertConfiguration alert={status.alert.rawAlert} key={index} compressed />}
           />
         </EuiListGroup>
       </EuiAccordion>
diff --git a/x-pack/plugins/monitoring/public/alerts/ccr_read_exceptions_alert/index.tsx b/x-pack/plugins/monitoring/public/alerts/ccr_read_exceptions_alert/index.tsx
new file mode 100644
index 00000000000000..2dafadf2726082
--- /dev/null
+++ b/x-pack/plugins/monitoring/public/alerts/ccr_read_exceptions_alert/index.tsx
@@ -0,0 +1,49 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { Expression, Props } from '../components/duration/expression';
+import { AlertTypeModel, ValidationResult } from '../../../../triggers_actions_ui/public';
+import { ALERT_CCR_READ_EXCEPTIONS, ALERT_DETAILS } from '../../../common/constants';
+
+interface ValidateOptions {
+  duration: string;
+}
+
+const validate = (inputValues: ValidateOptions): ValidationResult => {
+  const validationResult = { errors: {} };
+  const errors: { [key: string]: string[] } = {
+    duration: [],
+  };
+  if (!inputValues.duration) {
+    errors.duration.push(
+      i18n.translate('xpack.monitoring.alerts.validation.duration', {
+        defaultMessage: 'A valid duration is required.',
+      })
+    );
+  }
+  validationResult.errors = errors;
+  return validationResult;
+};
+
+export function createCCRReadExceptionsAlertType(): AlertTypeModel {
+  return {
+    id: ALERT_CCR_READ_EXCEPTIONS,
+    name: ALERT_DETAILS[ALERT_CCR_READ_EXCEPTIONS].label,
+    description: ALERT_DETAILS[ALERT_CCR_READ_EXCEPTIONS].description,
+    iconClass: 'bell',
+    documentationUrl(docLinks) {
+      return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/kibana/${docLinks.DOC_LINK_VERSION}/kibana-alerts.html`;
+    },
+    alertParamsExpression: (props: Props) => (
+      <Expression {...props} paramDetails={ALERT_DETAILS[ALERT_CCR_READ_EXCEPTIONS].paramDetails} />
+    ),
+    validate,
+    defaultActionMessage: '{{context.internalFullMessage}}',
+    requiresAppContext: true,
+  };
+}
diff --git a/x-pack/plugins/monitoring/public/alerts/lib/get_alert_panels_by_category.tsx b/x-pack/plugins/monitoring/public/alerts/lib/get_alert_panels_by_category.tsx
index 82a1a1f841a22a..bbea32e4d2d04a 100644
--- a/x-pack/plugins/monitoring/public/alerts/lib/get_alert_panels_by_category.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/lib/get_alert_panels_by_category.tsx
@@ -171,6 +171,7 @@ export function getAlertPanelsByCategory(
       for (const { alert, states } of category.alerts) {
         const items = [];
         for (const alertState of states.filter(({ state }) => stateFilter(state))) {
+          const { nodeName, itemLabel } = alertState.state;
           items.push({
             name: (
               <Fragment>
@@ -188,7 +189,7 @@ export function getAlertPanelsByCategory(
                     )}
                   </EuiText>
                 </EuiToolTip>
-                <EuiText size="s">{alertState.state.nodeName}</EuiText>
+                <EuiText size="s">{nodeName || itemLabel}</EuiText>
               </Fragment>
             ),
             panel: ++tertiaryPanelIndex,
diff --git a/x-pack/plugins/monitoring/public/alerts/lib/get_alert_panels_by_node.tsx b/x-pack/plugins/monitoring/public/alerts/lib/get_alert_panels_by_node.tsx
index c48706f4edcb97..735b9c3637cdd9 100644
--- a/x-pack/plugins/monitoring/public/alerts/lib/get_alert_panels_by_node.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/lib/get_alert_panels_by_node.tsx
@@ -69,10 +69,11 @@ export function getAlertPanelsByNode(
           const states = (statesByNodes[nodeUuid] as CommonAlertState[]).filter(({ state }) =>
             stateFilter(state)
           );
+          const { nodeName, itemLabel } = states[0].state;
           return {
             name: (
               <EuiText>
-                {states[0].state.nodeName} ({states.length})
+                {nodeName || itemLabel} ({states.length})
               </EuiText>
             ),
             panel: index + 1,
@@ -86,7 +87,8 @@ export function getAlertPanelsByNode(
       let title = '';
       for (const { alert, states } of alertsForNode) {
         for (const alertState of states) {
-          title = alertState.state.nodeName;
+          const { nodeName, itemLabel } = alertState.state;
+          title = nodeName || itemLabel;
           panelItems.push({
             name: (
               <Fragment>
diff --git a/x-pack/plugins/monitoring/public/alerts/lib/replace_tokens.tsx b/x-pack/plugins/monitoring/public/alerts/lib/replace_tokens.tsx
index b8ac69cbae68a4..0ddda96a1100d8 100644
--- a/x-pack/plugins/monitoring/public/alerts/lib/replace_tokens.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/lib/replace_tokens.tsx
@@ -77,6 +77,7 @@ export function replaceTokens(alertMessage: AlertMessage): JSX.Element | string
     }
 
     const url = linkToken.partialUrl
+      .replace('{basePath}', Legacy.shims.getBasePath())
       .replace('{elasticWebsiteUrl}', Legacy.shims.docLinks.ELASTIC_WEBSITE_URL)
       .replace('{docLinkVersion}', Legacy.shims.docLinks.DOC_LINK_VERSION);
     const index = text.indexOf(linkPart[0]);
diff --git a/x-pack/plugins/monitoring/public/alerts/panel.tsx b/x-pack/plugins/monitoring/public/alerts/panel.tsx
index 139010a3d24469..2d319a81dd0630 100644
--- a/x-pack/plugins/monitoring/public/alerts/panel.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/panel.tsx
@@ -10,6 +10,7 @@ import {
   EuiHorizontalRule,
   EuiListGroup,
   EuiListGroupItem,
+  EuiCodeBlock,
 } from '@elastic/eui';
 
 import { CommonAlert, CommonAlertState, AlertMessage } from '../../common/types/alerts';
@@ -47,12 +48,24 @@ export const AlertPanel: React.FC<Props> = (props: Props) => {
       </EuiListGroup>
     ) : null;
 
+  const { code } = alertState.state.ui.message;
   return (
     <Fragment>
       <div style={{ padding: '1rem' }}>
         <EuiTitle size="xs">
           <h5>{replaceTokens(alertState.state.ui.message)}</h5>
         </EuiTitle>
+        {code?.length ? (
+          <EuiCodeBlock
+            fontSize="s"
+            paddingSize="s"
+            language="json"
+            isCopyable={true}
+            overflowHeight={150}
+          >
+            {code}
+          </EuiCodeBlock>
+        ) : null}
         {nextStepsUi ? <EuiSpacer size="s" /> : null}
         {nextStepsUi}
       </div>
diff --git a/x-pack/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js b/x-pack/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js
index ded309ce64e2ec..8849fb05fcf3c7 100644
--- a/x-pack/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js
+++ b/x-pack/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js
@@ -47,6 +47,7 @@ import {
   ALERT_NODES_CHANGED,
   ALERT_ELASTICSEARCH_VERSION_MISMATCH,
   ALERT_MISSING_MONITORING_DATA,
+  ALERT_CCR_READ_EXCEPTIONS,
 } from '../../../../common/constants';
 import { AlertsBadge } from '../../../alerts/badge';
 import { shouldShowAlertBadge } from '../../../alerts/lib/should_show_alert_badge';
@@ -159,7 +160,11 @@ function renderLog(log) {
   );
 }
 
-const OVERVIEW_PANEL_ALERTS = [ALERT_CLUSTER_HEALTH, ALERT_LICENSE_EXPIRATION];
+const OVERVIEW_PANEL_ALERTS = [
+  ALERT_CLUSTER_HEALTH,
+  ALERT_LICENSE_EXPIRATION,
+  ALERT_CCR_READ_EXCEPTIONS,
+];
 
 const NODES_PANEL_ALERTS = [
   ALERT_CPU_USAGE,
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr/__snapshots__/ccr.test.js.snap b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr/__snapshots__/ccr.test.js.snap
index d54612b6f4f29a..794982a0b6193d 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr/__snapshots__/ccr.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr/__snapshots__/ccr.test.js.snap
@@ -29,6 +29,12 @@ exports[`Ccr that it renders normally 1`] = `
                 "name": "Follows",
                 "sortable": true,
               },
+              Object {
+                "field": "alerts",
+                "name": "Alerts",
+                "render": [Function],
+                "sortable": true,
+              },
               Object {
                 "field": "syncLagOps",
                 "name": "Sync Lag (ops)",
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr/ccr.js b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr/ccr.js
index ab26b6a9cc0bb6..8b7c386a4dcc6c 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr/ccr.js
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr/ccr.js
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment, Component } from 'react';
+import React, { Fragment, useState } from 'react';
 import {
   EuiInMemoryTable,
   EuiLink,
@@ -20,27 +20,20 @@ import {
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
+import { AlertsStatus } from '../../../alerts/status';
 import './ccr.scss';
 
 function toSeconds(ms) {
   return Math.floor(ms / 1000) + 's';
 }
 
-export class Ccr extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      itemIdToExpandedRowMap: {},
-    };
-  }
-
-  toggleShards(index, shards) {
-    const itemIdToExpandedRowMap = {
-      ...this.state.itemIdToExpandedRowMap,
-    };
+export const Ccr = (props) => {
+  const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState({});
+  const toggleShards = (index, shards) => {
+    const itemIdToExpandedRowMapValues = { ...itemIdToExpandedRowMap };
 
-    if (itemIdToExpandedRowMap[index]) {
-      delete itemIdToExpandedRowMap[index];
+    if (itemIdToExpandedRowMapValues[index]) {
+      delete itemIdToExpandedRowMapValues[index];
     } else {
       let pagination = {
         initialPageSize: 5,
@@ -51,7 +44,7 @@ export class Ccr extends Component {
         pagination = false;
       }
 
-      itemIdToExpandedRowMap[index] = (
+      itemIdToExpandedRowMapValues[index] = (
         <EuiInMemoryTable
           items={shards}
           columns={[
@@ -76,6 +69,25 @@ export class Ccr extends Component {
             {
               render: () => null,
             },
+            {
+              field: 'alerts',
+              sortable: true,
+              name: i18n.translate(
+                'xpack.monitoring.elasticsearch.ccr.shardsTable.alertsColumnTitle',
+                {
+                  defaultMessage: 'Alerts',
+                }
+              ),
+              render: (_field, item) => {
+                return (
+                  <AlertsStatus
+                    showBadge={true}
+                    alerts={props.alerts}
+                    stateFilter={(state) => state.meta.shardId === item.shardId}
+                  />
+                );
+              },
+            },
             {
               field: 'syncLagOps',
               name: i18n.translate(
@@ -157,11 +169,11 @@ export class Ccr extends Component {
         />
       );
     }
-    this.setState({ itemIdToExpandedRowMap });
-  }
+    setItemIdToExpandedRowMap(itemIdToExpandedRowMapValues);
+  };
 
-  renderTable() {
-    const { data } = this.props;
+  const renderTable = () => {
+    const { data, alerts } = props;
     const items = data;
 
     let pagination = {
@@ -194,9 +206,9 @@ export class Ccr extends Component {
             ),
             sortable: true,
             render: (index, { shards }) => {
-              const expanded = !!this.state.itemIdToExpandedRowMap[index];
+              const expanded = !!itemIdToExpandedRowMap[index];
               return (
-                <EuiLink onClick={() => this.toggleShards(index, shards)}>
+                <EuiLink onClick={() => toggleShards(index, shards)}>
                   {index}
                   &nbsp;
                   {expanded ? <EuiIcon type="arrowUp" /> : <EuiIcon type="arrowDown" />}
@@ -214,6 +226,25 @@ export class Ccr extends Component {
               }
             ),
           },
+          {
+            field: 'alerts',
+            sortable: true,
+            name: i18n.translate(
+              'xpack.monitoring.elasticsearch.ccr.ccrListingTable.alertsColumnTitle',
+              {
+                defaultMessage: 'Alerts',
+              }
+            ),
+            render: (_field, item) => {
+              return (
+                <AlertsStatus
+                  showBadge={true}
+                  alerts={alerts}
+                  stateFilter={(state) => state.meta.followerIndex === item.index}
+                />
+              );
+            },
+          },
           {
             field: 'syncLagOps',
             sortable: true,
@@ -264,28 +295,26 @@ export class Ccr extends Component {
         }}
         sorting={sorting}
         itemId="id"
-        itemIdToExpandedRowMap={this.state.itemIdToExpandedRowMap}
+        itemIdToExpandedRowMap={itemIdToExpandedRowMap}
       />
     );
-  }
+  };
 
-  render() {
-    return (
-      <EuiPage>
-        <EuiPageBody>
-          <EuiScreenReaderOnly>
-            <h1>
-              <FormattedMessage
-                id="xpack.monitoring.elasticsearch.ccr.heading"
-                defaultMessage="CCR"
-              />
-            </h1>
-          </EuiScreenReaderOnly>
-          <EuiPageContent>
-            <EuiPageContentBody>{this.renderTable()}</EuiPageContentBody>
-          </EuiPageContent>
-        </EuiPageBody>
-      </EuiPage>
-    );
-  }
-}
+  return (
+    <EuiPage>
+      <EuiPageBody>
+        <EuiScreenReaderOnly>
+          <h1>
+            <FormattedMessage
+              id="xpack.monitoring.elasticsearch.ccr.heading"
+              defaultMessage="CCR"
+            />
+          </h1>
+        </EuiScreenReaderOnly>
+        <EuiPageContent>
+          <EuiPageContentBody>{renderTable()}</EuiPageContentBody>
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
+};
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap
index e35d2ba6108f52..81398c1d8e8362 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap
@@ -2,50 +2,46 @@
 
 exports[`CcrShard that is renders an exception properly 1`] = `
 <EuiPanel>
-  <EuiTitle
-    color="danger"
-    size="s"
-  >
-    <h3>
-      <EuiTextColor
-        color="danger"
-      >
-        <FormattedMessage
-          defaultMessage="Errors"
-          id="xpack.monitoring.elasticsearch.ccrShard.errorsTableTitle"
-          values={Object {}}
-        />
-      </EuiTextColor>
-    </h3>
-  </EuiTitle>
-  <EuiSpacer
-    size="s"
-  />
-  <EuiBasicTable
-    columns={
-      Array [
-        Object {
-          "field": "exception.type",
-          "name": "Type",
-        },
-        Object {
-          "field": "exception.reason",
-          "name": "Reason",
-          "width": "75%",
-        },
-      ]
+  <Status
+    formattedLeader="leader on remote"
+    oldestStat={
+      Object {
+        "failed_read_requests": 0,
+        "operations_written": 2976,
+      }
     }
-    items={
-      Array [
-        Object {
-          "reason": "not sure but something happened",
-          "type": "something_is_wrong",
-        },
-      ]
+    stat={
+      Object {
+        "failed_read_requests": 0,
+        "follower_global_checkpoint": 3049,
+        "follower_index": "follower",
+        "follower_max_seq_no": 3049,
+        "last_requested_seq_no": 3049,
+        "leader_global_checkpoint": 3049,
+        "leader_index": "leader",
+        "leader_max_seq_no": 3049,
+        "mapping_version": 2,
+        "number_of_concurrent_reads": 1,
+        "number_of_concurrent_writes": 0,
+        "number_of_failed_bulk_operations": 0,
+        "number_of_queued_writes": 0,
+        "number_of_successful_bulk_operations": 3050,
+        "number_of_successful_fetches": 3050,
+        "operations_received": 3050,
+        "operations_written": 3050,
+        "read_exceptions": Array [
+          Object {
+            "reason": "not sure but something happened",
+            "type": "something_is_wrong",
+          },
+        ],
+        "shard_id": 0,
+        "time_since_last_read_millis": 9402,
+        "total_fetch_time_millis": 44128980,
+        "total_index_time_millis": 41827,
+        "total_transferred_bytes": 234156,
+      }
     }
-    noItemsMessage="No items found"
-    responsive={true}
-    tableLayout="fixed"
   />
 </EuiPanel>
 `;
@@ -59,44 +55,50 @@ exports[`CcrShard that it renders normally 1`] = `
   }
 >
   <EuiPageBody>
-    <Status
-      formattedLeader="leader on remote"
-      oldestStat={
-        Object {
-          "failed_read_requests": 0,
-          "operations_written": 2976,
+    <EuiPanel>
+      <Status
+        formattedLeader="leader on remote"
+        oldestStat={
+          Object {
+            "failed_read_requests": 0,
+            "operations_written": 2976,
+          }
         }
-      }
-      stat={
-        Object {
-          "failed_read_requests": 0,
-          "follower_global_checkpoint": 3049,
-          "follower_index": "follower",
-          "follower_max_seq_no": 3049,
-          "last_requested_seq_no": 3049,
-          "leader_global_checkpoint": 3049,
-          "leader_index": "leader",
-          "leader_max_seq_no": 3049,
-          "mapping_version": 2,
-          "number_of_concurrent_reads": 1,
-          "number_of_concurrent_writes": 0,
-          "number_of_failed_bulk_operations": 0,
-          "number_of_queued_writes": 0,
-          "number_of_successful_bulk_operations": 3050,
-          "number_of_successful_fetches": 3050,
-          "operations_received": 3050,
-          "operations_written": 3050,
-          "read_exceptions": Array [],
-          "shard_id": 0,
-          "time_since_last_read_millis": 9402,
-          "total_fetch_time_millis": 44128980,
-          "total_index_time_millis": 41827,
-          "total_transferred_bytes": 234156,
+        stat={
+          Object {
+            "failed_read_requests": 0,
+            "follower_global_checkpoint": 3049,
+            "follower_index": "follower",
+            "follower_max_seq_no": 3049,
+            "last_requested_seq_no": 3049,
+            "leader_global_checkpoint": 3049,
+            "leader_index": "leader",
+            "leader_max_seq_no": 3049,
+            "mapping_version": 2,
+            "number_of_concurrent_reads": 1,
+            "number_of_concurrent_writes": 0,
+            "number_of_failed_bulk_operations": 0,
+            "number_of_queued_writes": 0,
+            "number_of_successful_bulk_operations": 3050,
+            "number_of_successful_fetches": 3050,
+            "operations_received": 3050,
+            "operations_written": 3050,
+            "read_exceptions": Array [],
+            "shard_id": 0,
+            "time_since_last_read_millis": 9402,
+            "total_fetch_time_millis": 44128980,
+            "total_index_time_millis": 41827,
+            "total_transferred_bytes": 234156,
+          }
         }
-      }
+      />
+    </EuiPanel>
+    <EuiSpacer
+      size="m"
     />
+    <AlertsCallout />
     <EuiSpacer
-      size="s"
+      size="m"
     />
     <EuiFlexGroup
       wrap={true}
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/ccr_shard.js b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/ccr_shard.js
index a8aa931bad254c..a6ac2d8510a3a5 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/ccr_shard.js
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/ccr_shard.js
@@ -25,6 +25,7 @@ import { Status } from './status';
 import { formatDateTimeLocal } from '../../../../common/formatting';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import { AlertsCallout } from '../../../alerts/callout';
 
 export class CcrShard extends PureComponent {
   renderCharts() {
@@ -123,13 +124,22 @@ export class CcrShard extends PureComponent {
   }
 
   render() {
-    const { stat, oldestStat, formattedLeader } = this.props;
+    const { stat, oldestStat, formattedLeader, alerts } = this.props;
 
     return (
       <EuiPage style={{ backgroundColor: 'white' }}>
         <EuiPageBody>
-          <Status stat={stat} formattedLeader={formattedLeader} oldestStat={oldestStat} />
-          <EuiSpacer size="s" />
+          <EuiPanel>
+            <Status
+              stat={stat}
+              formattedLeader={formattedLeader}
+              oldestStat={oldestStat}
+              alerts={alerts}
+            />
+          </EuiPanel>
+          <EuiSpacer size="m" />
+          <AlertsCallout alerts={alerts} />
+          <EuiSpacer size="m" />
           {this.renderErrors()}
           <EuiFlexGroup wrap>{this.renderCharts()}</EuiFlexGroup>
           <EuiHorizontalRule />
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/status.js b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/status.js
index 52de0659ed527b..657301d6e1cb3e 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/status.js
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/status.js
@@ -8,8 +8,9 @@ import React from 'react';
 import { SummaryStatus } from '../../summary_status';
 import { formatMetric } from '../../../lib/format_number';
 import { i18n } from '@kbn/i18n';
+import { AlertsStatus } from '../../../alerts/status';
 
-export function Status({ stat, formattedLeader, oldestStat }) {
+export function Status({ stat, formattedLeader, oldestStat, alerts = {} }) {
   const {
     follower_index: followerIndex,
     shard_id: shardId,
@@ -23,6 +24,12 @@ export function Status({ stat, formattedLeader, oldestStat }) {
   } = oldestStat;
 
   const metrics = [
+    {
+      label: i18n.translate('xpack.monitoring.elasticsearch.ccrShard.status.alerts', {
+        defaultMessage: 'Alerts',
+      }),
+      value: <AlertsStatus alerts={alerts} showOnlyCount={true} />,
+    },
     {
       label: i18n.translate('xpack.monitoring.elasticsearch.ccrShard.status.followerIndexLabel', {
         defaultMessage: 'Follower Index',
diff --git a/x-pack/plugins/monitoring/public/plugin.ts b/x-pack/plugins/monitoring/public/plugin.ts
index 0439b47569e720..a0de3a7663a129 100644
--- a/x-pack/plugins/monitoring/public/plugin.ts
+++ b/x-pack/plugins/monitoring/public/plugin.ts
@@ -156,6 +156,7 @@ export class MonitoringPlugin
       './alerts/thread_pool_rejections_alert'
     );
     const { createMemoryUsageAlertType } = await import('./alerts/memory_usage_alert');
+    const { createCCRReadExceptionsAlertType } = await import('./alerts/ccr_read_exceptions_alert');
 
     const {
       triggersActionsUi: { alertTypeRegistry },
@@ -176,6 +177,7 @@ export class MonitoringPlugin
         ALERT_DETAILS[ALERT_THREAD_POOL_WRITE_REJECTIONS]
       )
     );
+    alertTypeRegistry.register(createCCRReadExceptionsAlertType());
     const legacyAlertTypes = createLegacyAlertTypes();
     for (const legacyAlertType of legacyAlertTypes) {
       alertTypeRegistry.register(legacyAlertType);
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/index.js
index 65693407857363..9e26d453d76a35 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/index.js
@@ -12,7 +12,13 @@ import { routeInitProvider } from '../../../lib/route_init';
 import template from './index.html';
 import { Ccr } from '../../../components/elasticsearch/ccr';
 import { MonitoringViewBaseController } from '../../base_controller';
-import { CODE_PATH_ELASTICSEARCH } from '../../../../common/constants';
+import {
+  CODE_PATH_ELASTICSEARCH,
+  ALERT_CCR_READ_EXCEPTIONS,
+  ELASTICSEARCH_SYSTEM_ID,
+} from '../../../../common/constants';
+import { SetupModeRenderer } from '../../../components/renderers';
+import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 
 uiRoutes.when('/elasticsearch/ccr', {
   template,
@@ -37,6 +43,12 @@ uiRoutes.when('/elasticsearch/ccr', {
         getPageData,
         $scope,
         $injector,
+        alerts: {
+          shouldFetch: true,
+          options: {
+            alertTypeIds: [ALERT_CCR_READ_EXCEPTIONS],
+          },
+        },
       });
 
       $scope.$watch(
@@ -45,7 +57,20 @@ uiRoutes.when('/elasticsearch/ccr', {
           if (!data) {
             return;
           }
-          this.renderReact(<Ccr data={data.data} />);
+          this.renderReact(
+            <SetupModeRenderer
+              scope={$scope}
+              injector={$injector}
+              productName={ELASTICSEARCH_SYSTEM_ID}
+              render={({ flyoutComponent, bottomBarComponent }) => (
+                <SetupModeContext.Provider value={{ setupModeSupported: true }}>
+                  {flyoutComponent}
+                  <Ccr data={data.data} alerts={this.alerts} />
+                  {bottomBarComponent}
+                </SetupModeContext.Provider>
+              )}
+            />
+          );
         }
       );
     }
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/index.js
index 33a2d27f398565..6c1c4218568e35 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/index.js
@@ -13,7 +13,13 @@ import { routeInitProvider } from '../../../../lib/route_init';
 import template from './index.html';
 import { MonitoringViewBaseController } from '../../../base_controller';
 import { CcrShard } from '../../../../components/elasticsearch/ccr_shard';
-import { CODE_PATH_ELASTICSEARCH } from '../../../../../common/constants';
+import {
+  CODE_PATH_ELASTICSEARCH,
+  ALERT_CCR_READ_EXCEPTIONS,
+  ELASTICSEARCH_SYSTEM_ID,
+} from '../../../../../common/constants';
+import { SetupModeRenderer } from '../../../../components/renderers';
+import { SetupModeContext } from '../../../../components/setup_mode/setup_mode_context';
 
 uiRoutes.when('/elasticsearch/ccr/:index/shard/:shardId', {
   template,
@@ -27,6 +33,7 @@ uiRoutes.when('/elasticsearch/ccr/:index/shard/:shardId', {
   controllerAs: 'elasticsearchCcr',
   controller: class ElasticsearchCcrController extends MonitoringViewBaseController {
     constructor($injector, $scope, pageData) {
+      const $route = $injector.get('$route');
       super({
         title: i18n.translate('xpack.monitoring.elasticsearch.ccr.shard.routeTitle', {
           defaultMessage: 'Elasticsearch - Ccr - Shard',
@@ -35,6 +42,17 @@ uiRoutes.when('/elasticsearch/ccr/:index/shard/:shardId', {
         getPageData,
         $scope,
         $injector,
+        alerts: {
+          shouldFetch: true,
+          options: {
+            alertTypeIds: [ALERT_CCR_READ_EXCEPTIONS],
+            filters: [
+              {
+                shardId: $route.current.pathParams.shardId,
+              },
+            ],
+          },
+        },
       });
 
       $scope.instance = i18n.translate('xpack.monitoring.elasticsearch.ccr.shard.instanceTitle', {
@@ -62,7 +80,20 @@ uiRoutes.when('/elasticsearch/ccr/:index/shard/:shardId', {
             })
           );
 
-          this.renderReact(<CcrShard {...data} />);
+          this.renderReact(
+            <SetupModeRenderer
+              scope={$scope}
+              injector={$injector}
+              productName={ELASTICSEARCH_SYSTEM_ID}
+              render={({ flyoutComponent, bottomBarComponent }) => (
+                <SetupModeContext.Provider value={{ setupModeSupported: true }}>
+                  {flyoutComponent}
+                  <CcrShard {...data} alerts={this.alerts} />
+                  {bottomBarComponent}
+                </SetupModeContext.Provider>
+              )}
+            />
+          );
         }
       );
     }
diff --git a/x-pack/plugins/monitoring/server/alerts/alerts_factory.ts b/x-pack/plugins/monitoring/server/alerts/alerts_factory.ts
index b43a56562a2aab..64b7148d87d9e4 100644
--- a/x-pack/plugins/monitoring/server/alerts/alerts_factory.ts
+++ b/x-pack/plugins/monitoring/server/alerts/alerts_factory.ts
@@ -5,6 +5,7 @@
  */
 
 import {
+  CCRReadExceptionsAlert,
   CpuUsageAlert,
   MissingMonitoringDataAlert,
   DiskUsageAlert,
@@ -32,6 +33,7 @@ import {
   ALERT_LOGSTASH_VERSION_MISMATCH,
   ALERT_KIBANA_VERSION_MISMATCH,
   ALERT_ELASTICSEARCH_VERSION_MISMATCH,
+  ALERT_CCR_READ_EXCEPTIONS,
 } from '../../common/constants';
 import { AlertsClient } from '../../../alerts/server';
 import { Alert } from '../../../alerts/common';
@@ -49,6 +51,7 @@ const BY_TYPE = {
   [ALERT_LOGSTASH_VERSION_MISMATCH]: LogstashVersionMismatchAlert,
   [ALERT_KIBANA_VERSION_MISMATCH]: KibanaVersionMismatchAlert,
   [ALERT_ELASTICSEARCH_VERSION_MISMATCH]: ElasticsearchVersionMismatchAlert,
+  [ALERT_CCR_READ_EXCEPTIONS]: CCRReadExceptionsAlert,
 };
 
 export class AlertsFactory {
@@ -68,7 +71,6 @@ export class AlertsFactory {
 
     if (!alertClientAlerts.total || !alertClientAlerts.data?.length) {
       return;
-      // return new alertCls() as BaseAlert;
     }
 
     const [rawAlert] = alertClientAlerts.data as [Alert];
diff --git a/x-pack/plugins/monitoring/server/alerts/base_alert.ts b/x-pack/plugins/monitoring/server/alerts/base_alert.ts
index ebff72a255777f..a3bcc310b80847 100644
--- a/x-pack/plugins/monitoring/server/alerts/base_alert.ts
+++ b/x-pack/plugins/monitoring/server/alerts/base_alert.ts
@@ -345,7 +345,7 @@ export class BaseAlert {
 
       const firingNodeUuids = nodes
         .filter((node) => node.shouldFire)
-        .map((node) => node.meta.nodeId)
+        .map((node) => node.meta.nodeId || node.meta.instanceId)
         .join(',');
       const instanceId = `${this.alertOptions.id}:${cluster.clusterUuid}:${firingNodeUuids}`;
       const instance = services.alertInstanceFactory(instanceId);
@@ -355,13 +355,16 @@ export class BaseAlert {
         if (!node.shouldFire) {
           continue;
         }
-        const stat = node.meta as AlertNodeState;
+        const { meta } = node;
         const nodeState = this.getDefaultAlertState(cluster, node) as AlertNodeState;
         if (key) {
-          nodeState[key] = stat[key];
+          nodeState[key] = meta[key];
         }
-        nodeState.nodeId = stat.nodeId || node.nodeId!;
-        nodeState.nodeName = stat.nodeName || node.nodeName || nodeState.nodeId;
+        nodeState.nodeId = meta.nodeId || node.nodeId! || meta.instanceId;
+        // TODO: make these functions more generic, so it's node/item agnostic
+        nodeState.nodeName = meta.itemLabel || meta.nodeName || node.nodeName || nodeState.nodeId;
+        nodeState.itemLabel = meta.itemLabel;
+        nodeState.meta = meta;
         nodeState.ui.triggeredMS = currentUTC;
         nodeState.ui.isFiring = true;
         nodeState.ui.severity = node.severity;
diff --git a/x-pack/plugins/monitoring/server/alerts/ccr_read_exceptions_alert.ts b/x-pack/plugins/monitoring/server/alerts/ccr_read_exceptions_alert.ts
new file mode 100644
index 00000000000000..6034f32a8c6598
--- /dev/null
+++ b/x-pack/plugins/monitoring/server/alerts/ccr_read_exceptions_alert.ts
@@ -0,0 +1,289 @@
+/*
+ * 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 { BaseAlert } from './base_alert';
+import {
+  AlertData,
+  AlertCluster,
+  AlertState,
+  AlertMessage,
+  CCRReadExceptionsUIMeta,
+  AlertMessageTimeToken,
+  AlertMessageLinkToken,
+  AlertInstanceState,
+  CommonAlertParams,
+  CommonAlertFilter,
+  CCRReadExceptionsStats,
+} from '../../common/types/alerts';
+import { AlertInstance } from '../../../alerts/server';
+import {
+  INDEX_PATTERN_ELASTICSEARCH,
+  ALERT_CCR_READ_EXCEPTIONS,
+  ALERT_DETAILS,
+} from '../../common/constants';
+import { fetchCCRReadExceptions } from '../lib/alerts/fetch_ccr_read_exceptions';
+import { getCcsIndexPattern } from '../lib/alerts/get_ccs_index_pattern';
+import { AlertMessageTokenType, AlertSeverity } from '../../common/enums';
+import { parseDuration } from '../../../alerts/common/parse_duration';
+import { SanitizedAlert, RawAlertInstance } from '../../../alerts/common';
+import { AlertingDefaults, createLink } from './alert_helpers';
+import { appendMetricbeatIndex } from '../lib/alerts/append_mb_index';
+import { Globals } from '../static_globals';
+
+export class CCRReadExceptionsAlert extends BaseAlert {
+  constructor(public rawAlert?: SanitizedAlert) {
+    super(rawAlert, {
+      id: ALERT_CCR_READ_EXCEPTIONS,
+      name: ALERT_DETAILS[ALERT_CCR_READ_EXCEPTIONS].label,
+      throttle: '6h',
+      defaultParams: {
+        duration: '1h',
+      },
+      actionVariables: [
+        {
+          name: 'remoteClusters',
+          description: i18n.translate(
+            'xpack.monitoring.alerts.ccrReadExceptions.actionVariables.remoteClusters',
+            {
+              defaultMessage: 'List of remote clusters that are experiencing CCR read exceptions.',
+            }
+          ),
+        },
+        {
+          name: 'followerIndices',
+          description: i18n.translate(
+            'xpack.monitoring.alerts.ccrReadExceptions.actionVariables.followerIndices',
+            {
+              defaultMessage: 'List of follower indices reporting CCR read exceptions.',
+            }
+          ),
+        },
+        ...Object.values(AlertingDefaults.ALERT_TYPE.context),
+      ],
+    });
+  }
+
+  protected async fetchData(
+    params: CommonAlertParams,
+    callCluster: any,
+    clusters: AlertCluster[],
+    availableCcs: string[]
+  ): Promise<AlertData[]> {
+    let esIndexPattern = appendMetricbeatIndex(Globals.app.config, INDEX_PATTERN_ELASTICSEARCH);
+    if (availableCcs) {
+      esIndexPattern = getCcsIndexPattern(esIndexPattern, availableCcs);
+    }
+    const { duration: durationString } = params;
+    const duration = parseDuration(durationString);
+    const endMs = +new Date();
+    const startMs = endMs - duration;
+    const stats = await fetchCCRReadExceptions(
+      callCluster,
+      esIndexPattern,
+      startMs,
+      endMs,
+      Globals.app.config.ui.max_bucket_size
+    );
+
+    return stats.map((stat) => {
+      const {
+        remoteCluster,
+        followerIndex,
+        shardId,
+        leaderIndex,
+        lastReadException,
+        clusterUuid,
+        ccs,
+      } = stat;
+      return {
+        shouldFire: true,
+        severity: AlertSeverity.Danger,
+        meta: {
+          remoteCluster,
+          followerIndex,
+          shardId,
+          leaderIndex,
+          lastReadException,
+          instanceId: `${remoteCluster}:${followerIndex}`,
+          itemLabel: followerIndex,
+        },
+        clusterUuid,
+        ccs,
+      };
+    });
+  }
+
+  protected getUiMessage(alertState: AlertState, item: AlertData): AlertMessage {
+    const {
+      remoteCluster,
+      followerIndex,
+      shardId,
+      lastReadException,
+    } = item.meta as CCRReadExceptionsUIMeta;
+    return {
+      text: i18n.translate('xpack.monitoring.alerts.ccrReadExceptions.ui.firingMessage', {
+        defaultMessage: `Follower index #start_link{followerIndex}#end_link is reporting CCR read exceptions on remote cluster: {remoteCluster} at #absolute`,
+        values: {
+          remoteCluster,
+          followerIndex,
+        },
+      }),
+      code: JSON.stringify(lastReadException, null, 2),
+      nextSteps: [
+        createLink(
+          i18n.translate(
+            'xpack.monitoring.alerts.ccrReadExceptions.ui.nextSteps.identifyCCRStats',
+            {
+              defaultMessage: '#start_linkIdentify CCR usage/stats#end_link',
+            }
+          ),
+          'elasticsearch/ccr',
+          AlertMessageTokenType.Link
+        ),
+        createLink(
+          i18n.translate(
+            'xpack.monitoring.alerts.ccrReadExceptions.ui.nextSteps.stackManagmentFollow',
+            {
+              defaultMessage: '#start_linkManage CCR follower indices#end_link',
+            }
+          ),
+          `{basePath}management/data/cross_cluster_replication/follower_indices`
+        ),
+        createLink(
+          i18n.translate(
+            'xpack.monitoring.alerts.ccrReadExceptions.ui.nextSteps.stackManagmentAutoFollow',
+            {
+              defaultMessage: '#start_linkCreate auto-follow patterns#end_link',
+            }
+          ),
+          `{basePath}management/data/cross_cluster_replication/auto_follow_patterns`
+        ),
+        createLink(
+          i18n.translate('xpack.monitoring.alerts.ccrReadExceptions.ui.nextSteps.followerAPIDoc', {
+            defaultMessage: '#start_linkAdd follower index API (Docs)#end_link',
+          }),
+          `{elasticWebsiteUrl}guide/en/elasticsearch/reference/{docLinkVersion}/ccr-put-follow.html`
+        ),
+        createLink(
+          i18n.translate('xpack.monitoring.alerts.ccrReadExceptions.ui.nextSteps.ccrDocs', {
+            defaultMessage: '#start_linkCross-cluster replication (Docs)#end_link',
+          }),
+          `{elasticWebsiteUrl}guide/en/elasticsearch/reference/{docLinkVersion}/xpack-ccr.html`
+        ),
+        createLink(
+          i18n.translate(
+            'xpack.monitoring.alerts.ccrReadExceptions.ui.nextSteps.biDirectionalReplication',
+            {
+              defaultMessage: '#start_linkBi-directional replication (Blog)#end_link',
+            }
+          ),
+          `{elasticWebsiteUrl}blog/bi-directional-replication-with-elasticsearch-cross-cluster-replication-ccr`
+        ),
+        createLink(
+          i18n.translate('xpack.monitoring.alerts.ccrReadExceptions.ui.nextSteps.followTheLeader', {
+            defaultMessage: '#start_linkFollow the Leader (Blog)#end_link',
+          }),
+          `{elasticWebsiteUrl}blog/follow-the-leader-an-introduction-to-cross-cluster-replication-in-elasticsearch`
+        ),
+      ],
+      tokens: [
+        {
+          startToken: '#absolute',
+          type: AlertMessageTokenType.Time,
+          isAbsolute: true,
+          isRelative: false,
+          timestamp: alertState.ui.triggeredMS,
+        } as AlertMessageTimeToken,
+        {
+          startToken: '#start_link',
+          endToken: '#end_link',
+          type: AlertMessageTokenType.Link,
+          url: `elasticsearch/ccr/${followerIndex}/shard/${shardId}`,
+        } as AlertMessageLinkToken,
+      ],
+    };
+  }
+
+  protected filterAlertInstance(alertInstance: RawAlertInstance, filters: CommonAlertFilter[]) {
+    const alertInstanceStates = alertInstance.state?.alertStates as AlertState[];
+    const alertFilter = filters?.find((filter) => filter.shardId);
+    if (!filters || !filters.length || !alertInstanceStates?.length || !alertFilter?.shardId) {
+      return alertInstance;
+    }
+    const shardIdInt = parseInt(alertFilter.shardId!, 10);
+    const alertStates = alertInstanceStates.filter(
+      ({ meta }) => (meta as CCRReadExceptionsStats).shardId === shardIdInt
+    );
+    return { state: { alertStates } };
+  }
+
+  protected executeActions(
+    instance: AlertInstance,
+    { alertStates }: AlertInstanceState,
+    item: AlertData | null,
+    cluster: AlertCluster
+  ) {
+    const remoteClustersList = alertStates
+      .map((alertState) => (alertState.meta as CCRReadExceptionsUIMeta).remoteCluster)
+      .join(', ');
+    const followerIndicesList = alertStates
+      .map((alertState) => (alertState.meta as CCRReadExceptionsUIMeta).followerIndex)
+      .join(', ');
+
+    const shortActionText = i18n.translate(
+      'xpack.monitoring.alerts.ccrReadExceptions.shortAction',
+      {
+        defaultMessage:
+          'Verify follower and leader index relationships across the affected remote clusters.',
+      }
+    );
+    const fullActionText = i18n.translate('xpack.monitoring.alerts.ccrReadExceptions.fullAction', {
+      defaultMessage: 'View CCR stats',
+    });
+
+    const ccs = alertStates.find((state) => state.ccs)?.ccs;
+    const globalStateLink = this.createGlobalStateLink(
+      'elasticsearch/ccr',
+      cluster.clusterUuid,
+      ccs
+    );
+
+    const action = `[${fullActionText}](${globalStateLink})`;
+    const internalShortMessage = i18n.translate(
+      'xpack.monitoring.alerts.ccrReadExceptions.firing.internalShortMessage',
+      {
+        defaultMessage: `CCR read exceptions alert is firing for the following remote clusters: {remoteClustersList}. {shortActionText}`,
+        values: {
+          remoteClustersList,
+          shortActionText,
+        },
+      }
+    );
+    const internalFullMessage = i18n.translate(
+      'xpack.monitoring.alerts.ccrReadExceptions.firing.internalFullMessage',
+      {
+        defaultMessage: `CCR read exceptions alert is firing for the following remote clusters: {remoteClustersList}. Current 'follower_index' indices are affected: {followerIndicesList}. {action}`,
+        values: {
+          action,
+          remoteClustersList,
+          followerIndicesList,
+        },
+      }
+    );
+
+    instance.scheduleActions('default', {
+      internalShortMessage,
+      internalFullMessage,
+      state: AlertingDefaults.ALERT_STATE.firing,
+      remoteClusters: remoteClustersList,
+      followerIndices: followerIndicesList,
+      clusterName: cluster.clusterName,
+      action,
+      actionPlain: shortActionText,
+    });
+  }
+}
diff --git a/x-pack/plugins/monitoring/server/alerts/cpu_usage_alert.test.ts b/x-pack/plugins/monitoring/server/alerts/cpu_usage_alert.test.ts
index 63195621fb9c84..4622f73b9feb0c 100644
--- a/x-pack/plugins/monitoring/server/alerts/cpu_usage_alert.test.ts
+++ b/x-pack/plugins/monitoring/server/alerts/cpu_usage_alert.test.ts
@@ -125,6 +125,13 @@ describe('CpuUsageAlert', () => {
             ccs: undefined,
             cluster: { clusterUuid, clusterName },
             cpuUsage,
+            itemLabel: undefined,
+            meta: {
+              clusterUuid,
+              cpuUsage,
+              nodeId,
+              nodeName,
+            },
             nodeId,
             nodeName,
             ui: {
diff --git a/x-pack/plugins/monitoring/server/alerts/index.ts b/x-pack/plugins/monitoring/server/alerts/index.ts
index 5fa718dfb34cda..b58476a01dc14f 100644
--- a/x-pack/plugins/monitoring/server/alerts/index.ts
+++ b/x-pack/plugins/monitoring/server/alerts/index.ts
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export { CCRReadExceptionsAlert } from './ccr_read_exceptions_alert';
 export { BaseAlert } from './base_alert';
 export { CpuUsageAlert } from './cpu_usage_alert';
 export { MissingMonitoringDataAlert } from './missing_monitoring_data_alert';
diff --git a/x-pack/plugins/monitoring/server/alerts/missing_monitoring_data_alert.test.ts b/x-pack/plugins/monitoring/server/alerts/missing_monitoring_data_alert.test.ts
index 6ba4333309f00a..65205738f82c36 100644
--- a/x-pack/plugins/monitoring/server/alerts/missing_monitoring_data_alert.test.ts
+++ b/x-pack/plugins/monitoring/server/alerts/missing_monitoring_data_alert.test.ts
@@ -131,6 +131,14 @@ describe('MissingMonitoringDataAlert', () => {
             nodeId,
             nodeName,
             gapDuration,
+            itemLabel: undefined,
+            meta: {
+              clusterUuid,
+              gapDuration,
+              limit: 86400000,
+              nodeId,
+              nodeName,
+            },
             ui: {
               isFiring: true,
               message: {
diff --git a/x-pack/plugins/monitoring/server/lib/alerts/fetch_ccr_read_exceptions.ts b/x-pack/plugins/monitoring/server/lib/alerts/fetch_ccr_read_exceptions.ts
new file mode 100644
index 00000000000000..c8933a7cd14a9c
--- /dev/null
+++ b/x-pack/plugins/monitoring/server/lib/alerts/fetch_ccr_read_exceptions.ts
@@ -0,0 +1,131 @@
+/*
+ * 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 { get } from 'lodash';
+import { CCRReadExceptionsStats } from '../../../common/types/alerts';
+
+export async function fetchCCRReadExceptions(
+  callCluster: any,
+  index: string,
+  startMs: number,
+  endMs: number,
+  size: number
+): Promise<CCRReadExceptionsStats[]> {
+  const params = {
+    index,
+    filterPath: ['aggregations.remote_clusters.buckets'],
+    body: {
+      size: 0,
+      query: {
+        bool: {
+          filter: [
+            {
+              nested: {
+                path: 'ccr_stats.read_exceptions',
+                query: {
+                  exists: {
+                    field: 'ccr_stats.read_exceptions.exception',
+                  },
+                },
+              },
+            },
+            {
+              term: {
+                type: 'ccr_stats',
+              },
+            },
+            {
+              range: {
+                timestamp: {
+                  format: 'epoch_millis',
+                  gte: startMs,
+                  lte: endMs,
+                },
+              },
+            },
+          ],
+        },
+      },
+      aggs: {
+        remote_clusters: {
+          terms: {
+            field: 'ccr_stats.remote_cluster',
+            size,
+          },
+          aggs: {
+            follower_indices: {
+              terms: {
+                field: 'ccr_stats.follower_index',
+                size,
+              },
+              aggs: {
+                hits: {
+                  top_hits: {
+                    sort: [
+                      {
+                        timestamp: {
+                          order: 'desc',
+                          unmapped_type: 'long',
+                        },
+                      },
+                    ],
+                    _source: {
+                      includes: [
+                        'cluster_uuid',
+                        'ccr_stats.read_exceptions',
+                        'ccr_stats.shard_id',
+                        'ccr_stats.leader_index',
+                      ],
+                    },
+                    size: 1,
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  };
+
+  const response = await callCluster('search', params);
+  const stats: CCRReadExceptionsStats[] = [];
+  const { buckets: remoteClusterBuckets = [] } = response.aggregations.remote_clusters;
+
+  if (!remoteClusterBuckets.length) {
+    return stats;
+  }
+
+  for (const remoteClusterBucket of remoteClusterBuckets) {
+    const followerIndicesBuckets = remoteClusterBucket.follower_indices.buckets;
+    const remoteCluster = remoteClusterBucket.key;
+
+    for (const followerIndexBucket of followerIndicesBuckets) {
+      const followerIndex = followerIndexBucket.key;
+      const {
+        _index: monitoringIndexName,
+        _source: { ccr_stats: ccrStats, cluster_uuid: clusterUuid },
+      } = get(followerIndexBucket, 'hits.hits.hits[0]');
+      const {
+        read_exceptions: readExceptions,
+        leader_index: leaderIndex,
+        shard_id: shardId,
+      } = ccrStats;
+      const { exception: lastReadException } = readExceptions[readExceptions.length - 1];
+
+      stats.push({
+        clusterUuid,
+        remoteCluster,
+        followerIndex,
+        shardId,
+        leaderIndex,
+        lastReadException,
+        ccs: monitoringIndexName.includes(':') ? monitoringIndexName.split(':')[0] : null,
+      });
+    }
+  }
+  return stats;
+}

From f7ace5e16defed0692424a22faa3b703905f3836 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yulia=20=C4=8Cech?=
 <6585477+yuliacech@users.noreply.github.com>
Date: Sat, 19 Dec 2020 01:53:09 +0100
Subject: [PATCH 41/75] [Rollup Jobs] Added autofocus to cron editor (#86324)

---
 .../public/components/cron_editor/cron_editor.tsx            | 2 ++
 .../crud_app/sections/job_create/steps/step_logistics.js     | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/src/plugins/es_ui_shared/public/components/cron_editor/cron_editor.tsx b/src/plugins/es_ui_shared/public/components/cron_editor/cron_editor.tsx
index 72e2f51c37e4c4..19af93b67aca03 100644
--- a/src/plugins/es_ui_shared/public/components/cron_editor/cron_editor.tsx
+++ b/src/plugins/es_ui_shared/public/components/cron_editor/cron_editor.tsx
@@ -67,6 +67,7 @@ interface Props {
     fieldToPreferredValueMap: FieldToValueMap;
     frequency: Frequency;
   }) => void;
+  autoFocus?: boolean;
 }
 
 type State = FieldToValueMap;
@@ -234,6 +235,7 @@ export class CronEditor extends Component<Props, State> {
           fullWidth
         >
           <EuiSelect
+            autoFocus={this.props.autoFocus}
             options={excludeBlockListedFrequencies(UNITS, frequencyBlockList)}
             value={frequency}
             onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
diff --git a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js
index 5e9c2f62ceef8e..bb217fbeed3048 100644
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js
@@ -45,8 +45,10 @@ export class StepLogistics extends Component {
     hasMatchingIndices: PropTypes.bool.isRequired,
     indexPatternAsyncErrors: PropTypes.array,
   };
+  state = { cronFocus: false };
 
   showAdvancedCron = () => {
+    this.setState({ cronFocus: true });
     const { onFieldsChange } = this.props;
 
     onFieldsChange({
@@ -55,6 +57,7 @@ export class StepLogistics extends Component {
   };
 
   hideAdvancedCron = () => {
+    this.setState({ cronFocus: true });
     const { onFieldsChange, fields } = this.props;
     const { simpleRollupCron } = fields;
 
@@ -156,6 +159,7 @@ export class StepLogistics extends Component {
             fullWidth
           >
             <EuiFieldText
+              autoFocus={this.state.cronFocus}
               value={rollupCron}
               onChange={(e) => onFieldsChange({ rollupCron: e.target.value })}
               isInvalid={Boolean(areStepErrorsVisible && errorRollupCron)}
@@ -181,6 +185,7 @@ export class StepLogistics extends Component {
     return (
       <Fragment>
         <CronEditor
+          autoFocus={this.state.cronFocus}
           fieldToPreferredValueMap={fieldToPreferredValueMap}
           cronExpression={rollupCron}
           frequency={cronFrequency}

From 5493e8eaced631287ee4b6b510fc3d9266a20df3 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Fri, 18 Dec 2020 19:53:41 -0500
Subject: [PATCH 42/75] [Maps] Use Json for mvt-tests (#86492)

---
 package.json                                  |   2 +
 .../server/mvt/__tests__/pbf/0_0_0_docs.pbf   | Bin 155 -> 0 bytes
 .../mvt/__tests__/pbf/0_0_0_grid_asgrid.pbf   | Bin 91 -> 0 bytes
 .../mvt/__tests__/pbf/0_0_0_grid_aspoint.pbf  | Bin 83 -> 0 bytes
 .../plugins/maps/server/mvt/get_tile.test.ts  | 135 +++++++++++++++---
 yarn.lock                                     |   4 +-
 6 files changed, 122 insertions(+), 19 deletions(-)
 delete mode 100644 x-pack/plugins/maps/server/mvt/__tests__/pbf/0_0_0_docs.pbf
 delete mode 100644 x-pack/plugins/maps/server/mvt/__tests__/pbf/0_0_0_grid_asgrid.pbf
 delete mode 100644 x-pack/plugins/maps/server/mvt/__tests__/pbf/0_0_0_grid_aspoint.pbf

diff --git a/package.json b/package.json
index b4b3cbe22b715d..8e99b5c693ceca 100644
--- a/package.json
+++ b/package.json
@@ -381,6 +381,7 @@
     "@mapbox/geojson-rewind": "^0.5.0",
     "@mapbox/mapbox-gl-draw": "^1.2.0",
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
+    "@mapbox/vector-tile": "1.3.1",
     "@microsoft/api-documenter": "7.7.2",
     "@microsoft/api-extractor": "7.7.0",
     "@octokit/rest": "^16.35.0",
@@ -750,6 +751,7 @@
     "ora": "^4.0.4",
     "p-limit": "^3.0.1",
     "parse-link-header": "^1.0.1",
+    "pbf": "3.2.1",
     "pirates": "^4.0.1",
     "pixelmatch": "^5.1.0",
     "pkg-up": "^2.0.0",
diff --git a/x-pack/plugins/maps/server/mvt/__tests__/pbf/0_0_0_docs.pbf b/x-pack/plugins/maps/server/mvt/__tests__/pbf/0_0_0_docs.pbf
deleted file mode 100644
index 9a9296e2ece3f94ac726f6a83f2958ba2e22074b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 155
zcmb1|!C1k>#Z#PLT9lj`pOaXbTBOmSAfzP3#=yYH$iyVUtR%)cfww_Yse%1Hdjp%m
z1GW`x?>R5<@Jq49XXd4(R!A|&XQoIA$H!+U<;BORr6!h?7Nr7(;^URrxL6AEb1Id@
lxJ2B|1A=@b0-e$;E2DHXOfw@hld_a#xuikzR@fx13;_42EcXBa

diff --git a/x-pack/plugins/maps/server/mvt/__tests__/pbf/0_0_0_grid_asgrid.pbf b/x-pack/plugins/maps/server/mvt/__tests__/pbf/0_0_0_grid_asgrid.pbf
deleted file mode 100644
index f2289865b80229bd3c96d44cfba54ef8aab2d16b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 91
zcmb1&tYG5eDb6n~N=}W>NvupQ(r8c+5*K1&U|?jFU{>PgY!GgckYaGKXJD}Bm*Pyx
uPmWK{FU>2F;!i9~kIzqw5AhFi^oe&2Q)1ERJ<FuTDY@1CuSC*}5Jvz9{1{>Y

diff --git a/x-pack/plugins/maps/server/mvt/__tests__/pbf/0_0_0_grid_aspoint.pbf b/x-pack/plugins/maps/server/mvt/__tests__/pbf/0_0_0_grid_aspoint.pbf
deleted file mode 100644
index 54b0791ccd1361b7d26b2c689235c433e7f1c378..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 83
zcmb0NtYG5eDb6n~N=}W>NvupQ(r8c+;um6JU|?jFU{qq|d?VB*A;p=JpB$f@Uz%4U
m#h+M~9-p5UAL1Y4=o9Z4ro^JrdzMLwQ*x{OUx}m{A&vm0mKV|h

diff --git a/x-pack/plugins/maps/server/mvt/get_tile.test.ts b/x-pack/plugins/maps/server/mvt/get_tile.test.ts
index 1e00fd27e3d1b7..3660039f2513c0 100644
--- a/x-pack/plugins/maps/server/mvt/get_tile.test.ts
+++ b/x-pack/plugins/maps/server/mvt/get_tile.test.ts
@@ -7,9 +7,26 @@
 import { getGridTile, getTile } from './get_tile';
 import { TILE_GRIDAGGS, TILE_SEARCHES } from './__tests__/tile_es_responses';
 import { Logger } from 'src/core/server';
-import * as path from 'path';
-import * as fs from 'fs';
-import { ES_GEO_FIELD_TYPE, RENDER_AS } from '../../common/constants';
+import { ES_GEO_FIELD_TYPE, MVT_SOURCE_LAYER_NAME, RENDER_AS } from '../../common/constants';
+
+// @ts-expect-error
+import { VectorTile, VectorTileLayer } from '@mapbox/vector-tile';
+// @ts-expect-error
+import Protobuf from 'pbf';
+
+interface ITileLayerJsonExpectation {
+  version: number;
+  name: string;
+  extent: number;
+  length: number;
+  features: Array<{
+    id: string | number | undefined;
+    type: number;
+    properties: object;
+    extent: number;
+    pointArrays: object;
+  }>;
+}
 
 describe('getTile', () => {
   const mockCallElasticsearch = jest.fn();
@@ -39,7 +56,7 @@ describe('getTile', () => {
       }
     });
 
-    const tile = await getTile({
+    const pbfTile = await getTile({
       x: 0,
       y: 0,
       z: 0,
@@ -53,7 +70,35 @@ describe('getTile', () => {
       geoFieldType: ES_GEO_FIELD_TYPE.GEO_SHAPE,
     });
 
-    compareTiles('./__tests__/pbf/0_0_0_docs.pbf', tile);
+    const jsonTile = new VectorTile(new Protobuf(pbfTile));
+    compareJsonTiles(jsonTile, {
+      version: 2,
+      name: 'source_layer',
+      extent: 4096,
+      length: 1,
+      features: [
+        {
+          id: undefined,
+          type: 3,
+          properties: {
+            __kbn__feature_id__: 'poly:G7PRMXQBgyyZ-h5iYibj:0',
+            _id: 'G7PRMXQBgyyZ-h5iYibj',
+            _index: 'poly',
+          },
+          extent: 4096,
+          pointArrays: [
+            [
+              { x: 840, y: 1600 },
+              { x: 1288, y: 1096 },
+              { x: 1672, y: 1104 },
+              { x: 2104, y: 1508 },
+              { x: 1472, y: 2316 },
+              { x: 840, y: 1600 },
+            ],
+          ],
+        },
+      ],
+    });
   });
 });
 
@@ -115,22 +160,78 @@ describe('getGridTile', () => {
   };
 
   test('0.0.0 tile (clusters)', async () => {
-    const tile = await getGridTile(defaultParams);
-    compareTiles('./__tests__/pbf/0_0_0_grid_aspoint.pbf', tile);
+    const pbfTile = await getGridTile(defaultParams);
+    const jsonTile = new VectorTile(new Protobuf(pbfTile));
+    compareJsonTiles(jsonTile, {
+      version: 2,
+      name: 'source_layer',
+      extent: 4096,
+      length: 1,
+      features: [
+        {
+          id: undefined,
+          type: 1,
+          properties: {
+            ['avg_of_TOTAL_AV']: 5398920.390458991,
+            doc_count: 42637,
+          },
+          extent: 4096,
+          pointArrays: [[{ x: 1206, y: 1539 }]],
+        },
+      ],
+    });
   });
 
   test('0.0.0 tile (grids)', async () => {
-    const tile = await getGridTile({ ...defaultParams, requestType: RENDER_AS.GRID });
-    compareTiles('./__tests__/pbf/0_0_0_grid_asgrid.pbf', tile);
+    const pbfTile = await getGridTile({ ...defaultParams, requestType: RENDER_AS.GRID });
+    const jsonTile = new VectorTile(new Protobuf(pbfTile));
+    compareJsonTiles(jsonTile, {
+      version: 2,
+      name: 'source_layer',
+      extent: 4096,
+      length: 1,
+      features: [
+        {
+          id: undefined,
+          type: 3,
+          properties: {
+            ['avg_of_TOTAL_AV']: 5398920.390458991,
+            doc_count: 42637,
+          },
+          extent: 4096,
+          pointArrays: [
+            [
+              { x: 1216, y: 1536 },
+              { x: 1216, y: 1568 },
+              { x: 1184, y: 1568 },
+              { x: 1184, y: 1536 },
+              { x: 1216, y: 1536 },
+            ],
+          ],
+        },
+      ],
+    });
   });
 });
 
-function compareTiles(expectedRelativePath: string, actualTile: Buffer | null) {
-  if (actualTile === null) {
-    throw new Error('Tile should be created');
-  }
-  const expectedPath = path.resolve(__dirname, expectedRelativePath);
-  const expectedBin = fs.readFileSync(expectedPath, 'binary');
-  const expectedTile = Buffer.from(expectedBin, 'binary');
-  expect(expectedTile.equals(actualTile)).toBe(true);
+/**
+ * Verifies JSON-representation of tile-contents
+ * @param actualTileJson
+ * @param expectedLayer
+ */
+function compareJsonTiles(actualTileJson: VectorTile, expectedLayer: ITileLayerJsonExpectation) {
+  const actualLayer: VectorTileLayer = actualTileJson.layers[MVT_SOURCE_LAYER_NAME];
+  expect(actualLayer.version).toEqual(expectedLayer.version);
+  expect(actualLayer.extent).toEqual(expectedLayer.extent);
+  expect(actualLayer.name).toEqual(expectedLayer.name);
+  expect(actualLayer.length).toEqual(expectedLayer.features.length);
+
+  expectedLayer.features.forEach((expectedFeature, index) => {
+    const actualFeature = actualLayer.feature(index);
+    expect(actualFeature.type).toEqual(expectedFeature.type);
+    expect(actualFeature.extent).toEqual(expectedFeature.extent);
+    expect(actualFeature.id).toEqual(expectedFeature.id);
+    expect(actualFeature.properties).toEqual(expectedFeature.properties);
+    expect(actualFeature.loadGeometry()).toEqual(expectedFeature.pointArrays);
+  });
 }
diff --git a/yarn.lock b/yarn.lock
index 4dbfa610be6c39..25cbe964c19e15 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2998,7 +2998,7 @@
   resolved "https://registry.yarnpkg.com/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz#15651bd553a67b8581fb398810c98ad86a34524e"
   integrity sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4=
 
-"@mapbox/vector-tile@^1.3.1":
+"@mapbox/vector-tile@1.3.1", "@mapbox/vector-tile@^1.3.1":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz#d3a74c90402d06e89ec66de49ec817ff53409666"
   integrity sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==
@@ -21931,7 +21931,7 @@ pathval@^1.1.0:
   resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.0.tgz#b942e6d4bde653005ef6b71361def8727d0645e0"
   integrity sha1-uULm1L3mUwBe9rcTYd74cn0GReA=
 
-pbf@^3.0.5, pbf@^3.2.1:
+pbf@3.2.1, pbf@^3.0.5, pbf@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/pbf/-/pbf-3.2.1.tgz#b4c1b9e72af966cd82c6531691115cc0409ffe2a"
   integrity sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==

From 8dc86c5f4b720c1eaa9cee26aaad7e6389f46df1 Mon Sep 17 00:00:00 2001
From: Brian Seeders <brian.seeders@elastic.co>
Date: Fri, 18 Dec 2020 20:00:51 -0500
Subject: [PATCH 43/75] [CI] TeamCity updates (#85843)

---
 .ci/teamcity/bootstrap.sh                     |  2 +-
 .ci/teamcity/checks/bundle_limits.sh          |  3 +-
 .ci/teamcity/checks/commit.sh                 | 13 +++++++
 .ci/teamcity/checks/commit_check_runner.sh    |  9 +++++
 .ci/teamcity/checks/jest_configs.sh           |  8 ++++
 .../checks/plugins_with_circular_deps.sh      |  8 ++++
 .ci/teamcity/oss/plugin_functional.sh         | 21 ++++++++--
 .ci/teamcity/setup_env.sh                     |  3 ++
 .teamcity/pom.xml                             | 17 +++++++++
 .teamcity/settings.kts                        |  2 +-
 .teamcity/src/Agents.kt                       | 28 ++++++++++++++
 .teamcity/src/Extensions.kt                   | 38 +------------------
 .teamcity/src/builds/Checks.kt                |  6 ++-
 .../src/builds/default/DefaultCiGroup.kt      |  4 ++
 .../src/builds/default/DefaultCiGroups.kt     |  2 +-
 .teamcity/src/builds/es_snapshots/Verify.kt   |  4 +-
 .../OssApiServerIntegration.kt}               |  8 +---
 .teamcity/src/builds/test/AllTests.kt         |  3 +-
 .teamcity/src/builds/test/QuickTests.kt       |  2 +-
 .teamcity/src/projects/Kibana.kt              | 38 +++----------------
 .teamcity/src/templates/DefaultTemplate.kt    |  7 ++--
 .teamcity/src/templates/KibanaTemplate.kt     |  9 ++---
 .teamcity/tests/projects/KibanaTest.kt        |  5 ++-
 23 files changed, 143 insertions(+), 97 deletions(-)
 create mode 100755 .ci/teamcity/checks/commit.sh
 create mode 100755 .ci/teamcity/checks/commit_check_runner.sh
 create mode 100755 .ci/teamcity/checks/jest_configs.sh
 create mode 100755 .ci/teamcity/checks/plugins_with_circular_deps.sh
 create mode 100644 .teamcity/src/Agents.kt
 rename .teamcity/src/builds/{test/ApiServerIntegration.kt => oss/OssApiServerIntegration.kt} (62%)

diff --git a/.ci/teamcity/bootstrap.sh b/.ci/teamcity/bootstrap.sh
index adb884ca064ba5..fc57811bb20771 100755
--- a/.ci/teamcity/bootstrap.sh
+++ b/.ci/teamcity/bootstrap.sh
@@ -7,7 +7,7 @@ source "$(dirname "${0}")/util.sh"
 tc_start_block "Bootstrap"
 
 tc_start_block "yarn install and kbn bootstrap"
-verify_no_git_changes yarn kbn bootstrap --prefer-offline
+verify_no_git_changes yarn kbn bootstrap
 tc_end_block "yarn install and kbn bootstrap"
 
 tc_start_block "build kbn-pm"
diff --git a/.ci/teamcity/checks/bundle_limits.sh b/.ci/teamcity/checks/bundle_limits.sh
index 3f7daef6d04731..751ec5a03ee7bc 100755
--- a/.ci/teamcity/checks/bundle_limits.sh
+++ b/.ci/teamcity/checks/bundle_limits.sh
@@ -4,4 +4,5 @@ set -euo pipefail
 
 source "$(dirname "${0}")/../util.sh"
 
-node scripts/build_kibana_platform_plugins --validate-limits
+checks-reporter-with-killswitch "Check Bundle Limits" \
+  node scripts/build_kibana_platform_plugins --validate-limits
diff --git a/.ci/teamcity/checks/commit.sh b/.ci/teamcity/checks/commit.sh
new file mode 100755
index 00000000000000..387ec0c1267858
--- /dev/null
+++ b/.ci/teamcity/checks/commit.sh
@@ -0,0 +1,13 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+source "$(dirname "${0}")/../util.sh"
+
+# Runs pre-commit hook script for the files touched in the last commit.
+# That way we can ensure a set of quick commit checks earlier as we removed
+# the pre-commit hook installation by default.
+# If files are more than 200 we will skip it and just use
+# the further ci steps that already check linting and file casing for the entire repo.
+checks-reporter-with-killswitch "Quick commit checks" \
+  "$(dirname "${0}")/commit_check_runner.sh"
diff --git a/.ci/teamcity/checks/commit_check_runner.sh b/.ci/teamcity/checks/commit_check_runner.sh
new file mode 100755
index 00000000000000..f2a4a205682154
--- /dev/null
+++ b/.ci/teamcity/checks/commit_check_runner.sh
@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+echo "!!!!!!!! ATTENTION !!!!!!!!
+That check is intended to provide earlier CI feedback after we remove the automatic install for the local pre-commit hook.
+If you want, you can still manually install the pre-commit hook locally by running 'node scripts/register_git_hook locally'
+!!!!!!!!!!!!!!!!!!!!!!!!!!!
+"
+
+node scripts/precommit_hook.js --ref HEAD~1..HEAD --max-files 200 --verbose
diff --git a/.ci/teamcity/checks/jest_configs.sh b/.ci/teamcity/checks/jest_configs.sh
new file mode 100755
index 00000000000000..6703ffffb56515
--- /dev/null
+++ b/.ci/teamcity/checks/jest_configs.sh
@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+source "$(dirname "${0}")/../util.sh"
+
+checks-reporter-with-killswitch "Check Jest Configs" \
+  node scripts/check_jest_configs
diff --git a/.ci/teamcity/checks/plugins_with_circular_deps.sh b/.ci/teamcity/checks/plugins_with_circular_deps.sh
new file mode 100755
index 00000000000000..5acc4b2ae351b0
--- /dev/null
+++ b/.ci/teamcity/checks/plugins_with_circular_deps.sh
@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+source "$(dirname "${0}")/../util.sh"
+
+checks-reporter-with-killswitch "Check Plugins With Circular Dependencies" \
+  node scripts/find_plugins_with_circular_deps
diff --git a/.ci/teamcity/oss/plugin_functional.sh b/.ci/teamcity/oss/plugin_functional.sh
index 5d1ecbcbd48ee4..3570bf01e49c49 100755
--- a/.ci/teamcity/oss/plugin_functional.sh
+++ b/.ci/teamcity/oss/plugin_functional.sh
@@ -13,6 +13,21 @@ if [[ ! -d "target" ]]; then
 fi
 cd -
 
-./test/scripts/test/plugin_functional.sh
-./test/scripts/test/example_functional.sh
-./test/scripts/test/interpreter_functional.sh
+checks-reporter-with-killswitch "Plugin Functional Tests" \
+  node scripts/functional_tests \
+    --config test/plugin_functional/config.ts \
+    --bail \
+    --debug
+
+checks-reporter-with-killswitch "Example Functional Tests" \
+  node scripts/functional_tests \
+    --config test/examples/config.js \
+    --bail \
+    --debug
+
+checks-reporter-with-killswitch "Interpreter Functional Tests" \
+  node scripts/functional_tests \
+    --config test/interpreter_functional/config.ts \
+    --bail \
+    --debug \
+    --kibana-install-dir "$KIBANA_INSTALL_DIR"
diff --git a/.ci/teamcity/setup_env.sh b/.ci/teamcity/setup_env.sh
index f662d36247a2fd..982d129dae2a6d 100755
--- a/.ci/teamcity/setup_env.sh
+++ b/.ci/teamcity/setup_env.sh
@@ -25,12 +25,14 @@ tc_set_env FORCE_COLOR 1
 tc_set_env TEST_BROWSER_HEADLESS 1
 
 tc_set_env ELASTIC_APM_ENVIRONMENT ci
+tc_set_env ELASTIC_APM_TRANSACTION_SAMPLE_RATE 0.1
 
 if [[ "${KIBANA_CI_REPORTER_KEY_BASE64-}" ]]; then
   tc_set_env KIBANA_CI_REPORTER_KEY "$(echo "$KIBANA_CI_REPORTER_KEY_BASE64" | base64 -d)"
 fi
 
 if is_pr; then
+  tc_set_env ELASTIC_APM_ACTIVE false
   tc_set_env CHECKS_REPORTER_ACTIVE true
 
   # These can be removed once we're not supporting Jenkins and TeamCity at the same time
@@ -39,6 +41,7 @@ if is_pr; then
   tc_set_env ghprbActualCommit "$GITHUB_PR_TRIGGERED_SHA"
   tc_set_env BUILD_URL "$TEAMCITY_BUILD_URL"
 else
+  tc_set_env ELASTIC_APM_ACTIVE true
   tc_set_env CHECKS_REPORTER_ACTIVE false
 fi
 
diff --git a/.teamcity/pom.xml b/.teamcity/pom.xml
index 5fa068d0a92e03..e6ec1f1c043c25 100644
--- a/.teamcity/pom.xml
+++ b/.teamcity/pom.xml
@@ -46,6 +46,14 @@
         <enabled>true</enabled>
       </snapshots>
     </repository>
+    <repository>
+      <id>teamcity</id>
+      <url>https://artifactory.elstc.co/artifactory/teamcity</url>
+      <snapshots>
+        <enabled>true</enabled>
+        <updatePolicy>always</updatePolicy>
+      </snapshots>
+    </repository>
   </repositories>
 
   <pluginRepositories>
@@ -53,6 +61,10 @@
       <id>JetBrains</id>
       <url>https://download.jetbrains.com/teamcity-repository</url>
     </pluginRepository>
+    <pluginRepository>
+      <id>teamcity</id>
+      <url>https://artifactory.elstc.co/artifactory/teamcity</url>
+    </pluginRepository>
   </pluginRepositories>
 
   <build>
@@ -124,5 +136,10 @@
       <artifactId>junit</artifactId>
       <version>4.13</version>
     </dependency>
+    <dependency>
+      <groupId>co.elastic.teamcity</groupId>
+      <artifactId>teamcity-common</artifactId>
+      <version>1.0.0-SNAPSHOT</version>
+    </dependency>
   </dependencies>
 </project>
diff --git a/.teamcity/settings.kts b/.teamcity/settings.kts
index ec1b1c6eb94ef6..28108d019327b6 100644
--- a/.teamcity/settings.kts
+++ b/.teamcity/settings.kts
@@ -2,7 +2,7 @@ import jetbrains.buildServer.configs.kotlin.v2019_2.*
 import projects.Kibana
 import projects.KibanaConfiguration
 
-version = "2020.1"
+version = "2020.2"
 
 val config = KibanaConfiguration {
   agentNetwork = DslContext.getParameter("agentNetwork", "teamcity")
diff --git a/.teamcity/src/Agents.kt b/.teamcity/src/Agents.kt
new file mode 100644
index 00000000000000..557cce80d0f551
--- /dev/null
+++ b/.teamcity/src/Agents.kt
@@ -0,0 +1,28 @@
+import co.elastic.teamcity.common.GoogleCloudAgent
+import co.elastic.teamcity.common.GoogleCloudAgentDiskType
+import co.elastic.teamcity.common.GoogleCloudProfile
+
+private val sizes = listOf("2", "4", "8", "16")
+
+val StandardAgents = sizes.map { size -> size to GoogleCloudAgent {
+  sourceImageFamily = "elastic-kibana-ci-ubuntu-1804-lts"
+  agentPrefix = "kibana-standard-$size-"
+  machineType = "n2-standard-$size"
+  diskSizeGb = 75
+  diskType = GoogleCloudAgentDiskType.SSD
+} }.toMap()
+
+val BuildAgent = GoogleCloudAgent {
+    sourceImageFamily = "elastic-kibana-ci-ubuntu-1804-lts"
+    agentPrefix = "kibana-c2-16-"
+    machineType = "c2-standard-16"
+    diskSizeGb = 250
+    diskType = GoogleCloudAgentDiskType.SSD
+}
+
+val CloudProfile = GoogleCloudProfile {
+  accessKeyId = "447fdd4d-7129-46b7-9822-2e57658c7422"
+
+  agents(StandardAgents)
+  agent(BuildAgent)
+}
diff --git a/.teamcity/src/Extensions.kt b/.teamcity/src/Extensions.kt
index 120b333d43e724..2942a6385f13f4 100644
--- a/.teamcity/src/Extensions.kt
+++ b/.teamcity/src/Extensions.kt
@@ -1,9 +1,7 @@
+import co.elastic.teamcity.common.requireAgent
 import jetbrains.buildServer.configs.kotlin.v2019_2.*
-import jetbrains.buildServer.configs.kotlin.v2019_2.buildFeatures.notifications
 import jetbrains.buildServer.configs.kotlin.v2019_2.buildSteps.ScriptBuildStep
 import jetbrains.buildServer.configs.kotlin.v2019_2.buildSteps.script
-import jetbrains.buildServer.configs.kotlin.v2019_2.ui.insert
-import projects.kibanaConfiguration
 
 fun BuildFeatures.junit(dirs: String = "target/**/TEST-*.xml") {
   feature {
@@ -13,40 +11,8 @@ fun BuildFeatures.junit(dirs: String = "target/**/TEST-*.xml") {
   }
 }
 
-fun ProjectFeatures.kibanaAgent(init: ProjectFeature.() -> Unit) {
-  feature {
-    type = "CloudImage"
-    param("network", kibanaConfiguration.agentNetwork)
-    param("subnet", kibanaConfiguration.agentSubnet)
-    param("growingId", "true")
-    param("agent_pool_id", "-2")
-    param("preemptible", "false")
-    param("sourceProject", "elastic-images-prod")
-    param("sourceImageFamily", "elastic-kibana-ci-ubuntu-1804-lts")
-    param("zone", "us-central1-a")
-    param("profileId", "kibana")
-    param("diskType", "pd-ssd")
-    param("machineCustom", "false")
-    param("maxInstances", "200")
-    param("imageType", "ImageFamily")
-    param("diskSizeGb", "75") // TODO
-    init()
-  }
-}
-
-fun ProjectFeatures.kibanaAgent(size: String, init: ProjectFeature.() -> Unit = {}) {
-  kibanaAgent {
-    id = "KIBANA_STANDARD_$size"
-    param("source-id", "kibana-standard-$size-")
-    param("machineType", "n2-standard-$size")
-    init()
-  }
-}
-
 fun BuildType.kibanaAgent(size: String) {
-  requirements {
-    startsWith("teamcity.agent.name", "kibana-standard-$size-", "RQ_AGENT_NAME")
-  }
+  requireAgent(StandardAgents[size]!!)
 }
 
 fun BuildType.kibanaAgent(size: Int) {
diff --git a/.teamcity/src/builds/Checks.kt b/.teamcity/src/builds/Checks.kt
index 1228ea4d94f4c9..37336316c4c914 100644
--- a/.teamcity/src/builds/Checks.kt
+++ b/.teamcity/src/builds/Checks.kt
@@ -11,16 +11,18 @@ object Checks : BuildType({
   kibanaAgent(4)
 
   val checkScripts = mapOf(
+    "Quick Commit Checks" to ".ci/teamcity/checks/commit.sh",
     "Check Telemetry Schema" to ".ci/teamcity/checks/telemetry.sh",
     "Check TypeScript Projects" to ".ci/teamcity/checks/ts_projects.sh",
     "Check File Casing" to ".ci/teamcity/checks/file_casing.sh",
     "Check Licenses" to ".ci/teamcity/checks/licenses.sh",
     "Verify NOTICE" to ".ci/teamcity/checks/verify_notice.sh",
-    "Test Hardening" to ".ci/teamcity/checks/test_hardening.sh",
     "Check Types" to ".ci/teamcity/checks/type_check.sh",
+    "Check Jest Configs" to ".ci/teamcity/checks/jest_configs.sh",
     "Check Doc API Changes" to ".ci/teamcity/checks/doc_api_changes.sh",
     "Check Bundle Limits" to ".ci/teamcity/checks/bundle_limits.sh",
-    "Check i18n" to ".ci/teamcity/checks/i18n.sh"
+    "Check i18n" to ".ci/teamcity/checks/i18n.sh",
+    "Check Plugins With Circular Dependencies" to ".ci/teamcity/checks/plugins_with_circular_deps.sh"
   )
 
   steps {
diff --git a/.teamcity/src/builds/default/DefaultCiGroup.kt b/.teamcity/src/builds/default/DefaultCiGroup.kt
index 7dbe9cd0ba84c4..2c3b0d348591e3 100755
--- a/.teamcity/src/builds/default/DefaultCiGroup.kt
+++ b/.teamcity/src/builds/default/DefaultCiGroup.kt
@@ -1,5 +1,7 @@
 package builds.default
 
+import StandardAgents
+import co.elastic.teamcity.common.requireAgent
 import jetbrains.buildServer.configs.kotlin.v2019_2.*
 import runbld
 
@@ -11,5 +13,7 @@ class DefaultCiGroup(val ciGroup: Int = 0, init: BuildType.() -> Unit = {}) : De
     runbld("Default CI Group $ciGroup", "./.ci/teamcity/default/ci_group.sh $ciGroup")
   }
 
+  requireAgent(StandardAgents["4"]!!)
+
   init()
 })
diff --git a/.teamcity/src/builds/default/DefaultCiGroups.kt b/.teamcity/src/builds/default/DefaultCiGroups.kt
index 6f1d45598c92eb..4f39283149e73b 100644
--- a/.teamcity/src/builds/default/DefaultCiGroups.kt
+++ b/.teamcity/src/builds/default/DefaultCiGroups.kt
@@ -3,7 +3,7 @@ package builds.default
 import dependsOn
 import jetbrains.buildServer.configs.kotlin.v2019_2.BuildType
 
-const val DEFAULT_CI_GROUP_COUNT = 10
+const val DEFAULT_CI_GROUP_COUNT = 11
 val defaultCiGroups = (1..DEFAULT_CI_GROUP_COUNT).map { DefaultCiGroup(it) }
 
 object DefaultCiGroups : BuildType({
diff --git a/.teamcity/src/builds/es_snapshots/Verify.kt b/.teamcity/src/builds/es_snapshots/Verify.kt
index c778814af536c4..4c0307e9eca550 100644
--- a/.teamcity/src/builds/es_snapshots/Verify.kt
+++ b/.teamcity/src/builds/es_snapshots/Verify.kt
@@ -6,7 +6,7 @@ import builds.default.defaultCiGroups
 import builds.oss.OssBuild
 import builds.oss.OssPluginFunctional
 import builds.oss.ossCiGroups
-import builds.test.ApiServerIntegration
+import builds.oss.OssApiServerIntegration
 import builds.test.JestIntegration
 import dependsOn
 import jetbrains.buildServer.configs.kotlin.v2019_2.*
@@ -49,7 +49,7 @@ val defaultBuildsToClone = listOf(
 val defaultCloned = defaultBuildsToClone.map { cloneForVerify(it) }
 
 val integrationsBuildsToClone = listOf(
-  ApiServerIntegration,
+  OssApiServerIntegration,
   JestIntegration
 )
 
diff --git a/.teamcity/src/builds/test/ApiServerIntegration.kt b/.teamcity/src/builds/oss/OssApiServerIntegration.kt
similarity index 62%
rename from .teamcity/src/builds/test/ApiServerIntegration.kt
rename to .teamcity/src/builds/oss/OssApiServerIntegration.kt
index ca58b628cbd221..a04512fb2aba52 100644
--- a/.teamcity/src/builds/test/ApiServerIntegration.kt
+++ b/.teamcity/src/builds/oss/OssApiServerIntegration.kt
@@ -1,10 +1,8 @@
-package builds.test
+package builds.oss
 
-import addTestSettings
-import jetbrains.buildServer.configs.kotlin.v2019_2.BuildType
 import runbld
 
-object ApiServerIntegration : BuildType({
+object OssApiServerIntegration : OssFunctionalBase({
   name = "API/Server Integration"
   description = "Executes API and Server Integration Tests"
 
@@ -12,6 +10,4 @@ object ApiServerIntegration : BuildType({
     runbld("API Integration", "./.ci/teamcity/oss/api_integration.sh")
     runbld("Server Integration", "./.ci/teamcity/oss/server_integration.sh")
   }
-
-  addTestSettings()
 })
diff --git a/.teamcity/src/builds/test/AllTests.kt b/.teamcity/src/builds/test/AllTests.kt
index d1b5898d1a5f5e..9506d98cbe50ee 100644
--- a/.teamcity/src/builds/test/AllTests.kt
+++ b/.teamcity/src/builds/test/AllTests.kt
@@ -1,5 +1,6 @@
 package builds.test
 
+import builds.oss.OssApiServerIntegration
 import dependsOn
 import jetbrains.buildServer.configs.kotlin.v2019_2.BuildType
 
@@ -8,5 +9,5 @@ object AllTests : BuildType({
   description = "All Non-Functional Tests"
   type = Type.COMPOSITE
 
-  dependsOn(QuickTests, Jest, XPackJest, JestIntegration, ApiServerIntegration)
+  dependsOn(QuickTests, Jest, XPackJest, JestIntegration, OssApiServerIntegration)
 })
diff --git a/.teamcity/src/builds/test/QuickTests.kt b/.teamcity/src/builds/test/QuickTests.kt
index 5b1d2541480ad3..a294fce9599c36 100644
--- a/.teamcity/src/builds/test/QuickTests.kt
+++ b/.teamcity/src/builds/test/QuickTests.kt
@@ -12,7 +12,7 @@ object QuickTests : BuildType({
   kibanaAgent(2)
 
   val testScripts = mapOf(
-    "Test Hardening" to ".ci/teamcity/checkes/test_hardening.sh",
+    "Test Hardening" to ".ci/teamcity/checks/test_hardening.sh",
     "Test Projects" to ".ci/teamcity/tests/test_projects.sh",
     "Mocha Tests" to ".ci/teamcity/tests/mocha.sh"
   )
diff --git a/.teamcity/src/projects/Kibana.kt b/.teamcity/src/projects/Kibana.kt
index 20c30eedf5b91d..1878f49debe8c1 100644
--- a/.teamcity/src/projects/Kibana.kt
+++ b/.teamcity/src/projects/Kibana.kt
@@ -5,9 +5,10 @@ import builds.*
 import builds.default.*
 import builds.oss.*
 import builds.test.*
+import CloudProfile
+import co.elastic.teamcity.common.googleCloudProfile
 import jetbrains.buildServer.configs.kotlin.v2019_2.*
 import jetbrains.buildServer.configs.kotlin.v2019_2.projectFeatures.slackConnection
-import kibanaAgent
 import templates.KibanaTemplate
 import templates.DefaultTemplate
 import vcs.Elasticsearch
@@ -31,7 +32,7 @@ fun Kibana(config: KibanaConfiguration = KibanaConfiguration()) : Project {
       param("teamcity.ui.settings.readOnly", "true")
 
       // https://github.com/JetBrains/teamcity-webhooks
-      param("teamcity.internal.webhooks.enable", "true")
+      param("teamcity.internal.webhooks.enable", "false")
       param("teamcity.internal.webhooks.events", "BUILD_STARTED;BUILD_FINISHED;BUILD_INTERRUPTED;CHANGES_LOADED;BUILD_TYPE_ADDED_TO_QUEUE;BUILD_PROBLEMS_CHANGED")
       param("teamcity.internal.webhooks.url", "https://ci-stats.kibana.dev/_teamcity_webhook")
       param("teamcity.internal.webhooks.username", "automation")
@@ -46,36 +47,9 @@ fun Kibana(config: KibanaConfiguration = KibanaConfiguration()) : Project {
 
     defaultTemplate = DefaultTemplate
 
-    features {
-      val sizes = listOf("2", "4", "8", "16")
-      for (size in sizes) {
-        kibanaAgent(size)
-      }
-
-      kibanaAgent {
-        id = "KIBANA_C2_16"
-        param("source-id", "kibana-c2-16-")
-        param("machineType", "c2-standard-16")
-      }
-
-      feature {
-        id = "kibana"
-        type = "CloudProfile"
-        param("agentPushPreset", "")
-        param("profileId", "kibana")
-        param("profileServerUrl", "")
-        param("name", "kibana")
-        param("total-work-time", "")
-        param("credentialsType", "key")
-        param("description", "")
-        param("next-hour", "")
-        param("cloud-code", "google")
-        param("terminate-after-build", "true")
-        param("terminate-idle-time", "30")
-        param("enabled", "true")
-        param("secure:accessKey", "credentialsJSON:447fdd4d-7129-46b7-9822-2e57658c7422")
-      }
+    googleCloudProfile(CloudProfile)
 
+    features {
       slackConnection {
         id = "KIBANA_SLACK"
         displayName = "Kibana Slack"
@@ -106,7 +80,6 @@ fun Kibana(config: KibanaConfiguration = KibanaConfiguration()) : Project {
           buildType(JestIntegration)
         }
 
-        buildType(ApiServerIntegration)
         buildType(QuickTests)
         buildType(AllTests)
       }
@@ -125,6 +98,7 @@ fun Kibana(config: KibanaConfiguration = KibanaConfiguration()) : Project {
           buildType(OssFirefox)
           buildType(OssAccessibility)
           buildType(OssPluginFunctional)
+          buildType(OssApiServerIntegration)
 
           subProject {
             id("CIGroups")
diff --git a/.teamcity/src/templates/DefaultTemplate.kt b/.teamcity/src/templates/DefaultTemplate.kt
index 762218b72ab107..1f7f364600e212 100644
--- a/.teamcity/src/templates/DefaultTemplate.kt
+++ b/.teamcity/src/templates/DefaultTemplate.kt
@@ -1,15 +1,14 @@
 package templates
 
+import StandardAgents
+import co.elastic.teamcity.common.requireAgent
 import jetbrains.buildServer.configs.kotlin.v2019_2.Template
 import jetbrains.buildServer.configs.kotlin.v2019_2.buildFeatures.perfmon
 
 object DefaultTemplate : Template({
   name = "Default Template"
 
-  requirements {
-    equals("system.cloud.profile_id", "kibana", "RQ_CLOUD_PROFILE_ID")
-    startsWith("teamcity.agent.name", "kibana-standard-2-", "RQ_AGENT_NAME")
-  }
+  requireAgent(StandardAgents["2"]!!)
 
   params {
     param("env.HOME", "/var/lib/jenkins") // TODO once the agent images are sorted out
diff --git a/.teamcity/src/templates/KibanaTemplate.kt b/.teamcity/src/templates/KibanaTemplate.kt
index 117c30ddb86e31..83fe4fdaa1edd1 100644
--- a/.teamcity/src/templates/KibanaTemplate.kt
+++ b/.teamcity/src/templates/KibanaTemplate.kt
@@ -1,5 +1,7 @@
 package templates
 
+import StandardAgents
+import co.elastic.teamcity.common.requireAgent
 import vcs.Kibana
 import jetbrains.buildServer.configs.kotlin.v2019_2.BuildStep
 import jetbrains.buildServer.configs.kotlin.v2019_2.ParameterDisplay
@@ -21,10 +23,7 @@ object KibanaTemplate : Template({
 //    checkoutDir = "/dev/shm/%system.teamcity.buildType.id%/%system.build.number%/kibana"
   }
 
-  requirements {
-    equals("system.cloud.profile_id", "kibana", "RQ_CLOUD_PROFILE_ID")
-    startsWith("teamcity.agent.name", "kibana-standard-2-", "RQ_AGENT_NAME")
-  }
+  requireAgent(StandardAgents["2"]!!)
 
   features {
     perfmon {  }
@@ -41,7 +40,7 @@ object KibanaTemplate : Template({
   }
 
   failureConditions {
-    executionTimeoutMin = 120
+    executionTimeoutMin = 160
     testFailure = false
   }
 
diff --git a/.teamcity/tests/projects/KibanaTest.kt b/.teamcity/tests/projects/KibanaTest.kt
index 677effec5be658..311c15a1da7cbd 100644
--- a/.teamcity/tests/projects/KibanaTest.kt
+++ b/.teamcity/tests/projects/KibanaTest.kt
@@ -1,5 +1,7 @@
 package projects
 
+import jetbrains.buildServer.configs.kotlin.v2019_2.AbsoluteId
+import jetbrains.buildServer.configs.kotlin.v2019_2.DslContext
 import org.junit.Assert.*
 import org.junit.Test
 
@@ -18,10 +20,11 @@ class KibanaTest {
 
   @Test
   fun test_CloudImages_Exist() {
+    DslContext.projectId = AbsoluteId("My Project")
     val project = Kibana(TestConfig)
 
     assertTrue(project.features.items.any {
-      it.type == "CloudImage" && it.params.any { param -> param.name == "network" && param.value == "network"}
+      it.type == "CloudImage" && it.params.any { param -> param.name == "network" && param.value == "teamcity" }
     })
   }
 }

From 7e9177d3a9e0da3c812de08f11d673af99334451 Mon Sep 17 00:00:00 2001
From: Nick Partridge <nick.ryan.partridge@gmail.com>
Date: Fri, 18 Dec 2020 19:07:00 -0600
Subject: [PATCH 44/75] Rename chartLibrary setting to legacyChartsLibrary
 (#86529)

* rename chartLibrary setting to legacyChartsLibrary

* fix spelling

* fix plugin setting check boolean
---
 docs/management/advanced-options.asciidoc       |  4 ++--
 src/plugins/vis_type_vislib/public/plugin.ts    |  4 ++--
 src/plugins/vis_type_xy/common/index.ts         |  2 +-
 .../public/components/split_chart_warning.tsx   |  4 ++--
 src/plugins/vis_type_xy/public/plugin.ts        |  4 ++--
 .../public/vis_types/split_tooltip.tsx          |  5 +----
 src/plugins/vis_type_xy/server/plugin.ts        | 14 +++++++-------
 .../apps/dashboard/dashboard_state.ts           | 14 +++++++-------
 test/functional/apps/dashboard/index.ts         |  4 ++--
 .../apps/getting_started/_shakespeare.ts        |  8 ++++----
 test/functional/apps/getting_started/index.ts   |  6 +++---
 test/functional/apps/visualize/index.ts         |  6 +++---
 .../page_objects/visualize_chart_page.ts        | 17 +++++++++--------
 .../page_objects/visualize_editor_page.ts       |  2 +-
 test/functional/page_objects/visualize_page.ts  |  2 +-
 15 files changed, 47 insertions(+), 49 deletions(-)

diff --git a/docs/management/advanced-options.asciidoc b/docs/management/advanced-options.asciidoc
index 9a87d4c9d886ac..99fadb240335a5 100644
--- a/docs/management/advanced-options.asciidoc
+++ b/docs/management/advanced-options.asciidoc
@@ -453,8 +453,8 @@ of buckets to try to represent.
 ==== Visualization
 
 [horizontal]
-[[visualization-visualize-chartslibrary]]`visualization:visualize:chartsLibrary`::
-Enables the new charts library for area, line, and bar charts in visualization panels. Does *not* support the split chart aggregation.
+[[visualization-visualize-chartslibrary]]`visualization:visualize:legacyChartsLibrary`::
+Enables legacy charts library for area, line and bar charts in visualize. Currently, only legacy charts library supports split chart aggregation.
 
 [[visualization-colormapping]]`visualization:colorMapping`::
 **This setting is deprecated and will not be supported as of 8.0.**
diff --git a/src/plugins/vis_type_vislib/public/plugin.ts b/src/plugins/vis_type_vislib/public/plugin.ts
index bef8ad26fb12c9..36a184d3da5072 100644
--- a/src/plugins/vis_type_vislib/public/plugin.ts
+++ b/src/plugins/vis_type_vislib/public/plugin.ts
@@ -24,7 +24,7 @@ import { VisualizationsSetup } from '../../visualizations/public';
 import { ChartsPluginSetup } from '../../charts/public';
 import { DataPublicPluginStart } from '../../data/public';
 import { KibanaLegacyStart } from '../../kibana_legacy/public';
-import { CHARTS_LIBRARY } from '../../vis_type_xy/public';
+import { LEGACY_CHARTS_LIBRARY } from '../../vis_type_xy/public';
 
 import { createVisTypeVislibVisFn } from './vis_type_vislib_vis_fn';
 import { createPieVisFn } from './pie_fn';
@@ -61,7 +61,7 @@ export class VisTypeVislibPlugin
     core: VisTypeVislibCoreSetup,
     { expressions, visualizations, charts }: VisTypeVislibPluginSetupDependencies
   ) {
-    if (core.uiSettings.get(CHARTS_LIBRARY)) {
+    if (!core.uiSettings.get(LEGACY_CHARTS_LIBRARY, true)) {
       // Register only non-replaced vis types
       convertedTypeDefinitions.forEach(visualizations.createBaseVisualization);
       visualizations.createBaseVisualization(pieVisTypeDefinition);
diff --git a/src/plugins/vis_type_xy/common/index.ts b/src/plugins/vis_type_xy/common/index.ts
index bf498229a1b549..edee1ea3219db6 100644
--- a/src/plugins/vis_type_xy/common/index.ts
+++ b/src/plugins/vis_type_xy/common/index.ts
@@ -34,4 +34,4 @@ export type ChartType = $Values<typeof ChartType>;
  */
 export type XyVisType = ChartType | 'horizontal_bar';
 
-export const CHARTS_LIBRARY = 'visualization:visualize:chartsLibrary';
+export const LEGACY_CHARTS_LIBRARY = 'visualization:visualize:legacyChartsLibrary';
diff --git a/src/plugins/vis_type_xy/public/components/split_chart_warning.tsx b/src/plugins/vis_type_xy/public/components/split_chart_warning.tsx
index a9aa2bf24601b5..7265e70a791a3c 100644
--- a/src/plugins/vis_type_xy/public/components/split_chart_warning.tsx
+++ b/src/plugins/vis_type_xy/public/components/split_chart_warning.tsx
@@ -38,13 +38,13 @@ export const SplitChartWarning: FC = () => {
     >
       <FormattedMessage
         id="visTypeXy.splitChartWarning.content"
-        defaultMessage="The new charts library does not support split chart aggregation. Please disable the {link} advanced setting to use split chart aggregation."
+        defaultMessage="The new charts library does not support split chart aggregation. Please enable the {link} advanced setting to use split chart aggregation."
         values={{
           link: (
             <EuiLink href={advancedSettingsLink} target="_blank" external>
               <FormattedMessage
                 id="visTypeXy.splitChartWarning.link"
-                defaultMessage="Charts library"
+                defaultMessage="Legacy charts library"
               />
             </EuiLink>
           ),
diff --git a/src/plugins/vis_type_xy/public/plugin.ts b/src/plugins/vis_type_xy/public/plugin.ts
index c8812b07e59494..7425c5f7248aca 100644
--- a/src/plugins/vis_type_xy/public/plugin.ts
+++ b/src/plugins/vis_type_xy/public/plugin.ts
@@ -34,7 +34,7 @@ import {
   setDocLinks,
 } from './services';
 import { visTypesDefinitions } from './vis_types';
-import { CHARTS_LIBRARY } from '../common';
+import { LEGACY_CHARTS_LIBRARY } from '../common';
 import { xyVisRenderer } from './vis_renderer';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -71,7 +71,7 @@ export class VisTypeXyPlugin
     core: VisTypeXyCoreSetup,
     { expressions, visualizations, charts }: VisTypeXyPluginSetupDependencies
   ) {
-    if (core.uiSettings.get(CHARTS_LIBRARY, false)) {
+    if (!core.uiSettings.get(LEGACY_CHARTS_LIBRARY, true)) {
       setUISettings(core.uiSettings);
       setThemeService(charts.theme);
       setColorsService(charts.legacyColors);
diff --git a/src/plugins/vis_type_xy/public/vis_types/split_tooltip.tsx b/src/plugins/vis_type_xy/public/vis_types/split_tooltip.tsx
index 2abe3e9b8cf712..84f1fd9187f4f7 100644
--- a/src/plugins/vis_type_xy/public/vis_types/split_tooltip.tsx
+++ b/src/plugins/vis_type_xy/public/vis_types/split_tooltip.tsx
@@ -25,10 +25,7 @@ export function SplitTooltip() {
   return (
     <FormattedMessage
       id="visTypeXy.splitTitle.tooltip"
-      defaultMessage="Split chart aggregation is not supported with the new {setting}. Please disable the {setting} advanced setting to enable split chart aggregation"
-      values={{
-        setting: <strong>charts library</strong>,
-      }}
+      defaultMessage="Split chart aggregation is not supported with the new charts library. Please enable the legacy charts library advanced setting to use split chart aggregation."
     />
   );
 }
diff --git a/src/plugins/vis_type_xy/server/plugin.ts b/src/plugins/vis_type_xy/server/plugin.ts
index 51d741f9374fe7..b5999535064aaa 100644
--- a/src/plugins/vis_type_xy/server/plugin.ts
+++ b/src/plugins/vis_type_xy/server/plugin.ts
@@ -22,21 +22,21 @@ import { schema } from '@kbn/config-schema';
 
 import { CoreSetup, Plugin, UiSettingsParams } from 'kibana/server';
 
-import { CHARTS_LIBRARY } from '../common';
+import { LEGACY_CHARTS_LIBRARY } from '../common';
 
 export const uiSettingsConfig: Record<string, UiSettingsParams<boolean>> = {
   // TODO: Remove this when vis_type_vislib is removed
   // https://github.com/elastic/kibana/issues/56143
-  [CHARTS_LIBRARY]: {
-    name: i18n.translate('visTypeXy.advancedSettings.visualization.chartsLibrary', {
-      defaultMessage: 'Charts library',
+  [LEGACY_CHARTS_LIBRARY]: {
+    name: i18n.translate('visTypeXy.advancedSettings.visualization.legacyChartsLibrary.name', {
+      defaultMessage: 'Legacy charts library',
     }),
-    value: false,
+    value: true,
     description: i18n.translate(
-      'visTypeXy.advancedSettings.visualization.chartsLibrary.description',
+      'visTypeXy.advancedSettings.visualization.legacyChartsLibrary.description',
       {
         defaultMessage:
-          'Enables new charts library for areas, lines and bars in visualize. Currently, does <strong>not</strong> support split chart aggregation.',
+          'Enables legacy charts library for area, line and bar charts in visualize. Currently, only legacy charts library supports split chart aggregation.',
       }
     ),
     category: ['visualization'],
diff --git a/test/functional/apps/dashboard/dashboard_state.ts b/test/functional/apps/dashboard/dashboard_state.ts
index 48fec4efee5db2..728787543927c7 100644
--- a/test/functional/apps/dashboard/dashboard_state.ts
+++ b/test/functional/apps/dashboard/dashboard_state.ts
@@ -46,16 +46,16 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
   describe('dashboard state', function describeIndexTests() {
     // Used to track flag before and after reset
-    let isNewChartUiEnabled = false;
+    let isNewChartsLibraryEnabled = false;
 
     before(async function () {
-      isNewChartUiEnabled = await PageObjects.visChart.isNewChartUiEnabled();
+      isNewChartsLibraryEnabled = await PageObjects.visChart.isNewChartsLibraryEnabled();
       await PageObjects.dashboard.initTests();
       await PageObjects.dashboard.preserveCrossAppState();
 
-      if (isNewChartUiEnabled) {
+      if (isNewChartsLibraryEnabled) {
         await kibanaServer.uiSettings.update({
-          'visualization:visualize:chartsLibrary': true,
+          'visualization:visualize:legacyChartsLibrary': false,
         });
         await browser.refresh();
       }
@@ -73,12 +73,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       const visName = await PageObjects.visChart.getExpectedValue(
         AREA_CHART_VIS_NAME,
-        `${AREA_CHART_VIS_NAME} - chartsLibrary`
+        `${AREA_CHART_VIS_NAME} - new charts library`
       );
       await dashboardAddPanel.addVisualization(visName);
       const dashboarName = await PageObjects.visChart.getExpectedValue(
         'Overridden colors',
-        'Overridden colors - chartsLibrary'
+        'Overridden colors - new charts library'
       );
       await PageObjects.dashboard.saveDashboard(dashboarName);
 
@@ -93,7 +93,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.dashboard.gotoDashboardLandingPage();
       await PageObjects.dashboard.loadSavedDashboard(dashboarName);
 
-      if (await PageObjects.visChart.isNewChartUiEnabled()) {
+      if (await PageObjects.visChart.isNewChartsLibraryEnabled()) {
         await elasticChart.setNewChartUiDebugFlag();
         await queryBar.submitQuery();
       }
diff --git a/test/functional/apps/dashboard/index.ts b/test/functional/apps/dashboard/index.ts
index f2dba4785ea05b..6fb5f874022a03 100644
--- a/test/functional/apps/dashboard/index.ts
+++ b/test/functional/apps/dashboard/index.ts
@@ -126,7 +126,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
       before(async () => {
         await loadLogstash();
         await kibanaServer.uiSettings.update({
-          'visualization:visualize:chartsLibrary': true,
+          'visualization:visualize:legacyChartsLibrary': false,
         });
         await browser.refresh();
       });
@@ -134,7 +134,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
       after(async () => {
         await unloadLogstash();
         await kibanaServer.uiSettings.update({
-          'visualization:visualize:chartsLibrary': false,
+          'visualization:visualize:legacyChartsLibrary': true,
         });
         await browser.refresh();
       });
diff --git a/test/functional/apps/getting_started/_shakespeare.ts b/test/functional/apps/getting_started/_shakespeare.ts
index fa7d932aca1e86..09fdff9977b5ed 100644
--- a/test/functional/apps/getting_started/_shakespeare.ts
+++ b/test/functional/apps/getting_started/_shakespeare.ts
@@ -49,22 +49,22 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     // order they are added.
     let aggIndex = 1;
     // Used to track flag before and after reset
-    let isNewChartUiEnabled = false;
+    let isNewChartsLibraryEnabled = false;
 
     before(async function () {
       log.debug(
         'Load empty_kibana and Shakespeare Getting Started data\n' +
           'https://www.elastic.co/guide/en/kibana/current/tutorial-load-dataset.html'
       );
-      isNewChartUiEnabled = await PageObjects.visChart.isNewChartUiEnabled();
+      isNewChartsLibraryEnabled = await PageObjects.visChart.isNewChartsLibraryEnabled();
       await security.testUser.setRoles(['kibana_admin', 'test_shakespeare_reader']);
       await esArchiver.load('empty_kibana', { skipExisting: true });
       log.debug('Load shakespeare data');
       await esArchiver.loadIfNeeded('getting_started/shakespeare');
 
-      if (isNewChartUiEnabled) {
+      if (isNewChartsLibraryEnabled) {
         await kibanaServer.uiSettings.update({
-          'visualization:visualize:chartsLibrary': true,
+          'visualization:visualize:legacyChartsLibrary': false,
         });
         await browser.refresh();
       }
diff --git a/test/functional/apps/getting_started/index.ts b/test/functional/apps/getting_started/index.ts
index 4cef16a47571ef..b832c797adac60 100644
--- a/test/functional/apps/getting_started/index.ts
+++ b/test/functional/apps/getting_started/index.ts
@@ -31,17 +31,17 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
     });
 
     // TODO: Remove when vislib is removed
-    describe('chartsLibrary', function () {
+    describe('new charts library', function () {
       before(async () => {
         await kibanaServer.uiSettings.update({
-          'visualization:visualize:chartsLibrary': true,
+          'visualization:visualize:legacyChartsLibrary': false,
         });
         await browser.refresh();
       });
 
       after(async () => {
         await kibanaServer.uiSettings.update({
-          'visualization:visualize:chartsLibrary': false,
+          'visualization:visualize:legacyChartsLibrary': true,
         });
         await browser.refresh();
       });
diff --git a/test/functional/apps/visualize/index.ts b/test/functional/apps/visualize/index.ts
index ad69ad5ab41cd2..94b0c5b6c8a277 100644
--- a/test/functional/apps/visualize/index.ts
+++ b/test/functional/apps/visualize/index.ts
@@ -43,19 +43,19 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
     });
 
     // TODO: Remove when vislib is removed
-    describe('chartsLibrary', function () {
+    describe('new charts library', function () {
       this.tags('ciGroup7');
 
       before(async () => {
         await kibanaServer.uiSettings.update({
-          'visualization:visualize:chartsLibrary': true,
+          'visualization:visualize:legacyChartsLibrary': false,
         });
         await browser.refresh();
       });
 
       after(async () => {
         await kibanaServer.uiSettings.update({
-          'visualization:visualize:chartsLibrary': false,
+          'visualization:visualize:legacyChartsLibrary': true,
         });
         await browser.refresh();
       });
diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts
index 2ad7c77a58ca94..41af5a4c47e783 100644
--- a/test/functional/page_objects/visualize_chart_page.ts
+++ b/test/functional/page_objects/visualize_chart_page.ts
@@ -41,22 +41,23 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
     }
 
     /**
-     * Is chartsLibrary advanced setting enabled
+     * Is new charts library advanced setting enabled
      */
-    public async isNewChartUiEnabled(): Promise<boolean> {
-      const enabled =
-        Boolean(await kibanaServer.uiSettings.get('visualization:visualize:chartsLibrary')) ??
-        false;
-      log.debug(`-- isNewChartUiEnabled = ${enabled}`);
+    public async isNewChartsLibraryEnabled(): Promise<boolean> {
+      const legacyChartsLibrary =
+        Boolean(await kibanaServer.uiSettings.get('visualization:visualize:legacyChartsLibrary')) ??
+        true;
+      const enabled = !legacyChartsLibrary;
+      log.debug(`-- isNewChartsLibraryEnabled = ${enabled}`);
 
       return enabled;
     }
 
     /**
-     * Is chartsLibrary enabled and an area, line or histogram chart is available
+     * Is new charts library enabled and an area, line or histogram chart exists
      */
     private async isVisTypeXYChart(): Promise<boolean> {
-      const enabled = await this.isNewChartUiEnabled();
+      const enabled = await this.isNewChartsLibraryEnabled();
 
       if (!enabled) {
         log.debug(`-- isVisTypeXYChart = false`);
diff --git a/test/functional/page_objects/visualize_editor_page.ts b/test/functional/page_objects/visualize_editor_page.ts
index d6134883332e3b..18573c5084618c 100644
--- a/test/functional/page_objects/visualize_editor_page.ts
+++ b/test/functional/page_objects/visualize_editor_page.ts
@@ -74,7 +74,7 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
     }
 
     public async clickGo() {
-      if (await visChart.isNewChartUiEnabled()) {
+      if (await visChart.isNewChartsLibraryEnabled()) {
         await elasticChart.setNewChartUiDebugFlag();
       }
 
diff --git a/test/functional/page_objects/visualize_page.ts b/test/functional/page_objects/visualize_page.ts
index e5bd6a0f10d825..d8329f492fe808 100644
--- a/test/functional/page_objects/visualize_page.ts
+++ b/test/functional/page_objects/visualize_page.ts
@@ -99,7 +99,7 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide
     }
 
     public async clickRefresh() {
-      if (await visChart.isNewChartUiEnabled()) {
+      if (await visChart.isNewChartsLibraryEnabled()) {
         await elasticChart.setNewChartUiDebugFlag();
       }
       await queryBar.clickQuerySubmitButton();

From 9a3e2910a33527f74a2add9145ec598865fe19cc Mon Sep 17 00:00:00 2001
From: Luke Elmers <luke.elmers@elastic.co>
Date: Fri, 18 Dec 2020 18:34:07 -0700
Subject: [PATCH 45/75] App Services: Remove remaining uiActions, expressions,
 data, embeddable circular dependencies. (#82791)

* Move applyFilter, selectRange, valueClick triggers to data/embeddables.

* Update imports.

* Remove embeddable references to non-existent data plugin dependency.

* remove data mocks from embeddable

* Remove query, filters, timeRange from EmbeddableInput and move to apps.

* Remove data plugin imports from embeddable test samples.

* Remove circular dependencies caused by expressions renderer handlers.

* Update circular deps allowList.

* Remove data dependency on embeddable.

* Revert accidental data plugin change.

* Fix new circular deps issues.

* Update generated docs.

* Fix type errors in vis_type_xy

* Fix inspector data table.
---
 ...lugins-data-public.apply_filter_trigger.md | 11 +++
 ...plyglobalfilteractioncontext.embeddable.md |  2 +-
 ...a-public.applyglobalfilteractioncontext.md |  2 +-
 .../kibana-plugin-plugins-data-public.md      |  1 +
 ...plugin-plugins-data-server.plugin.setup.md |  4 +-
 ...plugin-plugins-data-server.plugin.start.md |  4 +-
 ...ble-public.embeddablecontext.embeddable.md |  2 +-
 ...ins-embeddable-public.embeddablecontext.md |  4 +-
 ...ugins-embeddable-public.embeddableinput.md |  3 -
 ...public.embeddablesetupdependencies.data.md | 11 ---
 ...able-public.embeddablesetupdependencies.md |  1 -
 ...public.embeddablestartdependencies.data.md | 11 ---
 ...able-public.embeddablestartdependencies.md |  1 -
 ...able-public.iscontextmenutriggercontext.md |  2 +-
 ...kibana-plugin-plugins-embeddable-public.md |  2 +
 ...-embeddable-public.select_range_trigger.md | 11 +++
 ...s-embeddable-public.value_click_trigger.md | 11 +++
 ...sions-public.iinterpreterrenderhandlers.md |  2 +-
 ...blic.iinterpreterrenderhandlers.uistate.md |  4 +-
 ...sions-server.iinterpreterrenderhandlers.md |  2 +-
 ...rver.iinterpreterrenderhandlers.uistate.md |  4 +-
 ...-ui_actions-public.apply_filter_trigger.md | 11 ---
 ...ns-ui_actions-public.applyfiltertrigger.md | 11 ---
 ...kibana-plugin-plugins-ui_actions-public.md |  6 --
 ...tions-public.rowclickcontext.embeddable.md |  2 +-
 ...ugins-ui_actions-public.rowclickcontext.md |  2 +-
 ...-ui_actions-public.select_range_trigger.md | 11 ---
 ...ns-ui_actions-public.selectrangetrigger.md | 11 ---
 ...in-plugins-ui_actions-public.trigger.id.md |  2 +-
 ...lugin-plugins-ui_actions-public.trigger.md |  2 +-
 ...ic.triggercontextmapping.filter_trigger.md | 11 ---
 ...ui_actions-public.triggercontextmapping.md |  3 -
 ...ggercontextmapping.select_range_trigger.md | 11 ---
 ...iggercontextmapping.value_click_trigger.md | 11 ---
 ...ublic.uiactionsservice.addtriggeraction.md |  2 +-
 ...ns-public.uiactionsservice.attachaction.md |  2 +-
 ....uiactionsservice.executetriggeractions.md |  2 +-
 ...tions-public.uiactionsservice.getaction.md |  2 +-
 ...ions-public.uiactionsservice.gettrigger.md |  2 +-
 ...blic.uiactionsservice.gettriggeractions.md |  2 +-
 ...ionsservice.gettriggercompatibleactions.md |  2 +-
 ...gins-ui_actions-public.uiactionsservice.md | 16 ++---
 ...-public.uiactionsservice.registeraction.md |  2 +-
 ...s-ui_actions-public.value_click_trigger.md | 11 ---
 ...ins-ui_actions-public.valueclicktrigger.md | 11 ---
 .../run_find_plugins_with_circular_deps.ts    |  7 +-
 .../public/actions/apply_filter_action.ts     |  5 +-
 .../create_filters_from_range_select.ts       | 12 +++-
 .../create_filters_from_value_click.test.ts   |  8 ++-
 .../create_filters_from_value_click.ts        | 15 +++-
 .../public/actions/select_range_action.ts     | 22 +++---
 .../data/public/actions/value_click_action.ts | 26 +++++--
 src/plugins/data/public/index.ts              |  1 +
 src/plugins/data/public/plugin.ts             | 18 ++---
 src/plugins/data/public/public.api.md         |  9 ++-
 .../public/triggers/apply_filter_trigger.ts   |  6 +-
 .../public/triggers/index.ts}                 | 14 +---
 .../components/data_table.tsx                 |  6 +-
 src/plugins/data/server/server.api.md         |  4 +-
 .../embeddable/search_embeddable.ts           |  3 +-
 src/plugins/embeddable/common/types.ts        | 17 -----
 src/plugins/embeddable/public/bootstrap.ts    | 26 ++++---
 src/plugins/embeddable/public/index.ts        |  2 +
 .../lib/embeddables/embeddable.test.tsx       |  8 ++-
 .../add_panel/add_panel_action.test.tsx       |  6 +-
 .../inspect_panel_action.test.tsx             |  3 +-
 .../remove_panel_action.test.tsx              |  6 +-
 .../embeddables/filterable_container.tsx      |  6 +-
 .../embeddables/filterable_embeddable.tsx     | 10 ++-
 .../public/lib/triggers/triggers.ts           | 26 ++++++-
 src/plugins/embeddable/public/mocks.tsx       |  3 -
 src/plugins/embeddable/public/plugin.tsx      |  5 +-
 src/plugins/embeddable/public/public.api.md   | 71 +++++--------------
 .../embeddable/public/tests/container.test.ts |  6 +-
 .../public/tests/explicit_input.test.ts       |  6 +-
 .../embeddable/public/tests/test_plugin.ts    |  3 -
 .../common/expression_renderers/types.ts      |  9 ++-
 src/plugins/expressions/public/public.api.md  |  4 +-
 src/plugins/expressions/server/server.api.md  |  4 +-
 src/plugins/ui_actions/public/index.ts        |  6 --
 src/plugins/ui_actions/public/plugin.ts       | 12 +---
 src/plugins/ui_actions/public/public.api.md   | 67 +++--------------
 .../ui_actions/public/triggers/index.ts       |  3 -
 .../public/triggers/row_click_trigger.ts      |  5 +-
 .../public/triggers/select_range_trigger.ts   | 32 ---------
 .../ui_actions/public/triggers/trigger.ts     |  3 +-
 .../public/triggers/trigger_contract.ts       |  3 +-
 src/plugins/ui_actions/public/types.ts        |  8 ---
 .../public/components/table_visualization.tsx |  3 +-
 .../public/utils/use/use_ui_state.ts          |  6 +-
 .../public/timeseries_vis_renderer.tsx        |  3 +-
 .../vis_type_vislib/public/vis_controller.tsx |  6 +-
 .../vis_type_vislib/public/vis_wrapper.tsx    |  7 +-
 .../vis_type_xy/public/vis_component.tsx      |  3 +-
 .../vis_type_xy/public/vis_renderer.tsx       |  3 +-
 .../public/embeddable/events.ts               |  9 +--
 .../public/embeddable/visualize_embeddable.ts |  3 +
 .../drilldowns_with_embeddable_example.tsx    |  6 +-
 .../dashboard_hello_world_drilldown/index.tsx |  6 +-
 .../index.tsx                                 |  6 +-
 .../drilldown.tsx                             |  2 +-
 .../dashboard_to_discover_drilldown/types.ts  |  3 +-
 .../button_embeddable/button_embeddable.ts    |  7 +-
 x-pack/plugins/dashboard_enhanced/kibana.json |  3 +-
 .../abstract_dashboard_drilldown/types.ts     |  2 +-
 .../drilldowns/actions/drilldown_shared.ts    |  6 +-
 .../embeddable_to_dashboard_drilldown.tsx     | 19 +++--
 .../explore_data/explore_data_chart_action.ts |  5 +-
 .../explore_data_context_menu_action.ts       | 21 ++++--
 .../discover_enhanced/public/plugin.ts        |  7 +-
 .../url_drilldown/public/lib/test/data.ts     |  4 ++
 .../public/lib/url_drilldown.test.ts          |  7 +-
 .../public/lib/url_drilldown.tsx              | 23 ++++--
 .../public/lib/url_drilldown_scope.ts         | 30 ++++----
 .../embeddable_action_storage.test.ts         |  2 +-
 .../embeddable/embeddable.tsx                 | 10 ++-
 x-pack/plugins/lens/public/types.ts           |  5 +-
 .../maps/public/embeddable/map_embeddable.tsx |  6 +-
 .../plugins/maps/public/embeddable/types.ts   |  5 +-
 .../translations/translations/ja-JP.json      | 12 ++--
 .../translations/translations/zh-CN.json      | 12 ++--
 .../components/action_wizard/test_data.tsx    |  7 +-
 122 files changed, 437 insertions(+), 581 deletions(-)
 create mode 100644 docs/development/plugins/data/public/kibana-plugin-plugins-data-public.apply_filter_trigger.md
 delete mode 100644 docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablesetupdependencies.data.md
 delete mode 100644 docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestartdependencies.data.md
 create mode 100644 docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.select_range_trigger.md
 create mode 100644 docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.value_click_trigger.md
 delete mode 100644 docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.apply_filter_trigger.md
 delete mode 100644 docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.applyfiltertrigger.md
 delete mode 100644 docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.select_range_trigger.md
 delete mode 100644 docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.selectrangetrigger.md
 delete mode 100644 docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.triggercontextmapping.filter_trigger.md
 delete mode 100644 docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.triggercontextmapping.select_range_trigger.md
 delete mode 100644 docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.triggercontextmapping.value_click_trigger.md
 delete mode 100644 docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.value_click_trigger.md
 delete mode 100644 docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.valueclicktrigger.md
 rename src/plugins/{ui_actions => data}/public/triggers/apply_filter_trigger.ts (85%)
 rename src/plugins/{ui_actions/public/triggers/value_click_trigger.ts => data/public/triggers/index.ts} (62%)
 delete mode 100644 src/plugins/ui_actions/public/triggers/select_range_trigger.ts

diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.apply_filter_trigger.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.apply_filter_trigger.md
new file mode 100644
index 00000000000000..aaed18b3b88907
--- /dev/null
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.apply_filter_trigger.md
@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [APPLY\_FILTER\_TRIGGER](./kibana-plugin-plugins-data-public.apply_filter_trigger.md)
+
+## APPLY\_FILTER\_TRIGGER variable
+
+<b>Signature:</b>
+
+```typescript
+APPLY_FILTER_TRIGGER = "FILTER_TRIGGER"
+```
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.applyglobalfilteractioncontext.embeddable.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.applyglobalfilteractioncontext.embeddable.md
index 027ae4209b77fd..dbeeeb9979aae3 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.applyglobalfilteractioncontext.embeddable.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.applyglobalfilteractioncontext.embeddable.md
@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-embeddable?: IEmbeddable;
+embeddable?: unknown;
 ```
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.applyglobalfilteractioncontext.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.applyglobalfilteractioncontext.md
index 62817cd0a1e33f..2f844b6844645d 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.applyglobalfilteractioncontext.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.applyglobalfilteractioncontext.md
@@ -14,7 +14,7 @@ export interface ApplyGlobalFilterActionContext
 
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [embeddable](./kibana-plugin-plugins-data-public.applyglobalfilteractioncontext.embeddable.md) | <code>IEmbeddable</code> |  |
+|  [embeddable](./kibana-plugin-plugins-data-public.applyglobalfilteractioncontext.embeddable.md) | <code>unknown</code> |  |
 |  [filters](./kibana-plugin-plugins-data-public.applyglobalfilteractioncontext.filters.md) | <code>Filter[]</code> |  |
 |  [timeFieldName](./kibana-plugin-plugins-data-public.applyglobalfilteractioncontext.timefieldname.md) | <code>string</code> |  |
 
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.md
index 8de3821161ab43..2040043d4351b9 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.md
@@ -102,6 +102,7 @@
 |  [ACTION\_GLOBAL\_APPLY\_FILTER](./kibana-plugin-plugins-data-public.action_global_apply_filter.md) |  |
 |  [AggGroupLabels](./kibana-plugin-plugins-data-public.agggrouplabels.md) |  |
 |  [AggGroupNames](./kibana-plugin-plugins-data-public.agggroupnames.md) |  |
+|  [APPLY\_FILTER\_TRIGGER](./kibana-plugin-plugins-data-public.apply_filter_trigger.md) |  |
 |  [baseFormattersPublic](./kibana-plugin-plugins-data-public.baseformatterspublic.md) |  |
 |  [castEsToKbnFieldTypeName](./kibana-plugin-plugins-data-public.castestokbnfieldtypename.md) | Get the KbnFieldType name for an esType string |
 |  [connectToQueryState](./kibana-plugin-plugins-data-public.connecttoquerystate.md) | Helper to setup two-way syncing of global data and a state container |
diff --git a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.plugin.setup.md b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.plugin.setup.md
index b90018c3d9cdd9..bd90f23b4ab590 100644
--- a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.plugin.setup.md
+++ b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.plugin.setup.md
@@ -11,7 +11,7 @@ setup(core: CoreSetup<DataPluginStartDependencies, DataPluginStart>, { bfetch, e
         __enhance: (enhancements: DataEnhancements) => void;
         search: ISearchSetup;
         fieldFormats: {
-            register: (customFieldFormat: import("../common").FieldFormatInstanceType) => number;
+            register: (customFieldFormat: import("../public").FieldFormatInstanceType) => number;
         };
     };
 ```
@@ -29,7 +29,7 @@ setup(core: CoreSetup<DataPluginStartDependencies, DataPluginStart>, { bfetch, e
         __enhance: (enhancements: DataEnhancements) => void;
         search: ISearchSetup;
         fieldFormats: {
-            register: (customFieldFormat: import("../common").FieldFormatInstanceType) => number;
+            register: (customFieldFormat: import("../public").FieldFormatInstanceType) => number;
         };
     }`
 
diff --git a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.plugin.start.md b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.plugin.start.md
index 8a3dbe5a6350c1..88f85eb7a7d05e 100644
--- a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.plugin.start.md
+++ b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.plugin.start.md
@@ -12,7 +12,7 @@ start(core: CoreStart): {
             fieldFormatServiceFactory: (uiSettings: import("src/core/server").IUiSettingsClient) => Promise<import("../common").FieldFormatsRegistry>;
         };
         indexPatterns: {
-            indexPatternsServiceFactory: (savedObjectsClient: Pick<import("src/core/server").SavedObjectsClient, "update" | "find" | "get" | "delete" | "errors" | "create" | "bulkCreate" | "checkConflicts" | "bulkGet" | "addToNamespaces" | "deleteFromNamespaces" | "bulkUpdate" | "removeReferencesTo">, elasticsearchClient: import("src/core/server").ElasticsearchClient) => Promise<import("../common").IndexPatternsService>;
+            indexPatternsServiceFactory: (savedObjectsClient: Pick<import("src/core/server").SavedObjectsClient, "update" | "find" | "get" | "delete" | "errors" | "create" | "bulkCreate" | "checkConflicts" | "bulkGet" | "addToNamespaces" | "deleteFromNamespaces" | "bulkUpdate" | "removeReferencesTo">, elasticsearchClient: import("src/core/server").ElasticsearchClient) => Promise<import("../public").IndexPatternsService>;
         };
         search: ISearchStart<import("./search").IEsSearchRequest, import("./search").IEsSearchResponse<any>>;
     };
@@ -31,7 +31,7 @@ start(core: CoreStart): {
             fieldFormatServiceFactory: (uiSettings: import("src/core/server").IUiSettingsClient) => Promise<import("../common").FieldFormatsRegistry>;
         };
         indexPatterns: {
-            indexPatternsServiceFactory: (savedObjectsClient: Pick<import("src/core/server").SavedObjectsClient, "update" | "find" | "get" | "delete" | "errors" | "create" | "bulkCreate" | "checkConflicts" | "bulkGet" | "addToNamespaces" | "deleteFromNamespaces" | "bulkUpdate" | "removeReferencesTo">, elasticsearchClient: import("src/core/server").ElasticsearchClient) => Promise<import("../common").IndexPatternsService>;
+            indexPatternsServiceFactory: (savedObjectsClient: Pick<import("src/core/server").SavedObjectsClient, "update" | "find" | "get" | "delete" | "errors" | "create" | "bulkCreate" | "checkConflicts" | "bulkGet" | "addToNamespaces" | "deleteFromNamespaces" | "bulkUpdate" | "removeReferencesTo">, elasticsearchClient: import("src/core/server").ElasticsearchClient) => Promise<import("../public").IndexPatternsService>;
         };
         search: ISearchStart<import("./search").IEsSearchRequest, import("./search").IEsSearchResponse<any>>;
     }`
diff --git a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablecontext.embeddable.md b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablecontext.embeddable.md
index 06e51958a2d1e5..92926d10a543c9 100644
--- a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablecontext.embeddable.md
+++ b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablecontext.embeddable.md
@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-embeddable: IEmbeddable;
+embeddable: T;
 ```
diff --git a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablecontext.md b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablecontext.md
index a2c2d9245eabe3..753a3ff2ec6ec9 100644
--- a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablecontext.md
+++ b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablecontext.md
@@ -7,12 +7,12 @@
 <b>Signature:</b>
 
 ```typescript
-export interface EmbeddableContext 
+export interface EmbeddableContext<T extends IEmbeddable = IEmbeddable> 
 ```
 
 ## Properties
 
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [embeddable](./kibana-plugin-plugins-embeddable-public.embeddablecontext.embeddable.md) | <code>IEmbeddable</code> |  |
+|  [embeddable](./kibana-plugin-plugins-embeddable-public.embeddablecontext.embeddable.md) | <code>T</code> |  |
 
diff --git a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddableinput.md b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddableinput.md
index f36f7b4ee77a4c..0f14215ff13090 100644
--- a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddableinput.md
+++ b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddableinput.md
@@ -16,9 +16,6 @@ export declare type EmbeddableInput = {
     enhancements?: SerializableState;
     disabledActions?: string[];
     disableTriggers?: boolean;
-    timeRange?: TimeRange;
-    query?: Query;
-    filters?: Filter[];
     searchSessionId?: string;
 };
 ```
diff --git a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablesetupdependencies.data.md b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablesetupdependencies.data.md
deleted file mode 100644
index d3a62657372ac1..00000000000000
--- a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablesetupdependencies.data.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-plugins-embeddable-public](./kibana-plugin-plugins-embeddable-public.md) &gt; [EmbeddableSetupDependencies](./kibana-plugin-plugins-embeddable-public.embeddablesetupdependencies.md) &gt; [data](./kibana-plugin-plugins-embeddable-public.embeddablesetupdependencies.data.md)
-
-## EmbeddableSetupDependencies.data property
-
-<b>Signature:</b>
-
-```typescript
-data: DataPublicPluginSetup;
-```
diff --git a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablesetupdependencies.md b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablesetupdependencies.md
index fdd31ca75be2a7..957e3f279ff602 100644
--- a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablesetupdependencies.md
+++ b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablesetupdependencies.md
@@ -14,6 +14,5 @@ export interface EmbeddableSetupDependencies
 
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [data](./kibana-plugin-plugins-embeddable-public.embeddablesetupdependencies.data.md) | <code>DataPublicPluginSetup</code> |  |
 |  [uiActions](./kibana-plugin-plugins-embeddable-public.embeddablesetupdependencies.uiactions.md) | <code>UiActionsSetup</code> |  |
 
diff --git a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestartdependencies.data.md b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestartdependencies.data.md
deleted file mode 100644
index 0595609b11e498..00000000000000
--- a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestartdependencies.data.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-plugins-embeddable-public](./kibana-plugin-plugins-embeddable-public.md) &gt; [EmbeddableStartDependencies](./kibana-plugin-plugins-embeddable-public.embeddablestartdependencies.md) &gt; [data](./kibana-plugin-plugins-embeddable-public.embeddablestartdependencies.data.md)
-
-## EmbeddableStartDependencies.data property
-
-<b>Signature:</b>
-
-```typescript
-data: DataPublicPluginStart;
-```
diff --git a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestartdependencies.md b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestartdependencies.md
index 5a1b5d1e068610..342163ed2e4137 100644
--- a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestartdependencies.md
+++ b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.embeddablestartdependencies.md
@@ -14,7 +14,6 @@ export interface EmbeddableStartDependencies
 
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [data](./kibana-plugin-plugins-embeddable-public.embeddablestartdependencies.data.md) | <code>DataPublicPluginStart</code> |  |
 |  [inspector](./kibana-plugin-plugins-embeddable-public.embeddablestartdependencies.inspector.md) | <code>InspectorStart</code> |  |
 |  [uiActions](./kibana-plugin-plugins-embeddable-public.embeddablestartdependencies.uiactions.md) | <code>UiActionsStart</code> |  |
 
diff --git a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.iscontextmenutriggercontext.md b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.iscontextmenutriggercontext.md
index 62610624655a14..2f5966f9ba940d 100644
--- a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.iscontextmenutriggercontext.md
+++ b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.iscontextmenutriggercontext.md
@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-isContextMenuTriggerContext: (context: unknown) => context is EmbeddableContext
+isContextMenuTriggerContext: (context: unknown) => context is EmbeddableContext<IEmbeddable<import("..").EmbeddableInput, import("..").EmbeddableOutput>>
 ```
diff --git a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.md b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.md
index a6aeba23cd280c..b875b1fce42887 100644
--- a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.md
+++ b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.md
@@ -86,6 +86,8 @@
 |  [PANEL\_NOTIFICATION\_TRIGGER](./kibana-plugin-plugins-embeddable-public.panel_notification_trigger.md) |  |
 |  [panelBadgeTrigger](./kibana-plugin-plugins-embeddable-public.panelbadgetrigger.md) |  |
 |  [panelNotificationTrigger](./kibana-plugin-plugins-embeddable-public.panelnotificationtrigger.md) |  |
+|  [SELECT\_RANGE\_TRIGGER](./kibana-plugin-plugins-embeddable-public.select_range_trigger.md) |  |
+|  [VALUE\_CLICK\_TRIGGER](./kibana-plugin-plugins-embeddable-public.value_click_trigger.md) |  |
 |  [withEmbeddableSubscription](./kibana-plugin-plugins-embeddable-public.withembeddablesubscription.md) |  |
 
 ## Type Aliases
diff --git a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.select_range_trigger.md b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.select_range_trigger.md
new file mode 100644
index 00000000000000..175e3fe947a0f9
--- /dev/null
+++ b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.select_range_trigger.md
@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-embeddable-public](./kibana-plugin-plugins-embeddable-public.md) &gt; [SELECT\_RANGE\_TRIGGER](./kibana-plugin-plugins-embeddable-public.select_range_trigger.md)
+
+## SELECT\_RANGE\_TRIGGER variable
+
+<b>Signature:</b>
+
+```typescript
+SELECT_RANGE_TRIGGER = "SELECT_RANGE_TRIGGER"
+```
diff --git a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.value_click_trigger.md b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.value_click_trigger.md
new file mode 100644
index 00000000000000..a85be3142d0f2b
--- /dev/null
+++ b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.value_click_trigger.md
@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-embeddable-public](./kibana-plugin-plugins-embeddable-public.md) &gt; [VALUE\_CLICK\_TRIGGER](./kibana-plugin-plugins-embeddable-public.value_click_trigger.md)
+
+## VALUE\_CLICK\_TRIGGER variable
+
+<b>Signature:</b>
+
+```typescript
+VALUE_CLICK_TRIGGER = "VALUE_CLICK_TRIGGER"
+```
diff --git a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.md b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.md
index 931e474a410065..c22c8bc6b62456 100644
--- a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.md
+++ b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.md
@@ -20,6 +20,6 @@ export interface IInterpreterRenderHandlers
 |  [hasCompatibleActions](./kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.hascompatibleactions.md) | <code>(event: any) =&gt; Promise&lt;boolean&gt;</code> |  |
 |  [onDestroy](./kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.ondestroy.md) | <code>(fn: () =&gt; void) =&gt; void</code> |  |
 |  [reload](./kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.reload.md) | <code>() =&gt; void</code> |  |
-|  [uiState](./kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.uistate.md) | <code>PersistedState</code> |  |
+|  [uiState](./kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.uistate.md) | <code>unknown</code> | This uiState interface is actually <code>PersistedState</code> from the visualizations plugin, but expressions cannot know about vis or it creates a mess of circular dependencies. Downstream consumers of the uiState handler will need to cast for now. |
 |  [update](./kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.update.md) | <code>(params: any) =&gt; void</code> |  |
 
diff --git a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.uistate.md b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.uistate.md
index 8d74c8e555fee6..461bf861d4d5ee 100644
--- a/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.uistate.md
+++ b/docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.uistate.md
@@ -4,8 +4,10 @@
 
 ## IInterpreterRenderHandlers.uiState property
 
+This uiState interface is actually `PersistedState` from the visualizations plugin, but expressions cannot know about vis or it creates a mess of circular dependencies. Downstream consumers of the uiState handler will need to cast for now.
+
 <b>Signature:</b>
 
 ```typescript
-uiState?: PersistedState;
+uiState?: unknown;
 ```
diff --git a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.md b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.md
index 273703cacca063..547608f40e6aa2 100644
--- a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.md
+++ b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.md
@@ -20,6 +20,6 @@ export interface IInterpreterRenderHandlers
 |  [hasCompatibleActions](./kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.hascompatibleactions.md) | <code>(event: any) =&gt; Promise&lt;boolean&gt;</code> |  |
 |  [onDestroy](./kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.ondestroy.md) | <code>(fn: () =&gt; void) =&gt; void</code> |  |
 |  [reload](./kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.reload.md) | <code>() =&gt; void</code> |  |
-|  [uiState](./kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.uistate.md) | <code>PersistedState</code> |  |
+|  [uiState](./kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.uistate.md) | <code>unknown</code> | This uiState interface is actually <code>PersistedState</code> from the visualizations plugin, but expressions cannot know about vis or it creates a mess of circular dependencies. Downstream consumers of the uiState handler will need to cast for now. |
 |  [update](./kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.update.md) | <code>(params: any) =&gt; void</code> |  |
 
diff --git a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.uistate.md b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.uistate.md
index b09433c6454adb..ca1c8eec8c2f77 100644
--- a/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.uistate.md
+++ b/docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.uistate.md
@@ -4,8 +4,10 @@
 
 ## IInterpreterRenderHandlers.uiState property
 
+This uiState interface is actually `PersistedState` from the visualizations plugin, but expressions cannot know about vis or it creates a mess of circular dependencies. Downstream consumers of the uiState handler will need to cast for now.
+
 <b>Signature:</b>
 
 ```typescript
-uiState?: PersistedState;
+uiState?: unknown;
 ```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.apply_filter_trigger.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.apply_filter_trigger.md
deleted file mode 100644
index 94e66bf404f5ce..00000000000000
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.apply_filter_trigger.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-plugins-ui\_actions-public](./kibana-plugin-plugins-ui_actions-public.md) &gt; [APPLY\_FILTER\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.apply_filter_trigger.md)
-
-## APPLY\_FILTER\_TRIGGER variable
-
-<b>Signature:</b>
-
-```typescript
-APPLY_FILTER_TRIGGER = "FILTER_TRIGGER"
-```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.applyfiltertrigger.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.applyfiltertrigger.md
deleted file mode 100644
index e1fb6d342457e8..00000000000000
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.applyfiltertrigger.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-plugins-ui\_actions-public](./kibana-plugin-plugins-ui_actions-public.md) &gt; [applyFilterTrigger](./kibana-plugin-plugins-ui_actions-public.applyfiltertrigger.md)
-
-## applyFilterTrigger variable
-
-<b>Signature:</b>
-
-```typescript
-applyFilterTrigger: Trigger<'FILTER_TRIGGER'>
-```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.md
index fd1ea7df4fb745..76e347bddd1682 100644
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.md
+++ b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.md
@@ -41,14 +41,8 @@
 |  [ACTION\_VISUALIZE\_FIELD](./kibana-plugin-plugins-ui_actions-public.action_visualize_field.md) |  |
 |  [ACTION\_VISUALIZE\_GEO\_FIELD](./kibana-plugin-plugins-ui_actions-public.action_visualize_geo_field.md) |  |
 |  [ACTION\_VISUALIZE\_LENS\_FIELD](./kibana-plugin-plugins-ui_actions-public.action_visualize_lens_field.md) |  |
-|  [APPLY\_FILTER\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.apply_filter_trigger.md) |  |
-|  [applyFilterTrigger](./kibana-plugin-plugins-ui_actions-public.applyfiltertrigger.md) |  |
 |  [ROW\_CLICK\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.row_click_trigger.md) |  |
 |  [rowClickTrigger](./kibana-plugin-plugins-ui_actions-public.rowclicktrigger.md) |  |
-|  [SELECT\_RANGE\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.select_range_trigger.md) |  |
-|  [selectRangeTrigger](./kibana-plugin-plugins-ui_actions-public.selectrangetrigger.md) |  |
-|  [VALUE\_CLICK\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.value_click_trigger.md) |  |
-|  [valueClickTrigger](./kibana-plugin-plugins-ui_actions-public.valueclicktrigger.md) |  |
 |  [VISUALIZE\_FIELD\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.visualize_field_trigger.md) |  |
 |  [VISUALIZE\_GEO\_FIELD\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.visualize_geo_field_trigger.md) |  |
 |  [visualizeFieldTrigger](./kibana-plugin-plugins-ui_actions-public.visualizefieldtrigger.md) |  |
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.rowclickcontext.embeddable.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.rowclickcontext.embeddable.md
index e8baf44ff9cbc3..a75637e8ea9d34 100644
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.rowclickcontext.embeddable.md
+++ b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.rowclickcontext.embeddable.md
@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-embeddable?: IEmbeddable;
+embeddable?: unknown;
 ```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.rowclickcontext.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.rowclickcontext.md
index 74b55d85f10e31..b69734cfc3233d 100644
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.rowclickcontext.md
+++ b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.rowclickcontext.md
@@ -15,5 +15,5 @@ export interface RowClickContext
 |  Property | Type | Description |
 |  --- | --- | --- |
 |  [data](./kibana-plugin-plugins-ui_actions-public.rowclickcontext.data.md) | <code>{</code><br/><code>        rowIndex: number;</code><br/><code>        table: Datatable;</code><br/><code>        columns?: string[];</code><br/><code>    }</code> |  |
-|  [embeddable](./kibana-plugin-plugins-ui_actions-public.rowclickcontext.embeddable.md) | <code>IEmbeddable</code> |  |
+|  [embeddable](./kibana-plugin-plugins-ui_actions-public.rowclickcontext.embeddable.md) | <code>unknown</code> |  |
 
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.select_range_trigger.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.select_range_trigger.md
deleted file mode 100644
index fd784ff17fa840..00000000000000
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.select_range_trigger.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-plugins-ui\_actions-public](./kibana-plugin-plugins-ui_actions-public.md) &gt; [SELECT\_RANGE\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.select_range_trigger.md)
-
-## SELECT\_RANGE\_TRIGGER variable
-
-<b>Signature:</b>
-
-```typescript
-SELECT_RANGE_TRIGGER = "SELECT_RANGE_TRIGGER"
-```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.selectrangetrigger.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.selectrangetrigger.md
deleted file mode 100644
index 0d9fa2d83ee57a..00000000000000
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.selectrangetrigger.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-plugins-ui\_actions-public](./kibana-plugin-plugins-ui_actions-public.md) &gt; [selectRangeTrigger](./kibana-plugin-plugins-ui_actions-public.selectrangetrigger.md)
-
-## selectRangeTrigger variable
-
-<b>Signature:</b>
-
-```typescript
-selectRangeTrigger: Trigger<'SELECT_RANGE_TRIGGER'>
-```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.trigger.id.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.trigger.id.md
index 426f17f9a03529..5603c852ad39db 100644
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.trigger.id.md
+++ b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.trigger.id.md
@@ -4,7 +4,7 @@
 
 ## Trigger.id property
 
-Unique name of the trigger as identified in `ui_actions` plugin trigger registry, such as "SELECT\_RANGE\_TRIGGER" or "VALUE\_CLICK\_TRIGGER".
+Unique name of the trigger as identified in `ui_actions` plugin trigger registry.
 
 <b>Signature:</b>
 
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.trigger.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.trigger.md
index b69bba892f4753..ed76cfea976845 100644
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.trigger.md
+++ b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.trigger.md
@@ -21,6 +21,6 @@ export interface Trigger<ID extends TriggerId = TriggerId>
 |  Property | Type | Description |
 |  --- | --- | --- |
 |  [description](./kibana-plugin-plugins-ui_actions-public.trigger.description.md) | <code>string</code> | A longer user friendly description of the trigger. |
-|  [id](./kibana-plugin-plugins-ui_actions-public.trigger.id.md) | <code>ID</code> | Unique name of the trigger as identified in <code>ui_actions</code> plugin trigger registry, such as "SELECT\_RANGE\_TRIGGER" or "VALUE\_CLICK\_TRIGGER". |
+|  [id](./kibana-plugin-plugins-ui_actions-public.trigger.id.md) | <code>ID</code> | Unique name of the trigger as identified in <code>ui_actions</code> plugin trigger registry. |
 |  [title](./kibana-plugin-plugins-ui_actions-public.trigger.title.md) | <code>string</code> | User friendly name of the trigger. |
 
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.triggercontextmapping.filter_trigger.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.triggercontextmapping.filter_trigger.md
deleted file mode 100644
index 0ccf8aa3d7415a..00000000000000
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.triggercontextmapping.filter_trigger.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-plugins-ui\_actions-public](./kibana-plugin-plugins-ui_actions-public.md) &gt; [TriggerContextMapping](./kibana-plugin-plugins-ui_actions-public.triggercontextmapping.md) &gt; [FILTER\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.triggercontextmapping.filter_trigger.md)
-
-## TriggerContextMapping.FILTER\_TRIGGER property
-
-<b>Signature:</b>
-
-```typescript
-[APPLY_FILTER_TRIGGER]: ApplyGlobalFilterActionContext;
-```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.triggercontextmapping.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.triggercontextmapping.md
index 2f0d22cf6dd741..da7a7a8bfe6452 100644
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.triggercontextmapping.md
+++ b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.triggercontextmapping.md
@@ -15,10 +15,7 @@ export interface TriggerContextMapping
 |  Property | Type | Description |
 |  --- | --- | --- |
 |  [""](./kibana-plugin-plugins-ui_actions-public.triggercontextmapping.__.md) | <code>TriggerContext</code> |  |
-|  [FILTER\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.triggercontextmapping.filter_trigger.md) | <code>ApplyGlobalFilterActionContext</code> |  |
 |  [ROW\_CLICK\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.triggercontextmapping.row_click_trigger.md) | <code>RowClickContext</code> |  |
-|  [SELECT\_RANGE\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.triggercontextmapping.select_range_trigger.md) | <code>RangeSelectContext</code> |  |
-|  [VALUE\_CLICK\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.triggercontextmapping.value_click_trigger.md) | <code>ValueClickContext</code> |  |
 |  [VISUALIZE\_FIELD\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.triggercontextmapping.visualize_field_trigger.md) | <code>VisualizeFieldContext</code> |  |
 |  [VISUALIZE\_GEO\_FIELD\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.triggercontextmapping.visualize_geo_field_trigger.md) | <code>VisualizeFieldContext</code> |  |
 
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.triggercontextmapping.select_range_trigger.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.triggercontextmapping.select_range_trigger.md
deleted file mode 100644
index c5ef6843390b34..00000000000000
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.triggercontextmapping.select_range_trigger.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-plugins-ui\_actions-public](./kibana-plugin-plugins-ui_actions-public.md) &gt; [TriggerContextMapping](./kibana-plugin-plugins-ui_actions-public.triggercontextmapping.md) &gt; [SELECT\_RANGE\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.triggercontextmapping.select_range_trigger.md)
-
-## TriggerContextMapping.SELECT\_RANGE\_TRIGGER property
-
-<b>Signature:</b>
-
-```typescript
-[SELECT_RANGE_TRIGGER]: RangeSelectContext;
-```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.triggercontextmapping.value_click_trigger.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.triggercontextmapping.value_click_trigger.md
deleted file mode 100644
index 129144a66cee56..00000000000000
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.triggercontextmapping.value_click_trigger.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-plugins-ui\_actions-public](./kibana-plugin-plugins-ui_actions-public.md) &gt; [TriggerContextMapping](./kibana-plugin-plugins-ui_actions-public.triggercontextmapping.md) &gt; [VALUE\_CLICK\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.triggercontextmapping.value_click_trigger.md)
-
-## TriggerContextMapping.VALUE\_CLICK\_TRIGGER property
-
-<b>Signature:</b>
-
-```typescript
-[VALUE_CLICK_TRIGGER]: ValueClickContext;
-```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.addtriggeraction.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.addtriggeraction.md
index ca999322b7a567..f29d487d774e0d 100644
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.addtriggeraction.md
+++ b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.addtriggeraction.md
@@ -11,5 +11,5 @@
 <b>Signature:</b>
 
 ```typescript
-readonly addTriggerAction: <T extends "" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER" | "ROW_CLICK_TRIGGER" | "FILTER_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER">(triggerId: T, action: ActionDefinition<TriggerContextMapping[T]> | Action<TriggerContextMapping[T], "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel" | "togglePanel" | "replacePanel" | "clonePanel" | "addToFromLibrary" | "unlinkFromLibrary" | "ACTION_LIBRARY_NOTIFICATION" | "ACTION_EXPORT_CSV">) => void;
+readonly addTriggerAction: <T extends "" | "ROW_CLICK_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "FILTER_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER">(triggerId: T, action: ActionDefinition<TriggerContextMapping[T]> | Action<TriggerContextMapping[T], "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel">) => void;
 ```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.attachaction.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.attachaction.md
index e95e7e1eb38b61..1ebb30c49c0b32 100644
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.attachaction.md
+++ b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.attachaction.md
@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-readonly attachAction: <T extends "" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER" | "ROW_CLICK_TRIGGER" | "FILTER_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER">(triggerId: T, actionId: string) => void;
+readonly attachAction: <T extends "" | "ROW_CLICK_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "FILTER_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER">(triggerId: T, actionId: string) => void;
 ```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.executetriggeractions.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.executetriggeractions.md
index 8e7fb8b8bbf29f..b20f08520c43d5 100644
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.executetriggeractions.md
+++ b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.executetriggeractions.md
@@ -12,5 +12,5 @@
 <b>Signature:</b>
 
 ```typescript
-readonly executeTriggerActions: <T extends "" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER" | "ROW_CLICK_TRIGGER" | "FILTER_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER">(triggerId: T, context: TriggerContext<T>) => Promise<void>;
+readonly executeTriggerActions: <T extends "" | "ROW_CLICK_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "FILTER_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER">(triggerId: T, context: TriggerContext<T>) => Promise<void>;
 ```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.getaction.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.getaction.md
index d540de76374413..300c46a47c47f6 100644
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.getaction.md
+++ b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.getaction.md
@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-readonly getAction: <T extends ActionDefinition<{}>>(id: string) => Action<ActionContext<T>, "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel" | "togglePanel" | "replacePanel" | "clonePanel" | "addToFromLibrary" | "unlinkFromLibrary" | "ACTION_LIBRARY_NOTIFICATION" | "ACTION_EXPORT_CSV">;
+readonly getAction: <T extends ActionDefinition<{}>>(id: string) => Action<ActionContext<T>, "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel">;
 ```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettrigger.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettrigger.md
index b996620686a282..95b737a8d6cae0 100644
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettrigger.md
+++ b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettrigger.md
@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-readonly getTrigger: <T extends "" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER" | "ROW_CLICK_TRIGGER" | "FILTER_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER">(triggerId: T) => TriggerContract<T>;
+readonly getTrigger: <T extends "" | "ROW_CLICK_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "FILTER_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER">(triggerId: T) => TriggerContract<T>;
 ```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettriggeractions.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettriggeractions.md
index f94b34ecc2d908..27c1b1eb48f165 100644
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettriggeractions.md
+++ b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettriggeractions.md
@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-readonly getTriggerActions: <T extends "" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER" | "ROW_CLICK_TRIGGER" | "FILTER_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER">(triggerId: T) => Action<TriggerContextMapping[T], "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel" | "togglePanel" | "replacePanel" | "clonePanel" | "addToFromLibrary" | "unlinkFromLibrary" | "ACTION_LIBRARY_NOTIFICATION" | "ACTION_EXPORT_CSV">[];
+readonly getTriggerActions: <T extends "" | "ROW_CLICK_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "FILTER_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER">(triggerId: T) => Action<TriggerContextMapping[T], "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel">[];
 ```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettriggercompatibleactions.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettriggercompatibleactions.md
index dff958608ef9e0..edb7d2d3a15516 100644
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettriggercompatibleactions.md
+++ b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettriggercompatibleactions.md
@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-readonly getTriggerCompatibleActions: <T extends "" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER" | "ROW_CLICK_TRIGGER" | "FILTER_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER">(triggerId: T, context: TriggerContextMapping[T]) => Promise<Action<TriggerContextMapping[T], "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel" | "togglePanel" | "replacePanel" | "clonePanel" | "addToFromLibrary" | "unlinkFromLibrary" | "ACTION_LIBRARY_NOTIFICATION" | "ACTION_EXPORT_CSV">[]>;
+readonly getTriggerCompatibleActions: <T extends "" | "ROW_CLICK_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "FILTER_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER">(triggerId: T, context: TriggerContextMapping[T]) => Promise<Action<TriggerContextMapping[T], "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel">[]>;
 ```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.md
index e35eb503ab62b5..4fe8431770deae 100644
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.md
+++ b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.md
@@ -21,19 +21,19 @@ export declare class UiActionsService
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [actions](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.actions.md) |  | <code>ActionRegistry</code> |  |
-|  [addTriggerAction](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.addtriggeraction.md) |  | <code>&lt;T extends &quot;&quot; &#124; &quot;SELECT_RANGE_TRIGGER&quot; &#124; &quot;VALUE_CLICK_TRIGGER&quot; &#124; &quot;ROW_CLICK_TRIGGER&quot; &#124; &quot;FILTER_TRIGGER&quot; &#124; &quot;VISUALIZE_FIELD_TRIGGER&quot; &#124; &quot;VISUALIZE_GEO_FIELD_TRIGGER&quot; &#124; &quot;CONTEXT_MENU_TRIGGER&quot; &#124; &quot;PANEL_BADGE_TRIGGER&quot; &#124; &quot;PANEL_NOTIFICATION_TRIGGER&quot;&gt;(triggerId: T, action: ActionDefinition&lt;TriggerContextMapping[T]&gt; &#124; Action&lt;TriggerContextMapping[T], &quot;&quot; &#124; &quot;ACTION_VISUALIZE_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_GEO_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_LENS_FIELD&quot; &#124; &quot;ACTION_GLOBAL_APPLY_FILTER&quot; &#124; &quot;ACTION_SELECT_RANGE&quot; &#124; &quot;ACTION_VALUE_CLICK&quot; &#124; &quot;ACTION_CUSTOMIZE_PANEL&quot; &#124; &quot;ACTION_ADD_PANEL&quot; &#124; &quot;openInspector&quot; &#124; &quot;deletePanel&quot; &#124; &quot;editPanel&quot; &#124; &quot;togglePanel&quot; &#124; &quot;replacePanel&quot; &#124; &quot;clonePanel&quot; &#124; &quot;addToFromLibrary&quot; &#124; &quot;unlinkFromLibrary&quot; &#124; &quot;ACTION_LIBRARY_NOTIFICATION&quot; &#124; &quot;ACTION_EXPORT_CSV&quot;&gt;) =&gt; void</code> | <code>addTriggerAction</code> is similar to <code>attachAction</code> as it attaches action to a trigger, but it also registers the action, if it has not been registered, yet.<code>addTriggerAction</code> also infers better typing of the <code>action</code> argument. |
-|  [attachAction](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.attachaction.md) |  | <code>&lt;T extends &quot;&quot; &#124; &quot;SELECT_RANGE_TRIGGER&quot; &#124; &quot;VALUE_CLICK_TRIGGER&quot; &#124; &quot;ROW_CLICK_TRIGGER&quot; &#124; &quot;FILTER_TRIGGER&quot; &#124; &quot;VISUALIZE_FIELD_TRIGGER&quot; &#124; &quot;VISUALIZE_GEO_FIELD_TRIGGER&quot; &#124; &quot;CONTEXT_MENU_TRIGGER&quot; &#124; &quot;PANEL_BADGE_TRIGGER&quot; &#124; &quot;PANEL_NOTIFICATION_TRIGGER&quot;&gt;(triggerId: T, actionId: string) =&gt; void</code> |  |
+|  [addTriggerAction](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.addtriggeraction.md) |  | <code>&lt;T extends &quot;&quot; &#124; &quot;ROW_CLICK_TRIGGER&quot; &#124; &quot;VISUALIZE_FIELD_TRIGGER&quot; &#124; &quot;VISUALIZE_GEO_FIELD_TRIGGER&quot; &#124; &quot;FILTER_TRIGGER&quot; &#124; &quot;CONTEXT_MENU_TRIGGER&quot; &#124; &quot;PANEL_BADGE_TRIGGER&quot; &#124; &quot;PANEL_NOTIFICATION_TRIGGER&quot; &#124; &quot;SELECT_RANGE_TRIGGER&quot; &#124; &quot;VALUE_CLICK_TRIGGER&quot;&gt;(triggerId: T, action: ActionDefinition&lt;TriggerContextMapping[T]&gt; &#124; Action&lt;TriggerContextMapping[T], &quot;&quot; &#124; &quot;ACTION_VISUALIZE_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_GEO_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_LENS_FIELD&quot; &#124; &quot;ACTION_GLOBAL_APPLY_FILTER&quot; &#124; &quot;ACTION_SELECT_RANGE&quot; &#124; &quot;ACTION_VALUE_CLICK&quot; &#124; &quot;ACTION_CUSTOMIZE_PANEL&quot; &#124; &quot;ACTION_ADD_PANEL&quot; &#124; &quot;openInspector&quot; &#124; &quot;deletePanel&quot; &#124; &quot;editPanel&quot;&gt;) =&gt; void</code> | <code>addTriggerAction</code> is similar to <code>attachAction</code> as it attaches action to a trigger, but it also registers the action, if it has not been registered, yet.<code>addTriggerAction</code> also infers better typing of the <code>action</code> argument. |
+|  [attachAction](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.attachaction.md) |  | <code>&lt;T extends &quot;&quot; &#124; &quot;ROW_CLICK_TRIGGER&quot; &#124; &quot;VISUALIZE_FIELD_TRIGGER&quot; &#124; &quot;VISUALIZE_GEO_FIELD_TRIGGER&quot; &#124; &quot;FILTER_TRIGGER&quot; &#124; &quot;CONTEXT_MENU_TRIGGER&quot; &#124; &quot;PANEL_BADGE_TRIGGER&quot; &#124; &quot;PANEL_NOTIFICATION_TRIGGER&quot; &#124; &quot;SELECT_RANGE_TRIGGER&quot; &#124; &quot;VALUE_CLICK_TRIGGER&quot;&gt;(triggerId: T, actionId: string) =&gt; void</code> |  |
 |  [clear](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.clear.md) |  | <code>() =&gt; void</code> | Removes all registered triggers and actions. |
 |  [detachAction](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.detachaction.md) |  | <code>(triggerId: TriggerId, actionId: string) =&gt; void</code> |  |
-|  [executeTriggerActions](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.executetriggeractions.md) |  | <code>&lt;T extends &quot;&quot; &#124; &quot;SELECT_RANGE_TRIGGER&quot; &#124; &quot;VALUE_CLICK_TRIGGER&quot; &#124; &quot;ROW_CLICK_TRIGGER&quot; &#124; &quot;FILTER_TRIGGER&quot; &#124; &quot;VISUALIZE_FIELD_TRIGGER&quot; &#124; &quot;VISUALIZE_GEO_FIELD_TRIGGER&quot; &#124; &quot;CONTEXT_MENU_TRIGGER&quot; &#124; &quot;PANEL_BADGE_TRIGGER&quot; &#124; &quot;PANEL_NOTIFICATION_TRIGGER&quot;&gt;(triggerId: T, context: TriggerContext&lt;T&gt;) =&gt; Promise&lt;void&gt;</code> |  |
+|  [executeTriggerActions](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.executetriggeractions.md) |  | <code>&lt;T extends &quot;&quot; &#124; &quot;ROW_CLICK_TRIGGER&quot; &#124; &quot;VISUALIZE_FIELD_TRIGGER&quot; &#124; &quot;VISUALIZE_GEO_FIELD_TRIGGER&quot; &#124; &quot;FILTER_TRIGGER&quot; &#124; &quot;CONTEXT_MENU_TRIGGER&quot; &#124; &quot;PANEL_BADGE_TRIGGER&quot; &#124; &quot;PANEL_NOTIFICATION_TRIGGER&quot; &#124; &quot;SELECT_RANGE_TRIGGER&quot; &#124; &quot;VALUE_CLICK_TRIGGER&quot;&gt;(triggerId: T, context: TriggerContext&lt;T&gt;) =&gt; Promise&lt;void&gt;</code> |  |
 |  [executionService](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.executionservice.md) |  | <code>UiActionsExecutionService</code> |  |
 |  [fork](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.fork.md) |  | <code>() =&gt; UiActionsService</code> | "Fork" a separate instance of <code>UiActionsService</code> that inherits all existing triggers and actions, but going forward all new triggers and actions added to this instance of <code>UiActionsService</code> are only available within this instance. |
-|  [getAction](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.getaction.md) |  | <code>&lt;T extends ActionDefinition&lt;{}&gt;&gt;(id: string) =&gt; Action&lt;ActionContext&lt;T&gt;, &quot;&quot; &#124; &quot;ACTION_VISUALIZE_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_GEO_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_LENS_FIELD&quot; &#124; &quot;ACTION_GLOBAL_APPLY_FILTER&quot; &#124; &quot;ACTION_SELECT_RANGE&quot; &#124; &quot;ACTION_VALUE_CLICK&quot; &#124; &quot;ACTION_CUSTOMIZE_PANEL&quot; &#124; &quot;ACTION_ADD_PANEL&quot; &#124; &quot;openInspector&quot; &#124; &quot;deletePanel&quot; &#124; &quot;editPanel&quot; &#124; &quot;togglePanel&quot; &#124; &quot;replacePanel&quot; &#124; &quot;clonePanel&quot; &#124; &quot;addToFromLibrary&quot; &#124; &quot;unlinkFromLibrary&quot; &#124; &quot;ACTION_LIBRARY_NOTIFICATION&quot; &#124; &quot;ACTION_EXPORT_CSV&quot;&gt;</code> |  |
-|  [getTrigger](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettrigger.md) |  | <code>&lt;T extends &quot;&quot; &#124; &quot;SELECT_RANGE_TRIGGER&quot; &#124; &quot;VALUE_CLICK_TRIGGER&quot; &#124; &quot;ROW_CLICK_TRIGGER&quot; &#124; &quot;FILTER_TRIGGER&quot; &#124; &quot;VISUALIZE_FIELD_TRIGGER&quot; &#124; &quot;VISUALIZE_GEO_FIELD_TRIGGER&quot; &#124; &quot;CONTEXT_MENU_TRIGGER&quot; &#124; &quot;PANEL_BADGE_TRIGGER&quot; &#124; &quot;PANEL_NOTIFICATION_TRIGGER&quot;&gt;(triggerId: T) =&gt; TriggerContract&lt;T&gt;</code> |  |
-|  [getTriggerActions](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettriggeractions.md) |  | <code>&lt;T extends &quot;&quot; &#124; &quot;SELECT_RANGE_TRIGGER&quot; &#124; &quot;VALUE_CLICK_TRIGGER&quot; &#124; &quot;ROW_CLICK_TRIGGER&quot; &#124; &quot;FILTER_TRIGGER&quot; &#124; &quot;VISUALIZE_FIELD_TRIGGER&quot; &#124; &quot;VISUALIZE_GEO_FIELD_TRIGGER&quot; &#124; &quot;CONTEXT_MENU_TRIGGER&quot; &#124; &quot;PANEL_BADGE_TRIGGER&quot; &#124; &quot;PANEL_NOTIFICATION_TRIGGER&quot;&gt;(triggerId: T) =&gt; Action&lt;TriggerContextMapping[T], &quot;&quot; &#124; &quot;ACTION_VISUALIZE_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_GEO_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_LENS_FIELD&quot; &#124; &quot;ACTION_GLOBAL_APPLY_FILTER&quot; &#124; &quot;ACTION_SELECT_RANGE&quot; &#124; &quot;ACTION_VALUE_CLICK&quot; &#124; &quot;ACTION_CUSTOMIZE_PANEL&quot; &#124; &quot;ACTION_ADD_PANEL&quot; &#124; &quot;openInspector&quot; &#124; &quot;deletePanel&quot; &#124; &quot;editPanel&quot; &#124; &quot;togglePanel&quot; &#124; &quot;replacePanel&quot; &#124; &quot;clonePanel&quot; &#124; &quot;addToFromLibrary&quot; &#124; &quot;unlinkFromLibrary&quot; &#124; &quot;ACTION_LIBRARY_NOTIFICATION&quot; &#124; &quot;ACTION_EXPORT_CSV&quot;&gt;[]</code> |  |
-|  [getTriggerCompatibleActions](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettriggercompatibleactions.md) |  | <code>&lt;T extends &quot;&quot; &#124; &quot;SELECT_RANGE_TRIGGER&quot; &#124; &quot;VALUE_CLICK_TRIGGER&quot; &#124; &quot;ROW_CLICK_TRIGGER&quot; &#124; &quot;FILTER_TRIGGER&quot; &#124; &quot;VISUALIZE_FIELD_TRIGGER&quot; &#124; &quot;VISUALIZE_GEO_FIELD_TRIGGER&quot; &#124; &quot;CONTEXT_MENU_TRIGGER&quot; &#124; &quot;PANEL_BADGE_TRIGGER&quot; &#124; &quot;PANEL_NOTIFICATION_TRIGGER&quot;&gt;(triggerId: T, context: TriggerContextMapping[T]) =&gt; Promise&lt;Action&lt;TriggerContextMapping[T], &quot;&quot; &#124; &quot;ACTION_VISUALIZE_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_GEO_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_LENS_FIELD&quot; &#124; &quot;ACTION_GLOBAL_APPLY_FILTER&quot; &#124; &quot;ACTION_SELECT_RANGE&quot; &#124; &quot;ACTION_VALUE_CLICK&quot; &#124; &quot;ACTION_CUSTOMIZE_PANEL&quot; &#124; &quot;ACTION_ADD_PANEL&quot; &#124; &quot;openInspector&quot; &#124; &quot;deletePanel&quot; &#124; &quot;editPanel&quot; &#124; &quot;togglePanel&quot; &#124; &quot;replacePanel&quot; &#124; &quot;clonePanel&quot; &#124; &quot;addToFromLibrary&quot; &#124; &quot;unlinkFromLibrary&quot; &#124; &quot;ACTION_LIBRARY_NOTIFICATION&quot; &#124; &quot;ACTION_EXPORT_CSV&quot;&gt;[]&gt;</code> |  |
+|  [getAction](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.getaction.md) |  | <code>&lt;T extends ActionDefinition&lt;{}&gt;&gt;(id: string) =&gt; Action&lt;ActionContext&lt;T&gt;, &quot;&quot; &#124; &quot;ACTION_VISUALIZE_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_GEO_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_LENS_FIELD&quot; &#124; &quot;ACTION_GLOBAL_APPLY_FILTER&quot; &#124; &quot;ACTION_SELECT_RANGE&quot; &#124; &quot;ACTION_VALUE_CLICK&quot; &#124; &quot;ACTION_CUSTOMIZE_PANEL&quot; &#124; &quot;ACTION_ADD_PANEL&quot; &#124; &quot;openInspector&quot; &#124; &quot;deletePanel&quot; &#124; &quot;editPanel&quot;&gt;</code> |  |
+|  [getTrigger](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettrigger.md) |  | <code>&lt;T extends &quot;&quot; &#124; &quot;ROW_CLICK_TRIGGER&quot; &#124; &quot;VISUALIZE_FIELD_TRIGGER&quot; &#124; &quot;VISUALIZE_GEO_FIELD_TRIGGER&quot; &#124; &quot;FILTER_TRIGGER&quot; &#124; &quot;CONTEXT_MENU_TRIGGER&quot; &#124; &quot;PANEL_BADGE_TRIGGER&quot; &#124; &quot;PANEL_NOTIFICATION_TRIGGER&quot; &#124; &quot;SELECT_RANGE_TRIGGER&quot; &#124; &quot;VALUE_CLICK_TRIGGER&quot;&gt;(triggerId: T) =&gt; TriggerContract&lt;T&gt;</code> |  |
+|  [getTriggerActions](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettriggeractions.md) |  | <code>&lt;T extends &quot;&quot; &#124; &quot;ROW_CLICK_TRIGGER&quot; &#124; &quot;VISUALIZE_FIELD_TRIGGER&quot; &#124; &quot;VISUALIZE_GEO_FIELD_TRIGGER&quot; &#124; &quot;FILTER_TRIGGER&quot; &#124; &quot;CONTEXT_MENU_TRIGGER&quot; &#124; &quot;PANEL_BADGE_TRIGGER&quot; &#124; &quot;PANEL_NOTIFICATION_TRIGGER&quot; &#124; &quot;SELECT_RANGE_TRIGGER&quot; &#124; &quot;VALUE_CLICK_TRIGGER&quot;&gt;(triggerId: T) =&gt; Action&lt;TriggerContextMapping[T], &quot;&quot; &#124; &quot;ACTION_VISUALIZE_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_GEO_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_LENS_FIELD&quot; &#124; &quot;ACTION_GLOBAL_APPLY_FILTER&quot; &#124; &quot;ACTION_SELECT_RANGE&quot; &#124; &quot;ACTION_VALUE_CLICK&quot; &#124; &quot;ACTION_CUSTOMIZE_PANEL&quot; &#124; &quot;ACTION_ADD_PANEL&quot; &#124; &quot;openInspector&quot; &#124; &quot;deletePanel&quot; &#124; &quot;editPanel&quot;&gt;[]</code> |  |
+|  [getTriggerCompatibleActions](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.gettriggercompatibleactions.md) |  | <code>&lt;T extends &quot;&quot; &#124; &quot;ROW_CLICK_TRIGGER&quot; &#124; &quot;VISUALIZE_FIELD_TRIGGER&quot; &#124; &quot;VISUALIZE_GEO_FIELD_TRIGGER&quot; &#124; &quot;FILTER_TRIGGER&quot; &#124; &quot;CONTEXT_MENU_TRIGGER&quot; &#124; &quot;PANEL_BADGE_TRIGGER&quot; &#124; &quot;PANEL_NOTIFICATION_TRIGGER&quot; &#124; &quot;SELECT_RANGE_TRIGGER&quot; &#124; &quot;VALUE_CLICK_TRIGGER&quot;&gt;(triggerId: T, context: TriggerContextMapping[T]) =&gt; Promise&lt;Action&lt;TriggerContextMapping[T], &quot;&quot; &#124; &quot;ACTION_VISUALIZE_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_GEO_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_LENS_FIELD&quot; &#124; &quot;ACTION_GLOBAL_APPLY_FILTER&quot; &#124; &quot;ACTION_SELECT_RANGE&quot; &#124; &quot;ACTION_VALUE_CLICK&quot; &#124; &quot;ACTION_CUSTOMIZE_PANEL&quot; &#124; &quot;ACTION_ADD_PANEL&quot; &#124; &quot;openInspector&quot; &#124; &quot;deletePanel&quot; &#124; &quot;editPanel&quot;&gt;[]&gt;</code> |  |
 |  [hasAction](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.hasaction.md) |  | <code>(actionId: string) =&gt; boolean</code> |  |
-|  [registerAction](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.registeraction.md) |  | <code>&lt;A extends ActionDefinition&lt;{}&gt;&gt;(definition: A) =&gt; Action&lt;ActionContext&lt;A&gt;, &quot;&quot; &#124; &quot;ACTION_VISUALIZE_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_GEO_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_LENS_FIELD&quot; &#124; &quot;ACTION_GLOBAL_APPLY_FILTER&quot; &#124; &quot;ACTION_SELECT_RANGE&quot; &#124; &quot;ACTION_VALUE_CLICK&quot; &#124; &quot;ACTION_CUSTOMIZE_PANEL&quot; &#124; &quot;ACTION_ADD_PANEL&quot; &#124; &quot;openInspector&quot; &#124; &quot;deletePanel&quot; &#124; &quot;editPanel&quot; &#124; &quot;togglePanel&quot; &#124; &quot;replacePanel&quot; &#124; &quot;clonePanel&quot; &#124; &quot;addToFromLibrary&quot; &#124; &quot;unlinkFromLibrary&quot; &#124; &quot;ACTION_LIBRARY_NOTIFICATION&quot; &#124; &quot;ACTION_EXPORT_CSV&quot;&gt;</code> |  |
+|  [registerAction](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.registeraction.md) |  | <code>&lt;A extends ActionDefinition&lt;{}&gt;&gt;(definition: A) =&gt; Action&lt;ActionContext&lt;A&gt;, &quot;&quot; &#124; &quot;ACTION_VISUALIZE_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_GEO_FIELD&quot; &#124; &quot;ACTION_VISUALIZE_LENS_FIELD&quot; &#124; &quot;ACTION_GLOBAL_APPLY_FILTER&quot; &#124; &quot;ACTION_SELECT_RANGE&quot; &#124; &quot;ACTION_VALUE_CLICK&quot; &#124; &quot;ACTION_CUSTOMIZE_PANEL&quot; &#124; &quot;ACTION_ADD_PANEL&quot; &#124; &quot;openInspector&quot; &#124; &quot;deletePanel&quot; &#124; &quot;editPanel&quot;&gt;</code> |  |
 |  [registerTrigger](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.registertrigger.md) |  | <code>(trigger: Trigger) =&gt; void</code> |  |
 |  [triggers](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.triggers.md) |  | <code>TriggerRegistry</code> |  |
 |  [triggerToActions](./kibana-plugin-plugins-ui_actions-public.uiactionsservice.triggertoactions.md) |  | <code>TriggerToActionsRegistry</code> |  |
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.registeraction.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.registeraction.md
index 6f03777e14552a..dee5f75f7c074d 100644
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.registeraction.md
+++ b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.uiactionsservice.registeraction.md
@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-readonly registerAction: <A extends ActionDefinition<{}>>(definition: A) => Action<ActionContext<A>, "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel" | "togglePanel" | "replacePanel" | "clonePanel" | "addToFromLibrary" | "unlinkFromLibrary" | "ACTION_LIBRARY_NOTIFICATION" | "ACTION_EXPORT_CSV">;
+readonly registerAction: <A extends ActionDefinition<{}>>(definition: A) => Action<ActionContext<A>, "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel">;
 ```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.value_click_trigger.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.value_click_trigger.md
deleted file mode 100644
index bd8d4dc50b8fdf..00000000000000
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.value_click_trigger.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-plugins-ui\_actions-public](./kibana-plugin-plugins-ui_actions-public.md) &gt; [VALUE\_CLICK\_TRIGGER](./kibana-plugin-plugins-ui_actions-public.value_click_trigger.md)
-
-## VALUE\_CLICK\_TRIGGER variable
-
-<b>Signature:</b>
-
-```typescript
-VALUE_CLICK_TRIGGER = "VALUE_CLICK_TRIGGER"
-```
diff --git a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.valueclicktrigger.md b/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.valueclicktrigger.md
deleted file mode 100644
index 5c4fc284d83b1c..00000000000000
--- a/docs/development/plugins/ui_actions/public/kibana-plugin-plugins-ui_actions-public.valueclicktrigger.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-plugins-ui\_actions-public](./kibana-plugin-plugins-ui_actions-public.md) &gt; [valueClickTrigger](./kibana-plugin-plugins-ui_actions-public.valueclicktrigger.md)
-
-## valueClickTrigger variable
-
-<b>Signature:</b>
-
-```typescript
-valueClickTrigger: Trigger<'VALUE_CLICK_TRIGGER'>
-```
diff --git a/src/dev/run_find_plugins_with_circular_deps.ts b/src/dev/run_find_plugins_with_circular_deps.ts
index f4662820a1fb07..1a087e2a01fb27 100644
--- a/src/dev/run_find_plugins_with_circular_deps.ts
+++ b/src/dev/run_find_plugins_with_circular_deps.ts
@@ -31,13 +31,8 @@ interface Options {
 type CircularDepList = Set<string>;
 
 const allowedList: CircularDepList = new Set([
-  'src/plugins/charts -> src/plugins/expressions',
+  'src/plugins/charts -> src/plugins/discover',
   'src/plugins/charts -> src/plugins/vis_default_editor',
-  'src/plugins/data -> src/plugins/embeddable',
-  'src/plugins/data -> src/plugins/expressions',
-  'src/plugins/data -> src/plugins/ui_actions',
-  'src/plugins/embeddable -> src/plugins/ui_actions',
-  'src/plugins/expressions -> src/plugins/visualizations',
   'src/plugins/vis_default_editor -> src/plugins/visualizations',
   'src/plugins/vis_default_editor -> src/plugins/visualize',
   'src/plugins/visualizations -> src/plugins/visualize',
diff --git a/src/plugins/data/public/actions/apply_filter_action.ts b/src/plugins/data/public/actions/apply_filter_action.ts
index 944da72bd11d1d..84ce5b03826247 100644
--- a/src/plugins/data/public/actions/apply_filter_action.ts
+++ b/src/plugins/data/public/actions/apply_filter_action.ts
@@ -22,7 +22,6 @@ import { toMountPoint } from '../../../kibana_react/public';
 import { ActionByType, createAction, IncompatibleActionError } from '../../../ui_actions/public';
 import { getOverlays, getIndexPatterns } from '../services';
 import { applyFiltersPopover } from '../ui/apply_filters';
-import type { IEmbeddable } from '../../../embeddable/public';
 import { Filter, FilterManager, TimefilterContract, esFilters } from '..';
 
 export const ACTION_GLOBAL_APPLY_FILTER = 'ACTION_GLOBAL_APPLY_FILTER';
@@ -30,7 +29,9 @@ export const ACTION_GLOBAL_APPLY_FILTER = 'ACTION_GLOBAL_APPLY_FILTER';
 export interface ApplyGlobalFilterActionContext {
   filters: Filter[];
   timeFieldName?: string;
-  embeddable?: IEmbeddable;
+  // Need to make this unknown to prevent circular dependencies.
+  // Apps using this property will need to cast to `IEmbeddable`.
+  embeddable?: unknown;
 }
 
 async function isCompatible(context: ApplyGlobalFilterActionContext) {
diff --git a/src/plugins/data/public/actions/filters/create_filters_from_range_select.ts b/src/plugins/data/public/actions/filters/create_filters_from_range_select.ts
index 2d7aeff79a689a..2b0911b72abd58 100644
--- a/src/plugins/data/public/actions/filters/create_filters_from_range_select.ts
+++ b/src/plugins/data/public/actions/filters/create_filters_from_range_select.ts
@@ -19,12 +19,20 @@
 
 import { last } from 'lodash';
 import moment from 'moment';
+import { Datatable } from 'src/plugins/expressions';
 import { esFilters, IFieldType, RangeFilterParams } from '../../../public';
 import { getIndexPatterns, getSearchService } from '../../../public/services';
-import { RangeSelectContext } from '../../../../embeddable/public';
 import { AggConfigSerialized } from '../../../common/search/aggs';
 
-export async function createFiltersFromRangeSelectAction(event: RangeSelectContext['data']) {
+/** @internal */
+export interface RangeSelectDataContext {
+  table: Datatable;
+  column: number;
+  range: number[];
+  timeFieldName?: string;
+}
+
+export async function createFiltersFromRangeSelectAction(event: RangeSelectDataContext) {
   const column: Record<string, any> = event.table.columns[event.column];
 
   if (!column || !column.meta) {
diff --git a/src/plugins/data/public/actions/filters/create_filters_from_value_click.test.ts b/src/plugins/data/public/actions/filters/create_filters_from_value_click.test.ts
index 23d2ab080d75ef..04801a5ee1ceab 100644
--- a/src/plugins/data/public/actions/filters/create_filters_from_value_click.test.ts
+++ b/src/plugins/data/public/actions/filters/create_filters_from_value_click.test.ts
@@ -25,8 +25,10 @@ import {
 } from '../../../public';
 import { dataPluginMock } from '../../../public/mocks';
 import { setIndexPatterns, setSearchService } from '../../../public/services';
-import { createFiltersFromValueClickAction } from './create_filters_from_value_click';
-import { ValueClickContext } from '../../../../embeddable/public';
+import {
+  createFiltersFromValueClickAction,
+  ValueClickDataContext,
+} from './create_filters_from_value_click';
 
 const mockField = {
   name: 'bytes',
@@ -34,7 +36,7 @@ const mockField = {
 };
 
 describe('createFiltersFromValueClick', () => {
-  let dataPoints: ValueClickContext['data']['data'];
+  let dataPoints: ValueClickDataContext['data'];
 
   beforeEach(() => {
     dataPoints = [
diff --git a/src/plugins/data/public/actions/filters/create_filters_from_value_click.ts b/src/plugins/data/public/actions/filters/create_filters_from_value_click.ts
index ce7ecf434056a6..30fef7e3a7c66f 100644
--- a/src/plugins/data/public/actions/filters/create_filters_from_value_click.ts
+++ b/src/plugins/data/public/actions/filters/create_filters_from_value_click.ts
@@ -20,9 +20,20 @@
 import { Datatable } from '../../../../../plugins/expressions/public';
 import { esFilters, Filter } from '../../../public';
 import { getIndexPatterns, getSearchService } from '../../../public/services';
-import { ValueClickContext } from '../../../../embeddable/public';
 import { AggConfigSerialized } from '../../../common/search/aggs';
 
+/** @internal */
+export interface ValueClickDataContext {
+  data: Array<{
+    table: Pick<Datatable, 'rows' | 'columns'>;
+    column: number;
+    row: number;
+    value: any;
+  }>;
+  timeFieldName?: string;
+  negate?: boolean;
+}
+
 /**
  * For terms aggregations on `__other__` buckets, this assembles a list of applicable filter
  * terms based on a specific cell in the tabified data.
@@ -120,7 +131,7 @@ const createFilter = async (
 export const createFiltersFromValueClickAction = async ({
   data,
   negate,
-}: ValueClickContext['data']) => {
+}: ValueClickDataContext) => {
   const filters: Filter[] = [];
 
   await Promise.all(
diff --git a/src/plugins/data/public/actions/select_range_action.ts b/src/plugins/data/public/actions/select_range_action.ts
index 1781da980dc30d..3b84523d782f60 100644
--- a/src/plugins/data/public/actions/select_range_action.ts
+++ b/src/plugins/data/public/actions/select_range_action.ts
@@ -17,16 +17,22 @@
  * under the License.
  */
 
-import {
-  ActionByType,
-  APPLY_FILTER_TRIGGER,
-  createAction,
-  UiActionsStart,
-} from '../../../../plugins/ui_actions/public';
+import { Datatable } from 'src/plugins/expressions/public';
+import { ActionByType, createAction, UiActionsStart } from '../../../../plugins/ui_actions/public';
+import { APPLY_FILTER_TRIGGER } from '../triggers';
 import { createFiltersFromRangeSelectAction } from './filters/create_filters_from_range_select';
-import type { RangeSelectContext } from '../../../embeddable/public';
 
-export type SelectRangeActionContext = RangeSelectContext;
+export interface SelectRangeActionContext {
+  // Need to make this unknown to prevent circular dependencies.
+  // Apps using this property will need to cast to `IEmbeddable`.
+  embeddable?: unknown;
+  data: {
+    table: Datatable;
+    column: number;
+    range: number[];
+    timeFieldName?: string;
+  };
+}
 
 export const ACTION_SELECT_RANGE = 'ACTION_SELECT_RANGE';
 
diff --git a/src/plugins/data/public/actions/value_click_action.ts b/src/plugins/data/public/actions/value_click_action.ts
index 81e62380eacfb5..8f207e94e8fbe9 100644
--- a/src/plugins/data/public/actions/value_click_action.ts
+++ b/src/plugins/data/public/actions/value_click_action.ts
@@ -17,19 +17,31 @@
  * under the License.
  */
 
-import {
-  ActionByType,
-  APPLY_FILTER_TRIGGER,
-  createAction,
-  UiActionsStart,
-} from '../../../../plugins/ui_actions/public';
+import { Datatable } from 'src/plugins/expressions/public';
+import { ActionByType, createAction, UiActionsStart } from '../../../../plugins/ui_actions/public';
+import { APPLY_FILTER_TRIGGER } from '../triggers';
 import { createFiltersFromValueClickAction } from './filters/create_filters_from_value_click';
 import type { Filter } from '../../common/es_query/filters';
-import type { ValueClickContext } from '../../../embeddable/public';
 
 export type ValueClickActionContext = ValueClickContext;
 export const ACTION_VALUE_CLICK = 'ACTION_VALUE_CLICK';
 
+export interface ValueClickContext {
+  // Need to make this unknown to prevent circular dependencies.
+  // Apps using this property will need to cast to `IEmbeddable`.
+  embeddable?: unknown;
+  data: {
+    data: Array<{
+      table: Pick<Datatable, 'rows' | 'columns'>;
+      column: number;
+      row: number;
+      value: any;
+    }>;
+    timeFieldName?: string;
+    negate?: boolean;
+  };
+}
+
 export function createValueClickAction(
   getStartServices: () => { uiActions: UiActionsStart }
 ): ActionByType<typeof ACTION_VALUE_CLICK> {
diff --git a/src/plugins/data/public/index.ts b/src/plugins/data/public/index.ts
index 3dda04d738c969..7b15e2576e704a 100644
--- a/src/plugins/data/public/index.ts
+++ b/src/plugins/data/public/index.ts
@@ -483,6 +483,7 @@ export {
 export { isTimeRange, isQuery, isFilter, isFilters } from '../common';
 
 export { ACTION_GLOBAL_APPLY_FILTER, ApplyGlobalFilterActionContext } from './actions';
+export { APPLY_FILTER_TRIGGER } from './triggers';
 
 /*
  * Plugin setup
diff --git a/src/plugins/data/public/plugin.ts b/src/plugins/data/public/plugin.ts
index eb3a053b78a2d3..c60a1efabf9871 100644
--- a/src/plugins/data/public/plugin.ts
+++ b/src/plugins/data/public/plugin.ts
@@ -48,11 +48,6 @@ import {
   setUiSettings,
 } from './services';
 import { createSearchBar } from './ui/search_bar/create_search_bar';
-import {
-  SELECT_RANGE_TRIGGER,
-  VALUE_CLICK_TRIGGER,
-  APPLY_FILTER_TRIGGER,
-} from '../../ui_actions/public';
 import {
   ACTION_GLOBAL_APPLY_FILTER,
   createFilterAction,
@@ -66,13 +61,18 @@ import {
   createValueClickAction,
   createSelectRangeAction,
 } from './actions';
-
+import { APPLY_FILTER_TRIGGER, applyFilterTrigger } from './triggers';
 import { SavedObjectsClientPublicToCommon } from './index_patterns';
 import { getIndexPatternLoad } from './index_patterns/expressions';
 import { UsageCollectionSetup } from '../../usage_collection/public';
 import { getTableViewDescription } from './utils/table_inspector_view';
+import { TriggerId } from '../../ui_actions/public';
 
 declare module '../../ui_actions/public' {
+  export interface TriggerContextMapping {
+    [APPLY_FILTER_TRIGGER]: ApplyGlobalFilterActionContext;
+  }
+
   export interface ActionContextMapping {
     [ACTION_GLOBAL_APPLY_FILTER]: ApplyGlobalFilterActionContext;
     [ACTION_SELECT_RANGE]: SelectRangeActionContext;
@@ -118,19 +118,21 @@ export class DataPublicPlugin
       storage: this.storage,
     });
 
+    uiActions.registerTrigger(applyFilterTrigger);
+
     uiActions.registerAction(
       createFilterAction(queryService.filterManager, queryService.timefilter.timefilter)
     );
 
     uiActions.addTriggerAction(
-      SELECT_RANGE_TRIGGER,
+      'SELECT_RANGE_TRIGGER' as TriggerId,
       createSelectRangeAction(() => ({
         uiActions: startServices().plugins.uiActions,
       }))
     );
 
     uiActions.addTriggerAction(
-      VALUE_CLICK_TRIGGER,
+      'VALUE_CLICK_TRIGGER' as TriggerId,
       createValueClickAction(() => ({
         uiActions: startServices().plugins.uiActions,
       }))
diff --git a/src/plugins/data/public/public.api.md b/src/plugins/data/public/public.api.md
index e5df6d860b4041..120540ddb92ecf 100644
--- a/src/plugins/data/public/public.api.md
+++ b/src/plugins/data/public/public.api.md
@@ -464,14 +464,17 @@ export type AggsStart = Assign<AggsCommonStart, {
     types: AggTypesRegistryStart;
 }>;
 
+// Warning: (ae-missing-release-tag) "APPLY_FILTER_TRIGGER" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const APPLY_FILTER_TRIGGER = "FILTER_TRIGGER";
+
 // Warning: (ae-missing-release-tag) "ApplyGlobalFilterActionContext" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export interface ApplyGlobalFilterActionContext {
-    // Warning: (ae-forgotten-export) The symbol "IEmbeddable" needs to be exported by the entry point index.d.ts
-    //
     // (undocumented)
-    embeddable?: IEmbeddable;
+    embeddable?: unknown;
     // (undocumented)
     filters: Filter[];
     // (undocumented)
diff --git a/src/plugins/ui_actions/public/triggers/apply_filter_trigger.ts b/src/plugins/data/public/triggers/apply_filter_trigger.ts
similarity index 85%
rename from src/plugins/ui_actions/public/triggers/apply_filter_trigger.ts
rename to src/plugins/data/public/triggers/apply_filter_trigger.ts
index aa54706476a8f5..816c1737608daa 100644
--- a/src/plugins/ui_actions/public/triggers/apply_filter_trigger.ts
+++ b/src/plugins/data/public/triggers/apply_filter_trigger.ts
@@ -18,15 +18,15 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { Trigger } from '.';
+import { Trigger } from '../../../ui_actions/public';
 
 export const APPLY_FILTER_TRIGGER = 'FILTER_TRIGGER';
 export const applyFilterTrigger: Trigger<'FILTER_TRIGGER'> = {
   id: APPLY_FILTER_TRIGGER,
-  title: i18n.translate('uiActions.triggers.applyFilterTitle', {
+  title: i18n.translate('data.triggers.applyFilterTitle', {
     defaultMessage: 'Apply filter',
   }),
-  description: i18n.translate('uiActions.triggers.applyFilterDescription', {
+  description: i18n.translate('data.triggers.applyFilterDescription', {
     defaultMessage: 'When kibana filter is applied. Could be a single value or a range filter.',
   }),
 };
diff --git a/src/plugins/ui_actions/public/triggers/value_click_trigger.ts b/src/plugins/data/public/triggers/index.ts
similarity index 62%
rename from src/plugins/ui_actions/public/triggers/value_click_trigger.ts
rename to src/plugins/data/public/triggers/index.ts
index f1aff6322522ae..36a38ae76bc0e9 100644
--- a/src/plugins/ui_actions/public/triggers/value_click_trigger.ts
+++ b/src/plugins/data/public/triggers/index.ts
@@ -17,16 +17,4 @@
  * under the License.
  */
 
-import { i18n } from '@kbn/i18n';
-import { Trigger } from '.';
-
-export const VALUE_CLICK_TRIGGER = 'VALUE_CLICK_TRIGGER';
-export const valueClickTrigger: Trigger<'VALUE_CLICK_TRIGGER'> = {
-  id: VALUE_CLICK_TRIGGER,
-  title: i18n.translate('uiActions.triggers.valueClickTitle', {
-    defaultMessage: 'Single click',
-  }),
-  description: i18n.translate('uiActions.triggers.valueClickDescription', {
-    defaultMessage: 'A data point click on the visualization',
-  }),
-};
+export * from './apply_filter_trigger';
diff --git a/src/plugins/data/public/utils/table_inspector_view/components/data_table.tsx b/src/plugins/data/public/utils/table_inspector_view/components/data_table.tsx
index f4d1a8988da788..f842568859fc24 100644
--- a/src/plugins/data/public/utils/table_inspector_view/components/data_table.tsx
+++ b/src/plugins/data/public/utils/table_inspector_view/components/data_table.tsx
@@ -38,7 +38,7 @@ import { DataViewRow, DataViewColumn } from '../types';
 import { IUiSettingsClient } from '../../../../../../core/public';
 import { Datatable, DatatableColumn } from '../../../../../expressions/public';
 import { FieldFormatsStart } from '../../../field_formats';
-import { UiActionsStart } from '../../../../../ui_actions/public';
+import { TriggerId, UiActionsStart } from '../../../../../ui_actions/public';
 
 interface DataTableFormatState {
   columns: DataViewColumn[];
@@ -112,7 +112,7 @@ export class DataTableFormat extends Component<DataTableFormatProps, DataTableFo
                   onClick={() => {
                     const value = table.rows[rowIndex][column.id];
                     const eventData = { table, column: columnIndex, row: rowIndex, value };
-                    uiActions.executeTriggerActions('VALUE_CLICK_TRIGGER', {
+                    uiActions.executeTriggerActions('VALUE_CLICK_TRIGGER' as TriggerId, {
                       data: { data: [eventData] },
                     });
                   }}
@@ -145,7 +145,7 @@ export class DataTableFormat extends Component<DataTableFormatProps, DataTableFo
                     onClick={() => {
                       const value = table.rows[rowIndex][column.id];
                       const eventData = { table, column: columnIndex, row: rowIndex, value };
-                      uiActions.executeTriggerActions('VALUE_CLICK_TRIGGER', {
+                      uiActions.executeTriggerActions('VALUE_CLICK_TRIGGER' as TriggerId, {
                         data: { data: [eventData], negate: true },
                       });
                     }}
diff --git a/src/plugins/data/server/server.api.md b/src/plugins/data/server/server.api.md
index 4d24e6d1afd498..60d5e167921cc7 100644
--- a/src/plugins/data/server/server.api.md
+++ b/src/plugins/data/server/server.api.md
@@ -1115,7 +1115,7 @@ export class Plugin implements Plugin_2<PluginSetup, PluginStart, DataPluginSetu
         __enhance: (enhancements: DataEnhancements) => void;
         search: ISearchSetup;
         fieldFormats: {
-            register: (customFieldFormat: import("../common").FieldFormatInstanceType) => number;
+            register: (customFieldFormat: import("../public").FieldFormatInstanceType) => number;
         };
     };
     // (undocumented)
@@ -1124,7 +1124,7 @@ export class Plugin implements Plugin_2<PluginSetup, PluginStart, DataPluginSetu
             fieldFormatServiceFactory: (uiSettings: import("src/core/server").IUiSettingsClient) => Promise<import("../common").FieldFormatsRegistry>;
         };
         indexPatterns: {
-            indexPatternsServiceFactory: (savedObjectsClient: Pick<import("src/core/server").SavedObjectsClient, "update" | "find" | "get" | "delete" | "errors" | "create" | "bulkCreate" | "checkConflicts" | "bulkGet" | "addToNamespaces" | "deleteFromNamespaces" | "bulkUpdate" | "removeReferencesTo">, elasticsearchClient: import("src/core/server").ElasticsearchClient) => Promise<import("../common").IndexPatternsService>;
+            indexPatternsServiceFactory: (savedObjectsClient: Pick<import("src/core/server").SavedObjectsClient, "update" | "find" | "get" | "delete" | "errors" | "create" | "bulkCreate" | "checkConflicts" | "bulkGet" | "addToNamespaces" | "deleteFromNamespaces" | "bulkUpdate" | "removeReferencesTo">, elasticsearchClient: import("src/core/server").ElasticsearchClient) => Promise<import("../public").IndexPatternsService>;
         };
         search: ISearchStart<import("./search").IEsSearchRequest, import("./search").IEsSearchResponse<any>>;
     };
diff --git a/src/plugins/discover/public/application/embeddable/search_embeddable.ts b/src/plugins/discover/public/application/embeddable/search_embeddable.ts
index ff408ba431ed95..d0c3907d312420 100644
--- a/src/plugins/discover/public/application/embeddable/search_embeddable.ts
+++ b/src/plugins/discover/public/application/embeddable/search_embeddable.ts
@@ -21,9 +21,10 @@ import angular from 'angular';
 import _ from 'lodash';
 import { Subscription } from 'rxjs';
 import { i18n } from '@kbn/i18n';
-import { UiActionsStart, APPLY_FILTER_TRIGGER } from '../../../../ui_actions/public';
+import { UiActionsStart } from '../../../../ui_actions/public';
 import { RequestAdapter, Adapters } from '../../../../inspector/public';
 import {
+  APPLY_FILTER_TRIGGER,
   esFilters,
   Filter,
   TimeRange,
diff --git a/src/plugins/embeddable/common/types.ts b/src/plugins/embeddable/common/types.ts
index 8965446cc85fa7..d893724f616d2b 100644
--- a/src/plugins/embeddable/common/types.ts
+++ b/src/plugins/embeddable/common/types.ts
@@ -18,8 +18,6 @@
  */
 
 import { PersistableStateService, SerializableState } from '../../kibana_utils/common';
-import { Query, TimeRange } from '../../data/common/query';
-import { Filter } from '../../data/common/es_query/filters';
 
 export enum ViewMode {
   EDIT = 'edit',
@@ -53,21 +51,6 @@ export type EmbeddableInput = {
    */
   disableTriggers?: boolean;
 
-  /**
-   * Time range of the chart.
-   */
-  timeRange?: TimeRange;
-
-  /**
-   * Visualization query string used to narrow down results.
-   */
-  query?: Query;
-
-  /**
-   * Visualization filters used to narrow down results.
-   */
-  filters?: Filter[];
-
   /**
    * Search session id to group searches
    */
diff --git a/src/plugins/embeddable/public/bootstrap.ts b/src/plugins/embeddable/public/bootstrap.ts
index 5c95214ef591bf..efaff42c19e2f5 100644
--- a/src/plugins/embeddable/public/bootstrap.ts
+++ b/src/plugins/embeddable/public/bootstrap.ts
@@ -18,18 +18,24 @@
  */
 import { UiActionsSetup } from '../../ui_actions/public';
 import {
-  contextMenuTrigger,
-  panelBadgeTrigger,
-  EmbeddableContext,
-  CONTEXT_MENU_TRIGGER,
-  PANEL_BADGE_TRIGGER,
   ACTION_ADD_PANEL,
   ACTION_CUSTOMIZE_PANEL,
-  ACTION_INSPECT_PANEL,
-  REMOVE_PANEL_ACTION,
   ACTION_EDIT_PANEL,
-  panelNotificationTrigger,
+  ACTION_INSPECT_PANEL,
+  CONTEXT_MENU_TRIGGER,
+  contextMenuTrigger,
+  EmbeddableContext,
+  PANEL_BADGE_TRIGGER,
   PANEL_NOTIFICATION_TRIGGER,
+  panelBadgeTrigger,
+  panelNotificationTrigger,
+  RangeSelectContext,
+  REMOVE_PANEL_ACTION,
+  SELECT_RANGE_TRIGGER,
+  selectRangeTrigger,
+  ValueClickContext,
+  VALUE_CLICK_TRIGGER,
+  valueClickTrigger,
 } from './lib';
 
 declare module '../../ui_actions/public' {
@@ -37,6 +43,8 @@ declare module '../../ui_actions/public' {
     [CONTEXT_MENU_TRIGGER]: EmbeddableContext;
     [PANEL_BADGE_TRIGGER]: EmbeddableContext;
     [PANEL_NOTIFICATION_TRIGGER]: EmbeddableContext;
+    [SELECT_RANGE_TRIGGER]: RangeSelectContext;
+    [VALUE_CLICK_TRIGGER]: ValueClickContext;
   }
 
   export interface ActionContextMapping {
@@ -56,4 +64,6 @@ export const bootstrap = (uiActions: UiActionsSetup) => {
   uiActions.registerTrigger(contextMenuTrigger);
   uiActions.registerTrigger(panelBadgeTrigger);
   uiActions.registerTrigger(panelNotificationTrigger);
+  uiActions.registerTrigger(selectRangeTrigger);
+  uiActions.registerTrigger(valueClickTrigger);
 };
diff --git a/src/plugins/embeddable/public/index.ts b/src/plugins/embeddable/public/index.ts
index 0fc7c7965010b2..d537ef2bd0c5c8 100644
--- a/src/plugins/embeddable/public/index.ts
+++ b/src/plugins/embeddable/public/index.ts
@@ -65,6 +65,8 @@ export {
   PanelNotFoundError,
   PanelState,
   PropertySpec,
+  SELECT_RANGE_TRIGGER,
+  VALUE_CLICK_TRIGGER,
   ViewMode,
   withEmbeddableSubscription,
   SavedObjectEmbeddableInput,
diff --git a/src/plugins/embeddable/public/lib/embeddables/embeddable.test.tsx b/src/plugins/embeddable/public/lib/embeddables/embeddable.test.tsx
index c7c71656bceb22..c0e13a84066ca0 100644
--- a/src/plugins/embeddable/public/lib/embeddables/embeddable.test.tsx
+++ b/src/plugins/embeddable/public/lib/embeddables/embeddable.test.tsx
@@ -24,8 +24,10 @@ import { Embeddable } from './embeddable';
 import { EmbeddableOutput, EmbeddableInput } from './i_embeddable';
 import { ViewMode } from '../types';
 import { ContactCardEmbeddable } from '../test_samples/embeddables/contact_card/contact_card_embeddable';
-import { FilterableEmbeddable } from '../test_samples/embeddables/filterable_embeddable';
-import type { Filter } from '../../../../data/public';
+import {
+  MockFilter,
+  FilterableEmbeddable,
+} from '../test_samples/embeddables/filterable_embeddable';
 
 class TestClass {
   constructor() {}
@@ -83,7 +85,7 @@ test('Embeddable reload is called if lastReloadRequest input time changes', asyn
 test('Embeddable reload is called if lastReloadRequest input time changed and new input is used', async () => {
   const hello = new FilterableEmbeddable({ id: '123', filters: [], lastReloadRequestTime: 0 });
 
-  const aFilter = ({} as unknown) as Filter;
+  const aFilter = ({} as unknown) as MockFilter;
   hello.reload = jest.fn(() => {
     // when reload is called embeddable already has new input
     expect(hello.getInput().filters).toEqual([aFilter]);
diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.test.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.test.tsx
index 0361939fd07e6a..cb78fac5471a94 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.test.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.test.tsx
@@ -20,6 +20,7 @@
 import { ViewMode, EmbeddableOutput, isErrorEmbeddable } from '../../../../';
 import { AddPanelAction } from './add_panel_action';
 import {
+  MockFilter,
   FILTERABLE_EMBEDDABLE,
   FilterableEmbeddable,
   FilterableEmbeddableInput,
@@ -28,7 +29,6 @@ import { FilterableEmbeddableFactory } from '../../../../test_samples/embeddable
 import { FilterableContainer } from '../../../../test_samples/embeddables/filterable_container';
 import { coreMock } from '../../../../../../../../core/public/mocks';
 import { ContactCardEmbeddable } from '../../../../test_samples';
-import { esFilters, Filter } from '../../../../../../../../plugins/data/public';
 import { EmbeddableStart } from '../../../../../plugin';
 import { embeddablePluginMock } from '../../../../../mocks';
 import { defaultTrigger } from '../../../../../../../ui_actions/public/triggers';
@@ -51,8 +51,8 @@ beforeEach(async () => {
     () => null
   );
 
-  const derivedFilter: Filter = {
-    $state: { store: esFilters.FilterStateStore.APP_STATE },
+  const derivedFilter: MockFilter = {
+    $state: { store: 'appState' },
     meta: { disabled: false, alias: 'name', negate: false },
     query: { match: {} },
   };
diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/inspect_panel_action.test.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/inspect_panel_action.test.tsx
index eb836414489869..b784a46127305c 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/inspect_panel_action.test.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/inspect_panel_action.test.tsx
@@ -29,7 +29,6 @@ import {
 import { inspectorPluginMock } from '../../../../../../../plugins/inspector/public/mocks';
 import { EmbeddableOutput, isErrorEmbeddable, ErrorEmbeddable } from '../../../embeddables';
 import { of } from '../../../../tests/helpers';
-import { esFilters } from '../../../../../../../plugins/data/public';
 import { embeddablePluginMock } from '../../../../mocks';
 import { EmbeddableStart } from '../../../../plugin';
 
@@ -43,7 +42,7 @@ const setupTests = async () => {
       panels: {},
       filters: [
         {
-          $state: { store: esFilters.FilterStateStore.APP_STATE },
+          $state: { store: 'appState' },
           meta: { disabled: false, alias: 'name', negate: false },
           query: { match: {} },
         },
diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/remove_panel_action.test.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/remove_panel_action.test.tsx
index dea4a88bda0823..ce6a1cc20fc4da 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/remove_panel_action.test.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/remove_panel_action.test.tsx
@@ -21,6 +21,7 @@ import { EmbeddableOutput, isErrorEmbeddable } from '../../../';
 import { RemovePanelAction } from './remove_panel_action';
 import { EmbeddableStart } from '../../../../plugin';
 import {
+  MockFilter,
   FILTERABLE_EMBEDDABLE,
   FilterableEmbeddable,
   FilterableEmbeddableInput,
@@ -29,7 +30,6 @@ import { FilterableEmbeddableFactory } from '../../../test_samples/embeddables/f
 import { FilterableContainer } from '../../../test_samples/embeddables/filterable_container';
 import { ViewMode } from '../../../types';
 import { ContactCardEmbeddable } from '../../../test_samples/embeddables/contact_card/contact_card_embeddable';
-import { esFilters, Filter } from '../../../../../../../plugins/data/public';
 import { embeddablePluginMock } from '../../../../mocks';
 
 const { setup, doStart } = embeddablePluginMock.createInstance();
@@ -39,8 +39,8 @@ let container: FilterableContainer;
 let embeddable: FilterableEmbeddable;
 
 beforeEach(async () => {
-  const derivedFilter: Filter = {
-    $state: { store: esFilters.FilterStateStore.APP_STATE },
+  const derivedFilter: MockFilter = {
+    $state: { store: 'appState' },
     meta: { disabled: false, alias: 'name', negate: false },
     query: { match: {} },
   };
diff --git a/src/plugins/embeddable/public/lib/test_samples/embeddables/filterable_container.tsx b/src/plugins/embeddable/public/lib/test_samples/embeddables/filterable_container.tsx
index db71b94ac855fd..23696612fd82aa 100644
--- a/src/plugins/embeddable/public/lib/test_samples/embeddables/filterable_container.tsx
+++ b/src/plugins/embeddable/public/lib/test_samples/embeddables/filterable_container.tsx
@@ -18,13 +18,13 @@
  */
 
 import { Container, ContainerInput } from '../../containers';
-import { Filter } from '../../../../../data/public';
 import { EmbeddableStart } from '../../../plugin';
+import { MockFilter } from './filterable_embeddable';
 
 export const FILTERABLE_CONTAINER = 'FILTERABLE_CONTAINER';
 
 export interface FilterableContainerInput extends ContainerInput {
-  filters: Filter[];
+  filters: MockFilter[];
 }
 
 /**
@@ -33,7 +33,7 @@ export interface FilterableContainerInput extends ContainerInput {
  * here instead
  */
 export type InheritedChildrenInput = {
-  filters: Filter[];
+  filters: MockFilter[];
   id?: string;
 };
 
diff --git a/src/plugins/embeddable/public/lib/test_samples/embeddables/filterable_embeddable.tsx b/src/plugins/embeddable/public/lib/test_samples/embeddables/filterable_embeddable.tsx
index fd6ea3b9aa2b28..99d21198dd151d 100644
--- a/src/plugins/embeddable/public/lib/test_samples/embeddables/filterable_embeddable.tsx
+++ b/src/plugins/embeddable/public/lib/test_samples/embeddables/filterable_embeddable.tsx
@@ -19,12 +19,18 @@
 
 import { IContainer } from '../../containers';
 import { EmbeddableOutput, EmbeddableInput, Embeddable } from '../../embeddables';
-import { Filter } from '../../../../../data/public';
+
+/** @internal */
+export interface MockFilter {
+  $state?: any;
+  meta: any;
+  query?: any;
+}
 
 export const FILTERABLE_EMBEDDABLE = 'FILTERABLE_EMBEDDABLE';
 
 export interface FilterableEmbeddableInput extends EmbeddableInput {
-  filters: Filter[];
+  filters: MockFilter[];
 }
 
 export class FilterableEmbeddable extends Embeddable<FilterableEmbeddableInput, EmbeddableOutput> {
diff --git a/src/plugins/embeddable/public/lib/triggers/triggers.ts b/src/plugins/embeddable/public/lib/triggers/triggers.ts
index c3b1496b8eca82..d9fb063a5bb569 100644
--- a/src/plugins/embeddable/public/lib/triggers/triggers.ts
+++ b/src/plugins/embeddable/public/lib/triggers/triggers.ts
@@ -22,8 +22,8 @@ import { Datatable } from '../../../../expressions';
 import { Trigger, RowClickContext } from '../../../../ui_actions/public';
 import { IEmbeddable } from '..';
 
-export interface EmbeddableContext {
-  embeddable: IEmbeddable;
+export interface EmbeddableContext<T extends IEmbeddable = IEmbeddable> {
+  embeddable: T;
 }
 
 export interface ValueClickContext<T extends IEmbeddable = IEmbeddable> {
@@ -88,6 +88,28 @@ export const panelNotificationTrigger: Trigger<'PANEL_NOTIFICATION_TRIGGER'> = {
   }),
 };
 
+export const SELECT_RANGE_TRIGGER = 'SELECT_RANGE_TRIGGER';
+export const selectRangeTrigger: Trigger<'SELECT_RANGE_TRIGGER'> = {
+  id: SELECT_RANGE_TRIGGER,
+  title: i18n.translate('embeddableApi.selectRangeTrigger.title', {
+    defaultMessage: 'Range selection',
+  }),
+  description: i18n.translate('embeddableApi.selectRangeTrigger.description', {
+    defaultMessage: 'A range of values on the visualization',
+  }),
+};
+
+export const VALUE_CLICK_TRIGGER = 'VALUE_CLICK_TRIGGER';
+export const valueClickTrigger: Trigger<'VALUE_CLICK_TRIGGER'> = {
+  id: VALUE_CLICK_TRIGGER,
+  title: i18n.translate('embeddableApi.valueClickTrigger.title', {
+    defaultMessage: 'Single click',
+  }),
+  description: i18n.translate('embeddableApi.valueClickTrigger.description', {
+    defaultMessage: 'A data point click on the visualization',
+  }),
+};
+
 export const isValueClickTriggerContext = (
   context: ChartActionContext
 ): context is ValueClickContext => context.data && 'data' in context.data;
diff --git a/src/plugins/embeddable/public/mocks.tsx b/src/plugins/embeddable/public/mocks.tsx
index df24d9c0393fe6..c41ecaabe84797 100644
--- a/src/plugins/embeddable/public/mocks.tsx
+++ b/src/plugins/embeddable/public/mocks.tsx
@@ -34,7 +34,6 @@ import { coreMock } from '../../../core/public/mocks';
 import { UiActionsService } from './lib/ui_actions';
 import { CoreStart } from '../../../core/public';
 import { Start as InspectorStart } from '../../inspector/public';
-import { dataPluginMock } from '../../data/public/mocks';
 
 import { inspectorPluginMock } from '../../inspector/public/mocks';
 import { uiActionsPluginMock } from '../../ui_actions/public/mocks';
@@ -136,13 +135,11 @@ const createInstance = (setupPlugins: Partial<EmbeddableSetupDependencies> = {})
   const plugin = new EmbeddablePublicPlugin({} as any);
   const setup = plugin.setup(coreMock.createSetup(), {
     uiActions: setupPlugins.uiActions || uiActionsPluginMock.createSetupContract(),
-    data: dataPluginMock.createSetupContract(),
   });
   const doStart = (startPlugins: Partial<EmbeddableStartDependencies> = {}) =>
     plugin.start(coreMock.createStart(), {
       uiActions: startPlugins.uiActions || uiActionsPluginMock.createStartContract(),
       inspector: inspectorPluginMock.createStartContract(),
-      data: dataPluginMock.createStartContract(),
     });
   return {
     plugin,
diff --git a/src/plugins/embeddable/public/plugin.tsx b/src/plugins/embeddable/public/plugin.tsx
index 6f43d87bdcd53c..a417fb3938b8a6 100644
--- a/src/plugins/embeddable/public/plugin.tsx
+++ b/src/plugins/embeddable/public/plugin.tsx
@@ -19,7 +19,6 @@
 import React from 'react';
 import { Subscription } from 'rxjs';
 import { identity } from 'lodash';
-import { DataPublicPluginSetup, DataPublicPluginStart } from '../../data/public';
 import { getSavedObjectFinder, showSaveModal } from '../../saved_objects/public';
 import { UiActionsSetup, UiActionsStart } from '../../ui_actions/public';
 import { Start as InspectorStart } from '../../inspector/public';
@@ -62,12 +61,10 @@ import {
 } from '../common/lib';
 
 export interface EmbeddableSetupDependencies {
-  data: DataPublicPluginSetup;
   uiActions: UiActionsSetup;
 }
 
 export interface EmbeddableStartDependencies {
-  data: DataPublicPluginStart;
   uiActions: UiActionsStart;
   inspector: InspectorStart;
 }
@@ -144,7 +141,7 @@ export class EmbeddablePublicPlugin implements Plugin<EmbeddableSetup, Embeddabl
 
   public start(
     core: CoreStart,
-    { data, uiActions, inspector }: EmbeddableStartDependencies
+    { uiActions, inspector }: EmbeddableStartDependencies
   ): EmbeddableStart {
     this.embeddableFactoryDefinitions.forEach((def) => {
       this.embeddableFactories.set(
diff --git a/src/plugins/embeddable/public/public.api.md b/src/plugins/embeddable/public/public.api.md
index 7563b66e58ae9a..a401795c498b3f 100644
--- a/src/plugins/embeddable/public/public.api.md
+++ b/src/plugins/embeddable/public/public.api.md
@@ -8,48 +8,29 @@ import { Action } from 'history';
 import { Action as Action_3 } from 'src/plugins/ui_actions/public';
 import { ActionExecutionContext as ActionExecutionContext_2 } from 'src/plugins/ui_actions/public';
 import { ApiResponse } from '@elastic/elasticsearch/lib/Transport';
-import { ApiResponse as ApiResponse_2 } from '@elastic/elasticsearch';
 import { ApplicationStart as ApplicationStart_2 } from 'kibana/public';
-import { Assign } from '@kbn/utility-types';
-import { BehaviorSubject } from 'rxjs';
-import { BfetchPublicSetup } from 'src/plugins/bfetch/public';
 import Boom from '@hapi/boom';
 import { ConfigDeprecationProvider } from '@kbn/config';
-import { CoreSetup as CoreSetup_2 } from 'src/core/public';
-import { CoreSetup as CoreSetup_3 } from 'kibana/public';
-import { CoreStart as CoreStart_2 } from 'kibana/public';
 import * as CSS from 'csstype';
-import { DatatableColumn as DatatableColumn_2 } from 'src/plugins/expressions';
 import { EmbeddableStart as EmbeddableStart_2 } from 'src/plugins/embeddable/public/plugin';
-import { Ensure } from '@kbn/utility-types';
 import { EnvironmentMode } from '@kbn/config';
-import { ErrorToastOptions as ErrorToastOptions_2 } from 'src/core/public/notifications';
 import { EuiBreadcrumb } from '@elastic/eui';
 import { EuiButtonEmptyProps } from '@elastic/eui';
-import { EuiComboBoxProps } from '@elastic/eui';
 import { EuiConfirmModalProps } from '@elastic/eui';
 import { EuiContextMenuPanelDescriptor } from '@elastic/eui';
 import { EuiFlyoutSize } from '@elastic/eui';
 import { EuiGlobalToastListToast } from '@elastic/eui';
 import { EventEmitter } from 'events';
-import { ExpressionAstExpression } from 'src/plugins/expressions/common';
 import { History } from 'history';
 import { Href } from 'history';
-import { HttpSetup as HttpSetup_2 } from 'kibana/public';
 import { I18nStart as I18nStart_2 } from 'src/core/public';
 import { IconType } from '@elastic/eui';
-import { ISearchOptions } from 'src/plugins/data/public';
-import { ISearchSource } from 'src/plugins/data/public';
-import { IStorageWrapper as IStorageWrapper_2 } from 'src/plugins/kibana_utils/public';
-import { IUiSettingsClient as IUiSettingsClient_2 } from 'src/core/public';
 import { KibanaClient } from '@elastic/elasticsearch/api/kibana';
 import { Location } from 'history';
 import { LocationDescriptorObject } from 'history';
 import { Logger } from '@kbn/logging';
 import { LogMeta } from '@kbn/logging';
 import { MaybePromise } from '@kbn/utility-types';
-import { Moment } from 'moment';
-import { NameList } from 'elasticsearch';
 import { NotificationsStart as NotificationsStart_2 } from 'src/core/public';
 import { Observable } from 'rxjs';
 import { Optional } from '@kbn/utility-types';
@@ -57,39 +38,23 @@ import { OverlayStart as OverlayStart_2 } from 'src/core/public';
 import { PackageInfo } from '@kbn/config';
 import { Path } from 'history';
 import { PluginInitializerContext } from 'src/core/public';
-import { PluginInitializerContext as PluginInitializerContext_3 } from 'kibana/public';
 import * as PropTypes from 'prop-types';
-import { PublicContract } from '@kbn/utility-types';
 import { PublicMethodsOf } from '@kbn/utility-types';
 import { PublicUiSettingsParams } from 'src/core/server/types';
 import React from 'react';
 import { RecursiveReadonly } from '@kbn/utility-types';
-import { RequestAdapter as RequestAdapter_2 } from 'src/plugins/inspector/common';
-import { Required } from '@kbn/utility-types';
 import * as Rx from 'rxjs';
-import { SavedObject as SavedObject_2 } from 'kibana/server';
-import { SavedObject as SavedObject_3 } from 'src/core/server';
 import { SavedObjectAttributes } from 'kibana/server';
 import { SavedObjectAttributes as SavedObjectAttributes_2 } from 'src/core/public';
 import { SavedObjectAttributes as SavedObjectAttributes_3 } from 'kibana/public';
-import { SavedObjectsClientContract as SavedObjectsClientContract_3 } from 'src/core/public';
-import { SavedObjectsFindOptions as SavedObjectsFindOptions_3 } from 'kibana/public';
-import { SavedObjectsFindResponse as SavedObjectsFindResponse_2 } from 'kibana/server';
-import { Search } from '@elastic/elasticsearch/api/requestParams';
-import { SearchResponse } from 'elasticsearch';
-import { SerializedFieldFormat as SerializedFieldFormat_2 } from 'src/plugins/expressions/common';
 import { ShallowPromise } from '@kbn/utility-types';
 import { SimpleSavedObject as SimpleSavedObject_2 } from 'src/core/public';
 import { Start as Start_2 } from 'src/plugins/inspector/public';
-import { StartServicesAccessor as StartServicesAccessor_2 } from 'kibana/public';
-import { ToastInputFields as ToastInputFields_2 } from 'src/core/public/notifications';
-import { ToastsSetup as ToastsSetup_2 } from 'kibana/public';
 import { TransportRequestOptions } from '@elastic/elasticsearch/lib/Transport';
 import { TransportRequestParams } from '@elastic/elasticsearch/lib/Transport';
 import { TransportRequestPromise } from '@elastic/elasticsearch/lib/Transport';
 import { TypeOf } from '@kbn/config-schema';
 import { UiComponent } from 'src/plugins/kibana_utils/public';
-import { UiCounterMetricType } from '@kbn/analytics';
 import { UnregisterCallback } from 'history';
 import { UserProvidedValues } from 'src/core/server/types';
 
@@ -348,7 +313,7 @@ export abstract class Embeddable<TEmbeddableInput extends EmbeddableInput = Embe
 // Warning: (ae-missing-release-tag) "EmbeddableChildPanel" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export class EmbeddableChildPanel extends React.Component<EmbeddableChildPanelProps, State_3> {
+export class EmbeddableChildPanel extends React.Component<EmbeddableChildPanelProps, State_2> {
     constructor(props: EmbeddableChildPanelProps);
     // (undocumented)
     [panel: string]: any;
@@ -381,9 +346,9 @@ export interface EmbeddableChildPanelProps {
 // Warning: (ae-missing-release-tag) "EmbeddableContext" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export interface EmbeddableContext {
+export interface EmbeddableContext<T extends IEmbeddable = IEmbeddable> {
     // (undocumented)
-    embeddable: IEmbeddable;
+    embeddable: T;
 }
 
 // @public
@@ -444,9 +409,6 @@ export type EmbeddableInput = {
     enhancements?: SerializableState;
     disabledActions?: string[];
     disableTriggers?: boolean;
-    timeRange?: TimeRange;
-    query?: Query;
-    filters?: Filter[];
     searchSessionId?: string;
 };
 
@@ -501,7 +463,7 @@ export interface EmbeddablePackageState {
 // Warning: (ae-missing-release-tag) "EmbeddablePanel" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export class EmbeddablePanel extends React.Component<Props, State_4> {
+export class EmbeddablePanel extends React.Component<Props, State_3> {
     constructor(props: Props);
     // (undocumented)
     closeMyContextMenuPanel: () => void;
@@ -571,10 +533,6 @@ export interface EmbeddableSetup {
 //
 // @public (undocumented)
 export interface EmbeddableSetupDependencies {
-    // Warning: (ae-forgotten-export) The symbol "DataPublicPluginSetup" needs to be exported by the entry point index.d.ts
-    //
-    // (undocumented)
-    data: DataPublicPluginSetup;
     // Warning: (ae-forgotten-export) The symbol "UiActionsSetup" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
@@ -610,10 +568,6 @@ export interface EmbeddableStart extends PersistableStateService<EmbeddableState
 //
 // @public (undocumented)
 export interface EmbeddableStartDependencies {
-    // Warning: (ae-forgotten-export) The symbol "DataPublicPluginStart" needs to be exported by the entry point index.d.ts
-    //
-    // (undocumented)
-    data: DataPublicPluginStart;
     // Warning: (ae-forgotten-export) The symbol "Start" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
@@ -715,7 +669,7 @@ export interface IEmbeddable<I extends EmbeddableInput = EmbeddableInput, O exte
 // Warning: (ae-missing-release-tag) "isContextMenuTriggerContext" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const isContextMenuTriggerContext: (context: unknown) => context is EmbeddableContext;
+export const isContextMenuTriggerContext: (context: unknown) => context is EmbeddableContext<IEmbeddable<import("..").EmbeddableInput, import("..").EmbeddableOutput>>;
 
 // Warning: (ae-missing-release-tag) "isEmbeddable" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -869,6 +823,16 @@ export interface SavedObjectEmbeddableInput extends EmbeddableInput {
     savedObjectId: string;
 }
 
+// Warning: (ae-missing-release-tag) "SELECT_RANGE_TRIGGER" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const SELECT_RANGE_TRIGGER = "SELECT_RANGE_TRIGGER";
+
+// Warning: (ae-missing-release-tag) "VALUE_CLICK_TRIGGER" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const VALUE_CLICK_TRIGGER = "VALUE_CLICK_TRIGGER";
+
 // Warning: (ae-missing-release-tag) "ValueClickContext" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -912,10 +876,7 @@ export const withEmbeddableSubscription: <I extends EmbeddableInput, O extends E
 
 // Warnings were encountered during analysis:
 //
-// src/plugins/embeddable/common/types.ts:44:3 - (ae-forgotten-export) The symbol "SerializableState" needs to be exported by the entry point index.d.ts
-// src/plugins/embeddable/common/types.ts:59:3 - (ae-forgotten-export) The symbol "TimeRange" needs to be exported by the entry point index.d.ts
-// src/plugins/embeddable/common/types.ts:64:3 - (ae-forgotten-export) The symbol "Query" needs to be exported by the entry point index.d.ts
-// src/plugins/embeddable/common/types.ts:69:3 - (ae-forgotten-export) The symbol "Filter" needs to be exported by the entry point index.d.ts
+// src/plugins/embeddable/common/types.ts:42:3 - (ae-forgotten-export) The symbol "SerializableState" needs to be exported by the entry point index.d.ts
 // src/plugins/embeddable/public/lib/triggers/triggers.ts:46:5 - (ae-forgotten-export) The symbol "Datatable" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
diff --git a/src/plugins/embeddable/public/tests/container.test.ts b/src/plugins/embeddable/public/tests/container.test.ts
index 69c21fdf3f0721..bb3e35c949666d 100644
--- a/src/plugins/embeddable/public/tests/container.test.ts
+++ b/src/plugins/embeddable/public/tests/container.test.ts
@@ -27,6 +27,7 @@ import {
   SavedObjectEmbeddableInput,
 } from '../lib';
 import {
+  MockFilter,
   FilterableEmbeddableInput,
   FilterableEmbeddable,
   FILTERABLE_EMBEDDABLE,
@@ -52,7 +53,6 @@ import {
 import { coreMock } from '../../../../core/public/mocks';
 import { testPlugin } from './test_plugin';
 import { of } from './helpers';
-import { esFilters, Filter } from '../../../../plugins/data/public';
 import { createEmbeddablePanelMock } from '../mocks';
 
 async function creatHelloWorldContainerAndEmbeddable(
@@ -449,8 +449,8 @@ test('Test nested reactions', async (done) => {
 
 test('Explicit embeddable input mapped to undefined will default to inherited', async () => {
   const { start } = await creatHelloWorldContainerAndEmbeddable();
-  const derivedFilter: Filter = {
-    $state: { store: esFilters.FilterStateStore.APP_STATE },
+  const derivedFilter: MockFilter = {
+    $state: { store: 'appState' },
     meta: { disabled: false, alias: 'name', negate: false },
     query: { match: {} },
   };
diff --git a/src/plugins/embeddable/public/tests/explicit_input.test.ts b/src/plugins/embeddable/public/tests/explicit_input.test.ts
index 24785dd50a0322..531fbcee94db6e 100644
--- a/src/plugins/embeddable/public/tests/explicit_input.test.ts
+++ b/src/plugins/embeddable/public/tests/explicit_input.test.ts
@@ -20,6 +20,7 @@
 import { skip } from 'rxjs/operators';
 import { testPlugin } from './test_plugin';
 import {
+  MockFilter,
   FILTERABLE_EMBEDDABLE,
   FilterableEmbeddableInput,
 } from '../lib/test_samples/embeddables/filterable_embeddable';
@@ -34,7 +35,6 @@ import { FilterableContainer } from '../lib/test_samples/embeddables/filterable_
 import { isErrorEmbeddable } from '../lib';
 import { HelloWorldContainer } from '../lib/test_samples/embeddables/hello_world_container';
 import { coreMock } from '../../../../core/public/mocks';
-import { esFilters, Filter } from '../../../../plugins/data/public';
 import { createEmbeddablePanelMock } from '../mocks';
 
 const { setup, doStart, coreStart, uiActions } = testPlugin(
@@ -56,8 +56,8 @@ setup.registerEmbeddableFactory(
 const start = doStart();
 
 test('Explicit embeddable input mapped to undefined will default to inherited', async () => {
-  const derivedFilter: Filter = {
-    $state: { store: esFilters.FilterStateStore.APP_STATE },
+  const derivedFilter: MockFilter = {
+    $state: { store: 'appState' },
     meta: { disabled: false, alias: 'name', negate: false },
     query: { match: {} },
   };
diff --git a/src/plugins/embeddable/public/tests/test_plugin.ts b/src/plugins/embeddable/public/tests/test_plugin.ts
index 2c298b437a118b..74bb70e913bccc 100644
--- a/src/plugins/embeddable/public/tests/test_plugin.ts
+++ b/src/plugins/embeddable/public/tests/test_plugin.ts
@@ -21,7 +21,6 @@ import { CoreSetup, CoreStart } from 'src/core/public';
 import { UiActionsStart } from '../../../ui_actions/public';
 import { uiActionsPluginMock } from '../../../ui_actions/public/mocks';
 import { inspectorPluginMock } from '../../../inspector/public/mocks';
-import { dataPluginMock } from '../../../data/public/mocks';
 import { coreMock } from '../../../../core/public/mocks';
 import { EmbeddablePublicPlugin, EmbeddableSetup, EmbeddableStart } from '../plugin';
 
@@ -42,7 +41,6 @@ export const testPlugin = (
   const initializerContext = {} as any;
   const plugin = new EmbeddablePublicPlugin(initializerContext);
   const setup = plugin.setup(coreSetup, {
-    data: dataPluginMock.createSetupContract(),
     uiActions: uiActions.setup,
   });
 
@@ -53,7 +51,6 @@ export const testPlugin = (
     setup,
     doStart: (anotherCoreStart: CoreStart = coreStart) => {
       const start = plugin.start(anotherCoreStart, {
-        data: dataPluginMock.createStartContract(),
         inspector: inspectorPluginMock.createStartContract(),
         uiActions: uiActionsPluginMock.createStartContract(),
       });
diff --git a/src/plugins/expressions/common/expression_renderers/types.ts b/src/plugins/expressions/common/expression_renderers/types.ts
index 88aca4c07ee312..fca1694747ce2d 100644
--- a/src/plugins/expressions/common/expression_renderers/types.ts
+++ b/src/plugins/expressions/common/expression_renderers/types.ts
@@ -17,8 +17,6 @@
  * under the License.
  */
 
-import { PersistedState } from 'src/plugins/visualizations/public';
-
 export interface ExpressionRenderDefinition<Config = unknown> {
   /**
    * Technical name of the renderer, used as ID to identify renderer in
@@ -84,5 +82,10 @@ export interface IInterpreterRenderHandlers {
   event: (event: any) => void;
   hasCompatibleActions?: (event: any) => Promise<boolean>;
   getRenderMode: () => RenderMode;
-  uiState?: PersistedState;
+  /**
+   * This uiState interface is actually `PersistedState` from the visualizations plugin,
+   * but expressions cannot know about vis or it creates a mess of circular dependencies.
+   * Downstream consumers of the uiState handler will need to cast for now.
+   */
+  uiState?: unknown;
 }
diff --git a/src/plugins/expressions/public/public.api.md b/src/plugins/expressions/public/public.api.md
index bb1f5dd9270d5f..404df2db019a1e 100644
--- a/src/plugins/expressions/public/public.api.md
+++ b/src/plugins/expressions/public/public.api.md
@@ -12,7 +12,6 @@ import { EventEmitter } from 'events';
 import { KibanaRequest } from 'src/core/server';
 import { Observable } from 'rxjs';
 import { PackageInfo } from '@kbn/config';
-import { PersistedState } from 'src/plugins/visualizations/public';
 import { Plugin as Plugin_2 } from 'src/core/public';
 import { PluginInitializerContext as PluginInitializerContext_2 } from 'src/core/public';
 import React from 'react';
@@ -924,8 +923,7 @@ export interface IInterpreterRenderHandlers {
     onDestroy: (fn: () => void) => void;
     // (undocumented)
     reload: () => void;
-    // (undocumented)
-    uiState?: PersistedState;
+    uiState?: unknown;
     // (undocumented)
     update: (params: any) => void;
 }
diff --git a/src/plugins/expressions/server/server.api.md b/src/plugins/expressions/server/server.api.md
index 7c1ab11f75027c..8b8678371dd838 100644
--- a/src/plugins/expressions/server/server.api.md
+++ b/src/plugins/expressions/server/server.api.md
@@ -10,7 +10,6 @@ import { Ensure } from '@kbn/utility-types';
 import { EventEmitter } from 'events';
 import { KibanaRequest } from 'src/core/server';
 import { Observable } from 'rxjs';
-import { PersistedState } from 'src/plugins/visualizations/public';
 import { Plugin as Plugin_2 } from 'src/core/server';
 import { PluginInitializerContext } from 'src/core/server';
 import { UnwrapPromiseOrReturn } from '@kbn/utility-types';
@@ -741,8 +740,7 @@ export interface IInterpreterRenderHandlers {
     onDestroy: (fn: () => void) => void;
     // (undocumented)
     reload: () => void;
-    // (undocumented)
-    uiState?: PersistedState;
+    uiState?: unknown;
     // (undocumented)
     update: (params: any) => void;
 }
diff --git a/src/plugins/ui_actions/public/index.ts b/src/plugins/ui_actions/public/index.ts
index d223c0abcccb7a..7890e4bab44a3c 100644
--- a/src/plugins/ui_actions/public/index.ts
+++ b/src/plugins/ui_actions/public/index.ts
@@ -40,12 +40,6 @@ export {
 export {
   Trigger,
   TriggerContext,
-  SELECT_RANGE_TRIGGER,
-  selectRangeTrigger,
-  VALUE_CLICK_TRIGGER,
-  valueClickTrigger,
-  APPLY_FILTER_TRIGGER,
-  applyFilterTrigger,
   VISUALIZE_FIELD_TRIGGER,
   visualizeFieldTrigger,
   VISUALIZE_GEO_FIELD_TRIGGER,
diff --git a/src/plugins/ui_actions/public/plugin.ts b/src/plugins/ui_actions/public/plugin.ts
index fdb75e9a426e9e..84a7ae45fc7b81 100644
--- a/src/plugins/ui_actions/public/plugin.ts
+++ b/src/plugins/ui_actions/public/plugin.ts
@@ -20,14 +20,7 @@
 import { CoreStart, CoreSetup, Plugin, PluginInitializerContext } from 'src/core/public';
 import { PublicMethodsOf } from '@kbn/utility-types';
 import { UiActionsService } from './service';
-import {
-  selectRangeTrigger,
-  valueClickTrigger,
-  rowClickTrigger,
-  applyFilterTrigger,
-  visualizeFieldTrigger,
-  visualizeGeoFieldTrigger,
-} from './triggers';
+import { rowClickTrigger, visualizeFieldTrigger, visualizeGeoFieldTrigger } from './triggers';
 
 export type UiActionsSetup = Pick<
   UiActionsService,
@@ -47,10 +40,7 @@ export class UiActionsPlugin implements Plugin<UiActionsSetup, UiActionsStart> {
   constructor(initializerContext: PluginInitializerContext) {}
 
   public setup(core: CoreSetup): UiActionsSetup {
-    this.service.registerTrigger(selectRangeTrigger);
-    this.service.registerTrigger(valueClickTrigger);
     this.service.registerTrigger(rowClickTrigger);
-    this.service.registerTrigger(applyFilterTrigger);
     this.service.registerTrigger(visualizeFieldTrigger);
     this.service.registerTrigger(visualizeGeoFieldTrigger);
     return this.service;
diff --git a/src/plugins/ui_actions/public/public.api.md b/src/plugins/ui_actions/public/public.api.md
index 2384dfab13c8c1..808cb1f3fbca03 100644
--- a/src/plugins/ui_actions/public/public.api.md
+++ b/src/plugins/ui_actions/public/public.api.md
@@ -8,14 +8,11 @@ import { CoreSetup } from 'src/core/public';
 import { CoreStart } from 'src/core/public';
 import { EnvironmentMode } from '@kbn/config';
 import { EuiContextMenuPanelDescriptor } from '@elastic/eui';
-import { EventEmitter } from 'events';
-import { Observable } from 'rxjs';
 import { PackageInfo } from '@kbn/config';
 import { Plugin } from 'src/core/public';
 import { PluginInitializerContext as PluginInitializerContext_2 } from 'src/core/public';
 import { PublicMethodsOf } from '@kbn/utility-types';
 import React from 'react';
-import * as Rx from 'rxjs';
 import { UiComponent } from 'src/plugins/kibana_utils/public';
 
 // Warning: (ae-forgotten-export) The symbol "BaseContext" needs to be exported by the entry point index.d.ts
@@ -95,16 +92,6 @@ export interface ActionExecutionMeta {
 // @public (undocumented)
 export type ActionType = keyof ActionContextMapping;
 
-// Warning: (ae-missing-release-tag) "APPLY_FILTER_TRIGGER" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-export const APPLY_FILTER_TRIGGER = "FILTER_TRIGGER";
-
-// Warning: (ae-missing-release-tag) "applyFilterTrigger" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-export const applyFilterTrigger: Trigger<'FILTER_TRIGGER'>;
-
 // Warning: (ae-forgotten-export) The symbol "BuildContextMenuParams" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "buildContextMenuForActions" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -148,10 +135,8 @@ export interface RowClickContext {
         table: Datatable;
         columns?: string[];
     };
-    // Warning: (ae-forgotten-export) The symbol "IEmbeddable" needs to be exported by the entry point index.d.ts
-    //
     // (undocumented)
-    embeddable?: IEmbeddable;
+    embeddable?: unknown;
 }
 
 // Warning: (ae-missing-release-tag) "rowClickTrigger" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -159,16 +144,6 @@ export interface RowClickContext {
 // @public (undocumented)
 export const rowClickTrigger: Trigger<'ROW_CLICK_TRIGGER'>;
 
-// Warning: (ae-missing-release-tag) "SELECT_RANGE_TRIGGER" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-export const SELECT_RANGE_TRIGGER = "SELECT_RANGE_TRIGGER";
-
-// Warning: (ae-missing-release-tag) "selectRangeTrigger" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-export const selectRangeTrigger: Trigger<'SELECT_RANGE_TRIGGER'>;
-
 // Warning: (ae-missing-release-tag) "Trigger" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
@@ -192,20 +167,8 @@ export interface TriggerContextMapping {
     //
     // (undocumented)
     [DEFAULT_TRIGGER]: TriggerContext_2;
-    // Warning: (ae-forgotten-export) The symbol "ApplyGlobalFilterActionContext" needs to be exported by the entry point index.d.ts
-    //
-    // (undocumented)
-    [APPLY_FILTER_TRIGGER]: ApplyGlobalFilterActionContext;
     // (undocumented)
     [ROW_CLICK_TRIGGER]: RowClickContext;
-    // Warning: (ae-forgotten-export) The symbol "RangeSelectContext" needs to be exported by the entry point index.d.ts
-    //
-    // (undocumented)
-    [SELECT_RANGE_TRIGGER]: RangeSelectContext;
-    // Warning: (ae-forgotten-export) The symbol "ValueClickContext" needs to be exported by the entry point index.d.ts
-    //
-    // (undocumented)
-    [VALUE_CLICK_TRIGGER]: ValueClickContext;
     // (undocumented)
     [VISUALIZE_FIELD_TRIGGER]: VisualizeFieldContext;
     // (undocumented)
@@ -262,35 +225,35 @@ export class UiActionsService {
     //
     // (undocumented)
     protected readonly actions: ActionRegistry;
-    readonly addTriggerAction: <T extends "" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER" | "ROW_CLICK_TRIGGER" | "FILTER_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER">(triggerId: T, action: UiActionsActionDefinition<TriggerContextMapping[T]> | Action<TriggerContextMapping[T], "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel" | "togglePanel" | "replacePanel" | "clonePanel" | "addToFromLibrary" | "unlinkFromLibrary" | "ACTION_LIBRARY_NOTIFICATION" | "ACTION_EXPORT_CSV">) => void;
+    readonly addTriggerAction: <T extends "" | "ROW_CLICK_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "FILTER_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER">(triggerId: T, action: UiActionsActionDefinition<TriggerContextMapping[T]> | Action<TriggerContextMapping[T], "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel">) => void;
     // (undocumented)
-    readonly attachAction: <T extends "" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER" | "ROW_CLICK_TRIGGER" | "FILTER_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER">(triggerId: T, actionId: string) => void;
+    readonly attachAction: <T extends "" | "ROW_CLICK_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "FILTER_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER">(triggerId: T, actionId: string) => void;
     readonly clear: () => void;
     // (undocumented)
     readonly detachAction: (triggerId: TriggerId, actionId: string) => void;
     // @deprecated (undocumented)
-    readonly executeTriggerActions: <T extends "" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER" | "ROW_CLICK_TRIGGER" | "FILTER_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER">(triggerId: T, context: TriggerContext<T>) => Promise<void>;
+    readonly executeTriggerActions: <T extends "" | "ROW_CLICK_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "FILTER_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER">(triggerId: T, context: TriggerContext<T>) => Promise<void>;
     // Warning: (ae-forgotten-export) The symbol "UiActionsExecutionService" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
     readonly executionService: UiActionsExecutionService;
     readonly fork: () => UiActionsService;
     // (undocumented)
-    readonly getAction: <T extends UiActionsActionDefinition<{}>>(id: string) => Action<ActionContext<T>, "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel" | "togglePanel" | "replacePanel" | "clonePanel" | "addToFromLibrary" | "unlinkFromLibrary" | "ACTION_LIBRARY_NOTIFICATION" | "ACTION_EXPORT_CSV">;
+    readonly getAction: <T extends UiActionsActionDefinition<{}>>(id: string) => Action<ActionContext<T>, "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel">;
     // Warning: (ae-forgotten-export) The symbol "TriggerContract" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    readonly getTrigger: <T extends "" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER" | "ROW_CLICK_TRIGGER" | "FILTER_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER">(triggerId: T) => TriggerContract<T>;
+    readonly getTrigger: <T extends "" | "ROW_CLICK_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "FILTER_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER">(triggerId: T) => TriggerContract<T>;
     // (undocumented)
-    readonly getTriggerActions: <T extends "" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER" | "ROW_CLICK_TRIGGER" | "FILTER_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER">(triggerId: T) => Action<TriggerContextMapping[T], "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel" | "togglePanel" | "replacePanel" | "clonePanel" | "addToFromLibrary" | "unlinkFromLibrary" | "ACTION_LIBRARY_NOTIFICATION" | "ACTION_EXPORT_CSV">[];
+    readonly getTriggerActions: <T extends "" | "ROW_CLICK_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "FILTER_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER">(triggerId: T) => Action<TriggerContextMapping[T], "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel">[];
     // (undocumented)
-    readonly getTriggerCompatibleActions: <T extends "" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER" | "ROW_CLICK_TRIGGER" | "FILTER_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER">(triggerId: T, context: TriggerContextMapping[T]) => Promise<Action<TriggerContextMapping[T], "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel" | "togglePanel" | "replacePanel" | "clonePanel" | "addToFromLibrary" | "unlinkFromLibrary" | "ACTION_LIBRARY_NOTIFICATION" | "ACTION_EXPORT_CSV">[]>;
+    readonly getTriggerCompatibleActions: <T extends "" | "ROW_CLICK_TRIGGER" | "VISUALIZE_FIELD_TRIGGER" | "VISUALIZE_GEO_FIELD_TRIGGER" | "FILTER_TRIGGER" | "CONTEXT_MENU_TRIGGER" | "PANEL_BADGE_TRIGGER" | "PANEL_NOTIFICATION_TRIGGER" | "SELECT_RANGE_TRIGGER" | "VALUE_CLICK_TRIGGER">(triggerId: T, context: TriggerContextMapping[T]) => Promise<Action<TriggerContextMapping[T], "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel">[]>;
     // (undocumented)
     readonly hasAction: (actionId: string) => boolean;
     // Warning: (ae-forgotten-export) The symbol "ActionContext" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    readonly registerAction: <A extends UiActionsActionDefinition<{}>>(definition: A) => Action<ActionContext<A>, "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel" | "togglePanel" | "replacePanel" | "clonePanel" | "addToFromLibrary" | "unlinkFromLibrary" | "ACTION_LIBRARY_NOTIFICATION" | "ACTION_EXPORT_CSV">;
+    readonly registerAction: <A extends UiActionsActionDefinition<{}>>(definition: A) => Action<ActionContext<A>, "" | "ACTION_VISUALIZE_FIELD" | "ACTION_VISUALIZE_GEO_FIELD" | "ACTION_VISUALIZE_LENS_FIELD" | "ACTION_GLOBAL_APPLY_FILTER" | "ACTION_SELECT_RANGE" | "ACTION_VALUE_CLICK" | "ACTION_CUSTOMIZE_PANEL" | "ACTION_ADD_PANEL" | "openInspector" | "deletePanel" | "editPanel">;
     // (undocumented)
     readonly registerTrigger: (trigger: Trigger) => void;
     // Warning: (ae-forgotten-export) The symbol "TriggerRegistry" needs to be exported by the entry point index.d.ts
@@ -326,16 +289,6 @@ export type UiActionsSetup = Pick<UiActionsService, 'addTriggerAction' | 'attach
 // @public (undocumented)
 export type UiActionsStart = PublicMethodsOf<UiActionsService>;
 
-// Warning: (ae-missing-release-tag) "VALUE_CLICK_TRIGGER" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-export const VALUE_CLICK_TRIGGER = "VALUE_CLICK_TRIGGER";
-
-// Warning: (ae-missing-release-tag) "valueClickTrigger" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-export const valueClickTrigger: Trigger<'VALUE_CLICK_TRIGGER'>;
-
 // Warning: (ae-missing-release-tag) "VISUALIZE_FIELD_TRIGGER" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -371,7 +324,7 @@ export const visualizeGeoFieldTrigger: Trigger<'VISUALIZE_GEO_FIELD_TRIGGER'>;
 
 // Warnings were encountered during analysis:
 //
-// src/plugins/ui_actions/public/triggers/row_click_trigger.ts:45:5 - (ae-forgotten-export) The symbol "Datatable" needs to be exported by the entry point index.d.ts
+// src/plugins/ui_actions/public/triggers/row_click_trigger.ts:46:5 - (ae-forgotten-export) The symbol "Datatable" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 
diff --git a/src/plugins/ui_actions/public/triggers/index.ts b/src/plugins/ui_actions/public/triggers/index.ts
index ecbf4d1f7b9881..6bba87e85eb95e 100644
--- a/src/plugins/ui_actions/public/triggers/index.ts
+++ b/src/plugins/ui_actions/public/triggers/index.ts
@@ -20,10 +20,7 @@
 export * from './trigger';
 export * from './trigger_contract';
 export * from './trigger_internal';
-export * from './select_range_trigger';
-export * from './value_click_trigger';
 export * from './row_click_trigger';
-export * from './apply_filter_trigger';
 export * from './visualize_field_trigger';
 export * from './visualize_geo_field_trigger';
 export * from './default_trigger';
diff --git a/src/plugins/ui_actions/public/triggers/row_click_trigger.ts b/src/plugins/ui_actions/public/triggers/row_click_trigger.ts
index 87bca03f8c3bab..0fc261b3e1fb35 100644
--- a/src/plugins/ui_actions/public/triggers/row_click_trigger.ts
+++ b/src/plugins/ui_actions/public/triggers/row_click_trigger.ts
@@ -18,7 +18,6 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { IEmbeddable } from '../../../embeddable/public';
 import { Trigger } from '.';
 import { Datatable } from '../../../expressions';
 
@@ -35,7 +34,9 @@ export const rowClickTrigger: Trigger<'ROW_CLICK_TRIGGER'> = {
 };
 
 export interface RowClickContext {
-  embeddable?: IEmbeddable;
+  // Need to make this unknown to prevent circular dependencies.
+  // Apps using this property will need to cast to `IEmbeddable`.
+  embeddable?: unknown;
   data: {
     /**
      * Row index, starting from 0, where user clicked.
diff --git a/src/plugins/ui_actions/public/triggers/select_range_trigger.ts b/src/plugins/ui_actions/public/triggers/select_range_trigger.ts
deleted file mode 100644
index 312e75314bd926..00000000000000
--- a/src/plugins/ui_actions/public/triggers/select_range_trigger.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * 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 { i18n } from '@kbn/i18n';
-import { Trigger } from '.';
-
-export const SELECT_RANGE_TRIGGER = 'SELECT_RANGE_TRIGGER';
-export const selectRangeTrigger: Trigger<'SELECT_RANGE_TRIGGER'> = {
-  id: SELECT_RANGE_TRIGGER,
-  title: i18n.translate('uiActions.triggers.selectRangeTitle', {
-    defaultMessage: 'Range selection',
-  }),
-  description: i18n.translate('uiActions.triggers.selectRangeDescription', {
-    defaultMessage: 'A range of values on the visualization',
-  }),
-};
diff --git a/src/plugins/ui_actions/public/triggers/trigger.ts b/src/plugins/ui_actions/public/triggers/trigger.ts
index 2c019b09881d17..1b1231c132dde7 100644
--- a/src/plugins/ui_actions/public/triggers/trigger.ts
+++ b/src/plugins/ui_actions/public/triggers/trigger.ts
@@ -32,8 +32,7 @@ import { TriggerContextMapping, TriggerId } from '../types';
  */
 export interface Trigger<ID extends TriggerId = TriggerId> {
   /**
-   * Unique name of the trigger as identified in `ui_actions` plugin trigger
-   * registry, such as "SELECT_RANGE_TRIGGER" or "VALUE_CLICK_TRIGGER".
+   * Unique name of the trigger as identified in `ui_actions` plugin trigger registry.
    */
   id: ID;
 
diff --git a/src/plugins/ui_actions/public/triggers/trigger_contract.ts b/src/plugins/ui_actions/public/triggers/trigger_contract.ts
index 04a75cb3a53d08..7e7fba0ba80d3a 100644
--- a/src/plugins/ui_actions/public/triggers/trigger_contract.ts
+++ b/src/plugins/ui_actions/public/triggers/trigger_contract.ts
@@ -25,8 +25,7 @@ import { TriggerId, TriggerContextMapping } from '../types';
  */
 export class TriggerContract<T extends TriggerId> {
   /**
-   * Unique name of the trigger as identified in `ui_actions` plugin trigger
-   * registry, such as "SELECT_RANGE_TRIGGER" or "VALUE_CLICK_TRIGGER".
+   * Unique name of the trigger as identified in `ui_actions` plugin trigger registry.
    */
   public readonly id: T;
 
diff --git a/src/plugins/ui_actions/public/types.ts b/src/plugins/ui_actions/public/types.ts
index 0266a755be9269..62fac245514cdd 100644
--- a/src/plugins/ui_actions/public/types.ts
+++ b/src/plugins/ui_actions/public/types.ts
@@ -20,17 +20,12 @@
 import { ActionInternal } from './actions/action_internal';
 import { TriggerInternal } from './triggers/trigger_internal';
 import {
-  SELECT_RANGE_TRIGGER,
-  VALUE_CLICK_TRIGGER,
   ROW_CLICK_TRIGGER,
-  APPLY_FILTER_TRIGGER,
   VISUALIZE_FIELD_TRIGGER,
   VISUALIZE_GEO_FIELD_TRIGGER,
   DEFAULT_TRIGGER,
   RowClickContext,
 } from './triggers';
-import type { RangeSelectContext, ValueClickContext } from '../../embeddable/public';
-import type { ApplyGlobalFilterActionContext } from '../../data/public';
 
 export type TriggerRegistry = Map<TriggerId, TriggerInternal<any>>;
 export type ActionRegistry = Map<string, ActionInternal>;
@@ -49,10 +44,7 @@ export type TriggerContext = BaseContext;
 
 export interface TriggerContextMapping {
   [DEFAULT_TRIGGER]: TriggerContext;
-  [SELECT_RANGE_TRIGGER]: RangeSelectContext;
-  [VALUE_CLICK_TRIGGER]: ValueClickContext;
   [ROW_CLICK_TRIGGER]: RowClickContext;
-  [APPLY_FILTER_TRIGGER]: ApplyGlobalFilterActionContext;
   [VISUALIZE_FIELD_TRIGGER]: VisualizeFieldContext;
   [VISUALIZE_GEO_FIELD_TRIGGER]: VisualizeFieldContext;
 }
diff --git a/src/plugins/vis_type_table/public/components/table_visualization.tsx b/src/plugins/vis_type_table/public/components/table_visualization.tsx
index 2d38acc57519f2..a1e4fad719dc42 100644
--- a/src/plugins/vis_type_table/public/components/table_visualization.tsx
+++ b/src/plugins/vis_type_table/public/components/table_visualization.tsx
@@ -23,6 +23,7 @@ import classNames from 'classnames';
 
 import { CoreStart } from 'kibana/public';
 import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import type { PersistedState } from 'src/plugins/visualizations/public';
 import { KibanaContextProvider } from '../../../kibana_react/public';
 import { TableVisConfig } from '../types';
 import { TableContext } from '../table_vis_response_handler';
@@ -47,7 +48,7 @@ const TableVisualizationComponent = ({
     handlers.done();
   }, [handlers]);
 
-  const uiStateProps = useUiState(handlers.uiState);
+  const uiStateProps = useUiState(handlers.uiState as PersistedState);
 
   const className = classNames('tbvChart', {
     // eslint-disable-next-line @typescript-eslint/naming-convention
diff --git a/src/plugins/vis_type_table/public/utils/use/use_ui_state.ts b/src/plugins/vis_type_table/public/utils/use/use_ui_state.ts
index 68bad16972ec24..cc43fc6bcb582d 100644
--- a/src/plugins/vis_type_table/public/utils/use/use_ui_state.ts
+++ b/src/plugins/vis_type_table/public/utils/use/use_ui_state.ts
@@ -19,7 +19,7 @@
 
 import { debounce, isEqual } from 'lodash';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import type { PersistedState } from 'src/plugins/visualizations/public';
 
 import { ColumnWidthData, TableVisUiState, TableVisUseUiStateProps } from '../../types';
 
@@ -28,9 +28,7 @@ const defaultSort = {
   direction: null,
 };
 
-export const useUiState = (
-  uiState: IInterpreterRenderHandlers['uiState']
-): TableVisUseUiStateProps => {
+export const useUiState = (uiState: PersistedState): TableVisUseUiStateProps => {
   const [sort, setSortState] = useState<TableVisUiState['sort']>(
     uiState?.get('vis.params.sort') || defaultSort
   );
diff --git a/src/plugins/vis_type_timeseries/public/timeseries_vis_renderer.tsx b/src/plugins/vis_type_timeseries/public/timeseries_vis_renderer.tsx
index 67ed487d293783..dec169c59c6ef7 100644
--- a/src/plugins/vis_type_timeseries/public/timeseries_vis_renderer.tsx
+++ b/src/plugins/vis_type_timeseries/public/timeseries_vis_renderer.tsx
@@ -21,6 +21,7 @@ import React, { lazy } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 
 import { IUiSettingsClient } from 'kibana/public';
+import type { PersistedState } from '../../visualizations/public';
 import { VisualizationContainer } from '../../visualizations/public';
 import { ExpressionRenderDefinition } from '../../expressions/common/expression_renderers';
 import { TimeseriesRenderValue, TimeseriesVisParams } from './metrics_fn';
@@ -63,7 +64,7 @@ export const getTimeseriesVisRenderer: (deps: {
           handlers={handlers}
           model={config.visParams}
           visData={config.visData as TimeseriesVisData}
-          uiState={handlers.uiState!}
+          uiState={handlers.uiState! as PersistedState}
         />
       </VisualizationContainer>,
       domNode
diff --git a/src/plugins/vis_type_vislib/public/vis_controller.tsx b/src/plugins/vis_type_vislib/public/vis_controller.tsx
index 1804d0d52ae7a6..2a32d19874c228 100644
--- a/src/plugins/vis_type_vislib/public/vis_controller.tsx
+++ b/src/plugins/vis_type_vislib/public/vis_controller.tsx
@@ -22,7 +22,7 @@ import React, { RefObject } from 'react';
 
 import { mountReactNode } from '../../../core/public/utils';
 import { ChartsPluginSetup } from '../../charts/public';
-import { PersistedState } from '../../visualizations/public';
+import type { PersistedState } from '../../visualizations/public';
 import { IInterpreterRenderHandlers } from '../../expressions/public';
 
 import { VisTypeVislibCoreSetup } from './plugin';
@@ -115,7 +115,7 @@ export const createVislibVisController = (
           })
           .addClass((legendClassName as any)[visParams.legendPosition]);
 
-        this.mountLegend(esResponse, visParams, fireEvent, uiState);
+        this.mountLegend(esResponse, visParams, fireEvent, uiState as PersistedState);
       }
 
       this.vislibVis.render(esResponse, uiState);
@@ -128,7 +128,7 @@ export const createVislibVisController = (
         CUSTOM_LEGEND_VIS_TYPES.includes(this.vislibVis.visConfigArgs.type)
       ) {
         this.unmountLegend?.();
-        this.mountLegend(esResponse, visParams, fireEvent, uiState);
+        this.mountLegend(esResponse, visParams, fireEvent, uiState as PersistedState);
         this.vislibVis.render(esResponse, uiState);
       }
     }
diff --git a/src/plugins/vis_type_vislib/public/vis_wrapper.tsx b/src/plugins/vis_type_vislib/public/vis_wrapper.tsx
index 280a957396c348..b8dbd0f945c325 100644
--- a/src/plugins/vis_type_vislib/public/vis_wrapper.tsx
+++ b/src/plugins/vis_type_vislib/public/vis_wrapper.tsx
@@ -22,6 +22,7 @@ import { EuiResizeObserver } from '@elastic/eui';
 import { debounce } from 'lodash';
 
 import { IInterpreterRenderHandlers } from '../../expressions/public';
+import type { PersistedState } from '../../visualizations/public';
 import { ChartsPluginSetup } from '../../charts/public';
 
 import { VislibRenderValue } from './vis_type_vislib_vis_fn';
@@ -66,10 +67,12 @@ const VislibWrapper = ({ core, charts, visData, visConfig, handlers }: VislibWra
 
   useEffect(() => {
     if (handlers.uiState) {
-      handlers.uiState.on('change', updateChart);
+      const uiState = handlers.uiState as PersistedState;
+
+      uiState.on('change', updateChart);
 
       return () => {
-        handlers.uiState?.off('change', updateChart);
+        uiState?.off('change', updateChart);
       };
     }
   }, [handlers.uiState, updateChart]);
diff --git a/src/plugins/vis_type_xy/public/vis_component.tsx b/src/plugins/vis_type_xy/public/vis_component.tsx
index d87500218975a5..dcf9f69cc291d8 100644
--- a/src/plugins/vis_type_xy/public/vis_component.tsx
+++ b/src/plugins/vis_type_xy/public/vis_component.tsx
@@ -50,6 +50,7 @@ import {
   ClickTriggerEvent,
 } from '../../charts/public';
 import { Datatable, IInterpreterRenderHandlers } from '../../expressions/public';
+import type { PersistedState } from '../../visualizations/public';
 
 import { VisParams } from './types';
 import {
@@ -77,7 +78,7 @@ import {
 export interface VisComponentProps {
   visParams: VisParams;
   visData: Datatable;
-  uiState: IInterpreterRenderHandlers['uiState'];
+  uiState: PersistedState;
   fireEvent: IInterpreterRenderHandlers['event'];
   renderComplete: IInterpreterRenderHandlers['done'];
 }
diff --git a/src/plugins/vis_type_xy/public/vis_renderer.tsx b/src/plugins/vis_type_xy/public/vis_renderer.tsx
index 4ac7c23c30893a..16463abb07631e 100644
--- a/src/plugins/vis_type_xy/public/vis_renderer.tsx
+++ b/src/plugins/vis_type_xy/public/vis_renderer.tsx
@@ -24,6 +24,7 @@ import { I18nProvider } from '@kbn/i18n/react';
 
 import { ExpressionRenderDefinition } from '../../expressions/public';
 import { VisualizationContainer } from '../../visualizations/public';
+import type { PersistedState } from '../../visualizations/public';
 
 import { XyVisType } from '../common';
 import { SplitChartWarning } from './components/split_chart_warning';
@@ -59,7 +60,7 @@ export const xyVisRenderer: ExpressionRenderDefinition<RenderValue> = {
               visData={visData}
               renderComplete={handlers.done}
               fireEvent={handlers.event}
-              uiState={handlers.uiState}
+              uiState={handlers.uiState as PersistedState}
             />
           </VisualizationContainer>
         </>
diff --git a/src/plugins/visualizations/public/embeddable/events.ts b/src/plugins/visualizations/public/embeddable/events.ts
index 41e52c3ac13272..7065d758bbc490 100644
--- a/src/plugins/visualizations/public/embeddable/events.ts
+++ b/src/plugins/visualizations/public/embeddable/events.ts
@@ -17,12 +17,9 @@
  * under the License.
  */
 
-import {
-  APPLY_FILTER_TRIGGER,
-  SELECT_RANGE_TRIGGER,
-  VALUE_CLICK_TRIGGER,
-  ROW_CLICK_TRIGGER,
-} from '../../../ui_actions/public';
+import { ROW_CLICK_TRIGGER } from '../../../ui_actions/public';
+import { APPLY_FILTER_TRIGGER } from '../../../../plugins/data/public';
+import { SELECT_RANGE_TRIGGER, VALUE_CLICK_TRIGGER } from '../../../../plugins/embeddable/public';
 
 export interface VisEventToTrigger {
   ['applyFilter']: typeof APPLY_FILTER_TRIGGER;
diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts b/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts
index f7592977858d25..5661acc26fdb64 100644
--- a/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts
+++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts
@@ -71,6 +71,9 @@ export interface VisualizeInput extends EmbeddableInput {
   };
   savedVis?: SerializedVis;
   table?: unknown;
+  query?: Query;
+  filters?: Filter[];
+  timeRange?: TimeRange;
 }
 
 export interface VisualizeOutput extends EmbeddableOutput {
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/drilldowns_with_embeddable_example.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/drilldowns_with_embeddable_example.tsx
index 48b64a1c845883..27c63aba791dd3 100644
--- a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/drilldowns_with_embeddable_example.tsx
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/drilldowns_with_embeddable_example.tsx
@@ -18,10 +18,12 @@ import {
   EuiFlexGroup,
 } from '@elastic/eui';
 import { SampleMlJob, SampleApp1ClickContext } from '../../triggers';
-import { EmbeddableRoot } from '../../../../../../src/plugins/embeddable/public';
+import {
+  EmbeddableRoot,
+  VALUE_CLICK_TRIGGER,
+} from '../../../../../../src/plugins/embeddable/public';
 import { ButtonEmbeddable } from '../../embeddables/button_embeddable';
 import { useUiActions } from '../../context';
-import { VALUE_CLICK_TRIGGER } from '../../../../../../src/plugins/ui_actions/public';
 
 export const job: SampleMlJob = {
   job_id: '123',
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_drilldown/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_drilldown/index.tsx
index a7324f55301307..50ad350cd90b90 100644
--- a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_drilldown/index.tsx
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_drilldown/index.tsx
@@ -8,12 +8,12 @@ import React from 'react';
 import { EuiFormRow, EuiFieldText } from '@elastic/eui';
 import { reactToUiComponent } from '../../../../../../src/plugins/kibana_react/public';
 import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../../plugins/ui_actions_enhanced/public';
-import { ChartActionContext } from '../../../../../../src/plugins/embeddable/public';
-import { CollectConfigProps } from '../../../../../../src/plugins/kibana_utils/public';
 import {
+  ChartActionContext,
   SELECT_RANGE_TRIGGER,
   VALUE_CLICK_TRIGGER,
-} from '../../../../../../src/plugins/ui_actions/public';
+} from '../../../../../../src/plugins/embeddable/public';
+import { CollectConfigProps } from '../../../../../../src/plugins/kibana_utils/public';
 
 export type ActionContext = ChartActionContext;
 
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_only_range_select_drilldown/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_only_range_select_drilldown/index.tsx
index 24385bd6baa42f..4e5b3187af42b5 100644
--- a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_only_range_select_drilldown/index.tsx
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_only_range_select_drilldown/index.tsx
@@ -8,9 +8,11 @@ import React from 'react';
 import { EuiFormRow, EuiFieldText } from '@elastic/eui';
 import { reactToUiComponent } from '../../../../../../src/plugins/kibana_react/public';
 import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../../plugins/ui_actions_enhanced/public';
-import { RangeSelectContext } from '../../../../../../src/plugins/embeddable/public';
+import {
+  RangeSelectContext,
+  SELECT_RANGE_TRIGGER,
+} from '../../../../../../src/plugins/embeddable/public';
 import { CollectConfigProps } from '../../../../../../src/plugins/kibana_utils/public';
-import { SELECT_RANGE_TRIGGER } from '../../../../../../src/plugins/ui_actions/public';
 import { BaseActionFactoryContext } from '../../../../../plugins/ui_actions_enhanced/public/dynamic_actions';
 
 export type Config = {
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/drilldown.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/drilldown.tsx
index 9cda534a340d66..2f161efe6f3889 100644
--- a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/drilldown.tsx
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/drilldown.tsx
@@ -13,7 +13,7 @@ import { CollectConfigContainer } from './collect_config_container';
 import { SAMPLE_DASHBOARD_TO_DISCOVER_DRILLDOWN } from './constants';
 import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../../plugins/ui_actions_enhanced/public';
 import { txtGoToDiscover } from './i18n';
-import { APPLY_FILTER_TRIGGER } from '../../../../../../src/plugins/ui_actions/public';
+import { APPLY_FILTER_TRIGGER } from '../../../../../../src/plugins/data/public';
 
 const isOutputWithIndexPatterns = (
   output: unknown
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/types.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/types.ts
index f0497780430d4a..7c8915c3f143fd 100644
--- a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/types.ts
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/types.ts
@@ -6,8 +6,9 @@
 
 import { CollectConfigProps as CollectConfigPropsBase } from '../../../../../../src/plugins/kibana_utils/public';
 import { ApplyGlobalFilterActionContext } from '../../../../../../src/plugins/data/public';
+import { IEmbeddable } from '../../../../../../src/plugins/embeddable/public';
 
-export type ActionContext = ApplyGlobalFilterActionContext;
+export type ActionContext = ApplyGlobalFilterActionContext & { embeddable: IEmbeddable };
 
 export type Config = {
   /**
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable.ts b/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable.ts
index fcd0c9b94c988c..e58ab5b8ea9d25 100644
--- a/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable.ts
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable.ts
@@ -7,9 +7,12 @@
 import { createElement } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { AdvancedUiActionsStart } from '../../../../../plugins/ui_actions_enhanced/public';
-import { Embeddable, EmbeddableInput } from '../../../../../../src/plugins/embeddable/public';
+import {
+  Embeddable,
+  EmbeddableInput,
+  VALUE_CLICK_TRIGGER,
+} from '../../../../../../src/plugins/embeddable/public';
 import { ButtonEmbeddableComponent } from './button_embeddable_component';
-import { VALUE_CLICK_TRIGGER } from '../../../../../../src/plugins/ui_actions/public';
 
 export const BUTTON_EMBEDDABLE = 'BUTTON_EMBEDDABLE';
 
diff --git a/x-pack/plugins/dashboard_enhanced/kibana.json b/x-pack/plugins/dashboard_enhanced/kibana.json
index b24c0b6983f407..d3a1f29f0c7ffd 100644
--- a/x-pack/plugins/dashboard_enhanced/kibana.json
+++ b/x-pack/plugins/dashboard_enhanced/kibana.json
@@ -9,7 +9,6 @@
     "embeddable",
     "kibanaUtils",
     "embeddableEnhanced",
-    "kibanaReact",
-    "uiActions"
+    "kibanaReact"
   ]
 }
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/types.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/types.ts
index 7f5137812ee324..d2d3c37a692874 100644
--- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/types.ts
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/types.ts
@@ -5,7 +5,7 @@
  */
 
 import { UiActionsEnhancedBaseActionFactoryContext } from '../../../../../ui_actions_enhanced/public';
-import { APPLY_FILTER_TRIGGER } from '../../../../../../../src/plugins/ui_actions/public';
+import { APPLY_FILTER_TRIGGER } from '../../../../../../../src/plugins/data/public';
 import { DrilldownConfig } from '../../../../common';
 
 export type Config = DrilldownConfig;
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/drilldown_shared.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/drilldown_shared.ts
index e1d8a2b3671a25..ff79cda1bb2158 100644
--- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/drilldown_shared.ts
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/drilldown_shared.ts
@@ -4,12 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { APPLY_FILTER_TRIGGER } from '../../../../../../../src/plugins/data/public';
 import {
-  APPLY_FILTER_TRIGGER,
   SELECT_RANGE_TRIGGER,
-  TriggerId,
   VALUE_CLICK_TRIGGER,
-} from '../../../../../../../src/plugins/ui_actions/public';
+} from '../../../../../../../src/plugins/embeddable/public';
+import { TriggerId } from '../../../../../../../src/plugins/ui_actions/public';
 
 /**
  * We know that VALUE_CLICK_TRIGGER and SELECT_RANGE_TRIGGER are also triggering APPLY_FILTER_TRIGGER.
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.tsx
index 921c2aed00624a..c2bf48188c313d 100644
--- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.tsx
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.tsx
@@ -4,17 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  TriggerContextMapping,
-  APPLY_FILTER_TRIGGER,
-} from '../../../../../../../src/plugins/ui_actions/public';
+import { TriggerContextMapping } from '../../../../../../../src/plugins/ui_actions/public';
 import { DashboardUrlGeneratorState } from '../../../../../../../src/plugins/dashboard/public';
 import {
+  APPLY_FILTER_TRIGGER,
   esFilters,
+  Filter,
   isFilters,
   isQuery,
   isTimeRange,
+  Query,
+  TimeRange,
 } from '../../../../../../../src/plugins/data/public';
+import { IEmbeddable, EmbeddableInput } from '../../../../../../../src/plugins/embeddable/public';
 import {
   AbstractDashboardDrilldown,
   AbstractDashboardDrilldownParams,
@@ -24,6 +26,12 @@ import { KibanaURL } from '../../../../../../../src/plugins/share/public';
 import { EMBEDDABLE_TO_DASHBOARD_DRILLDOWN } from './constants';
 import { createExtract, createInject } from '../../../../common';
 
+interface EmbeddableQueryInput extends EmbeddableInput {
+  query?: Query;
+  filters?: Filter[];
+  timeRange?: TimeRange;
+}
+
 type Trigger = typeof APPLY_FILTER_TRIGGER;
 type Context = TriggerContextMapping[Trigger];
 export type Params = AbstractDashboardDrilldownParams;
@@ -46,7 +54,8 @@ export class EmbeddableToDashboardDrilldown extends AbstractDashboardDrilldown<T
     };
 
     if (context.embeddable) {
-      const input = context.embeddable.getInput();
+      const embeddable = context.embeddable as IEmbeddable<EmbeddableQueryInput>;
+      const input = embeddable.getInput();
       if (isQuery(input.query) && config.useCurrentFilters) state.query = input.query;
 
       // if useCurrentDashboardDataRange is enabled, then preserve current time range
diff --git a/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_chart_action.ts b/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_chart_action.ts
index 52946b3dca7a1f..2f983ba2476254 100644
--- a/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_chart_action.ts
+++ b/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_chart_action.ts
@@ -13,11 +13,14 @@ import {
   ApplyGlobalFilterActionContext,
   esFilters,
 } from '../../../../../../src/plugins/data/public';
+import { IEmbeddable } from '../../../../../../src/plugins/embeddable/public';
 import { KibanaURL } from '../../../../../../src/plugins/share/public';
 import * as shared from './shared';
 import { AbstractExploreDataAction } from './abstract_explore_data_action';
 
-export type ExploreDataChartActionContext = ApplyGlobalFilterActionContext;
+export interface ExploreDataChartActionContext extends ApplyGlobalFilterActionContext {
+  embeddable?: IEmbeddable;
+}
 
 export const ACTION_EXPLORE_DATA_CHART = 'ACTION_EXPLORE_DATA_CHART';
 
diff --git a/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_context_menu_action.ts b/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_context_menu_action.ts
index fdd096e718339d..fda07fb47ab0d7 100644
--- a/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_context_menu_action.ts
+++ b/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_context_menu_action.ts
@@ -5,12 +5,25 @@
  */
 
 import { Action } from '../../../../../../src/plugins/ui_actions/public';
-import { EmbeddableContext } from '../../../../../../src/plugins/embeddable/public';
+import {
+  EmbeddableContext,
+  EmbeddableInput,
+  IEmbeddable,
+} from '../../../../../../src/plugins/embeddable/public';
+import { Query, Filter, TimeRange } from '../../../../../../src/plugins/data/public';
 import { DiscoverUrlGeneratorState } from '../../../../../../src/plugins/discover/public';
 import { KibanaURL } from '../../../../../../src/plugins/share/public';
 import * as shared from './shared';
 import { AbstractExploreDataAction } from './abstract_explore_data_action';
 
+interface EmbeddableQueryInput extends EmbeddableInput {
+  query?: Query;
+  filters?: Filter[];
+  timeRange?: TimeRange;
+}
+
+type EmbeddableQueryContext = EmbeddableContext<IEmbeddable<EmbeddableQueryInput>>;
+
 export const ACTION_EXPLORE_DATA = 'ACTION_EXPLORE_DATA';
 
 /**
@@ -18,15 +31,15 @@ export const ACTION_EXPLORE_DATA = 'ACTION_EXPLORE_DATA';
  * menu of a dashboard panel.
  */
 export class ExploreDataContextMenuAction
-  extends AbstractExploreDataAction<EmbeddableContext>
-  implements Action<EmbeddableContext> {
+  extends AbstractExploreDataAction<EmbeddableQueryContext>
+  implements Action<EmbeddableQueryContext> {
   public readonly id = ACTION_EXPLORE_DATA;
 
   public readonly type = ACTION_EXPLORE_DATA;
 
   public readonly order = 200;
 
-  protected readonly getUrl = async (context: EmbeddableContext): Promise<KibanaURL> => {
+  protected readonly getUrl = async (context: EmbeddableQueryContext): Promise<KibanaURL> => {
     const { plugins } = this.params.start();
     const { urlGenerator } = plugins.discover;
 
diff --git a/x-pack/plugins/discover_enhanced/public/plugin.ts b/x-pack/plugins/discover_enhanced/public/plugin.ts
index f1273ab00bdd40..78f3464484ccf3 100644
--- a/x-pack/plugins/discover_enhanced/public/plugin.ts
+++ b/x-pack/plugins/discover_enhanced/public/plugin.ts
@@ -6,11 +6,8 @@
 
 import { CoreSetup, CoreStart, Plugin } from 'kibana/public';
 import { PluginInitializerContext } from 'kibana/public';
-import {
-  UiActionsSetup,
-  UiActionsStart,
-  APPLY_FILTER_TRIGGER,
-} from '../../../../src/plugins/ui_actions/public';
+import { UiActionsSetup, UiActionsStart } from '../../../../src/plugins/ui_actions/public';
+import { APPLY_FILTER_TRIGGER } from '../../../../src/plugins/data/public';
 import { createStartServicesGetter } from '../../../../src/plugins/kibana_utils/public';
 import { DiscoverSetup, DiscoverStart } from '../../../../src/plugins/discover/public';
 import { SharePluginSetup, SharePluginStart } from '../../../../src/plugins/share/public';
diff --git a/x-pack/plugins/drilldowns/url_drilldown/public/lib/test/data.ts b/x-pack/plugins/drilldowns/url_drilldown/public/lib/test/data.ts
index e0627c521bb795..23e73bea5dfec6 100644
--- a/x-pack/plugins/drilldowns/url_drilldown/public/lib/test/data.ts
+++ b/x-pack/plugins/drilldowns/url_drilldown/public/lib/test/data.ts
@@ -5,6 +5,7 @@
  */
 
 import { DatatableColumnType } from '../../../../../../../src/plugins/expressions/common';
+import { Query, Filter, TimeRange } from '../../../../../../../src/plugins/data/public';
 import {
   Embeddable,
   EmbeddableInput,
@@ -159,6 +160,9 @@ export const rowClickData = {
 
 interface TestInput extends EmbeddableInput {
   savedObjectId?: string;
+  query?: Query;
+  filters?: Filter[];
+  timeRange?: TimeRange;
 }
 
 interface TestOutput extends EmbeddableOutput {
diff --git a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.test.ts b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.test.ts
index 24406cefce7a21..e3730084d70207 100644
--- a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.test.ts
+++ b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.test.ts
@@ -6,14 +6,11 @@
 
 import { IExternalUrl } from 'src/core/public';
 import { UrlDrilldown, ActionContext, Config } from './url_drilldown';
-import { IEmbeddable } from '../../../../../../src/plugins/embeddable/public/lib/embeddables';
+import { IEmbeddable, VALUE_CLICK_TRIGGER } from '../../../../../../src/plugins/embeddable/public';
 import { DatatableColumnType } from '../../../../../../src/plugins/expressions/common';
 import { of } from '../../../../../../src/plugins/kibana_utils';
 import { createPoint, rowClickData, TestEmbeddable } from './test/data';
-import {
-  VALUE_CLICK_TRIGGER,
-  ROW_CLICK_TRIGGER,
-} from '../../../../../../src/plugins/ui_actions/public';
+import { ROW_CLICK_TRIGGER } from '../../../../../../src/plugins/ui_actions/public';
 
 const mockDataPoints = [
   {
diff --git a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx
index 8dfb2c54c5ab02..bfeab263d20e31 100644
--- a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx
+++ b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx
@@ -12,13 +12,13 @@ import {
   ChartActionContext,
   CONTEXT_MENU_TRIGGER,
   IEmbeddable,
-} from '../../../../../../src/plugins/embeddable/public';
-import { CollectConfigProps as CollectConfigPropsBase } from '../../../../../../src/plugins/kibana_utils/public';
-import {
-  ROW_CLICK_TRIGGER,
+  EmbeddableInput,
   SELECT_RANGE_TRIGGER,
   VALUE_CLICK_TRIGGER,
-} from '../../../../../../src/plugins/ui_actions/public';
+} from '../../../../../../src/plugins/embeddable/public';
+import { ROW_CLICK_TRIGGER } from '../../../../../../src/plugins/ui_actions/public';
+import { Query, Filter, TimeRange } from '../../../../../../src/plugins/data/public';
+import { CollectConfigProps as CollectConfigPropsBase } from '../../../../../../src/plugins/kibana_utils/public';
 import {
   UiActionsEnhancedDrilldownDefinition as Drilldown,
   UrlDrilldownGlobalScope,
@@ -31,6 +31,15 @@ import {
 import { getPanelVariables, getEventScope, getEventVariableList } from './url_drilldown_scope';
 import { txtUrlDrilldownDisplayName } from './i18n';
 
+interface EmbeddableQueryInput extends EmbeddableInput {
+  query?: Query;
+  filters?: Filter[];
+  timeRange?: TimeRange;
+}
+
+/** @internal */
+export type EmbeddableWithQueryInput = IEmbeddable<EmbeddableQueryInput>;
+
 interface UrlDrilldownDeps {
   externalUrl: IExternalUrl;
   getGlobalScope: () => UrlDrilldownGlobalScope;
@@ -39,7 +48,7 @@ interface UrlDrilldownDeps {
   getVariablesHelpDocsLink: () => string;
 }
 
-export type ActionContext = ChartActionContext;
+export type ActionContext = ChartActionContext<EmbeddableWithQueryInput>;
 export type Config = UrlDrilldownConfig;
 export type UrlTrigger =
   | typeof VALUE_CLICK_TRIGGER
@@ -48,7 +57,7 @@ export type UrlTrigger =
   | typeof CONTEXT_MENU_TRIGGER;
 
 export interface ActionFactoryContext extends BaseActionFactoryContext<UrlTrigger> {
-  embeddable?: IEmbeddable;
+  embeddable?: EmbeddableWithQueryInput;
 }
 export type CollectConfigProps = CollectConfigPropsBase<Config, ActionFactoryContext>;
 
diff --git a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown_scope.ts b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown_scope.ts
index 3e5fc0a968d39c..12b74d475e9322 100644
--- a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown_scope.ts
+++ b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown_scope.ts
@@ -11,20 +11,24 @@
 
 import type { Filter, Query, TimeRange } from '../../../../../../src/plugins/data/public';
 import {
-  IEmbeddable,
   isRangeSelectTriggerContext,
   isValueClickTriggerContext,
   isRowClickTriggerContext,
   isContextMenuTriggerContext,
   RangeSelectContext,
+  SELECT_RANGE_TRIGGER,
   ValueClickContext,
+  VALUE_CLICK_TRIGGER,
+  EmbeddableInput,
   EmbeddableOutput,
 } from '../../../../../../src/plugins/embeddable/public';
-import type { ActionContext, ActionFactoryContext } from './url_drilldown';
+import type {
+  ActionContext,
+  ActionFactoryContext,
+  EmbeddableWithQueryInput,
+} from './url_drilldown';
 import {
-  SELECT_RANGE_TRIGGER,
   RowClickContext,
-  VALUE_CLICK_TRIGGER,
   ROW_CLICK_TRIGGER,
 } from '../../../../../../src/plugins/ui_actions/public';
 
@@ -32,7 +36,7 @@ import {
  * Part of context scope extracted from an embeddable
  * Expose on the scope as: `{{context.panel.id}}`, `{{context.panel.filters.[0]}}`
  */
-interface EmbeddableUrlDrilldownContextScope {
+interface EmbeddableUrlDrilldownContextScope extends EmbeddableInput {
   /**
    * ID of the embeddable panel.
    */
@@ -59,10 +63,8 @@ interface EmbeddableUrlDrilldownContextScope {
   savedObjectId?: string;
 }
 
-export function getPanelVariables(contextScopeInput: {
-  embeddable?: IEmbeddable;
-}): EmbeddableUrlDrilldownContextScope {
-  function hasEmbeddable(val: unknown): val is { embeddable: IEmbeddable } {
+export function getPanelVariables(contextScopeInput: unknown): EmbeddableUrlDrilldownContextScope {
+  function hasEmbeddable(val: unknown): val is { embeddable: EmbeddableWithQueryInput } {
     if (val && typeof val === 'object' && 'embeddable' in val) return true;
     return false;
   }
@@ -99,7 +101,7 @@ function getIndexPatternIds(output: EmbeddableOutput): string[] {
 }
 
 export function getEmbeddableVariables(
-  embeddable: IEmbeddable
+  embeddable: EmbeddableWithQueryInput
 ): EmbeddableUrlDrilldownContextScope {
   const input = embeddable.getInput();
   const output = embeddable.getOutput();
@@ -195,10 +197,10 @@ function getEventScopeFromValueClickTriggerContext(
   });
 }
 
-function getEventScopeFromRowClickTriggerContext({
-  embeddable,
-  data,
-}: RowClickContext): RowClickTriggerEventScope {
+function getEventScopeFromRowClickTriggerContext(ctx: RowClickContext): RowClickTriggerEventScope {
+  const { data } = ctx;
+  const embeddable = ctx.embeddable as EmbeddableWithQueryInput;
+
   const { rowIndex } = data;
   const columns = data.columns || data.table.columns.map(({ id }) => id);
   const values: Primitive[] = [];
diff --git a/x-pack/plugins/embeddable_enhanced/public/embeddables/embeddable_action_storage.test.ts b/x-pack/plugins/embeddable_enhanced/public/embeddables/embeddable_action_storage.test.ts
index 9856d3a558e24a..8361b002c8206b 100644
--- a/x-pack/plugins/embeddable_enhanced/public/embeddables/embeddable_action_storage.test.ts
+++ b/x-pack/plugins/embeddable_enhanced/public/embeddables/embeddable_action_storage.test.ts
@@ -12,7 +12,7 @@ import {
 import { UiActionsEnhancedSerializedEvent } from '../../../ui_actions_enhanced/public';
 import { of } from '../../../../../src/plugins/kibana_utils/public';
 // use real const to make test fail in case someone accidentally changes it
-import { APPLY_FILTER_TRIGGER } from '../../../../../src/plugins/ui_actions/public';
+import { APPLY_FILTER_TRIGGER } from '../../../../../src/plugins/data/public';
 
 class TestEmbeddable extends Embeddable<EmbeddableWithDynamicActionsInput> {
   public readonly type = 'test';
diff --git a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
index 190470e6c42357..b00760e9664f35 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
@@ -53,11 +53,17 @@ import { LensAttributeService } from '../../lens_attribute_service';
 
 export type LensSavedObjectAttributes = Omit<Document, 'savedObjectId' | 'type'>;
 
+interface LensBaseEmbeddableInput extends EmbeddableInput {
+  filters?: Filter[];
+  query?: Query;
+  timeRange?: TimeRange;
+}
+
 export type LensByValueInput = {
   attributes: LensSavedObjectAttributes;
-} & EmbeddableInput;
+} & LensBaseEmbeddableInput;
 
-export type LensByReferenceInput = SavedObjectEmbeddableInput & EmbeddableInput;
+export type LensByReferenceInput = SavedObjectEmbeddableInput & LensBaseEmbeddableInput;
 export type LensEmbeddableInput = (LensByValueInput | LensByReferenceInput) & {
   palette?: PaletteOutput;
   renderMode?: RenderMode;
diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts
index d5283822107e47..57308f9c18b403 100644
--- a/x-pack/plugins/lens/public/types.ts
+++ b/x-pack/plugins/lens/public/types.ts
@@ -20,12 +20,11 @@ import { DragContextState } from './drag_drop';
 import { Document } from './persistence';
 import { DateRange } from '../common';
 import { Query, Filter, SavedQuery, IFieldFormat } from '../../../../src/plugins/data/public';
+import { TriggerContext, VisualizeFieldContext } from '../../../../src/plugins/ui_actions/public';
 import {
   SELECT_RANGE_TRIGGER,
-  TriggerContext,
   VALUE_CLICK_TRIGGER,
-  VisualizeFieldContext,
-} from '../../../../src/plugins/ui_actions/public';
+} from '../../../../src/plugins/embeddable/public';
 import type {
   LensSortActionData,
   LENS_EDIT_SORT_ACTION,
diff --git a/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx b/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx
index 7aaabc427790af..5e5d431c7c2129 100644
--- a/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx
+++ b/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx
@@ -14,15 +14,15 @@ import {
   Embeddable,
   IContainer,
   ReferenceOrValueEmbeddable,
+  VALUE_CLICK_TRIGGER,
 } from '../../../../../src/plugins/embeddable/public';
-import { ACTION_GLOBAL_APPLY_FILTER } from '../../../../../src/plugins/data/public';
 import {
-  APPLY_FILTER_TRIGGER,
-  VALUE_CLICK_TRIGGER,
   ActionExecutionContext,
   TriggerContextMapping,
 } from '../../../../../src/plugins/ui_actions/public';
 import {
+  ACTION_GLOBAL_APPLY_FILTER,
+  APPLY_FILTER_TRIGGER,
   esFilters,
   TimeRange,
   Filter,
diff --git a/x-pack/plugins/maps/public/embeddable/types.ts b/x-pack/plugins/maps/public/embeddable/types.ts
index a401cafcff8ea6..417991ea2d367e 100644
--- a/x-pack/plugins/maps/public/embeddable/types.ts
+++ b/x-pack/plugins/maps/public/embeddable/types.ts
@@ -10,7 +10,7 @@ import {
   EmbeddableOutput,
   SavedObjectEmbeddableInput,
 } from '../../../../../src/plugins/embeddable/public';
-import { RefreshInterval } from '../../../../../src/plugins/data/common';
+import { RefreshInterval, Query, Filter, TimeRange } from '../../../../../src/plugins/data/common';
 import { MapCenterAndZoom } from '../../common/descriptor_types';
 import { MapSavedObjectAttributes } from '../../common/map_saved_object_type';
 
@@ -30,6 +30,9 @@ interface MapEmbeddableState {
   mapCenter?: MapCenterAndZoom;
   hiddenLayers?: string[];
   hideFilterActions?: boolean;
+  filters?: Filter[];
+  query?: Query;
+  timeRange?: TimeRange;
 }
 export type MapByValueInput = {
   attributes: MapSavedObjectAttributes;
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 1023c7ac7d889d..e38058a312f3c0 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -3490,12 +3490,12 @@
     "uiActions.actionPanel.more": "詳細",
     "uiActions.actionPanel.title": "オプション",
     "uiActions.errors.incompatibleAction": "操作に互換性がありません",
-    "uiActions.triggers.applyFilterDescription": "Kibanaフィルターが適用されるとき。単一の値または範囲フィルターにすることができます。",
-    "uiActions.triggers.applyFilterTitle": "フィルターを適用",
-    "uiActions.triggers.selectRangeDescription": "ビジュアライゼーションでの値の範囲",
-    "uiActions.triggers.selectRangeTitle": "範囲選択",
-    "uiActions.triggers.valueClickDescription": "ビジュアライゼーションでデータポイントをクリック",
-    "uiActions.triggers.valueClickTitle": "シングルクリック",
+    "data.triggers.applyFilterDescription": "Kibanaフィルターが適用されるとき。単一の値または範囲フィルターにすることができます。",
+    "data.triggers.applyFilterTitle": "フィルターを適用",
+    "embeddableApi.selectRangeTrigger.description": "ビジュアライゼーションでの値の範囲",
+    "embeddableApi.selectRangeTrigger.title": "範囲選択",
+    "embeddableApi.valueClickTrigger.description": "ビジュアライゼーションでデータポイントをクリック",
+    "embeddableApi.valueClickTrigger.title": "シングルクリック",
     "usageCollection.stats.notReadyMessage": "まだ統計が準備できていません。しばらくたってから再試行してください。",
     "visDefaultEditor.advancedToggle.advancedLinkLabel": "高度な設定",
     "visDefaultEditor.agg.toggleEditorButtonAriaLabel": "{schema} エディターを切り替える",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index f803ff48df76d3..17bcd61898efe9 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -3491,12 +3491,12 @@
     "uiActions.actionPanel.more": "更多",
     "uiActions.actionPanel.title": "选项",
     "uiActions.errors.incompatibleAction": "操作不兼容",
-    "uiActions.triggers.applyFilterDescription": "应用 kibana 筛选时。可能是单个值或范围筛选。",
-    "uiActions.triggers.applyFilterTitle": "应用筛选",
-    "uiActions.triggers.selectRangeDescription": "可视化上的一组值",
-    "uiActions.triggers.selectRangeTitle": "范围选择",
-    "uiActions.triggers.valueClickDescription": "可视化上的数据点单击",
-    "uiActions.triggers.valueClickTitle": "单击",
+    "data.triggers.applyFilterDescription": "应用 kibana 筛选时。可能是单个值或范围筛选。",
+    "data.triggers.applyFilterTitle": "应用筛选",
+    "embeddableApi.selectRangeTrigger.description": "可视化上的一组值",
+    "embeddableApi.selectRangeTrigger.title": "范围选择",
+    "embeddableApi.valueClickTrigger.description": "可视化上的数据点单击",
+    "embeddableApi.valueClickTrigger.title": "单击",
     "usageCollection.stats.notReadyMessage": "统计信息尚未准备就绪。请稍后重试。",
     "visDefaultEditor.advancedToggle.advancedLinkLabel": "高级",
     "visDefaultEditor.agg.toggleEditorButtonAriaLabel": "切换 {schema} 编辑器",
diff --git a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/test_data.tsx b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/test_data.tsx
index 9bb506b3ebf148..77362752f6960f 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/test_data.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/test_data.tsx
@@ -11,13 +11,12 @@ import { ActionWizard } from './action_wizard';
 import { ActionFactory, ActionFactoryDefinition, BaseActionConfig } from '../../dynamic_actions';
 import { CollectConfigProps } from '../../../../../../src/plugins/kibana_utils/public';
 import { licensingMock } from '../../../../licensing/public/mocks';
+import { Trigger, TriggerId } from '../../../../../../src/plugins/ui_actions/public';
+import { APPLY_FILTER_TRIGGER } from '../../../../../../src/plugins/data/public';
 import {
-  APPLY_FILTER_TRIGGER,
   SELECT_RANGE_TRIGGER,
-  Trigger,
-  TriggerId,
   VALUE_CLICK_TRIGGER,
-} from '../../../../../../src/plugins/ui_actions/public';
+} from '../../../../../../src/plugins/embeddable/public';
 
 export const dashboards = [
   { id: 'dashboard1', title: 'Dashboard 1' },

From e8b21bc6c12cfd793c46e1d86577d5e5ec8a71f8 Mon Sep 17 00:00:00 2001
From: Thomas Watson <w@tson.dk>
Date: Sat, 19 Dec 2020 13:10:11 +0100
Subject: [PATCH 46/75] Upgrade to hapi version 20 (#85406)

---
 ...in-core-server.legacyelasticsearcherror.md |   2 +-
 package.json                                  |  35 +-
 .../server/elasticsearch/legacy/errors.ts     |   4 +-
 src/core/server/http/http_server.test.ts      |   4 +-
 src/core/server/http/http_server.ts           |  58 +-
 .../server/http/lifecycle/on_pre_response.ts  |  12 +-
 src/core/server/http/router/error_wrapper.ts  |   2 +-
 .../server/http/router/response_adapter.ts    |   7 +-
 src/core/server/http/router/router.ts         |   5 +-
 .../saved_objects/service/lib/errors.ts       |   2 +-
 src/core/server/server.api.md                 |   2 +-
 .../server/routes/fields.ts                   |   2 +-
 .../apm/server/routes/create_api/index.ts     |   2 +-
 .../plugins/case/server/routes/api/utils.ts   |   2 +-
 .../fleet/server/errors/handlers.test.ts      |   4 +-
 .../plugins/fleet/server/errors/handlers.ts   |   2 +-
 .../epm/elasticsearch/template/install.ts     |   4 +-
 .../server/services/epm/packages/install.ts   |   2 +-
 .../lens/server/routes/existing_fields.ts     |   2 +-
 .../ml/common/types/data_frame_analytics.ts   |   2 +-
 .../ml/common/util/errors/errors.test.ts      |   3 +-
 x-pack/plugins/ml/common/util/errors/types.ts |   9 +-
 .../plugins/ml/server/client/error_wrapper.ts |   2 +-
 x-pack/plugins/monitoring/server/plugin.ts    |   2 +-
 .../reporting/server/routes/generation.ts     |   4 +-
 .../authentication_service.test.ts            |   2 +-
 .../authentication/providers/kerberos.ts      |   4 +-
 .../lib/detection_engine/routes/utils.test.ts |   6 +-
 .../lib/create_empty_failure_response.ts      |   4 +-
 x-pack/plugins/spaces/server/lib/errors.ts    |   2 +-
 .../server/routes/api/error_utils.ts          |   5 +-
 yarn.lock                                     | 579 ++++++++----------
 32 files changed, 349 insertions(+), 428 deletions(-)

diff --git a/docs/development/core/server/kibana-plugin-core-server.legacyelasticsearcherror.md b/docs/development/core/server/kibana-plugin-core-server.legacyelasticsearcherror.md
index 40fc1a8e05a68b..7c53356615ee9f 100644
--- a/docs/development/core/server/kibana-plugin-core-server.legacyelasticsearcherror.md
+++ b/docs/development/core/server/kibana-plugin-core-server.legacyelasticsearcherror.md
@@ -9,7 +9,7 @@
 <b>Signature:</b>
 
 ```typescript
-export interface LegacyElasticsearchError extends Boom 
+export interface LegacyElasticsearchError extends Boom.Boom 
 ```
 
 ## Properties
diff --git a/package.json b/package.json
index 8e99b5c693ceca..252c8130c38d63 100644
--- a/package.json
+++ b/package.json
@@ -73,10 +73,6 @@
     "url": "https://github.com/elastic/kibana.git"
   },
   "resolutions": {
-    "**/@hapi/iron": "^5.1.4",
-    "**/@types/hapi__boom": "^7.4.1",
-    "**/@types/hapi__hapi": "^18.2.6",
-    "**/@types/hapi__mimos": "4.1.0",
     "**/@types/node": "14.14.14",
     "**/chokidar": "^3.4.3",
     "**/cross-fetch/node-fetch": "^2.6.1",
@@ -115,17 +111,17 @@
     "@elastic/request-crypto": "1.1.4",
     "@elastic/safer-lodash-set": "link:packages/elastic-safer-lodash-set",
     "@elastic/search-ui-app-search-connector": "^1.5.0",
-    "@hapi/boom": "^7.4.11",
-    "@hapi/cookie": "^10.1.2",
-    "@hapi/good-squeeze": "5.2.1",
-    "@hapi/h2o2": "^8.3.2",
-    "@hapi/hapi": "^18.4.1",
-    "@hapi/hoek": "^8.5.1",
-    "@hapi/inert": "^5.2.2",
-    "@hapi/podium": "^3.4.3",
-    "@hapi/statehood": "^6.1.2",
-    "@hapi/vision": "^5.5.4",
-    "@hapi/wreck": "^15.0.2",
+    "@hapi/boom": "^9.1.1",
+    "@hapi/cookie": "^11.0.2",
+    "@hapi/good-squeeze": "6.0.0",
+    "@hapi/h2o2": "^9.0.2",
+    "@hapi/hapi": "^20.0.3",
+    "@hapi/hoek": "^9.1.0",
+    "@hapi/inert": "^6.0.3",
+    "@hapi/podium": "^4.1.1",
+    "@hapi/statehood": "^7.0.3",
+    "@hapi/vision": "^6.0.1",
+    "@hapi/wreck": "^17.1.0",
     "@kbn/ace": "link:packages/kbn-ace",
     "@kbn/analytics": "link:packages/kbn-analytics",
     "@kbn/apm-config-loader": "link:packages/kbn-apm-config-loader",
@@ -452,14 +448,11 @@
     "@types/graphql": "^0.13.2",
     "@types/gulp": "^4.0.6",
     "@types/gulp-zip": "^4.0.1",
-    "@types/hapi__boom": "^7.4.1",
     "@types/hapi__cookie": "^10.1.1",
-    "@types/hapi__h2o2": "8.3.0",
-    "@types/hapi__hapi": "^18.2.6",
-    "@types/hapi__hoek": "^6.2.0",
-    "@types/hapi__inert": "^5.2.1",
+    "@types/hapi__h2o2": "^8.3.2",
+    "@types/hapi__hapi": "^20.0.2",
+    "@types/hapi__inert": "^5.2.2",
     "@types/hapi__podium": "^3.4.1",
-    "@types/hapi__wreck": "^15.0.1",
     "@types/has-ansi": "^3.0.0",
     "@types/he": "^1.1.1",
     "@types/history": "^4.7.3",
diff --git a/src/core/server/elasticsearch/legacy/errors.ts b/src/core/server/elasticsearch/legacy/errors.ts
index e557e7395fe566..adc1fa07287842 100644
--- a/src/core/server/elasticsearch/legacy/errors.ts
+++ b/src/core/server/elasticsearch/legacy/errors.ts
@@ -30,7 +30,7 @@ enum ErrorCode {
  * @deprecated. The new elasticsearch client doesn't wrap errors anymore.
  * @public
  * */
-export interface LegacyElasticsearchError extends Boom {
+export interface LegacyElasticsearchError extends Boom.Boom {
   [code]?: string;
 }
 
@@ -86,7 +86,7 @@ export class LegacyElasticsearchErrorHelpers {
     const decoratedError = decorate(error, ErrorCode.NOT_AUTHORIZED, 401, reason);
     const wwwAuthHeader = get(error, 'body.error.header[WWW-Authenticate]') as string;
 
-    decoratedError.output.headers['WWW-Authenticate'] =
+    (decoratedError.output.headers as { [key: string]: string })['WWW-Authenticate'] =
       wwwAuthHeader || 'Basic realm="Authorization Required"';
 
     return decoratedError;
diff --git a/src/core/server/http/http_server.test.ts b/src/core/server/http/http_server.test.ts
index 71040598d34b12..cbb60480c4cf17 100644
--- a/src/core/server/http/http_server.test.ts
+++ b/src/core/server/http/http_server.test.ts
@@ -1214,7 +1214,7 @@ describe('timeout options', () => {
       router.get(
         {
           path: '/',
-          validate: { body: schema.any() },
+          validate: { body: schema.maybe(schema.any()) },
         },
         (context, req, res) => {
           return res.ok({
@@ -1247,7 +1247,7 @@ describe('timeout options', () => {
       router.get(
         {
           path: '/',
-          validate: { body: schema.any() },
+          validate: { body: schema.maybe(schema.any()) },
           options: { timeout: { idleSocket: 12000 } },
         },
         (context, req, res) => {
diff --git a/src/core/server/http/http_server.ts b/src/core/server/http/http_server.ts
index 43f5264ff22e31..42e89b66d9c519 100644
--- a/src/core/server/http/http_server.ts
+++ b/src/core/server/http/http_server.ts
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Server } from '@hapi/hapi';
+import { Server, ServerRoute } from '@hapi/hapi';
 import HapiStaticFiles from '@hapi/inert';
 import url from 'url';
 import uuid from 'uuid';
@@ -167,8 +167,6 @@ export class HttpServer {
     for (const router of this.registeredRouters) {
       for (const route of router.getRoutes()) {
         this.log.debug(`registering route handler for [${route.path}]`);
-        // Hapi does not allow payload validation to be specified for 'head' or 'get' requests
-        const validate = isSafeMethod(route.method) ? undefined : { payload: true };
         const { authRequired, tags, body = {}, timeout } = route.options;
         const { accepts: allow, maxBytes, output, parse } = body;
 
@@ -176,57 +174,45 @@ export class HttpServer {
           xsrfRequired: route.options.xsrfRequired ?? !isSafeMethod(route.method),
         };
 
-        // To work around https://github.com/hapijs/hapi/issues/4122 until v20, set the socket
-        // timeout on the route to a fake timeout only when the payload timeout is specified.
-        // Within the onPreAuth lifecycle of the route itself, we'll override the timeout with the
-        // real socket timeout.
-        const fakeSocketTimeout = timeout?.payload ? timeout.payload + 1 : undefined;
-
-        this.server.route({
+        const routeOpts: ServerRoute = {
           handler: route.handler,
           method: route.method,
           path: route.path,
           options: {
             auth: this.getAuthOption(authRequired),
             app: kibanaRouteOptions,
-            ext: {
-              onPreAuth: {
-                method: (request, h) => {
-                  // At this point, the socket timeout has only been set to work-around the HapiJS bug.
-                  // We need to either set the real per-route timeout or use the default idle socket timeout
-                  if (timeout?.idleSocket) {
-                    request.raw.req.socket.setTimeout(timeout.idleSocket);
-                  } else if (fakeSocketTimeout) {
-                    // NodeJS uses a socket timeout of `0` to denote "no timeout"
-                    request.raw.req.socket.setTimeout(this.config!.socketTimeout ?? 0);
-                  }
-
-                  return h.continue;
-                },
-              },
-            },
             tags: tags ? Array.from(tags) : undefined,
-            // TODO: This 'validate' section can be removed once the legacy platform is completely removed.
-            // We are telling Hapi that NP routes can accept any payload, so that it can bypass the default
-            // validation applied in ./http_tools#getServerOptions
-            // (All NP routes are already required to specify their own validation in order to access the payload)
-            validate,
-            payload: [allow, maxBytes, output, parse, timeout?.payload].some(
-              (v) => typeof v !== 'undefined'
-            )
+            // @ts-expect-error Types are outdated and doesn't allow `payload.multipart` to be `true`
+            payload: [allow, maxBytes, output, parse, timeout?.payload].some((x) => x !== undefined)
               ? {
                   allow,
                   maxBytes,
                   output,
                   parse,
                   timeout: timeout?.payload,
+                  multipart: true,
                 }
               : undefined,
             timeout: {
-              socket: fakeSocketTimeout,
+              socket: timeout?.idleSocket ?? this.config!.socketTimeout,
             },
           },
-        });
+        };
+
+        // Hapi does not allow payload validation to be specified for 'head' or 'get' requests
+        if (!isSafeMethod(route.method)) {
+          // TODO: This 'validate' section can be removed once the legacy platform is completely removed.
+          // We are telling Hapi that NP routes can accept any payload, so that it can bypass the default
+          // validation applied in ./http_tools#getServerOptions
+          // (All NP routes are already required to specify their own validation in order to access the payload)
+          // TODO: Move the setting of the validate option back up to being set at `routeOpts` creation-time once
+          // https://github.com/hapijs/hoek/pull/365 is merged and released in @hapi/hoek v9.1.1. At that point I
+          // imagine the ts-error below will go away as well.
+          // @ts-expect-error "Property 'validate' does not exist on type 'RouteOptions'" <-- ehh?!? yes it does!
+          routeOpts.options!.validate = { payload: true };
+        }
+
+        this.server.route(routeOpts);
       }
     }
 
diff --git a/src/core/server/http/lifecycle/on_pre_response.ts b/src/core/server/http/lifecycle/on_pre_response.ts
index 42179374ec6727..9efcf46148e1fc 100644
--- a/src/core/server/http/lifecycle/on_pre_response.ts
+++ b/src/core/server/http/lifecycle/on_pre_response.ts
@@ -142,7 +142,11 @@ export function adoptToHapiOnPreResponseFormat(fn: OnPreResponseHandler, log: Lo
         if (preResponseResult.isNext(result)) {
           if (result.headers) {
             if (isBoom(response)) {
-              findHeadersIntersection(response.output.headers, result.headers, log);
+              findHeadersIntersection(
+                response.output.headers as { [key: string]: string },
+                result.headers,
+                log
+              );
               // hapi wraps all error response in Boom object internally
               response.output.headers = {
                 ...response.output.headers,
@@ -157,7 +161,7 @@ export function adoptToHapiOnPreResponseFormat(fn: OnPreResponseHandler, log: Lo
           const overriddenResponse = responseToolkit.response(result.body).code(statusCode);
 
           const originalHeaders = isBoom(response) ? response.output.headers : response.headers;
-          setHeaders(overriddenResponse, originalHeaders);
+          setHeaders(overriddenResponse, originalHeaders as { [key: string]: string });
           if (result.headers) {
             setHeaders(overriddenResponse, result.headers);
           }
@@ -178,8 +182,8 @@ export function adoptToHapiOnPreResponseFormat(fn: OnPreResponseHandler, log: Lo
   };
 }
 
-function isBoom(response: any): response is Boom {
-  return response instanceof Boom;
+function isBoom(response: any): response is Boom.Boom {
+  return response instanceof Boom.Boom;
 }
 
 function setHeaders(response: ResponseObject, headers: ResponseHeaders) {
diff --git a/src/core/server/http/router/error_wrapper.ts b/src/core/server/http/router/error_wrapper.ts
index 5a4b7e9f775823..7d141e81ddf367 100644
--- a/src/core/server/http/router/error_wrapper.ts
+++ b/src/core/server/http/router/error_wrapper.ts
@@ -29,7 +29,7 @@ export const wrapErrors: RequestHandlerWrapper = (handler) => {
         return response.customError({
           body: e.output.payload,
           statusCode: e.output.statusCode,
-          headers: e.output.headers,
+          headers: e.output.headers as { [key: string]: string },
         });
       }
       throw e;
diff --git a/src/core/server/http/router/response_adapter.ts b/src/core/server/http/router/response_adapter.ts
index 63acd2207ac3aa..d80c21bde8de8e 100644
--- a/src/core/server/http/router/response_adapter.ts
+++ b/src/core/server/http/router/response_adapter.ts
@@ -56,7 +56,7 @@ export class HapiResponseAdapter {
   }
 
   public toInternalError() {
-    const error = new Boom('', {
+    const error = new Boom.Boom('', {
       statusCode: 500,
     });
 
@@ -129,7 +129,7 @@ export class HapiResponseAdapter {
     }
 
     // we use for BWC with Boom payload for error responses - {error: string, message: string, statusCode: string}
-    const error = new Boom('', {
+    const error = new Boom.Boom('', {
       statusCode: kibanaResponse.status,
     });
 
@@ -142,8 +142,7 @@ export class HapiResponseAdapter {
 
     const headers = kibanaResponse.options.headers;
     if (headers) {
-      // Hapi typings for header accept only strings, although string[] is a valid value
-      error.output.headers = headers as any;
+      error.output.headers = headers;
     }
 
     return error;
diff --git a/src/core/server/http/router/router.ts b/src/core/server/http/router/router.ts
index b1e092ba5786ae..ebc41a793f3b38 100644
--- a/src/core/server/http/router/router.ts
+++ b/src/core/server/http/router/router.ts
@@ -44,7 +44,10 @@ interface RouterRoute {
   method: RouteMethod;
   path: string;
   options: RouteConfigOptions<RouteMethod>;
-  handler: (req: Request, responseToolkit: ResponseToolkit) => Promise<ResponseObject | Boom<any>>;
+  handler: (
+    req: Request,
+    responseToolkit: ResponseToolkit
+  ) => Promise<ResponseObject | Boom.Boom<any>>;
 }
 
 /**
diff --git a/src/core/server/saved_objects/service/lib/errors.ts b/src/core/server/saved_objects/service/lib/errors.ts
index e8836dbd8f7a18..c6c8eee003e4ed 100644
--- a/src/core/server/saved_objects/service/lib/errors.ts
+++ b/src/core/server/saved_objects/service/lib/errors.ts
@@ -44,7 +44,7 @@ const CODE_GENERAL_ERROR = 'SavedObjectsClient/generalError';
 
 const code = Symbol('SavedObjectsClientErrorCode');
 
-export interface DecoratedError extends Boom {
+export interface DecoratedError extends Boom.Boom {
   [code]?: string;
 }
 
diff --git a/src/core/server/server.api.md b/src/core/server/server.api.md
index 5f07a4b5230560..cef5f33726ed56 100644
--- a/src/core/server/server.api.md
+++ b/src/core/server/server.api.md
@@ -1541,7 +1541,7 @@ export type LegacyElasticsearchClientConfig = Pick<ConfigOptions, 'keepAlive' |
 };
 
 // @public
-export interface LegacyElasticsearchError extends Boom {
+export interface LegacyElasticsearchError extends Boom.Boom {
     // (undocumented)
     [code]?: string;
 }
diff --git a/src/plugins/vis_type_timeseries/server/routes/fields.ts b/src/plugins/vis_type_timeseries/server/routes/fields.ts
index a9a890845d154f..e787fd8d08a29e 100644
--- a/src/plugins/vis_type_timeseries/server/routes/fields.ts
+++ b/src/plugins/vis_type_timeseries/server/routes/fields.ts
@@ -39,7 +39,7 @@ export const fieldsRoutes = (framework: Framework) => {
           return res.customError({
             body: err.output.payload,
             statusCode: err.output.statusCode,
-            headers: err.output.headers,
+            headers: err.output.headers as { [key: string]: string },
           });
         }
 
diff --git a/x-pack/plugins/apm/server/routes/create_api/index.ts b/x-pack/plugins/apm/server/routes/create_api/index.ts
index ef445617e9295b..94711cf76c145f 100644
--- a/x-pack/plugins/apm/server/routes/create_api/index.ts
+++ b/x-pack/plugins/apm/server/routes/create_api/index.ts
@@ -140,7 +140,7 @@ export function createApi() {
 }
 
 function convertBoomToKibanaResponse(
-  error: Boom,
+  error: Boom.Boom,
   response: KibanaResponseFactory
 ) {
   const opts = { body: error.message };
diff --git a/x-pack/plugins/case/server/routes/api/utils.ts b/x-pack/plugins/case/server/routes/api/utils.ts
index c8753772648c29..917afb487b1f44 100644
--- a/x-pack/plugins/case/server/routes/api/utils.ts
+++ b/x-pack/plugins/case/server/routes/api/utils.ts
@@ -96,7 +96,7 @@ export function wrapError(error: any): CustomHttpResponseOptions<ResponseError>
   const boom = isBoom(error) ? error : boomify(error, options);
   return {
     body: boom,
-    headers: boom.output.headers,
+    headers: boom.output.headers as { [key: string]: string },
     statusCode: boom.output.statusCode,
   };
 }
diff --git a/x-pack/plugins/fleet/server/errors/handlers.test.ts b/x-pack/plugins/fleet/server/errors/handlers.test.ts
index 4f8eff6c6c75a8..98139e9802fec1 100644
--- a/x-pack/plugins/fleet/server/errors/handlers.test.ts
+++ b/x-pack/plugins/fleet/server/errors/handlers.test.ts
@@ -162,7 +162,7 @@ describe('defaultIngestErrorHandler', () => {
 
   describe('Boom', () => {
     it('500: constructor - one arg', async () => {
-      const error = new Boom('bam');
+      const error = new Boom.Boom('bam');
       const response = httpServerMock.createResponseFactory();
 
       await defaultIngestErrorHandler({ error, response });
@@ -181,7 +181,7 @@ describe('defaultIngestErrorHandler', () => {
     });
 
     it('custom: constructor - 2 args', async () => {
-      const error = new Boom('Problem doing something', {
+      const error = new Boom.Boom('Problem doing something', {
         statusCode: 456,
       });
       const response = httpServerMock.createResponseFactory();
diff --git a/x-pack/plugins/fleet/server/errors/handlers.ts b/x-pack/plugins/fleet/server/errors/handlers.ts
index fecfcf145ca999..e0b05d972bd38c 100644
--- a/x-pack/plugins/fleet/server/errors/handlers.ts
+++ b/x-pack/plugins/fleet/server/errors/handlers.ts
@@ -27,7 +27,7 @@ type IngestErrorHandler = (
   params: IngestErrorHandlerParams
 ) => IKibanaResponse | Promise<IKibanaResponse>;
 interface IngestErrorHandlerParams {
-  error: IngestManagerError | Boom | Error;
+  error: IngestManagerError | Boom.Boom | Error;
   response: KibanaResponseFactory;
   request?: KibanaRequest;
   context?: RequestHandlerContext;
diff --git a/x-pack/plugins/fleet/server/services/epm/elasticsearch/template/install.ts b/x-pack/plugins/fleet/server/services/epm/elasticsearch/template/install.ts
index 8b018f4a2a906f..ceedc872753936 100644
--- a/x-pack/plugins/fleet/server/services/epm/elasticsearch/template/install.ts
+++ b/x-pack/plugins/fleet/server/services/epm/elasticsearch/template/install.ts
@@ -109,7 +109,7 @@ const installPreBuiltTemplates = async (paths: string[], callCluster: CallESAsCu
   try {
     return await Promise.all(templateInstallPromises);
   } catch (e) {
-    throw new Boom(`Error installing prebuilt index templates ${e.message}`, {
+    throw new Boom.Boom(`Error installing prebuilt index templates ${e.message}`, {
       statusCode: 400,
     });
   }
@@ -144,7 +144,7 @@ const installPreBuiltComponentTemplates = async (
   try {
     return await Promise.all(templateInstallPromises);
   } catch (e) {
-    throw new Boom(`Error installing prebuilt component templates ${e.message}`, {
+    throw new Boom.Boom(`Error installing prebuilt component templates ${e.message}`, {
       statusCode: 400,
     });
   }
diff --git a/x-pack/plugins/fleet/server/services/epm/packages/install.ts b/x-pack/plugins/fleet/server/services/epm/packages/install.ts
index 29300818288b42..48dd589dd0b8f6 100644
--- a/x-pack/plugins/fleet/server/services/epm/packages/install.ts
+++ b/x-pack/plugins/fleet/server/services/epm/packages/install.ts
@@ -122,7 +122,7 @@ export async function handleInstallPackageFailure({
   callCluster,
 }: {
   savedObjectsClient: SavedObjectsClientContract;
-  error: IngestManagerError | Boom | Error;
+  error: IngestManagerError | Boom.Boom | Error;
   pkgName: string;
   pkgVersion: string;
   installedPkg: SavedObject<Installation> | undefined;
diff --git a/x-pack/plugins/lens/server/routes/existing_fields.ts b/x-pack/plugins/lens/server/routes/existing_fields.ts
index 43c56af7f71bc8..3de3c6c7187c63 100644
--- a/x-pack/plugins/lens/server/routes/existing_fields.ts
+++ b/x-pack/plugins/lens/server/routes/existing_fields.ts
@@ -14,7 +14,7 @@ import { BASE_API_URL } from '../../common';
 import { UI_SETTINGS } from '../../../../../src/plugins/data/server';
 import { PluginStartContract } from '../plugin';
 
-export function isBoomError(error: { isBoom?: boolean }): error is Boom {
+export function isBoomError(error: { isBoom?: boolean }): error is Boom.Boom {
   return error.isBoom === true;
 }
 
diff --git a/x-pack/plugins/ml/common/types/data_frame_analytics.ts b/x-pack/plugins/ml/common/types/data_frame_analytics.ts
index 3455b833c404a4..e87e29a36084b1 100644
--- a/x-pack/plugins/ml/common/types/data_frame_analytics.ts
+++ b/x-pack/plugins/ml/common/types/data_frame_analytics.ts
@@ -11,7 +11,7 @@ import { DATA_FRAME_TASK_STATE } from '../constants/data_frame_analytics';
 
 export interface DeleteDataFrameAnalyticsWithIndexStatus {
   success: boolean;
-  error?: EsErrorBody | Boom;
+  error?: EsErrorBody | Boom.Boom;
 }
 
 export type IndexName = string;
diff --git a/x-pack/plugins/ml/common/util/errors/errors.test.ts b/x-pack/plugins/ml/common/util/errors/errors.test.ts
index 166264ebddee17..6f07c0150630de 100644
--- a/x-pack/plugins/ml/common/util/errors/errors.test.ts
+++ b/x-pack/plugins/ml/common/util/errors/errors.test.ts
@@ -76,8 +76,9 @@ describe('ML - error message utils', () => {
       expect(extractErrorMessage(bodyWithAttributes)).toBe(testMsg);
 
       // boom error
-      const boomError: Boom<any> = {
+      const boomError: Boom.Boom<any> = {
         message: '',
+        typeof: Boom.Boom.constructor,
         reformat: () => '',
         name: '',
         data: [],
diff --git a/x-pack/plugins/ml/common/util/errors/types.ts b/x-pack/plugins/ml/common/util/errors/types.ts
index 667e6e34a56406..b6d43d8e0cf929 100644
--- a/x-pack/plugins/ml/common/util/errors/types.ts
+++ b/x-pack/plugins/ml/common/util/errors/types.ts
@@ -45,7 +45,12 @@ export interface MLHttpFetchError<T> extends HttpFetchError {
   body: T;
 }
 
-export type ErrorType = MLHttpFetchError<MLResponseError> | EsErrorBody | Boom | string | undefined;
+export type ErrorType =
+  | MLHttpFetchError<MLResponseError>
+  | EsErrorBody
+  | Boom.Boom
+  | string
+  | undefined;
 
 export function isEsErrorBody(error: any): error is EsErrorBody {
   return error && error.error?.reason !== undefined;
@@ -63,6 +68,6 @@ export function isMLResponseError(error: any): error is MLResponseError {
   return typeof error.body === 'object' && 'message' in error.body;
 }
 
-export function isBoomError(error: any): error is Boom {
+export function isBoomError(error: any): error is Boom.Boom {
   return error.isBoom === true;
 }
diff --git a/x-pack/plugins/ml/server/client/error_wrapper.ts b/x-pack/plugins/ml/server/client/error_wrapper.ts
index e2e97e3a876962..fb41d30e34faeb 100644
--- a/x-pack/plugins/ml/server/client/error_wrapper.ts
+++ b/x-pack/plugins/ml/server/client/error_wrapper.ts
@@ -17,7 +17,7 @@ export function wrapError(error: any): CustomHttpResponseOptions<ResponseError>
       message: boom,
       ...(statusCode !== 500 && error.body ? { attributes: { body: error.body } } : {}),
     },
-    headers: boom.output.headers,
+    headers: boom.output.headers as { [key: string]: string },
     statusCode,
   };
 }
diff --git a/x-pack/plugins/monitoring/server/plugin.ts b/x-pack/plugins/monitoring/server/plugin.ts
index 9478e24c9560f1..22ea6c31dbe69d 100644
--- a/x-pack/plugins/monitoring/server/plugin.ts
+++ b/x-pack/plugins/monitoring/server/plugin.ts
@@ -59,7 +59,7 @@ const wrapError = (error: any): CustomHttpResponseOptions<ResponseError> => {
   const boom = Boom.isBoom(error) ? error : Boom.boomify(error, options);
   return {
     body: boom,
-    headers: boom.output.headers,
+    headers: boom.output.headers as { [key: string]: string },
     statusCode: boom.output.statusCode,
   };
 };
diff --git a/x-pack/plugins/reporting/server/routes/generation.ts b/x-pack/plugins/reporting/server/routes/generation.ts
index ba69b97bee7f1e..064cdf0b28eb98 100644
--- a/x-pack/plugins/reporting/server/routes/generation.ts
+++ b/x-pack/plugins/reporting/server/routes/generation.ts
@@ -68,8 +68,8 @@ export function registerJobGenerationRoutes(reporting: ReportingCore, logger: Lo
   /*
    * Error should already have been logged by the time we get here
    */
-  function handleError(res: typeof kibanaResponseFactory, err: Error | Boom) {
-    if (err instanceof Boom) {
+  function handleError(res: typeof kibanaResponseFactory, err: Error | Boom.Boom) {
+    if (err instanceof Boom.Boom) {
       return res.customError({
         statusCode: err.output.statusCode,
         body: err.output.payload.message,
diff --git a/x-pack/plugins/security/server/authentication/authentication_service.test.ts b/x-pack/plugins/security/server/authentication/authentication_service.test.ts
index d81702691a3a12..244cf1d0a8f51f 100644
--- a/x-pack/plugins/security/server/authentication/authentication_service.test.ts
+++ b/x-pack/plugins/security/server/authentication/authentication_service.test.ts
@@ -243,7 +243,7 @@ describe('AuthenticationService', () => {
       it('includes `WWW-Authenticate` header if `authenticate` fails to authenticate user and provides challenges', async () => {
         const mockResponse = httpServerMock.createLifecycleResponseFactory();
         const originalError = Boom.unauthorized('some message');
-        originalError.output.headers['WWW-Authenticate'] = [
+        (originalError.output.headers as { [key: string]: string })['WWW-Authenticate'] = [
           'Basic realm="Access to prod", charset="UTF-8"',
           'Basic',
           'Negotiate',
diff --git a/x-pack/plugins/security/server/authentication/providers/kerberos.ts b/x-pack/plugins/security/server/authentication/providers/kerberos.ts
index 9bf419c7dacaae..b7abed979164e3 100644
--- a/x-pack/plugins/security/server/authentication/providers/kerberos.ts
+++ b/x-pack/plugins/security/server/authentication/providers/kerberos.ts
@@ -333,7 +333,9 @@ export class KerberosAuthenticationProvider extends BaseAuthenticationProvider {
    * @param error Error to extract challenges from.
    */
   private getNegotiateChallenge(error: LegacyElasticsearchError) {
-    const challenges = ([] as string[]).concat(error.output.headers[WWWAuthenticateHeaderName]);
+    const challenges = ([] as string[]).concat(
+      (error.output.headers as { [key: string]: string })[WWWAuthenticateHeaderName]
+    );
 
     const negotiateChallenge = challenges.find((challenge) =>
       challenge.toLowerCase().startsWith('negotiate')
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/utils.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/utils.test.ts
index 36131c2e2844d0..32c1d8d3cdf56e 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/utils.test.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/utils.test.ts
@@ -35,7 +35,7 @@ let alertsClient: ReturnType<typeof alertsClientMock.create>;
 describe('utils', () => {
   describe('transformError', () => {
     test('returns transformed output error from boom object with a 500 and payload of internal server error', () => {
-      const boom = new Boom('some boom message');
+      const boom = new Boom.Boom('some boom message');
       const transformed = transformError(boom);
       expect(transformed).toEqual({
         message: 'An internal server error occurred',
@@ -124,7 +124,7 @@ describe('utils', () => {
 
   describe('transformBulkError', () => {
     test('returns transformed object if it is a boom object', () => {
-      const boom = new Boom('some boom message', { statusCode: 400 });
+      const boom = new Boom.Boom('some boom message', { statusCode: 400 });
       const transformed = transformBulkError('rule-1', boom);
       const expected: BulkError = {
         rule_id: 'rule-1',
@@ -252,7 +252,7 @@ describe('utils', () => {
 
   describe('transformImportError', () => {
     test('returns transformed object if it is a boom object', () => {
-      const boom = new Boom('some boom message', { statusCode: 400 });
+      const boom = new Boom.Boom('some boom message', { statusCode: 400 });
       const transformed = transformImportError('rule-1', boom, {
         success_count: 1,
         success: false,
diff --git a/x-pack/plugins/spaces/server/lib/copy_to_spaces/lib/create_empty_failure_response.ts b/x-pack/plugins/spaces/server/lib/copy_to_spaces/lib/create_empty_failure_response.ts
index 764ae5a87ec0ec..3980eef7caac20 100644
--- a/x-pack/plugins/spaces/server/lib/copy_to_spaces/lib/create_empty_failure_response.ts
+++ b/x-pack/plugins/spaces/server/lib/copy_to_spaces/lib/create_empty_failure_response.ts
@@ -6,10 +6,10 @@
 import Boom, { Payload } from '@hapi/boom';
 import { SavedObjectsImportError } from 'src/core/server';
 
-export const createEmptyFailureResponse = (errors?: Array<SavedObjectsImportError | Boom>) => {
+export const createEmptyFailureResponse = (errors?: Array<SavedObjectsImportError | Boom.Boom>) => {
   const errorMessages: Array<SavedObjectsImportError | Payload> = (errors || []).map((error) => {
     if (Boom.isBoom(error as any)) {
-      return (error as Boom).output.payload as Payload;
+      return (error as Boom.Boom).output.payload as Payload;
     }
     return error as SavedObjectsImportError;
   });
diff --git a/x-pack/plugins/spaces/server/lib/errors.ts b/x-pack/plugins/spaces/server/lib/errors.ts
index 13a5c2440877a8..0f6bf0f1d56b41 100644
--- a/x-pack/plugins/spaces/server/lib/errors.ts
+++ b/x-pack/plugins/spaces/server/lib/errors.ts
@@ -11,7 +11,7 @@ export function wrapError(error: any): CustomHttpResponseOptions<ResponseError>
   const boom = isBoom(error) ? error : boomify(error);
   return {
     body: boom,
-    headers: boom.output.headers,
+    headers: boom.output.headers as { [key: string]: string },
     statusCode: boom.output.statusCode,
   };
 }
diff --git a/x-pack/plugins/transform/server/routes/api/error_utils.ts b/x-pack/plugins/transform/server/routes/api/error_utils.ts
index 4986eb718dc2c0..356158913eb925 100644
--- a/x-pack/plugins/transform/server/routes/api/error_utils.ts
+++ b/x-pack/plugins/transform/server/routes/api/error_utils.ts
@@ -79,7 +79,7 @@ export function wrapError(error: any): CustomHttpResponseOptions<ResponseError>
   const boom = Boom.isBoom(error) ? error : Boom.boomify(error, { statusCode: error.statusCode });
   return {
     body: boom,
-    headers: boom.output.headers,
+    headers: boom.output.headers as { [key: string]: string },
     statusCode: boom.output.statusCode,
   };
 }
@@ -130,7 +130,6 @@ export function wrapEsError(err: any, statusCodeToMessageMap: Record<string, any
     const causedByChain = extractCausedByChain(caused_by);
     const defaultCause = root_cause.length ? extractCausedByChain(root_cause[0]) : undefined;
 
-    // @ts-expect-error cause is not defined on payload type
     boomError.output.payload.cause = causedByChain.length ? causedByChain : defaultCause;
 
     // Set error message based on the root cause
@@ -144,7 +143,7 @@ export function wrapEsError(err: any, statusCodeToMessageMap: Record<string, any
   // Otherwise, use the custom message to create a Boom error response and
   // return it
   const message = statusCodeToMessageMap[statusCode];
-  return new Boom(message, { statusCode });
+  return new Boom.Boom(message, { statusCode });
 }
 
 interface EsError {
diff --git a/yarn.lock b/yarn.lock
index 25cbe964c19e15..6e4df2f5b197a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1765,18 +1765,13 @@
     normalize-path "^2.0.1"
     through2 "^2.0.3"
 
-"@hapi/accept@^3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-3.2.4.tgz#687510529493fe1d7d47954c31aff360d9364bd1"
-  integrity sha512-soThGB+QMgfxlh0Vzhzlf3ZOEOPk5biEwcOXhkF0Eedqx8VnhGiggL9UYHrIsOb1rUg3Be3K8kp0iDL2wbVSOQ==
+"@hapi/accept@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-5.0.1.tgz#068553e867f0f63225a506ed74e899441af53e10"
+  integrity sha512-fMr4d7zLzsAXo28PRRQPXR1o2Wmu+6z+VY1UzDp0iFo13Twj8WePakwXBiqn3E1aAlTpSNzCXdnnQXFhst8h8Q==
   dependencies:
-    "@hapi/boom" "7.x.x"
-    "@hapi/hoek" "8.x.x"
-
-"@hapi/address@2.x.x", "@hapi/address@^2.1.2":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
-  integrity sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ==
+    "@hapi/boom" "9.x.x"
+    "@hapi/hoek" "9.x.x"
 
 "@hapi/address@^4.1.0":
   version "4.1.0"
@@ -1785,225 +1780,194 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@hapi/ammo@3.x.x", "@hapi/ammo@^3.1.2":
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/@hapi/ammo/-/ammo-3.1.2.tgz#a9edf5d48d99b75fdcd7ab3dabf9059942a06961"
-  integrity sha512-ej9OtFmiZv1qr45g1bxEZNGyaR4jRpyMxU6VhbxjaYThymvOwsyIsUKMZnP5Qw2tfYFuwqCJuIBHGpeIbdX9gQ==
+"@hapi/ammo@5.x.x", "@hapi/ammo@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@hapi/ammo/-/ammo-5.0.1.tgz#9d34560f5c214eda563d838c01297387efaab490"
+  integrity sha512-FbCNwcTbnQP4VYYhLNGZmA76xb2aHg9AMPiy18NZyWMG310P5KdFGyA9v2rm5ujrIny77dEEIkMOwl0Xv+fSSA==
   dependencies:
-    "@hapi/hoek" "8.x.x"
+    "@hapi/hoek" "9.x.x"
 
-"@hapi/b64@4.x.x":
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@hapi/b64/-/b64-4.2.1.tgz#bf8418d7907c5e73463f2e3b5c6fca7e9f2a1357"
-  integrity sha512-zqHpQuH5CBMw6hADzKfU/IGNrxq1Q+/wTYV+OiZRQN9F3tMyk+9BUMeBvFRMamduuqL8iSp62QAnJ+7ATiYLWA==
+"@hapi/b64@5.x.x":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/b64/-/b64-5.0.0.tgz#b8210cbd72f4774985e78569b77e97498d24277d"
+  integrity sha512-ngu0tSEmrezoiIaNGG6rRvKOUkUuDdf4XTPnONHGYfSGRmDqPZX5oJL6HAdKTo1UQHECbdB4OzhWrfgVppjHUw==
   dependencies:
-    "@hapi/hoek" "8.x.x"
+    "@hapi/hoek" "9.x.x"
 
-"@hapi/boom@7.x.x", "@hapi/boom@^7.4.11":
-  version "7.4.11"
-  resolved "https://registry.yarnpkg.com/@hapi/boom/-/boom-7.4.11.tgz#37af8417eb9416aef3367aa60fa04a1a9f1fc262"
-  integrity sha512-VSU/Cnj1DXouukYxxkes4nNJonCnlogHvIff1v1RVoN4xzkKhMXX+GRmb3NyH1iar10I9WFPDv2JPwfH3GaV0A==
+"@hapi/boom@9.x.x", "@hapi/boom@^9.0.0", "@hapi/boom@^9.1.1":
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/@hapi/boom/-/boom-9.1.1.tgz#89e6f0e01637c2a4228da0d113e8157c93677b04"
+  integrity sha512-VNR8eDbBrOxBgbkddRYIe7+8DZ+vSbV6qlmaN2x7eWjsUjy2VmQgChkOKcVZIeupEZYj+I0dqNg430OhwzagjA==
   dependencies:
-    "@hapi/hoek" "8.x.x"
+    "@hapi/hoek" "9.x.x"
 
-"@hapi/bounce@1.x.x":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@hapi/bounce/-/bounce-1.3.2.tgz#3b096bb02f67de6115e6e4f0debc390be5a86bad"
-  integrity sha512-3bnb1AlcEByFZnpDIidxQyw1Gds81z/1rSqlx4bIEE+wUN0ATj0D49B5cE1wGocy90Rp/de4tv7GjsKd5RQeew==
+"@hapi/bounce@2.x.x":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/bounce/-/bounce-2.0.0.tgz#e6ef56991c366b1e2738b2cd83b01354d938cf3d"
+  integrity sha512-JesW92uyzOOyuzJKjoLHM1ThiOvHPOLDHw01YV8yh5nCso7sDwJho1h0Ad2N+E62bZyz46TG3xhAi/78Gsct6A==
   dependencies:
-    "@hapi/boom" "7.x.x"
-    "@hapi/hoek" "^8.3.1"
+    "@hapi/boom" "9.x.x"
+    "@hapi/hoek" "9.x.x"
 
-"@hapi/bourne@1.x.x":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-1.3.2.tgz#0a7095adea067243ce3283e1b56b8a8f453b242a"
-  integrity sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA==
+"@hapi/bourne@2.x.x":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-2.0.0.tgz#5bb2193eb685c0007540ca61d166d4e1edaf918d"
+  integrity sha512-WEezM1FWztfbzqIUbsDzFRVMxSoLy3HugVcux6KDDtTqzPsLE8NDRHfXvev66aH1i2oOKKar3/XDjbvh/OUBdg==
 
-"@hapi/call@^5.1.3":
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/@hapi/call/-/call-5.1.3.tgz#217af45e3bc3d38b03aa5c9edfe1be939eee3741"
-  integrity sha512-5DfWpMk7qZiYhvBhM5oUiT4GQ/O8a2rFR121/PdwA/eZ2C1EsuD547ZggMKAR5bZ+FtxOf0fdM20zzcXzq2mZA==
+"@hapi/call@8.x.x":
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/@hapi/call/-/call-8.0.1.tgz#9e64cd8ba6128eb5be6e432caaa572b1ed8cd7c0"
+  integrity sha512-bOff6GTdOnoe5b8oXRV3lwkQSb/LAWylvDMae6RgEWWntd0SHtkYbQukDHKlfaYtVnSAgIavJ0kqszF/AIBb6g==
   dependencies:
-    "@hapi/boom" "7.x.x"
-    "@hapi/hoek" "8.x.x"
+    "@hapi/boom" "9.x.x"
+    "@hapi/hoek" "9.x.x"
 
-"@hapi/catbox-memory@4.x.x":
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/@hapi/catbox-memory/-/catbox-memory-4.1.1.tgz#263a6f3361f7a200552c5772c98a8e80a1da712f"
-  integrity sha512-T6Hdy8DExzG0jY7C8yYWZB4XHfc0v+p1EGkwxl2HoaPYAmW7I3E59M/IvmSVpis8RPcIoBp41ZpO2aZPBpM2Ww==
+"@hapi/catbox-memory@5.x.x":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/catbox-memory/-/catbox-memory-5.0.0.tgz#6c18dad1a80737480d1c33bfbefd5d028deec86d"
+  integrity sha512-ByuxVJPHNaXwLzbBv4GdTr6ccpe1nG+AfYt+8ftDWEJY7EWBWzD+Klhy5oPTDGzU26pNUh1e7fcYI1ILZRxAXQ==
   dependencies:
-    "@hapi/boom" "7.x.x"
-    "@hapi/hoek" "8.x.x"
+    "@hapi/boom" "9.x.x"
+    "@hapi/hoek" "9.x.x"
 
-"@hapi/catbox@10.x.x":
-  version "10.2.3"
-  resolved "https://registry.yarnpkg.com/@hapi/catbox/-/catbox-10.2.3.tgz#2df51ab943d7613df3718fa2bfd981dd9558cec5"
-  integrity sha512-kN9hXO4NYyOHW09CXiuj5qW1syc/0XeVOBsNNk0Tz89wWNQE5h21WF+VsfAw3uFR8swn/Wj3YEVBnWqo82m/JQ==
+"@hapi/catbox@^11.1.1":
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/@hapi/catbox/-/catbox-11.1.1.tgz#d277e2d5023fd69cddb33d05b224ea03065fec0c"
+  integrity sha512-u/8HvB7dD/6X8hsZIpskSDo4yMKpHxFd7NluoylhGrL6cUfYxdQPnvUp9YU2C6F9hsyBVLGulBd9vBN1ebfXOQ==
   dependencies:
-    "@hapi/boom" "7.x.x"
-    "@hapi/hoek" "8.x.x"
-    "@hapi/joi" "16.x.x"
-    "@hapi/podium" "3.x.x"
+    "@hapi/boom" "9.x.x"
+    "@hapi/hoek" "9.x.x"
+    "@hapi/podium" "4.x.x"
+    "@hapi/validate" "1.x.x"
 
-"@hapi/content@^4.1.1":
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/@hapi/content/-/content-4.1.1.tgz#179673d1e2b7eb36c564d8f9605d019bd2252cbf"
-  integrity sha512-3TWvmwpVPxFSF3KBjKZ8yDqIKKZZIm7VurDSweYpXYENZrJH3C1hd1+qEQW9wQaUaI76pPBLGrXl6I3B7i3ipA==
+"@hapi/content@^5.0.2":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@hapi/content/-/content-5.0.2.tgz#ae57954761de570392763e64cdd75f074176a804"
+  integrity sha512-mre4dl1ygd4ZyOH3tiYBrOUBzV7Pu/EOs8VLGf58vtOEECWed8Uuw6B4iR9AN/8uQt42tB04qpVaMyoMQh0oMw==
   dependencies:
-    "@hapi/boom" "7.x.x"
+    "@hapi/boom" "9.x.x"
 
-"@hapi/cookie@^10.1.2":
-  version "10.1.2"
-  resolved "https://registry.yarnpkg.com/@hapi/cookie/-/cookie-10.1.2.tgz#9ea7d80f05d764faaf892b84e80c1bf13f5e3bf5"
-  integrity sha512-wch/uT5NgDEujmaLIqUoohbEP6PUr4ML2Z6zqheWHeHrSzXangPH4dveW+fiMsoPMW2S9ecAyUjCfkh4qRfxjg==
+"@hapi/cookie@^11.0.2":
+  version "11.0.2"
+  resolved "https://registry.yarnpkg.com/@hapi/cookie/-/cookie-11.0.2.tgz#7169c060157a3541146b976e5f0ca9b3f7577d7f"
+  integrity sha512-LRpSuHC53urzml83c5eUHSPPt7YtK1CaaPZU9KmnhZlacVVojrWJzOUIcwOADDvCZjDxowCO3zPMaOqzEm9kgg==
   dependencies:
-    "@hapi/boom" "7.x.x"
-    "@hapi/bounce" "1.x.x"
-    "@hapi/hoek" "8.x.x"
-    "@hapi/joi" "16.x.x"
+    "@hapi/boom" "9.x.x"
+    "@hapi/bounce" "2.x.x"
+    "@hapi/hoek" "9.x.x"
+    "@hapi/validate" "1.x.x"
 
-"@hapi/cryptiles@4.x.x":
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@hapi/cryptiles/-/cryptiles-4.2.1.tgz#ff0f18d79074659838caedbb911851313ad1ffbc"
-  integrity sha512-XoqgKsHK0l/VpqPs+tr6j6vE+VQ3+2bkF2stvttmc7xAOf1oSAwHcJ0tlp/6MxMysktt1IEY0Csy3khKaP9/uQ==
+"@hapi/cryptiles@5.x.x":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@hapi/cryptiles/-/cryptiles-5.1.0.tgz#655de4cbbc052c947f696148c83b187fc2be8f43"
+  integrity sha512-fo9+d1Ba5/FIoMySfMqPBR/7Pa29J2RsiPrl7bkwo5W5o+AN1dAYQRi4SPrPwwVxVGKjgLOEWrsvt1BonJSfLA==
   dependencies:
-    "@hapi/boom" "7.x.x"
-
-"@hapi/file@1.x.x":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@hapi/file/-/file-1.0.0.tgz#c91c39fd04db8bed5af82d2e032e7a4e65555b38"
-  integrity sha512-Bsfp/+1Gyf70eGtnIgmScvrH8sSypO3TcK3Zf0QdHnzn/ACnAkI6KLtGACmNRPEzzIy+W7aJX5E+1fc9GwIABQ==
+    "@hapi/boom" "9.x.x"
 
-"@hapi/formula@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@hapi/formula/-/formula-1.2.0.tgz#994649c7fea1a90b91a0a1e6d983523f680e10cd"
-  integrity sha512-UFbtbGPjstz0eWHb+ga/GM3Z9EzqKXFWIbSOFURU0A/Gku0Bky4bCk9/h//K2Xr3IrCfjFNhMm4jyZ5dbCewGA==
+"@hapi/file@2.x.x":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/file/-/file-2.0.0.tgz#2ecda37d1ae9d3078a67c13b7da86e8c3237dfb9"
+  integrity sha512-WSrlgpvEqgPWkI18kkGELEZfXr0bYLtr16iIN4Krh9sRnzBZN6nnWxHFxtsnP684wueEySBbXPDg/WfA9xJdBQ==
 
 "@hapi/formula@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@hapi/formula/-/formula-2.0.0.tgz#edade0619ed58c8e4f164f233cda70211e787128"
   integrity sha512-V87P8fv7PI0LH7LiVi8Lkf3x+KCO7pQozXRssAHNXXL9L1K+uyu4XypLXwxqVDKgyQai6qj3/KteNlrqDx4W5A==
 
-"@hapi/good-squeeze@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@hapi/good-squeeze/-/good-squeeze-5.2.1.tgz#a7ed3f344c9602348af8f059beda663610ab8a4c"
-  integrity sha512-ZBiRgEDMtI5XowD0i4jgYD3wntN2JneY5EA1lUbSk9YoVIV9rWc77+6S0oqwfG0nj4xU/FjrXHvAahNEvRc6tg==
+"@hapi/good-squeeze@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/good-squeeze/-/good-squeeze-6.0.0.tgz#bb72d6869cd7398b615a6b7270f630dc4f76aebf"
+  integrity sha512-UgHAF9Lm8fJPzgf2HymtowOwNc1+IL+p08YTVR+XA4d8nmyE1t9x3RLA4riqldnOKHkVqGakJ1jGqUG7jk77Cg==
   dependencies:
-    "@hapi/hoek" "8.x.x"
+    "@hapi/hoek" "9.x.x"
     fast-safe-stringify "2.x.x"
 
-"@hapi/h2o2@^8.3.2":
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/@hapi/h2o2/-/h2o2-8.3.2.tgz#008a8f9ec3d9bba29077691aa9ec0ace93d4de80"
-  integrity sha512-2WkZq+QAkvYHWGqnUuG0stcVeGyv9T7bopBYnCJSUEuvBZlUf2BTX2JCVSKxsnTLOxCYwoC/aI4Rr0ZSRd2oVg==
-  dependencies:
-    "@hapi/boom" "7.x.x"
-    "@hapi/hoek" "8.x.x"
-    "@hapi/joi" "16.x.x"
-    "@hapi/wreck" "15.x.x"
-
-"@hapi/hapi@^18.4.1":
-  version "18.4.1"
-  resolved "https://registry.yarnpkg.com/@hapi/hapi/-/hapi-18.4.1.tgz#023fbc131074b1cb2cd7f6766d65f4b0e92df788"
-  integrity sha512-9HjVGa0Z4Qv9jk9AVoUdJMQLA+KuZ+liKWyEEkVBx3e3H1F0JM6aGbPkY9jRfwsITBWGBU2iXazn65SFKSi/tg==
-  dependencies:
-    "@hapi/accept" "^3.2.4"
-    "@hapi/ammo" "^3.1.2"
-    "@hapi/boom" "7.x.x"
-    "@hapi/bounce" "1.x.x"
-    "@hapi/call" "^5.1.3"
-    "@hapi/catbox" "10.x.x"
-    "@hapi/catbox-memory" "4.x.x"
-    "@hapi/heavy" "6.x.x"
-    "@hapi/hoek" "8.x.x"
-    "@hapi/joi" "15.x.x"
-    "@hapi/mimos" "4.x.x"
-    "@hapi/podium" "3.x.x"
-    "@hapi/shot" "4.x.x"
-    "@hapi/somever" "2.x.x"
-    "@hapi/statehood" "6.x.x"
-    "@hapi/subtext" "^6.1.3"
-    "@hapi/teamwork" "3.x.x"
-    "@hapi/topo" "3.x.x"
-
-"@hapi/heavy@6.x.x":
-  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/@hapi/heavy/-/heavy-6.2.2.tgz#d42a282c62d5bb6332e497d8ce9ba52f1609f3e6"
-  integrity sha512-PY1dCCO6dsze7RlafIRhTaGeyTgVe49A/lSkxbhKGjQ7x46o/OFf7hLiRqTCDh3atcEKf6362EaB3+kTUbCsVA==
+"@hapi/h2o2@^9.0.2":
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/@hapi/h2o2/-/h2o2-9.0.2.tgz#e9f1dfe789257c80d6ee37ec9fe358f8c69f855a"
+  integrity sha512-V7RsmVyl7uyWeuEko4uaSZbFpBHKcSFSui6PXNRaRLJHFX+iPbqWmeH6m1pW/WJ8DuaCVJFKhluDCDI9l4+1cw==
   dependencies:
-    "@hapi/boom" "7.x.x"
-    "@hapi/hoek" "8.x.x"
-    "@hapi/joi" "16.x.x"
-
-"@hapi/hoek@8.x.x", "@hapi/hoek@^8.2.4", "@hapi/hoek@^8.3.0", "@hapi/hoek@^8.3.1", "@hapi/hoek@^8.5.1":
-  version "8.5.1"
-  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.1.tgz#fde96064ca446dec8c55a8c2f130957b070c6e06"
-  integrity sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==
+    "@hapi/boom" "9.x.x"
+    "@hapi/hoek" "9.x.x"
+    "@hapi/validate" "1.x.x"
+    "@hapi/wreck" "17.x.x"
+
+"@hapi/hapi@^20.0.3":
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/@hapi/hapi/-/hapi-20.0.3.tgz#e72cad460394e6d2c15f9c57abb5d3332dea27e3"
+  integrity sha512-aqJVHVjoY3phiZsgsGjDRG15CoUNIs1azScqLZDOCZUSKYGTbzPi+K0QP+RUjUJ0m8L9dRuTZ27c8HKxG3wEhA==
+  dependencies:
+    "@hapi/accept" "^5.0.1"
+    "@hapi/ammo" "^5.0.1"
+    "@hapi/boom" "9.x.x"
+    "@hapi/bounce" "2.x.x"
+    "@hapi/call" "8.x.x"
+    "@hapi/catbox" "^11.1.1"
+    "@hapi/catbox-memory" "5.x.x"
+    "@hapi/heavy" "^7.0.1"
+    "@hapi/hoek" "9.x.x"
+    "@hapi/mimos" "5.x.x"
+    "@hapi/podium" "^4.1.1"
+    "@hapi/shot" "^5.0.1"
+    "@hapi/somever" "3.x.x"
+    "@hapi/statehood" "^7.0.3"
+    "@hapi/subtext" "^7.0.3"
+    "@hapi/teamwork" "5.x.x"
+    "@hapi/topo" "5.x.x"
+    "@hapi/validate" "^1.1.0"
+
+"@hapi/heavy@^7.0.1":
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/@hapi/heavy/-/heavy-7.0.1.tgz#73315ae33b6e7682a0906b7a11e8ca70e3045874"
+  integrity sha512-vJ/vzRQ13MtRzz6Qd4zRHWS3FaUc/5uivV2TIuExGTM9Qk+7Zzqj0e2G7EpE6KztO9SalTbiIkTh7qFKj/33cA==
+  dependencies:
+    "@hapi/boom" "9.x.x"
+    "@hapi/hoek" "9.x.x"
+    "@hapi/validate" "1.x.x"
 
-"@hapi/hoek@9.x.x", "@hapi/hoek@^9.0.0":
+"@hapi/hoek@9.x.x", "@hapi/hoek@^9.0.0", "@hapi/hoek@^9.0.4", "@hapi/hoek@^9.1.0":
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.0.tgz#6c9eafc78c1529248f8f4d92b0799a712b6052c6"
   integrity sha512-i9YbZPN3QgfighY/1X1Pu118VUz2Fmmhd6b2n0/O8YVgGGfw0FbUYoA97k7FkpGJ+pLCFEDLUmAPPV4D1kpeFw==
 
-"@hapi/inert@^5.2.2":
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/@hapi/inert/-/inert-5.2.2.tgz#3ba4d93afc6d5b42e4bab19cd09556ddd49b5dac"
-  integrity sha512-8IaGfAEF8SwZtpdaTq0G3aDPG35ZTfWKjnMNniG2N3kE+qioMsBuImIGxna8TNQ+sYMXYK78aqmvzbQHno8qSQ==
+"@hapi/inert@^6.0.3":
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/@hapi/inert/-/inert-6.0.3.tgz#57af5d912893fabcb57eb4b956f84f6cd8020fe1"
+  integrity sha512-Z6Pi0Wsn2pJex5CmBaq+Dky9q40LGzXLUIUFrYpDtReuMkmfy9UuUeYc4064jQ1Xe9uuw7kbwE6Fq6rqKAdjAg==
   dependencies:
-    "@hapi/ammo" "3.x.x"
-    "@hapi/boom" "7.x.x"
-    "@hapi/bounce" "1.x.x"
-    "@hapi/hoek" "8.x.x"
-    "@hapi/joi" "16.x.x"
-    lru-cache "4.1.x"
+    "@hapi/ammo" "5.x.x"
+    "@hapi/boom" "9.x.x"
+    "@hapi/bounce" "2.x.x"
+    "@hapi/hoek" "9.x.x"
+    "@hapi/validate" "1.x.x"
+    lru-cache "^6.0.0"
 
-"@hapi/iron@*", "@hapi/iron@5.x.x", "@hapi/iron@^5.1.4":
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/@hapi/iron/-/iron-5.1.4.tgz#7406f36847f798f52b92d1d97f855e27973832b7"
-  integrity sha512-+ElC+OCiwWLjlJBmm8ZEWjlfzTMQTdgPnU/TsoU5QsktspIWmWi9IU4kU83nH+X/SSya8TP8h8P11Wr5L7dkQQ==
-  dependencies:
-    "@hapi/b64" "4.x.x"
-    "@hapi/boom" "7.x.x"
-    "@hapi/bourne" "1.x.x"
-    "@hapi/cryptiles" "4.x.x"
-    "@hapi/hoek" "8.x.x"
-
-"@hapi/joi@15.x.x":
-  version "15.1.1"
-  resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.1.1.tgz#c675b8a71296f02833f8d6d243b34c57b8ce19d7"
-  integrity sha512-entf8ZMOK8sc+8YfeOlM8pCfg3b5+WZIKBfUaaJT8UsjAAPjartzxIYm3TIbjvA4u+u++KbcXD38k682nVHDAQ==
-  dependencies:
-    "@hapi/address" "2.x.x"
-    "@hapi/bourne" "1.x.x"
-    "@hapi/hoek" "8.x.x"
-    "@hapi/topo" "3.x.x"
-
-"@hapi/joi@16.x.x":
-  version "16.1.8"
-  resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-16.1.8.tgz#84c1f126269489871ad4e2decc786e0adef06839"
-  integrity sha512-wAsVvTPe+FwSrsAurNt5vkg3zo+TblvC5Bb1zMVK6SJzZqw9UrJnexxR+76cpePmtUZKHAPxcQ2Bf7oVHyahhg==
-  dependencies:
-    "@hapi/address" "^2.1.2"
-    "@hapi/formula" "^1.2.0"
-    "@hapi/hoek" "^8.2.4"
-    "@hapi/pinpoint" "^1.0.2"
-    "@hapi/topo" "^3.1.3"
-
-"@hapi/mimos@4.x.x":
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/@hapi/mimos/-/mimos-4.1.1.tgz#4dab8ed5c64df0603c204c725963a5faa4687e8a"
-  integrity sha512-CXoi/zfcTWfKYX756eEea8rXJRIb9sR4d7VwyAH9d3BkDyNgAesZxvqIdm55npQc6S9mU3FExinMAQVlIkz0eA==
+"@hapi/iron@6.x.x", "@hapi/iron@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/iron/-/iron-6.0.0.tgz#ca3f9136cda655bdd6028de0045da0de3d14436f"
+  integrity sha512-zvGvWDufiTGpTJPG1Y/McN8UqWBu0k/xs/7l++HVU535NLHXsHhy54cfEMdW7EjwKfbBfM9Xy25FmTiobb7Hvw==
   dependencies:
-    "@hapi/hoek" "8.x.x"
+    "@hapi/b64" "5.x.x"
+    "@hapi/boom" "9.x.x"
+    "@hapi/bourne" "2.x.x"
+    "@hapi/cryptiles" "5.x.x"
+    "@hapi/hoek" "9.x.x"
+
+"@hapi/mimos@5.x.x":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/mimos/-/mimos-5.0.0.tgz#245c6c98b1cc2c13395755c730321b913de074eb"
+  integrity sha512-EVS6wJYeE73InTlPWt+2e3Izn319iIvffDreci3qDNT+t3lA5ylJ0/SoTaID8e0TPNUkHUSsgJZXEmLHvoYzrA==
+  dependencies:
+    "@hapi/hoek" "9.x.x"
     mime-db "1.x.x"
 
-"@hapi/nigel@3.x.x":
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@hapi/nigel/-/nigel-3.1.1.tgz#84794021c9ee6e48e854fea9fb76e9f7e78c99ad"
-  integrity sha512-R9YWx4S8yu0gcCBrMUDCiEFm1SQT895dMlYoeNBp8I6YhF1BFF1iYPueKA2Kkp9BvyHdjmvrxCOns7GMmpl+Fw==
+"@hapi/nigel@4.x.x":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@hapi/nigel/-/nigel-4.0.2.tgz#8f84ef4bca4fb03b2376463578f253b0b8e863c4"
+  integrity sha512-ht2KoEsDW22BxQOEkLEJaqfpoKPXxi7tvabXy7B/77eFtOyG5ZEstfZwxHQcqAiZhp58Ae5vkhEqI03kawkYNw==
   dependencies:
-    "@hapi/hoek" "8.x.x"
-    "@hapi/vise" "3.x.x"
+    "@hapi/hoek" "^9.0.4"
+    "@hapi/vise" "^4.0.0"
 
 "@hapi/oppsy@3.x.x":
   version "3.0.0"
@@ -2012,97 +1976,86 @@
   dependencies:
     "@hapi/hoek" "9.x.x"
 
-"@hapi/pez@^4.1.2":
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/@hapi/pez/-/pez-4.1.2.tgz#14984d0c31fed348f10c962968a21d9761f55503"
-  integrity sha512-8zSdJ8cZrJLFldTgwjU9Fb1JebID+aBCrCsycgqKYe0OZtM2r3Yv3aAwW5z97VsZWCROC1Vx6Mdn4rujh5Ktcg==
+"@hapi/pez@^5.0.1":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@hapi/pez/-/pez-5.0.3.tgz#b75446e6fef8cbb16816573ab7da1b0522e7a2a1"
+  integrity sha512-mpikYRJjtrbJgdDHG/H9ySqYqwJ+QU/D7FXsYciS9P7NYBXE2ayKDAy3H0ou6CohOCaxPuTV4SZ0D936+VomHA==
   dependencies:
-    "@hapi/b64" "4.x.x"
-    "@hapi/boom" "7.x.x"
-    "@hapi/content" "^4.1.1"
-    "@hapi/hoek" "8.x.x"
-    "@hapi/nigel" "3.x.x"
-
-"@hapi/pinpoint@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@hapi/pinpoint/-/pinpoint-1.0.2.tgz#025b7a36dbbf4d35bf1acd071c26b20ef41e0d13"
-  integrity sha512-dtXC/WkZBfC5vxscazuiJ6iq4j9oNx1SHknmIr8hofarpKUZKmlUVYVIhNVzIEgK5Wrc4GMHL5lZtt1uS2flmQ==
+    "@hapi/b64" "5.x.x"
+    "@hapi/boom" "9.x.x"
+    "@hapi/content" "^5.0.2"
+    "@hapi/hoek" "9.x.x"
+    "@hapi/nigel" "4.x.x"
 
 "@hapi/pinpoint@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@hapi/pinpoint/-/pinpoint-2.0.0.tgz#805b40d4dbec04fc116a73089494e00f073de8df"
   integrity sha512-vzXR5MY7n4XeIvLpfl3HtE3coZYO4raKXW766R6DZw/6aLqR26iuZ109K7a0NtF2Db0jxqh7xz2AxkUwpUFybw==
 
-"@hapi/podium@3.x.x", "@hapi/podium@^3.4.3":
-  version "3.4.3"
-  resolved "https://registry.yarnpkg.com/@hapi/podium/-/podium-3.4.3.tgz#d28935870ae1372e2f983a7161e710c968a60de1"
-  integrity sha512-QJlnYLEYZWlKQ9fSOtuUcpANyoVGwT68GA9P0iQQCAetBK0fI+nbRBt58+aMixoifczWZUthuGkNjqKxgPh/CQ==
+"@hapi/podium@4.x.x", "@hapi/podium@^4.1.1":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@hapi/podium/-/podium-4.1.1.tgz#106e5849f2cb19b8767cc16007e0107f27c3c791"
+  integrity sha512-jh7a6+5Z4FUWzx8fgmxjaAa1DTBu+Qfg+NbVdo0f++rE5DgsVidUYrLDp3db65+QjDLleA2MfKQXkpT8ylBDXA==
   dependencies:
-    "@hapi/hoek" "8.x.x"
-    "@hapi/joi" "16.x.x"
+    "@hapi/hoek" "9.x.x"
+    "@hapi/teamwork" "5.x.x"
+    "@hapi/validate" "1.x.x"
 
-"@hapi/shot@4.x.x":
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/@hapi/shot/-/shot-4.1.2.tgz#69f999956041fe468701a89a413175a521dabed5"
-  integrity sha512-6LeHLjvsq/bQ0R+fhEyr7mqExRGguNTrxFZf5DyKe3CK6pNabiGgYO4JVFaRrLZ3JyuhkS0fo8iiRE2Ql2oA/A==
+"@hapi/shot@^5.0.1":
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/@hapi/shot/-/shot-5.0.4.tgz#6c978314f21a054c041f4becc50095dd78d3d775"
+  integrity sha512-PcEz0WJgFDA3xNSMeONgQmothFr7jhbbRRSAKaDh7chN7zOXBlhl13bvKZW6CMb2xVfJUmt34CW3e/oExMgBhQ==
   dependencies:
-    "@hapi/hoek" "8.x.x"
-    "@hapi/joi" "16.x.x"
+    "@hapi/hoek" "9.x.x"
+    "@hapi/validate" "1.x.x"
 
-"@hapi/somever@2.x.x":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@hapi/somever/-/somever-2.1.1.tgz#142bddf7cc4d829f678ed4e60618630a9a7ae845"
-  integrity sha512-cic5Sto4KGd9B0oQSdKTokju+rYhCbdpzbMb0EBnrH5Oc1z048hY8PaZ1lx2vBD7I/XIfTQVQetBH57fU51XRA==
+"@hapi/somever@3.x.x":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/somever/-/somever-3.0.0.tgz#f4e9b16a948415b926b4dd898013602b0cb45758"
+  integrity sha512-Upw/kmKotC9iEmK4y047HMYe4LDKsE5NWfjgX41XNKmFvxsQL7OiaCWVhuyyhU0ShDGBfIAnCH8jZr49z/JzZA==
   dependencies:
-    "@hapi/bounce" "1.x.x"
-    "@hapi/hoek" "8.x.x"
+    "@hapi/bounce" "2.x.x"
+    "@hapi/hoek" "9.x.x"
 
-"@hapi/statehood@6.x.x", "@hapi/statehood@^6.1.2":
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/@hapi/statehood/-/statehood-6.1.2.tgz#6dda508b5da99a28a3ed295c3cac795cf6c12a02"
-  integrity sha512-pYXw1x6npz/UfmtcpUhuMvdK5kuOGTKcJNfLqdNptzietK2UZH5RzNJSlv5bDHeSmordFM3kGItcuQWX2lj2nQ==
-  dependencies:
-    "@hapi/boom" "7.x.x"
-    "@hapi/bounce" "1.x.x"
-    "@hapi/bourne" "1.x.x"
-    "@hapi/cryptiles" "4.x.x"
-    "@hapi/hoek" "8.x.x"
-    "@hapi/iron" "5.x.x"
-    "@hapi/joi" "16.x.x"
-
-"@hapi/subtext@^6.1.3":
-  version "6.1.3"
-  resolved "https://registry.yarnpkg.com/@hapi/subtext/-/subtext-6.1.3.tgz#bbd07771ae2a4e73ac360c93ed74ac641718b9c6"
-  integrity sha512-qWN6NbiHNzohVcJMeAlpku/vzbyH4zIpnnMPMPioQMwIxbPFKeNViDCNI6fVBbMPBiw/xB4FjqiJkRG5P9eWWg==
-  dependencies:
-    "@hapi/boom" "7.x.x"
-    "@hapi/bourne" "1.x.x"
-    "@hapi/content" "^4.1.1"
-    "@hapi/file" "1.x.x"
-    "@hapi/hoek" "8.x.x"
-    "@hapi/pez" "^4.1.2"
-    "@hapi/wreck" "15.x.x"
-
-"@hapi/teamwork@3.x.x":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@hapi/teamwork/-/teamwork-3.3.1.tgz#b52d0ec48682dc793926bd432e22ceb19c915d3f"
-  integrity sha512-61tiqWCYvMKP7fCTXy0M4VE6uNIwA0qvgFoiDubgfj7uqJ0fdHJFQNnVPGrxhLWlwz0uBPWrQlBH7r8y9vFITQ==
+"@hapi/statehood@^7.0.3":
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/@hapi/statehood/-/statehood-7.0.3.tgz#655166f3768344ed3c3b50375a303cdeca8040d9"
+  integrity sha512-pYB+pyCHkf2Amh67QAXz7e/DN9jcMplIL7Z6N8h0K+ZTy0b404JKPEYkbWHSnDtxLjJB/OtgElxocr2fMH4G7w==
+  dependencies:
+    "@hapi/boom" "9.x.x"
+    "@hapi/bounce" "2.x.x"
+    "@hapi/bourne" "2.x.x"
+    "@hapi/cryptiles" "5.x.x"
+    "@hapi/hoek" "9.x.x"
+    "@hapi/iron" "6.x.x"
+    "@hapi/validate" "1.x.x"
 
-"@hapi/topo@3.x.x", "@hapi/topo@^3.1.3":
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-3.1.6.tgz#68d935fa3eae7fdd5ab0d7f953f3205d8b2bfc29"
-  integrity sha512-tAag0jEcjwH+P2quUfipd7liWCNX2F8NvYjQp2wtInsZxnMlypdw0FtAOLxtvvkO+GSRRbmNi8m/5y42PQJYCQ==
+"@hapi/subtext@^7.0.3":
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/@hapi/subtext/-/subtext-7.0.3.tgz#f7440fc7c966858e1f39681e99eb6171c71e7abd"
+  integrity sha512-CekDizZkDGERJ01C0+TzHlKtqdXZxzSWTOaH6THBrbOHnsr3GY+yiMZC+AfNCypfE17RaIakGIAbpL2Tk1z2+A==
   dependencies:
-    "@hapi/hoek" "^8.3.0"
+    "@hapi/boom" "9.x.x"
+    "@hapi/bourne" "2.x.x"
+    "@hapi/content" "^5.0.2"
+    "@hapi/file" "2.x.x"
+    "@hapi/hoek" "9.x.x"
+    "@hapi/pez" "^5.0.1"
+    "@hapi/wreck" "17.x.x"
 
-"@hapi/topo@^5.0.0":
+"@hapi/teamwork@5.x.x":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@hapi/teamwork/-/teamwork-5.1.0.tgz#7801a61fc727f702fd2196ef7625eb4e389f4124"
+  integrity sha512-llqoQTrAJDTXxG3c4Kz/uzhBS1TsmSBa/XG5SPcVXgmffHE1nFtyLIK0hNJHCB3EuBKT84adzd1hZNY9GJLWtg==
+
+"@hapi/topo@5.x.x", "@hapi/topo@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-5.0.0.tgz#c19af8577fa393a06e9c77b60995af959be721e7"
   integrity sha512-tFJlT47db0kMqVm3H4nQYgn6Pwg10GTZHb1pwmSiv1K4ks6drQOtfEF5ZnPjkvC+y4/bUPHK+bc87QvLcL+WMw==
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@hapi/validate@1.x.x":
+"@hapi/validate@1.x.x", "@hapi/validate@^1.1.0":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@hapi/validate/-/validate-1.1.3.tgz#f750a07283929e09b51aa16be34affb44e1931ad"
   integrity sha512-/XMR0N0wjw0Twzq2pQOzPBZlDzkekGcoCtzO314BpIEsbXdYGthQUbxgkGDf4nhk1+IPDAsXqWjMohRQYO06UA==
@@ -2110,31 +2063,31 @@
     "@hapi/hoek" "^9.0.0"
     "@hapi/topo" "^5.0.0"
 
-"@hapi/vise@3.x.x":
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@hapi/vise/-/vise-3.1.1.tgz#dfc88f2ac90682f48bdc1b3f9b8f1eab4eabe0c8"
-  integrity sha512-OXarbiCSadvtg+bSdVPqu31Z1JoBL+FwNYz3cYoBKQ5xq1/Cr4A3IkGpAZbAuxU5y4NL5pZFZG3d2a3ZGm/dOQ==
+"@hapi/vise@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/vise/-/vise-4.0.0.tgz#c6a94fe121b94a53bf99e7489f7fcc74c104db02"
+  integrity sha512-eYyLkuUiFZTer59h+SGy7hUm+qE9p+UemePTHLlIWppEd+wExn3Df5jO04bFQTm7nleF5V8CtuYQYb+VFpZ6Sg==
   dependencies:
-    "@hapi/hoek" "8.x.x"
+    "@hapi/hoek" "9.x.x"
 
-"@hapi/vision@^5.5.4":
-  version "5.5.4"
-  resolved "https://registry.yarnpkg.com/@hapi/vision/-/vision-5.5.4.tgz#03a01374fb5e0a498d6e502e635a0b54d70501a1"
-  integrity sha512-/DFgnQtcrlf2eQNkh/DHnjrCRHLSmHraU+PHe1SlxLUJxATQCw8VIEt6rJraM2jGTpFgHNk6B6ELtu3sBJCClg==
+"@hapi/vision@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@hapi/vision/-/vision-6.0.1.tgz#976c3575be56d3cb5b472ddcfe0b7403778706fd"
+  integrity sha512-xv4PwmhbXCLzDfojZ7l4+P/YynBhMInV8GtLPH4gB74prhwOl8lGcJxxK8V9rf1aMH/vonM5yVGd9FuoA9sT0A==
   dependencies:
-    "@hapi/boom" "7.x.x"
-    "@hapi/bounce" "1.x.x"
-    "@hapi/hoek" "8.x.x"
-    "@hapi/joi" "16.x.x"
+    "@hapi/boom" "9.x.x"
+    "@hapi/bounce" "2.x.x"
+    "@hapi/hoek" "9.x.x"
+    "@hapi/validate" "1.x.x"
 
-"@hapi/wreck@15.x.x", "@hapi/wreck@^15.0.2":
-  version "15.1.0"
-  resolved "https://registry.yarnpkg.com/@hapi/wreck/-/wreck-15.1.0.tgz#7917cd25950ce9b023f7fd2bea6e2ef72c71e59d"
-  integrity sha512-tQczYRTTeYBmvhsek/D49En/5khcShaBEmzrAaDjMrFXKJRuF8xA8+tlq1ETLBFwGd6Do6g2OC74rt11kzawzg==
+"@hapi/wreck@17.x.x", "@hapi/wreck@^17.0.0", "@hapi/wreck@^17.1.0":
+  version "17.1.0"
+  resolved "https://registry.yarnpkg.com/@hapi/wreck/-/wreck-17.1.0.tgz#fbdc380c6f3fa1f8052dc612b2d3b6ce3e88dbec"
+  integrity sha512-nx6sFyfqOpJ+EFrHX+XWwJAxs3ju4iHdbB/bwR8yTNZOiYmuhA8eCe7lYPtYmb4j7vyK/SlbaQsmTtUrMvPEBw==
   dependencies:
-    "@hapi/boom" "7.x.x"
-    "@hapi/bourne" "1.x.x"
-    "@hapi/hoek" "8.x.x"
+    "@hapi/boom" "9.x.x"
+    "@hapi/bourne" "2.x.x"
+    "@hapi/hoek" "9.x.x"
 
 "@icons/material@^0.2.4":
   version "0.2.4"
@@ -4869,11 +4822,6 @@
     "@types/vinyl-fs" "*"
     chokidar "^2.1.2"
 
-"@types/hapi__boom@*", "@types/hapi__boom@^7.4.1":
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/@types/hapi__boom/-/hapi__boom-7.4.1.tgz#06439d7637245dcbe6dd6548d2a91f2c1243d80b"
-  integrity sha512-x/ZK824GomII7Yoei/nMoB46NQcSfGe0iVpZK3uUivxIAfUUSzRvu8RQO7ZkKapIgzgshHZc+GR+z/BQ8l2VLg==
-
 "@types/hapi__catbox@*":
   version "10.2.3"
   resolved "https://registry.yarnpkg.com/@types/hapi__catbox/-/hapi__catbox-10.2.3.tgz#c9279c16d709bf2987491c332e11d18124ae018f"
@@ -4886,54 +4834,38 @@
   dependencies:
     "@types/hapi__hapi" "*"
 
-"@types/hapi__h2o2@8.3.0":
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/@types/hapi__h2o2/-/hapi__h2o2-8.3.0.tgz#c2e6598ab6ed28edb1a5edd44ddc185e1c252dd8"
-  integrity sha512-jD6L+8BJ+SVbwBzQK3W7zGnDYgrwuCNDl9r1P0GdwoYsysNADl7STfrhJ/m9qPt2fD1vFVJsfsFjoJ/iCyNlOQ==
+"@types/hapi__h2o2@^8.3.2":
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/@types/hapi__h2o2/-/hapi__h2o2-8.3.2.tgz#43cce95972c3097a2ca3efe6b7054a0c95fbf291"
+  integrity sha512-l36uuLHTwUQNbNUIkT14Z4WbJl1CIWpBZu7ZCBemGBypiNnbJxN3o0YyQ6QAid3YYa2C7LVDIdyY4MhpX8q9ZA==
   dependencies:
-    "@types/hapi__boom" "*"
+    "@hapi/boom" "^9.0.0"
+    "@hapi/wreck" "^17.0.0"
     "@types/hapi__hapi" "*"
     "@types/node" "*"
 
-"@types/hapi__hapi@*", "@types/hapi__hapi@^18.2.6":
-  version "18.2.6"
-  resolved "https://registry.yarnpkg.com/@types/hapi__hapi/-/hapi__hapi-18.2.6.tgz#61c1b210c55dee4636df594e7a0868ad48c8042a"
-  integrity sha512-sXFlSg9btu/LdHqK/N/kuQXVqZhSvibXbtZc0KfEcelRXKthdU5ZSu5qItDIov7SYnyK2faMe7dbZaC/VpC33w==
+"@types/hapi__hapi@*", "@types/hapi__hapi@^20.0.2":
+  version "20.0.2"
+  resolved "https://registry.yarnpkg.com/@types/hapi__hapi/-/hapi__hapi-20.0.2.tgz#e7571451f7fb75e87ab3873ec91b92f92cd55fff"
+  integrity sha512-7FwFoaxSCtHXbHbDdArSeVABFOfMLgVkOvOUtWrqUBzw639B2rq9OHv3kOVDHY0bOao0f6ubMzUxio8WQ9QZfQ==
   dependencies:
-    "@types/hapi__boom" "*"
+    "@hapi/boom" "^9.0.0"
+    "@hapi/iron" "^6.0.0"
     "@types/hapi__catbox" "*"
-    "@types/hapi__iron" "*"
-    "@types/hapi__joi" "*"
     "@types/hapi__mimos" "*"
     "@types/hapi__podium" "*"
     "@types/hapi__shot" "*"
+    "@types/joi" "*"
     "@types/node" "*"
 
-"@types/hapi__hoek@^6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@types/hapi__hoek/-/hapi__hoek-6.2.0.tgz#61ec4dfb93e6aaccf2b407d6074a0633069e5d2d"
-  integrity sha512-MMS8ZD0SR2lklVkpNJw7iUYBmlvBLw1T04VSBhbWpiOi0ee6RoJUCcocVao1FLnSYR8Tt03dykRBv+FkvPIJSg==
-
-"@types/hapi__inert@^5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@types/hapi__inert/-/hapi__inert-5.2.1.tgz#cce395e7470a969f63cf57d561da230218b8b2bb"
-  integrity sha512-pFvXfN9bTGgR6jkgKseXmu5/eHVGVEsGh0LKHCkcezEqZZMJV9YabREVLa6kcYEQMIDQzQSwSakSnemCFiSnOg==
+"@types/hapi__inert@^5.2.2":
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/@types/hapi__inert/-/hapi__inert-5.2.2.tgz#6513c487d216ed9377c2c0efceb178fda0928bfa"
+  integrity sha512-Vp9HS2wi3Qbm1oUlcTvzA2Zd+f3Dwg+tgLqWA6KTCgKbQX4LCPKIvVssbaQAVncmcpH0aPrtkAfftJlS/sMsGg==
   dependencies:
     "@types/hapi__hapi" "*"
 
-"@types/hapi__iron@*":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/@types/hapi__iron/-/hapi__iron-6.0.1.tgz#ec8b23eff3d69313f1187c234deb80652384ad6b"
-  integrity sha512-NTr+1FKl+nvEeSwVpfcks36dCm6+tbcQh3tJYbyQ5XWb5sIbCIptW6p38zmCYE5ppOoU/2PK1Y8taGpl6cOl5w==
-  dependencies:
-    "@hapi/iron" "*"
-
-"@types/hapi__joi@*":
-  version "17.1.6"
-  resolved "https://registry.yarnpkg.com/@types/hapi__joi/-/hapi__joi-17.1.6.tgz#b84663676aa9753c17183718338dd40ddcbd3754"
-  integrity sha512-y3A1MzNC0FmzD5+ys59RziE1WqKrL13nxtJgrSzjoO7boue5B7zZD2nZLPwrSuUviFjpKFQtgHYSvhDGfIE4jA==
-
-"@types/hapi__mimos@*", "@types/hapi__mimos@4.1.0":
+"@types/hapi__mimos@*":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@types/hapi__mimos/-/hapi__mimos-4.1.0.tgz#47dbf89ebfc05183c1de2797e9426793db9a0d85"
   integrity sha512-hcdSoYa32wcP+sEfyf85ieGwElwokcZ/mma8eyqQ4OTHeCAGwfaoiGxjG4z1Dm+RGhIYLHlW54ji5FFwahH12A==
@@ -4952,14 +4884,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/hapi__wreck@^15.0.1":
-  version "15.0.1"
-  resolved "https://registry.yarnpkg.com/@types/hapi__wreck/-/hapi__wreck-15.0.1.tgz#41df4e122c49316f0057cb5e9c6eb4c00e671e95"
-  integrity sha512-OXhOaFWPFkWkqU5IlFwgTK/Q3yzc3iDhC1/S+3rQ6d2qkl6xvcRZaayJGjDXORf3krnGtDN1l3bIajNcuUl6QA==
-  dependencies:
-    "@types/hapi__boom" "*"
-    "@types/node" "*"
-
 "@types/has-ansi@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/has-ansi/-/has-ansi-3.0.0.tgz#636403dc4e0b2649421c4158e5c404416f3f0330"
@@ -5099,6 +5023,11 @@
     jest-diff "^25.2.1"
     pretty-format "^25.2.1"
 
+"@types/joi@*":
+  version "14.3.4"
+  resolved "https://registry.yarnpkg.com/@types/joi/-/joi-14.3.4.tgz#eed1e14cbb07716079c814138831a520a725a1e0"
+  integrity sha512-1TQNDJvIKlgYXGNIABfgFp9y0FziDpuGrd799Q5RcnsDu+krD+eeW/0Fs5PHARvWWFelOhIG2OPCo6KbadBM4A==
+
 "@types/joi@^13.4.2":
   version "13.6.1"
   resolved "https://registry.yarnpkg.com/@types/joi/-/joi-13.6.1.tgz#325486a397504f8e22c8c551dc8b0e1d41d5d5ae"
@@ -19303,7 +19232,7 @@ lowlight@^1.14.0, lowlight@^1.2.0:
     fault "^1.0.0"
     highlight.js "~10.4.0"
 
-lru-cache@4.1.x, lru-cache@^4.0.0, lru-cache@^4.0.1, lru-cache@^4.1.5:
+lru-cache@^4.0.0, lru-cache@^4.0.1, lru-cache@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
   integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==

From 9fce3b2c88cf3b3518dc45cc4ee9002cef5b7aa9 Mon Sep 17 00:00:00 2001
From: Xavier Mouligneau <189600+XavierM@users.noreply.github.com>
Date: Sat, 19 Dec 2020 18:38:46 -0500
Subject: [PATCH 47/75] [Security Solutions] fix timeline tabs + layout
 (#86581)

* fix timeline tabs + fix screenreader

* review

* fix jest tests
---
 .../components/accessibility/helpers.test.ts  | 21 ------
 .../components/accessibility/helpers.test.tsx | 70 +++++++++++++++++++
 .../components/accessibility/helpers.ts       | 36 ++++++++++
 .../index.test.tsx                            | 40 +++++++++++
 .../tooltip_with_keyboard_shortcut/index.tsx  |  8 +--
 .../draggable_wrapper_hover_content.test.tsx  | 48 ++++++-------
 .../draggable_wrapper_hover_content.tsx       |  1 +
 .../events_viewer/events_viewer.tsx           |  7 +-
 .../public/common/components/page/index.tsx   | 10 ++-
 .../notes/note_cards/index.test.tsx           | 36 +++++++---
 .../components/notes/note_cards/index.tsx     | 30 +++-----
 .../open_timeline/note_previews/index.tsx     | 12 +++-
 .../note_previews/translations.ts             | 13 ++++
 .../__snapshots__/index.test.tsx.snap         |  7 ++
 .../body/data_driven_columns/index.test.tsx   |  2 +
 .../body/data_driven_columns/index.tsx        | 32 +++++++--
 .../body/data_driven_columns/translations.ts  | 14 ++++
 .../body/events/event_column_view.test.tsx    |  2 +
 .../body/events/event_column_view.tsx         | 12 +++-
 .../components/timeline/body/events/index.tsx |  8 +--
 .../timeline/body/events/stateful_event.tsx   | 36 ++++++++--
 .../events/stateful_row_renderer/index.tsx    | 57 +++++++++------
 .../components/timeline/body/helpers.tsx      |  6 ++
 .../components/timeline/body/index.test.tsx   |  2 +-
 .../components/timeline/body/index.tsx        | 13 ++--
 .../body/renderers/get_row_renderer.test.tsx  | 14 ++--
 .../body/renderers/get_row_renderer.ts        | 14 +---
 .../timeline/body/renderers/index.ts          |  2 -
 .../timeline/pinned_tab_content/index.tsx     |  3 +-
 .../timeline/query_tab_content/index.tsx      |  1 +
 .../timeline/tabs_content/index.tsx           |  2 +-
 .../timeline/tabs_content/translations.ts     |  6 +-
 32 files changed, 409 insertions(+), 156 deletions(-)
 delete mode 100644 x-pack/plugins/security_solution/public/common/components/accessibility/helpers.test.ts
 create mode 100644 x-pack/plugins/security_solution/public/common/components/accessibility/helpers.test.tsx
 create mode 100644 x-pack/plugins/security_solution/public/common/components/accessibility/tooltip_with_keyboard_shortcut/index.test.tsx

diff --git a/x-pack/plugins/security_solution/public/common/components/accessibility/helpers.test.ts b/x-pack/plugins/security_solution/public/common/components/accessibility/helpers.test.ts
deleted file mode 100644
index c099a1413a88f7..00000000000000
--- a/x-pack/plugins/security_solution/public/common/components/accessibility/helpers.test.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 { ariaIndexToArrayIndex, arrayIndexToAriaIndex } from './helpers';
-
-describe('helpers', () => {
-  describe('ariaIndexToArrayIndex', () => {
-    it('returns the expected array index', () => {
-      expect(ariaIndexToArrayIndex(1)).toEqual(0);
-    });
-  });
-
-  describe('arrayIndexToAriaIndex', () => {
-    it('returns the expected aria index', () => {
-      expect(arrayIndexToAriaIndex(0)).toEqual(1);
-    });
-  });
-});
diff --git a/x-pack/plugins/security_solution/public/common/components/accessibility/helpers.test.tsx b/x-pack/plugins/security_solution/public/common/components/accessibility/helpers.test.tsx
new file mode 100644
index 00000000000000..48db4b1f261b69
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/accessibility/helpers.test.tsx
@@ -0,0 +1,70 @@
+/*
+ * 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 { mount } from 'enzyme';
+import React from 'react';
+
+import {
+  ariaIndexToArrayIndex,
+  arrayIndexToAriaIndex,
+  getNotesContainerClassName,
+  getRowRendererClassName,
+  isArrowRight,
+} from './helpers';
+
+describe('helpers', () => {
+  describe('ariaIndexToArrayIndex', () => {
+    test('it returns the expected array index', () => {
+      expect(ariaIndexToArrayIndex(1)).toEqual(0);
+    });
+  });
+
+  describe('arrayIndexToAriaIndex', () => {
+    test('it returns the expected aria index', () => {
+      expect(arrayIndexToAriaIndex(0)).toEqual(1);
+    });
+  });
+
+  describe('isArrowRight', () => {
+    test('it returns true if the right arrow key was pressed', () => {
+      let result = false;
+      const onKeyDown = (keyboardEvent: React.KeyboardEvent) => {
+        result = isArrowRight(keyboardEvent);
+      };
+
+      const wrapper = mount(<div onKeyDown={onKeyDown} />);
+      wrapper.find('div').simulate('keydown', { key: 'ArrowRight' });
+      wrapper.update();
+
+      expect(result).toBe(true);
+    });
+
+    test('it returns false if another key was pressed', () => {
+      let result = false;
+      const onKeyDown = (keyboardEvent: React.KeyboardEvent) => {
+        result = isArrowRight(keyboardEvent);
+      };
+
+      const wrapper = mount(<div onKeyDown={onKeyDown} />);
+      wrapper.find('div').simulate('keydown', { key: 'Enter' });
+      wrapper.update();
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('getRowRendererClassName', () => {
+    test('it returns the expected class name', () => {
+      expect(getRowRendererClassName(2)).toBe('row-renderer-2');
+    });
+  });
+
+  describe('getNotesContainerClassName', () => {
+    test('it returns the expected class name', () => {
+      expect(getNotesContainerClassName(2)).toBe('notes-container-2');
+    });
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/common/components/accessibility/helpers.ts b/x-pack/plugins/security_solution/public/common/components/accessibility/helpers.ts
index d8603c9d02fcb7..8fc535c680b26f 100644
--- a/x-pack/plugins/security_solution/public/common/components/accessibility/helpers.ts
+++ b/x-pack/plugins/security_solution/public/common/components/accessibility/helpers.ts
@@ -5,6 +5,11 @@
  */
 
 import { DRAGGABLE_KEYBOARD_WRAPPER_CLASS_NAME } from '../drag_and_drop/helpers';
+import {
+  NOTES_CONTAINER_CLASS_NAME,
+  NOTE_CONTENT_CLASS_NAME,
+  ROW_RENDERER_CLASS_NAME,
+} from '../../../timelines/components/timeline/body/helpers';
 import { HOVER_ACTIONS_ALWAYS_SHOW_CLASS_NAME } from '../with_hover_actions';
 
 /**
@@ -63,6 +68,9 @@ export const isArrowDownOrArrowUp = (event: React.KeyboardEvent): boolean =>
 export const isArrowKey = (event: React.KeyboardEvent): boolean =>
   isArrowRightOrArrowLeft(event) || isArrowDownOrArrowUp(event);
 
+/** Returns `true` if the right arrow key was pressed */
+export const isArrowRight = (event: React.KeyboardEvent): boolean => event.key === 'ArrowRight';
+
 /** Returns `true` if the escape key was pressed */
 export const isEscape = (event: React.KeyboardEvent): boolean => event.key === 'Escape';
 
@@ -284,6 +292,12 @@ export type OnColumnFocused = ({
   newFocusedColumnAriaColindex: number | null;
 }) => void;
 
+export const getRowRendererClassName = (ariaRowindex: number) =>
+  `${ROW_RENDERER_CLASS_NAME}-${ariaRowindex}`;
+
+export const getNotesContainerClassName = (ariaRowindex: number) =>
+  `${NOTES_CONTAINER_CLASS_NAME}-${ariaRowindex}`;
+
 /**
  * This function implements arrow key support for the `onKeyDownFocusHandler`.
  *
@@ -312,6 +326,28 @@ export const onArrowKeyDown = ({
   onColumnFocused?: OnColumnFocused;
   rowindexAttribute: string;
 }) => {
+  if (isArrowDown(event) && event.shiftKey) {
+    const firstRowRendererDraggable = containerElement?.querySelector<HTMLDivElement>(
+      `.${getRowRendererClassName(focusedAriaRowindex)} .${DRAGGABLE_KEYBOARD_WRAPPER_CLASS_NAME}`
+    );
+
+    if (firstRowRendererDraggable) {
+      firstRowRendererDraggable.focus();
+      return;
+    }
+  }
+
+  if (isArrowRight(event) && event.shiftKey) {
+    const firstNoteContent = containerElement?.querySelector<HTMLDivElement>(
+      `.${getNotesContainerClassName(focusedAriaRowindex)} .${NOTE_CONTENT_CLASS_NAME}`
+    );
+
+    if (firstNoteContent) {
+      firstNoteContent.focus();
+      return;
+    }
+  }
+
   const ariaColindex = isArrowRightOrArrowLeft(event)
     ? getNewAriaColindex({
         focusedAriaColindex,
diff --git a/x-pack/plugins/security_solution/public/common/components/accessibility/tooltip_with_keyboard_shortcut/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/accessibility/tooltip_with_keyboard_shortcut/index.test.tsx
new file mode 100644
index 00000000000000..773fc3eeff4836
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/accessibility/tooltip_with_keyboard_shortcut/index.test.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 { mount } from 'enzyme';
+import React from 'react';
+
+import { TooltipWithKeyboardShortcut } from '.';
+
+const props = {
+  content: <div>{'To pay respect'}</div>,
+  shortcut: 'F',
+  showShortcut: true,
+};
+
+describe('TooltipWithKeyboardShortcut', () => {
+  test('it renders the provided content', () => {
+    const wrapper = mount(<TooltipWithKeyboardShortcut {...props} />);
+
+    expect(wrapper.find('[data-test-subj="content"]').text()).toBe('To pay respect');
+  });
+
+  test('it renders the additionalScreenReaderOnlyContext', () => {
+    const wrapper = mount(
+      <TooltipWithKeyboardShortcut {...props} additionalScreenReaderOnlyContext={'field.name'} />
+    );
+
+    expect(wrapper.find('[data-test-subj="additionalScreenReaderOnlyContext"]').text()).toBe(
+      'field.name'
+    );
+  });
+
+  test('it renders the expected shortcut', () => {
+    const wrapper = mount(<TooltipWithKeyboardShortcut {...props} />);
+
+    expect(wrapper.find('[data-test-subj="shortcut"]').first().text()).toBe('Press\u00a0F');
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/common/components/accessibility/tooltip_with_keyboard_shortcut/index.tsx b/x-pack/plugins/security_solution/public/common/components/accessibility/tooltip_with_keyboard_shortcut/index.tsx
index 807953c51a42c3..ab6f90c8fec816 100644
--- a/x-pack/plugins/security_solution/public/common/components/accessibility/tooltip_with_keyboard_shortcut/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/accessibility/tooltip_with_keyboard_shortcut/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiScreenReaderOnly, EuiText } from '@elastic/eui';
+import { EuiText, EuiScreenReaderOnly } from '@elastic/eui';
 import React from 'react';
 
 import * as i18n from './translations';
@@ -23,14 +23,14 @@ const TooltipWithKeyboardShortcutComponent = ({
   showShortcut,
 }: Props) => (
   <>
-    <div>{content}</div>
+    <div data-test-subj="content">{content}</div>
     {additionalScreenReaderOnlyContext !== '' && (
-      <EuiScreenReaderOnly>
+      <EuiScreenReaderOnly data-test-subj="additionalScreenReaderOnlyContext">
         <p>{additionalScreenReaderOnlyContext}</p>
       </EuiScreenReaderOnly>
     )}
     {showShortcut && (
-      <EuiText color="subdued" size="s" textAlign="center">
+      <EuiText color="subdued" data-test-subj="shortcut" size="s" textAlign="center">
         <span>{i18n.PRESS}</span>
         {'\u00a0'}
         <span className="euiBadge euiBadge--hollow">{shortcut}</span>
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 1cf03225cec033..9ce5778fb72e5c 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
@@ -14,7 +14,6 @@ import '../../mock/match_media';
 import { useKibana } from '../../lib/kibana';
 import { TestProviders } from '../../mock';
 import { FilterManager } from '../../../../../../../src/plugins/data/public';
-import { useAddToTimeline } from '../../hooks/use_add_to_timeline';
 import { useSourcererScope } from '../../containers/sourcerer';
 import { DraggableWrapperHoverContent } from './draggable_wrapper_hover_content';
 import {
@@ -41,8 +40,14 @@ jest.mock('uuid', () => {
     v4: jest.fn(() => 'uuid.v4()'),
   };
 });
-
-jest.mock('../../hooks/use_add_to_timeline');
+const mockStartDragToTimeline = jest.fn();
+jest.mock('../../hooks/use_add_to_timeline', () => {
+  const original = jest.requireActual('../../hooks/use_add_to_timeline');
+  return {
+    ...original,
+    useAddToTimeline: () => ({ startDragToTimeline: mockStartDragToTimeline }),
+  };
+});
 const mockAddFilters = jest.fn();
 const mockGetTimelineFilterManager = jest.fn().mockReturnValue({
   addFilters: mockAddFilters,
@@ -78,8 +83,7 @@ const defaultProps = {
 
 describe('DraggableWrapperHoverContent', () => {
   beforeAll(() => {
-    // our mock implementation of the useAddToTimeline hook returns a mock startDragToTimeline function:
-    (useAddToTimeline as jest.Mock).mockReturnValue({ startDragToTimeline: jest.fn() });
+    mockStartDragToTimeline.mockReset();
     (useSourcererScope as jest.Mock).mockReturnValue({
       browserFields: mockBrowserFields,
       selectedPatterns: [],
@@ -376,7 +380,7 @@ describe('DraggableWrapperHoverContent', () => {
       });
     });
 
-    test('when clicked, it invokes the `startDragToTimeline` function returned by the `useAddToTimeline` hook', () => {
+    test('when clicked, it invokes the `startDragToTimeline` function returned by the `useAddToTimeline` hook', async () => {
       const wrapper = mount(
         <TestProviders>
           <DraggableWrapperHoverContent
@@ -389,25 +393,17 @@ describe('DraggableWrapperHoverContent', () => {
         </TestProviders>
       );
 
-      // The following "startDragToTimeline" function returned by our mock
-      // useAddToTimeline hook is called when the user clicks the
-      // Add to timeline investigation action:
-      const { startDragToTimeline } = useAddToTimeline({
-        draggableId,
-        fieldName: aggregatableStringField,
-      });
-
       wrapper.find('[data-test-subj="add-to-timeline"]').first().simulate('click');
-      wrapper.update();
 
-      waitFor(() => {
-        expect(startDragToTimeline).toHaveBeenCalled();
+      await waitFor(() => {
+        wrapper.update();
+        expect(mockStartDragToTimeline).toHaveBeenCalled();
       });
     });
   });
 
   describe('Top N', () => {
-    test(`it renders the 'Show top field' button when showTopN is false and an aggregatable string field is provided`, async () => {
+    test(`it renders the 'Show top field' button when showTopN is false and an aggregatable string field is provided`, () => {
       const aggregatableStringField = 'cloud.account.id';
       const wrapper = mount(
         <TestProviders>
@@ -425,7 +421,7 @@ describe('DraggableWrapperHoverContent', () => {
       expect(wrapper.find('[data-test-subj="show-top-field"]').first().exists()).toBe(true);
     });
 
-    test(`it renders the 'Show top field' button when showTopN is false and a allowlisted signal field is provided`, async () => {
+    test(`it renders the 'Show top field' button when showTopN is false and a allowlisted signal field is provided`, () => {
       const allowlistedField = 'signal.rule.name';
       const wrapper = mount(
         <TestProviders>
@@ -443,7 +439,7 @@ describe('DraggableWrapperHoverContent', () => {
       expect(wrapper.find('[data-test-subj="show-top-field"]').first().exists()).toBe(true);
     });
 
-    test(`it does NOT render the 'Show top field' button when showTopN is false and a field not known to BrowserFields is provided`, async () => {
+    test(`it does NOT render the 'Show top field' button when showTopN is false and a field not known to BrowserFields is provided`, () => {
       const notKnownToBrowserFields = 'unknown.field';
       const wrapper = mount(
         <TestProviders>
@@ -461,7 +457,7 @@ describe('DraggableWrapperHoverContent', () => {
       expect(wrapper.find('[data-test-subj="show-top-field"]').first().exists()).toBe(false);
     });
 
-    test(`it should invokes goGetTimelineId when user is over the 'Show top field' button`, () => {
+    test(`it should invokes goGetTimelineId when user is over the 'Show top field' button`, async () => {
       const allowlistedField = 'signal.rule.name';
       const wrapper = mount(
         <TestProviders>
@@ -476,12 +472,12 @@ describe('DraggableWrapperHoverContent', () => {
       );
       const button = wrapper.find(`[data-test-subj="show-top-field"]`).first();
       button.simulate('mouseenter');
-      waitFor(() => {
+      await waitFor(() => {
         expect(goGetTimelineId).toHaveBeenCalledWith(true);
       });
     });
 
-    test(`invokes the toggleTopN function when the 'Show top field' button is clicked`, async () => {
+    test(`invokes the toggleTopN function when the 'Show top field' button is clicked`, () => {
       const allowlistedField = 'signal.rule.name';
       const wrapper = mount(
         <TestProviders>
@@ -502,7 +498,7 @@ describe('DraggableWrapperHoverContent', () => {
       expect(toggleTopN).toBeCalled();
     });
 
-    test(`it does NOT render the Top N histogram when when showTopN is false`, async () => {
+    test(`it does NOT render the Top N histogram when when showTopN is false`, () => {
       const allowlistedField = 'signal.rule.name';
       const wrapper = mount(
         <TestProviders>
@@ -522,7 +518,7 @@ describe('DraggableWrapperHoverContent', () => {
       );
     });
 
-    test(`it does NOT render the 'Show top field' button when showTopN is true`, async () => {
+    test(`it does NOT render the 'Show top field' button when showTopN is true`, () => {
       const allowlistedField = 'signal.rule.name';
       const wrapper = mount(
         <TestProviders>
@@ -541,7 +537,7 @@ describe('DraggableWrapperHoverContent', () => {
       expect(wrapper.find('[data-test-subj="show-top-field"]').first().exists()).toBe(false);
     });
 
-    test(`it renders the Top N histogram when when showTopN is true`, async () => {
+    test(`it renders the Top N histogram when when showTopN is true`, () => {
       const allowlistedField = 'signal.rule.name';
       const wrapper = mount(
         <TestProviders>
diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.tsx
index 2d3fdb9cb94291..adbb38f20c0280 100644
--- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.tsx
@@ -324,6 +324,7 @@ const DraggableWrapperHoverContentComponent: React.FC<Props> = ({
               color="text"
               data-test-subj="add-to-timeline"
               iconType="timeline"
+              onClick={handleStartDragToTimeline}
             />
           </EuiToolTip>
         )}
diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx
index 515758965d6d17..7d38e3b732fc09 100644
--- a/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx
@@ -16,7 +16,11 @@ import { BrowserFields, DocValueFields } from '../../containers/source';
 import { useTimelineEvents } from '../../../timelines/containers';
 import { timelineActions } from '../../../timelines/store/timeline';
 import { useKibana } from '../../lib/kibana';
-import { ColumnHeaderOptions, KqlMode } from '../../../timelines/store/timeline/model';
+import {
+  ColumnHeaderOptions,
+  KqlMode,
+  TimelineTabs,
+} from '../../../timelines/store/timeline/model';
 import { HeaderSection } from '../header_section';
 import { defaultHeaders } from '../../../timelines/components/timeline/body/column_headers/default_headers';
 import { Sort } from '../../../timelines/components/timeline/body/sort';
@@ -334,6 +338,7 @@ const EventsViewerComponent: React.FC<Props> = ({
                     onRuleChange={onRuleChange}
                     refetch={refetch}
                     sort={sort}
+                    tabType={TimelineTabs.query}
                     totalPages={calculateTotalPages({
                       itemsCount: totalCountMinusDeleted,
                       itemsPerPage,
diff --git a/x-pack/plugins/security_solution/public/common/components/page/index.tsx b/x-pack/plugins/security_solution/public/common/components/page/index.tsx
index 37cc8f4ac3b93a..30a7685a193b2e 100644
--- a/x-pack/plugins/security_solution/public/common/components/page/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/page/index.tsx
@@ -89,8 +89,14 @@ export const AppGlobalStyle = createGlobalStyle<{ theme: { eui: { euiColorPrimar
      to zero.
   */
   .euiScreenReaderOnly {
-    height: 0px;
-    width: 0px;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
   }
 `;
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/note_cards/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/notes/note_cards/index.test.tsx
index afec2055140d34..febbbb23db1efa 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/notes/note_cards/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/notes/note_cards/index.test.tsx
@@ -11,6 +11,7 @@ import '../../../../common/mock/formatted_relative';
 import { NoteCards } from '.';
 import { TimelineStatus } from '../../../../../common/types/timeline';
 import { TestProviders } from '../../../../common/mock';
+import { TimelineResultNote } from '../../open_timeline/types';
 
 const getNotesByIds = () => ({
   abc: {
@@ -38,35 +39,42 @@ jest.mock('../../../../common/hooks/use_selector', () => ({
 }));
 
 describe('NoteCards', () => {
-  const noteIds = ['abc', 'def'];
+  const notes: TimelineResultNote[] = Object.entries(getNotesByIds()).map(
+    ([_, { created, id, note, saveObjectId, user }]) => ({
+      saveObjectId,
+      note,
+      noteId: id,
+      updated: created.getTime(),
+      updatedBy: user,
+    })
+  );
 
   const props = {
     associateNote: jest.fn(),
     ariaRowindex: 2,
     getNotesByIds,
     getNewNoteId: jest.fn(),
-    noteIds,
+    notes: [],
     showAddNote: true,
     status: TimelineStatus.active,
     toggleShowAddNote: jest.fn(),
     updateNote: jest.fn(),
   };
 
-  test('it renders the notes column when noteIds are specified', () => {
+  test('it renders the notes column when notes are specified', () => {
     const wrapper = mount(
       <TestProviders>
-        <NoteCards {...props} />
+        <NoteCards {...props} notes={notes} />
       </TestProviders>
     );
 
     expect(wrapper.find('[data-test-subj="notes"]').exists()).toEqual(true);
   });
 
-  test('it does NOT render the notes column when noteIds are NOT specified', () => {
-    const testProps = { ...props, noteIds: [] };
+  test('it does NOT render the notes column when notes are NOT specified', () => {
     const wrapper = mount(
       <TestProviders>
-        <NoteCards {...testProps} />
+        <NoteCards {...props} />
       </TestProviders>
     );
 
@@ -76,7 +84,7 @@ describe('NoteCards', () => {
   test('renders note cards', () => {
     const wrapper = mount(
       <TestProviders>
-        <NoteCards {...props} />
+        <NoteCards {...props} notes={notes} />
       </TestProviders>
     );
 
@@ -85,6 +93,18 @@ describe('NoteCards', () => {
     );
   });
 
+  test('renders the expected screenreader only text', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <NoteCards {...props} notes={notes} />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="screenReaderOnly"]').first().text()).toEqual(
+      'You are viewing notes for the event in row 2. Press the up arrow key when finished to return to the event.'
+    );
+  });
+
   test('it shows controls for adding notes when showAddNote is true', () => {
     const wrapper = mount(
       <TestProviders>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/note_cards/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/notes/note_cards/index.tsx
index 99cf8740809dae..9b307690cf12c8 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/notes/note_cards/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/notes/note_cards/index.tsx
@@ -5,11 +5,10 @@
  */
 
 import { EuiFlexGroup, EuiPanel, EuiScreenReaderOnly } from '@elastic/eui';
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback } from 'react';
 import styled from 'styled-components';
 
-import { appSelectors } from '../../../../common/store';
-import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
+import { getNotesContainerClassName } from '../../../../common/components/accessibility/helpers';
 import { AddNote } from '../add_note';
 import { AssociateNote } from '../helpers';
 import { NotePreviews, NotePreviewsContainer } from '../../open_timeline/note_previews';
@@ -44,16 +43,14 @@ NotesContainer.displayName = 'NotesContainer';
 interface Props {
   ariaRowindex: number;
   associateNote: AssociateNote;
-  noteIds: string[];
+  notes: TimelineResultNote[];
   showAddNote: boolean;
   toggleShowAddNote: () => void;
 }
 
 /** A view for entering and reviewing notes */
 export const NoteCards = React.memo<Props>(
-  ({ ariaRowindex, associateNote, noteIds, showAddNote, toggleShowAddNote }) => {
-    const getNotesByIds = useMemo(() => appSelectors.notesByIdsSelector(), []);
-    const notesById = useDeepEqualSelector(getNotesByIds);
+  ({ ariaRowindex, associateNote, notes, showAddNote, toggleShowAddNote }) => {
     const [newNote, setNewNote] = useState('');
 
     const associateNoteAndToggleShow = useCallback(
@@ -64,23 +61,16 @@ export const NoteCards = React.memo<Props>(
       [associateNote, toggleShowAddNote]
     );
 
-    const notes: TimelineResultNote[] = useMemo(
-      () =>
-        appSelectors.getNotes(notesById, noteIds).map((note) => ({
-          savedObjectId: note.saveObjectId,
-          note: note.note,
-          noteId: note.id,
-          updated: (note.lastEdit ?? note.created).getTime(),
-          updatedBy: note.user,
-        })),
-      [notesById, noteIds]
-    );
-
     return (
       <NoteCardsCompContainer data-test-subj="note-cards" hasShadow={false} paddingSize="none">
         {notes.length ? (
           <NotePreviewsContainer data-test-subj="note-previews-container">
-            <NotesContainer data-test-subj="notes" direction="column" gutterSize="none">
+            <NotesContainer
+              className={getNotesContainerClassName(ariaRowindex)}
+              data-test-subj="notes"
+              direction="column"
+              gutterSize="none"
+            >
               <EuiScreenReaderOnly data-test-subj="screenReaderOnly">
                 <p>{i18n.YOU_ARE_VIEWING_NOTES(ariaRowindex)}</p>
               </EuiScreenReaderOnly>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/index.tsx
index 2a1d0d2ad11cf2..fc05e61442e83d 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import { uniqBy } from 'lodash/fp';
-import { EuiAvatar, EuiButtonIcon, EuiCommentList } from '@elastic/eui';
+import { EuiAvatar, EuiButtonIcon, EuiCommentList, EuiScreenReaderOnly } from '@elastic/eui';
 import { FormattedRelative } from '@kbn/i18n/react';
 import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
@@ -15,6 +15,7 @@ import { TimelineResultNote } from '../types';
 import { getEmptyValue, defaultToEmptyTag } from '../../../../common/components/empty_value';
 import { MarkdownRenderer } from '../../../../common/components/markdown_editor';
 import { timelineActions } from '../../../store/timeline';
+import { NOTE_CONTENT_CLASS_NAME } from '../../timeline/body/helpers';
 import * as i18n from './translations';
 
 export const NotePreviewsContainer = styled.section`
@@ -89,7 +90,14 @@ export const NotePreviews = React.memo<NotePreviewsProps>(
             ) : (
               getEmptyValue()
             ),
-            children: <MarkdownRenderer>{note.note ?? ''}</MarkdownRenderer>,
+            children: (
+              <div className={NOTE_CONTENT_CLASS_NAME} tabIndex={0}>
+                <EuiScreenReaderOnly data-test-subj="screenReaderOnlyUserAddedANote">
+                  <p>{i18n.USER_ADDED_A_NOTE(note.updatedBy ?? i18n.AN_UNKNOWN_USER)}</p>
+                </EuiScreenReaderOnly>
+                <MarkdownRenderer>{note.note ?? ''}</MarkdownRenderer>
+              </div>
+            ),
             actions:
               eventId && timelineId ? (
                 <ToggleEventDetailsButton eventId={eventId} timelineId={timelineId} />
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/translations.ts
index 9857e55e365700..d38dee8a415045 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/translations.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/translations.ts
@@ -12,3 +12,16 @@ export const TOGGLE_EXPAND_EVENT_DETAILS = i18n.translate(
     defaultMessage: 'Expand event details',
   }
 );
+
+export const USER_ADDED_A_NOTE = (user: string) =>
+  i18n.translate('xpack.securitySolution.timeline.userAddedANoteScreenReaderOnly', {
+    values: { user },
+    defaultMessage: '{user} added a note',
+  });
+
+export const AN_UNKNOWN_USER = i18n.translate(
+  'xpack.securitySolution.timeline.anUnknownUserScreenReaderOnly',
+  {
+    defaultMessage: 'an unknown user',
+  }
+);
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/data_driven_columns/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/data_driven_columns/__snapshots__/index.test.tsx.snap
index 8f514ca49e8480..d112a665d77c00 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/data_driven_columns/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/data_driven_columns/__snapshots__/index.test.tsx.snap
@@ -44,6 +44,7 @@ exports[`Columns it renders the expected columns 1`] = `
         truncate={true}
       />
     </styled.div>
+    0
   </styled.div>
   <styled.div
     $ariaColumnIndex={3}
@@ -74,6 +75,7 @@ exports[`Columns it renders the expected columns 1`] = `
         value="Access"
       />
     </styled.div>
+    0
   </styled.div>
   <styled.div
     $ariaColumnIndex={4}
@@ -104,6 +106,7 @@ exports[`Columns it renders the expected columns 1`] = `
         value="Action"
       />
     </styled.div>
+    0
   </styled.div>
   <styled.div
     $ariaColumnIndex={5}
@@ -134,6 +137,7 @@ exports[`Columns it renders the expected columns 1`] = `
         value="apache"
       />
     </styled.div>
+    0
   </styled.div>
   <styled.div
     $ariaColumnIndex={6}
@@ -164,6 +168,7 @@ exports[`Columns it renders the expected columns 1`] = `
         value="192.168.0.1"
       />
     </styled.div>
+    0
   </styled.div>
   <styled.div
     $ariaColumnIndex={7}
@@ -194,6 +199,7 @@ exports[`Columns it renders the expected columns 1`] = `
         value="192.168.0.3"
       />
     </styled.div>
+    0
   </styled.div>
   <styled.div
     $ariaColumnIndex={8}
@@ -224,6 +230,7 @@ exports[`Columns it renders the expected columns 1`] = `
         value="john.dee"
       />
     </styled.div>
+    0
   </styled.div>
 </styled.div>
 `;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/data_driven_columns/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/data_driven_columns/index.test.tsx
index 00b3a10bba5386..d7931b563c7779 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/data_driven_columns/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/data_driven_columns/index.test.tsx
@@ -26,6 +26,8 @@ describe('Columns', () => {
         columnRenderers={columnRenderers}
         data={mockTimelineData[0].data}
         ecsData={mockTimelineData[0].ecs}
+        hasRowRenderers={false}
+        notesCount={0}
         timelineId="test"
       />
     );
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/data_driven_columns/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/data_driven_columns/index.tsx
index 6dad9851e5adba..c497d4f459f000 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/data_driven_columns/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/data_driven_columns/index.tsx
@@ -21,12 +21,14 @@ import * as i18n from './translations';
 
 interface Props {
   _id: string;
-  activeTab?: TimelineTabs;
   ariaRowindex: number;
   columnHeaders: ColumnHeaderOptions[];
   columnRenderers: ColumnRenderer[];
   data: TimelineNonEcsData[];
   ecsData: Ecs;
+  hasRowRenderers: boolean;
+  notesCount: number;
+  tabType?: TimelineTabs;
   timelineId: string;
 }
 
@@ -74,12 +76,23 @@ export const onKeyDown = (keyboardEvent: React.KeyboardEvent) => {
 };
 
 export const DataDrivenColumns = React.memo<Props>(
-  ({ _id, activeTab, ariaRowindex, columnHeaders, columnRenderers, data, ecsData, timelineId }) => (
+  ({
+    _id,
+    ariaRowindex,
+    columnHeaders,
+    columnRenderers,
+    data,
+    ecsData,
+    hasRowRenderers,
+    notesCount,
+    tabType,
+    timelineId,
+  }) => (
     <EventsTdGroupData data-test-subj="data-driven-columns">
       {columnHeaders.map((header, i) => (
         <EventsTd
           $ariaColumnIndex={i + ARIA_COLUMN_INDEX_OFFSET}
-          key={activeTab != null ? `${header.id}_${activeTab}` : `${header.id}`}
+          key={tabType != null ? `${header.id}_${tabType}` : `${header.id}`}
           onKeyDown={onKeyDown}
           role="button"
           tabIndex={0}
@@ -95,7 +108,7 @@ export const DataDrivenColumns = React.memo<Props>(
                 eventId: _id,
                 field: header,
                 linkValues: getOr([], header.linkField ?? '', ecsData),
-                timelineId: activeTab != null ? `${timelineId}-${activeTab}` : timelineId,
+                timelineId: tabType != null ? `${timelineId}-${tabType}` : timelineId,
                 truncate: true,
                 values: getMappedNonEcsValue({
                   data,
@@ -104,6 +117,17 @@ export const DataDrivenColumns = React.memo<Props>(
               })}
             </>
           </EventsTdContent>
+          {hasRowRenderers && (
+            <EuiScreenReaderOnly data-test-subj="hasRowRendererScreenReaderOnly">
+              <p>{i18n.EVENT_HAS_AN_EVENT_RENDERER(ariaRowindex)}</p>
+            </EuiScreenReaderOnly>
+          )}
+
+          {notesCount && (
+            <EuiScreenReaderOnly data-test-subj="hasNotesScreenReaderOnly">
+              <p>{i18n.EVENT_HAS_NOTES({ row: ariaRowindex, notesCount })}</p>
+            </EuiScreenReaderOnly>
+          )}
         </EventsTd>
       ))}
     </EventsTdGroupData>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/data_driven_columns/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/data_driven_columns/translations.ts
index 80199e0026ac32..63086d56d07530 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/data_driven_columns/translations.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/data_driven_columns/translations.ts
@@ -11,3 +11,17 @@ export const YOU_ARE_IN_A_TABLE_CELL = ({ column, row }: { column: number; row:
     values: { column, row },
     defaultMessage: 'You are in a table cell. row: {row}, column: {column}',
   });
+
+export const EVENT_HAS_AN_EVENT_RENDERER = (row: number) =>
+  i18n.translate('xpack.securitySolution.timeline.eventHasEventRendererScreenReaderOnly', {
+    values: { row },
+    defaultMessage:
+      'The event in row {row} has an event renderer. Press shift + down arrow to focus it.',
+  });
+
+export const EVENT_HAS_NOTES = ({ notesCount, row }: { notesCount: number; row: number }) =>
+  i18n.translate('xpack.securitySolution.timeline.eventHasNotesScreenReaderOnly', {
+    values: { notesCount, row },
+    defaultMessage:
+      'The event in row {row} has {notesCount, plural, =1 {a note} other {{notesCount} notes}}. Press shift + right arrow to focus notes.',
+  });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.test.tsx
index 9bb8a695454d74..0525767e616bef 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.test.tsx
@@ -36,8 +36,10 @@ describe('EventColumnView', () => {
     },
     eventIdToNoteIds: {},
     expanded: false,
+    hasRowRenderers: false,
     loading: false,
     loadingEventIds: [],
+    notesCount: 0,
     onEventToggled: jest.fn(),
     onPinEvent: jest.fn(),
     onRowSelected: jest.fn(),
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.tsx
index 6aee6f9d4fdfab..ae8d2a47c7dc78 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.tsx
@@ -35,7 +35,6 @@ import * as i18n from '../translations';
 interface Props {
   id: string;
   actionsColumnWidth: number;
-  activeTab?: TimelineTabs;
   ariaRowindex: number;
   columnHeaders: ColumnHeaderOptions[];
   columnRenderers: ColumnRenderer[];
@@ -46,15 +45,18 @@ interface Props {
   isEventPinned: boolean;
   isEventViewer?: boolean;
   loadingEventIds: Readonly<string[]>;
+  notesCount: number;
   onEventToggled: () => void;
   onPinEvent: OnPinEvent;
   onRowSelected: OnRowSelected;
   onUnPinEvent: OnUnPinEvent;
   refetch: inputsModel.Refetch;
   onRuleChange?: () => void;
+  hasRowRenderers: boolean;
   selectedEventIds: Readonly<Record<string, TimelineNonEcsData[]>>;
   showCheckboxes: boolean;
   showNotes: boolean;
+  tabType?: TimelineTabs;
   timelineId: string;
   toggleShowNotes: () => void;
 }
@@ -65,7 +67,6 @@ export const EventColumnView = React.memo<Props>(
   ({
     id,
     actionsColumnWidth,
-    activeTab,
     ariaRowindex,
     columnHeaders,
     columnRenderers,
@@ -76,15 +77,18 @@ export const EventColumnView = React.memo<Props>(
     isEventPinned = false,
     isEventViewer = false,
     loadingEventIds,
+    notesCount,
     onEventToggled,
     onPinEvent,
     onRowSelected,
     onUnPinEvent,
     refetch,
+    hasRowRenderers,
     onRuleChange,
     selectedEventIds,
     showCheckboxes,
     showNotes,
+    tabType,
     timelineId,
     toggleShowNotes,
   }) => {
@@ -225,12 +229,14 @@ export const EventColumnView = React.memo<Props>(
 
         <DataDrivenColumns
           _id={id}
-          activeTab={activeTab}
           ariaRowindex={ariaRowindex}
           columnHeaders={columnHeaders}
           columnRenderers={columnRenderers}
           data={data}
           ecsData={ecsData}
+          hasRowRenderers={hasRowRenderers}
+          notesCount={notesCount}
+          tabType={tabType}
           timelineId={timelineId}
         />
       </EventsTrData>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/index.tsx
index bce5f1293e66b8..92ae01b185f7a1 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/index.tsx
@@ -24,7 +24,6 @@ import { eventIsPinned } from '../helpers';
 const ARIA_ROW_INDEX_OFFSET = 2;
 
 interface Props {
-  activeTab?: TimelineTabs;
   actionsColumnWidth: number;
   browserFields: BrowserFields;
   columnHeaders: ColumnHeaderOptions[];
@@ -43,11 +42,11 @@ interface Props {
   rowRenderers: RowRenderer[];
   selectedEventIds: Readonly<Record<string, TimelineNonEcsData[]>>;
   showCheckboxes: boolean;
+  tabType?: TimelineTabs;
 }
 
 const EventsComponent: React.FC<Props> = ({
   actionsColumnWidth,
-  activeTab,
   browserFields,
   columnHeaders,
   columnRenderers,
@@ -65,11 +64,11 @@ const EventsComponent: React.FC<Props> = ({
   rowRenderers,
   selectedEventIds,
   showCheckboxes,
+  tabType,
 }) => (
   <EventsTbody data-test-subj="events">
     {data.map((event, i) => (
       <StatefulEvent
-        activeTab={activeTab}
         actionsColumnWidth={actionsColumnWidth}
         ariaRowindex={i + ARIA_ROW_INDEX_OFFSET}
         browserFields={browserFields}
@@ -80,7 +79,7 @@ const EventsComponent: React.FC<Props> = ({
         eventIdToNoteIds={eventIdToNoteIds}
         isEventPinned={eventIsPinned({ eventId: event._id, pinnedEventIds })}
         isEventViewer={isEventViewer}
-        key={`${id}_${activeTab}_${event._id}_${event._index}`}
+        key={`${id}_${tabType}_${event._id}_${event._index}`}
         lastFocusedAriaColindex={lastFocusedAriaColindex}
         loadingEventIds={loadingEventIds}
         onRowSelected={onRowSelected}
@@ -89,6 +88,7 @@ const EventsComponent: React.FC<Props> = ({
         onRuleChange={onRuleChange}
         selectedEventIds={selectedEventIds}
         showCheckboxes={showCheckboxes}
+        tabType={tabType}
         timelineId={id}
       />
     ))}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx
index 9802e4532b05bf..e3f5a744e8b7d7 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx
@@ -19,22 +19,22 @@ import { OnPinEvent, OnRowSelected } from '../../events';
 import { STATEFUL_EVENT_CSS_CLASS_NAME } from '../../helpers';
 import { EventsTrGroup, EventsTrSupplement, EventsTrSupplementContainer } from '../../styles';
 import { ColumnRenderer } from '../renderers/column_renderer';
-
 import { RowRenderer } from '../renderers/row_renderer';
 import { isEventBuildingBlockType, getEventType } from '../helpers';
 import { NoteCards } from '../../../notes/note_cards';
 import { useEventDetailsWidthContext } from '../../../../../common/components/events_viewer/event_details_width_context';
 import { EventColumnView } from './event_column_view';
-import { inputsModel } from '../../../../../common/store';
+import { appSelectors, inputsModel } from '../../../../../common/store';
 import { timelineActions, timelineSelectors } from '../../../../store/timeline';
 import { activeTimeline } from '../../../../containers/active_timeline_context';
+import { TimelineResultNote } from '../../../open_timeline/types';
+import { getRowRenderer } from '../renderers/get_row_renderer';
 import { StatefulRowRenderer } from './stateful_row_renderer';
 import { NOTES_BUTTON_CLASS_NAME } from '../../properties/helpers';
 import { timelineDefaults } from '../../../../store/timeline/defaults';
 
 interface Props {
   actionsColumnWidth: number;
-  activeTab?: TimelineTabs;
   containerRef: React.MutableRefObject<HTMLDivElement | null>;
   browserFields: BrowserFields;
   columnHeaders: ColumnHeaderOptions[];
@@ -52,6 +52,7 @@ interface Props {
   rowRenderers: RowRenderer[];
   selectedEventIds: Readonly<Record<string, TimelineNonEcsData[]>>;
   showCheckboxes: boolean;
+  tabType?: TimelineTabs;
   timelineId: string;
 }
 
@@ -66,7 +67,6 @@ EventsTrSupplementContainerWrapper.displayName = 'EventsTrSupplementContainerWra
 
 const StatefulEventComponent: React.FC<Props> = ({
   actionsColumnWidth,
-  activeTab,
   browserFields,
   containerRef,
   columnHeaders,
@@ -84,6 +84,7 @@ const StatefulEventComponent: React.FC<Props> = ({
   ariaRowindex,
   selectedEventIds,
   showCheckboxes,
+  tabType,
   timelineId,
 }) => {
   const trGroupRef = useRef<HTMLDivElement | null>(null);
@@ -93,12 +94,31 @@ const StatefulEventComponent: React.FC<Props> = ({
   const expandedEvent = useDeepEqualSelector(
     (state) => (getTimeline(state, timelineId) ?? timelineDefaults).expandedEvent
   );
-
+  const getNotesByIds = useMemo(() => appSelectors.notesByIdsSelector(), []);
+  const notesById = useDeepEqualSelector(getNotesByIds);
+  const noteIds: string[] = eventIdToNoteIds[event._id] || emptyNotes;
   const isExpanded = useMemo(() => expandedEvent && expandedEvent.eventId === event._id, [
     event._id,
     expandedEvent,
   ]);
 
+  const notes: TimelineResultNote[] = useMemo(
+    () =>
+      appSelectors.getNotes(notesById, noteIds).map((note) => ({
+        savedObjectId: note.saveObjectId,
+        note: note.note,
+        noteId: note.id,
+        updated: (note.lastEdit ?? note.created).getTime(),
+        updatedBy: note.user,
+      })),
+    [notesById, noteIds]
+  );
+
+  const hasRowRenderers: boolean = useMemo(() => getRowRenderer(event.ecs, rowRenderers) != null, [
+    event.ecs,
+    rowRenderers,
+  ]);
+
   const onToggleShowNotes = useCallback(() => {
     const eventId = event._id;
 
@@ -195,7 +215,6 @@ const StatefulEventComponent: React.FC<Props> = ({
       <EventColumnView
         id={event._id}
         actionsColumnWidth={actionsColumnWidth}
-        activeTab={activeTab}
         ariaRowindex={ariaRowindex}
         columnHeaders={columnHeaders}
         columnRenderers={columnRenderers}
@@ -203,9 +222,11 @@ const StatefulEventComponent: React.FC<Props> = ({
         ecsData={event.ecs}
         eventIdToNoteIds={eventIdToNoteIds}
         expanded={isExpanded}
+        hasRowRenderers={hasRowRenderers}
         isEventPinned={isEventPinned}
         isEventViewer={isEventViewer}
         loadingEventIds={loadingEventIds}
+        notesCount={notes.length}
         onEventToggled={handleOnEventToggled}
         onPinEvent={onPinEvent}
         onRowSelected={onRowSelected}
@@ -215,6 +236,7 @@ const StatefulEventComponent: React.FC<Props> = ({
         selectedEventIds={selectedEventIds}
         showCheckboxes={showCheckboxes}
         showNotes={!!showNotes[event._id]}
+        tabType={tabType}
         timelineId={timelineId}
         toggleShowNotes={onToggleShowNotes}
       />
@@ -228,7 +250,7 @@ const StatefulEventComponent: React.FC<Props> = ({
             ariaRowindex={ariaRowindex}
             associateNote={associateNote}
             data-test-subj="note-cards"
-            noteIds={eventIdToNoteIds[event._id] || emptyNotes}
+            notes={notes}
             showAddNote={!!showNotes[event._id]}
             toggleShowAddNote={onToggleShowNotes}
           />
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_row_renderer/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_row_renderer/index.tsx
index 1628824b46a08d..4000ebcfd767a8 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_row_renderer/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_row_renderer/index.tsx
@@ -12,6 +12,7 @@ import { BrowserFields } from '../../../../../../common/containers/source';
 import {
   ARIA_COLINDEX_ATTRIBUTE,
   ARIA_ROWINDEX_ATTRIBUTE,
+  getRowRendererClassName,
 } from '../../../../../../common/components/accessibility/helpers';
 import { TimelineItem } from '../../../../../../../common/search_strategy/timeline';
 import { getRowRenderer } from '../../renderers/get_row_renderer';
@@ -59,28 +60,44 @@ export const StatefulRowRenderer = ({
     rowindexAttribute: ARIA_ROWINDEX_ATTRIBUTE,
   });
 
+  const rowRenderer = useMemo(() => getRowRenderer(event.ecs, rowRenderers), [
+    event.ecs,
+    rowRenderers,
+  ]);
+
   const content = useMemo(
-    () => (
-      <EuiFocusTrap clickOutsideDisables={true} disabled={focusOwnership !== 'owned'}>
-        <EuiScreenReaderOnly data-test-subj="eventRendererScreenReaderOnly">
-          <p>{i18n.YOU_ARE_IN_AN_EVENT_RENDERER(ariaRowindex)}</p>
-        </EuiScreenReaderOnly>
-        <div onKeyDown={onKeyDown}>
-          {getRowRenderer(event.ecs, rowRenderers).renderRow({
-            browserFields,
-            data: event.ecs,
-            timelineId,
-          })}
+    () =>
+      rowRenderer && (
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+        <div className={getRowRendererClassName(ariaRowindex)} role="dialog" onFocus={onFocus}>
+          <EuiOutsideClickDetector onOutsideClick={onOutsideClick}>
+            <EuiFocusTrap clickOutsideDisables={true} disabled={focusOwnership !== 'owned'}>
+              <EuiScreenReaderOnly data-test-subj="eventRendererScreenReaderOnly">
+                <p>{i18n.YOU_ARE_IN_AN_EVENT_RENDERER(ariaRowindex)}</p>
+              </EuiScreenReaderOnly>
+              <div onKeyDown={onKeyDown}>
+                {rowRenderer.renderRow({
+                  browserFields,
+                  data: event.ecs,
+                  timelineId,
+                })}
+              </div>
+            </EuiFocusTrap>
+          </EuiOutsideClickDetector>
         </div>
-      </EuiFocusTrap>
-    ),
-    [ariaRowindex, browserFields, event.ecs, focusOwnership, onKeyDown, rowRenderers, timelineId]
+      ),
+    [
+      ariaRowindex,
+      browserFields,
+      event.ecs,
+      focusOwnership,
+      onFocus,
+      onKeyDown,
+      onOutsideClick,
+      rowRenderer,
+      timelineId,
+    ]
   );
 
-  return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    <div role="dialog" onFocus={onFocus}>
-      <EuiOutsideClickDetector onOutsideClick={onOutsideClick}>{content}</EuiOutsideClickDetector>
-    </div>
-  );
+  return content;
 };
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.tsx
index 3470dba636aa8c..0295d44b646d77 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.tsx
@@ -160,3 +160,9 @@ const InvestigateInResolverActionComponent: React.FC<InvestigateInResolverAction
 InvestigateInResolverActionComponent.displayName = 'InvestigateInResolverActionComponent';
 
 export const InvestigateInResolverAction = React.memo(InvestigateInResolverActionComponent);
+
+export const ROW_RENDERER_CLASS_NAME = 'row-renderer';
+
+export const NOTES_CONTAINER_CLASS_NAME = 'notes-container';
+
+export const NOTE_CONTENT_CLASS_NAME = 'note-content';
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 56ab0dbd7454ea..c8e911db85f640 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
@@ -78,7 +78,7 @@ describe('Body', () => {
     setSelected: (jest.fn() as unknown) as StatefulBodyProps['setSelected'],
     sort: mockSort,
     showCheckboxes: false,
-    activeTab: TimelineTabs.query,
+    tabType: TimelineTabs.query,
     totalPages: 1,
   };
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx
index f6190b39214e90..4a33d0d3af33e9 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx
@@ -21,7 +21,7 @@ import { BrowserFields } from '../../../../common/containers/source';
 import { TimelineItem } from '../../../../../common/search_strategy/timeline';
 import { inputsModel, State } from '../../../../common/store';
 import { useManageTimeline } from '../../manage_timeline';
-import { ColumnHeaderOptions, TimelineModel } from '../../../store/timeline/model';
+import { ColumnHeaderOptions, TimelineModel, TimelineTabs } from '../../../store/timeline/model';
 import { timelineDefaults } from '../../../store/timeline/defaults';
 import { timelineActions, timelineSelectors } from '../../../store/timeline';
 import { OnRowSelected, OnSelectAll } from '../events';
@@ -43,6 +43,7 @@ interface OwnProps {
   isEventViewer?: boolean;
   sort: Sort[];
   refetch: inputsModel.Refetch;
+  tabType: TimelineTabs;
   totalPages: number;
   onRuleChange?: () => void;
 }
@@ -60,7 +61,6 @@ export type StatefulBodyProps = OwnProps & PropsFromRedux;
 
 export const BodyComponent = React.memo<StatefulBodyProps>(
   ({
-    activeTab,
     activePage,
     browserFields,
     columnHeaders,
@@ -79,6 +79,7 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
     showCheckboxes,
     refetch,
     sort,
+    tabType,
     totalPages,
   }) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
@@ -200,7 +201,6 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
             <Events
               containerRef={containerRef}
               actionsColumnWidth={actionsColumnWidth}
-              activeTab={activeTab}
               browserFields={browserFields}
               columnHeaders={columnHeaders}
               columnRenderers={columnRenderers}
@@ -217,6 +217,7 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
               onRuleChange={onRuleChange}
               selectedEventIds={selectedEventIds}
               showCheckboxes={showCheckboxes}
+              tabType={tabType}
             />
           </EventsTable>
         </TimelineBody>
@@ -225,7 +226,6 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
     );
   },
   (prevProps, nextProps) =>
-    prevProps.activeTab === nextProps.activeTab &&
     deepEqual(prevProps.browserFields, nextProps.browserFields) &&
     deepEqual(prevProps.columnHeaders, nextProps.columnHeaders) &&
     deepEqual(prevProps.data, nextProps.data) &&
@@ -238,7 +238,8 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
     prevProps.id === nextProps.id &&
     prevProps.isEventViewer === nextProps.isEventViewer &&
     prevProps.isSelectAllChecked === nextProps.isSelectAllChecked &&
-    prevProps.showCheckboxes === nextProps.showCheckboxes
+    prevProps.showCheckboxes === nextProps.showCheckboxes &&
+    prevProps.tabType === nextProps.tabType
 );
 
 BodyComponent.displayName = 'BodyComponent';
@@ -253,7 +254,6 @@ const makeMapStateToProps = () => {
   const mapStateToProps = (state: State, { browserFields, id }: OwnProps) => {
     const timeline: TimelineModel = getTimeline(state, id) ?? timelineDefaults;
     const {
-      activeTab,
       columns,
       eventIdToNoteIds,
       excludedRowRendererIds,
@@ -265,7 +265,6 @@ const makeMapStateToProps = () => {
     } = timeline;
 
     return {
-      activeTab: id === TimelineId.active ? activeTab : undefined,
       columnHeaders: memoizedColumnHeaders(columns, browserFields),
       eventIdToNoteIds,
       excludedRowRendererIds,
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 b4fdc427d9db3e..f3a914ff4be29c 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
@@ -48,7 +48,7 @@ describe('get_column_renderer', () => {
 
   test('renders correctly against snapshot', () => {
     const rowRenderer = getRowRenderer(nonSuricata, rowRenderers);
-    const row = rowRenderer.renderRow({
+    const row = rowRenderer?.renderRow({
       browserFields: mockBrowserFields,
       data: nonSuricata,
       timelineId: 'test',
@@ -60,7 +60,7 @@ describe('get_column_renderer', () => {
 
   test('should render plain row data when it is a non suricata row', () => {
     const rowRenderer = getRowRenderer(nonSuricata, rowRenderers);
-    const row = rowRenderer.renderRow({
+    const row = rowRenderer?.renderRow({
       browserFields: mockBrowserFields,
       data: nonSuricata,
       timelineId: 'test',
@@ -75,7 +75,7 @@ describe('get_column_renderer', () => {
 
   test('should render a suricata row data when it is a suricata row', () => {
     const rowRenderer = getRowRenderer(suricata, rowRenderers);
-    const row = rowRenderer.renderRow({
+    const row = rowRenderer?.renderRow({
       browserFields: mockBrowserFields,
       data: suricata,
       timelineId: 'test',
@@ -93,7 +93,7 @@ describe('get_column_renderer', () => {
   test('should render a suricata row data if event.category is network_traffic', () => {
     suricata.event = { ...suricata.event, ...{ category: ['network_traffic'] } };
     const rowRenderer = getRowRenderer(suricata, rowRenderers);
-    const row = rowRenderer.renderRow({
+    const row = rowRenderer?.renderRow({
       browserFields: mockBrowserFields,
       data: suricata,
       timelineId: 'test',
@@ -111,7 +111,7 @@ describe('get_column_renderer', () => {
   test('should render a zeek row data if event.category is network_traffic', () => {
     zeek.event = { ...zeek.event, ...{ category: ['network_traffic'] } };
     const rowRenderer = getRowRenderer(zeek, rowRenderers);
-    const row = rowRenderer.renderRow({
+    const row = rowRenderer?.renderRow({
       browserFields: mockBrowserFields,
       data: zeek,
       timelineId: 'test',
@@ -129,7 +129,7 @@ describe('get_column_renderer', () => {
   test('should render a system row data if event.category is network_traffic', () => {
     system.event = { ...system.event, ...{ category: ['network_traffic'] } };
     const rowRenderer = getRowRenderer(system, rowRenderers);
-    const row = rowRenderer.renderRow({
+    const row = rowRenderer?.renderRow({
       browserFields: mockBrowserFields,
       data: system,
       timelineId: 'test',
@@ -147,7 +147,7 @@ describe('get_column_renderer', () => {
   test('should render a auditd row data if event.category is network_traffic', () => {
     auditd.event = { ...auditd.event, ...{ category: ['network_traffic'] } };
     const rowRenderer = getRowRenderer(auditd, rowRenderers);
-    const row = rowRenderer.renderRow({
+    const row = rowRenderer?.renderRow({
       browserFields: mockBrowserFields,
       data: auditd,
       timelineId: 'test',
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_row_renderer.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_row_renderer.ts
index 779d54216e26c8..1662cf4037cac3 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_row_renderer.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_row_renderer.ts
@@ -7,15 +7,5 @@
 import { Ecs } from '../../../../../../common/ecs';
 import { RowRenderer } from './row_renderer';
 
-const unhandledRowRenderer = (): never => {
-  throw new Error('Unhandled Row Renderer');
-};
-
-export const getRowRenderer = (ecs: Ecs, rowRenderers: RowRenderer[]): RowRenderer => {
-  const renderer = rowRenderers.find((rowRenderer) => rowRenderer.isInstance(ecs));
-  if (renderer == null) {
-    return unhandledRowRenderer();
-  } else {
-    return renderer;
-  }
-};
+export const getRowRenderer = (ecs: Ecs, rowRenderers: RowRenderer[]): RowRenderer | null =>
+  rowRenderers.find((rowRenderer) => rowRenderer.isInstance(ecs)) ?? null;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/index.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/index.ts
index 8e95fc3ad238a6..f4498b10e4c8d8 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/index.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/index.ts
@@ -9,7 +9,6 @@ import { ColumnRenderer } from './column_renderer';
 import { emptyColumnRenderer } from './empty_column_renderer';
 import { netflowRowRenderer } from './netflow/netflow_row_renderer';
 import { plainColumnRenderer } from './plain_column_renderer';
-import { plainRowRenderer } from './plain_row_renderer';
 import { RowRenderer } from './row_renderer';
 import { suricataRowRenderer } from './suricata/suricata_row_renderer';
 import { unknownColumnRenderer } from './unknown_column_renderer';
@@ -29,7 +28,6 @@ export const rowRenderers: RowRenderer[] = [
   suricataRowRenderer,
   zeekRowRenderer,
   netflowRowRenderer,
-  plainRowRenderer, // falls-back to the plain row renderer
 ];
 
 export const columnRenderers: ColumnRenderer[] = [
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.tsx
index 45c190c42605c2..a0d2ca57f90b36 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.tsx
@@ -23,7 +23,7 @@ import { EventDetailsWidthProvider } from '../../../../common/components/events_
 import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
 import { timelineDefaults } from '../../../store/timeline/defaults';
 import { useSourcererScope } from '../../../../common/containers/sourcerer';
-import { TimelineModel } from '../../../store/timeline/model';
+import { TimelineModel, TimelineTabs } from '../../../store/timeline/model';
 import { EventDetails } from '../event_details';
 import { ToggleExpandedEvent } from '../../../store/timeline/actions';
 import { State } from '../../../../common/store';
@@ -183,6 +183,7 @@ export const PinnedTabContentComponent: React.FC<Props> = ({
                 id={timelineId}
                 refetch={refetch}
                 sort={sort}
+                tabType={TimelineTabs.pinned}
                 totalPages={calculateTotalPages({
                   itemsCount: totalCount,
                   itemsPerPage,
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
index f6d6654d7fecee..c0840d58174b32 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
@@ -330,6 +330,7 @@ export const QueryTabContentComponent: React.FC<Props> = ({
                 id={timelineId}
                 refetch={refetch}
                 sort={sort}
+                tabType={TimelineTabs.query}
                 totalPages={calculateTotalPages({
                   itemsCount: totalCount,
                   itemsPerPage,
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
index 7f0809cf9b9d8f..c97571fbbd6f35 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
@@ -199,7 +199,7 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({ timelineId, graphEve
           disabled={!graphEventId}
           key={TimelineTabs.graph}
         >
-          {i18n.GRAPH_TAB}
+          {i18n.ANALYZER_TAB}
         </EuiTab>
         <StyledEuiTab
           data-test-subj={`timelineTabs-${TimelineTabs.notes}`}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/translations.ts
index 0c1942f8d9cda4..59c73177c66809 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/translations.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/translations.ts
@@ -13,10 +13,10 @@ export const QUERY_TAB = i18n.translate(
   }
 );
 
-export const GRAPH_TAB = i18n.translate(
-  'xpack.securitySolution.timeline.tabs.graphTabTimelineTitle',
+export const ANALYZER_TAB = i18n.translate(
+  'xpack.securitySolution.timeline.tabs.analyserTabTimelineTitle',
   {
-    defaultMessage: 'Graph',
+    defaultMessage: 'Analyzer',
   }
 );
 

From c129f93083197876a8dd2000a715e23205a4efb5 Mon Sep 17 00:00:00 2001
From: Matthew Kime <matt@mattki.me>
Date: Sat, 19 Dec 2020 21:56:06 -0600
Subject: [PATCH 48/75] [index patterns] Fleep app - Keep saved object field
 list until field caps provides fields (#85370)

---
 ...s-data-public.indexpattern.allownoindex.md | 13 +++++
 ...ublic.indexpattern.getassavedobjectbody.md |  2 +
 ...plugin-plugins-data-public.indexpattern.md |  1 +
 ...lic.indexpatternattributes.allownoindex.md | 13 +++++
 ...gins-data-public.indexpatternattributes.md |  1 +
 ...ta-public.indexpatternspec.allownoindex.md | 11 ++++
 ...in-plugins-data-public.indexpatternspec.md |  1 +
 ...s-data-server.indexpattern.allownoindex.md | 13 +++++
 ...erver.indexpattern.getassavedobjectbody.md |  2 +
 ...plugin-plugins-data-server.indexpattern.md |  1 +
 ...ver.indexpatternattributes.allownoindex.md | 13 +++++
 ...gins-data-server.indexpatternattributes.md |  1 +
 .../__snapshots__/index_pattern.test.ts.snap  |  1 +
 .../__snapshots__/index_patterns.test.ts.snap |  1 +
 .../index_patterns/index_pattern.ts           |  7 +++
 .../index_patterns/index_patterns.test.ts     | 15 ++++++
 .../index_patterns/index_patterns.ts          | 19 ++++++-
 .../data/common/index_patterns/types.ts       |  6 +++
 .../index_patterns_api_client.ts              |  5 +-
 src/plugins/data/public/public.api.md         |  7 ++-
 .../index_patterns_api_client.ts              | 10 +++-
 .../data/server/index_patterns/routes.ts      | 12 ++++-
 .../routes/create_index_pattern.ts            |  1 +
 .../routes/update_index_pattern.ts            |  1 +
 .../index_pattern_migrations.test.ts          | 51 +++++++++++++++++++
 .../saved_objects/index_pattern_migrations.ts |  9 ++++
 src/plugins/data/server/server.api.md         |  5 +-
 x-pack/plugins/fleet/common/constants/epm.ts  |  1 -
 .../plugins/fleet/server/constants/index.ts   |  1 -
 .../__snapshots__/install.test.ts.snap        |  3 +-
 .../epm/kibana/index_pattern/install.ts       | 37 ++------------
 x-pack/plugins/fleet/server/services/setup.ts |  2 -
 .../test/fleet_api_integration/apis/index.js  |  2 -
 .../test/fleet_api_integration/apis/setup.ts  | 32 ------------
 .../apps/endpoint/resolver.ts                 | 28 +++++++---
 .../apis/resolver/events.ts                   |  2 +-
 .../apis/resolver/tree.ts                     |  2 +-
 37 files changed, 241 insertions(+), 91 deletions(-)
 create mode 100644 docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpattern.allownoindex.md
 create mode 100644 docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpatternattributes.allownoindex.md
 create mode 100644 docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpatternspec.allownoindex.md
 create mode 100644 docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpattern.allownoindex.md
 create mode 100644 docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpatternattributes.allownoindex.md
 delete mode 100644 x-pack/test/fleet_api_integration/apis/setup.ts

diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpattern.allownoindex.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpattern.allownoindex.md
new file mode 100644
index 00000000000000..5e397d11b0a89e
--- /dev/null
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpattern.allownoindex.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [IndexPattern](./kibana-plugin-plugins-data-public.indexpattern.md) &gt; [allowNoIndex](./kibana-plugin-plugins-data-public.indexpattern.allownoindex.md)
+
+## IndexPattern.allowNoIndex property
+
+prevents errors when index pattern exists before indices
+
+<b>Signature:</b>
+
+```typescript
+readonly allowNoIndex: boolean;
+```
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpattern.getassavedobjectbody.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpattern.getassavedobjectbody.md
index a370341000960e..b318427012c0ac 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpattern.getassavedobjectbody.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpattern.getassavedobjectbody.md
@@ -19,6 +19,7 @@ getAsSavedObjectBody(): {
         fieldFormatMap: string | undefined;
         type: string | undefined;
         typeMeta: string | undefined;
+        allowNoIndex: true | undefined;
     };
 ```
 <b>Returns:</b>
@@ -33,5 +34,6 @@ getAsSavedObjectBody(): {
         fieldFormatMap: string | undefined;
         type: string | undefined;
         typeMeta: string | undefined;
+        allowNoIndex: true | undefined;
     }`
 
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpattern.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpattern.md
index 179148265e68d3..b640ef1b89606b 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpattern.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpattern.md
@@ -20,6 +20,7 @@ export declare class IndexPattern implements IIndexPattern
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
+|  [allowNoIndex](./kibana-plugin-plugins-data-public.indexpattern.allownoindex.md) |  | <code>boolean</code> | prevents errors when index pattern exists before indices |
 |  [deleteFieldFormat](./kibana-plugin-plugins-data-public.indexpattern.deletefieldformat.md) |  | <code>(fieldName: string) =&gt; void</code> |  |
 |  [fieldAttrs](./kibana-plugin-plugins-data-public.indexpattern.fieldattrs.md) |  | <code>FieldAttrs</code> |  |
 |  [fieldFormatMap](./kibana-plugin-plugins-data-public.indexpattern.fieldformatmap.md) |  | <code>Record&lt;string, any&gt;</code> |  |
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpatternattributes.allownoindex.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpatternattributes.allownoindex.md
new file mode 100644
index 00000000000000..9438f38194493d
--- /dev/null
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpatternattributes.allownoindex.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [IndexPatternAttributes](./kibana-plugin-plugins-data-public.indexpatternattributes.md) &gt; [allowNoIndex](./kibana-plugin-plugins-data-public.indexpatternattributes.allownoindex.md)
+
+## IndexPatternAttributes.allowNoIndex property
+
+prevents errors when index pattern exists before indices
+
+<b>Signature:</b>
+
+```typescript
+allowNoIndex?: boolean;
+```
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpatternattributes.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpatternattributes.md
index c5ea38278e8208..1bbede5658942a 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpatternattributes.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpatternattributes.md
@@ -14,6 +14,7 @@ export interface IndexPatternAttributes
 
 |  Property | Type | Description |
 |  --- | --- | --- |
+|  [allowNoIndex](./kibana-plugin-plugins-data-public.indexpatternattributes.allownoindex.md) | <code>boolean</code> | prevents errors when index pattern exists before indices |
 |  [fieldAttrs](./kibana-plugin-plugins-data-public.indexpatternattributes.fieldattrs.md) | <code>string</code> |  |
 |  [fieldFormatMap](./kibana-plugin-plugins-data-public.indexpatternattributes.fieldformatmap.md) | <code>string</code> |  |
 |  [fields](./kibana-plugin-plugins-data-public.indexpatternattributes.fields.md) | <code>string</code> |  |
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpatternspec.allownoindex.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpatternspec.allownoindex.md
new file mode 100644
index 00000000000000..50adef8268694b
--- /dev/null
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpatternspec.allownoindex.md
@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [IndexPatternSpec](./kibana-plugin-plugins-data-public.indexpatternspec.md) &gt; [allowNoIndex](./kibana-plugin-plugins-data-public.indexpatternspec.allownoindex.md)
+
+## IndexPatternSpec.allowNoIndex property
+
+<b>Signature:</b>
+
+```typescript
+allowNoIndex?: boolean;
+```
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpatternspec.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpatternspec.md
index 06917fcac1b4dc..9357ad7d5077e9 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpatternspec.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.indexpatternspec.md
@@ -14,6 +14,7 @@ export interface IndexPatternSpec
 
 |  Property | Type | Description |
 |  --- | --- | --- |
+|  [allowNoIndex](./kibana-plugin-plugins-data-public.indexpatternspec.allownoindex.md) | <code>boolean</code> |  |
 |  [fieldAttrs](./kibana-plugin-plugins-data-public.indexpatternspec.fieldattrs.md) | <code>FieldAttrs</code> |  |
 |  [fieldFormats](./kibana-plugin-plugins-data-public.indexpatternspec.fieldformats.md) | <code>Record&lt;string, SerializedFieldFormat&gt;</code> |  |
 |  [fields](./kibana-plugin-plugins-data-public.indexpatternspec.fields.md) | <code>IndexPatternFieldMap</code> |  |
diff --git a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpattern.allownoindex.md b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpattern.allownoindex.md
new file mode 100644
index 00000000000000..fe7bec70196c85
--- /dev/null
+++ b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpattern.allownoindex.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-data-server](./kibana-plugin-plugins-data-server.md) &gt; [IndexPattern](./kibana-plugin-plugins-data-server.indexpattern.md) &gt; [allowNoIndex](./kibana-plugin-plugins-data-server.indexpattern.allownoindex.md)
+
+## IndexPattern.allowNoIndex property
+
+prevents errors when index pattern exists before indices
+
+<b>Signature:</b>
+
+```typescript
+readonly allowNoIndex: boolean;
+```
diff --git a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpattern.getassavedobjectbody.md b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpattern.getassavedobjectbody.md
index 274a475872b0bc..7d70af4b535fea 100644
--- a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpattern.getassavedobjectbody.md
+++ b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpattern.getassavedobjectbody.md
@@ -19,6 +19,7 @@ getAsSavedObjectBody(): {
         fieldFormatMap: string | undefined;
         type: string | undefined;
         typeMeta: string | undefined;
+        allowNoIndex: true | undefined;
     };
 ```
 <b>Returns:</b>
@@ -33,5 +34,6 @@ getAsSavedObjectBody(): {
         fieldFormatMap: string | undefined;
         type: string | undefined;
         typeMeta: string | undefined;
+        allowNoIndex: true | undefined;
     }`
 
diff --git a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpattern.md b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpattern.md
index b2cb217fecaa20..54f020e57cf4a6 100644
--- a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpattern.md
+++ b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpattern.md
@@ -20,6 +20,7 @@ export declare class IndexPattern implements IIndexPattern
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
+|  [allowNoIndex](./kibana-plugin-plugins-data-server.indexpattern.allownoindex.md) |  | <code>boolean</code> | prevents errors when index pattern exists before indices |
 |  [deleteFieldFormat](./kibana-plugin-plugins-data-server.indexpattern.deletefieldformat.md) |  | <code>(fieldName: string) =&gt; void</code> |  |
 |  [fieldAttrs](./kibana-plugin-plugins-data-server.indexpattern.fieldattrs.md) |  | <code>FieldAttrs</code> |  |
 |  [fieldFormatMap](./kibana-plugin-plugins-data-server.indexpattern.fieldformatmap.md) |  | <code>Record&lt;string, any&gt;</code> |  |
diff --git a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpatternattributes.allownoindex.md b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpatternattributes.allownoindex.md
new file mode 100644
index 00000000000000..1255a6fe9f0cae
--- /dev/null
+++ b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpatternattributes.allownoindex.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-data-server](./kibana-plugin-plugins-data-server.md) &gt; [IndexPatternAttributes](./kibana-plugin-plugins-data-server.indexpatternattributes.md) &gt; [allowNoIndex](./kibana-plugin-plugins-data-server.indexpatternattributes.allownoindex.md)
+
+## IndexPatternAttributes.allowNoIndex property
+
+prevents errors when index pattern exists before indices
+
+<b>Signature:</b>
+
+```typescript
+allowNoIndex?: boolean;
+```
diff --git a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpatternattributes.md b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpatternattributes.md
index 6559b4d7110bea..b9b9f955c7ab59 100644
--- a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpatternattributes.md
+++ b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.indexpatternattributes.md
@@ -14,6 +14,7 @@ export interface IndexPatternAttributes
 
 |  Property | Type | Description |
 |  --- | --- | --- |
+|  [allowNoIndex](./kibana-plugin-plugins-data-server.indexpatternattributes.allownoindex.md) | <code>boolean</code> | prevents errors when index pattern exists before indices |
 |  [fieldAttrs](./kibana-plugin-plugins-data-server.indexpatternattributes.fieldattrs.md) | <code>string</code> |  |
 |  [fieldFormatMap](./kibana-plugin-plugins-data-server.indexpatternattributes.fieldformatmap.md) | <code>string</code> |  |
 |  [fields](./kibana-plugin-plugins-data-server.indexpatternattributes.fields.md) | <code>string</code> |  |
diff --git a/src/plugins/data/common/index_patterns/index_patterns/__snapshots__/index_pattern.test.ts.snap b/src/plugins/data/common/index_patterns/index_patterns/__snapshots__/index_pattern.test.ts.snap
index 19ec286307a09d..76de2b2662bb02 100644
--- a/src/plugins/data/common/index_patterns/index_patterns/__snapshots__/index_pattern.test.ts.snap
+++ b/src/plugins/data/common/index_patterns/index_patterns/__snapshots__/index_pattern.test.ts.snap
@@ -2,6 +2,7 @@
 
 exports[`IndexPattern toSpec should match snapshot 1`] = `
 Object {
+  "allowNoIndex": false,
   "fieldAttrs": Object {},
   "fieldFormats": Object {},
   "fields": Object {
diff --git a/src/plugins/data/common/index_patterns/index_patterns/__snapshots__/index_patterns.test.ts.snap b/src/plugins/data/common/index_patterns/index_patterns/__snapshots__/index_patterns.test.ts.snap
index c020e7595c5657..bad74430b89668 100644
--- a/src/plugins/data/common/index_patterns/index_patterns/__snapshots__/index_patterns.test.ts.snap
+++ b/src/plugins/data/common/index_patterns/index_patterns/__snapshots__/index_patterns.test.ts.snap
@@ -2,6 +2,7 @@
 
 exports[`IndexPatterns savedObjectToSpec 1`] = `
 Object {
+  "allowNoIndex": undefined,
   "fieldAttrs": Object {},
   "fieldFormats": Object {
     "field": Object {},
diff --git a/src/plugins/data/common/index_patterns/index_patterns/index_pattern.ts b/src/plugins/data/common/index_patterns/index_patterns/index_pattern.ts
index 4c89cbeb446a07..590ff872f3bf93 100644
--- a/src/plugins/data/common/index_patterns/index_patterns/index_pattern.ts
+++ b/src/plugins/data/common/index_patterns/index_patterns/index_pattern.ts
@@ -74,6 +74,10 @@ export class IndexPattern implements IIndexPattern {
   private fieldFormats: FieldFormatsStartCommon;
   // make private once manual field refresh is removed
   public fieldAttrs: FieldAttrs;
+  /**
+   * prevents errors when index pattern exists before indices
+   */
+  public readonly allowNoIndex: boolean = false;
 
   constructor({
     spec = {},
@@ -110,6 +114,7 @@ export class IndexPattern implements IIndexPattern {
     this.typeMeta = spec.typeMeta;
     this.fieldAttrs = spec.fieldAttrs || {};
     this.intervalName = spec.intervalName;
+    this.allowNoIndex = spec.allowNoIndex || false;
   }
 
   /**
@@ -204,6 +209,7 @@ export class IndexPattern implements IIndexPattern {
       fieldFormats: this.fieldFormatMap,
       fieldAttrs: this.fieldAttrs,
       intervalName: this.intervalName,
+      allowNoIndex: this.allowNoIndex,
     };
   }
 
@@ -309,6 +315,7 @@ export class IndexPattern implements IIndexPattern {
       fieldFormatMap,
       type: this.type,
       typeMeta: this.typeMeta ? JSON.stringify(this.typeMeta) : undefined,
+      allowNoIndex: this.allowNoIndex ? this.allowNoIndex : undefined,
     };
   }
 
diff --git a/src/plugins/data/common/index_patterns/index_patterns/index_patterns.test.ts b/src/plugins/data/common/index_patterns/index_patterns/index_patterns.test.ts
index 2a203b57d201b2..3d32742c168ad7 100644
--- a/src/plugins/data/common/index_patterns/index_patterns/index_patterns.test.ts
+++ b/src/plugins/data/common/index_patterns/index_patterns/index_patterns.test.ts
@@ -114,6 +114,21 @@ describe('IndexPatterns', () => {
     SOClientGetDelay = 0;
   });
 
+  test('allowNoIndex flag preserves existing fields when index is missing', async () => {
+    const id = '2';
+    setDocsourcePayload(id, {
+      id: 'foo',
+      version: 'foo',
+      attributes: {
+        title: 'something',
+        allowNoIndex: true,
+        fields: '[{"name":"field"}]',
+      },
+    });
+
+    expect((await indexPatterns.get(id)).fields.length).toBe(1);
+  });
+
   test('savedObjectCache pre-fetches only title', async () => {
     expect(await indexPatterns.getIds()).toEqual(['id']);
     expect(savedObjectsClient.find).toHaveBeenCalledWith({
diff --git a/src/plugins/data/common/index_patterns/index_patterns/index_patterns.ts b/src/plugins/data/common/index_patterns/index_patterns/index_patterns.ts
index 0235f748ec1e04..3333dba36fe69c 100644
--- a/src/plugins/data/common/index_patterns/index_patterns/index_patterns.ts
+++ b/src/plugins/data/common/index_patterns/index_patterns/index_patterns.ts
@@ -222,6 +222,7 @@ export class IndexPatternsService {
       metaFields,
       type: options.type,
       rollupIndex: options.rollupIndex,
+      allowNoIndex: options.allowNoIndex,
     });
   };
 
@@ -281,10 +282,21 @@ export class IndexPatternsService {
     options: GetFieldsOptions,
     fieldAttrs: FieldAttrs = {}
   ) => {
-    const scriptedFields = Object.values(fields).filter((field) => field.scripted);
+    const fieldsAsArr = Object.values(fields);
+    const scriptedFields = fieldsAsArr.filter((field) => field.scripted);
     try {
+      let updatedFieldList: FieldSpec[];
       const newFields = (await this.getFieldsForWildcard(options)) as FieldSpec[];
-      return this.fieldArrayToMap([...newFields, ...scriptedFields], fieldAttrs);
+
+      // If allowNoIndex, only update field list if field caps finds fields. To support
+      // beats creating index pattern and dashboard before docs
+      if (!options.allowNoIndex || (newFields && newFields.length > 5)) {
+        updatedFieldList = [...newFields, ...scriptedFields];
+      } else {
+        updatedFieldList = fieldsAsArr;
+      }
+
+      return this.fieldArrayToMap(updatedFieldList, fieldAttrs);
     } catch (err) {
       if (err instanceof IndexPatternMissingIndices) {
         this.onNotification({ title: (err as any).message, color: 'danger', iconType: 'alert' });
@@ -334,6 +346,7 @@ export class IndexPatternsService {
         typeMeta,
         type,
         fieldAttrs,
+        allowNoIndex,
       },
     } = savedObject;
 
@@ -355,6 +368,7 @@ export class IndexPatternsService {
       type,
       fieldFormats: parsedFieldFormatMap,
       fieldAttrs: parsedFieldAttrs,
+      allowNoIndex,
     };
   };
 
@@ -384,6 +398,7 @@ export class IndexPatternsService {
           metaFields: await this.config.get(UI_SETTINGS.META_FIELDS),
           type,
           rollupIndex: typeMeta?.params?.rollup_index,
+          allowNoIndex: spec.allowNoIndex,
         },
         spec.fieldAttrs
       );
diff --git a/src/plugins/data/common/index_patterns/types.ts b/src/plugins/data/common/index_patterns/types.ts
index 8d9b29175162e8..12496b07d34820 100644
--- a/src/plugins/data/common/index_patterns/types.ts
+++ b/src/plugins/data/common/index_patterns/types.ts
@@ -49,6 +49,10 @@ export interface IndexPatternAttributes {
   sourceFilters?: string;
   fieldFormatMap?: string;
   fieldAttrs?: string;
+  /**
+   * prevents errors when index pattern exists before indices
+   */
+  allowNoIndex?: boolean;
 }
 
 export interface FieldAttrs {
@@ -101,6 +105,7 @@ export interface GetFieldsOptions {
   lookBack?: boolean;
   metaFields?: string[];
   rollupIndex?: string;
+  allowNoIndex?: boolean;
 }
 
 export interface GetFieldsOptionsTimePattern {
@@ -193,6 +198,7 @@ export interface IndexPatternSpec {
   type?: string;
   fieldFormats?: Record<string, SerializedFieldFormat>;
   fieldAttrs?: FieldAttrs;
+  allowNoIndex?: boolean;
 }
 
 export interface SourceFilter {
diff --git a/src/plugins/data/public/index_patterns/index_patterns/index_patterns_api_client.ts b/src/plugins/data/public/index_patterns/index_patterns/index_patterns_api_client.ts
index ca0f35d6612b2e..36a193a4f6f94b 100644
--- a/src/plugins/data/public/index_patterns/index_patterns/index_patterns_api_client.ts
+++ b/src/plugins/data/public/index_patterns/index_patterns/index_patterns_api_client.ts
@@ -64,12 +64,13 @@ export class IndexPatternsApiClient implements IIndexPatternsApiClient {
     }).then((resp: any) => resp.fields);
   }
 
-  getFieldsForWildcard({ pattern, metaFields, type, rollupIndex }: GetFieldsOptions) {
+  getFieldsForWildcard({ pattern, metaFields, type, rollupIndex, allowNoIndex }: GetFieldsOptions) {
     return this._request(this._getUrl(['_fields_for_wildcard']), {
       pattern,
       meta_fields: metaFields,
       type,
       rollup_index: rollupIndex,
-    }).then((resp: any) => resp.fields);
+      allow_no_index: allowNoIndex,
+    }).then((resp: any) => resp.fields || []);
   }
 }
diff --git a/src/plugins/data/public/public.api.md b/src/plugins/data/public/public.api.md
index 120540ddb92ecf..3493844a71ac15 100644
--- a/src/plugins/data/public/public.api.md
+++ b/src/plugins/data/public/public.api.md
@@ -1256,6 +1256,7 @@ export class IndexPattern implements IIndexPattern {
     // Warning: (ae-forgotten-export) The symbol "IndexPatternDeps" needs to be exported by the entry point index.d.ts
     constructor({ spec, fieldFormats, shortDotsEnable, metaFields, }: IndexPatternDeps);
     addScriptedField(name: string, script: string, fieldType?: string): Promise<void>;
+    readonly allowNoIndex: boolean;
     // (undocumented)
     readonly deleteFieldFormat: (fieldName: string) => void;
     // Warning: (ae-forgotten-export) The symbol "FieldAttrs" needs to be exported by the entry point index.d.ts
@@ -1296,6 +1297,7 @@ export class IndexPattern implements IIndexPattern {
         fieldFormatMap: string | undefined;
         type: string | undefined;
         typeMeta: string | undefined;
+        allowNoIndex: true | undefined;
     };
     // (undocumented)
     getComputedFields(): {
@@ -1388,6 +1390,7 @@ export type IndexPatternAggRestrictions = Record<string, {
 //
 // @public (undocumented)
 export interface IndexPatternAttributes {
+    allowNoIndex?: boolean;
     // (undocumented)
     fieldAttrs?: string;
     // (undocumented)
@@ -1518,6 +1521,8 @@ export type IndexPatternSelectProps = Required<Omit<EuiComboBoxProps<any>, 'isLo
 //
 // @public (undocumented)
 export interface IndexPatternSpec {
+    // (undocumented)
+    allowNoIndex?: boolean;
     // (undocumented)
     fieldAttrs?: FieldAttrs;
     // (undocumented)
@@ -2564,7 +2569,7 @@ export const UI_SETTINGS: {
 // src/plugins/data/common/es_query/filters/phrase_filter.ts:33:3 - (ae-forgotten-export) The symbol "PhraseFilterMeta" needs to be exported by the entry point index.d.ts
 // src/plugins/data/common/es_query/filters/phrases_filter.ts:31:3 - (ae-forgotten-export) The symbol "PhrasesFilterMeta" needs to be exported by the entry point index.d.ts
 // src/plugins/data/common/index_patterns/index_patterns/index_pattern.ts:64:5 - (ae-forgotten-export) The symbol "FormatFieldFn" needs to be exported by the entry point index.d.ts
-// src/plugins/data/common/index_patterns/index_patterns/index_pattern.ts:128:7 - (ae-forgotten-export) The symbol "FieldAttrSet" needs to be exported by the entry point index.d.ts
+// src/plugins/data/common/index_patterns/index_patterns/index_pattern.ts:133:7 - (ae-forgotten-export) The symbol "FieldAttrSet" needs to be exported by the entry point index.d.ts
 // src/plugins/data/common/search/aggs/types.ts:150:51 - (ae-forgotten-export) The symbol "AggTypesRegistryStart" needs to be exported by the entry point index.d.ts
 // src/plugins/data/common/search/search_source/search_source.ts:197:7 - (ae-forgotten-export) The symbol "SearchFieldValue" needs to be exported by the entry point index.d.ts
 // src/plugins/data/public/field_formats/field_formats_service.ts:67:3 - (ae-forgotten-export) The symbol "FormatFactory" needs to be exported by the entry point index.d.ts
diff --git a/src/plugins/data/server/index_patterns/index_patterns_api_client.ts b/src/plugins/data/server/index_patterns/index_patterns_api_client.ts
index 21a3bf6e73e611..9023044184df31 100644
--- a/src/plugins/data/server/index_patterns/index_patterns_api_client.ts
+++ b/src/plugins/data/server/index_patterns/index_patterns_api_client.ts
@@ -30,8 +30,14 @@ export class IndexPatternsApiServer implements IIndexPatternsApiClient {
   constructor(elasticsearchClient: ElasticsearchClient) {
     this.esClient = elasticsearchClient;
   }
-  async getFieldsForWildcard({ pattern, metaFields, type, rollupIndex }: GetFieldsOptions) {
-    const indexPatterns = new IndexPatternsFetcher(this.esClient);
+  async getFieldsForWildcard({
+    pattern,
+    metaFields,
+    type,
+    rollupIndex,
+    allowNoIndex,
+  }: GetFieldsOptions) {
+    const indexPatterns = new IndexPatternsFetcher(this.esClient, allowNoIndex);
     return await indexPatterns.getFieldsForWildcard({
       pattern,
       metaFields,
diff --git a/src/plugins/data/server/index_patterns/routes.ts b/src/plugins/data/server/index_patterns/routes.ts
index e9dbc2e972c688..f0b51e456337f5 100644
--- a/src/plugins/data/server/index_patterns/routes.ts
+++ b/src/plugins/data/server/index_patterns/routes.ts
@@ -75,13 +75,20 @@ export function registerRoutes(
           }),
           type: schema.maybe(schema.string()),
           rollup_index: schema.maybe(schema.string()),
+          allow_no_index: schema.maybe(schema.boolean()),
         }),
       },
     },
     async (context, request, response) => {
       const { asCurrentUser } = context.core.elasticsearch.client;
       const indexPatterns = new IndexPatternsFetcher(asCurrentUser);
-      const { pattern, meta_fields: metaFields, type, rollup_index: rollupIndex } = request.query;
+      const {
+        pattern,
+        meta_fields: metaFields,
+        type,
+        rollup_index: rollupIndex,
+        allow_no_index: allowNoIndex,
+      } = request.query;
 
       let parsedFields: string[] = [];
       try {
@@ -96,6 +103,9 @@ export function registerRoutes(
           metaFields: parsedFields,
           type,
           rollupIndex,
+          fieldCapsOptions: {
+            allow_no_indices: allowNoIndex || false,
+          },
         });
 
         return response.ok({
diff --git a/src/plugins/data/server/index_patterns/routes/create_index_pattern.ts b/src/plugins/data/server/index_patterns/routes/create_index_pattern.ts
index 57a745b19748da..1163fd2dc9953e 100644
--- a/src/plugins/data/server/index_patterns/routes/create_index_pattern.ts
+++ b/src/plugins/data/server/index_patterns/routes/create_index_pattern.ts
@@ -50,6 +50,7 @@ const indexPatternSpecSchema = schema.object({
       })
     )
   ),
+  allowNoIndex: schema.maybe(schema.boolean()),
 });
 
 export const registerCreateIndexPatternRoute = (
diff --git a/src/plugins/data/server/index_patterns/routes/update_index_pattern.ts b/src/plugins/data/server/index_patterns/routes/update_index_pattern.ts
index 10567544af6ea2..8bd59e47730fd4 100644
--- a/src/plugins/data/server/index_patterns/routes/update_index_pattern.ts
+++ b/src/plugins/data/server/index_patterns/routes/update_index_pattern.ts
@@ -38,6 +38,7 @@ const indexPatternUpdateSchema = schema.object({
   ),
   fieldFormats: schema.maybe(schema.recordOf(schema.string(), serializedFieldFormatSchema)),
   fields: schema.maybe(schema.recordOf(schema.string(), fieldSpecSchema)),
+  allowNoIndex: schema.maybe(schema.boolean()),
 });
 
 export const registerUpdateIndexPatternRoute = (
diff --git a/src/plugins/data/server/saved_objects/index_pattern_migrations.test.ts b/src/plugins/data/server/saved_objects/index_pattern_migrations.test.ts
index b1410e24986676..3b223e6fdb9b21 100644
--- a/src/plugins/data/server/saved_objects/index_pattern_migrations.test.ts
+++ b/src/plugins/data/server/saved_objects/index_pattern_migrations.test.ts
@@ -94,4 +94,55 @@ Object {
       expect(migrationFn(input, savedObjectMigrationContext)).toEqual(expected);
     });
   });
+
+  describe('7.11.0', () => {
+    const migrationFn = indexPatternSavedObjectTypeMigrations['7.11.0'];
+
+    test('should set allowNoIndex', () => {
+      const input = {
+        type: 'index-pattern',
+        id: 'logs-*',
+        attributes: {},
+      };
+      const expected = {
+        type: 'index-pattern',
+        id: 'logs-*',
+        attributes: {
+          allowNoIndex: true,
+        },
+      };
+
+      expect(migrationFn(input, savedObjectMigrationContext)).toEqual(expected);
+
+      const input2 = {
+        type: 'index-pattern',
+        id: 'metrics-*',
+        attributes: {},
+      };
+      const expected2 = {
+        type: 'index-pattern',
+        id: 'metrics-*',
+        attributes: {
+          allowNoIndex: true,
+        },
+      };
+
+      expect(migrationFn(input2, savedObjectMigrationContext)).toEqual(expected2);
+
+      const input3 = {
+        type: 'index-pattern',
+        id: 'xxx',
+        attributes: {},
+      };
+      const expected3 = {
+        type: 'index-pattern',
+        id: 'xxx',
+        attributes: {
+          allowNoIndex: undefined,
+        },
+      };
+
+      expect(migrationFn(input3, savedObjectMigrationContext)).toEqual(expected3);
+    });
+  });
 });
diff --git a/src/plugins/data/server/saved_objects/index_pattern_migrations.ts b/src/plugins/data/server/saved_objects/index_pattern_migrations.ts
index 768041a376ad1d..4650aeefba0565 100644
--- a/src/plugins/data/server/saved_objects/index_pattern_migrations.ts
+++ b/src/plugins/data/server/saved_objects/index_pattern_migrations.ts
@@ -54,7 +54,16 @@ const migrateSubTypeAndParentFieldProperties: SavedObjectMigrationFn<any, any> =
   };
 };
 
+const addAllowNoIndex: SavedObjectMigrationFn<any, any> = (doc) => ({
+  ...doc,
+  attributes: {
+    ...doc.attributes,
+    allowNoIndex: doc.id === 'logs-*' || doc.id === 'metrics-*' || undefined,
+  },
+});
+
 export const indexPatternSavedObjectTypeMigrations = {
   '6.5.0': flow(migrateAttributeTypeAndAttributeTypeMeta),
   '7.6.0': flow(migrateSubTypeAndParentFieldProperties),
+  '7.11.0': flow(addAllowNoIndex),
 };
diff --git a/src/plugins/data/server/server.api.md b/src/plugins/data/server/server.api.md
index 60d5e167921cc7..cd3527d5ad7ab2 100644
--- a/src/plugins/data/server/server.api.md
+++ b/src/plugins/data/server/server.api.md
@@ -689,6 +689,7 @@ export class IndexPattern implements IIndexPattern {
     // Warning: (ae-forgotten-export) The symbol "IndexPatternDeps" needs to be exported by the entry point index.d.ts
     constructor({ spec, fieldFormats, shortDotsEnable, metaFields, }: IndexPatternDeps);
     addScriptedField(name: string, script: string, fieldType?: string): Promise<void>;
+    readonly allowNoIndex: boolean;
     // (undocumented)
     readonly deleteFieldFormat: (fieldName: string) => void;
     // Warning: (ae-forgotten-export) The symbol "FieldAttrs" needs to be exported by the entry point index.d.ts
@@ -731,6 +732,7 @@ export class IndexPattern implements IIndexPattern {
         fieldFormatMap: string | undefined;
         type: string | undefined;
         typeMeta: string | undefined;
+        allowNoIndex: true | undefined;
     };
     // (undocumented)
     getComputedFields(): {
@@ -819,6 +821,7 @@ export class IndexPattern implements IIndexPattern {
 //
 // @public (undocumented)
 export interface IndexPatternAttributes {
+    allowNoIndex?: boolean;
     // (undocumented)
     fieldAttrs?: string;
     // (undocumented)
@@ -1388,7 +1391,7 @@ export function usageProvider(core: CoreSetup_2): SearchUsage;
 // src/plugins/data/common/es_query/filters/meta_filter.ts:54:3 - (ae-forgotten-export) The symbol "FilterMeta" needs to be exported by the entry point index.d.ts
 // src/plugins/data/common/index_patterns/index_patterns/index_pattern.ts:58:45 - (ae-forgotten-export) The symbol "IndexPatternFieldMap" needs to be exported by the entry point index.d.ts
 // src/plugins/data/common/index_patterns/index_patterns/index_pattern.ts:64:5 - (ae-forgotten-export) The symbol "FormatFieldFn" needs to be exported by the entry point index.d.ts
-// src/plugins/data/common/index_patterns/index_patterns/index_pattern.ts:128:7 - (ae-forgotten-export) The symbol "FieldAttrSet" needs to be exported by the entry point index.d.ts
+// src/plugins/data/common/index_patterns/index_patterns/index_pattern.ts:133:7 - (ae-forgotten-export) The symbol "FieldAttrSet" needs to be exported by the entry point index.d.ts
 // src/plugins/data/server/index.ts:40:23 - (ae-forgotten-export) The symbol "buildCustomFilter" needs to be exported by the entry point index.d.ts
 // src/plugins/data/server/index.ts:40:23 - (ae-forgotten-export) The symbol "buildFilter" needs to be exported by the entry point index.d.ts
 // src/plugins/data/server/index.ts:57:23 - (ae-forgotten-export) The symbol "datatableToCSV" needs to be exported by the entry point index.d.ts
diff --git a/x-pack/plugins/fleet/common/constants/epm.ts b/x-pack/plugins/fleet/common/constants/epm.ts
index 287b7ccdb88e04..b94c2cd12cd5f4 100644
--- a/x-pack/plugins/fleet/common/constants/epm.ts
+++ b/x-pack/plugins/fleet/common/constants/epm.ts
@@ -6,7 +6,6 @@
 
 export const PACKAGES_SAVED_OBJECT_TYPE = 'epm-packages';
 export const INDEX_PATTERN_SAVED_OBJECT_TYPE = 'index-pattern';
-export const INDEX_PATTERN_PLACEHOLDER_SUFFIX = '-index_pattern_placeholder';
 export const MAX_TIME_COMPLETE_INSTALL = 60000;
 
 export const requiredPackages = {
diff --git a/x-pack/plugins/fleet/server/constants/index.ts b/x-pack/plugins/fleet/server/constants/index.ts
index b1d7318ff51070..5d00b966342142 100644
--- a/x-pack/plugins/fleet/server/constants/index.ts
+++ b/x-pack/plugins/fleet/server/constants/index.ts
@@ -14,7 +14,6 @@ export {
   AGENT_POLICY_ROLLOUT_RATE_LIMIT_REQUEST_PER_INTERVAL,
   AGENT_POLICY_ROLLOUT_RATE_LIMIT_INTERVAL_MS,
   AGENT_UPDATE_ACTIONS_INTERVAL_MS,
-  INDEX_PATTERN_PLACEHOLDER_SUFFIX,
   MAX_TIME_COMPLETE_INSTALL,
   // Routes
   LIMITED_CONCURRENCY_ROUTE_TAG,
diff --git a/x-pack/plugins/fleet/server/services/epm/kibana/index_pattern/__snapshots__/install.test.ts.snap b/x-pack/plugins/fleet/server/services/epm/kibana/index_pattern/__snapshots__/install.test.ts.snap
index d8495840453f3d..862e82589b9bc9 100644
--- a/x-pack/plugins/fleet/server/services/epm/kibana/index_pattern/__snapshots__/install.test.ts.snap
+++ b/x-pack/plugins/fleet/server/services/epm/kibana/index_pattern/__snapshots__/install.test.ts.snap
@@ -41,7 +41,8 @@ exports[`creating index patterns from yaml fields createIndexPattern function cr
   "title": "logs-*",
   "timeFieldName": "@timestamp",
   "fields": "[{\\"name\\":\\"coredns.id\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"coredns.allParams\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"number\\"},{\\"name\\":\\"coredns.query.length\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"number\\"},{\\"name\\":\\"coredns.query.size\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"number\\"},{\\"name\\":\\"coredns.query.class\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"coredns.query.name\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"coredns.query.type\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"coredns.response.code\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"coredns.response.flags\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"coredns.response.size\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"number\\"},{\\"name\\":\\"coredns.dnssec_ok\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"boolean\\"},{\\"name\\":\\"@timestamp\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"date\\"},{\\"name\\":\\"labels\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"message\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":false,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"tags\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"agent.ephemeral_id\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"agent.id\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"agent.name\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"agent.type\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"agent.version\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"as.number\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"number\\"},{\\"name\\":\\"as.organization.name\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"nginx.access.remote_ip_list\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.body_sent.bytes\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.user_name\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.method\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.url\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.http_version\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.response_code\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.referrer\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.agent\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.user_agent.device\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.user_agent.name\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.user_agent.os\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.user_agent.os_name\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.user_agent.original\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.geoip.continent_name\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":false,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"nginx.access.geoip.country_iso_code\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.geoip.location\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.geoip.region_name\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.geoip.city_name\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"nginx.access.geoip.region_iso_code\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true},{\\"name\\":\\"source.geo.continent_name\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":false,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"country\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"country.keyword\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":true,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"},{\\"name\\":\\"country.text\\",\\"count\\":0,\\"scripted\\":false,\\"indexed\\":true,\\"analyzed\\":false,\\"searchable\\":true,\\"aggregatable\\":false,\\"doc_values\\":true,\\"readFromDocValues\\":true,\\"type\\":\\"string\\"}]",
-  "fieldFormatMap": "{\\"coredns.allParams\\":{\\"id\\":\\"bytes\\",\\"params\\":{\\"pattern\\":\\"patternValQueryWeight\\",\\"inputFormat\\":\\"inputFormatVal,\\",\\"outputFormat\\":\\"outputFormalVal,\\",\\"outputPrecision\\":\\"3,\\",\\"labelTemplate\\":\\"labelTemplateVal,\\",\\"urlTemplate\\":\\"urlTemplateVal,\\"}},\\"coredns.query.length\\":{\\"params\\":{\\"pattern\\":\\"patternValQueryLength\\"}},\\"coredns.query.size\\":{\\"id\\":\\"bytes\\",\\"params\\":{\\"pattern\\":\\"patternValQuerySize\\"}},\\"coredns.response.size\\":{\\"id\\":\\"bytes\\"}}"
+  "fieldFormatMap": "{\\"coredns.allParams\\":{\\"id\\":\\"bytes\\",\\"params\\":{\\"pattern\\":\\"patternValQueryWeight\\",\\"inputFormat\\":\\"inputFormatVal,\\",\\"outputFormat\\":\\"outputFormalVal,\\",\\"outputPrecision\\":\\"3,\\",\\"labelTemplate\\":\\"labelTemplateVal,\\",\\"urlTemplate\\":\\"urlTemplateVal,\\"}},\\"coredns.query.length\\":{\\"params\\":{\\"pattern\\":\\"patternValQueryLength\\"}},\\"coredns.query.size\\":{\\"id\\":\\"bytes\\",\\"params\\":{\\"pattern\\":\\"patternValQuerySize\\"}},\\"coredns.response.size\\":{\\"id\\":\\"bytes\\"}}",
+  "allowNoIndex": true
 }
 `;
 
diff --git a/x-pack/plugins/fleet/server/services/epm/kibana/index_pattern/install.ts b/x-pack/plugins/fleet/server/services/epm/kibana/index_pattern/install.ts
index bdb6744745c97a..d5077308a53016 100644
--- a/x-pack/plugins/fleet/server/services/epm/kibana/index_pattern/install.ts
+++ b/x-pack/plugins/fleet/server/services/epm/kibana/index_pattern/install.ts
@@ -5,15 +5,11 @@
  */
 
 import { SavedObjectsClientContract } from 'src/core/server';
-import {
-  INDEX_PATTERN_SAVED_OBJECT_TYPE,
-  INDEX_PATTERN_PLACEHOLDER_SUFFIX,
-} from '../../../../constants';
+import { INDEX_PATTERN_SAVED_OBJECT_TYPE } from '../../../../constants';
 import { loadFieldsFromYaml, Fields, Field } from '../../fields/field';
 import { dataTypes, installationStatuses } from '../../../../../common/constants';
 import { ArchivePackage, InstallSource, ValueOf } from '../../../../../common/types';
-import { RegistryPackage, CallESAsCurrentUser, DataType } from '../../../../types';
-import { appContextService } from '../../../../services';
+import { RegistryPackage, DataType } from '../../../../types';
 import { getPackageFromSource, getPackageSavedObjects } from '../../packages/get';
 
 interface FieldFormatMap {
@@ -172,6 +168,7 @@ export const createIndexPattern = (indexPatternType: string, fields: Fields) =>
     timeFieldName: '@timestamp',
     fields: JSON.stringify(indexPatternFields),
     fieldFormatMap: JSON.stringify(fieldFormatMap),
+    allowNoIndex: true,
   };
 };
 
@@ -382,31 +379,3 @@ const getFieldFormatParams = (field: Field): FieldFormatParams => {
   if (field.open_link_in_current_tab) params.openLinkInCurrentTab = field.open_link_in_current_tab;
   return params;
 };
-
-export const ensureDefaultIndices = async (callCluster: CallESAsCurrentUser) => {
-  // create placeholder indices to supress errors in the kibana Dashboards app
-  // that no matching indices exist https://github.com/elastic/kibana/issues/62343
-  const logger = appContextService.getLogger();
-  return Promise.all(
-    Object.values(dataTypes).map(async (indexPattern) => {
-      const defaultIndexPatternName = indexPattern + INDEX_PATTERN_PLACEHOLDER_SUFFIX;
-      const indexExists = await callCluster('indices.exists', { index: defaultIndexPatternName });
-      if (!indexExists) {
-        try {
-          await callCluster('indices.create', {
-            index: defaultIndexPatternName,
-            body: {
-              mappings: {
-                properties: {
-                  '@timestamp': { type: 'date' },
-                },
-              },
-            },
-          });
-        } catch (putErr) {
-          logger.error(`${defaultIndexPatternName} could not be created`);
-        }
-      }
-    })
-  );
-};
diff --git a/x-pack/plugins/fleet/server/services/setup.ts b/x-pack/plugins/fleet/server/services/setup.ts
index a3df7bc3dcdc44..f514f1ecb9ae6e 100644
--- a/x-pack/plugins/fleet/server/services/setup.ts
+++ b/x-pack/plugins/fleet/server/services/setup.ts
@@ -13,7 +13,6 @@ import {
   ensureInstalledDefaultPackages,
   ensurePackagesCompletedInstall,
 } from './epm/packages/install';
-import { ensureDefaultIndices } from './epm/kibana/index_pattern/install';
 import {
   packageToPackagePolicy,
   PackagePolicy,
@@ -58,7 +57,6 @@ async function createSetupSideEffects(
     ensureInstalledDefaultPackages(soClient, callCluster),
     outputService.ensureDefaultOutput(soClient),
     agentPolicyService.ensureDefaultAgentPolicy(soClient),
-    ensureDefaultIndices(callCluster),
     settingsService.getSettings(soClient).catch((e: any) => {
       if (e.isBoom && e.output.statusCode === 404) {
         const defaultSettings = createDefaultSettings();
diff --git a/x-pack/test/fleet_api_integration/apis/index.js b/x-pack/test/fleet_api_integration/apis/index.js
index 5b230e5a179a54..0d634f60e282f2 100644
--- a/x-pack/test/fleet_api_integration/apis/index.js
+++ b/x-pack/test/fleet_api_integration/apis/index.js
@@ -7,8 +7,6 @@
 export default function ({ loadTestFile }) {
   describe('Fleet Endpoints', function () {
     this.tags('ciGroup10');
-    // Fleet setup
-    loadTestFile(require.resolve('./setup'));
     // Agent setup
     loadTestFile(require.resolve('./agents_setup'));
     // Agents
diff --git a/x-pack/test/fleet_api_integration/apis/setup.ts b/x-pack/test/fleet_api_integration/apis/setup.ts
deleted file mode 100644
index 4d1562e703770a..00000000000000
--- a/x-pack/test/fleet_api_integration/apis/setup.ts
+++ /dev/null
@@ -1,32 +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 expect from '@kbn/expect';
-import { FtrProviderContext } from '../../api_integration/ftr_provider_context';
-
-export default function (providerContext: FtrProviderContext) {
-  const { getService } = providerContext;
-  const supertest = getService('supertest');
-  const es = getService('es');
-  describe('Fleet setup', async () => {
-    before(async () => {
-      await supertest.post(`/api/fleet/setup`).set('kbn-xsrf', 'xxx').send();
-    });
-
-    it('should have installed placeholder indices', async function () {
-      const resLogsIndexPatternPlaceholder = await es.transport.request({
-        method: 'GET',
-        path: `/logs-index_pattern_placeholder`,
-      });
-      expect(resLogsIndexPatternPlaceholder.statusCode).equal(200);
-      const resMetricsIndexPatternPlaceholder = await es.transport.request({
-        method: 'GET',
-        path: `/metrics-index_pattern_placeholder`,
-      });
-      expect(resMetricsIndexPatternPlaceholder.statusCode).equal(200);
-    });
-  });
-}
diff --git a/x-pack/test/security_solution_endpoint/apps/endpoint/resolver.ts b/x-pack/test/security_solution_endpoint/apps/endpoint/resolver.ts
index 7a30d7acf5f89b..1ccab64a585691 100644
--- a/x-pack/test/security_solution_endpoint/apps/endpoint/resolver.ts
+++ b/x-pack/test/security_solution_endpoint/apps/endpoint/resolver.ts
@@ -13,19 +13,32 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const browser = getService('browser');
 
-  describe('Endpoint Event Resolver', function () {
+  /**
+   * Navigating to the hosts page must be done after data is loaded into ES otherwise
+   * the hosts page will display the empty default page and if we load data after that
+   * we'd have to set the source filter on the page.
+   */
+  const navigateToHostsAndSetDate = async () => {
+    await pageObjects.hosts.navigateToSecurityHostsPage();
+    await pageObjects.common.dismissBanner();
+    const fromTime = 'Jan 1, 2018 @ 00:00:00.000';
+    const toTime = 'now';
+    await pageObjects.timePicker.setAbsoluteRange(fromTime, toTime);
+  };
+
+  describe.skip('Endpoint Event Resolver', function () {
     before(async () => {
-      await pageObjects.hosts.navigateToSecurityHostsPage();
-      await pageObjects.common.dismissBanner();
-      const fromTime = 'Jan 1, 2018 @ 00:00:00.000';
-      const toTime = 'now';
-      await pageObjects.timePicker.setAbsoluteRange(fromTime, toTime);
       await browser.setWindowSize(1800, 1200);
     });
-    describe.skip('Endpoint Resolver Tree', function () {
+    after(async () => {
+      await pageObjects.hosts.deleteDataStreams();
+    });
+
+    describe('Endpoint Resolver Tree', function () {
       before(async () => {
         await esArchiver.load('empty_kibana');
         await esArchiver.load('endpoint/resolver_tree/functions', { useCreate: true });
+        await navigateToHostsAndSetDate();
         await pageObjects.hosts.executeQueryAndOpenResolver('event.dataset : endpoint.events.file');
       });
       after(async () => {
@@ -213,6 +226,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
       before(async () => {
         await esArchiver.load('empty_kibana');
         await esArchiver.load('endpoint/resolver_tree/alert_events', { useCreate: true });
+        await navigateToHostsAndSetDate();
       });
       after(async () => {
         await pageObjects.hosts.deleteDataStreams();
diff --git a/x-pack/test/security_solution_endpoint_api_int/apis/resolver/events.ts b/x-pack/test/security_solution_endpoint_api_int/apis/resolver/events.ts
index 220d932787fffd..3f27d1868461f4 100644
--- a/x-pack/test/security_solution_endpoint_api_int/apis/resolver/events.ts
+++ b/x-pack/test/security_solution_endpoint_api_int/apis/resolver/events.ts
@@ -277,7 +277,7 @@ export default function ({ getService }: FtrProviderContext) {
         .set('kbn-xsrf', 'xxx')
         .send({
           filter: entityIDFilter,
-          indexPatterns: ['metrics-*'],
+          indexPatterns: ['doesnotexist-*'],
           timeRange: {
             from: tree.startTime,
             to: tree.endTime,
diff --git a/x-pack/test/security_solution_endpoint_api_int/apis/resolver/tree.ts b/x-pack/test/security_solution_endpoint_api_int/apis/resolver/tree.ts
index 9a731f1d5aee0f..ab6cac7f357a06 100644
--- a/x-pack/test/security_solution_endpoint_api_int/apis/resolver/tree.ts
+++ b/x-pack/test/security_solution_endpoint_api_int/apis/resolver/tree.ts
@@ -281,7 +281,7 @@ export default function ({ getService }: FtrProviderContext) {
               from: tree.startTime.toISOString(),
               to: tree.endTime.toISOString(),
             },
-            indexPatterns: ['metrics-*'],
+            indexPatterns: ['doesnotexist-*'],
           })
           .expect(200);
         expect(body).to.be.empty();

From cb704a29a64bb0f7c1694a3fe52656e33a6b4a29 Mon Sep 17 00:00:00 2001
From: Thomas Watson <w@tson.dk>
Date: Sun, 20 Dec 2020 10:21:07 +0100
Subject: [PATCH 49/75] Bump Node.js from version 14.15.2 to 14.15.3 (#86593)

---
 .ci/Dockerfile | 2 +-
 .node-version  | 2 +-
 .nvmrc         | 2 +-
 package.json   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.ci/Dockerfile b/.ci/Dockerfile
index cf827fc0ed08fc..8a972c65f84125 100644
--- a/.ci/Dockerfile
+++ b/.ci/Dockerfile
@@ -1,7 +1,7 @@
 # NOTE: This Dockerfile is ONLY used to run certain tasks in CI. It is not used to run Kibana or as a distributable.
 # If you're looking for the Kibana Docker image distributable, please see: src/dev/build/tasks/os_packages/docker_generator/templates/dockerfile.template.ts
 
-ARG NODE_VERSION=14.15.2
+ARG NODE_VERSION=14.15.3
 
 FROM node:${NODE_VERSION} AS base
 
diff --git a/.node-version b/.node-version
index 420568d75691b9..19c4c189d3640c 100644
--- a/.node-version
+++ b/.node-version
@@ -1 +1 @@
-14.15.2
+14.15.3
diff --git a/.nvmrc b/.nvmrc
index 420568d75691b9..19c4c189d3640c 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-14.15.2
+14.15.3
diff --git a/package.json b/package.json
index 252c8130c38d63..6e8809063ca575 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,7 @@
     "**/typescript": "4.1.2"
   },
   "engines": {
-    "node": "14.15.2",
+    "node": "14.15.3",
     "yarn": "^1.21.1"
   },
   "dependencies": {

From 396018fd4dd4845eb5a0a62883339f55ebe41f5d Mon Sep 17 00:00:00 2001
From: Yuliia Naumenko <jo.naumenko@gmail.com>
Date: Sun, 20 Dec 2020 08:52:54 -0800
Subject: [PATCH 50/75] Removed a possibility to define two different names for
 Alert types on API and UI level. (#86236)

* Removed a possibility to define two different names for Alert types on API and UI level

* fixed typechecks

* fixed typechecks

* fixed due to comments

* fixed typechecks

* fixed jest tests

* fixed typechecks
---
 .../public/alert_types/always_firing.tsx       |  1 -
 .../public/alert_types/astros.tsx              |  1 -
 .../components/alerting/register_apm_alerts.ts | 12 ------------
 .../infra/public/alerting/inventory/index.ts   |  3 ---
 .../log_threshold/log_threshold_alert_type.ts  |  3 ---
 .../public/alerting/metric_threshold/index.ts  |  3 ---
 ...er_inventory_metric_threshold_alert_type.ts |  5 ++++-
 .../register_log_threshold_alert_type.ts       |  4 +++-
 .../register_metric_threshold_alert_type.ts    |  5 ++++-
 .../public/alerts/alert_form.test.tsx          |  1 -
 .../alerts/ccr_read_exceptions_alert/index.tsx |  1 -
 .../alerts/cpu_usage_alert/cpu_usage_alert.tsx |  1 -
 .../public/alerts/disk_usage_alert/index.tsx   |  1 -
 .../alerts/legacy_alert/legacy_alert.tsx       |  1 -
 .../public/alerts/memory_usage_alert/index.tsx |  1 -
 .../missing_monitoring_data_alert.tsx          |  1 -
 .../thread_pool_rejections_alert/index.tsx     |  1 -
 .../alert_types/geo_containment/index.ts       |  3 ---
 .../public/alert_types/geo_threshold/index.ts  |  3 ---
 .../public/alert_types/threshold/index.ts      |  3 ---
 .../alert_types/geo_containment/alert_type.ts  |  2 +-
 .../geo_containment/tests/alert_type.test.ts   |  2 +-
 .../alert_types/geo_threshold/alert_type.ts    |  2 +-
 .../geo_threshold/tests/alert_type.test.ts     |  2 +-
 .../plugins/stack_alerts/server/plugin.test.ts |  2 +-
 .../translations/translations/ja-JP.json       | 10 ----------
 .../translations/translations/zh-CN.json       | 10 ----------
 .../application/lib/alert_type_compare.test.ts |  7 -------
 .../components/alert_details.test.tsx          |  1 -
 .../sections/alert_form/alert_add.test.tsx     |  1 -
 .../sections/alert_form/alert_edit.test.tsx    |  1 -
 .../sections/alert_form/alert_form.test.tsx    |  5 -----
 .../sections/alert_form/alert_form.tsx         | 18 +++++-------------
 .../components/alerts_list.test.tsx            |  1 -
 .../public/application/type_registry.test.ts   |  3 +--
 .../triggers_actions_ui/public/types.ts        |  1 -
 .../__tests__/monitor_status.test.ts           |  5 -----
 .../lib/alert_types/duration_anomaly.tsx       |  3 +--
 .../public/lib/alert_types/monitor_status.tsx  |  7 -------
 .../uptime/public/lib/alert_types/tls.tsx      |  3 +--
 .../fixtures/plugins/alerts/public/plugin.ts   |  2 --
 41 files changed, 24 insertions(+), 118 deletions(-)

diff --git a/x-pack/examples/alerting_example/public/alert_types/always_firing.tsx b/x-pack/examples/alerting_example/public/alert_types/always_firing.tsx
index 134cda6f541887..cee7ee62e3210e 100644
--- a/x-pack/examples/alerting_example/public/alert_types/always_firing.tsx
+++ b/x-pack/examples/alerting_example/public/alert_types/always_firing.tsx
@@ -32,7 +32,6 @@ import {
 export function getAlertType(): AlertTypeModel {
   return {
     id: 'example.always-firing',
-    name: 'Always Fires',
     description: 'Alert when called',
     iconClass: 'bolt',
     documentationUrl: null,
diff --git a/x-pack/examples/alerting_example/public/alert_types/astros.tsx b/x-pack/examples/alerting_example/public/alert_types/astros.tsx
index 54f989b93e22f4..cb65c9f52ca3f5 100644
--- a/x-pack/examples/alerting_example/public/alert_types/astros.tsx
+++ b/x-pack/examples/alerting_example/public/alert_types/astros.tsx
@@ -44,7 +44,6 @@ function isValueInEnum(enumeratin: Record<string, any>, value: any): boolean {
 export function getAlertType(): AlertTypeModel {
   return {
     id: 'example.people-in-space',
-    name: 'People Are In Space Right Now',
     description: 'Alert when people are in space right now',
     iconClass: 'globe',
     documentationUrl: null,
diff --git a/x-pack/plugins/apm/public/components/alerting/register_apm_alerts.ts b/x-pack/plugins/apm/public/components/alerting/register_apm_alerts.ts
index 6dc2cb3163b1f9..78d771aec13e04 100644
--- a/x-pack/plugins/apm/public/components/alerting/register_apm_alerts.ts
+++ b/x-pack/plugins/apm/public/components/alerting/register_apm_alerts.ts
@@ -14,9 +14,6 @@ export function registerApmAlerts(
 ) {
   alertTypeRegistry.register({
     id: AlertType.ErrorCount,
-    name: i18n.translate('xpack.apm.alertTypes.errorCount', {
-      defaultMessage: 'Error count threshold',
-    }),
     description: i18n.translate('xpack.apm.alertTypes.errorCount.description', {
       defaultMessage:
         'Alert when the number of errors in a service exceeds a defined threshold.',
@@ -45,9 +42,6 @@ export function registerApmAlerts(
 
   alertTypeRegistry.register({
     id: AlertType.TransactionDuration,
-    name: i18n.translate('xpack.apm.alertTypes.transactionDuration', {
-      defaultMessage: 'Transaction duration threshold',
-    }),
     description: i18n.translate(
       'xpack.apm.alertTypes.transactionDuration.description',
       {
@@ -82,9 +76,6 @@ export function registerApmAlerts(
 
   alertTypeRegistry.register({
     id: AlertType.TransactionErrorRate,
-    name: i18n.translate('xpack.apm.alertTypes.transactionErrorRate', {
-      defaultMessage: 'Transaction error rate threshold',
-    }),
     description: i18n.translate(
       'xpack.apm.alertTypes.transactionErrorRate.description',
       {
@@ -119,9 +110,6 @@ export function registerApmAlerts(
 
   alertTypeRegistry.register({
     id: AlertType.TransactionDurationAnomaly,
-    name: i18n.translate('xpack.apm.alertTypes.transactionDurationAnomaly', {
-      defaultMessage: 'Transaction duration anomaly',
-    }),
     description: i18n.translate(
       'xpack.apm.alertTypes.transactionDurationAnomaly.description',
       {
diff --git a/x-pack/plugins/infra/public/alerting/inventory/index.ts b/x-pack/plugins/infra/public/alerting/inventory/index.ts
index d7afd73c0e3a71..13ce43f77c8b03 100644
--- a/x-pack/plugins/infra/public/alerting/inventory/index.ts
+++ b/x-pack/plugins/infra/public/alerting/inventory/index.ts
@@ -14,9 +14,6 @@ import { validateMetricThreshold } from './components/validation';
 export function createInventoryMetricAlertType(): AlertTypeModel {
   return {
     id: METRIC_INVENTORY_THRESHOLD_ALERT_TYPE_ID,
-    name: i18n.translate('xpack.infra.metrics.inventory.alertFlyout.alertName', {
-      defaultMessage: 'Inventory',
-    }),
     description: i18n.translate('xpack.infra.metrics.inventory.alertFlyout.alertDescription', {
       defaultMessage: 'Alert when the inventory exceeds a defined threshold.',
     }),
diff --git a/x-pack/plugins/infra/public/alerting/log_threshold/log_threshold_alert_type.ts b/x-pack/plugins/infra/public/alerting/log_threshold/log_threshold_alert_type.ts
index 60c22c42c00b6f..7154a77496b818 100644
--- a/x-pack/plugins/infra/public/alerting/log_threshold/log_threshold_alert_type.ts
+++ b/x-pack/plugins/infra/public/alerting/log_threshold/log_threshold_alert_type.ts
@@ -12,9 +12,6 @@ import { validateExpression } from './validation';
 export function getAlertType(): AlertTypeModel {
   return {
     id: LOG_DOCUMENT_COUNT_ALERT_TYPE_ID,
-    name: i18n.translate('xpack.infra.logs.alertFlyout.alertName', {
-      defaultMessage: 'Log threshold',
-    }),
     description: i18n.translate('xpack.infra.logs.alertFlyout.alertDescription', {
       defaultMessage: 'Alert when the log aggregation exceeds the threshold.',
     }),
diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/index.ts b/x-pack/plugins/infra/public/alerting/metric_threshold/index.ts
index 05c69e5ccb78bd..cccd5fbc439d7a 100644
--- a/x-pack/plugins/infra/public/alerting/metric_threshold/index.ts
+++ b/x-pack/plugins/infra/public/alerting/metric_threshold/index.ts
@@ -14,9 +14,6 @@ import { METRIC_THRESHOLD_ALERT_TYPE_ID } from '../../../server/lib/alerting/met
 export function createMetricThresholdAlertType(): AlertTypeModel {
   return {
     id: METRIC_THRESHOLD_ALERT_TYPE_ID,
-    name: i18n.translate('xpack.infra.metrics.alertFlyout.alertName', {
-      defaultMessage: 'Metric threshold',
-    }),
     description: i18n.translate('xpack.infra.metrics.alertFlyout.alertDescription', {
       defaultMessage: 'Alert when the metrics aggregation exceeds the threshold.',
     }),
diff --git a/x-pack/plugins/infra/server/lib/alerting/inventory_metric_threshold/register_inventory_metric_threshold_alert_type.ts b/x-pack/plugins/infra/server/lib/alerting/inventory_metric_threshold/register_inventory_metric_threshold_alert_type.ts
index 6ec6210ecb3448..2d1df6e8cb4627 100644
--- a/x-pack/plugins/infra/server/lib/alerting/inventory_metric_threshold/register_inventory_metric_threshold_alert_type.ts
+++ b/x-pack/plugins/infra/server/lib/alerting/inventory_metric_threshold/register_inventory_metric_threshold_alert_type.ts
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { schema } from '@kbn/config-schema';
+import { i18n } from '@kbn/i18n';
 import { AlertType } from '../../../../../alerts/server';
 import {
   createInventoryMetricThresholdExecutor,
@@ -41,7 +42,9 @@ const condition = schema.object({
 
 export const registerMetricInventoryThresholdAlertType = (libs: InfraBackendLibs): AlertType => ({
   id: METRIC_INVENTORY_THRESHOLD_ALERT_TYPE_ID,
-  name: 'Inventory',
+  name: i18n.translate('xpack.infra.metrics.inventory.alertName', {
+    defaultMessage: 'Inventory',
+  }),
   validate: {
     params: schema.object(
       {
diff --git a/x-pack/plugins/infra/server/lib/alerting/log_threshold/register_log_threshold_alert_type.ts b/x-pack/plugins/infra/server/lib/alerting/log_threshold/register_log_threshold_alert_type.ts
index 64bfad92a84582..4703371f5e0def 100644
--- a/x-pack/plugins/infra/server/lib/alerting/log_threshold/register_log_threshold_alert_type.ts
+++ b/x-pack/plugins/infra/server/lib/alerting/log_threshold/register_log_threshold_alert_type.ts
@@ -81,7 +81,9 @@ export async function registerLogThresholdAlertType(
 
   alertingPlugin.registerType({
     id: LOG_DOCUMENT_COUNT_ALERT_TYPE_ID,
-    name: 'Log threshold',
+    name: i18n.translate('xpack.infra.logs.alertName', {
+      defaultMessage: 'Log threshold',
+    }),
     validate: {
       params: {
         validate: (params) => decodeOrThrow(AlertParamsRT)(params),
diff --git a/x-pack/plugins/infra/server/lib/alerting/metric_threshold/register_metric_threshold_alert_type.ts b/x-pack/plugins/infra/server/lib/alerting/metric_threshold/register_metric_threshold_alert_type.ts
index 1a10765eaf734e..f04a1015bcbcde 100644
--- a/x-pack/plugins/infra/server/lib/alerting/metric_threshold/register_metric_threshold_alert_type.ts
+++ b/x-pack/plugins/infra/server/lib/alerting/metric_threshold/register_metric_threshold_alert_type.ts
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { schema } from '@kbn/config-schema';
+import { i18n } from '@kbn/i18n';
 import { AlertType } from '../../../../../alerts/server';
 import { METRIC_EXPLORER_AGGREGATIONS } from '../../../../common/http_api/metrics_explorer';
 import { createMetricThresholdExecutor, FIRED_ACTIONS } from './metric_threshold_executor';
@@ -42,7 +43,9 @@ export function registerMetricThresholdAlertType(libs: InfraBackendLibs): AlertT
 
   return {
     id: METRIC_THRESHOLD_ALERT_TYPE_ID,
-    name: 'Metric threshold',
+    name: i18n.translate('xpack.infra.metrics.alertName', {
+      defaultMessage: 'Metric threshold',
+    }),
     validate: {
       params: schema.object(
         {
diff --git a/x-pack/plugins/monitoring/public/alerts/alert_form.test.tsx b/x-pack/plugins/monitoring/public/alerts/alert_form.test.tsx
index 369f03ab8cb115..20d5097d8a556f 100644
--- a/x-pack/plugins/monitoring/public/alerts/alert_form.test.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/alert_form.test.tsx
@@ -71,7 +71,6 @@ describe('alert_form', () => {
   const alertType = {
     id: 'alert-type',
     iconClass: 'test',
-    name: 'test-alert',
     description: 'Testing',
     documentationUrl: 'https://...',
     validate: validationMethod,
diff --git a/x-pack/plugins/monitoring/public/alerts/ccr_read_exceptions_alert/index.tsx b/x-pack/plugins/monitoring/public/alerts/ccr_read_exceptions_alert/index.tsx
index 2dafadf2726082..4d22d422ecda6f 100644
--- a/x-pack/plugins/monitoring/public/alerts/ccr_read_exceptions_alert/index.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/ccr_read_exceptions_alert/index.tsx
@@ -33,7 +33,6 @@ const validate = (inputValues: ValidateOptions): ValidationResult => {
 export function createCCRReadExceptionsAlertType(): AlertTypeModel {
   return {
     id: ALERT_CCR_READ_EXCEPTIONS,
-    name: ALERT_DETAILS[ALERT_CCR_READ_EXCEPTIONS].label,
     description: ALERT_DETAILS[ALERT_CCR_READ_EXCEPTIONS].description,
     iconClass: 'bell',
     documentationUrl(docLinks) {
diff --git a/x-pack/plugins/monitoring/public/alerts/cpu_usage_alert/cpu_usage_alert.tsx b/x-pack/plugins/monitoring/public/alerts/cpu_usage_alert/cpu_usage_alert.tsx
index 5054c47245f0fc..1fe40fc8777f4b 100644
--- a/x-pack/plugins/monitoring/public/alerts/cpu_usage_alert/cpu_usage_alert.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/cpu_usage_alert/cpu_usage_alert.tsx
@@ -13,7 +13,6 @@ import { Expression, Props } from '../components/duration/expression';
 export function createCpuUsageAlertType(): AlertTypeModel {
   return {
     id: ALERT_CPU_USAGE,
-    name: ALERT_DETAILS[ALERT_CPU_USAGE].label,
     description: ALERT_DETAILS[ALERT_CPU_USAGE].description,
     iconClass: 'bell',
     documentationUrl(docLinks) {
diff --git a/x-pack/plugins/monitoring/public/alerts/disk_usage_alert/index.tsx b/x-pack/plugins/monitoring/public/alerts/disk_usage_alert/index.tsx
index 00b70658e4289a..5579b8e1275a39 100644
--- a/x-pack/plugins/monitoring/public/alerts/disk_usage_alert/index.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/disk_usage_alert/index.tsx
@@ -15,7 +15,6 @@ import { ALERT_DISK_USAGE, ALERT_DETAILS } from '../../../common/constants';
 export function createDiskUsageAlertType(): AlertTypeModel {
   return {
     id: ALERT_DISK_USAGE,
-    name: ALERT_DETAILS[ALERT_DISK_USAGE].label,
     description: ALERT_DETAILS[ALERT_DISK_USAGE].description,
     iconClass: 'bell',
     documentationUrl(docLinks) {
diff --git a/x-pack/plugins/monitoring/public/alerts/legacy_alert/legacy_alert.tsx b/x-pack/plugins/monitoring/public/alerts/legacy_alert/legacy_alert.tsx
index c8d0a7a5d49f2a..d50e9c3a5c2828 100644
--- a/x-pack/plugins/monitoring/public/alerts/legacy_alert/legacy_alert.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/legacy_alert/legacy_alert.tsx
@@ -15,7 +15,6 @@ export function createLegacyAlertTypes(): AlertTypeModel[] {
   return LEGACY_ALERTS.map((legacyAlert) => {
     return {
       id: legacyAlert,
-      name: LEGACY_ALERT_DETAILS[legacyAlert].label,
       description: LEGACY_ALERT_DETAILS[legacyAlert].description,
       iconClass: 'bell',
       documentationUrl(docLinks) {
diff --git a/x-pack/plugins/monitoring/public/alerts/memory_usage_alert/index.tsx b/x-pack/plugins/monitoring/public/alerts/memory_usage_alert/index.tsx
index 062c32c7587942..0400810a8c3790 100644
--- a/x-pack/plugins/monitoring/public/alerts/memory_usage_alert/index.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/memory_usage_alert/index.tsx
@@ -15,7 +15,6 @@ import { ALERT_MEMORY_USAGE, ALERT_DETAILS } from '../../../common/constants';
 export function createMemoryUsageAlertType(): AlertTypeModel {
   return {
     id: ALERT_MEMORY_USAGE,
-    name: ALERT_DETAILS[ALERT_MEMORY_USAGE].label,
     description: ALERT_DETAILS[ALERT_MEMORY_USAGE].description,
     iconClass: 'bell',
     documentationUrl(docLinks) {
diff --git a/x-pack/plugins/monitoring/public/alerts/missing_monitoring_data_alert/missing_monitoring_data_alert.tsx b/x-pack/plugins/monitoring/public/alerts/missing_monitoring_data_alert/missing_monitoring_data_alert.tsx
index ec97a45a8a8005..fdb89033c4e2ca 100644
--- a/x-pack/plugins/monitoring/public/alerts/missing_monitoring_data_alert/missing_monitoring_data_alert.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/missing_monitoring_data_alert/missing_monitoring_data_alert.tsx
@@ -13,7 +13,6 @@ import { Expression } from './expression';
 export function createMissingMonitoringDataAlertType(): AlertTypeModel {
   return {
     id: ALERT_MISSING_MONITORING_DATA,
-    name: ALERT_DETAILS[ALERT_MISSING_MONITORING_DATA].label,
     description: ALERT_DETAILS[ALERT_MISSING_MONITORING_DATA].description,
     iconClass: 'bell',
     documentationUrl(docLinks) {
diff --git a/x-pack/plugins/monitoring/public/alerts/thread_pool_rejections_alert/index.tsx b/x-pack/plugins/monitoring/public/alerts/thread_pool_rejections_alert/index.tsx
index bd0e7f89bf535e..403a1e531258e2 100644
--- a/x-pack/plugins/monitoring/public/alerts/thread_pool_rejections_alert/index.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/thread_pool_rejections_alert/index.tsx
@@ -28,7 +28,6 @@ export function createThreadPoolRejectionsAlertType(
 ): AlertTypeModel {
   return {
     id: alertId,
-    name: threadPoolAlertDetails.label,
     description: threadPoolAlertDetails.description,
     iconClass: 'bell',
     documentationUrl(docLinks) {
diff --git a/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/index.ts b/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/index.ts
index 59effdbf8f512b..ba490b91fae103 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/index.ts
+++ b/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/index.ts
@@ -12,9 +12,6 @@ import { AlertTypeModel } from '../../../../triggers_actions_ui/public';
 export function getAlertType(): AlertTypeModel<GeoContainmentAlertParams> {
   return {
     id: '.geo-containment',
-    name: i18n.translate('xpack.stackAlerts.geoContainment.name.trackingContainment', {
-      defaultMessage: 'Tracking containment',
-    }),
     description: i18n.translate('xpack.stackAlerts.geoContainment.descriptionText', {
       defaultMessage: 'Alert when an entity is contained within a geo boundary.',
     }),
diff --git a/x-pack/plugins/stack_alerts/public/alert_types/geo_threshold/index.ts b/x-pack/plugins/stack_alerts/public/alert_types/geo_threshold/index.ts
index cc8d78b53137ea..8ba632633a3af0 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/geo_threshold/index.ts
+++ b/x-pack/plugins/stack_alerts/public/alert_types/geo_threshold/index.ts
@@ -12,9 +12,6 @@ import { AlertTypeModel } from '../../../../triggers_actions_ui/public';
 export function getAlertType(): AlertTypeModel<GeoThresholdAlertParams> {
   return {
     id: '.geo-threshold',
-    name: i18n.translate('xpack.stackAlerts.geoThreshold.name.trackingThreshold', {
-      defaultMessage: 'Tracking threshold',
-    }),
     description: i18n.translate('xpack.stackAlerts.geoThreshold.descriptionText', {
       defaultMessage: 'Alert when an entity enters or leaves a geo boundary.',
     }),
diff --git a/x-pack/plugins/stack_alerts/public/alert_types/threshold/index.ts b/x-pack/plugins/stack_alerts/public/alert_types/threshold/index.ts
index f09d1630cd6751..184277bae3da86 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/threshold/index.ts
+++ b/x-pack/plugins/stack_alerts/public/alert_types/threshold/index.ts
@@ -12,9 +12,6 @@ import { AlertTypeModel } from '../../../../triggers_actions_ui/public';
 export function getAlertType(): AlertTypeModel<IndexThresholdAlertParams> {
   return {
     id: '.index-threshold',
-    name: i18n.translate('xpack.stackAlerts.threshold.ui.alertType.nameText', {
-      defaultMessage: 'Index threshold',
-    }),
     description: i18n.translate('xpack.stackAlerts.threshold.ui.alertType.descriptionText', {
       defaultMessage: 'Alert when an aggregated query meets the threshold.',
     }),
diff --git a/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/alert_type.ts b/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/alert_type.ts
index 164ce993eebac0..51d7361bfe762b 100644
--- a/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/alert_type.ts
+++ b/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/alert_type.ts
@@ -114,7 +114,7 @@ export interface GeoContainmentParams {
 
 export function getAlertType(logger: Logger): AlertType<GeoContainmentParams> {
   const alertTypeName = i18n.translate('xpack.stackAlerts.geoContainment.alertTypeTitle', {
-    defaultMessage: 'Geo tracking containment',
+    defaultMessage: 'Tracking containment',
   });
 
   const actionGroupName = i18n.translate(
diff --git a/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/tests/alert_type.test.ts b/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/tests/alert_type.test.ts
index f3dc3855eb91bf..0592c944de570e 100644
--- a/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/tests/alert_type.test.ts
+++ b/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/tests/alert_type.test.ts
@@ -14,7 +14,7 @@ describe('alertType', () => {
 
   it('alert type creation structure is the expected value', async () => {
     expect(alertType.id).toBe('.geo-containment');
-    expect(alertType.name).toBe('Geo tracking containment');
+    expect(alertType.name).toBe('Tracking containment');
     expect(alertType.actionGroups).toEqual([
       { id: 'Tracked entity contained', name: 'Tracking containment met' },
     ]);
diff --git a/x-pack/plugins/stack_alerts/server/alert_types/geo_threshold/alert_type.ts b/x-pack/plugins/stack_alerts/server/alert_types/geo_threshold/alert_type.ts
index 93a6c0d29cf3cf..bf5e2fe2289db8 100644
--- a/x-pack/plugins/stack_alerts/server/alert_types/geo_threshold/alert_type.ts
+++ b/x-pack/plugins/stack_alerts/server/alert_types/geo_threshold/alert_type.ts
@@ -174,7 +174,7 @@ export interface GeoThresholdParams {
 
 export function getAlertType(logger: Logger): AlertType<GeoThresholdParams> {
   const alertTypeName = i18n.translate('xpack.stackAlerts.geoThreshold.alertTypeTitle', {
-    defaultMessage: 'Geo tracking threshold',
+    defaultMessage: 'Tracking threshold',
   });
 
   const actionGroupName = i18n.translate(
diff --git a/x-pack/plugins/stack_alerts/server/alert_types/geo_threshold/tests/alert_type.test.ts b/x-pack/plugins/stack_alerts/server/alert_types/geo_threshold/tests/alert_type.test.ts
index 49b56b5571b441..0cfce2d47f1898 100644
--- a/x-pack/plugins/stack_alerts/server/alert_types/geo_threshold/tests/alert_type.test.ts
+++ b/x-pack/plugins/stack_alerts/server/alert_types/geo_threshold/tests/alert_type.test.ts
@@ -14,7 +14,7 @@ describe('alertType', () => {
 
   it('alert type creation structure is the expected value', async () => {
     expect(alertType.id).toBe('.geo-threshold');
-    expect(alertType.name).toBe('Geo tracking threshold');
+    expect(alertType.name).toBe('Tracking threshold');
     expect(alertType.actionGroups).toEqual([
       { id: 'tracking threshold met', name: 'Tracking threshold met' },
     ]);
diff --git a/x-pack/plugins/stack_alerts/server/plugin.test.ts b/x-pack/plugins/stack_alerts/server/plugin.test.ts
index 3037504ed3e39b..0f747e9c24eec1 100644
--- a/x-pack/plugins/stack_alerts/server/plugin.test.ts
+++ b/x-pack/plugins/stack_alerts/server/plugin.test.ts
@@ -63,7 +63,7 @@ describe('AlertingBuiltins Plugin', () => {
             },
           ],
           "id": ".geo-threshold",
-          "name": "Geo tracking threshold",
+          "name": "Tracking threshold",
         }
       `);
 
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index e38058a312f3c0..e5b82a5d3fcbc7 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -4742,13 +4742,9 @@
     "xpack.apm.alerts.anomalySeverity.minor": "マイナー",
     "xpack.apm.alerts.anomalySeverity.scoreDetailsDescription": "スコア{value}以上",
     "xpack.apm.alerts.anomalySeverity.warningLabel": "警告",
-    "xpack.apm.alertTypes.errorCount": "エラー数しきい値",
     "xpack.apm.alertTypes.errorCount.defaultActionMessage": "次の条件のため、\\{\\{alertName\\}\\}アラートが実行されています。\n\n- サービス名：\\{\\{context.serviceName\\}\\}\n- 環境：\\{\\{context.environment\\}\\}\n- しきい値\\{\\{context.threshold\\}\\}エラー\n- トリガーされた値：過去\\{\\{context.interval\\}\\}に\\{\\{context.triggerValue\\}\\}件のエラー",
-    "xpack.apm.alertTypes.transactionDuration": "トランザクション期間のしきい値",
     "xpack.apm.alertTypes.transactionDuration.defaultActionMessage": "次の条件のため、\\{\\{alertName\\}\\}アラートが実行されています。\n\n- サービス名：\\{\\{context.serviceName\\}\\}\n- タイプ：\\{\\{context.transactionType\\}\\}\n- 環境：\\{\\{context.environment\\}\\}\n- しきい値：\\{\\{context.threshold\\}\\}ミリ秒\n- トリガーされた値：過去\\{\\{context.interval\\}\\}に\\{\\{context.triggerValue\\}\\}",
-    "xpack.apm.alertTypes.transactionDurationAnomaly": "トランザクション期間異常",
     "xpack.apm.alertTypes.transactionDurationAnomaly.defaultActionMessage": "次の条件のため、\\{\\{alertName\\}\\}アラートが実行されています。\n\n- サービス名：\\{\\{context.serviceName\\}\\}\n- タイプ：\\{\\{context.transactionType\\}\\}\n- 環境：\\{\\{context.environment\\}\\}\n- 重要度しきい値：\\{\\{context.threshold\\}\\}%\n- 重要度値：\\{\\{context.thresholdValue\\}\\}\n",
-    "xpack.apm.alertTypes.transactionErrorRate": "トランザクションエラー率しきい値",
     "xpack.apm.alertTypes.transactionErrorRate.defaultActionMessage": "次の条件のため、\\{\\{alertName\\}\\}アラートが実行されています。\n\n- サービス名：\\{\\{context.serviceName\\}\\}\n- タイプ：\\{\\{context.transactionType\\}\\}\n- 環境：\\{\\{context.environment\\}\\}\n- しきい値：\\{\\{context.threshold\\}\\}%\n- トリガーされた値：過去\\{\\{context.interval\\}\\}にエラーの\\{\\{context.triggerValue\\}\\}%",
     "xpack.apm.anomaly_detection.error.invalid_license": "異常検知を使用するには、Elastic Platinumライセンスのサブスクリプションが必要です。このライセンスがあれば、機械学習を活用して、サービスを監視できます。",
     "xpack.apm.anomaly_detection.error.missing_read_privileges": "異常検知ジョブを表示するには、機械学習およびAPMの「読み取り」権限が必要です",
@@ -9280,7 +9276,6 @@
     "xpack.infra.logFlyout.setFilterTooltip": "フィルターでイベントを表示",
     "xpack.infra.logFlyout.valueColumnLabel": "値",
     "xpack.infra.logs.alertFlyout.addCondition": "条件を追加",
-    "xpack.infra.logs.alertFlyout.alertName": "ログしきい値",
     "xpack.infra.logs.alertFlyout.criterionComparatorValueTitle": "比較：値",
     "xpack.infra.logs.alertFlyout.criterionFieldTitle": "フィールド",
     "xpack.infra.logs.alertFlyout.error.criterionComparatorRequired": "コンパレーターが必要です。",
@@ -9611,7 +9606,6 @@
     "xpack.infra.metrics.alertFlyout.aggregationText.p99": "99パーセンタイル",
     "xpack.infra.metrics.alertFlyout.aggregationText.rate": "レート",
     "xpack.infra.metrics.alertFlyout.aggregationText.sum": "合計",
-    "xpack.infra.metrics.alertFlyout.alertName": "メトリックしきい値",
     "xpack.infra.metrics.alertFlyout.alertOnNoData": "データがない場合に通知する",
     "xpack.infra.metrics.alertFlyout.alertPreviewError": "このアラート条件をプレビューするときにエラーが発生しました",
     "xpack.infra.metrics.alertFlyout.alertPreviewErrorDesc": "しばらくたってから再試行するか、詳細を確認してください。",
@@ -9700,7 +9694,6 @@
     "xpack.infra.metrics.expressionItems.components.closablePopoverTitle.closeLabel": "閉じる",
     "xpack.infra.metrics.invalidNodeErrorDescription": "構成をよく確認してください",
     "xpack.infra.metrics.invalidNodeErrorTitle": "{nodeName} がメトリックデータを収集していないようです",
-    "xpack.infra.metrics.inventory.alertFlyout.alertName": "インベントリ",
     "xpack.infra.metrics.loadingNodeDataText": "データを読み込み中",
     "xpack.infra.metrics.missingTSVBModelError": "{nodeType}では{metricId}のTSVBモデルが存在しません",
     "xpack.infra.metrics.pluginTitle": "メトリック",
@@ -19118,7 +19111,6 @@
     "xpack.stackAlerts.geoThreshold.indexLabel": "インデックス",
     "xpack.stackAlerts.geoThreshold.indexPatternSelectLabel": "インデックスパターン",
     "xpack.stackAlerts.geoThreshold.indexPatternSelectPlaceholder": "インデックスパターンを選択",
-    "xpack.stackAlerts.geoThreshold.name.trackingThreshold": "追跡しきい値",
     "xpack.stackAlerts.geoThreshold.noIndexPattern.doThisLinkTextDescription": "インデックスパターンを作成します",
     "xpack.stackAlerts.geoThreshold.noIndexPattern.doThisPrefixDescription": "次のことが必要です ",
     "xpack.stackAlerts.geoThreshold.noIndexPattern.doThisSuffixDescription": " 地理空間フィールドを含む",
@@ -19493,7 +19485,6 @@
     "xpack.triggersActionsUI.sections.alertForm.renotifyFieldLabel": "通知間隔",
     "xpack.triggersActionsUI.sections.alertForm.renotifyWithTooltip": "アラートがアクティブな間にアクションを繰り返す頻度を定義します。",
     "xpack.triggersActionsUI.sections.alertForm.selectAlertActionTypeTitle": "アクションタイプを選択してください",
-    "xpack.triggersActionsUI.sections.alertForm.selectedAlertTypeTitle": "{alertType}",
     "xpack.triggersActionsUI.sections.alertForm.unableToAddAction": "デフォルトアクショングループの定義がないのでアクションを追加できません",
     "xpack.triggersActionsUI.sections.alertForm.unableToLoadActionsMessage": "コネクターを読み込めません",
     "xpack.triggersActionsUI.sections.alertForm.unableToLoadActionTypesMessage": "アクションタイプを読み込めません",
@@ -20137,7 +20128,6 @@
     "xpack.uptime.alerts.monitorStatus.timerangeValueField.ariaLabel": "アラートの範囲のための時間単位の数を入力してください",
     "xpack.uptime.alerts.monitorStatus.timerangeValueField.expression": "within",
     "xpack.uptime.alerts.monitorStatus.timerangeValueField.value": "最終{value}",
-    "xpack.uptime.alerts.monitorStatus.title.label": "稼働状況の監視ステータス",
     "xpack.uptime.alerts.settings.createConnector": "コネクターを作成",
     "xpack.uptime.alerts.timerangeUnitSelectable.daysOption.ariaLabel": "「日」の時間範囲選択項目",
     "xpack.uptime.alerts.timerangeUnitSelectable.hoursOption.ariaLabel": "「時間」の時間範囲選択項目",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 17bcd61898efe9..879418870b527f 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -4744,13 +4744,9 @@
     "xpack.apm.alerts.anomalySeverity.minor": "轻微",
     "xpack.apm.alerts.anomalySeverity.scoreDetailsDescription": "{value} 及以上分数",
     "xpack.apm.alerts.anomalySeverity.warningLabel": "警告",
-    "xpack.apm.alertTypes.errorCount": "错误计数阈值",
     "xpack.apm.alertTypes.errorCount.defaultActionMessage": "由于以下条件 \\{\\{alertName\\}\\} 告警触发：\n\n- 服务名称：\\{\\{context.serviceName\\}\\}\n- 环境：\\{\\{context.environment\\}\\}\n- 阈值：\\{\\{context.threshold\\}\\} 个错误\n- 已触发的值：在过去 \\{\\{context.interval\\}\\}有 \\{\\{context.triggerValue\\}\\} 个错误",
-    "xpack.apm.alertTypes.transactionDuration": "事务持续时间阈值",
     "xpack.apm.alertTypes.transactionDuration.defaultActionMessage": "由于以下条件 \\{\\{alertName\\}\\} 告警触发：\n\n- 服务名称：\\{\\{context.serviceName\\}\\}\n- 类型：\\{\\{context.transactionType\\}\\}\n- 环境：\\{\\{context.environment\\}\\}\n- 阈值：\\{\\{context.threshold\\}\\}ms\n- 已触发的值：在过去 \\{\\{context.interval\\}\\}为 \\{\\{context.triggerValue\\}\\}",
-    "xpack.apm.alertTypes.transactionDurationAnomaly": "事务持续时间异常",
     "xpack.apm.alertTypes.transactionDurationAnomaly.defaultActionMessage": "由于以下条件 \\{\\{alertName\\}\\} 告警触发：\n\n- 服务名称：\\{\\{context.serviceName\\}\\}\n- 类型：\\{\\{context.transactionType\\}\\}\n- 环境：\\{\\{context.environment\\}\\}\n- 严重性阈值：\\{\\{context.threshold\\}\\}\n- 严重性值：\\{\\{context.thresholdValue\\}\\}\n",
-    "xpack.apm.alertTypes.transactionErrorRate": "事务错误率阈值",
     "xpack.apm.alertTypes.transactionErrorRate.defaultActionMessage": "由于以下条件 \\{\\{alertName\\}\\} 告警触发：\n\n- 服务名称：\\{\\{context.serviceName\\}\\}\n- 类型：\\{\\{context.transactionType\\}\\}\n- 环境：\\{\\{context.environment\\}\\}\n- 阈值：\\{\\{context.threshold\\}\\}%\n- 已触发的值：在过去 \\{\\{context.interval\\}\\}有 \\{\\{context.triggerValue\\}\\}% 的错误",
     "xpack.apm.anomaly_detection.error.invalid_license": "要使用异常检测，必须订阅 Elastic 白金级许可证。有了该许可证，您便可借助 Machine Learning 监测服务。",
     "xpack.apm.anomaly_detection.error.missing_read_privileges": "必须对 Machine Learning 和 APM 具有“读”权限，才能查看“异常检测”作业",
@@ -9289,7 +9285,6 @@
     "xpack.infra.logFlyout.setFilterTooltip": "使用筛选查看事件",
     "xpack.infra.logFlyout.valueColumnLabel": "值",
     "xpack.infra.logs.alertFlyout.addCondition": "添加条件",
-    "xpack.infra.logs.alertFlyout.alertName": "日志阈值",
     "xpack.infra.logs.alertFlyout.criterionComparatorValueTitle": "对比：值",
     "xpack.infra.logs.alertFlyout.criterionFieldTitle": "字段",
     "xpack.infra.logs.alertFlyout.error.criterionComparatorRequired": "比较运算符必填。",
@@ -9621,7 +9616,6 @@
     "xpack.infra.metrics.alertFlyout.aggregationText.p99": "第 99 个百分位",
     "xpack.infra.metrics.alertFlyout.aggregationText.rate": "比率",
     "xpack.infra.metrics.alertFlyout.aggregationText.sum": "求和",
-    "xpack.infra.metrics.alertFlyout.alertName": "指标阈值",
     "xpack.infra.metrics.alertFlyout.alertOnNoData": "没数据时提醒我",
     "xpack.infra.metrics.alertFlyout.alertPreviewError": "尝试预览此告警条件时发生错误",
     "xpack.infra.metrics.alertFlyout.alertPreviewErrorDesc": "请稍后重试或查看详情了解更多信息。",
@@ -9713,7 +9707,6 @@
     "xpack.infra.metrics.expressionItems.components.closablePopoverTitle.closeLabel": "关闭",
     "xpack.infra.metrics.invalidNodeErrorDescription": "反复检查您的配置",
     "xpack.infra.metrics.invalidNodeErrorTitle": "似乎 {nodeName} 未在收集任何指标数据",
-    "xpack.infra.metrics.inventory.alertFlyout.alertName": "库存",
     "xpack.infra.metrics.loadingNodeDataText": "正在加载数据",
     "xpack.infra.metrics.missingTSVBModelError": "{nodeType} 的 {metricId} TSVB 模型不存在",
     "xpack.infra.metrics.pluginTitle": "指标",
@@ -19136,7 +19129,6 @@
     "xpack.stackAlerts.geoThreshold.indexLabel": "索引",
     "xpack.stackAlerts.geoThreshold.indexPatternSelectLabel": "索引模式",
     "xpack.stackAlerts.geoThreshold.indexPatternSelectPlaceholder": "选择索引模式",
-    "xpack.stackAlerts.geoThreshold.name.trackingThreshold": "跟踪阈值",
     "xpack.stackAlerts.geoThreshold.noIndexPattern.doThisLinkTextDescription": "创建索引模式",
     "xpack.stackAlerts.geoThreshold.noIndexPattern.doThisPrefixDescription": "您将需要 ",
     "xpack.stackAlerts.geoThreshold.noIndexPattern.doThisSuffixDescription": " （包含地理空间字段）。",
@@ -19512,7 +19504,6 @@
     "xpack.triggersActionsUI.sections.alertForm.renotifyFieldLabel": "通知频率",
     "xpack.triggersActionsUI.sections.alertForm.renotifyWithTooltip": "定义告警处于活动状态时重复操作的频率。",
     "xpack.triggersActionsUI.sections.alertForm.selectAlertActionTypeTitle": "选择操作类型",
-    "xpack.triggersActionsUI.sections.alertForm.selectedAlertTypeTitle": "{alertType}",
     "xpack.triggersActionsUI.sections.alertForm.unableToAddAction": "无法添加操作，因为未定义默认操作组",
     "xpack.triggersActionsUI.sections.alertForm.unableToLoadActionsMessage": "无法加载连接器",
     "xpack.triggersActionsUI.sections.alertForm.unableToLoadActionTypesMessage": "无法加载操作类型",
@@ -20156,7 +20147,6 @@
     "xpack.uptime.alerts.monitorStatus.timerangeValueField.ariaLabel": "输入告警范围的时间单位数目",
     "xpack.uptime.alerts.monitorStatus.timerangeValueField.expression": "之内",
     "xpack.uptime.alerts.monitorStatus.timerangeValueField.value": "上一 {value}",
-    "xpack.uptime.alerts.monitorStatus.title.label": "运行时间监测状态",
     "xpack.uptime.alerts.settings.createConnector": "创建连接器",
     "xpack.uptime.alerts.timerangeUnitSelectable.daysOption.ariaLabel": "“天”时间范围选择项",
     "xpack.uptime.alerts.timerangeUnitSelectable.hoursOption.ariaLabel": "“小时”时间范围选择项",
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/lib/alert_type_compare.test.ts b/x-pack/plugins/triggers_actions_ui/public/application/lib/alert_type_compare.test.ts
index e364661361814f..0cd5118c5e316b 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/lib/alert_type_compare.test.ts
+++ b/x-pack/plugins/triggers_actions_ui/public/application/lib/alert_type_compare.test.ts
@@ -30,7 +30,6 @@ test('should sort groups by containing enabled alert types first and then by nam
           alertTypeItem: {
             id: 'my-alert-type',
             iconClass: 'test',
-            name: 'test-alert',
             description: 'Alert when testing',
             documentationUrl: 'https://localhost.local/docs',
             validate: () => {
@@ -52,7 +51,6 @@ test('should sort groups by containing enabled alert types first and then by nam
           alertTypeItem: {
             id: 'my-alert-type',
             iconClass: 'test',
-            name: 'test-alert',
             description: 'Alert when testing',
             documentationUrl: 'https://localhost.local/docs',
             validate: () => {
@@ -69,7 +67,6 @@ test('should sort groups by containing enabled alert types first and then by nam
           alertTypeItem: {
             id: 'disabled-alert-type',
             iconClass: 'test',
-            name: 'test-alert',
             description: 'Alert when testing',
             documentationUrl: 'https://localhost.local/docs',
             validate: () => {
@@ -91,7 +88,6 @@ test('should sort groups by containing enabled alert types first and then by nam
           alertTypeItem: {
             id: 'my-alert-type',
             iconClass: 'test',
-            name: 'test-alert',
             description: 'Alert when testing',
             documentationUrl: 'https://localhost.local/docs',
             validate: () => {
@@ -130,7 +126,6 @@ test('should sort alert types by enabled first and then by name', async () => {
       alertTypeItem: {
         id: 'my-alert-type',
         iconClass: 'test',
-        name: 'test-alert',
         description: 'Alert when testing',
         documentationUrl: 'https://localhost.local/docs',
         validate: () => {
@@ -147,7 +142,6 @@ test('should sort alert types by enabled first and then by name', async () => {
       alertTypeItem: {
         id: 'my-alert-type',
         iconClass: 'test',
-        name: 'test-alert',
         description: 'Alert when testing',
         documentationUrl: 'https://localhost.local/docs',
         validate: () => {
@@ -164,7 +158,6 @@ test('should sort alert types by enabled first and then by name', async () => {
       alertTypeItem: {
         id: 'disabled-alert-type',
         iconClass: 'test',
-        name: 'test-alert',
         description: 'Alert when testing',
         documentationUrl: 'https://localhost.local/docs',
         validate: () => {
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx
index e25e703de5f7ee..30ca2c620f1d7c 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx
@@ -657,7 +657,6 @@ describe('edit button', () => {
   const alertTypeR: AlertTypeModel = {
     id: 'my-alert-type',
     iconClass: 'test',
-    name: 'test-alert',
     description: 'Alert when testing',
     documentationUrl: 'https://localhost.local/docs',
     validate: () => {
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.test.tsx
index 2790ea8aa6bfa4..6057d2669f04c9 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.test.tsx
@@ -94,7 +94,6 @@ describe('alert_add', () => {
     const alertType = {
       id: 'my-alert-type',
       iconClass: 'test',
-      name: 'test-alert',
       description: 'test',
       documentationUrl: null,
       validate: (): ValidationResult => {
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.test.tsx
index 25f830df58df53..e5a6a8977a8c8c 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.test.tsx
@@ -52,7 +52,6 @@ describe('alert_edit', () => {
     const alertType = {
       id: 'my-alert-type',
       iconClass: 'test',
-      name: 'test-alert',
       description: 'test',
       documentationUrl: null,
       validate: (): ValidationResult => {
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.test.tsx
index d41ca915f34c11..ef8d17d8c4c282 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.test.tsx
@@ -26,7 +26,6 @@ describe('alert_form', () => {
   const alertType = {
     id: 'my-alert-type',
     iconClass: 'test',
-    name: 'test-alert',
     description: 'Alert when testing',
     documentationUrl: 'https://localhost.local/docs',
     validate: (): ValidationResult => {
@@ -54,7 +53,6 @@ describe('alert_form', () => {
   const alertTypeNonEditable = {
     id: 'non-edit-alert-type',
     iconClass: 'test',
-    name: 'non edit alert',
     description: 'test',
     documentationUrl: null,
     validate: (): ValidationResult => {
@@ -67,7 +65,6 @@ describe('alert_form', () => {
   const disabledByLicenseAlertType = {
     id: 'disabled-by-license',
     iconClass: 'test',
-    name: 'test-alert',
     description: 'Alert when testing',
     documentationUrl: 'https://localhost.local/docs',
     validate: (): ValidationResult => {
@@ -306,7 +303,6 @@ describe('alert_form', () => {
         {
           id: 'same-consumer-producer-alert-type',
           iconClass: 'test',
-          name: 'test-alert',
           description: 'test',
           documentationUrl: null,
           validate: (): ValidationResult => {
@@ -318,7 +314,6 @@ describe('alert_form', () => {
         {
           id: 'other-consumer-producer-alert-type',
           iconClass: 'test',
-          name: 'test-alert',
           description: 'test',
           documentationUrl: null,
           validate: (): ValidationResult => {
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx
index cf3d0bf1544c25..a67fd218d55f34 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx
@@ -289,10 +289,7 @@ export const AlertForm = ({
         )
         .filter((alertTypeItem) =>
           searchValue
-            ? alertTypeItem.alertTypeModel.name
-                .toString()
-                .toLocaleLowerCase()
-                .includes(searchValue) ||
+            ? alertTypeItem.alertType.name.toString().toLocaleLowerCase().includes(searchValue) ||
               alertTypeItem.alertType!.producer.toLocaleLowerCase().includes(searchValue) ||
               alertTypeItem.alertTypeModel.description.toLocaleLowerCase().includes(searchValue)
             : alertTypeItem
@@ -378,10 +375,7 @@ export const AlertForm = ({
           hasDisabledByLicenseAlertTypes = true;
         }
         (result[producer] = result[producer] || []).push({
-          name:
-            typeof alertTypeValue.alertTypeModel.name === 'string'
-              ? alertTypeValue.alertTypeModel.name
-              : alertTypeValue.alertTypeModel.name.props.defaultMessage,
+          name: alertTypeValue.alertType.name,
           id: alertTypeValue.alertTypeModel.id,
           checkEnabledResult,
           alertTypeItem: alertTypeValue.alertTypeModel,
@@ -475,11 +469,9 @@ export const AlertForm = ({
         <EuiFlexItem>
           <EuiTitle size="s" data-test-subj="selectedAlertTypeTitle">
             <h5 id="selectedAlertTypeTitle">
-              <FormattedMessage
-                defaultMessage="{alertType}"
-                id="xpack.triggersActionsUI.sections.alertForm.selectedAlertTypeTitle"
-                values={{ alertType: alertTypeModel ? alertTypeModel.name : '' }}
-              />
+              {alert.alertTypeId && alertTypesIndex && alertTypesIndex.has(alert.alertTypeId)
+                ? alertTypesIndex.get(alert.alertTypeId)!.name
+                : ''}
             </h5>
           </EuiTitle>
         </EuiFlexItem>
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx
index 7df5c6e1571068..875268bd931123 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx
@@ -43,7 +43,6 @@ const alertTypeRegistry = alertTypeRegistryMock.create();
 
 const alertType = {
   id: 'test_alert_type',
-  name: 'some alert type',
   description: 'test',
   iconClass: 'test',
   documentationUrl: null,
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/type_registry.test.ts b/x-pack/plugins/triggers_actions_ui/public/application/type_registry.test.ts
index f875bcabdcde82..aa61fcde9e9c25 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/type_registry.test.ts
+++ b/x-pack/plugins/triggers_actions_ui/public/application/type_registry.test.ts
@@ -11,10 +11,9 @@ export const ExpressionComponent: React.FunctionComponent = () => {
   return null;
 };
 
-const getTestAlertType = (id?: string, name?: string, iconClass?: string) => {
+const getTestAlertType = (id?: string, iconClass?: string) => {
   return {
     id: id || 'test-alet-type',
-    name: name || 'Test alert type',
     description: 'Test description',
     iconClass: iconClass || 'icon',
     documentationUrl: null,
diff --git a/x-pack/plugins/triggers_actions_ui/public/types.ts b/x-pack/plugins/triggers_actions_ui/public/types.ts
index cd1ebe47a8c229..3fffe9fe230b4b 100644
--- a/x-pack/plugins/triggers_actions_ui/public/types.ts
+++ b/x-pack/plugins/triggers_actions_ui/public/types.ts
@@ -187,7 +187,6 @@ export interface AlertTypeParamsExpressionProps<
 
 export interface AlertTypeModel<AlertParamsType = any> {
   id: string;
-  name: string | JSX.Element;
   description: string;
   iconClass: string;
   documentationUrl: string | ((docLinks: DocLinksStart) => string) | null;
diff --git a/x-pack/plugins/uptime/public/lib/alert_types/__tests__/monitor_status.test.ts b/x-pack/plugins/uptime/public/lib/alert_types/__tests__/monitor_status.test.ts
index 8da45276fa532f..7e297c1cb6d7bc 100644
--- a/x-pack/plugins/uptime/public/lib/alert_types/__tests__/monitor_status.test.ts
+++ b/x-pack/plugins/uptime/public/lib/alert_types/__tests__/monitor_status.test.ts
@@ -207,11 +207,6 @@ describe('monitor status alert type', () => {
         "documentationUrl": [Function],
         "iconClass": "uptimeApp",
         "id": "xpack.uptime.alerts.monitorStatus",
-        "name": <FormattedMessage
-          defaultMessage="Uptime monitor status"
-          id="xpack.uptime.alerts.monitorStatus.title.label"
-          values={Object {}}
-        />,
         "requiresAppContext": false,
         "validate": [Function],
       }
diff --git a/x-pack/plugins/uptime/public/lib/alert_types/duration_anomaly.tsx b/x-pack/plugins/uptime/public/lib/alert_types/duration_anomaly.tsx
index e02cc11269e9cb..39a8a36a6d0a89 100644
--- a/x-pack/plugins/uptime/public/lib/alert_types/duration_anomaly.tsx
+++ b/x-pack/plugins/uptime/public/lib/alert_types/duration_anomaly.tsx
@@ -10,7 +10,7 @@ import { CLIENT_ALERT_TYPES } from '../../../common/constants/alerts';
 import { DurationAnomalyTranslations } from './translations';
 import { AlertTypeInitializer } from '.';
 
-const { name, defaultActionMessage, description } = DurationAnomalyTranslations;
+const { defaultActionMessage, description } = DurationAnomalyTranslations;
 const DurationAnomalyAlert = React.lazy(() => import('./lazy_wrapper/duration_anomaly'));
 
 export const initDurationAnomalyAlertType: AlertTypeInitializer = ({
@@ -25,7 +25,6 @@ export const initDurationAnomalyAlertType: AlertTypeInitializer = ({
   alertParamsExpression: (params: unknown) => (
     <DurationAnomalyAlert core={core} plugins={plugins} params={params} />
   ),
-  name,
   description,
   validate: () => ({ errors: {} }),
   defaultActionMessage,
diff --git a/x-pack/plugins/uptime/public/lib/alert_types/monitor_status.tsx b/x-pack/plugins/uptime/public/lib/alert_types/monitor_status.tsx
index 43aaa26d86642a..6a00d2987f12b3 100644
--- a/x-pack/plugins/uptime/public/lib/alert_types/monitor_status.tsx
+++ b/x-pack/plugins/uptime/public/lib/alert_types/monitor_status.tsx
@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
 import { AlertTypeModel, ValidationResult } from '../../../../triggers_actions_ui/public';
 import { AlertTypeInitializer } from '.';
 
@@ -23,12 +22,6 @@ export const initMonitorStatusAlertType: AlertTypeInitializer = ({
   plugins,
 }): AlertTypeModel => ({
   id: CLIENT_ALERT_TYPES.MONITOR_STATUS,
-  name: (
-    <FormattedMessage
-      id="xpack.uptime.alerts.monitorStatus.title.label"
-      defaultMessage="Uptime monitor status"
-    />
-  ),
   description,
   iconClass: 'uptimeApp',
   documentationUrl(docLinks) {
diff --git a/x-pack/plugins/uptime/public/lib/alert_types/tls.tsx b/x-pack/plugins/uptime/public/lib/alert_types/tls.tsx
index 83c4792e26f597..43e5b75aa5f8b2 100644
--- a/x-pack/plugins/uptime/public/lib/alert_types/tls.tsx
+++ b/x-pack/plugins/uptime/public/lib/alert_types/tls.tsx
@@ -10,7 +10,7 @@ import { CLIENT_ALERT_TYPES } from '../../../common/constants/alerts';
 import { TlsTranslations } from './translations';
 import { AlertTypeInitializer } from '.';
 
-const { name, defaultActionMessage, description } = TlsTranslations;
+const { defaultActionMessage, description } = TlsTranslations;
 const TLSAlert = React.lazy(() => import('./lazy_wrapper/tls_alert'));
 export const initTlsAlertType: AlertTypeInitializer = ({ core, plugins }): AlertTypeModel => ({
   id: CLIENT_ALERT_TYPES.TLS,
@@ -21,7 +21,6 @@ export const initTlsAlertType: AlertTypeInitializer = ({ core, plugins }): Alert
   alertParamsExpression: (params: any) => (
     <TLSAlert core={core} plugins={plugins} params={params} />
   ),
-  name,
   description,
   validate: () => ({ errors: {} }),
   defaultActionMessage,
diff --git a/x-pack/test/functional_with_es_ssl/fixtures/plugins/alerts/public/plugin.ts b/x-pack/test/functional_with_es_ssl/fixtures/plugins/alerts/public/plugin.ts
index af4aedda06ef75..50de66ac1c3baf 100644
--- a/x-pack/test/functional_with_es_ssl/fixtures/plugins/alerts/public/plugin.ts
+++ b/x-pack/test/functional_with_es_ssl/fixtures/plugins/alerts/public/plugin.ts
@@ -28,7 +28,6 @@ export class AlertingFixturePlugin implements Plugin<Setup, Start, AlertingExamp
 
     triggersActionsUi.alertTypeRegistry.register({
       id: 'test.always-firing',
-      name: 'Test Always Firing',
       description: 'Always fires',
       iconClass: 'alert',
       documentationUrl: null,
@@ -41,7 +40,6 @@ export class AlertingFixturePlugin implements Plugin<Setup, Start, AlertingExamp
 
     triggersActionsUi.alertTypeRegistry.register({
       id: 'test.noop',
-      name: 'Test Noop',
       description: `Doesn't do anything`,
       iconClass: 'alert',
       documentationUrl: null,

From 0d9b40dfef0acaf6d3848c3f67784ca5b9665e37 Mon Sep 17 00:00:00 2001
From: Madison Caldwell <madison.rey.caldwell@gmail.com>
Date: Sun, 20 Dec 2020 14:10:52 -0500
Subject: [PATCH 51/75] [Security Solution][Detections][Threshold Rules]
 Threshold Rule Bug Fixes (#84918)

* Move threshold dupe detection logic to its own function

* Minor fixup

* Refactor and remove property injection for threshold signals

* Only show aggregatable fields for threshold rule grouping

* Add threshold rule kql filter to timeline

* Remove outdated getThresholdSignalQueryFields tests

* Filter aggregatable fields on client

* Revert "Only show aggregatable fields for threshold rule grouping"

This reverts commit 539fa49cc9ff14da131ff990247ff262f2d79702.

* Fix bug with incorrect calculation of threshold signal dupes when no threshold field present

* Revert "Add threshold rule kql filter to timeline"

This reverts commit 64823744a39eda21cf3ee5222f4a023885e692a0.

* Add test skeleton

* Finish tests

* Address comment
---
 .../rules/step_define_rule/index.tsx          |  26 +-
 .../bulk_create_threshold_signals.test.ts     | 364 +++---------------
 .../signals/bulk_create_threshold_signals.ts  |  94 +----
 .../signals/signal_rule_alert_type.ts         |  51 +--
 ....ts => threshold_find_previous_signals.ts} |   0
 .../signals/threshold_get_bucket_filters.ts   |  96 +++++
 .../detection_engine/signals/utils.test.ts    |  15 +
 .../lib/detection_engine/signals/utils.ts     |  18 +
 8 files changed, 228 insertions(+), 436 deletions(-)
 rename x-pack/plugins/security_solution/server/lib/detection_engine/signals/{find_previous_threshold_signals.ts => threshold_find_previous_signals.ts} (100%)
 create mode 100644 x-pack/plugins/security_solution/server/lib/detection_engine/signals/threshold_get_bucket_filters.ts

diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx
index f06d4bdef74cb7..1fe1b809d4f30a 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx
@@ -52,7 +52,7 @@ import {
 } from '../../../../../common/detection_engine/utils';
 import { EqlQueryBar } from '../eql_query_bar';
 import { ThreatMatchInput } from '../threatmatch_input';
-import { useFetchIndex } from '../../../../common/containers/source';
+import { BrowserField, BrowserFields, useFetchIndex } from '../../../../common/containers/source';
 import { PreviewQuery, Threshold } from '../query_preview';
 
 const CommonUseField = getUseField({ component: Field });
@@ -168,6 +168,26 @@ const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
   const queryBarQuery =
     formQuery != null ? formQuery.query.query : '' || initialState.queryBar.query.query;
   const [indexPatternsLoading, { browserFields, indexPatterns }] = useFetchIndex(index);
+  const aggregatableFields = Object.entries(browserFields).reduce<BrowserFields>(
+    (groupAcc, [groupName, groupValue]) => {
+      return {
+        ...groupAcc,
+        [groupName]: {
+          fields: Object.entries(groupValue.fields ?? {}).reduce<Partial<BrowserField>>(
+            (fieldAcc, [fieldName, fieldValue]) => {
+              if (fieldValue.aggregatable === true) {
+                return { ...fieldAcc, [fieldName]: fieldValue };
+              }
+              return fieldAcc;
+            },
+            {}
+          ),
+        } as Partial<BrowserField>,
+      };
+    },
+    {}
+  );
+
   const [
     threatIndexPatternsLoading,
     { browserFields: threatBrowserFields, indexPatterns: threatIndexPatterns },
@@ -262,12 +282,12 @@ const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
   const ThresholdInputChildren = useCallback(
     ({ thresholdField, thresholdValue }) => (
       <ThresholdInput
-        browserFields={browserFields}
+        browserFields={aggregatableFields}
         thresholdField={thresholdField}
         thresholdValue={thresholdValue}
       />
     ),
-    [browserFields]
+    [aggregatableFields]
   );
 
   const ThreatMatchInputChildren = useCallback(
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/bulk_create_threshold_signals.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/bulk_create_threshold_signals.test.ts
index 6a75d0655cf59d..022c07defc9c19 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/bulk_create_threshold_signals.test.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/bulk_create_threshold_signals.test.ts
@@ -4,329 +4,77 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { sampleDocNoSortIdNoVersion } from './__mocks__/es_results';
-import { getThresholdSignalQueryFields } from './bulk_create_threshold_signals';
+import { loggingSystemMock } from '../../../../../../../src/core/server/mocks';
+import { sampleDocNoSortId, sampleDocSearchResultsNoSortId } from './__mocks__/es_results';
+import { transformThresholdResultsToEcs } from './bulk_create_threshold_signals';
+import { calculateThresholdSignalUuid } from './utils';
 
-describe('getThresholdSignalQueryFields', () => {
-  it('should return proper fields for match_phrase filters', () => {
-    const mockHit = {
-      ...sampleDocNoSortIdNoVersion(),
-      _source: {
-        '@timestamp': '2020-11-03T02:31:47.431Z',
-        event: {
-          dataset: 'traefik.access',
-          module: 'traefik',
-        },
-        traefik: {
-          access: {
-            entryPointName: 'web-secure',
-          },
-        },
-        url: {
-          domain: 'kibana.siem.estc.dev',
-        },
-      },
-    };
-    const mockFilters = {
-      bool: {
-        must: [],
-        filter: [
-          {
-            bool: {
-              filter: [
-                {
-                  bool: {
-                    should: [
-                      {
-                        match_phrase: {
-                          'event.module': 'traefik',
-                        },
-                      },
-                    ],
-                    minimum_should_match: 1,
-                  },
-                },
-                {
-                  bool: {
-                    filter: [
-                      {
-                        bool: {
-                          should: [
-                            {
-                              match_phrase: {
-                                'event.dataset': 'traefik.access',
-                              },
-                            },
-                          ],
-                          minimum_should_match: 1,
-                        },
-                      },
-                      {
-                        bool: {
-                          should: [
-                            {
-                              match_phrase: {
-                                'traefik.access.entryPointName': 'web-secure',
-                              },
-                            },
-                          ],
-                          minimum_should_match: 1,
-                        },
-                      },
-                    ],
-                  },
-                },
-              ],
-            },
-          },
-          {
-            match_phrase: {
-              'url.domain': 'kibana.siem.estc.dev',
-            },
-          },
-        ],
-        should: [],
-        must_not: [],
-      },
-    };
-
-    expect(getThresholdSignalQueryFields(mockHit, mockFilters)).toEqual({
-      'event.dataset': 'traefik.access',
-      'event.module': 'traefik',
-      'traefik.access.entryPointName': 'web-secure',
-      'url.domain': 'kibana.siem.estc.dev',
-    });
-  });
-
-  it('should return proper fields object for nested match filters', () => {
-    const mockHit = {
-      ...sampleDocNoSortIdNoVersion(),
-      _source: {
-        '@timestamp': '2020-11-03T02:31:47.431Z',
-        event: {
-          dataset: 'traefik.access',
-          module: 'traefik',
-        },
-        url: {
-          domain: 'kibana.siem.estc.dev',
-        },
-      },
-    };
-    const filters = {
-      bool: {
-        must: [],
-        filter: [
-          {
-            bool: {
-              filter: [
-                {
-                  bool: {
-                    should: [
-                      {
-                        match_phrase: {
-                          'event.module': 'traefik',
-                        },
-                      },
-                    ],
-                    minimum_should_match: 1,
-                  },
-                },
-                {
-                  bool: {
-                    should: [
-                      {
-                        match: {
-                          'event.dataset': 'traefik.*',
-                        },
-                      },
-                    ],
-                    minimum_should_match: 1,
-                  },
-                },
-              ],
-            },
-          },
-        ],
-        should: [],
-        must_not: [],
-      },
-    };
-
-    expect(getThresholdSignalQueryFields(mockHit, filters)).toEqual({
-      'event.dataset': 'traefik.access',
-      'event.module': 'traefik',
-    });
-  });
-
-  it('should return proper object for simple match filters', () => {
-    const mockHit = {
-      ...sampleDocNoSortIdNoVersion(),
-      _source: {
-        '@timestamp': '2020-11-03T02:31:47.431Z',
-        event: {
-          dataset: 'traefik.access',
-          module: 'traefik',
-        },
-      },
-    };
-    const filters = {
-      bool: {
-        must: [],
-        filter: [
-          {
-            bool: {
-              should: [
-                {
-                  match: {
-                    'event.module': 'traefik',
-                  },
-                },
-              ],
-              minimum_should_match: 1,
-            },
-          },
-          {
-            match_phrase: {
-              'event.dataset': 'traefik.access',
-            },
-          },
-        ],
-        should: [],
-        must_not: [],
-      },
-    };
-
-    expect(getThresholdSignalQueryFields(mockHit, filters)).toEqual({
-      'event.dataset': 'traefik.access',
-      'event.module': 'traefik',
-    });
-  });
-
-  it('should return proper object for simple match_phrase filters', () => {
-    const mockHit = {
-      ...sampleDocNoSortIdNoVersion(),
-      _source: {
-        '@timestamp': '2020-11-03T02:31:47.431Z',
-        event: {
-          dataset: 'traefik.access',
-          module: 'traefik',
-        },
-      },
+describe('transformThresholdResultsToEcs', () => {
+  it('should return transformed threshold results', () => {
+    const threshold = {
+      field: 'source.ip',
+      value: 1,
     };
-    const filters = {
-      bool: {
-        must: [],
-        filter: [
-          {
-            bool: {
-              should: [
-                {
-                  match_phrase: {
-                    'event.module': 'traefik',
+    const startedAt = new Date('2020-12-17T16:27:00Z');
+    const transformedResults = transformThresholdResultsToEcs(
+      {
+        ...sampleDocSearchResultsNoSortId('abcd'),
+        aggregations: {
+          threshold: {
+            buckets: [
+              {
+                key: '127.0.0.1',
+                doc_count: 1,
+                top_threshold_hits: {
+                  hits: {
+                    hits: [sampleDocNoSortId('abcd')],
                   },
                 },
-              ],
-              minimum_should_match: 1,
-            },
-          },
-          {
-            match_phrase: {
-              'event.dataset': 'traefik.access',
-            },
+              },
+            ],
           },
-        ],
-        should: [],
-        must_not: [],
-      },
-    };
-
-    expect(getThresholdSignalQueryFields(mockHit, filters)).toEqual({
-      'event.module': 'traefik',
-      'event.dataset': 'traefik.access',
-    });
-  });
-
-  it('should return proper object for exists filters', () => {
-    const mockHit = {
-      ...sampleDocNoSortIdNoVersion(),
-      _source: {
-        '@timestamp': '2020-11-03T02:31:47.431Z',
-        event: {
-          module: 'traefik',
         },
       },
-    };
-    const filters = {
-      bool: {
-        should: [
-          {
-            bool: {
-              should: [
-                {
-                  exists: {
-                    field: 'process.name',
-                  },
-                },
-              ],
-              minimum_should_match: 1,
-            },
-          },
-          {
-            bool: {
-              should: [
-                {
-                  exists: {
-                    field: 'event.type',
-                  },
-                },
-              ],
-              minimum_should_match: 1,
-            },
-          },
-        ],
-        minimum_should_match: 1,
+      'test',
+      startedAt,
+      undefined,
+      loggingSystemMock.createLogger(),
+      threshold,
+      '1234',
+      undefined
+    );
+    const _id = calculateThresholdSignalUuid('1234', startedAt, 'source.ip', '127.0.0.1');
+    expect(transformedResults).toEqual({
+      took: 10,
+      timed_out: false,
+      _shards: {
+        total: 10,
+        successful: 10,
+        failed: 0,
+        skipped: 0,
       },
-    };
-    expect(getThresholdSignalQueryFields(mockHit, filters)).toEqual({});
-  });
-
-  it('should NOT add invalid characters from CIDR such as the "/" proper object for simple match_phrase filters', () => {
-    const mockHit = {
-      ...sampleDocNoSortIdNoVersion(),
-      _source: {
-        '@timestamp': '2020-11-03T02:31:47.431Z',
-        destination: {
-          ip: '192.168.0.16',
-        },
-        event: {
-          module: 'traefik',
+      results: {
+        hits: {
+          total: 1,
         },
       },
-    };
-    const filters = {
-      bool: {
-        must: [],
-        filter: [
+      hits: {
+        total: 100,
+        max_score: 100,
+        hits: [
           {
-            bool: {
-              should: [
-                {
-                  match: {
-                    'destination.ip': '192.168.0.0/16',
-                  },
-                },
-              ],
-              minimum_should_match: 1,
+            _id,
+            _index: 'test',
+            _source: {
+              '@timestamp': '2020-04-20T21:27:45+0000',
+              threshold_result: {
+                count: 1,
+                value: '127.0.0.1',
+              },
             },
           },
         ],
-        should: [],
-        must_not: [],
       },
-    };
-
-    expect(getThresholdSignalQueryFields(mockHit, filters)).toEqual({
-      'destination.ip': '192.168.0.16',
     });
   });
 });
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/bulk_create_threshold_signals.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/bulk_create_threshold_signals.ts
index a98aae4ec8107b..3cad33b2787495 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/bulk_create_threshold_signals.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/bulk_create_threshold_signals.ts
@@ -4,8 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import uuidv5 from 'uuid/v5';
-import { reduce, get, isEmpty } from 'lodash/fp';
+import { get, isEmpty } from 'lodash/fp';
 import set from 'set-value';
 
 import {
@@ -17,12 +16,10 @@ import { AlertServices } from '../../../../../alerts/server';
 import { RuleAlertAction } from '../../../../common/detection_engine/types';
 import { RuleTypeParams, RefreshTypes } from '../types';
 import { singleBulkCreate, SingleBulkCreateResponse } from './single_bulk_create';
-import { SignalSearchResponse, SignalSourceHit, ThresholdAggregationBucket } from './types';
+import { SignalSearchResponse, ThresholdAggregationBucket } from './types';
+import { calculateThresholdSignalUuid } from './utils';
 import { BuildRuleMessage } from './rule_messages';
 
-// used to generate constant Threshold Signals ID when run with the same params
-const NAMESPACE_ID = '0684ec03-7201-4ee0-8ee0-3a3f6b2479b2';
-
 interface BulkCreateThresholdSignalsParams {
   actions: RuleAlertAction[];
   someResult: SignalSearchResponse;
@@ -48,81 +45,6 @@ interface BulkCreateThresholdSignalsParams {
   buildRuleMessage: BuildRuleMessage;
 }
 
-interface FilterObject {
-  bool?: {
-    filter?: FilterObject | FilterObject[];
-    should?: Array<Record<string, Record<string, string>>>;
-  };
-}
-
-const injectFirstMatch = (
-  hit: SignalSourceHit,
-  match: object | Record<string, string>
-): Record<string, string> | undefined => {
-  if (match != null) {
-    for (const key of Object.keys(match)) {
-      return { [key]: get(key, hit._source) } as Record<string, string>;
-    }
-  }
-};
-
-const getNestedQueryFilters = (
-  hit: SignalSourceHit,
-  filtersObj: FilterObject
-): Record<string, string> => {
-  if (Array.isArray(filtersObj.bool?.filter)) {
-    return reduce(
-      (acc, filterItem) => {
-        const nestedFilter = getNestedQueryFilters(hit, filterItem);
-
-        if (nestedFilter) {
-          return { ...acc, ...nestedFilter };
-        }
-
-        return acc;
-      },
-      {},
-      filtersObj.bool?.filter
-    );
-  } else {
-    return (
-      (filtersObj.bool?.should &&
-        filtersObj.bool?.should[0] &&
-        (injectFirstMatch(hit, filtersObj.bool.should[0].match) ||
-          injectFirstMatch(hit, filtersObj.bool.should[0].match_phrase))) ??
-      {}
-    );
-  }
-};
-
-export const getThresholdSignalQueryFields = (hit: SignalSourceHit, filter: unknown) => {
-  const filters = get('bool.filter', filter);
-
-  return reduce(
-    (acc, item) => {
-      if (item.match_phrase) {
-        return { ...acc, ...injectFirstMatch(hit, item.match_phrase) };
-      }
-
-      if (item.bool?.should && (item.bool.should[0].match || item.bool.should[0].match_phrase)) {
-        return {
-          ...acc,
-          ...(injectFirstMatch(hit, item.bool.should[0].match) ||
-            injectFirstMatch(hit, item.bool.should[0].match_phrase)),
-        };
-      }
-
-      if (item.bool?.filter) {
-        return { ...acc, ...getNestedQueryFilters(hit, item) };
-      }
-
-      return acc;
-    },
-    {},
-    filters
-  );
-};
-
 const getTransformedHits = (
   results: SignalSearchResponse,
   inputIndex: string,
@@ -153,13 +75,12 @@ const getTransformedHits = (
         count: totalResults,
         value: ruleId,
       },
-      ...getThresholdSignalQueryFields(hit, filter),
     };
 
     return [
       {
         _index: inputIndex,
-        _id: uuidv5(`${ruleId}${startedAt}${threshold.field}`, NAMESPACE_ID),
+        _id: calculateThresholdSignalUuid(ruleId, startedAt, threshold.field),
         _source: source,
       },
     ];
@@ -183,14 +104,11 @@ const getTransformedHits = (
             count: docCount,
             value: get(threshold.field, hit._source),
           },
-          ...getThresholdSignalQueryFields(hit, filter),
         };
 
-        set(source, threshold.field, key);
-
         return {
           _index: inputIndex,
-          _id: uuidv5(`${ruleId}${startedAt}${threshold.field}${key}`, NAMESPACE_ID),
+          _id: calculateThresholdSignalUuid(ruleId, startedAt, threshold.field, key),
           _source: source,
         };
       }
@@ -226,6 +144,8 @@ export const transformThresholdResultsToEcs = (
     },
   };
 
+  delete thresholdResults.aggregations; // no longer needed
+
   set(thresholdResults, 'results.hits.total', transformedHits.length);
 
   return thresholdResults;
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.ts
index 7fd99a17598ae8..3928228357d4cb 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.ts
@@ -8,7 +8,6 @@
 
 import { Logger, KibanaRequest } from 'src/core/server';
 
-import { Filter } from 'src/plugins/data/common';
 import {
   SIGNALS_ID,
   DEFAULT_SEARCH_AFTER_PAGE_SIZE,
@@ -29,7 +28,6 @@ import {
   SignalRuleAlertTypeDefinition,
   RuleAlertAttributes,
   EqlSignalSearchResponse,
-  ThresholdQueryBucket,
   WrappedSignalHit,
 } from './types';
 import {
@@ -48,9 +46,9 @@ import { signalParamsSchema } from './signal_params_schema';
 import { siemRuleActionGroups } from './siem_rule_action_groups';
 import { findMlSignals } from './find_ml_signals';
 import { findThresholdSignals } from './find_threshold_signals';
-import { findPreviousThresholdSignals } from './find_previous_threshold_signals';
 import { bulkCreateMlSignals } from './bulk_create_ml_signals';
 import { bulkCreateThresholdSignals } from './bulk_create_threshold_signals';
+import { getThresholdBucketFilters } from './threshold_get_bucket_filters';
 import {
   scheduleNotificationActions,
   NotificationRuleTypeParams,
@@ -307,21 +305,11 @@ export const signalRulesAlertType = ({
           ]);
         } else if (isThresholdRule(type) && threshold) {
           const inputIndex = await getInputIndex(services, version, index);
-          const esFilter = await getFilter({
-            type,
-            filters,
-            language,
-            query,
-            savedId,
-            services,
-            index: inputIndex,
-            lists: exceptionItems ?? [],
-          });
 
           const {
-            searchResult: previousSignals,
+            filters: bucketFilters,
             searchErrors: previousSearchErrors,
-          } = await findPreviousThresholdSignals({
+          } = await getThresholdBucketFilters({
             indexPattern: [outputIndex],
             from,
             to,
@@ -333,29 +321,15 @@ export const signalRulesAlertType = ({
             buildRuleMessage,
           });
 
-          previousSignals.aggregations.threshold.buckets.forEach((bucket: ThresholdQueryBucket) => {
-            esFilter.bool.filter.push(({
-              bool: {
-                must_not: {
-                  bool: {
-                    must: [
-                      {
-                        term: {
-                          [threshold.field || 'signal.rule.rule_id']: bucket.key,
-                        },
-                      },
-                      {
-                        range: {
-                          [timestampOverride ?? '@timestamp']: {
-                            lte: bucket.lastSignalTimestamp.value_as_string,
-                          },
-                        },
-                      },
-                    ],
-                  },
-                },
-              },
-            } as unknown) as Filter);
+          const esFilter = await getFilter({
+            type,
+            filters: filters ? filters.concat(bucketFilters) : bucketFilters,
+            language,
+            query,
+            savedId,
+            services,
+            index: inputIndex,
+            lists: exceptionItems ?? [],
           });
 
           const { searchResult: thresholdResults, searchErrors } = await findThresholdSignals({
@@ -400,6 +374,7 @@ export const signalRulesAlertType = ({
             tags,
             buildRuleMessage,
           });
+
           result = mergeReturns([
             result,
             createSearchAfterReturnTypeFromResponse({
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/find_previous_threshold_signals.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threshold_find_previous_signals.ts
similarity index 100%
rename from x-pack/plugins/security_solution/server/lib/detection_engine/signals/find_previous_threshold_signals.ts
rename to x-pack/plugins/security_solution/server/lib/detection_engine/signals/threshold_find_previous_signals.ts
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threshold_get_bucket_filters.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threshold_get_bucket_filters.ts
new file mode 100644
index 00000000000000..bf060da1e76b8f
--- /dev/null
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threshold_get_bucket_filters.ts
@@ -0,0 +1,96 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { isEmpty } from 'lodash';
+
+import { Filter } from 'src/plugins/data/common';
+import { ESFilter } from '../../../../../../typings/elasticsearch';
+
+import { TimestampOverrideOrUndefined } from '../../../../common/detection_engine/schemas/common/schemas';
+import { AlertServices } from '../../../../../alerts/server';
+import { Logger } from '../../../../../../../src/core/server';
+import { ThresholdQueryBucket } from './types';
+import { BuildRuleMessage } from './rule_messages';
+import { findPreviousThresholdSignals } from './threshold_find_previous_signals';
+
+interface GetThresholdBucketFiltersParams {
+  from: string;
+  to: string;
+  indexPattern: string[];
+  services: AlertServices;
+  logger: Logger;
+  ruleId: string;
+  bucketByField: string;
+  timestampOverride: TimestampOverrideOrUndefined;
+  buildRuleMessage: BuildRuleMessage;
+}
+
+export const getThresholdBucketFilters = async ({
+  from,
+  to,
+  indexPattern,
+  services,
+  logger,
+  ruleId,
+  bucketByField,
+  timestampOverride,
+  buildRuleMessage,
+}: GetThresholdBucketFiltersParams): Promise<{
+  filters: Filter[];
+  searchErrors: string[];
+}> => {
+  const { searchResult, searchErrors } = await findPreviousThresholdSignals({
+    indexPattern,
+    from,
+    to,
+    services,
+    logger,
+    ruleId,
+    bucketByField,
+    timestampOverride,
+    buildRuleMessage,
+  });
+
+  const filters = searchResult.aggregations.threshold.buckets.reduce(
+    (acc: ESFilter[], bucket: ThresholdQueryBucket): ESFilter[] => {
+      const filter = {
+        bool: {
+          filter: [
+            {
+              range: {
+                [timestampOverride ?? '@timestamp']: {
+                  lte: bucket.lastSignalTimestamp.value_as_string,
+                },
+              },
+            },
+          ],
+        },
+      } as ESFilter;
+
+      if (!isEmpty(bucketByField)) {
+        (filter.bool.filter as ESFilter[]).push({
+          term: {
+            [bucketByField]: bucket.key,
+          },
+        });
+      }
+
+      return [...acc, filter];
+    },
+    [] as ESFilter[]
+  );
+
+  return {
+    filters: [
+      ({
+        bool: {
+          must_not: filters,
+        },
+      } as unknown) as Filter,
+    ],
+    searchErrors,
+  };
+};
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/utils.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/utils.test.ts
index dd936776f691aa..073e30bbc6e26b 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/utils.test.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/utils.test.ts
@@ -36,6 +36,7 @@ import {
   mergeReturns,
   createTotalHitsFromSearchResult,
   lastValidDate,
+  calculateThresholdSignalUuid,
 } from './utils';
 import { BulkResponseErrorAggregation, SearchAfterAndBulkCreateReturnType } from './types';
 import {
@@ -1303,4 +1304,18 @@ describe('utils', () => {
       expect(result).toEqual(4);
     });
   });
+
+  describe('calculateThresholdSignalUuid', () => {
+    it('should generate a uuid without key', () => {
+      const startedAt = new Date('2020-12-17T16:27:00Z');
+      const signalUuid = calculateThresholdSignalUuid('abcd', startedAt, 'agent.name');
+      expect(signalUuid).toEqual('c0cbe4b7-48de-5734-ae81-d8de3e79839d');
+    });
+
+    it('should generate a uuid with key', () => {
+      const startedAt = new Date('2019-11-18T13:32:00Z');
+      const signalUuid = calculateThresholdSignalUuid('abcd', startedAt, 'host.ip', '1.2.3.4');
+      expect(signalUuid).toEqual('f568509e-b570-5d3c-a7ed-7c73fd29ddaf');
+    });
+  });
 });
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/utils.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/utils.ts
index 2114f21d9cead6..18f6e8d127b1b3 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/utils.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/utils.ts
@@ -5,6 +5,7 @@
  */
 import { createHash } from 'crypto';
 import moment from 'moment';
+import uuidv5 from 'uuid/v5';
 import dateMath from '@elastic/datemath';
 
 import { TimestampOverrideOrUndefined } from '../../../../common/detection_engine/schemas/common/schemas';
@@ -661,3 +662,20 @@ export const createTotalHitsFromSearchResult = ({
       : searchResult.hits.total.value;
   return totalHits;
 };
+
+export const calculateThresholdSignalUuid = (
+  ruleId: string,
+  startedAt: Date,
+  thresholdField: string,
+  key?: string
+): string => {
+  // used to generate constant Threshold Signals ID when run with the same params
+  const NAMESPACE_ID = '0684ec03-7201-4ee0-8ee0-3a3f6b2479b2';
+
+  let baseString = `${ruleId}${startedAt}${thresholdField}`;
+  if (key != null) {
+    baseString = `${baseString}${key}`;
+  }
+
+  return uuidv5(baseString, NAMESPACE_ID);
+};

From f67f1ecc6288b743b52ce8fd69055d5de3461824 Mon Sep 17 00:00:00 2001
From: Daniil <daniil_suleiman@epam.com>
Date: Mon, 21 Dec 2020 13:42:25 +0300
Subject: [PATCH 52/75] Fix request with disabled aggregation (#85696)

* Fix request with disabled aggregation

* Update unit tests

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../search/expressions/esaggs/request_handler.test.ts    | 9 ++++++++-
 .../common/search/expressions/esaggs/request_handler.ts  | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/plugins/data/common/search/expressions/esaggs/request_handler.test.ts b/src/plugins/data/common/search/expressions/esaggs/request_handler.test.ts
index 78d169e8529c5a..9d0c63a8dc7aa4 100644
--- a/src/plugins/data/common/search/expressions/esaggs/request_handler.test.ts
+++ b/src/plugins/data/common/search/expressions/esaggs/request_handler.test.ts
@@ -150,7 +150,8 @@ describe('esaggs expression function - public', () => {
     });
   });
 
-  test('calls agg.postFlightRequest if it exiests', async () => {
+  test('calls agg.postFlightRequest if it exiests and agg is enabled', async () => {
+    mockParams.aggs.aggs[0].enabled = true;
     await handleRequest(mockParams);
     expect(mockParams.aggs.aggs[0].type.postFlightRequest).toHaveBeenCalledTimes(1);
 
@@ -160,6 +161,12 @@ describe('esaggs expression function - public', () => {
     expect(async () => await handleRequest(mockParams)).not.toThrowError();
   });
 
+  test('should skip agg.postFlightRequest call if the agg is disabled', async () => {
+    mockParams.aggs.aggs[0].enabled = false;
+    await handleRequest(mockParams);
+    expect(mockParams.aggs.aggs[0].type.postFlightRequest).toHaveBeenCalledTimes(0);
+  });
+
   test('tabifies response data', async () => {
     await handleRequest(mockParams);
     expect(tabifyAggResponse).toHaveBeenCalledWith(
diff --git a/src/plugins/data/common/search/expressions/esaggs/request_handler.ts b/src/plugins/data/common/search/expressions/esaggs/request_handler.ts
index e4385526ee6e8f..b773aad67c3f89 100644
--- a/src/plugins/data/common/search/expressions/esaggs/request_handler.ts
+++ b/src/plugins/data/common/search/expressions/esaggs/request_handler.ts
@@ -170,7 +170,7 @@ export const handleRequest = async ({
   // response data incorrectly in the inspector.
   let response = (searchSource as any).rawResponse;
   for (const agg of aggs.aggs) {
-    if (typeof agg.type.postFlightRequest === 'function') {
+    if (agg.enabled && typeof agg.type.postFlightRequest === 'function') {
       response = await agg.type.postFlightRequest(
         response,
         aggs,

From 74d1e39ea490e8fea45fe8c67806c2dbc2adbcc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Marcondes?=
 <55978943+cauemarcondes@users.noreply.github.com>
Date: Mon, 21 Dec 2020 12:36:20 +0100
Subject: [PATCH 53/75] [APM] Bug: Service overview: Link to Transactions list
 from the Overview page is broken (#86447)

* fixing link and refactoring some stuff

* addressing pr comments
---
 .../Waterfall/FlyoutTopLevelProperties.tsx    |  8 +++--
 .../SpanFlyout/StickySpanProperties.tsx       |  8 +++--
 .../service_details/service_detail_tabs.tsx   |  4 +--
 .../service_inventory/ServiceList/index.tsx   |  4 +--
 .../index.tsx                                 | 33 ++++++++++---------
 .../service_overview_errors_table/index.tsx   |  9 +++--
 .../index.tsx                                 | 15 ++++-----
 .../service_overview/table_link_flex_item.tsx | 14 --------
 ....tsx => service_transactions_overview.tsx} |  7 ++--
 .../Links/apm/transaction_overview_ink.tsx    | 31 +++++++++++++++++
 10 files changed, 78 insertions(+), 55 deletions(-)
 delete mode 100644 x-pack/plugins/apm/public/components/app/service_overview/table_link_flex_item.tsx
 rename x-pack/plugins/apm/public/components/shared/Links/apm/{TransactionOverviewLink.tsx => service_transactions_overview.tsx} (86%)
 create mode 100644 x-pack/plugins/apm/public/components/shared/Links/apm/transaction_overview_ink.tsx

diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx
index 0187ecd927e658..b0ef28fbb7b0d2 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx
@@ -13,7 +13,7 @@ import {
 import { Transaction } from '../../../../../../../typings/es_schemas/ui/transaction';
 import { TransactionDetailLink } from '../../../../../shared/Links/apm/TransactionDetailLink';
 import { StickyProperties } from '../../../../../shared/StickyProperties';
-import { TransactionOverviewLink } from '../../../../../shared/Links/apm/TransactionOverviewLink';
+import { ServiceOrTransactionsOverviewLink } from '../../../../../shared/Links/apm/service_transactions_overview';
 
 interface Props {
   transaction?: Transaction;
@@ -31,9 +31,11 @@ export function FlyoutTopLevelProperties({ transaction }: Props) {
       }),
       fieldName: SERVICE_NAME,
       val: (
-        <TransactionOverviewLink serviceName={transaction.service.name}>
+        <ServiceOrTransactionsOverviewLink
+          serviceName={transaction.service.name}
+        >
           {transaction.service.name}
-        </TransactionOverviewLink>
+        </ServiceOrTransactionsOverviewLink>
       ),
       width: '25%',
     },
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx
index c068fee3cd6c33..ca5b4938ff42ee 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx
@@ -15,7 +15,7 @@ import {
 import { NOT_AVAILABLE_LABEL } from '../../../../../../../../common/i18n';
 import { Span } from '../../../../../../../../typings/es_schemas/ui/span';
 import { StickyProperties } from '../../../../../../shared/StickyProperties';
-import { TransactionOverviewLink } from '../../../../../../shared/Links/apm/TransactionOverviewLink';
+import { ServiceOrTransactionsOverviewLink } from '../../../../../../shared/Links/apm/service_transactions_overview';
 import { TransactionDetailLink } from '../../../../../../shared/Links/apm/TransactionDetailLink';
 
 interface Props {
@@ -33,9 +33,11 @@ export function StickySpanProperties({ span, transaction }: Props) {
           }),
           fieldName: SERVICE_NAME,
           val: (
-            <TransactionOverviewLink serviceName={transaction.service.name}>
+            <ServiceOrTransactionsOverviewLink
+              serviceName={transaction.service.name}
+            >
               {transaction.service.name}
-            </TransactionOverviewLink>
+            </ServiceOrTransactionsOverviewLink>
           ),
           width: '25%',
         },
diff --git a/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx b/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx
index ae0dd85b6a8b55..961320baa6a4ec 100644
--- a/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx
@@ -15,7 +15,7 @@ import { useMetricOverviewHref } from '../../shared/Links/apm/MetricOverviewLink
 import { useServiceMapHref } from '../../shared/Links/apm/ServiceMapLink';
 import { useServiceNodeOverviewHref } from '../../shared/Links/apm/ServiceNodeOverviewLink';
 import { useServiceOverviewHref } from '../../shared/Links/apm/service_overview_link';
-import { useTransactionOverviewHref } from '../../shared/Links/apm/TransactionOverviewLink';
+import { useServiceOrTransactionsOverviewHref } from '../../shared/Links/apm/service_transactions_overview';
 import { MainTabs } from '../../shared/main_tabs';
 import { ErrorGroupOverview } from '../ErrorGroupOverview';
 import { ServiceMap } from '../ServiceMap';
@@ -60,7 +60,7 @@ export function ServiceDetailTabs({ serviceName, tab }: Props) {
 
   const transactionsTab = {
     key: 'transactions',
-    href: useTransactionOverviewHref(serviceName),
+    href: useServiceOrTransactionsOverviewHref(serviceName),
     text: i18n.translate('xpack.apm.serviceDetails.transactionsTabLabel', {
       defaultMessage: 'Transactions',
     }),
diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx
index a4c93f95dc53d7..157d3ecc738a1a 100644
--- a/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx
@@ -21,7 +21,7 @@ import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 import { fontSizes, px, truncate, unit } from '../../../../style/variables';
 import { ManagedTable, ITableColumn } from '../../../shared/ManagedTable';
 import { EnvironmentBadge } from '../../../shared/EnvironmentBadge';
-import { TransactionOverviewLink } from '../../../shared/Links/apm/TransactionOverviewLink';
+import { ServiceOrTransactionsOverviewLink } from '../../../shared/Links/apm/service_transactions_overview';
 import { AgentIcon } from '../../../shared/AgentIcon';
 import { HealthBadge } from './HealthBadge';
 import { ServiceListMetric } from './ServiceListMetric';
@@ -39,7 +39,7 @@ function formatString(value?: string | null) {
   return value || NOT_AVAILABLE_LABEL;
 }
 
-const AppLink = styled(TransactionOverviewLink)`
+const AppLink = styled(ServiceOrTransactionsOverviewLink)`
   font-size: ${fontSizes.large};
   ${truncate('100%')};
 `;
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx
index ed4f3277a4a045..ae297b840ebc88 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx
@@ -4,13 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexItem } from '@elastic/eui';
-import { EuiInMemoryTable } from '@elastic/eui';
-import { EuiTitle } from '@elastic/eui';
-import { EuiBasicTableColumn } from '@elastic/eui';
-import { EuiFlexGroup } from '@elastic/eui';
+import {
+  EuiBasicTableColumn,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiInMemoryTable,
+  EuiTitle,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values';
 import {
   asDuration,
   asPercent,
@@ -18,20 +21,18 @@ import {
 } from '../../../../../common/utils/formatters';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ServiceDependencyItem } from '../../../../../server/lib/services/get_service_dependencies';
-import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values';
-import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
+import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { callApmApi } from '../../../../services/rest/createCallApmApi';
-import { ServiceMapLink } from '../../../shared/Links/apm/ServiceMapLink';
-import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
-import { TableLinkFlexItem } from '../table_link_flex_item';
+import { px, unit } from '../../../../style/variables';
 import { AgentIcon } from '../../../shared/AgentIcon';
-import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
 import { SparkPlot } from '../../../shared/charts/spark_plot';
-import { px, unit } from '../../../../style/variables';
 import { ImpactBar } from '../../../shared/ImpactBar';
+import { ServiceMapLink } from '../../../shared/Links/apm/ServiceMapLink';
 import { ServiceOverviewLink } from '../../../shared/Links/apm/service_overview_link';
 import { SpanIcon } from '../../../shared/span_icon';
+import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
+import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
 import { ServiceOverviewTableContainer } from '../service_overview_table_container';
 
 interface Props {
@@ -192,8 +193,8 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
   return (
     <EuiFlexGroup direction="column" gutterSize="s">
       <EuiFlexItem>
-        <EuiFlexGroup responsive={false}>
-          <EuiFlexItem>
+        <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
             <EuiTitle size="xs">
               <h2>
                 {i18n.translate(
@@ -205,7 +206,7 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
               </h2>
             </EuiTitle>
           </EuiFlexItem>
-          <TableLinkFlexItem>
+          <EuiFlexItem grow={false}>
             <ServiceMapLink serviceName={serviceName}>
               {i18n.translate(
                 'xpack.apm.serviceOverview.dependenciesTableLinkText',
@@ -214,7 +215,7 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
                 }
               )}
             </ServiceMapLink>
-          </TableLinkFlexItem>
+          </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem>
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
index da74a6fc0004d5..d14ef648c22d3d 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
@@ -25,7 +25,6 @@ import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
 import { TimestampTooltip } from '../../../shared/TimestampTooltip';
 import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
 import { ServiceOverviewTableContainer } from '../service_overview_table_container';
-import { TableLinkFlexItem } from '../table_link_flex_item';
 
 interface Props {
   serviceName: string;
@@ -195,8 +194,8 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
   return (
     <EuiFlexGroup direction="column" gutterSize="s">
       <EuiFlexItem>
-        <EuiFlexGroup responsive={false}>
-          <EuiFlexItem>
+        <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
             <EuiTitle size="xs">
               <h2>
                 {i18n.translate('xpack.apm.serviceOverview.errorsTableTitle', {
@@ -205,13 +204,13 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
               </h2>
             </EuiTitle>
           </EuiFlexItem>
-          <TableLinkFlexItem>
+          <EuiFlexItem grow={false}>
             <ErrorOverviewLink serviceName={serviceName}>
               {i18n.translate('xpack.apm.serviceOverview.errorsTableLinkText', {
                 defaultMessage: 'View errors',
               })}
             </ErrorOverviewLink>
-          </TableLinkFlexItem>
+          </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem>
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx
index 6345d546c716fd..4b262f1f51319a 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx
@@ -20,6 +20,7 @@ import {
   asPercent,
   asTransactionRate,
 } from '../../../../../common/utils/formatters';
+import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { useLatencyAggregationType } from '../../../../hooks/use_latency_Aggregation_type';
@@ -28,13 +29,11 @@ import {
   callApmApi,
 } from '../../../../services/rest/createCallApmApi';
 import { px, unit } from '../../../../style/variables';
-import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink';
-import { TransactionOverviewLink } from '../../../shared/Links/apm/TransactionOverviewLink';
-import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
-import { TableLinkFlexItem } from '../table_link_flex_item';
 import { SparkPlot } from '../../../shared/charts/spark_plot';
 import { ImpactBar } from '../../../shared/ImpactBar';
-import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
+import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink';
+import { TransactionOverviewLink } from '../../../shared/Links/apm/transaction_overview_ink';
+import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
 import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
 import { ServiceOverviewTableContainer } from '../service_overview_table_container';
 
@@ -270,7 +269,7 @@ export function ServiceOverviewTransactionsTable(props: Props) {
     <EuiFlexGroup direction="column" gutterSize="s">
       <EuiFlexItem>
         <EuiFlexGroup justifyContent="spaceBetween" responsive={false}>
-          <EuiFlexItem>
+          <EuiFlexItem grow={false}>
             <EuiTitle size="xs">
               <h2>
                 {i18n.translate(
@@ -282,7 +281,7 @@ export function ServiceOverviewTransactionsTable(props: Props) {
               </h2>
             </EuiTitle>
           </EuiFlexItem>
-          <TableLinkFlexItem>
+          <EuiFlexItem grow={false}>
             <TransactionOverviewLink serviceName={serviceName}>
               {i18n.translate(
                 'xpack.apm.serviceOverview.transactionsTableLinkText',
@@ -291,7 +290,7 @@ export function ServiceOverviewTransactionsTable(props: Props) {
                 }
               )}
             </TransactionOverviewLink>
-          </TableLinkFlexItem>
+          </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem>
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/table_link_flex_item.tsx b/x-pack/plugins/apm/public/components/app/service_overview/table_link_flex_item.tsx
deleted file mode 100644
index 35df003af380d4..00000000000000
--- a/x-pack/plugins/apm/public/components/app/service_overview/table_link_flex_item.tsx
+++ /dev/null
@@ -1,14 +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 { EuiFlexItem } from '@elastic/eui';
-import styled from 'styled-components';
-
-export const TableLinkFlexItem = styled(EuiFlexItem)`
-  & > a {
-    text-align: right;
-  }
-`;
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/TransactionOverviewLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/service_transactions_overview.tsx
similarity index 86%
rename from x-pack/plugins/apm/public/components/shared/Links/apm/TransactionOverviewLink.tsx
rename to x-pack/plugins/apm/public/components/shared/Links/apm/service_transactions_overview.tsx
index 1d99b82a67326a..24a78e5d64749a 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/TransactionOverviewLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/service_transactions_overview.tsx
@@ -18,7 +18,7 @@ const persistedFilters: Array<keyof APMQueryParams> = [
   'latencyAggregationType',
 ];
 
-export function useTransactionOverviewHref(serviceName: string) {
+export function useServiceOrTransactionsOverviewHref(serviceName: string) {
   return useAPMHref(`/services/${serviceName}/transactions`, persistedFilters);
 }
 
@@ -26,7 +26,10 @@ interface Props extends APMLinkExtendProps {
   serviceName: string;
 }
 
-export function TransactionOverviewLink({ serviceName, ...rest }: Props) {
+export function ServiceOrTransactionsOverviewLink({
+  serviceName,
+  ...rest
+}: Props) {
   const { urlParams } = useUrlParams();
 
   return (
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/transaction_overview_ink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/transaction_overview_ink.tsx
new file mode 100644
index 00000000000000..d2978b3c02d532
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/transaction_overview_ink.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.
+ */
+
+import React from 'react';
+import { pickKeys } from '../../../../../common/utils/pick_keys';
+import { APMLink, APMLinkExtendProps } from './APMLink';
+import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
+import { APMQueryParams } from '../url_helpers';
+
+interface Props extends APMLinkExtendProps {
+  serviceName: string;
+}
+
+const persistedFilters: Array<keyof APMQueryParams> = [
+  'latencyAggregationType',
+];
+
+export function TransactionOverviewLink({ serviceName, ...rest }: Props) {
+  const { urlParams } = useUrlParams();
+
+  return (
+    <APMLink
+      path={`/services/${serviceName}/transactions/`}
+      query={pickKeys(urlParams as APMQueryParams, ...persistedFilters)}
+      {...rest}
+    />
+  );
+}

From c05533ebbda8ea57cacb3d732c439178f72d6e4b Mon Sep 17 00:00:00 2001
From: Thom Heymann <190132+thomheymann@users.noreply.github.com>
Date: Mon, 21 Dec 2020 11:42:51 +0000
Subject: [PATCH 54/75] Fix ECS HTTP scheme and improve docs (#86612)

---
 docs/user/security/audit-logging.asciidoc     | 189 +++++++++++++++++-
 .../server/audit/audit_events.test.ts         |   4 +-
 .../security/server/audit/audit_events.ts     |  18 +-
 3 files changed, 191 insertions(+), 20 deletions(-)

diff --git a/docs/user/security/audit-logging.asciidoc b/docs/user/security/audit-logging.asciidoc
index 7facde28e956f9..acb0f94cf878cb 100644
--- a/docs/user/security/audit-logging.asciidoc
+++ b/docs/user/security/audit-logging.asciidoc
@@ -47,9 +47,11 @@ For information on how to configure `xpack.security.audit.appender`, refer to
 
 Refer to the table of events that can be logged for auditing purposes. 
 
-Each event is broken down into `category`, `type`, `action` and `outcome` fields
+Each event is broken down into <<field-event-category, category>>, <<field-event-type, type>>, <<field-event-action, action>> and <<field-event-outcome, outcome>> fields
 to make it easy to filter, query and aggregate the resulting logs. 
 
+Refer to <<xpack-security-ecs-audit-schema>> for a table of fields that get logged with audit event. 
+
 [NOTE]
 ============================================================================
 To ensure that a record of every operation is persisted even in case of an
@@ -230,3 +232,188 @@ Refer to the corresponding {es} logs for potential write errors.
 | `http_request`
 | `unknown` | User is making an HTTP request.
 |======
+
+
+[[xpack-security-ecs-audit-schema]]
+==== ECS audit schema
+
+Audit logs are written in JSON using https://www.elastic.co/guide/en/ecs/1.6/index.html[Elastic Common Schema (ECS)] specification.
+
+[cols="2*<"]
+|======
+
+2+a| ===== Base Fields
+
+| *Field*
+| *Description*
+
+| `@timestamp`
+| Time when the event was generated. 
+
+Example: `2016-05-23T08:05:34.853Z`
+
+| `message`
+| Human readable description of the event. 
+
+2+a| ===== Event Fields
+
+| *Field*
+| *Description*
+
+| [[field-event-action]] `event.action`
+| The action captured by the event.
+
+Refer to <<xpack-security-ecs-audit-logging>> for a table of possible actions. 
+
+| [[field-event-category]] `event.category`
+| High level category associated with the event.
+
+This field is closely related to `event.type`, which is used as a subcategory.
+
+Possible values:
+`database`,
+`web`,
+`authentication`
+
+| [[field-event-type]] `event.type`
+| Subcategory associated with the event.
+
+This field can be used along with the `event.category` field to enable filtering events down to a level appropriate for single visualization.
+
+Possible values:
+`creation`,
+`access`,
+`change`,
+`deletion`
+
+| [[field-event-outcome]] `event.outcome`
+| Denotes whether the event represents a success or failure. 
+
+Possible values:
+`success`,
+`failure`,
+`unknown`
+
+2+a| ===== User Fields
+
+| *Field*
+| *Description*
+
+| `user.name`
+| Login name of the user.
+
+Example: `jdoe`
+
+| `user.roles[]`
+| Set of user roles at the time of the event.
+
+Example: `[kibana_admin, reporting_user]`
+
+2+a| ===== Kibana Fields
+
+| *Field*
+| *Description*
+
+| `kibana.space_id`
+| ID of the space associated with the event.
+
+Example: `default`
+
+| `kibana.session_id`
+| ID of the user session associated with the event. 
+
+Each login attempt results in a unique session id.
+
+| `kibana.saved_object.type`
+| Type of saved object associated with the event.
+
+Example: `dashboard`
+
+| `kibana.saved_object.id`
+| ID of the saved object associated with the event.
+
+| `kibana.authentication_provider`
+| Name of the authentication provider associated with the event.
+
+Example: `my-saml-provider`
+
+| `kibana.authentication_type`
+| Type of the authentication provider associated with the event.
+
+Example: `saml`
+
+| `kibana.authentication_realm`
+| Name of the Elasticsearch realm that has authenticated the user.
+
+Example: `native`
+
+| `kibana.lookup_realm`
+| Name of the Elasticsearch realm where the user details were retrieved from.
+
+Example: `native`
+
+| `kibana.add_to_spaces[]`
+| Set of space IDs that a saved object is being shared to as part of the event.
+
+Example: `[default, marketing]`
+
+| `kibana.delete_from_spaces[]`
+| Set of space IDs that a saved object is being removed from as part of the event.
+
+Example: `[marketing]`
+
+2+a| ===== Error Fields
+
+| *Field*
+| *Description*
+
+| `error.code`
+| Error code describing the error.
+
+| `error.message`
+| Error message. 
+
+2+a| ===== HTTP and URL Fields
+
+| *Field*
+| *Description*
+
+| `http.request.method`
+| HTTP request method.
+
+Example: `get`, `post`, `put`, `delete`
+
+| `url.domain`
+| Domain of the url.
+
+Example: `www.elastic.co`
+
+| `url.path`
+| Path of the request.
+
+Example: `/search`
+
+| `url.port`
+| Port of the request.
+
+Example: `443`
+
+| `url.query`
+| The query field describes the query string of the request.
+
+Example: `q=elasticsearch`
+
+| `url.scheme`
+| Scheme of the request.
+
+Example: `https`
+
+2+a| ===== Tracing Fields
+
+| *Field*
+| *Description*
+
+| `trace.id`
+| Unique identifier allowing events of the same transaction from {kib} and {es} to be be correlated.
+
+|======
diff --git a/x-pack/plugins/security/server/audit/audit_events.test.ts b/x-pack/plugins/security/server/audit/audit_events.test.ts
index 9bda628df66dcb..f7e41bce674ee5 100644
--- a/x-pack/plugins/security/server/audit/audit_events.test.ts
+++ b/x-pack/plugins/security/server/audit/audit_events.test.ts
@@ -284,7 +284,7 @@ describe('#httpRequestEvent', () => {
           "path": "/path",
           "port": undefined,
           "query": undefined,
-          "scheme": "http:",
+          "scheme": "http",
         },
       }
     `);
@@ -321,7 +321,7 @@ describe('#httpRequestEvent', () => {
           "path": "/original/path",
           "port": undefined,
           "query": "query=param",
-          "scheme": "http:",
+          "scheme": "http",
         },
       }
     `);
diff --git a/x-pack/plugins/security/server/audit/audit_events.ts b/x-pack/plugins/security/server/audit/audit_events.ts
index 7f0dd39162adff..b6538af31bd608 100644
--- a/x-pack/plugins/security/server/audit/audit_events.ts
+++ b/x-pack/plugins/security/server/audit/audit_events.ts
@@ -28,14 +28,9 @@ export interface AuditEvent {
     category?: EventCategory;
     type?: EventType;
     outcome?: EventOutcome;
-    module?: string;
-    dataset?: string;
   };
   user?: {
     name: string;
-    email?: string;
-    full_name?: string;
-    hash?: string;
     roles?: readonly string[];
   };
   kibana?: {
@@ -87,17 +82,10 @@ export interface AuditEvent {
   http?: {
     request?: {
       method?: string;
-      body?: {
-        content: string;
-      };
-    };
-    response?: {
-      status_code?: number;
     };
   };
   url?: {
     domain?: string;
-    full?: string;
     path?: string;
     port?: number;
     query?: string;
@@ -108,14 +96,10 @@ export interface AuditEvent {
 export enum EventCategory {
   DATABASE = 'database',
   WEB = 'web',
-  IAM = 'iam',
   AUTHENTICATION = 'authentication',
-  PROCESS = 'process',
 }
 
 export enum EventType {
-  USER = 'user',
-  GROUP = 'group',
   CREATION = 'creation',
   ACCESS = 'access',
   CHANGE = 'change',
@@ -152,7 +136,7 @@ export function httpRequestEvent({ request }: HttpRequestParams): AuditEvent {
       path: url.pathname,
       port: url.port ? parseInt(url.port, 10) : undefined,
       query: url.search ? url.search.slice(1) : undefined,
-      scheme: url.protocol,
+      scheme: url.protocol ? url.protocol.substr(0, url.protocol.length - 1) : undefined,
     },
   };
 }

From 6d72042ca4acf2e8bc4b92431ee6f93d7c14cf56 Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Mon, 21 Dec 2020 12:17:53 +0000
Subject: [PATCH 55/75] [ML] Fixing endpoint schema for can_delete_job endpoint
 (#86436)

* [ML] Fixing endpoint schema for can_delete_job endpoint

* changing get to post in docs

* renaming canUntag

* fixing typo

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../plugins/ml/common/types/saved_objects.ts  |  4 ++--
 .../delete_job_check_modal.tsx                | 20 +++++++++----------
 x-pack/plugins/ml/server/routes/apidoc.json   |  2 +-
 .../plugins/ml/server/routes/saved_objects.ts | 20 ++++++++++++++-----
 .../ml/server/routes/schemas/saved_objects.ts |  5 +++++
 .../plugins/ml/server/saved_objects/checks.ts | 16 +++++++--------
 .../apis/ml/saved_objects/can_delete_job.ts   |  8 ++++----
 7 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/x-pack/plugins/ml/common/types/saved_objects.ts b/x-pack/plugins/ml/common/types/saved_objects.ts
index 8783113502623f..259f9be1a1b26e 100644
--- a/x-pack/plugins/ml/common/types/saved_objects.ts
+++ b/x-pack/plugins/ml/common/types/saved_objects.ts
@@ -21,7 +21,7 @@ export interface SyncSavedObjectResponse {
 export interface CanDeleteJobResponse {
   [jobId: string]: {
     canDelete: boolean;
-    canUntag: boolean;
+    canRemoveFromSpace: boolean;
   };
 }
 
@@ -41,5 +41,5 @@ export interface DeleteJobCheckResponse {
 
 export interface DeleteJobPermission {
   canDelete: boolean;
-  canUntag: boolean;
+  canRemoveFromSpace: boolean;
 }
diff --git a/x-pack/plugins/ml/public/application/components/delete_job_check_modal/delete_job_check_modal.tsx b/x-pack/plugins/ml/public/application/components/delete_job_check_modal/delete_job_check_modal.tsx
index 151946ab31fd98..4393d2b2fcf4dc 100644
--- a/x-pack/plugins/ml/public/application/components/delete_job_check_modal/delete_job_check_modal.tsx
+++ b/x-pack/plugins/ml/public/application/components/delete_job_check_modal/delete_job_check_modal.tsx
@@ -36,31 +36,31 @@ interface ModalContentReturnType {
 
 interface JobCheckRespSummary {
   canDelete: boolean;
-  canUntag: boolean;
+  canRemoveFromSpace: boolean;
   canTakeAnyAction: boolean;
 }
 
 function getRespSummary(resp: CanDeleteJobResponse): JobCheckRespSummary {
   const jobsChecked = Object.keys(resp);
   // Default to first job's permissions
-  const { canDelete, canUntag } = resp[jobsChecked[0]];
+  const { canDelete, canRemoveFromSpace } = resp[jobsChecked[0]];
   let canTakeAnyAction = true;
 
   if (jobsChecked.length > 1) {
     // Check all jobs and make sure they have the same permissions - otherwise no action can be taken
     canTakeAnyAction = jobsChecked.every(
-      (id) => resp[id].canDelete === canDelete && resp[id].canUntag === canUntag
+      (id) => resp[id].canDelete === canDelete && resp[id].canRemoveFromSpace === canRemoveFromSpace
     );
   }
 
-  return { canDelete, canUntag, canTakeAnyAction };
+  return { canDelete, canRemoveFromSpace, canTakeAnyAction };
 }
 
 function getModalContent(
   jobIds: string[],
   respSummary: JobCheckRespSummary
 ): ModalContentReturnType {
-  const { canDelete, canUntag, canTakeAnyAction } = respSummary;
+  const { canDelete, canRemoveFromSpace, canTakeAnyAction } = respSummary;
 
   if (canTakeAnyAction === false) {
     return {
@@ -116,7 +116,7 @@ function getModalContent(
         </EuiText>
       ),
     };
-  } else if (canUntag) {
+  } else if (canRemoveFromSpace) {
     return {
       buttonText: (
         <FormattedMessage
@@ -173,8 +173,8 @@ export const DeleteJobCheckModal: FC<Props> = ({
     // Do the spaces check and set the content for the modal and buttons depending on results
     canDeleteJob(jobType, jobIds).then((resp) => {
       const respSummary = getRespSummary(resp);
-      const { canDelete, canUntag, canTakeAnyAction } = respSummary;
-      if (canTakeAnyAction && canDelete && !canUntag) {
+      const { canDelete, canRemoveFromSpace, canTakeAnyAction } = respSummary;
+      if (canTakeAnyAction && canDelete && !canRemoveFromSpace) {
         // Go straight to delete flow if that's the only action available
         canDeleteCallback();
         return;
@@ -260,7 +260,7 @@ export const DeleteJobCheckModal: FC<Props> = ({
                 <EuiFlexItem grow={false}>
                   {!hasUntagged &&
                     jobCheckRespSummary?.canTakeAnyAction &&
-                    jobCheckRespSummary?.canUntag &&
+                    jobCheckRespSummary?.canRemoveFromSpace &&
                     jobCheckRespSummary?.canDelete && (
                       <EuiButtonEmpty
                         isLoading={isUntagging}
@@ -277,7 +277,7 @@ export const DeleteJobCheckModal: FC<Props> = ({
                     size="s"
                     onClick={
                       jobCheckRespSummary?.canTakeAnyAction &&
-                      jobCheckRespSummary?.canUntag &&
+                      jobCheckRespSummary?.canRemoveFromSpace &&
                       !jobCheckRespSummary?.canDelete
                         ? onUntagClick
                         : onClick
diff --git a/x-pack/plugins/ml/server/routes/apidoc.json b/x-pack/plugins/ml/server/routes/apidoc.json
index bf002907b1a434..015ec6e4ec9c0a 100644
--- a/x-pack/plugins/ml/server/routes/apidoc.json
+++ b/x-pack/plugins/ml/server/routes/apidoc.json
@@ -151,7 +151,7 @@
     "RemoveJobsFromSpaces",
     "RemoveJobsFromCurrentSpace",
     "JobsSpaces",
-    "DeleteJobCheck",
+    "CanDeleteJob",
 
     "TrainedModels",
     "GetTrainedModel",
diff --git a/x-pack/plugins/ml/server/routes/saved_objects.ts b/x-pack/plugins/ml/server/routes/saved_objects.ts
index 29f9b218ea177a..a5144ab2a7af7e 100644
--- a/x-pack/plugins/ml/server/routes/saved_objects.ts
+++ b/x-pack/plugins/ml/server/routes/saved_objects.ts
@@ -12,8 +12,8 @@ import {
   jobsAndCurrentSpace,
   syncJobObjects,
   jobTypeSchema,
+  canDeleteJobSchema,
 } from './schemas/saved_objects';
-import { jobIdsSchema } from './schemas/job_service_schema';
 import { spacesUtilsProvider } from '../lib/spaces_utils';
 import { JobType } from '../../common/types/saved_objects';
 
@@ -284,13 +284,23 @@ export function savedObjectsRoutes(
   /**
    * @apiGroup JobSavedObjects
    *
-   * @api {get} /api/ml/saved_objects/delete_job_check Check whether user can delete a job
-   * @apiName DeleteJobCheck
+   * @api {post} /api/ml/saved_objects/can_delete_job Check whether user can delete a job
+   * @apiName CanDeleteJob
    * @apiDescription Check the user's ability to delete jobs. Returns whether they are able
    *                 to fully delete the job and whether they are able to remove it from
    *                 the current space.
+   *                 Note, this is only for enabling UI controls. A user calling endpoints
+   *                 directly will still be able to delete or remove the job from a space.
    *
-   * @apiSchema (body) jobIdsSchema (params) jobTypeSchema
+   * @apiSchema (params) jobTypeSchema
+   * @apiSchema (body) jobIdsSchema
+   * @apiSuccessExample {json} Error-Response:
+   * {
+   *   "my_job": {
+   *     "canDelete": false,
+   *     "canRemoveFromSpace": true
+   *   }
+   * }
    *
    */
   router.post(
@@ -298,7 +308,7 @@ export function savedObjectsRoutes(
       path: '/api/ml/saved_objects/can_delete_job/{jobType}',
       validate: {
         params: jobTypeSchema,
-        body: jobIdsSchema,
+        body: canDeleteJobSchema,
       },
       options: {
         tags: ['access:ml:canGetJobs', 'access:ml:canGetDataFrameAnalytics'],
diff --git a/x-pack/plugins/ml/server/routes/schemas/saved_objects.ts b/x-pack/plugins/ml/server/routes/schemas/saved_objects.ts
index 147398694f191c..a64d38a9fda70c 100644
--- a/x-pack/plugins/ml/server/routes/schemas/saved_objects.ts
+++ b/x-pack/plugins/ml/server/routes/schemas/saved_objects.ts
@@ -22,3 +22,8 @@ export const syncJobObjects = schema.object({ simulate: schema.maybe(schema.bool
 export const jobTypeSchema = schema.object({
   jobType: schema.string(),
 });
+
+export const canDeleteJobSchema = schema.object({
+  /** List of job IDs. */
+  jobIds: schema.arrayOf(schema.maybe(schema.string())),
+});
diff --git a/x-pack/plugins/ml/server/saved_objects/checks.ts b/x-pack/plugins/ml/server/saved_objects/checks.ts
index f682999cd59666..9258b143c9747b 100644
--- a/x-pack/plugins/ml/server/saved_objects/checks.ts
+++ b/x-pack/plugins/ml/server/saved_objects/checks.ts
@@ -180,7 +180,7 @@ export function checksFactory(
       return jobIds.reduce((results, jobId) => {
         results[jobId] = {
           canDelete: false,
-          canUntag: false,
+          canRemoveFromSpace: false,
         };
         return results;
       }, {} as DeleteJobCheckResponse);
@@ -191,7 +191,7 @@ export function checksFactory(
       return jobIds.reduce((results, jobId) => {
         results[jobId] = {
           canDelete: true,
-          canUntag: false,
+          canRemoveFromSpace: false,
         };
         return results;
       }, {} as DeleteJobCheckResponse);
@@ -208,7 +208,7 @@ export function checksFactory(
         // job saved object not found
         results[jobId] = {
           canDelete: false,
-          canUntag: false,
+          canRemoveFromSpace: false,
         };
         return results;
       }
@@ -220,7 +220,7 @@ export function checksFactory(
       if (canCreateGlobalJobs && isGlobalJob) {
         results[jobId] = {
           canDelete: true,
-          canUntag: false,
+          canRemoveFromSpace: false,
         };
         return results;
       }
@@ -229,20 +229,20 @@ export function checksFactory(
       if (isGlobalJob) {
         results[jobId] = {
           canDelete: false,
-          canUntag: false,
+          canRemoveFromSpace: false,
         };
         return results;
       }
 
       // jobs with are in individual spaces can only be untagged
       // from current space if the job is in more than 1 space
-      const canUntag = namespaces.length > 1;
+      const canRemoveFromSpace = namespaces.length > 1;
 
       // job is in individual spaces, user cannot see all of them - untag only, no delete
       if (namespaces.includes('?')) {
         results[jobId] = {
           canDelete: false,
-          canUntag,
+          canRemoveFromSpace,
         };
         return results;
       }
@@ -250,7 +250,7 @@ export function checksFactory(
       // job is individual spaces, user can see all of them - delete and option to untag
       results[jobId] = {
         canDelete: true,
-        canUntag,
+        canRemoveFromSpace,
       };
       return results;
     }, {} as DeleteJobCheckResponse);
diff --git a/x-pack/test/api_integration/apis/ml/saved_objects/can_delete_job.ts b/x-pack/test/api_integration/apis/ml/saved_objects/can_delete_job.ts
index d95c90d417203a..e80d5a333bbdf0 100644
--- a/x-pack/test/api_integration/apis/ml/saved_objects/can_delete_job.ts
+++ b/x-pack/test/api_integration/apis/ml/saved_objects/can_delete_job.ts
@@ -75,7 +75,7 @@ export default ({ getService }: FtrProviderContext) => {
         idSpace1
       );
 
-      expect(body).to.eql({ [adJobIdSpace12]: { canDelete: false, canUntag: true } });
+      expect(body).to.eql({ [adJobIdSpace12]: { canDelete: false, canRemoveFromSpace: true } });
     });
 
     it('job in individual spaces, all spaces user can delete and untag', async () => {
@@ -87,7 +87,7 @@ export default ({ getService }: FtrProviderContext) => {
         idSpace1
       );
 
-      expect(body).to.eql({ [adJobIdSpace12]: { canDelete: true, canUntag: true } });
+      expect(body).to.eql({ [adJobIdSpace12]: { canDelete: true, canRemoveFromSpace: true } });
     });
 
     it('job in * space, single space user can not untag or delete', async () => {
@@ -99,7 +99,7 @@ export default ({ getService }: FtrProviderContext) => {
         idSpace1
       );
 
-      expect(body).to.eql({ [adJobIdStarSpace]: { canDelete: false, canUntag: false } });
+      expect(body).to.eql({ [adJobIdStarSpace]: { canDelete: false, canRemoveFromSpace: false } });
     });
 
     it('job in * space, all spaces user can delete but not untag', async () => {
@@ -111,7 +111,7 @@ export default ({ getService }: FtrProviderContext) => {
         idStarSpace
       );
 
-      expect(body).to.eql({ [adJobIdStarSpace]: { canDelete: true, canUntag: false } });
+      expect(body).to.eql({ [adJobIdStarSpace]: { canDelete: true, canRemoveFromSpace: false } });
     });
   });
 };

From 388b2508b312d61f3fc480e2dc88379bc66ed9ce Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Mon, 21 Dec 2020 14:26:14 +0100
Subject: [PATCH 56/75] [Lens] Make sure Lens does not reload unnecessarily
 (#86092)

---
 .../public/react_expression_renderer.test.tsx | 38 +++++++++
 .../public/react_expression_renderer.tsx      | 18 +++--
 .../lens/public/app_plugin/mounter.tsx        | 80 +++++++++++--------
 .../editor_frame/suggestion_panel.tsx         | 14 +++-
 4 files changed, 108 insertions(+), 42 deletions(-)

diff --git a/src/plugins/expressions/public/react_expression_renderer.test.tsx b/src/plugins/expressions/public/react_expression_renderer.test.tsx
index e52d4d153882ff..4ebd626e70fc3e 100644
--- a/src/plugins/expressions/public/react_expression_renderer.test.tsx
+++ b/src/plugins/expressions/public/react_expression_renderer.test.tsx
@@ -146,6 +146,44 @@ describe('ExpressionRenderer', () => {
     instance.unmount();
   });
 
+  it('waits for debounce period on other loader option change if specified', () => {
+    jest.useFakeTimers();
+
+    const refreshSubject = new Subject();
+    const loaderUpdate = jest.fn();
+
+    (ExpressionLoader as jest.Mock).mockImplementation(() => {
+      return {
+        render$: new Subject(),
+        data$: new Subject(),
+        loading$: new Subject(),
+        update: loaderUpdate,
+        destroy: jest.fn(),
+      };
+    });
+
+    const instance = mount(
+      <ReactExpressionRenderer
+        reload$={refreshSubject}
+        expression=""
+        debounce={1000}
+        searchContext={{ from: 'now-15m', to: 'now' }}
+      />
+    );
+
+    instance.setProps({ searchContext: { from: 'now-30m', to: 'now' } });
+
+    expect(loaderUpdate).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(loaderUpdate).toHaveBeenCalledTimes(2);
+
+    instance.unmount();
+  });
+
   it('should display a custom error message if the user provides one and then remove it after successful render', () => {
     const dataSubject = new Subject();
     const data$ = dataSubject.asObservable().pipe(share());
diff --git a/src/plugins/expressions/public/react_expression_renderer.tsx b/src/plugins/expressions/public/react_expression_renderer.tsx
index 894325c8b65f7d..eac2371ec66d0c 100644
--- a/src/plugins/expressions/public/react_expression_renderer.tsx
+++ b/src/plugins/expressions/public/react_expression_renderer.tsx
@@ -90,21 +90,23 @@ export const ReactExpressionRenderer = ({
     null
   );
   const [debouncedExpression, setDebouncedExpression] = useState(expression);
-  useEffect(() => {
+  const [waitingForDebounceToComplete, setDebouncePending] = useState(false);
+  useShallowCompareEffect(() => {
     if (debounce === undefined) {
       return;
     }
+    setDebouncePending(true);
     const handler = setTimeout(() => {
       setDebouncedExpression(expression);
+      setDebouncePending(false);
     }, debounce);
 
     return () => {
       clearTimeout(handler);
     };
-  }, [expression, debounce]);
+  }, [expression, expressionLoaderOptions, debounce]);
 
   const activeExpression = debounce !== undefined ? debouncedExpression : expression;
-  const waitingForDebounceToComplete = debounce !== undefined && expression !== debouncedExpression;
 
   /* eslint-disable react-hooks/exhaustive-deps */
   // OK to ignore react-hooks/exhaustive-deps because options update is handled by calling .update()
@@ -182,12 +184,16 @@ export const ReactExpressionRenderer = ({
   // Re-fetch data automatically when the inputs change
   useShallowCompareEffect(
     () => {
-      if (expressionLoaderRef.current) {
+      // only update the loader if the debounce period is over
+      if (expressionLoaderRef.current && !waitingForDebounceToComplete) {
         expressionLoaderRef.current.update(activeExpression, expressionLoaderOptions);
       }
     },
-    // when expression is changed by reference and when any other loaderOption is changed by reference
-    [{ activeExpression, ...expressionLoaderOptions }]
+    // when debounced, wait for debounce status to change to update loader.
+    // Otherwise, update when expression is changed by reference and when any other loaderOption is changed by reference
+    debounce === undefined
+      ? [{ activeExpression, ...expressionLoaderOptions }]
+      : [{ waitingForDebounceToComplete }]
   );
 
   /* eslint-enable react-hooks/exhaustive-deps */
diff --git a/x-pack/plugins/lens/public/app_plugin/mounter.tsx b/x-pack/plugins/lens/public/app_plugin/mounter.tsx
index b09ecfdcd5553a..fbfd9c57589480 100644
--- a/x-pack/plugins/lens/public/app_plugin/mounter.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/mounter.tsx
@@ -3,11 +3,12 @@
  * 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 React, { useCallback } from 'react';
 
 import { AppMountParameters, CoreSetup } from 'kibana/public';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
 import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { History } from 'history';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { i18n } from '@kbn/i18n';
 
@@ -86,25 +87,22 @@ export async function mountApp(
     })
   );
 
-  const getInitialInput = (
-    routeProps: RouteComponentProps<{ id?: string }>,
-    editByValue?: boolean
-  ): LensEmbeddableInput | undefined => {
+  const getInitialInput = (id?: string, editByValue?: boolean): LensEmbeddableInput | undefined => {
     if (editByValue) {
       return embeddableEditorIncomingState?.valueInput as LensByValueInput;
     }
-    if (routeProps.match.params.id) {
-      return { savedObjectId: routeProps.match.params.id } as LensByReferenceInput;
+    if (id) {
+      return { savedObjectId: id } as LensByReferenceInput;
     }
   };
 
-  const redirectTo = (routeProps: RouteComponentProps<{ id?: string }>, savedObjectId?: string) => {
+  const redirectTo = (history: History<unknown>, savedObjectId?: string) => {
     if (!savedObjectId) {
-      routeProps.history.push({ pathname: '/', search: routeProps.history.location.search });
+      history.push({ pathname: '/', search: history.location.search });
     } else {
-      routeProps.history.push({
+      history.push({
         pathname: `/edit/${savedObjectId}`,
-        search: routeProps.history.location.search,
+        search: history.location.search,
       });
     }
   };
@@ -144,27 +142,45 @@ export async function mountApp(
     }
   };
 
-  const renderEditor = (
-    routeProps: RouteComponentProps<{ id?: string }>,
-    editByValue?: boolean
+  // const featureFlagConfig = await getByValueFeatureFlag();
+  const EditorRenderer = React.memo(
+    (props: { id?: string; history: History<unknown>; editByValue?: boolean }) => {
+      const redirectCallback = useCallback(
+        (id?: string) => {
+          redirectTo(props.history, id);
+        },
+        [props.history]
+      );
+      trackUiEvent('loaded');
+      return (
+        <App
+          incomingState={embeddableEditorIncomingState}
+          editorFrame={instance}
+          initialInput={getInitialInput(props.id, props.editByValue)}
+          redirectTo={redirectCallback}
+          redirectToOrigin={redirectToOrigin}
+          redirectToDashboard={redirectToDashboard}
+          onAppLeave={params.onAppLeave}
+          setHeaderActionMenu={params.setHeaderActionMenu}
+          history={props.history}
+          initialContext={
+            historyLocationState && historyLocationState.type === ACTION_VISUALIZE_LENS_FIELD
+              ? historyLocationState.payload
+              : undefined
+          }
+        />
+      );
+    }
+  );
+
+  const EditorRoute = (
+    routeProps: RouteComponentProps<{ id?: string }> & { editByValue?: boolean }
   ) => {
-    trackUiEvent('loaded');
     return (
-      <App
-        incomingState={embeddableEditorIncomingState}
-        editorFrame={instance}
-        initialInput={getInitialInput(routeProps, editByValue)}
-        redirectTo={(savedObjectId?: string) => redirectTo(routeProps, savedObjectId)}
-        redirectToOrigin={redirectToOrigin}
-        redirectToDashboard={redirectToDashboard}
-        onAppLeave={params.onAppLeave}
-        setHeaderActionMenu={params.setHeaderActionMenu}
+      <EditorRenderer
+        id={routeProps.match.params.id}
         history={routeProps.history}
-        initialContext={
-          historyLocationState && historyLocationState.type === ACTION_VISUALIZE_LENS_FIELD
-            ? historyLocationState.payload
-            : undefined
-        }
+        editByValue={routeProps.editByValue}
       />
     );
   };
@@ -185,13 +201,13 @@ export async function mountApp(
       <KibanaContextProvider services={lensServices}>
         <HashRouter>
           <Switch>
-            <Route exact path="/edit/:id" render={renderEditor} />
+            <Route exact path="/edit/:id" component={EditorRoute} />
             <Route
               exact
               path={`/${LENS_EDIT_BY_VALUE}`}
-              render={(routeProps) => renderEditor(routeProps, true)}
+              render={(routeProps) => <EditorRoute {...routeProps} editByValue />}
             />
-            <Route exact path="/" render={renderEditor} />
+            <Route exact path="/" component={EditorRoute} />
             <Route path="/" component={NotFound} />
           </Switch>
         </HashRouter>
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
index e42d4daffbb66d..338a998b6b4dc8 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
@@ -7,7 +7,7 @@
 import './suggestion_panel.scss';
 
 import _, { camelCase } from 'lodash';
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiIcon,
@@ -270,13 +270,19 @@ export function SuggestionPanel({
     [frame.query, frame.dateRange.fromDate, frame.dateRange.toDate, frame.filters]
   );
 
+  const contextRef = useRef<ExecutionContextSearch>(context);
+  contextRef.current = context;
+
   const AutoRefreshExpressionRenderer = useMemo(() => {
     const autoRefreshFetch$ = plugins.data.query.timefilter.timefilter.getAutoRefreshFetch$();
     return (props: ReactExpressionRendererProps) => (
-      <ExpressionRendererComponent {...props} searchContext={context} reload$={autoRefreshFetch$} />
+      <ExpressionRendererComponent
+        {...props}
+        searchContext={contextRef.current}
+        reload$={autoRefreshFetch$}
+      />
     );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [plugins.data.query.timefilter.timefilter, context]);
+  }, [plugins.data.query.timefilter.timefilter, ExpressionRendererComponent]);
 
   const [lastSelectedSuggestion, setLastSelectedSuggestion] = useState<number>(-1);
 

From 36a8343064849c09fffd7a2d010cb38a028d82d6 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Mon, 21 Dec 2020 15:02:51 +0100
Subject: [PATCH 57/75] fix time scaling bugs (#86444)

---
 .../indexpattern_datasource/indexpattern.test.ts |  3 +++
 .../suffix_formatter.test.ts                     | 16 ++++++++++++++++
 .../indexpattern_datasource/suffix_formatter.ts  |  5 +++++
 .../indexpattern_datasource/to_expression.ts     |  1 +
 4 files changed, 25 insertions(+)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.test.ts b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.test.ts
index 042ea0353ac635..2e55abf4a429ad 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.test.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.test.ts
@@ -530,6 +530,9 @@ describe('IndexPattern Data Source', () => {
           "outputColumnId": Array [
             "col1",
           ],
+          "outputColumnName": Array [
+            "Count of records",
+          ],
           "targetUnit": Array [
             "h",
           ],
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/suffix_formatter.test.ts b/x-pack/plugins/lens/public/indexpattern_datasource/suffix_formatter.test.ts
index ef1739e4424fa3..ade6ba099d70e9 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/suffix_formatter.test.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/suffix_formatter.test.ts
@@ -25,4 +25,20 @@ describe('suffix formatter', () => {
     expect(convertMock).toHaveBeenCalledWith(12345);
     expect(formatFactory).toHaveBeenCalledWith({ id: 'nestedFormatter', params: nestedParams });
   });
+
+  it('should not add suffix to empty strings', () => {
+    const convertMock = jest.fn((x) => '');
+    const formatFactory = jest.fn(() => ({ convert: convertMock }));
+    const SuffixFormatter = getSuffixFormatter((formatFactory as unknown) as FormatFactory);
+    const nestedParams = { abc: 123 };
+    const formatterInstance = new SuffixFormatter({
+      unit: 'h',
+      id: 'nestedFormatter',
+      params: nestedParams,
+    });
+
+    const result = formatterInstance.convert(12345);
+
+    expect(result).toEqual('');
+  });
 });
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/suffix_formatter.ts b/x-pack/plugins/lens/public/indexpattern_datasource/suffix_formatter.ts
index f5d764acab0869..3d9f3be01a11bb 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/suffix_formatter.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/suffix_formatter.ts
@@ -49,6 +49,11 @@ export function getSuffixFormatter(formatFactory: FormatFactory) {
         val
       );
 
+      // do not add suffixes to empty strings
+      if (formattedValue === '') {
+        return '';
+      }
+
       if (suffix) {
         return `${formattedValue}${suffix}`;
       }
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/to_expression.ts b/x-pack/plugins/lens/public/indexpattern_datasource/to_expression.ts
index a85b8920366b55..a5ce4dfbea371f 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/to_expression.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/to_expression.ts
@@ -121,6 +121,7 @@ function getExpressionForLayer(
             dateColumnId: [firstDateHistogramColumn![0]],
             inputColumnId: [id],
             outputColumnId: [id],
+            outputColumnName: [col.label],
             targetUnit: [col.timeScale!],
           },
         };

From 34803ed98bbe6e04a11add288b1f9fae8bc3e201 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Mon, 21 Dec 2020 15:13:07 +0100
Subject: [PATCH 58/75] [Logs UI] Toggle log entry context menu when user
 clicks the trigger button (#86307)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../logging/log_text_stream/log_entry_context_menu.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_context_menu.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_context_menu.tsx
index c627d6eda22a57..fe57b9db0e8b7c 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_context_menu.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_context_menu.tsx
@@ -60,7 +60,7 @@ export const LogEntryContextMenu: React.FC<LogEntryContextMenuProps> = ({
         size="s"
         fill
         aria-label={ariaLabel || DEFAULT_MENU_LABEL}
-        onClick={onOpen}
+        onClick={isOpen ? onClose : onOpen}
         minWidth="auto"
       >
         <EuiIcon type="boxesHorizontal" />

From d744eaec8ce40516fd0d6e81ba784e2dec5ca24f Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Mon, 21 Dec 2020 15:22:42 +0100
Subject: [PATCH 59/75] [ML] Data Frame Analytics: Scatterplot Matrix Fixes
 (#86357)

- use ml API service from the Kibana context
- adds jest tests for the Vega Lite Spec generator
- fix chart layout overflow with too many fields selected
---
 .../scatterplot_matrix.scss                   |   2 +
 .../scatterplot_matrix/scatterplot_matrix.tsx |   6 +-
 .../scatterplot_matrix_vega_lite_spec.test.ts | 170 ++++++++++++++++++
 .../scatterplot_matrix_vega_lite_spec.ts      |  21 ++-
 4 files changed, 188 insertions(+), 11 deletions(-)
 create mode 100644 x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.test.ts

diff --git a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.scss b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.scss
index f59c27dccc7426..6a4fbd97b3bddd 100644
--- a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.scss
+++ b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.scss
@@ -1,4 +1,6 @@
 .mlScatterplotMatrix {
+  overflow-x: auto;
+
   .vega-bind span {
     font-size: $euiFontSizeXS;
     padding: 0 $euiSizeXS;
diff --git a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
index ad9f63b10ebdd2..b1ee9afb17788a 100644
--- a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
+++ b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
@@ -30,7 +30,7 @@ import { i18n } from '@kbn/i18n';
 
 import type { SearchResponse7 } from '../../../../common/types/es_client';
 
-import { ml } from '../../services/ml_api_service';
+import { useMlApiContext } from '../../contexts/kibana';
 
 import { getProcessedFields } from '../data_grid';
 import { useCurrentEuiTheme } from '../color_range_legend';
@@ -72,6 +72,8 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
   color,
   legendType,
 }) => {
+  const { esSearch } = useMlApiContext();
+
   // dynamicSize is optionally used for outlier charts where the scatterplot marks
   // are sized according to outlier_score
   const [dynamicSize, setDynamicSize] = useState<boolean>(false);
@@ -147,7 +149,7 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
             }
           : { match_all: {} };
 
-        const resp: SearchResponse7 = await ml.esSearch({
+        const resp: SearchResponse7 = await esSearch({
           index,
           body: {
             fields: queryFields,
diff --git a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.test.ts b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.test.ts
new file mode 100644
index 00000000000000..dd467161ff489e
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.test.ts
@@ -0,0 +1,170 @@
+/*
+ * 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.
+ */
+
+// @ts-ignore
+import { compile } from 'vega-lite/build-es5/vega-lite';
+
+import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
+
+import {
+  getColorSpec,
+  getScatterplotMatrixVegaLiteSpec,
+  COLOR_OUTLIER,
+  COLOR_RANGE_NOMINAL,
+  DEFAULT_COLOR,
+  LEGEND_TYPES,
+} from './scatterplot_matrix_vega_lite_spec';
+
+describe('getColorSpec()', () => {
+  it('should return the default color for non-outlier specs', () => {
+    const colorSpec = getColorSpec(euiThemeLight, false);
+
+    expect(colorSpec).toEqual({ value: DEFAULT_COLOR });
+  });
+
+  it('should return a conditional spec for outliers', () => {
+    const colorSpec = getColorSpec(euiThemeLight, true);
+
+    expect(colorSpec).toEqual({
+      condition: {
+        test: "(datum['outlier_score'] >= mlOutlierScoreThreshold.cutoff)",
+        value: COLOR_OUTLIER,
+      },
+      value: euiThemeLight.euiColorMediumShade,
+    });
+  });
+
+  it('should return a field based spec for non-outlier specs with legendType supplied', () => {
+    const colorName = 'the-color-field';
+
+    const colorSpec = getColorSpec(euiThemeLight, false, colorName, LEGEND_TYPES.NOMINAL);
+
+    expect(colorSpec).toEqual({
+      field: colorName,
+      scale: {
+        range: COLOR_RANGE_NOMINAL,
+      },
+      type: 'nominal',
+    });
+  });
+});
+
+describe('getScatterplotMatrixVegaLiteSpec()', () => {
+  it('should return the default spec for non-outliers without a legend', () => {
+    const data = [{ x: 1, y: 1 }];
+
+    const vegaLiteSpec = getScatterplotMatrixVegaLiteSpec(data, ['x', 'y'], euiThemeLight);
+
+    // A valid Vega Lite spec shouldn't throw an error when compiled.
+    expect(() => compile(vegaLiteSpec)).not.toThrow();
+
+    expect(vegaLiteSpec.repeat).toEqual({
+      column: ['x', 'y'],
+      row: ['y', 'x'],
+    });
+    expect(vegaLiteSpec.spec.transform).toEqual([
+      { as: 'x', calculate: "datum['x']" },
+      { as: 'y', calculate: "datum['y']" },
+    ]);
+    expect(vegaLiteSpec.spec.data.values).toEqual(data);
+    expect(vegaLiteSpec.spec.mark).toEqual({
+      opacity: 0.75,
+      size: 8,
+      type: 'circle',
+    });
+    expect(vegaLiteSpec.spec.encoding.color).toEqual({ value: DEFAULT_COLOR });
+    expect(vegaLiteSpec.spec.encoding.tooltip).toEqual([
+      { field: 'x', type: 'quantitative' },
+      { field: 'y', type: 'quantitative' },
+    ]);
+  });
+
+  it('should return the spec for outliers', () => {
+    const data = [{ x: 1, y: 1 }];
+
+    const vegaLiteSpec = getScatterplotMatrixVegaLiteSpec(data, ['x', 'y'], euiThemeLight, 'ml');
+
+    // A valid Vega Lite spec shouldn't throw an error when compiled.
+    expect(() => compile(vegaLiteSpec)).not.toThrow();
+
+    expect(vegaLiteSpec.repeat).toEqual({
+      column: ['x', 'y'],
+      row: ['y', 'x'],
+    });
+    expect(vegaLiteSpec.spec.transform).toEqual([
+      { as: 'x', calculate: "datum['x']" },
+      { as: 'y', calculate: "datum['y']" },
+      {
+        as: 'outlier_score',
+        calculate: "datum['ml.outlier_score']",
+      },
+    ]);
+    expect(vegaLiteSpec.spec.data.values).toEqual(data);
+    expect(vegaLiteSpec.spec.mark).toEqual({
+      opacity: 0.75,
+      size: 8,
+      type: 'circle',
+    });
+    expect(vegaLiteSpec.spec.encoding.color).toEqual({
+      condition: {
+        test: "(datum['outlier_score'] >= mlOutlierScoreThreshold.cutoff)",
+        value: COLOR_OUTLIER,
+      },
+      value: euiThemeLight.euiColorMediumShade,
+    });
+    expect(vegaLiteSpec.spec.encoding.tooltip).toEqual([
+      { field: 'x', type: 'quantitative' },
+      { field: 'y', type: 'quantitative' },
+      {
+        field: 'outlier_score',
+        format: '.3f',
+        type: 'quantitative',
+      },
+    ]);
+  });
+
+  it('should return the spec for classification', () => {
+    const data = [{ x: 1, y: 1 }];
+
+    const vegaLiteSpec = getScatterplotMatrixVegaLiteSpec(
+      data,
+      ['x', 'y'],
+      euiThemeLight,
+      undefined,
+      'the-color-field',
+      LEGEND_TYPES.NOMINAL
+    );
+
+    // A valid Vega Lite spec shouldn't throw an error when compiled.
+    expect(() => compile(vegaLiteSpec)).not.toThrow();
+
+    expect(vegaLiteSpec.repeat).toEqual({
+      column: ['x', 'y'],
+      row: ['y', 'x'],
+    });
+    expect(vegaLiteSpec.spec.transform).toEqual([
+      { as: 'x', calculate: "datum['x']" },
+      { as: 'y', calculate: "datum['y']" },
+    ]);
+    expect(vegaLiteSpec.spec.data.values).toEqual(data);
+    expect(vegaLiteSpec.spec.mark).toEqual({
+      opacity: 0.75,
+      size: 8,
+      type: 'circle',
+    });
+    expect(vegaLiteSpec.spec.encoding.color).toEqual({
+      field: 'the-color-field',
+      scale: {
+        range: COLOR_RANGE_NOMINAL,
+      },
+      type: 'nominal',
+    });
+    expect(vegaLiteSpec.spec.encoding.tooltip).toEqual([
+      { field: 'x', type: 'quantitative' },
+      { field: 'y', type: 'quantitative' },
+    ]);
+  });
+});
diff --git a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.ts b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.ts
index ee93074d9e034c..9e0834dd8b9221 100644
--- a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.ts
+++ b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.ts
@@ -24,12 +24,12 @@ export const OUTLIER_SCORE_FIELD = 'outlier_score';
 
 const SCATTERPLOT_SIZE = 125;
 
-const DEFAULT_COLOR = euiPaletteColorBlind()[0];
-const COLOR_OUTLIER = euiPaletteNegative(2)[1];
-const COLOR_RANGE_NOMINAL = euiPaletteColorBlind({ rotations: 2 });
-const COLOR_RANGE_QUANTITATIVE = euiPalettePositive(5);
+export const DEFAULT_COLOR = euiPaletteColorBlind()[0];
+export const COLOR_OUTLIER = euiPaletteNegative(2)[1];
+export const COLOR_RANGE_NOMINAL = euiPaletteColorBlind({ rotations: 2 });
+export const COLOR_RANGE_QUANTITATIVE = euiPalettePositive(5);
 
-const getColorSpec = (
+export const getColorSpec = (
   euiTheme: typeof euiThemeLight,
   outliers = true,
   color?: string,
@@ -72,10 +72,13 @@ export const getScatterplotMatrixVegaLiteSpec = (
     calculate: `datum['${column}']`,
     as: column,
   }));
-  transform.push({
-    calculate: `datum['${resultsField}.${OUTLIER_SCORE_FIELD}']`,
-    as: OUTLIER_SCORE_FIELD,
-  });
+
+  if (resultsField !== undefined) {
+    transform.push({
+      calculate: `datum['${resultsField}.${OUTLIER_SCORE_FIELD}']`,
+      as: OUTLIER_SCORE_FIELD,
+    });
+  }
 
   return {
     $schema: 'https://vega.github.io/schema/vega-lite/v4.17.0.json',

From 8d5dd1de63d44b42db7acb8ba6fd0080cee0eeed Mon Sep 17 00:00:00 2001
From: ymao1 <ying.mao@elastic.co>
Date: Mon, 21 Dec 2020 10:11:19 -0500
Subject: [PATCH 60/75] [Alerting] Updating wording on "Notify" dropdown
 (#86453)

* Updating wording

* PR fixes

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../sections/alert_form/alert_notify_when.tsx | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_notify_when.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_notify_when.tsx
index da872484dda4a2..eeb8b9f77a9b89 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_notify_when.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_notify_when.tsx
@@ -29,13 +29,18 @@ const DEFAULT_NOTIFY_WHEN_VALUE: AlertNotifyWhenType = 'onActionGroupChange';
 const NOTIFY_WHEN_OPTIONS: Array<EuiSuperSelectOption<AlertNotifyWhenType>> = [
   {
     value: 'onActionGroupChange',
-    inputDisplay: 'Run only on status change',
+    inputDisplay: i18n.translate(
+      'xpack.triggersActionsUI.sections.alertForm.alertNotifyWhen.onActionGroupChange.display',
+      {
+        defaultMessage: 'Only on status change.',
+      }
+    ),
     'data-test-subj': 'onActionGroupChange',
     dropdownDisplay: (
       <Fragment>
         <strong>
           <FormattedMessage
-            defaultMessage="Run only on status change"
+            defaultMessage="Only on status change"
             id="xpack.triggersActionsUI.sections.alertForm.alertNotifyWhen.onActionGroupChange.label"
           />
         </strong>
@@ -52,13 +57,18 @@ const NOTIFY_WHEN_OPTIONS: Array<EuiSuperSelectOption<AlertNotifyWhenType>> = [
   },
   {
     value: 'onActiveAlert',
-    inputDisplay: 'Run every time alert is active',
+    inputDisplay: i18n.translate(
+      'xpack.triggersActionsUI.sections.alertForm.alertNotifyWhen.onActiveAlert.display',
+      {
+        defaultMessage: 'Every time alert is active',
+      }
+    ),
     'data-test-subj': 'onActiveAlert',
     dropdownDisplay: (
       <Fragment>
         <strong>
           <FormattedMessage
-            defaultMessage="Run every time alert is active"
+            defaultMessage="Every time alert is active"
             id="xpack.triggersActionsUI.sections.alertForm.alertNotifyWhen.onActiveAlert.label"
           />
         </strong>
@@ -75,13 +85,18 @@ const NOTIFY_WHEN_OPTIONS: Array<EuiSuperSelectOption<AlertNotifyWhenType>> = [
   },
   {
     value: 'onThrottleInterval',
-    inputDisplay: 'Set a custom action interval',
+    inputDisplay: i18n.translate(
+      'xpack.triggersActionsUI.sections.alertForm.alertNotifyWhen.onThrottleInterval.display',
+      {
+        defaultMessage: 'On a custom action interval',
+      }
+    ),
     'data-test-subj': 'onThrottleInterval',
     dropdownDisplay: (
       <Fragment>
         <strong>
           <FormattedMessage
-            defaultMessage="Set a custom action interval"
+            defaultMessage="On a custom action interval"
             id="xpack.triggersActionsUI.sections.alertForm.alertNotifyWhen.onThrottleInterval.label"
           />
         </strong>
@@ -143,7 +158,7 @@ export const AlertNotifyWhen = ({
     <>
       <FormattedMessage
         id="xpack.triggersActionsUI.sections.alertForm.renotifyFieldLabel"
-        defaultMessage="Notify every"
+        defaultMessage="Notify"
       />{' '}
       <EuiIconTip
         position="right"

From 513138ba7c38a5788217ac5adf246988f626292e Mon Sep 17 00:00:00 2001
From: Steph Milovic <stephanie.milovic@elastic.co>
Date: Mon, 21 Dec 2020 08:18:32 -0700
Subject: [PATCH 61/75] [Security Solution] Fixing jest warnings and errors
 (#86532)

---
 .../components/case_action_bar/index.tsx      | 20 ++++++-------
 .../event_details/event_details.test.tsx      | 30 +++++++++++--------
 .../events_viewer/events_viewer.test.tsx      |  9 +++++-
 .../exceptions/builder/entry_item.test.tsx    | 30 +++++++++++--------
 .../components/last_updated/index.test.tsx    | 14 ++++++---
 .../ml/score/anomaly_score.test.tsx           |  5 ++--
 .../ml/score/anomaly_scores.test.tsx          |  5 ++--
 .../score/create_descriptions_list.test.tsx   | 14 ++++-----
 .../properties/use_create_timeline.tsx        |  4 +--
 .../timeline/query_bar/index.test.tsx         |  9 +++---
 10 files changed, 83 insertions(+), 57 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/cases/components/case_action_bar/index.tsx b/x-pack/plugins/security_solution/public/cases/components/case_action_bar/index.tsx
index 3bad7b7870a537..3a65ea724d7641 100644
--- a/x-pack/plugins/security_solution/public/cases/components/case_action_bar/index.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/case_action_bar/index.tsx
@@ -101,17 +101,17 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
         <EuiDescriptionList compressed>
           <EuiFlexGroup gutterSize="l" alignItems="center">
             <EuiFlexItem>
+              <EuiDescriptionListTitle>
+                <EuiFlexGroup component="span" alignItems="center" gutterSize="xs">
+                  <EuiFlexItem grow={false}>
+                    <span>{i18n.SYNC_ALERTS}</span>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiIconTip content={i18n.SYNC_ALERTS_HELP} />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiDescriptionListTitle>
               <EuiDescriptionListDescription>
-                <EuiDescriptionListTitle>
-                  <EuiFlexGroup component="span" alignItems="center" gutterSize="xs">
-                    <EuiFlexItem grow={false}>
-                      <span>{i18n.SYNC_ALERTS}</span>
-                    </EuiFlexItem>
-                    <EuiFlexItem grow={false}>
-                      <EuiIconTip content={i18n.SYNC_ALERTS_HELP} />
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                </EuiDescriptionListTitle>
                 <SyncAlertsSwitch
                   disabled={disabled || isLoading}
                   isSynced={caseData.settings.syncAlerts}
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 20fa6e54e044d5..46590060507815 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
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { shallow } from 'enzyme';
+import { ReactWrapper, shallow } from 'enzyme';
 import React from 'react';
 
 import '../../mock/match_media';
@@ -16,6 +16,7 @@ import { mockBrowserFields } from '../../containers/source/mock';
 import { useMountAppended } from '../../utils/use_mount_appended';
 import { mockAlertDetailsData } from './__mocks__';
 import { TimelineEventsDetailsItem } from '../../../../common/search_strategy';
+import { waitFor } from '@testing-library/dom';
 
 jest.mock('../link_to');
 describe('EventDetails', () => {
@@ -36,18 +37,21 @@ describe('EventDetails', () => {
     isAlert: true,
   };
 
-  const wrapper = mount(
-    <TestProviders>
-      <EventDetails {...defaultProps} />
-    </TestProviders>
-  );
-
-  const alertsWrapper = mount(
-    <TestProviders>
-      <EventDetails {...alertsProps} />
-    </TestProviders>
-  );
-
+  let wrapper: ReactWrapper;
+  let alertsWrapper: ReactWrapper;
+  beforeAll(async () => {
+    wrapper = mount(
+      <TestProviders>
+        <EventDetails {...defaultProps} />
+      </TestProviders>
+    ) as ReactWrapper;
+    alertsWrapper = mount(
+      <TestProviders>
+        <EventDetails {...alertsProps} />
+      </TestProviders>
+    ) as ReactWrapper;
+    await waitFor(() => wrapper.update());
+  });
   describe('rendering', () => {
     test('should match snapshot', () => {
       const shallowWrap = shallow(<EventDetails {...defaultProps} />);
diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.test.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.test.tsx
index 5e5bdebffa1828..423b3566e4eb5a 100644
--- a/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.test.tsx
@@ -30,6 +30,13 @@ jest.mock('../../../timelines/components/graph_overlay', () => ({
   GraphOverlay: jest.fn(() => <div />),
 }));
 
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+  return {
+    ...original,
+    useDataGridColumnSorting: jest.fn(),
+  };
+});
 jest.mock('../../../timelines/containers', () => ({
   useTimelineEvents: jest.fn(),
 }));
@@ -84,7 +91,7 @@ const eventsViewerDefaultProps = {
   sort: [
     {
       columnId: 'foo',
-      sortDirection: 'none' as SortDirection,
+      sortDirection: 'asc' as SortDirection,
     },
   ],
   scopeId: SourcererScopeName.timeline,
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/entry_item.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/builder/entry_item.test.tsx
index 60b2f079c869bf..ba894e0410b04d 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/entry_item.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/builder/entry_item.test.tsx
@@ -25,6 +25,7 @@ import {
 } from '../../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks';
 import { getFoundListSchemaMock } from '../../../../../../lists/common/schemas/response/found_list_schema.mock';
 import { getEmptyValue } from '../../empty_value';
+import { waitFor } from '@testing-library/dom';
 
 // mock out lists hook
 const mockStart = jest.fn();
@@ -583,7 +584,7 @@ describe('BuilderEntryItem', () => {
     );
   });
 
-  test('it invokes "setErrorsExist" when user touches value input and leaves empty', () => {
+  test('it invokes "setErrorsExist" when user touches value input and leaves empty', async () => {
     const mockSetErrorExists = jest.fn();
     wrapper = mount(
       <BuilderEntryItem
@@ -608,14 +609,16 @@ describe('BuilderEntryItem', () => {
       />
     );
 
-    ((wrapper.find(EuiComboBox).at(2).props() as unknown) as {
-      onBlur: () => void;
-    }).onBlur();
+    await waitFor(() => {
+      ((wrapper.find(EuiComboBox).at(2).props() as unknown) as {
+        onBlur: () => void;
+      }).onBlur();
+    });
 
     expect(mockSetErrorExists).toHaveBeenCalledWith(true);
   });
 
-  test('it invokes "setErrorsExist" when invalid value inputted for field value input', () => {
+  test('it invokes "setErrorsExist" when invalid value inputted for field value input', async () => {
     const mockSetErrorExists = jest.fn();
     wrapper = mount(
       <BuilderEntryItem
@@ -639,14 +642,17 @@ describe('BuilderEntryItem', () => {
         setErrorsExist={mockSetErrorExists}
       />
     );
-    ((wrapper.find(EuiComboBox).at(2).props() as unknown) as {
-      onBlur: () => void;
-    }).onBlur();
 
-    // Invalid input because field type is number
-    ((wrapper.find(EuiComboBox).at(2).props() as unknown) as {
-      onSearchChange: (arg: string) => void;
-    }).onSearchChange('hellooo');
+    await waitFor(() => {
+      ((wrapper.find(EuiComboBox).at(2).props() as unknown) as {
+        onBlur: () => void;
+      }).onBlur();
+
+      // Invalid input because field type is number
+      ((wrapper.find(EuiComboBox).at(2).props() as unknown) as {
+        onSearchChange: (arg: string) => void;
+      }).onSearchChange('hellooo');
+    });
 
     expect(mockSetErrorExists).toHaveBeenCalledWith(true);
   });
diff --git a/x-pack/plugins/security_solution/public/common/components/last_updated/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/last_updated/index.test.tsx
index db42794448c533..31ba5530f60829 100644
--- a/x-pack/plugins/security_solution/public/common/components/last_updated/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/last_updated/index.test.tsx
@@ -8,12 +8,18 @@ import { mount } from 'enzyme';
 import { I18nProvider } from '@kbn/i18n/react';
 
 import { LastUpdatedAt } from './';
+jest.mock('@kbn/i18n/react', () => {
+  const originalModule = jest.requireActual('@kbn/i18n/react');
+  const FormattedRelative = jest.fn();
+  FormattedRelative.mockImplementation(() => '2 minutes ago');
+
+  return {
+    ...originalModule,
+    FormattedRelative,
+  };
+});
 
 describe('LastUpdatedAt', () => {
-  beforeEach(() => {
-    Date.now = jest.fn().mockReturnValue(1603995369774);
-  });
-
   test('it renders correct relative time', () => {
     const wrapper = mount(
       <I18nProvider>
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_score.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_score.test.tsx
index cb10c61302d3c2..745bd486524adb 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_score.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_score.test.tsx
@@ -14,6 +14,7 @@ import { mockAnomalies } from '../mock';
 import { TestProviders } from '../../../mock/test_providers';
 import { useMountAppended } from '../../../utils/use_mount_appended';
 import { Anomalies } from '../types';
+import { waitFor } from '@testing-library/dom';
 
 const startDate: string = '2020-07-07T08:20:18.966Z';
 const endDate: string = '3000-01-01T00:00:00.000Z';
@@ -57,7 +58,7 @@ describe('anomaly_scores', () => {
     expect(wrapper.find('[data-test-subj="anomaly-description-list"]').exists()).toEqual(false);
   });
 
-  test('show a popover on a mouse click', () => {
+  test('show a popover on a mouse click', async () => {
     const wrapper = mount(
       <TestProviders>
         <AnomalyScoreComponent
@@ -71,7 +72,7 @@ describe('anomaly_scores', () => {
       </TestProviders>
     );
     wrapper.find('[data-test-subj="anomaly-score-popover"]').first().simulate('click');
-    wrapper.update();
+    await waitFor(() => wrapper.update());
     expect(wrapper.find('[data-test-subj="anomaly-description-list"]').exists()).toEqual(true);
   });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_scores.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_scores.test.tsx
index 52151f217e01ad..edbb3528a098af 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_scores.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_scores.test.tsx
@@ -15,6 +15,7 @@ import { TestProviders } from '../../../mock/test_providers';
 import { getEmptyValue } from '../../empty_value';
 import { Anomalies } from '../types';
 import { useMountAppended } from '../../../utils/use_mount_appended';
+import { waitFor } from '@testing-library/dom';
 
 const startDate: string = '2020-07-07T08:20:18.966Z';
 const endDate: string = '3000-01-01T00:00:00.000Z';
@@ -121,7 +122,7 @@ describe('anomaly_scores', () => {
     expect(wrapper.find('[data-test-subj="anomaly-description-list"]').exists()).toEqual(false);
   });
 
-  test('showing a popover on a mouse click', () => {
+  test('showing a popover on a mouse click', async () => {
     const wrapper = mount(
       <TestProviders>
         <AnomalyScoresComponent
@@ -134,7 +135,7 @@ describe('anomaly_scores', () => {
       </TestProviders>
     );
     wrapper.find('[data-test-subj="anomaly-score-popover"]').first().simulate('click');
-    wrapper.update();
+    await waitFor(() => wrapper.update());
     expect(wrapper.find('[data-test-subj="anomaly-description-list"]').exists()).toEqual(true);
   });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/score/create_descriptions_list.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml/score/create_descriptions_list.test.tsx
index e9dd5f922e26a5..695b4dd8caea45 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/score/create_descriptions_list.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/score/create_descriptions_list.test.tsx
@@ -10,6 +10,7 @@ import { mockAnomalies } from '../mock';
 import { createDescriptionList } from './create_description_list';
 import { EuiDescriptionList } from '@elastic/eui';
 import { Anomaly } from '../types';
+import { waitFor } from '@testing-library/dom';
 
 jest.mock('../../../lib/kibana');
 
@@ -38,7 +39,7 @@ describe('create_description_list', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  test('it calls the narrow date range function on click', () => {
+  test('it calls the narrow date range function on click', async () => {
     const wrapper = mount(
       <EuiDescriptionList
         listItems={createDescriptionList(
@@ -54,12 +55,12 @@ describe('create_description_list', () => {
       .find('[data-test-subj="anomaly-description-narrow-range-link"]')
       .first()
       .simulate('click');
-    wrapper.update();
+    await waitFor(() => wrapper.update());
 
     expect(narrowDateRange.mock.calls.length).toBe(1);
   });
 
-  test('it should the narrow date range with the score', () => {
+  test('it should the narrow date range with the score', async () => {
     const wrapper = mount(
       <EuiDescriptionList
         listItems={createDescriptionList(
@@ -75,7 +76,7 @@ describe('create_description_list', () => {
       .find('[data-test-subj="anomaly-description-narrow-range-link"]')
       .first()
       .simulate('click');
-    wrapper.update();
+    await waitFor(() => wrapper.update());
 
     const expected: Anomaly = {
       detectorIndex: 0,
@@ -119,7 +120,7 @@ describe('create_description_list', () => {
     expect(narrowDateRange.mock.calls[0][0]).toEqual(expected);
   });
 
-  test('it should call the narrow date range with the interval', () => {
+  test('it should call the narrow date range with the interval', async () => {
     const wrapper = mount(
       <EuiDescriptionList
         listItems={createDescriptionList(
@@ -135,8 +136,7 @@ describe('create_description_list', () => {
       .find('[data-test-subj="anomaly-description-narrow-range-link"]')
       .first()
       .simulate('click');
-    wrapper.update();
-
+    await waitFor(() => wrapper.update());
     expect(narrowDateRange.mock.calls[0][1]).toEqual('hours');
   });
 });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/use_create_timeline.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/use_create_timeline.tsx
index 12845477e0f393..96187329a21c65 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/use_create_timeline.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/use_create_timeline.tsx
@@ -123,13 +123,13 @@ export const useCreateTimelineButton = ({ timelineId, timelineType, closeGearMen
       };
       const dataTestSubjPrefix =
         timelineType === TimelineType.template ? `template-timeline-new` : `timeline-new`;
-
+      const { fill: noThanks, ...propsWithoutFill } = buttonProps;
       return outline ? (
         <EuiButton data-test-subj={`${dataTestSubjPrefix}-with-border`} {...buttonProps}>
           {title}
         </EuiButton>
       ) : (
-        <EuiButtonEmpty data-test-subj={dataTestSubjPrefix} color="text" {...buttonProps}>
+        <EuiButtonEmpty data-test-subj={dataTestSubjPrefix} color="text" {...propsWithoutFill}>
           {title}
         </EuiButtonEmpty>
       );
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_bar/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_bar/index.test.tsx
index 1226dabe485590..959504249e1270 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_bar/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_bar/index.test.tsx
@@ -23,6 +23,7 @@ import {
   getDataProviderFilter,
   TIMELINE_FILTER_DROP_AREA,
 } from './index';
+import { waitFor } from '@testing-library/dom';
 
 const mockUiSettingsForFilterManager = coreMock.createStart().uiSettings;
 
@@ -181,7 +182,7 @@ describe('Timeline QueryBar ', () => {
   });
 
   describe('#onSavedQuery', () => {
-    test('is only reference that changed when dataProviders props get updated', () => {
+    test('is only reference that changed when dataProviders props get updated', async () => {
       const Proxy = (props: QueryBarTimelineComponentProps) => (
         <TestProviders>
           <QueryBarTimeline {...props} />
@@ -213,13 +214,13 @@ describe('Timeline QueryBar ', () => {
       const onSavedQueryRef = queryBarProps.onSavedQuery;
 
       wrapper.setProps({ dataProviders: mockDataProviders.slice(1, 0) });
-      wrapper.update();
+      await waitFor(() => wrapper.update());
 
       expect(onSavedQueryRef).not.toEqual(wrapper.find(QueryBar).props().onSavedQuery);
       expect(onSubmitQueryRef).toEqual(wrapper.find(QueryBar).props().onSubmitQuery);
     });
 
-    test('is only reference that changed when savedQueryId props get updated', () => {
+    test('is only reference that changed when savedQueryId props get updated', async () => {
       const Proxy = (props: QueryBarTimelineComponentProps) => (
         <TestProviders>
           <QueryBarTimeline {...props} />
@@ -253,7 +254,7 @@ describe('Timeline QueryBar ', () => {
       wrapper.setProps({
         savedQueryId: 'new',
       });
-      wrapper.update();
+      await waitFor(() => wrapper.update());
 
       expect(onSavedQueryRef).not.toEqual(wrapper.find(QueryBar).props().onSavedQuery);
       expect(onSubmitQueryRef).toEqual(wrapper.find(QueryBar).props().onSubmitQuery);

From 664a7553d23adc22e17110887f5b4ccbb505c004 Mon Sep 17 00:00:00 2001
From: Wylie Conlon <william.conlon@elastic.co>
Date: Mon, 21 Dec 2020 11:19:25 -0500
Subject: [PATCH 62/75] [Lens] Refactor param editor to use layers (#86499)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../dimension_panel/dimension_editor.tsx      |  33 +-
 .../calculations/moving_average.tsx           |  13 +-
 .../definitions/date_histogram.test.tsx       | 458 +++++++++---------
 .../operations/definitions/date_histogram.tsx |  12 +-
 .../definitions/filters/filters.test.tsx      | 190 ++++----
 .../definitions/filters/filters.tsx           |  10 +-
 .../operations/definitions/index.ts           |  13 +-
 .../definitions/last_value.test.tsx           | 152 +++---
 .../operations/definitions/last_value.tsx     |  18 +-
 .../definitions/ranges/ranges.test.tsx        | 434 +++++++----------
 .../operations/definitions/ranges/ranges.tsx  |  56 +--
 .../operations/definitions/terms/index.tsx    |  46 +-
 .../definitions/terms/terms.test.tsx          | 274 +++++------
 .../operations/layer_helpers.test.ts          |  46 +-
 .../operations/layer_helpers.ts               |  51 +-
 15 files changed, 808 insertions(+), 998 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx
index df3b769acf8504..c655fc18ab5fae 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx
@@ -107,7 +107,15 @@ export function DimensionEditor(props: DimensionEditorProps) {
     layerId,
     currentIndexPattern,
     hideGrouping,
+    dateRange,
   } = props;
+  const services = {
+    data: props.data,
+    uiSettings: props.uiSettings,
+    savedObjectsClient: props.savedObjectsClient,
+    http: props.http,
+    storage: props.storage,
+  };
   const { fieldByOperation, operationWithoutField } = operationSupportMatrix;
 
   const setStateWrapper = (layer: IndexPatternLayer) => {
@@ -346,17 +354,13 @@ export function DimensionEditor(props: DimensionEditorProps) {
         {!currentFieldIsInvalid && !incompleteInfo && selectedColumn && ParamEditor && (
           <>
             <ParamEditor
-              state={state}
-              setState={setState}
+              layer={state.layers[layerId]}
+              updateLayer={setStateWrapper}
               columnId={columnId}
               currentColumn={state.layers[layerId].columns[columnId]}
-              storage={props.storage}
-              uiSettings={props.uiSettings}
-              savedObjectsClient={props.savedObjectsClient}
-              layerId={layerId}
-              http={props.http}
-              dateRange={props.dateRange}
-              data={props.data}
+              dateRange={dateRange}
+              indexPattern={currentIndexPattern}
+              {...services}
             />
           </>
         )}
@@ -407,12 +411,15 @@ export function DimensionEditor(props: DimensionEditorProps) {
               selectedColumn={selectedColumn}
               onChange={(newFormat) => {
                 setState(
-                  updateColumnParam({
+                  mergeLayer({
                     state,
                     layerId,
-                    currentColumn: selectedColumn,
-                    paramName: 'format',
-                    value: newFormat,
+                    newLayer: updateColumnParam({
+                      layer: state.layers[layerId],
+                      columnId,
+                      paramName: 'format',
+                      value: newFormat,
+                    }),
                   })
                 );
               }}
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/moving_average.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/moving_average.tsx
index 522899662fbd10..59d5924b9a3707 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/moving_average.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/moving_average.tsx
@@ -111,10 +111,10 @@ export const movingAverageOperation: OperationDefinition<
 };
 
 function MovingAverageParamEditor({
-  state,
-  setState,
+  layer,
+  updateLayer,
   currentColumn,
-  layerId,
+  columnId,
 }: ParamEditorProps<MovingAverageIndexPatternColumn>) {
   const [inputValue, setInputValue] = useState(String(currentColumn.params.window));
 
@@ -124,11 +124,10 @@ function MovingAverageParamEditor({
         return;
       }
       const inputNumber = Number(inputValue);
-      setState(
+      updateLayer(
         updateColumnParam({
-          state,
-          layerId,
-          currentColumn,
+          layer,
+          columnId,
           paramName: 'window',
           value: inputNumber,
         })
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/date_histogram.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/date_histogram.test.tsx
index e40b9ccf89c1ab..eadcf8384b1dd9 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/date_histogram.test.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/date_histogram.test.tsx
@@ -5,19 +5,19 @@
  */
 
 import React from 'react';
-import { DateHistogramIndexPatternColumn } from './date_histogram';
+import type { DateHistogramIndexPatternColumn } from './date_histogram';
 import { dateHistogramOperation } from './index';
 import { shallow } from 'enzyme';
 import { EuiSwitch, EuiSwitchEvent } from '@elastic/eui';
-import { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public';
-import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
+import type { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public';
+import type { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import { UI_SETTINGS } from '../../../../../../../src/plugins/data/public';
 import {
   dataPluginMock,
   getCalculateAutoTimeExpression,
 } from '../../../../../../../src/plugins/data/public/mocks';
 import { createMockedIndexPattern } from '../../mocks';
-import { IndexPatternPrivateState } from '../../types';
+import type { IndexPatternLayer, IndexPattern } from '../../types';
 import { getFieldByNameFactory } from '../../pure_helpers';
 
 const dataStart = dataPluginMock.createStartContract();
@@ -29,6 +29,60 @@ dataStart.search.aggs.calculateAutoTimeExpression = getCalculateAutoTimeExpressi
   }
 );
 
+const indexPattern1: IndexPattern = {
+  id: '1',
+  title: 'Mock Indexpattern',
+  timeFieldName: 'timestamp',
+  hasRestrictions: false,
+  fields: [
+    {
+      name: 'timestamp',
+      displayName: 'timestampLabel',
+      type: 'date',
+      esTypes: ['date'],
+      aggregatable: true,
+      searchable: true,
+    },
+  ],
+
+  getFieldByName: getFieldByNameFactory([
+    {
+      name: 'timestamp',
+      displayName: 'timestampLabel',
+      type: 'date',
+      esTypes: ['date'],
+      aggregatable: true,
+      searchable: true,
+    },
+  ]),
+};
+
+const indexPattern2: IndexPattern = {
+  id: '2',
+  title: 'Mock Indexpattern 2',
+  hasRestrictions: false,
+  fields: [
+    {
+      name: 'other_timestamp',
+      displayName: 'other_timestamp',
+      type: 'date',
+      esTypes: ['date'],
+      aggregatable: true,
+      searchable: true,
+    },
+  ],
+  getFieldByName: getFieldByNameFactory([
+    {
+      name: 'other_timestamp',
+      displayName: 'other_timestamp',
+      type: 'date',
+      esTypes: ['date'],
+      aggregatable: true,
+      searchable: true,
+    },
+  ]),
+};
+
 const defaultOptions = {
   storage: {} as IStorageWrapper,
   uiSettings: {} as IUiSettingsClient,
@@ -39,150 +93,47 @@ const defaultOptions = {
   },
   data: dataStart,
   http: {} as HttpSetup,
+  indexPattern: indexPattern1,
 };
 
 describe('date_histogram', () => {
-  let state: IndexPatternPrivateState;
+  let layer: IndexPatternLayer;
   const InlineOptions = dateHistogramOperation.paramEditor!;
 
   beforeEach(() => {
-    state = {
-      indexPatternRefs: [],
-      existingFields: {},
-      currentIndexPatternId: '1',
-      isFirstExistenceFetch: false,
-      indexPatterns: {
-        1: {
-          id: '1',
-          title: 'Mock Indexpattern',
-          timeFieldName: 'timestamp',
-          hasRestrictions: false,
-          fields: [
-            {
-              name: 'timestamp',
-              displayName: 'timestampLabel',
-              type: 'date',
-              esTypes: ['date'],
-              aggregatable: true,
-              searchable: true,
-            },
-          ],
+    layer = {
+      indexPatternId: '1',
+      columnOrder: ['col1'],
+      columns: {
+        col1: {
+          label: 'Value of timestamp',
+          dataType: 'date',
+          isBucketed: true,
 
-          getFieldByName: getFieldByNameFactory([
-            {
-              name: 'timestamp',
-              displayName: 'timestampLabel',
-              type: 'date',
-              esTypes: ['date'],
-              aggregatable: true,
-              searchable: true,
-            },
-          ]),
-        },
-        2: {
-          id: '2',
-          title: 'Mock Indexpattern 2',
-          hasRestrictions: false,
-          fields: [
-            {
-              name: 'other_timestamp',
-              displayName: 'other_timestamp',
-              type: 'date',
-              esTypes: ['date'],
-              aggregatable: true,
-              searchable: true,
-            },
-          ],
-          getFieldByName: getFieldByNameFactory([
-            {
-              name: 'other_timestamp',
-              displayName: 'other_timestamp',
-              type: 'date',
-              esTypes: ['date'],
-              aggregatable: true,
-              searchable: true,
-            },
-          ]),
-        },
-      },
-      layers: {
-        first: {
-          indexPatternId: '1',
-          columnOrder: ['col1'],
-          columns: {
-            col1: {
-              label: 'Value of timestamp',
-              dataType: 'date',
-              isBucketed: true,
-
-              // Private
-              operationType: 'date_histogram',
-              params: {
-                interval: '42w',
-              },
-              sourceField: 'timestamp',
-            },
-          },
-        },
-        second: {
-          indexPatternId: '2',
-          columnOrder: ['col2'],
-          columns: {
-            col2: {
-              label: 'Value of timestamp',
-              dataType: 'date',
-              isBucketed: true,
-
-              // Private
-              operationType: 'date_histogram',
-              params: {
-                interval: 'd',
-              },
-              sourceField: 'other_timestamp',
-            },
-          },
-        },
-        third: {
-          indexPatternId: '1',
-          columnOrder: ['col1'],
-          columns: {
-            col1: {
-              label: 'Value of timestamp',
-              dataType: 'date',
-              isBucketed: true,
-
-              // Private
-              operationType: 'date_histogram',
-              params: {
-                interval: 'auto',
-              },
-              sourceField: 'timestamp',
-            },
+          // Private
+          operationType: 'date_histogram',
+          params: {
+            interval: '42w',
           },
+          sourceField: 'timestamp',
         },
       },
     };
   });
 
-  function stateWithInterval(interval: string) {
+  function layerWithInterval(interval: string) {
     return ({
-      ...state,
-      layers: {
-        ...state.layers,
-        first: {
-          ...state.layers.first,
-          columns: {
-            ...state.layers.first.columns,
-            col1: {
-              ...state.layers.first.columns.col1,
-              params: {
-                interval,
-              },
-            },
+      ...layer,
+      columns: {
+        ...layer.columns,
+        col1: {
+          ...layer.columns.col1,
+          params: {
+            interval,
           },
         },
       },
-    } as unknown) as IndexPatternPrivateState;
+    } as unknown) as IndexPatternLayer;
   }
 
   describe('buildColumn', () => {
@@ -246,9 +197,9 @@ describe('date_histogram', () => {
   describe('toEsAggsFn', () => {
     it('should reflect params correctly', () => {
       const esAggsFn = dateHistogramOperation.toEsAggsFn(
-        state.layers.first.columns.col1 as DateHistogramIndexPatternColumn,
+        layer.columns.col1 as DateHistogramIndexPatternColumn,
         'col1',
-        state.indexPatterns['1']
+        indexPattern1
       );
       expect(esAggsFn).toEqual(
         expect.objectContaining({
@@ -263,10 +214,10 @@ describe('date_histogram', () => {
 
     it('should not use normalized es interval for rollups', () => {
       const esAggsFn = dateHistogramOperation.toEsAggsFn(
-        state.layers.first.columns.col1 as DateHistogramIndexPatternColumn,
+        layer.columns.col1 as DateHistogramIndexPatternColumn,
         'col1',
         {
-          ...state.indexPatterns['1'],
+          ...indexPattern1,
           fields: [
             {
               name: 'timestamp',
@@ -465,15 +416,14 @@ describe('date_histogram', () => {
 
   describe('param editor', () => {
     it('should render current value', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
       const instance = shallow(
         <InlineOptions
           {...defaultOptions}
-          state={state}
-          setState={setStateSpy}
+          layer={layer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          layerId="first"
-          currentColumn={state.layers.first.columns.col1 as DateHistogramIndexPatternColumn}
+          currentColumn={layer.columns.col1 as DateHistogramIndexPatternColumn}
         />
       );
 
@@ -482,15 +432,34 @@ describe('date_histogram', () => {
     });
 
     it('should render current value for other index pattern', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
+
+      const secondLayer: IndexPatternLayer = {
+        indexPatternId: '2',
+        columnOrder: ['col2'],
+        columns: {
+          col2: {
+            label: 'Value of timestamp',
+            dataType: 'date',
+            isBucketed: true,
+
+            // Private
+            operationType: 'date_histogram',
+            params: {
+              interval: 'd',
+            },
+            sourceField: 'other_timestamp',
+          },
+        },
+      };
       const instance = shallow(
         <InlineOptions
           {...defaultOptions}
-          state={state}
-          setState={setStateSpy}
+          layer={secondLayer}
+          updateLayer={updateLayerSpy}
           columnId="col2"
-          currentColumn={state.layers.second.columns.col2 as DateHistogramIndexPatternColumn}
-          layerId="second"
+          currentColumn={secondLayer.columns.col2 as DateHistogramIndexPatternColumn}
+          indexPattern={indexPattern2}
         />
       );
 
@@ -499,14 +468,33 @@ describe('date_histogram', () => {
     });
 
     it('should render disabled switch and no time interval control for auto interval', () => {
+      const thirdLayer: IndexPatternLayer = {
+        indexPatternId: '1',
+        columnOrder: ['col1'],
+        columns: {
+          col1: {
+            label: 'Value of timestamp',
+            dataType: 'date',
+            isBucketed: true,
+
+            // Private
+            operationType: 'date_histogram',
+            params: {
+              interval: 'auto',
+            },
+            sourceField: 'timestamp',
+          },
+        },
+      };
+
       const instance = shallow(
         <InlineOptions
           {...defaultOptions}
-          state={state}
-          setState={jest.fn()}
+          layer={thirdLayer}
+          updateLayer={jest.fn()}
           columnId="col1"
-          currentColumn={state.layers.third.columns.col1 as DateHistogramIndexPatternColumn}
-          layerId="third"
+          currentColumn={thirdLayer.columns.col1 as DateHistogramIndexPatternColumn}
+          indexPattern={indexPattern1}
         />
       );
       expect(instance.find('[data-test-subj="lensDateHistogramValue"]').exists()).toBeFalsy();
@@ -515,35 +503,52 @@ describe('date_histogram', () => {
     });
 
     it('should allow switching to manual interval', () => {
-      const setStateSpy = jest.fn();
+      const thirdLayer: IndexPatternLayer = {
+        indexPatternId: '1',
+        columnOrder: ['col1'],
+        columns: {
+          col1: {
+            label: 'Value of timestamp',
+            dataType: 'date',
+            isBucketed: true,
+
+            // Private
+            operationType: 'date_histogram',
+            params: {
+              interval: 'auto',
+            },
+            sourceField: 'timestamp',
+          },
+        },
+      };
+
+      const updateLayerSpy = jest.fn();
       const instance = shallow(
         <InlineOptions
           {...defaultOptions}
-          state={state}
-          setState={setStateSpy}
+          layer={thirdLayer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          layerId="third"
-          currentColumn={state.layers.third.columns.col1 as DateHistogramIndexPatternColumn}
+          currentColumn={thirdLayer.columns.col1 as DateHistogramIndexPatternColumn}
         />
       );
       instance.find(EuiSwitch).prop('onChange')!({
         target: { checked: true },
       } as EuiSwitchEvent);
-      expect(setStateSpy).toHaveBeenCalled();
-      const newState = setStateSpy.mock.calls[0][0];
-      expect(newState).toHaveProperty('layers.third.columns.col1.params.interval', '30d');
+      expect(updateLayerSpy).toHaveBeenCalled();
+      const newLayer = updateLayerSpy.mock.calls[0][0];
+      expect(newLayer).toHaveProperty('columns.col1.params.interval', '30d');
     });
 
     it('should force calendar values to 1', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
       const instance = shallow(
         <InlineOptions
           {...defaultOptions}
-          state={state}
-          setState={setStateSpy}
+          layer={layer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          layerId="first"
-          currentColumn={state.layers.first.columns.col1 as DateHistogramIndexPatternColumn}
+          currentColumn={layer.columns.col1 as DateHistogramIndexPatternColumn}
         />
       );
       instance.find('[data-test-subj="lensDateHistogramValue"]').prop('onChange')!({
@@ -551,67 +556,63 @@ describe('date_histogram', () => {
           value: '2',
         },
       } as React.ChangeEvent<HTMLInputElement>);
-      expect(setStateSpy).toHaveBeenCalledWith(stateWithInterval('1w'));
+      expect(updateLayerSpy).toHaveBeenCalledWith(layerWithInterval('1w'));
     });
 
     it('should display error if an invalid interval is specified', () => {
-      const setStateSpy = jest.fn();
-      const testState = stateWithInterval('4quid');
+      const updateLayerSpy = jest.fn();
+      const testLayer = layerWithInterval('4quid');
       const instance = shallow(
         <InlineOptions
           {...defaultOptions}
-          state={testState}
-          setState={setStateSpy}
+          layer={testLayer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          layerId="first"
-          currentColumn={testState.layers.first.columns.col1 as DateHistogramIndexPatternColumn}
+          currentColumn={testLayer.columns.col1 as DateHistogramIndexPatternColumn}
         />
       );
       expect(instance.find('[data-test-subj="lensDateHistogramError"]').exists()).toBeTruthy();
     });
 
     it('should not display error if interval value is blank', () => {
-      const setStateSpy = jest.fn();
-      const testState = stateWithInterval('d');
+      const updateLayerSpy = jest.fn();
+      const testLayer = layerWithInterval('d');
       const instance = shallow(
         <InlineOptions
           {...defaultOptions}
-          state={testState}
-          setState={setStateSpy}
+          layer={testLayer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          layerId="first"
-          currentColumn={testState.layers.first.columns.col1 as DateHistogramIndexPatternColumn}
+          currentColumn={testLayer.columns.col1 as DateHistogramIndexPatternColumn}
         />
       );
       expect(instance.find('[data-test-subj="lensDateHistogramError"]').exists()).toBeFalsy();
     });
 
     it('should display error if interval value is 0', () => {
-      const setStateSpy = jest.fn();
-      const testState = stateWithInterval('0d');
+      const updateLayerSpy = jest.fn();
+      const testLayer = layerWithInterval('0d');
       const instance = shallow(
         <InlineOptions
           {...defaultOptions}
-          state={testState}
-          setState={setStateSpy}
+          layer={testLayer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          layerId="first"
-          currentColumn={testState.layers.first.columns.col1 as DateHistogramIndexPatternColumn}
+          currentColumn={testLayer.columns.col1 as DateHistogramIndexPatternColumn}
         />
       );
       expect(instance.find('[data-test-subj="lensDateHistogramError"]').exists()).toBeTruthy();
     });
 
     it('should update the unit', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
       const instance = shallow(
         <InlineOptions
           {...defaultOptions}
-          state={state}
-          setState={setStateSpy}
+          layer={layer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          layerId="first"
-          currentColumn={state.layers.first.columns.col1 as DateHistogramIndexPatternColumn}
+          currentColumn={layer.columns.col1 as DateHistogramIndexPatternColumn}
         />
       );
       instance.find('[data-test-subj="lensDateHistogramUnit"]').prop('onChange')!({
@@ -619,21 +620,20 @@ describe('date_histogram', () => {
           value: 'd',
         },
       } as React.ChangeEvent<HTMLInputElement>);
-      expect(setStateSpy).toHaveBeenCalledWith(stateWithInterval('42d'));
+      expect(updateLayerSpy).toHaveBeenCalledWith(layerWithInterval('42d'));
     });
 
     it('should update the value', () => {
-      const setStateSpy = jest.fn();
-      const testState = stateWithInterval('42d');
+      const updateLayerSpy = jest.fn();
+      const testLayer = layerWithInterval('42d');
 
       const instance = shallow(
         <InlineOptions
           {...defaultOptions}
-          state={testState}
-          setState={setStateSpy}
+          layer={testLayer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          layerId="first"
-          currentColumn={testState.layers.first.columns.col1 as DateHistogramIndexPatternColumn}
+          currentColumn={testLayer.columns.col1 as DateHistogramIndexPatternColumn}
         />
       );
       instance.find('[data-test-subj="lensDateHistogramValue"]').prop('onChange')!({
@@ -641,50 +641,48 @@ describe('date_histogram', () => {
           value: '9',
         },
       } as React.ChangeEvent<HTMLInputElement>);
-      expect(setStateSpy).toHaveBeenCalledWith(stateWithInterval('9d'));
+      expect(updateLayerSpy).toHaveBeenCalledWith(layerWithInterval('9d'));
     });
 
     it('should not render options if they are restricted', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
+
+      const indexPattern = {
+        ...indexPattern1,
+        fields: [
+          {
+            ...indexPattern1.fields[0],
+            aggregationRestrictions: {
+              date_histogram: {
+                agg: 'date_histogram',
+                time_zone: 'UTC',
+                calendar_interval: '1h',
+              },
+            },
+          },
+        ],
+        getFieldByName: getFieldByNameFactory([
+          {
+            ...indexPattern1.fields[0],
+            aggregationRestrictions: {
+              date_histogram: {
+                agg: 'date_histogram',
+                time_zone: 'UTC',
+                calendar_interval: '1h',
+              },
+            },
+          },
+        ]),
+      };
+
       const instance = shallow(
         <InlineOptions
           {...defaultOptions}
-          state={{
-            ...state,
-            indexPatterns: {
-              1: {
-                ...state.indexPatterns[1],
-                fields: [
-                  {
-                    ...state.indexPatterns[1].fields[0],
-                    aggregationRestrictions: {
-                      date_histogram: {
-                        agg: 'date_histogram',
-                        time_zone: 'UTC',
-                        calendar_interval: '1h',
-                      },
-                    },
-                  },
-                ],
-                getFieldByName: getFieldByNameFactory([
-                  {
-                    ...state.indexPatterns[1].fields[0],
-                    aggregationRestrictions: {
-                      date_histogram: {
-                        agg: 'date_histogram',
-                        time_zone: 'UTC',
-                        calendar_interval: '1h',
-                      },
-                    },
-                  },
-                ]),
-              },
-            },
-          }}
-          setState={setStateSpy}
+          layer={layer}
+          indexPattern={indexPattern}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          layerId="first"
-          currentColumn={state.layers.first.columns.col1 as DateHistogramIndexPatternColumn}
+          currentColumn={layer.columns.col1 as DateHistogramIndexPatternColumn}
         />
       );
 
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/date_histogram.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/date_histogram.tsx
index c48b9dad6c0d5b..cdd1ccad96a991 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/date_histogram.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/date_histogram.tsx
@@ -143,12 +143,8 @@ export const dateHistogramOperation: OperationDefinition<
       extended_bounds: JSON.stringify({}),
     }).toAst();
   },
-  paramEditor: ({ state, setState, currentColumn, layerId, dateRange, data }) => {
-    const field =
-      currentColumn &&
-      state.indexPatterns[state.layers[layerId].indexPatternId].getFieldByName(
-        currentColumn.sourceField
-      );
+  paramEditor: ({ layer, columnId, currentColumn, updateLayer, dateRange, data, indexPattern }) => {
+    const field = currentColumn && indexPattern.getFieldByName(currentColumn.sourceField);
     const intervalIsRestricted =
       field!.aggregationRestrictions && field!.aggregationRestrictions.date_histogram;
 
@@ -167,14 +163,14 @@ export const dateHistogramOperation: OperationDefinition<
       const value = ev.target.checked
         ? data.search.aggs.calculateAutoTimeExpression({ from: fromDate, to: toDate }) || '1h'
         : autoInterval;
-      setState(updateColumnParam({ state, layerId, currentColumn, paramName: 'interval', value }));
+      updateLayer(updateColumnParam({ layer, columnId, paramName: 'interval', value }));
     }
 
     const setInterval = (newInterval: typeof interval) => {
       const isCalendarInterval = calendarOnlyIntervals.has(newInterval.unit);
       const value = `${isCalendarInterval ? '1' : newInterval.value}${newInterval.unit || 'd'}`;
 
-      setState(updateColumnParam({ state, layerId, currentColumn, paramName: 'interval', value }));
+      updateLayer(updateColumnParam({ layer, columnId, paramName: 'interval', value }));
     };
 
     return (
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
index bb8e52ba443a2f..cf57c35f6f68bf 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx
@@ -7,12 +7,13 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public';
-import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
+import type { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public';
+import type { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import { dataPluginMock } from '../../../../../../../../src/plugins/data/public/mocks';
-import { FiltersIndexPatternColumn } from '.';
+import type { FiltersIndexPatternColumn } from '.';
 import { filtersOperation } from '../index';
-import { IndexPatternPrivateState } from '../../../types';
+import type { IndexPatternLayer } from '../../../types';
+import { createMockedIndexPattern } from '../../../mocks';
 import { FilterPopover } from './filter_popover';
 
 const defaultProps = {
@@ -22,6 +23,7 @@ const defaultProps = {
   dateRange: { fromDate: 'now-1d', toDate: 'now' },
   data: dataPluginMock.createStartContract(),
   http: {} as HttpSetup,
+  indexPattern: createMockedIndexPattern(),
 };
 
 // mocking random id generator function
@@ -38,49 +40,40 @@ jest.mock('@elastic/eui', () => {
 });
 
 describe('filters', () => {
-  let state: IndexPatternPrivateState;
+  let layer: IndexPatternLayer;
   const InlineOptions = filtersOperation.paramEditor!;
 
   beforeEach(() => {
-    state = {
-      indexPatternRefs: [],
-      indexPatterns: {},
-      existingFields: {},
-      currentIndexPatternId: '1',
-      isFirstExistenceFetch: false,
-      layers: {
-        first: {
-          indexPatternId: '1',
-          columnOrder: ['col1', 'col2'],
-          columns: {
-            col1: {
-              label: 'filters',
-              dataType: 'document',
-              operationType: 'filters',
-              scale: 'ordinal',
-              isBucketed: true,
-              params: {
-                filters: [
-                  {
-                    input: { query: 'bytes >= 1', language: 'kuery' },
-                    label: 'More than one',
-                  },
-                  {
-                    input: { query: 'src : 2', language: 'kuery' },
-                    label: '',
-                  },
-                ],
+    layer = {
+      indexPatternId: '1',
+      columnOrder: ['col1', 'col2'],
+      columns: {
+        col1: {
+          label: 'filters',
+          dataType: 'document',
+          operationType: 'filters',
+          scale: 'ordinal',
+          isBucketed: true,
+          params: {
+            filters: [
+              {
+                input: { query: 'bytes >= 1', language: 'kuery' },
+                label: 'More than one',
               },
-            },
-            col2: {
-              label: 'Count',
-              dataType: 'number',
-              isBucketed: false,
-              sourceField: 'Records',
-              operationType: 'count',
-            },
+              {
+                input: { query: 'src : 2', language: 'kuery' },
+                label: '',
+              },
+            ],
           },
         },
+        col2: {
+          label: 'Count',
+          dataType: 'number',
+          isBucketed: false,
+          sourceField: 'Records',
+          operationType: 'count',
+        },
       },
     };
   });
@@ -88,9 +81,9 @@ describe('filters', () => {
   describe('toEsAggsFn', () => {
     it('should reflect params correctly', () => {
       const esAggsFn = filtersOperation.toEsAggsFn(
-        state.layers.first.columns.col1 as FiltersIndexPatternColumn,
+        layer.columns.col1 as FiltersIndexPatternColumn,
         'col1',
-        state.indexPatterns['1']
+        createMockedIndexPattern()
       );
       expect(esAggsFn).toEqual(
         expect.objectContaining({
@@ -133,15 +126,14 @@ describe('filters', () => {
     }));
 
     it('should update state when changing a filter', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
       const instance = mount(
         <InlineOptions
           {...defaultProps}
-          state={state}
-          setState={setStateSpy}
+          layer={layer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          currentColumn={state.layers.first.columns.col1 as FiltersIndexPatternColumn}
-          layerId="first"
+          currentColumn={layer.columns.col1 as FiltersIndexPatternColumn}
         />
       );
 
@@ -156,34 +148,29 @@ describe('filters', () => {
         });
       });
       instance.update();
-      expect(setStateSpy).toHaveBeenCalledWith({
-        ...state,
-        layers: {
-          first: {
-            ...state.layers.first,
-            columns: {
-              ...state.layers.first.columns,
-              col1: {
-                ...state.layers.first.columns.col1,
-                params: {
-                  filters: [
-                    {
-                      input: {
-                        query: 'dest : 5',
-                        language: 'lucene',
-                      },
-                      label: 'Dest5',
-                    },
-                    {
-                      input: {
-                        language: 'kuery',
-                        query: 'src : 2',
-                      },
-                      label: '',
-                    },
-                  ],
+      expect(updateLayerSpy).toHaveBeenCalledWith({
+        ...layer,
+        columns: {
+          ...layer.columns,
+          col1: {
+            ...layer.columns.col1,
+            params: {
+              filters: [
+                {
+                  input: {
+                    query: 'dest : 5',
+                    language: 'lucene',
+                  },
+                  label: 'Dest5',
                 },
-              },
+                {
+                  input: {
+                    language: 'kuery',
+                    query: 'src : 2',
+                  },
+                  label: '',
+                },
+              ],
             },
           },
         },
@@ -192,15 +179,14 @@ describe('filters', () => {
 
     describe('Modify filters', () => {
       it('should correctly show existing filters ', () => {
-        const setStateSpy = jest.fn();
+        const updateLayerSpy = jest.fn();
         const instance = mount(
           <InlineOptions
             {...defaultProps}
-            state={state}
-            setState={setStateSpy}
+            layer={layer}
+            updateLayer={updateLayerSpy}
             columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as FiltersIndexPatternColumn}
-            layerId="first"
+            currentColumn={layer.columns.col1 as FiltersIndexPatternColumn}
           />
         );
         expect(
@@ -218,15 +204,14 @@ describe('filters', () => {
       });
 
       it('should remove filter', () => {
-        const setStateSpy = jest.fn();
+        const updateLayerSpy = jest.fn();
         const instance = mount(
           <InlineOptions
             {...defaultProps}
-            state={state}
-            setState={setStateSpy}
+            layer={layer}
+            updateLayer={updateLayerSpy}
             columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as FiltersIndexPatternColumn}
-            layerId="first"
+            currentColumn={layer.columns.col1 as FiltersIndexPatternColumn}
           />
         );
 
@@ -234,27 +219,22 @@ describe('filters', () => {
           .find('[data-test-subj="lns-customBucketContainer-remove"]')
           .at(2)
           .simulate('click');
-        expect(setStateSpy).toHaveBeenCalledWith({
-          ...state,
-          layers: {
-            first: {
-              ...state.layers.first,
-              columns: {
-                ...state.layers.first.columns,
-                col1: {
-                  ...state.layers.first.columns.col1,
-                  params: {
-                    filters: [
-                      {
-                        input: {
-                          language: 'kuery',
-                          query: 'bytes >= 1',
-                        },
-                        label: 'More than one',
-                      },
-                    ],
+        expect(updateLayerSpy).toHaveBeenCalledWith({
+          ...layer,
+          columns: {
+            ...layer.columns,
+            col1: {
+              ...layer.columns.col1,
+              params: {
+                filters: [
+                  {
+                    input: {
+                      language: 'kuery',
+                      query: 'bytes >= 1',
+                    },
+                    label: 'More than one',
                   },
-                },
+                ],
               },
             },
           },
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
index b6c0b565f9565f..8382aef7cc34ff 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx
@@ -128,16 +128,14 @@ export const filtersOperation: OperationDefinition<FiltersIndexPatternColumn, 'n
     }).toAst();
   },
 
-  paramEditor: ({ state, setState, currentColumn, layerId, data }) => {
-    const indexPattern = state.indexPatterns[state.layers[layerId].indexPatternId];
+  paramEditor: ({ layer, columnId, currentColumn, indexPattern, updateLayer, data }) => {
     const filters = currentColumn.params.filters;
 
     const setFilters = (newFilters: Filter[]) =>
-      setState(
+      updateLayer(
         updateColumnParam({
-          state,
-          layerId,
-          currentColumn,
+          layer,
+          columnId,
           paramName: 'filters',
           value: newFilters,
         })
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
index 1f19b4e7703137..6431dac7b381df 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/index.ts
@@ -36,12 +36,7 @@ import { countOperation, CountIndexPatternColumn } from './count';
 import { lastValueOperation, LastValueIndexPatternColumn } from './last_value';
 import { OperationMetadata } from '../../../types';
 import type { BaseIndexPatternColumn, ReferenceBasedIndexPatternColumn } from './column_types';
-import {
-  IndexPatternPrivateState,
-  IndexPattern,
-  IndexPatternField,
-  IndexPatternLayer,
-} from '../../types';
+import { IndexPattern, IndexPatternField, IndexPatternLayer } from '../../types';
 import { DateRange } from '../../../../common';
 import { ExpressionAstFunction } from '../../../../../../../src/plugins/expressions/public';
 import { DataPublicPluginStart } from '../../../../../../../src/plugins/data/public';
@@ -115,10 +110,10 @@ export {
  */
 export interface ParamEditorProps<C> {
   currentColumn: C;
-  state: IndexPatternPrivateState;
-  setState: (newState: IndexPatternPrivateState) => void;
+  layer: IndexPatternLayer;
+  updateLayer: (newLayer: IndexPatternLayer) => void;
   columnId: string;
-  layerId: string;
+  indexPattern: IndexPattern;
   uiSettings: IUiSettingsClient;
   storage: IStorageWrapper;
   savedObjectsClient: SavedObjectsClientContract;
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/last_value.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/last_value.test.tsx
index 6c896adfce9b16..817958aee54900 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/last_value.test.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/last_value.test.tsx
@@ -13,7 +13,7 @@ import { dataPluginMock } from '../../../../../../../src/plugins/data/public/moc
 import { createMockedIndexPattern } from '../../mocks';
 import { LastValueIndexPatternColumn } from './last_value';
 import { lastValueOperation } from './index';
-import { IndexPatternPrivateState, IndexPattern, IndexPatternLayer } from '../../types';
+import type { IndexPattern, IndexPatternLayer } from '../../types';
 
 const defaultProps = {
   storage: {} as IStorageWrapper,
@@ -22,52 +22,41 @@ const defaultProps = {
   dateRange: { fromDate: 'now-1d', toDate: 'now' },
   data: dataPluginMock.createStartContract(),
   http: {} as HttpSetup,
+  indexPattern: {
+    ...createMockedIndexPattern(),
+    hasRestrictions: false,
+  } as IndexPattern,
 };
 
 describe('last_value', () => {
-  let state: IndexPatternPrivateState;
+  let layer: IndexPatternLayer;
   const InlineOptions = lastValueOperation.paramEditor!;
 
   beforeEach(() => {
-    const indexPattern = createMockedIndexPattern();
-    state = {
-      indexPatternRefs: [],
-      indexPatterns: {
-        '1': {
-          ...indexPattern,
-          hasRestrictions: false,
-        } as IndexPattern,
-      },
-      existingFields: {},
-      currentIndexPatternId: '1',
-      isFirstExistenceFetch: false,
-      layers: {
-        first: {
-          indexPatternId: '1',
-          columnOrder: ['col1', 'col2'],
-          columns: {
-            col1: {
-              label: 'Top value of category',
-              dataType: 'string',
-              isBucketed: true,
-              operationType: 'terms',
-              params: {
-                orderBy: { type: 'alphabetical' },
-                size: 3,
-                orderDirection: 'asc',
-              },
-              sourceField: 'category',
-            },
-            col2: {
-              label: 'Last value of a',
-              dataType: 'number',
-              isBucketed: false,
-              sourceField: 'a',
-              operationType: 'last_value',
-              params: {
-                sortField: 'datefield',
-              },
-            },
+    layer = {
+      indexPatternId: '1',
+      columnOrder: ['col1', 'col2'],
+      columns: {
+        col1: {
+          label: 'Top value of category',
+          dataType: 'string',
+          isBucketed: true,
+          operationType: 'terms',
+          params: {
+            orderBy: { type: 'alphabetical' },
+            size: 3,
+            orderDirection: 'asc',
+          },
+          sourceField: 'category',
+        },
+        col2: {
+          label: 'Last value of a',
+          dataType: 'number',
+          isBucketed: false,
+          sourceField: 'a',
+          operationType: 'last_value',
+          params: {
+            sortField: 'datefield',
           },
         },
       },
@@ -76,7 +65,7 @@ describe('last_value', () => {
 
   describe('toEsAggsFn', () => {
     it('should reflect params correctly', () => {
-      const lastValueColumn = state.layers.first.columns.col2 as LastValueIndexPatternColumn;
+      const lastValueColumn = layer.columns.col2 as LastValueIndexPatternColumn;
       const esAggsFn = lastValueOperation.toEsAggsFn(
         { ...lastValueColumn, params: { ...lastValueColumn.params } },
         'col1',
@@ -345,15 +334,14 @@ describe('last_value', () => {
 
   describe('param editor', () => {
     it('should render current sortField', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
       const instance = shallow(
         <InlineOptions
           {...defaultProps}
-          state={state}
-          setState={setStateSpy}
+          layer={layer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          currentColumn={state.layers.first.columns.col2 as LastValueIndexPatternColumn}
-          layerId="first"
+          currentColumn={layer.columns.col2 as LastValueIndexPatternColumn}
         />
       );
 
@@ -363,15 +351,14 @@ describe('last_value', () => {
     });
 
     it('should update state when changing sortField', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
       const instance = shallow(
         <InlineOptions
           {...defaultProps}
-          state={state}
-          setState={setStateSpy}
-          columnId="col1"
-          currentColumn={state.layers.first.columns.col2 as LastValueIndexPatternColumn}
-          layerId="first"
+          layer={layer}
+          updateLayer={updateLayerSpy}
+          columnId="col2"
+          currentColumn={layer.columns.col2 as LastValueIndexPatternColumn}
         />
       );
 
@@ -380,20 +367,15 @@ describe('last_value', () => {
         .find(EuiComboBox)
         .prop('onChange')!([{ label: 'datefield2', value: 'datefield2' }]);
 
-      expect(setStateSpy).toHaveBeenCalledWith({
-        ...state,
-        layers: {
-          first: {
-            ...state.layers.first,
-            columns: {
-              ...state.layers.first.columns,
-              col2: {
-                ...state.layers.first.columns.col2,
-                params: {
-                  ...(state.layers.first.columns.col2 as LastValueIndexPatternColumn).params,
-                  sortField: 'datefield2',
-                },
-              },
+      expect(updateLayerSpy).toHaveBeenCalledWith({
+        ...layer,
+        columns: {
+          ...layer.columns,
+          col2: {
+            ...layer.columns.col2,
+            params: {
+              ...(layer.columns.col2 as LastValueIndexPatternColumn).params,
+              sortField: 'datefield2',
             },
           },
         },
@@ -403,10 +385,10 @@ describe('last_value', () => {
 
   describe('getErrorMessage', () => {
     let indexPattern: IndexPattern;
-    let layer: IndexPatternLayer;
+    let errorLayer: IndexPatternLayer;
     beforeEach(() => {
       indexPattern = createMockedIndexPattern();
-      layer = {
+      errorLayer = {
         columns: {
           col1: {
             dataType: 'boolean',
@@ -423,53 +405,55 @@ describe('last_value', () => {
       };
     });
     it('returns undefined if sourceField exists and sortField is of type date ', () => {
-      expect(lastValueOperation.getErrorMessage!(layer, 'col1', indexPattern)).toEqual(undefined);
+      expect(lastValueOperation.getErrorMessage!(errorLayer, 'col1', indexPattern)).toEqual(
+        undefined
+      );
     });
     it('shows error message if the sourceField does not exist in index pattern', () => {
-      layer = {
-        ...layer,
+      errorLayer = {
+        ...errorLayer,
         columns: {
           col1: {
-            ...layer.columns.col1,
+            ...errorLayer.columns.col1,
             sourceField: 'notExisting',
           } as LastValueIndexPatternColumn,
         },
       };
-      expect(lastValueOperation.getErrorMessage!(layer, 'col1', indexPattern)).toEqual([
+      expect(lastValueOperation.getErrorMessage!(errorLayer, 'col1', indexPattern)).toEqual([
         'Field notExisting was not found',
       ]);
     });
     it('shows error message  if the sortField does not exist in index pattern', () => {
-      layer = {
-        ...layer,
+      errorLayer = {
+        ...errorLayer,
         columns: {
           col1: {
-            ...layer.columns.col1,
+            ...errorLayer.columns.col1,
             params: {
-              ...layer.columns.col1.params,
+              ...errorLayer.columns.col1.params,
               sortField: 'notExisting',
             },
           } as LastValueIndexPatternColumn,
         },
       };
-      expect(lastValueOperation.getErrorMessage!(layer, 'col1', indexPattern)).toEqual([
+      expect(lastValueOperation.getErrorMessage!(errorLayer, 'col1', indexPattern)).toEqual([
         'Field notExisting was not found',
       ]);
     });
     it('shows error message if the sortField is not date', () => {
-      layer = {
-        ...layer,
+      errorLayer = {
+        ...errorLayer,
         columns: {
           col1: {
-            ...layer.columns.col1,
+            ...errorLayer.columns.col1,
             params: {
-              ...layer.columns.col1.params,
+              ...errorLayer.columns.col1.params,
               sortField: 'bytes',
             },
           } as LastValueIndexPatternColumn,
         },
       };
-      expect(lastValueOperation.getErrorMessage!(layer, 'col1', indexPattern)).toEqual([
+      expect(lastValueOperation.getErrorMessage!(errorLayer, 'col1', indexPattern)).toEqual([
         'Field bytes is not a date field and cannot be used for sorting',
       ]);
     });
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/last_value.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/last_value.tsx
index 4cb2d876c83a13..7b5aee860654aa 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/last_value.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/last_value.tsx
@@ -186,12 +186,11 @@ export const lastValueOperation: OperationDefinition<LastValueIndexPatternColumn
     );
   },
 
-  paramEditor: ({ state, setState, currentColumn, layerId }) => {
-    const currentIndexPattern = state.indexPatterns[state.layers[layerId].indexPatternId];
-    const dateFields = getDateFields(currentIndexPattern);
+  paramEditor: ({ layer, updateLayer, columnId, currentColumn, indexPattern }) => {
+    const dateFields = getDateFields(indexPattern);
     const isSortFieldInvalid = !!getInvalidSortFieldMessage(
       currentColumn.params.sortField,
-      currentIndexPattern
+      indexPattern
     );
     return (
       <>
@@ -228,11 +227,10 @@ export const lastValueOperation: OperationDefinition<LastValueIndexPatternColumn
               if (choices.length === 0) {
                 return;
               }
-              setState(
+              updateLayer(
                 updateColumnParam({
-                  state,
-                  layerId,
-                  currentColumn,
+                  layer,
+                  columnId,
                   paramName: 'sortField',
                   value: choices[0].value,
                 })
@@ -243,8 +241,8 @@ export const lastValueOperation: OperationDefinition<LastValueIndexPatternColumn
                 ? [
                     {
                       label:
-                        currentIndexPattern.getFieldByName(currentColumn.params.sortField)
-                          ?.displayName || currentColumn.params.sortField,
+                        indexPattern.getFieldByName(currentColumn.params.sortField)?.displayName ||
+                        currentColumn.params.sortField,
                       value: currentColumn.params.sortField,
                     },
                   ]
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.test.tsx
index 82ead5a6f39627..c2c52985c6cd27 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.test.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.test.tsx
@@ -17,7 +17,7 @@ import {
 } from '@elastic/eui';
 import { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
-import { IndexPatternPrivateState, IndexPattern } from '../../../types';
+import type { IndexPatternLayer, IndexPattern } from '../../../types';
 import { dataPluginMock } from '../../../../../../../../src/plugins/data/public/mocks';
 import { rangeOperation } from '../index';
 import { RangeIndexPatternColumn } from './ranges';
@@ -51,6 +51,7 @@ dataPluginMockValue.fieldFormats.deserialize = jest.fn().mockImplementation(({ p
 type ReactMouseEvent = React.MouseEvent<HTMLAnchorElement, MouseEvent> &
   React.MouseEvent<HTMLButtonElement, MouseEvent>;
 
+const sourceField = 'MyField';
 const defaultOptions = {
   storage: {} as IStorageWrapper,
   // need this for MAX_HISTOGRAM value
@@ -64,75 +65,64 @@ const defaultOptions = {
   },
   data: dataPluginMockValue,
   http: {} as HttpSetup,
+  indexPattern: {
+    id: '1',
+    title: 'my_index_pattern',
+    hasRestrictions: false,
+    fields: [{ name: sourceField, type: 'number', displayName: sourceField }],
+    getFieldByName: getFieldByNameFactory([
+      { name: sourceField, type: 'number', displayName: sourceField },
+    ]),
+  },
 };
 
 describe('ranges', () => {
-  let state: IndexPatternPrivateState;
+  let layer: IndexPatternLayer;
   const InlineOptions = rangeOperation.paramEditor!;
-  const sourceField = 'MyField';
   const MAX_HISTOGRAM_VALUE = 100;
   const GRANULARITY_DEFAULT_VALUE = (MAX_HISTOGRAM_VALUE - MIN_HISTOGRAM_BARS) / 2;
   const GRANULARITY_STEP = (MAX_HISTOGRAM_VALUE - MIN_HISTOGRAM_BARS) / SLICES;
 
   function setToHistogramMode() {
-    const column = state.layers.first.columns.col1 as RangeIndexPatternColumn;
+    const column = layer.columns.col1 as RangeIndexPatternColumn;
     column.dataType = 'number';
     column.scale = 'interval';
     column.params.type = MODES.Histogram;
   }
 
   function setToRangeMode() {
-    const column = state.layers.first.columns.col1 as RangeIndexPatternColumn;
+    const column = layer.columns.col1 as RangeIndexPatternColumn;
     column.dataType = 'string';
     column.scale = 'ordinal';
     column.params.type = MODES.Range;
   }
 
-  function getDefaultState(): IndexPatternPrivateState {
+  function getDefaultLayer(): IndexPatternLayer {
     return {
-      indexPatternRefs: [],
-      indexPatterns: {
-        '1': {
-          id: '1',
-          title: 'my_index_pattern',
-          hasRestrictions: false,
-          fields: [{ name: sourceField, type: 'number', displayName: sourceField }],
-          getFieldByName: getFieldByNameFactory([
-            { name: sourceField, type: 'number', displayName: sourceField },
-          ]),
-        },
-      },
-      existingFields: {},
-      currentIndexPatternId: '1',
-      isFirstExistenceFetch: false,
-      layers: {
-        first: {
-          indexPatternId: '1',
-          columnOrder: ['col1', 'col2'],
-          columns: {
-            // Start with the histogram type
-            col1: {
-              label: sourceField,
-              dataType: 'number',
-              operationType: 'range',
-              scale: 'interval',
-              isBucketed: true,
-              sourceField,
-              params: {
-                type: MODES.Histogram,
-                ranges: [{ from: 0, to: DEFAULT_INTERVAL, label: '' }],
-                maxBars: 'auto',
-              },
-            },
-            col2: {
-              label: 'Count',
-              dataType: 'number',
-              isBucketed: false,
-              sourceField: 'Records',
-              operationType: 'count',
-            },
+      indexPatternId: '1',
+      columnOrder: ['col1', 'col2'],
+      columns: {
+        // Start with the histogram type
+        col1: {
+          label: sourceField,
+          dataType: 'number',
+          operationType: 'range',
+          scale: 'interval',
+          isBucketed: true,
+          sourceField,
+          params: {
+            type: MODES.Histogram,
+            ranges: [{ from: 0, to: DEFAULT_INTERVAL, label: '' }],
+            maxBars: 'auto',
           },
         },
+        col2: {
+          label: 'Count',
+          dataType: 'number',
+          isBucketed: false,
+          sourceField: 'Records',
+          operationType: 'count',
+        },
       },
     };
   }
@@ -142,7 +132,7 @@ describe('ranges', () => {
   });
 
   beforeEach(() => {
-    state = getDefaultState();
+    layer = getDefaultLayer();
   });
 
   describe('toEsAggsFn', () => {
@@ -150,7 +140,7 @@ describe('ranges', () => {
 
     it('should reflect params correctly', () => {
       const esAggsFn = rangeOperation.toEsAggsFn(
-        state.layers.first.columns.col1 as RangeIndexPatternColumn,
+        layer.columns.col1 as RangeIndexPatternColumn,
         'col1',
         {} as IndexPattern
       );
@@ -189,10 +179,10 @@ describe('ranges', () => {
     });
 
     it('should set maxBars param if provided', () => {
-      (state.layers.first.columns.col1 as RangeIndexPatternColumn).params.maxBars = 10;
+      (layer.columns.col1 as RangeIndexPatternColumn).params.maxBars = 10;
 
       const esAggsFn = rangeOperation.toEsAggsFn(
-        state.layers.first.columns.col1 as RangeIndexPatternColumn,
+        layer.columns.col1 as RangeIndexPatternColumn,
         'col1',
         {} as IndexPattern
       );
@@ -211,7 +201,7 @@ describe('ranges', () => {
       setToRangeMode();
 
       const esAggsFn = rangeOperation.toEsAggsFn(
-        state.layers.first.columns.col1 as RangeIndexPatternColumn,
+        layer.columns.col1 as RangeIndexPatternColumn,
         'col1',
         {} as IndexPattern
       );
@@ -225,12 +215,12 @@ describe('ranges', () => {
 
     it('should include custom labels', () => {
       setToRangeMode();
-      (state.layers.first.columns.col1 as RangeIndexPatternColumn).params.ranges = [
+      (layer.columns.col1 as RangeIndexPatternColumn).params.ranges = [
         { from: 0, to: 100, label: 'customlabel' },
       ];
 
       const esAggsFn = rangeOperation.toEsAggsFn(
-        state.layers.first.columns.col1 as RangeIndexPatternColumn,
+        layer.columns.col1 as RangeIndexPatternColumn,
         'col1',
         {} as IndexPattern
       );
@@ -276,36 +266,30 @@ describe('ranges', () => {
   describe('paramEditor', () => {
     describe('Modify intervals in basic mode', () => {
       beforeEach(() => {
-        state = getDefaultState();
+        layer = getDefaultLayer();
       });
 
       it('should start update the state with the default maxBars value', () => {
-        const setStateSpy = jest.fn();
+        const updateLayerSpy = jest.fn();
         mount(
           <InlineOptions
             {...defaultOptions}
-            state={state}
-            setState={setStateSpy}
+            layer={layer}
+            updateLayer={updateLayerSpy}
             columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as RangeIndexPatternColumn}
-            layerId="first"
+            currentColumn={layer.columns.col1 as RangeIndexPatternColumn}
           />
         );
 
-        expect(setStateSpy).toHaveBeenCalledWith({
-          ...state,
-          layers: {
-            first: {
-              ...state.layers.first,
-              columns: {
-                ...state.layers.first.columns,
-                col1: {
-                  ...state.layers.first.columns.col1,
-                  params: {
-                    ...state.layers.first.columns.col1.params,
-                    maxBars: GRANULARITY_DEFAULT_VALUE,
-                  },
-                },
+        expect(updateLayerSpy).toHaveBeenCalledWith({
+          ...layer,
+          columns: {
+            ...layer.columns,
+            col1: {
+              ...layer.columns.col1,
+              params: {
+                ...layer.columns.col1.params,
+                maxBars: GRANULARITY_DEFAULT_VALUE,
               },
             },
           },
@@ -313,16 +297,15 @@ describe('ranges', () => {
       });
 
       it('should update state when changing Max bars number', () => {
-        const setStateSpy = jest.fn();
+        const updateLayerSpy = jest.fn();
 
         const instance = mount(
           <InlineOptions
             {...defaultOptions}
-            state={state}
-            setState={setStateSpy}
+            layer={layer}
+            updateLayer={updateLayerSpy}
             columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as RangeIndexPatternColumn}
-            layerId="first"
+            currentColumn={layer.columns.col1 as RangeIndexPatternColumn}
           />
         );
 
@@ -343,20 +326,15 @@ describe('ranges', () => {
           jest.advanceTimersByTime(TYPING_DEBOUNCE_TIME * 4);
         });
 
-        expect(setStateSpy).toHaveBeenCalledWith({
-          ...state,
-          layers: {
-            first: {
-              ...state.layers.first,
-              columns: {
-                ...state.layers.first.columns,
-                col1: {
-                  ...state.layers.first.columns.col1,
-                  params: {
-                    ...state.layers.first.columns.col1.params,
-                    maxBars: MAX_HISTOGRAM_VALUE,
-                  },
-                },
+        expect(updateLayerSpy).toHaveBeenCalledWith({
+          ...layer,
+          columns: {
+            ...layer.columns,
+            col1: {
+              ...layer.columns.col1,
+              params: {
+                ...layer.columns.col1.params,
+                maxBars: MAX_HISTOGRAM_VALUE,
               },
             },
           },
@@ -364,16 +342,15 @@ describe('ranges', () => {
       });
 
       it('should update the state using the plus or minus buttons by the step amount', () => {
-        const setStateSpy = jest.fn();
+        const updateLayerSpy = jest.fn();
 
         const instance = mount(
           <InlineOptions
             {...defaultOptions}
-            state={state}
-            setState={setStateSpy}
+            layer={layer}
+            updateLayer={updateLayerSpy}
             columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as RangeIndexPatternColumn}
-            layerId="first"
+            currentColumn={layer.columns.col1 as RangeIndexPatternColumn}
           />
         );
 
@@ -389,20 +366,15 @@ describe('ranges', () => {
           jest.advanceTimersByTime(TYPING_DEBOUNCE_TIME * 4);
         });
 
-        expect(setStateSpy).toHaveBeenCalledWith({
-          ...state,
-          layers: {
-            first: {
-              ...state.layers.first,
-              columns: {
-                ...state.layers.first.columns,
-                col1: {
-                  ...state.layers.first.columns.col1,
-                  params: {
-                    ...state.layers.first.columns.col1.params,
-                    maxBars: GRANULARITY_DEFAULT_VALUE - GRANULARITY_STEP,
-                  },
-                },
+        expect(updateLayerSpy).toHaveBeenCalledWith({
+          ...layer,
+          columns: {
+            ...layer.columns,
+            col1: {
+              ...layer.columns.col1,
+              params: {
+                ...layer.columns.col1.params,
+                maxBars: GRANULARITY_DEFAULT_VALUE - GRANULARITY_STEP,
               },
             },
           },
@@ -417,25 +389,19 @@ describe('ranges', () => {
           jest.advanceTimersByTime(TYPING_DEBOUNCE_TIME * 4);
         });
 
-        expect(setStateSpy).toHaveBeenCalledWith({
-          ...state,
-          layers: {
-            first: {
-              ...state.layers.first,
-              columns: {
-                ...state.layers.first.columns,
-                col1: {
-                  ...state.layers.first.columns.col1,
-                  params: {
-                    ...state.layers.first.columns.col1.params,
-                    maxBars: GRANULARITY_DEFAULT_VALUE,
-                  },
-                },
+        expect(updateLayerSpy).toHaveBeenCalledWith({
+          ...layer,
+          columns: {
+            ...layer.columns,
+            col1: {
+              ...layer.columns.col1,
+              params: {
+                ...layer.columns.col1.params,
+                maxBars: GRANULARITY_DEFAULT_VALUE,
               },
             },
           },
         });
-        // });
       });
     });
 
@@ -446,16 +412,15 @@ describe('ranges', () => {
       beforeEach(() => setToRangeMode());
 
       it('should show one range interval to start with', () => {
-        const setStateSpy = jest.fn();
+        const updateLayerSpy = jest.fn();
 
         const instance = mount(
           <InlineOptions
             {...defaultOptions}
-            state={state}
-            setState={setStateSpy}
+            layer={layer}
+            updateLayer={updateLayerSpy}
             columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as RangeIndexPatternColumn}
-            layerId="first"
+            currentColumn={layer.columns.col1 as RangeIndexPatternColumn}
           />
         );
 
@@ -463,16 +428,15 @@ describe('ranges', () => {
       });
 
       it('should add a new range', () => {
-        const setStateSpy = jest.fn();
+        const updateLayerSpy = jest.fn();
 
         const instance = mount(
           <InlineOptions
             {...defaultOptions}
-            state={state}
-            setState={setStateSpy}
+            layer={layer}
+            updateLayer={updateLayerSpy}
             columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as RangeIndexPatternColumn}
-            layerId="first"
+            currentColumn={layer.columns.col1 as RangeIndexPatternColumn}
           />
         );
 
@@ -495,23 +459,18 @@ describe('ranges', () => {
           } as React.ChangeEvent<HTMLInputElement>);
           jest.advanceTimersByTime(TYPING_DEBOUNCE_TIME * 4);
 
-          expect(setStateSpy).toHaveBeenCalledWith({
-            ...state,
-            layers: {
-              first: {
-                ...state.layers.first,
-                columns: {
-                  ...state.layers.first.columns,
-                  col1: {
-                    ...state.layers.first.columns.col1,
-                    params: {
-                      ...state.layers.first.columns.col1.params,
-                      ranges: [
-                        { from: 0, to: DEFAULT_INTERVAL, label: '' },
-                        { from: 50, to: Infinity, label: '' },
-                      ],
-                    },
-                  },
+          expect(updateLayerSpy).toHaveBeenCalledWith({
+            ...layer,
+            columns: {
+              ...layer.columns,
+              col1: {
+                ...layer.columns.col1,
+                params: {
+                  ...layer.columns.col1.params,
+                  ranges: [
+                    { from: 0, to: DEFAULT_INTERVAL, label: '' },
+                    { from: 50, to: Infinity, label: '' },
+                  ],
                 },
               },
             },
@@ -520,16 +479,15 @@ describe('ranges', () => {
       });
 
       it('should add a new range with custom label', () => {
-        const setStateSpy = jest.fn();
+        const updateLayerSpy = jest.fn();
 
         const instance = mount(
           <InlineOptions
             {...defaultOptions}
-            state={state}
-            setState={setStateSpy}
+            layer={layer}
+            updateLayer={updateLayerSpy}
             columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as RangeIndexPatternColumn}
-            layerId="first"
+            currentColumn={layer.columns.col1 as RangeIndexPatternColumn}
           />
         );
 
@@ -552,23 +510,18 @@ describe('ranges', () => {
           } as React.ChangeEvent<HTMLInputElement>);
           jest.advanceTimersByTime(TYPING_DEBOUNCE_TIME * 4);
 
-          expect(setStateSpy).toHaveBeenCalledWith({
-            ...state,
-            layers: {
-              first: {
-                ...state.layers.first,
-                columns: {
-                  ...state.layers.first.columns,
-                  col1: {
-                    ...state.layers.first.columns.col1,
-                    params: {
-                      ...state.layers.first.columns.col1.params,
-                      ranges: [
-                        { from: 0, to: DEFAULT_INTERVAL, label: '' },
-                        { from: DEFAULT_INTERVAL, to: Infinity, label: 'customlabel' },
-                      ],
-                    },
-                  },
+          expect(updateLayerSpy).toHaveBeenCalledWith({
+            ...layer,
+            columns: {
+              ...layer.columns,
+              col1: {
+                ...layer.columns.col1,
+                params: {
+                  ...layer.columns.col1.params,
+                  ranges: [
+                    { from: 0, to: DEFAULT_INTERVAL, label: '' },
+                    { from: DEFAULT_INTERVAL, to: Infinity, label: 'customlabel' },
+                  ],
                 },
               },
             },
@@ -577,16 +530,15 @@ describe('ranges', () => {
       });
 
       it('should open a popover to edit an existing range', () => {
-        const setStateSpy = jest.fn();
+        const updateLayerSpy = jest.fn();
 
         const instance = mount(
           <InlineOptions
             {...defaultOptions}
-            state={state}
-            setState={setStateSpy}
+            layer={layer}
+            updateLayer={updateLayerSpy}
             columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as RangeIndexPatternColumn}
-            layerId="first"
+            currentColumn={layer.columns.col1 as RangeIndexPatternColumn}
           />
         );
 
@@ -607,20 +559,15 @@ describe('ranges', () => {
           } as React.ChangeEvent<HTMLInputElement>);
           jest.advanceTimersByTime(TYPING_DEBOUNCE_TIME * 4);
 
-          expect(setStateSpy).toHaveBeenCalledWith({
-            ...state,
-            layers: {
-              first: {
-                ...state.layers.first,
-                columns: {
-                  ...state.layers.first.columns,
-                  col1: {
-                    ...state.layers.first.columns.col1,
-                    params: {
-                      ...state.layers.first.columns.col1.params,
-                      ranges: [{ from: 0, to: 50, label: '' }],
-                    },
-                  },
+          expect(updateLayerSpy).toHaveBeenCalledWith({
+            ...layer,
+            columns: {
+              ...layer.columns,
+              col1: {
+                ...layer.columns.col1,
+                params: {
+                  ...layer.columns.col1.params,
+                  ranges: [{ from: 0, to: 50, label: '' }],
                 },
               },
             },
@@ -629,16 +576,15 @@ describe('ranges', () => {
       });
 
       it('should not accept invalid ranges', () => {
-        const setStateSpy = jest.fn();
+        const updateLayerSpy = jest.fn();
 
         const instance = mount(
           <InlineOptions
             {...defaultOptions}
-            state={state}
-            setState={setStateSpy}
+            layer={layer}
+            updateLayer={updateLayerSpy}
             columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as RangeIndexPatternColumn}
-            layerId="first"
+            currentColumn={layer.columns.col1 as RangeIndexPatternColumn}
           />
         );
 
@@ -670,10 +616,10 @@ describe('ranges', () => {
       });
 
       it('should be possible to remove a range if multiple', () => {
-        const setStateSpy = jest.fn();
+        const updateLayerSpy = jest.fn();
 
         // Add an extra range
-        (state.layers.first.columns.col1 as RangeIndexPatternColumn).params.ranges.push({
+        (layer.columns.col1 as RangeIndexPatternColumn).params.ranges.push({
           from: DEFAULT_INTERVAL,
           to: 2 * DEFAULT_INTERVAL,
           label: '',
@@ -682,11 +628,10 @@ describe('ranges', () => {
         const instance = mount(
           <InlineOptions
             {...defaultOptions}
-            state={state}
-            setState={setStateSpy}
+            layer={layer}
+            updateLayer={updateLayerSpy}
             columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as RangeIndexPatternColumn}
-            layerId="first"
+            currentColumn={layer.columns.col1 as RangeIndexPatternColumn}
           />
         );
 
@@ -709,10 +654,10 @@ describe('ranges', () => {
       });
 
       it('should handle correctly open ranges when saved', () => {
-        const setStateSpy = jest.fn();
+        const updateLayerSpy = jest.fn();
 
         // Add an extra open range:
-        (state.layers.first.columns.col1 as RangeIndexPatternColumn).params.ranges.push({
+        (layer.columns.col1 as RangeIndexPatternColumn).params.ranges.push({
           from: null,
           to: null,
           label: '',
@@ -721,11 +666,10 @@ describe('ranges', () => {
         const instance = mount(
           <InlineOptions
             {...defaultOptions}
-            state={state}
-            setState={setStateSpy}
+            layer={layer}
+            updateLayer={updateLayerSpy}
             columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as RangeIndexPatternColumn}
-            layerId="first"
+            currentColumn={layer.columns.col1 as RangeIndexPatternColumn}
           />
         );
 
@@ -749,21 +693,21 @@ describe('ranges', () => {
       });
 
       it('should correctly handle the default formatter for the field', () => {
-        const setStateSpy = jest.fn();
-
-        // set a default formatter for the sourceField used
-        state.indexPatterns['1'].fieldFormatMap = {
-          MyField: { id: 'custom', params: {} },
-        };
+        const updateLayerSpy = jest.fn();
 
         const instance = mount(
           <InlineOptions
             {...defaultOptions}
-            state={state}
-            setState={setStateSpy}
+            layer={layer}
+            updateLayer={updateLayerSpy}
             columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as RangeIndexPatternColumn}
-            layerId="first"
+            currentColumn={layer.columns.col1 as RangeIndexPatternColumn}
+            indexPattern={{
+              ...defaultOptions.indexPattern,
+              fieldFormatMap: {
+                MyField: { id: 'custom', params: {} },
+              },
+            }}
           />
         );
 
@@ -773,15 +717,10 @@ describe('ranges', () => {
       });
 
       it('should correctly pick the dimension formatter for the field', () => {
-        const setStateSpy = jest.fn();
-
-        // set a default formatter for the sourceField used
-        state.indexPatterns['1'].fieldFormatMap = {
-          MyField: { id: 'custom', params: {} },
-        };
+        const updateLayerSpy = jest.fn();
 
         // now set a format on the range operation
-        (state.layers.first.columns.col1 as RangeIndexPatternColumn).params.format = {
+        (layer.columns.col1 as RangeIndexPatternColumn).params.format = {
           id: 'bytes',
           params: { decimals: 0 },
         };
@@ -789,11 +728,16 @@ describe('ranges', () => {
         const instance = mount(
           <InlineOptions
             {...defaultOptions}
-            state={state}
-            setState={setStateSpy}
+            layer={layer}
+            updateLayer={updateLayerSpy}
             columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as RangeIndexPatternColumn}
-            layerId="first"
+            currentColumn={layer.columns.col1 as RangeIndexPatternColumn}
+            indexPattern={{
+              ...defaultOptions.indexPattern,
+              fieldFormatMap: {
+                MyField: { id: 'custom', params: {} },
+              },
+            }}
           />
         );
 
@@ -803,25 +747,24 @@ describe('ranges', () => {
       });
 
       it('should not update the state on mount', () => {
-        const setStateSpy = jest.fn();
+        const updateLayerSpy = jest.fn();
 
         mount(
           <InlineOptions
             {...defaultOptions}
-            state={state}
-            setState={setStateSpy}
+            layer={layer}
+            updateLayer={updateLayerSpy}
             columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as RangeIndexPatternColumn}
-            layerId="first"
+            currentColumn={layer.columns.col1 as RangeIndexPatternColumn}
           />
         );
-        expect(setStateSpy.mock.calls.length).toBe(0);
+        expect(updateLayerSpy.mock.calls.length).toBe(0);
       });
 
       it('should not reset formatters when switching between custom ranges and auto histogram', () => {
-        const setStateSpy = jest.fn();
+        const updateLayerSpy = jest.fn();
         // now set a format on the range operation
-        (state.layers.first.columns.col1 as RangeIndexPatternColumn).params.format = {
+        (layer.columns.col1 as RangeIndexPatternColumn).params.format = {
           id: 'custom',
           params: { decimals: 3 },
         };
@@ -829,11 +772,10 @@ describe('ranges', () => {
         const instance = mount(
           <InlineOptions
             {...defaultOptions}
-            state={state}
-            setState={setStateSpy}
+            layer={layer}
+            updateLayer={updateLayerSpy}
             columnId="col1"
-            currentColumn={state.layers.first.columns.col1 as RangeIndexPatternColumn}
-            layerId="first"
+            currentColumn={layer.columns.col1 as RangeIndexPatternColumn}
           />
         );
 
@@ -842,7 +784,7 @@ describe('ranges', () => {
           instance.find(EuiLink).first().prop('onClick')!({} as ReactMouseEvent);
         });
 
-        expect(setStateSpy.mock.calls[1][0].layers.first.columns.col1.params.format).toEqual({
+        expect(updateLayerSpy.mock.calls[1][0].columns.col1.params.format).toEqual({
           id: 'custom',
           params: { decimals: 3 },
         });
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx
index 062e2afb8a5bf0..2ba8f5febce5bd 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx
@@ -16,7 +16,6 @@ import { RangeEditor } from './range_editor';
 import { OperationDefinition } from '../index';
 import { FieldBasedIndexPatternColumn } from '../column_types';
 import { updateColumnParam } from '../../layer_helpers';
-import { mergeLayer } from '../../../state_helpers';
 import { supportedFormats } from '../../../format_column';
 import { MODES, AUTO_BARS, DEFAULT_INTERVAL, MIN_HISTOGRAM_BARS, SLICES } from './constants';
 import { IndexPattern, IndexPatternField } from '../../../types';
@@ -173,8 +172,15 @@ export const rangeOperation: OperationDefinition<RangeIndexPatternColumn, 'field
       extended_bounds: JSON.stringify({ min: '', max: '' }),
     }).toAst();
   },
-  paramEditor: ({ state, setState, currentColumn, layerId, columnId, uiSettings, data }) => {
-    const indexPattern = state.indexPatterns[state.layers[layerId].indexPatternId];
+  paramEditor: ({
+    layer,
+    columnId,
+    currentColumn,
+    updateLayer,
+    indexPattern,
+    uiSettings,
+    data,
+  }) => {
     const currentField = indexPattern.getFieldByName(currentColumn.sourceField);
     const numberFormat = currentColumn.params.format;
     const numberFormatterPattern =
@@ -198,11 +204,10 @@ export const rangeOperation: OperationDefinition<RangeIndexPatternColumn, 'field
 
     // Used to change one param at the time
     const setParam: UpdateParamsFnType = (paramName, value) => {
-      setState(
+      updateLayer(
         updateColumnParam({
-          state,
-          layerId,
-          currentColumn,
+          layer,
+          columnId,
           paramName,
           value,
         })
@@ -217,29 +222,24 @@ export const rangeOperation: OperationDefinition<RangeIndexPatternColumn, 'field
         newMode === MODES.Range
           ? { id: 'range', params: { template: 'arrow_right', replaceInfinity: true } }
           : undefined;
-      setState(
-        mergeLayer({
-          state,
-          layerId,
-          newLayer: {
-            columns: {
-              ...state.layers[layerId].columns,
-              [columnId]: {
-                ...currentColumn,
-                scale,
-                dataType,
-                params: {
-                  type: newMode,
-                  ranges: [{ from: 0, to: DEFAULT_INTERVAL, label: '' }],
-                  maxBars: maxBarsDefaultValue,
-                  format: currentColumn.params.format,
-                  parentFormat,
-                },
-              },
+      updateLayer({
+        ...layer,
+        columns: {
+          ...layer.columns,
+          [columnId]: {
+            ...currentColumn,
+            scale,
+            dataType,
+            params: {
+              type: newMode,
+              ranges: [{ from: 0, to: DEFAULT_INTERVAL, label: '' }],
+              maxBars: maxBarsDefaultValue,
+              format: currentColumn.params.format,
+              parentFormat,
             },
           },
-        })
-      );
+        },
+      });
     };
     return (
       <RangeEditor
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/index.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/index.tsx
index 5d96efa8f68cb3..888df40873a353 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/index.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/index.tsx
@@ -169,8 +169,7 @@ export const termsOperation: OperationDefinition<TermsIndexPatternColumn, 'field
     }
     return currentColumn;
   },
-  paramEditor: function ParamEditor({ state, setState, currentColumn, layerId }) {
-    const indexPattern = currentColumn && state.indexPatterns[state.layers[layerId].indexPatternId];
+  paramEditor: function ParamEditor({ layer, updateLayer, currentColumn, columnId, indexPattern }) {
     const hasRestrictions = indexPattern.hasRestrictions;
 
     const [popoverOpen, setPopoverOpen] = useState(false);
@@ -194,11 +193,11 @@ export const termsOperation: OperationDefinition<TermsIndexPatternColumn, 'field
       };
     }
 
-    const orderOptions = Object.entries(state.layers[layerId].columns)
-      .filter(([_columnId, column]) => isSortableByColumn(column))
-      .map(([columnId, column]) => {
+    const orderOptions = Object.entries(layer.columns)
+      .filter(([sortId, column]) => isSortableByColumn(column))
+      .map(([sortId, column]) => {
         return {
-          value: toValue({ type: 'column', columnId }),
+          value: toValue({ type: 'column', columnId: sortId }),
           text: column.label,
         };
       });
@@ -220,11 +219,10 @@ export const termsOperation: OperationDefinition<TermsIndexPatternColumn, 'field
           <ValuesRangeInput
             value={currentColumn.params.size}
             onChange={(value) => {
-              setState(
+              updateLayer(
                 updateColumnParam({
-                  state,
-                  layerId,
-                  currentColumn,
+                  layer,
+                  columnId,
                   paramName: 'size',
                   value,
                 })
@@ -263,11 +261,10 @@ export const termsOperation: OperationDefinition<TermsIndexPatternColumn, 'field
                 data-test-subj="indexPattern-terms-other-bucket"
                 checked={Boolean(currentColumn.params.otherBucket)}
                 onChange={(e: EuiSwitchEvent) =>
-                  setState(
+                  updateLayer(
                     updateColumnParam({
-                      state,
-                      layerId,
-                      currentColumn,
+                      layer,
+                      columnId,
                       paramName: 'otherBucket',
                       value: e.target.checked,
                     })
@@ -284,11 +281,10 @@ export const termsOperation: OperationDefinition<TermsIndexPatternColumn, 'field
                 data-test-subj="indexPattern-terms-missing-bucket"
                 checked={Boolean(currentColumn.params.missingBucket)}
                 onChange={(e: EuiSwitchEvent) =>
-                  setState(
+                  updateLayer(
                     updateColumnParam({
-                      state,
-                      layerId,
-                      currentColumn,
+                      layer,
+                      columnId,
                       paramName: 'missingBucket',
                       value: e.target.checked,
                     })
@@ -312,11 +308,10 @@ export const termsOperation: OperationDefinition<TermsIndexPatternColumn, 'field
             options={orderOptions}
             value={toValue(currentColumn.params.orderBy)}
             onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-              setState(
+              updateLayer(
                 updateColumnParam({
-                  state,
-                  layerId,
-                  currentColumn,
+                  layer,
+                  columnId,
                   paramName: 'orderBy',
                   value: fromValue(e.target.value),
                 })
@@ -353,11 +348,10 @@ export const termsOperation: OperationDefinition<TermsIndexPatternColumn, 'field
             ]}
             value={currentColumn.params.orderDirection}
             onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-              setState(
+              updateLayer(
                 updateColumnParam({
-                  state,
-                  layerId,
-                  currentColumn,
+                  layer,
+                  columnId,
                   paramName: 'orderDirection',
                   value: e.target.value as 'asc' | 'desc',
                 })
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/terms.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/terms.test.tsx
index fc8f8534bcfb26..eb78bb3ffebff8 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/terms.test.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/terms.test.tsx
@@ -8,14 +8,14 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { shallow, mount } from 'enzyme';
 import { EuiRange, EuiSelect, EuiSwitch, EuiSwitchEvent } from '@elastic/eui';
-import { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public';
-import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
+import type { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public';
+import type { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import { dataPluginMock } from '../../../../../../../../src/plugins/data/public/mocks';
 import { createMockedIndexPattern } from '../../../mocks';
 import { ValuesRangeInput } from './values_range_input';
-import { TermsIndexPatternColumn } from '.';
+import type { TermsIndexPatternColumn } from '.';
 import { termsOperation } from '../index';
-import { IndexPatternPrivateState, IndexPattern, IndexPatternLayer } from '../../../types';
+import { IndexPattern, IndexPatternLayer } from '../../../types';
 
 const defaultProps = {
   storage: {} as IStorageWrapper,
@@ -24,48 +24,36 @@ const defaultProps = {
   dateRange: { fromDate: 'now-1d', toDate: 'now' },
   data: dataPluginMock.createStartContract(),
   http: {} as HttpSetup,
+  indexPattern: createMockedIndexPattern(),
 };
 
 describe('terms', () => {
-  let state: IndexPatternPrivateState;
+  let layer: IndexPatternLayer;
   const InlineOptions = termsOperation.paramEditor!;
 
   beforeEach(() => {
-    state = {
-      indexPatternRefs: [],
-      indexPatterns: {
-        '1': {
-          hasRestrictions: false,
-        } as IndexPattern,
-      },
-      existingFields: {},
-      currentIndexPatternId: '1',
-      isFirstExistenceFetch: false,
-      layers: {
-        first: {
-          indexPatternId: '1',
-          columnOrder: ['col1', 'col2'],
-          columns: {
-            col1: {
-              label: 'Top value of category',
-              dataType: 'string',
-              isBucketed: true,
-              operationType: 'terms',
-              params: {
-                orderBy: { type: 'alphabetical' },
-                size: 3,
-                orderDirection: 'asc',
-              },
-              sourceField: 'category',
-            },
-            col2: {
-              label: 'Count',
-              dataType: 'number',
-              isBucketed: false,
-              sourceField: 'Records',
-              operationType: 'count',
-            },
+    layer = {
+      indexPatternId: '1',
+      columnOrder: ['col1', 'col2'],
+      columns: {
+        col1: {
+          label: 'Top value of category',
+          dataType: 'string',
+          isBucketed: true,
+          operationType: 'terms',
+          params: {
+            orderBy: { type: 'alphabetical' },
+            size: 3,
+            orderDirection: 'asc',
           },
+          sourceField: 'category',
+        },
+        col2: {
+          label: 'Count',
+          dataType: 'number',
+          isBucketed: false,
+          sourceField: 'Records',
+          operationType: 'count',
         },
       },
     };
@@ -73,7 +61,7 @@ describe('terms', () => {
 
   describe('toEsAggsFn', () => {
     it('should reflect params correctly', () => {
-      const termsColumn = state.layers.first.columns.col1 as TermsIndexPatternColumn;
+      const termsColumn = layer.columns.col1 as TermsIndexPatternColumn;
       const esAggsFn = termsOperation.toEsAggsFn(
         { ...termsColumn, params: { ...termsColumn.params, otherBucket: true } },
         'col1',
@@ -92,7 +80,7 @@ describe('terms', () => {
     });
 
     it('should not enable missing bucket if other bucket is not set', () => {
-      const termsColumn = state.layers.first.columns.col1 as TermsIndexPatternColumn;
+      const termsColumn = layer.columns.col1 as TermsIndexPatternColumn;
       const esAggsFn = termsOperation.toEsAggsFn(
         {
           ...termsColumn,
@@ -370,7 +358,7 @@ describe('terms', () => {
     it('should use the default size when there is an existing bucket', () => {
       const termsColumn = termsOperation.buildColumn({
         indexPattern: createMockedIndexPattern(),
-        layer: state.layers.first,
+        layer,
         field: {
           aggregatable: true,
           searchable: true,
@@ -526,15 +514,14 @@ describe('terms', () => {
 
   describe('param editor', () => {
     it('should render current other bucket value', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
       const instance = shallow(
         <InlineOptions
           {...defaultProps}
-          state={state}
-          setState={setStateSpy}
+          layer={layer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
-          layerId="first"
+          currentColumn={layer.columns.col1 as TermsIndexPatternColumn}
         />
       );
 
@@ -546,15 +533,18 @@ describe('terms', () => {
     });
 
     it('should hide other bucket setting for rollups', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
       const instance = shallow(
         <InlineOptions
           {...defaultProps}
-          state={{ ...state, indexPatterns: { '1': { hasRestrictions: true } as IndexPattern } }}
-          setState={setStateSpy}
+          layer={layer}
+          indexPattern={{
+            ...createMockedIndexPattern(),
+            hasRestrictions: true,
+          }}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
-          layerId="first"
+          currentColumn={layer.columns.col1 as TermsIndexPatternColumn}
         />
       );
 
@@ -562,15 +552,14 @@ describe('terms', () => {
     });
 
     it('should disable missing bucket setting as long as other bucket is not set', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
       const instance = shallow(
         <InlineOptions
           {...defaultProps}
-          state={state}
-          setState={setStateSpy}
+          layer={layer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
-          layerId="first"
+          currentColumn={layer.columns.col1 as TermsIndexPatternColumn}
         />
       );
 
@@ -582,23 +571,22 @@ describe('terms', () => {
     });
 
     it('should enable missing bucket setting as long as other bucket is set', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
       const instance = shallow(
         <InlineOptions
           {...defaultProps}
-          state={state}
-          setState={setStateSpy}
+          layer={layer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
           currentColumn={
             {
-              ...state.layers.first.columns.col1,
+              ...layer.columns.col1,
               params: {
-                ...state.layers.first.columns.col1.params,
+                ...layer.columns.col1.params,
                 otherBucket: true,
               },
             } as TermsIndexPatternColumn
           }
-          layerId="first"
         />
       );
 
@@ -610,15 +598,14 @@ describe('terms', () => {
     });
 
     it('should update state when clicking other bucket toggle', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
       const instance = shallow(
         <InlineOptions
           {...defaultProps}
-          state={state}
-          setState={setStateSpy}
+          layer={layer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
-          layerId="first"
+          currentColumn={layer.columns.col1 as TermsIndexPatternColumn}
         />
       );
 
@@ -631,20 +618,15 @@ describe('terms', () => {
         },
       } as EuiSwitchEvent);
 
-      expect(setStateSpy).toHaveBeenCalledWith({
-        ...state,
-        layers: {
-          first: {
-            ...state.layers.first,
-            columns: {
-              ...state.layers.first.columns,
-              col1: {
-                ...state.layers.first.columns.col1,
-                params: {
-                  ...(state.layers.first.columns.col1 as TermsIndexPatternColumn).params,
-                  otherBucket: true,
-                },
-              },
+      expect(updateLayerSpy).toHaveBeenCalledWith({
+        ...layer,
+        columns: {
+          ...layer.columns,
+          col1: {
+            ...layer.columns.col1,
+            params: {
+              ...(layer.columns.col1 as TermsIndexPatternColumn).params,
+              otherBucket: true,
             },
           },
         },
@@ -652,15 +634,14 @@ describe('terms', () => {
     });
 
     it('should render current order by value and options', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
       const instance = shallow(
         <InlineOptions
           {...defaultProps}
-          state={state}
-          setState={setStateSpy}
+          layer={layer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
-          layerId="first"
+          currentColumn={layer.columns.col1 as TermsIndexPatternColumn}
         />
       );
 
@@ -675,15 +656,14 @@ describe('terms', () => {
     });
 
     it('should update state with the order by value', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
       const instance = shallow(
         <InlineOptions
           {...defaultProps}
-          state={state}
-          setState={setStateSpy}
+          layer={layer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
-          layerId="first"
+          currentColumn={layer.columns.col1 as TermsIndexPatternColumn}
         />
       );
 
@@ -696,22 +676,17 @@ describe('terms', () => {
         },
       } as React.ChangeEvent<HTMLSelectElement>);
 
-      expect(setStateSpy).toHaveBeenCalledWith({
-        ...state,
-        layers: {
-          first: {
-            ...state.layers.first,
-            columns: {
-              ...state.layers.first.columns,
-              col1: {
-                ...state.layers.first.columns.col1,
-                params: {
-                  ...(state.layers.first.columns.col1 as TermsIndexPatternColumn).params,
-                  orderBy: {
-                    type: 'column',
-                    columnId: 'col2',
-                  },
-                },
+      expect(updateLayerSpy).toHaveBeenCalledWith({
+        ...layer,
+        columns: {
+          ...layer.columns,
+          col1: {
+            ...layer.columns.col1,
+            params: {
+              ...(layer.columns.col1 as TermsIndexPatternColumn).params,
+              orderBy: {
+                type: 'column',
+                columnId: 'col2',
               },
             },
           },
@@ -720,15 +695,14 @@ describe('terms', () => {
     });
 
     it('should render current order direction value and options', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
       const instance = shallow(
         <InlineOptions
           {...defaultProps}
-          state={state}
-          setState={setStateSpy}
+          layer={layer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          layerId="first"
-          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
+          currentColumn={layer.columns.col1 as TermsIndexPatternColumn}
         />
       );
 
@@ -741,15 +715,14 @@ describe('terms', () => {
     });
 
     it('should update state with the order direction value', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
       const instance = shallow(
         <InlineOptions
           {...defaultProps}
-          state={state}
-          setState={setStateSpy}
+          layer={layer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          layerId="first"
-          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
+          currentColumn={layer.columns.col1 as TermsIndexPatternColumn}
         />
       );
 
@@ -762,20 +735,15 @@ describe('terms', () => {
         },
       } as React.ChangeEvent<HTMLSelectElement>);
 
-      expect(setStateSpy).toHaveBeenCalledWith({
-        ...state,
-        layers: {
-          first: {
-            ...state.layers.first,
-            columns: {
-              ...state.layers.first.columns,
-              col1: {
-                ...state.layers.first.columns.col1,
-                params: {
-                  ...(state.layers.first.columns.col1 as TermsIndexPatternColumn).params,
-                  orderDirection: 'desc',
-                },
-              },
+      expect(updateLayerSpy).toHaveBeenCalledWith({
+        ...layer,
+        columns: {
+          ...layer.columns,
+          col1: {
+            ...layer.columns.col1,
+            params: {
+              ...(layer.columns.col1 as TermsIndexPatternColumn).params,
+              orderDirection: 'desc',
             },
           },
         },
@@ -783,15 +751,14 @@ describe('terms', () => {
     });
 
     it('should render current size value', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
       const instance = mount(
         <InlineOptions
           {...defaultProps}
-          state={state}
-          setState={setStateSpy}
+          layer={layer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          layerId="first"
-          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
+          currentColumn={layer.columns.col1 as TermsIndexPatternColumn}
         />
       );
 
@@ -799,15 +766,14 @@ describe('terms', () => {
     });
 
     it('should update state with the size value', () => {
-      const setStateSpy = jest.fn();
+      const updateLayerSpy = jest.fn();
       const instance = mount(
         <InlineOptions
           {...defaultProps}
-          state={state}
-          setState={setStateSpy}
+          layer={layer}
+          updateLayer={updateLayerSpy}
           columnId="col1"
-          layerId="first"
-          currentColumn={state.layers.first.columns.col1 as TermsIndexPatternColumn}
+          currentColumn={layer.columns.col1 as TermsIndexPatternColumn}
         />
       );
 
@@ -815,20 +781,15 @@ describe('terms', () => {
         instance.find(ValuesRangeInput).prop('onChange')!(7);
       });
 
-      expect(setStateSpy).toHaveBeenCalledWith({
-        ...state,
-        layers: {
-          first: {
-            ...state.layers.first,
-            columns: {
-              ...state.layers.first.columns,
-              col1: {
-                ...state.layers.first.columns.col1,
-                params: {
-                  ...(state.layers.first.columns.col1 as TermsIndexPatternColumn).params,
-                  size: 7,
-                },
-              },
+      expect(updateLayerSpy).toHaveBeenCalledWith({
+        ...layer,
+        columns: {
+          ...layer.columns,
+          col1: {
+            ...layer.columns.col1,
+            params: {
+              ...(layer.columns.col1 as TermsIndexPatternColumn).params,
+              size: 7,
             },
           },
         },
@@ -837,7 +798,6 @@ describe('terms', () => {
   });
   describe('getErrorMessage', () => {
     let indexPattern: IndexPattern;
-    let layer: IndexPatternLayer;
     beforeEach(() => {
       indexPattern = createMockedIndexPattern();
       layer = {
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/layer_helpers.test.ts b/x-pack/plugins/lens/public/indexpattern_datasource/operations/layer_helpers.test.ts
index 93447053a6029c..bb09474798fd4d 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/layer_helpers.test.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/layer_helpers.test.ts
@@ -18,7 +18,7 @@ import { operationDefinitionMap, OperationType } from '../operations';
 import { TermsIndexPatternColumn } from './definitions/terms';
 import { DateHistogramIndexPatternColumn } from './definitions/date_histogram';
 import { AvgIndexPatternColumn } from './definitions/metrics';
-import type { IndexPattern, IndexPatternPrivateState, IndexPatternLayer } from '../types';
+import type { IndexPattern, IndexPatternLayer } from '../types';
 import { documentField } from '../document_field';
 import { getFieldByNameFactory } from '../pure_helpers';
 import { generateId } from '../../id_generator';
@@ -1266,31 +1266,19 @@ describe('state_helpers', () => {
         sourceField: 'timestamp',
       };
 
-      const state: IndexPatternPrivateState = {
-        indexPatternRefs: [],
-        existingFields: {},
-        indexPatterns: {},
-        currentIndexPatternId: '1',
-        isFirstExistenceFetch: false,
-        layers: {
-          first: {
+      expect(
+        updateColumnParam({
+          layer: {
             indexPatternId: '1',
             columnOrder: ['col1'],
             columns: {
               col1: currentColumn,
             },
           },
-        },
-      };
-
-      expect(
-        updateColumnParam({
-          state,
-          layerId: 'first',
-          currentColumn,
+          columnId: 'col1',
           paramName: 'interval',
           value: 'M',
-        }).layers.first.columns.col1
+        }).columns.col1
       ).toEqual({
         ...currentColumn,
         params: { interval: 'M' },
@@ -1307,31 +1295,19 @@ describe('state_helpers', () => {
         sourceField: 'bytes',
       };
 
-      const state: IndexPatternPrivateState = {
-        indexPatternRefs: [],
-        existingFields: {},
-        indexPatterns: {},
-        currentIndexPatternId: '1',
-        isFirstExistenceFetch: false,
-        layers: {
-          first: {
+      expect(
+        updateColumnParam({
+          layer: {
             indexPatternId: '1',
             columnOrder: ['col1'],
             columns: {
               col1: currentColumn,
             },
           },
-        },
-      };
-
-      expect(
-        updateColumnParam({
-          state,
-          layerId: 'first',
-          currentColumn,
+          columnId: 'col1',
           paramName: 'format',
           value: { id: 'bytes' },
-        }).layers.first.columns.col1
+        }).columns.col1
       ).toEqual({
         ...currentColumn,
         params: { format: { id: 'bytes' } },
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/layer_helpers.ts b/x-pack/plugins/lens/public/indexpattern_datasource/operations/layer_helpers.ts
index b16418d44ba330..1619ad907fffca 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/layer_helpers.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/layer_helpers.ts
@@ -13,14 +13,8 @@ import {
   IndexPatternColumn,
   RequiredReference,
 } from './definitions';
-import type {
-  IndexPattern,
-  IndexPatternField,
-  IndexPatternLayer,
-  IndexPatternPrivateState,
-} from '../types';
+import type { IndexPattern, IndexPatternField, IndexPatternLayer } from '../types';
 import { getSortScoreByPriority } from './operations';
-import { mergeLayer } from '../state_helpers';
 import { generateId } from '../../id_generator';
 import { ReferenceBasedIndexPatternColumn } from './definitions/column_types';
 
@@ -390,40 +384,29 @@ export function getMetricOperationTypes(field: IndexPatternField) {
 }
 
 export function updateColumnParam<C extends IndexPatternColumn>({
-  state,
-  layerId,
-  currentColumn,
+  layer,
+  columnId,
   paramName,
   value,
 }: {
-  state: IndexPatternPrivateState;
-  layerId: string;
-  currentColumn: C;
+  layer: IndexPatternLayer;
+  columnId: string;
   paramName: string;
   value: unknown;
-}): IndexPatternPrivateState {
-  const columnId = Object.entries(state.layers[layerId].columns).find(
-    ([_columnId, column]) => column === currentColumn
-  )![0];
-
-  const layer = state.layers[layerId];
-
-  return mergeLayer({
-    state,
-    layerId,
-    newLayer: {
-      columns: {
-        ...layer.columns,
-        [columnId]: {
-          ...currentColumn,
-          params: {
-            ...currentColumn.params,
-            [paramName]: value,
-          },
+}): IndexPatternLayer {
+  return {
+    ...layer,
+    columns: {
+      ...layer.columns,
+      [columnId]: {
+        ...layer.columns[columnId],
+        params: {
+          ...layer.columns[columnId].params,
+          [paramName]: value,
         },
       },
-    },
-  });
+    } as Record<string, IndexPatternColumn>,
+  };
 }
 
 function adjustColumnReferencesForChangedColumn(

From 5bcef6f82e9852a0ff73286381c11d520479ae49 Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Mon, 21 Dec 2020 16:31:56 +0000
Subject: [PATCH 63/75] [ML] Fix displaying of setup errors in recognizer
 wizard (#86430)

* [ML] Fix displaying of setup errors in recognizer wizard

* add saved object error

* sharing error message extractor

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 x-pack/plugins/ml/common/index.ts                  |  1 +
 x-pack/plugins/ml/common/types/modules.ts          | 14 +++-----------
 .../jobs/new_job/recognize/components/job_item.tsx |  5 +++--
 .../recognize/components/kibana_objects.tsx        |  3 ++-
 .../plugins/uptime/public/state/api/ml_anomaly.ts  |  3 ++-
 5 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/x-pack/plugins/ml/common/index.ts b/x-pack/plugins/ml/common/index.ts
index d527a9a9780ad0..85770c856ca842 100644
--- a/x-pack/plugins/ml/common/index.ts
+++ b/x-pack/plugins/ml/common/index.ts
@@ -8,3 +8,4 @@ export { SearchResponse7 } from './types/es_client';
 export { ANOMALY_SEVERITY, ANOMALY_THRESHOLD, SEVERITY_COLORS } from './constants/anomalies';
 export { getSeverityColor, getSeverityType } from './util/anomaly_utils';
 export { composeValidators, patternValidator } from './util/validators';
+export { extractErrorMessage } from './util/errors';
diff --git a/x-pack/plugins/ml/common/types/modules.ts b/x-pack/plugins/ml/common/types/modules.ts
index 38f0c8cb9c1176..3c5d784d4a9e3c 100644
--- a/x-pack/plugins/ml/common/types/modules.ts
+++ b/x-pack/plugins/ml/common/types/modules.ts
@@ -5,6 +5,7 @@
  */
 import { SavedObjectAttributes } from 'kibana/public';
 import { Datafeed, Job } from './anomaly_detection_jobs';
+import { ErrorType } from '../util/errors';
 
 export interface ModuleJob {
   id: string;
@@ -63,22 +64,13 @@ export interface KibanaObjectResponse extends ResultItem {
   error?: any;
 }
 
-export interface SetupError {
-  body: string;
-  msg: string;
-  path: string;
-  query: {};
-  response: string;
-  statusCode: number;
-}
-
 export interface DatafeedResponse extends ResultItem {
   started: boolean;
-  error?: SetupError;
+  error?: ErrorType;
 }
 
 export interface JobResponse extends ResultItem {
-  error?: SetupError;
+  error?: ErrorType;
 }
 
 export interface DataRecognizerConfigResponse {
diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/job_item.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/job_item.tsx
index 8dab25bf492f42..7e972b010cdd7a 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/job_item.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/job_item.tsx
@@ -21,6 +21,7 @@ import { ModuleJobUI } from '../page';
 import { SETUP_RESULTS_WIDTH } from './module_jobs';
 import { tabColor } from '../../../../../../common/util/group_color_utils';
 import { JobOverride } from '../../../../../../common/types/modules';
+import { extractErrorMessage } from '../../../../../../common/util/errors';
 
 interface JobItemProps {
   job: ModuleJobUI;
@@ -94,13 +95,13 @@ export const JobItem: FC<JobItemProps> = memo(
 
           {setupResult && setupResult.error && (
             <EuiText size="xs" color="danger">
-              {setupResult.error.msg}
+              {extractErrorMessage(setupResult.error)}
             </EuiText>
           )}
 
           {datafeedResult && datafeedResult.error && (
             <EuiText size="xs" color="danger">
-              {datafeedResult.error.msg}
+              {extractErrorMessage(datafeedResult.error)}
             </EuiText>
           )}
         </EuiFlexItem>
diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/kibana_objects.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/kibana_objects.tsx
index f8ca7926ad7d66..18647e20937577 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/kibana_objects.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/kibana_objects.tsx
@@ -18,6 +18,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { KibanaObjectUi } from '../page';
+import { extractErrorMessage } from '../../../../../../common/util/errors';
 
 export interface KibanaObjectItemProps {
   objectType: string;
@@ -57,7 +58,7 @@ export const KibanaObjects: FC<KibanaObjectItemProps> = memo(
                       </EuiText>
                       {success === false && error !== undefined && (
                         <EuiText size="xs" color="danger">
-                          {error.message}
+                          {extractErrorMessage(error)}
                         </EuiText>
                       )}
                     </EuiFlexItem>
diff --git a/x-pack/plugins/uptime/public/state/api/ml_anomaly.ts b/x-pack/plugins/uptime/public/state/api/ml_anomaly.ts
index fa3d7ed834a9c1..5c0eb0bff07ebc 100644
--- a/x-pack/plugins/uptime/public/state/api/ml_anomaly.ts
+++ b/x-pack/plugins/uptime/public/state/api/ml_anomaly.ts
@@ -13,6 +13,7 @@ import {
   JobExistResult,
   MlCapabilitiesResponse,
 } from '../../../../../plugins/ml/public';
+import { extractErrorMessage } from '../../../../../plugins/ml/common';
 import {
   CreateMLJobSuccess,
   DeleteJobResults,
@@ -62,7 +63,7 @@ export const createMLJob = async ({
       };
     } else {
       const { error } = jobResponse;
-      throw new Error(error?.msg);
+      throw new Error(extractErrorMessage(error));
     }
   } else {
     return null;

From 8ecd726b5c3dc1c4b2283f0d4f8db5695f8b3cc2 Mon Sep 17 00:00:00 2001
From: Marco Liberati <dej611@users.noreply.github.com>
Date: Mon, 21 Dec 2020 17:32:19 +0100
Subject: [PATCH 64/75] [Lens] Fix esaggs missing default time field scenario
 in Lens (#85754)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 src/plugins/data/common/index_patterns/index_pattern.stub.ts  | 1 +
 src/plugins/data/common/search/aggs/buckets/date_histogram.ts | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/plugins/data/common/index_patterns/index_pattern.stub.ts b/src/plugins/data/common/index_patterns/index_pattern.stub.ts
index e7384e09494aa1..c47a8b605ada34 100644
--- a/src/plugins/data/common/index_patterns/index_pattern.stub.ts
+++ b/src/plugins/data/common/index_patterns/index_pattern.stub.ts
@@ -25,6 +25,7 @@ export const stubIndexPattern: IIndexPattern = {
   fields: stubFields,
   title: 'logstash-*',
   timeFieldName: '@timestamp',
+  getTimeField: () => ({ name: '@timestamp', type: 'date' }),
 };
 
 export const stubIndexPatternWithFields: IIndexPattern = {
diff --git a/src/plugins/data/common/search/aggs/buckets/date_histogram.ts b/src/plugins/data/common/search/aggs/buckets/date_histogram.ts
index ba79a4264d6039..6b7f1522d19ad4 100644
--- a/src/plugins/data/common/search/aggs/buckets/date_histogram.ts
+++ b/src/plugins/data/common/search/aggs/buckets/date_histogram.ts
@@ -149,7 +149,7 @@ export const getDateHistogramBucketAgg = ({
         type: 'field',
         filterFieldTypes: KBN_FIELD_TYPES.DATE,
         default(agg: IBucketDateHistogramAggConfig) {
-          return agg.getIndexPattern().timeFieldName;
+          return agg.getIndexPattern().getTimeField?.()?.name;
         },
         onChange(agg: IBucketDateHistogramAggConfig) {
           if (isAutoInterval(get(agg, 'params.interval')) && !agg.fieldIsTimeField()) {

From 805fc4b95cd08b66eb247aa185709eef4fa88718 Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Mon, 21 Dec 2020 11:50:28 -0500
Subject: [PATCH 65/75] Fix more sorts by adding unmapped_type (#85837)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../server/kibana_monitoring/collectors/lib/fetch_es_usage.ts   | 1 +
 .../kibana_monitoring/collectors/lib/fetch_license_type.ts      | 1 +
 .../monitoring/server/lib/alerts/fetch_legacy_alerts.test.ts    | 2 +-
 .../plugins/monitoring/server/lib/alerts/fetch_legacy_alerts.ts | 1 +
 .../server/lib/alerts/fetch_missing_monitoring_data.ts          | 1 +
 x-pack/plugins/monitoring/server/lib/beats/get_beats.ts         | 2 +-
 6 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/monitoring/server/kibana_monitoring/collectors/lib/fetch_es_usage.ts b/x-pack/plugins/monitoring/server/kibana_monitoring/collectors/lib/fetch_es_usage.ts
index de0a1b8f99d968..9f054f4f95adfe 100644
--- a/x-pack/plugins/monitoring/server/kibana_monitoring/collectors/lib/fetch_es_usage.ts
+++ b/x-pack/plugins/monitoring/server/kibana_monitoring/collectors/lib/fetch_es_usage.ts
@@ -58,6 +58,7 @@ export async function fetchESUsage(
         {
           timestamp: {
             order: 'desc',
+            unmapped_type: 'long',
           },
         },
       ],
diff --git a/x-pack/plugins/monitoring/server/kibana_monitoring/collectors/lib/fetch_license_type.ts b/x-pack/plugins/monitoring/server/kibana_monitoring/collectors/lib/fetch_license_type.ts
index f7b8b72637b1ff..4e132eac1fba47 100644
--- a/x-pack/plugins/monitoring/server/kibana_monitoring/collectors/lib/fetch_license_type.ts
+++ b/x-pack/plugins/monitoring/server/kibana_monitoring/collectors/lib/fetch_license_type.ts
@@ -27,6 +27,7 @@ export async function fetchLicenseType(
         {
           timestamp: {
             order: 'desc',
+            unmapped_type: 'long',
           },
         },
       ],
diff --git a/x-pack/plugins/monitoring/server/lib/alerts/fetch_legacy_alerts.test.ts b/x-pack/plugins/monitoring/server/lib/alerts/fetch_legacy_alerts.test.ts
index 50550170518164..a5331beeae067a 100644
--- a/x-pack/plugins/monitoring/server/lib/alerts/fetch_legacy_alerts.test.ts
+++ b/x-pack/plugins/monitoring/server/lib/alerts/fetch_legacy_alerts.test.ts
@@ -70,7 +70,7 @@ describe('fetchLegacyAlerts', () => {
       ],
       body: {
         size,
-        sort: [{ timestamp: { order: 'desc' } }],
+        sort: [{ timestamp: { order: 'desc', unmapped_type: 'long' } }],
         query: {
           bool: {
             minimum_should_match: 1,
diff --git a/x-pack/plugins/monitoring/server/lib/alerts/fetch_legacy_alerts.ts b/x-pack/plugins/monitoring/server/lib/alerts/fetch_legacy_alerts.ts
index 0ea37b4ac4daa5..c6416a992276ee 100644
--- a/x-pack/plugins/monitoring/server/lib/alerts/fetch_legacy_alerts.ts
+++ b/x-pack/plugins/monitoring/server/lib/alerts/fetch_legacy_alerts.ts
@@ -28,6 +28,7 @@ export async function fetchLegacyAlerts(
         {
           timestamp: {
             order: 'desc',
+            unmapped_type: 'long',
           },
         },
       ],
diff --git a/x-pack/plugins/monitoring/server/lib/alerts/fetch_missing_monitoring_data.ts b/x-pack/plugins/monitoring/server/lib/alerts/fetch_missing_monitoring_data.ts
index 30706a0b3c922c..1bfe3a367fc951 100644
--- a/x-pack/plugins/monitoring/server/lib/alerts/fetch_missing_monitoring_data.ts
+++ b/x-pack/plugins/monitoring/server/lib/alerts/fetch_missing_monitoring_data.ts
@@ -97,6 +97,7 @@ export async function fetchMissingMonitoringData(
                       {
                         timestamp: {
                           order: 'desc',
+                          unmapped_type: 'long',
                         },
                       },
                     ],
diff --git a/x-pack/plugins/monitoring/server/lib/beats/get_beats.ts b/x-pack/plugins/monitoring/server/lib/beats/get_beats.ts
index beda4334b49374..aa5ef81a8de339 100644
--- a/x-pack/plugins/monitoring/server/lib/beats/get_beats.ts
+++ b/x-pack/plugins/monitoring/server/lib/beats/get_beats.ts
@@ -151,7 +151,7 @@ export async function getBeats(req: LegacyRequest, beatsIndexPattern: string, cl
         inner_hits: {
           name: 'earliest',
           size: 1,
-          sort: [{ 'beats_stats.timestamp': 'asc' }],
+          sort: [{ 'beats_stats.timestamp': { order: 'asc', unmapped_type: 'long' } }],
         },
       },
       sort: [

From f349d0a398eb7944957b3fa45647be0b1fd62cb6 Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Mon, 21 Dec 2020 16:56:35 +0000
Subject: [PATCH 66/75] [ML] Fix cloning of partition field in per-partition
 categorization jobs (#86635)

* [ML] Fix cloning of partition field in per-partition categorization jobs

* fixing cloned bucket span
---
 .../job_creator/categorization_job_creator.ts | 59 ++++++++++++-------
 .../new_job/common/job_creator/job_creator.ts |  2 +-
 2 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/common/job_creator/categorization_job_creator.ts b/x-pack/plugins/ml/public/application/jobs/new_job/common/job_creator/categorization_job_creator.ts
index a0f2832dc9f97a..aaf20ff1571eea 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/common/job_creator/categorization_job_creator.ts
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/common/job_creator/categorization_job_creator.ts
@@ -160,26 +160,6 @@ export class CategorizationJobCreator extends JobCreator {
     return this._categorizationAnalyzer;
   }
 
-  public cloneFromExistingJob(job: Job, datafeed: Datafeed) {
-    this._overrideConfigs(job, datafeed);
-    this.createdBy = CREATED_BY_LABEL.CATEGORIZATION;
-    const detectors = getRichDetectors(job, datafeed, this.additionalFields, false);
-
-    const dtr = detectors[0];
-    if (detectors.length && dtr.agg !== null && dtr.field !== null) {
-      this._detectorType =
-        dtr.agg.id === ML_JOB_AGGREGATION.COUNT
-          ? ML_JOB_AGGREGATION.COUNT
-          : ML_JOB_AGGREGATION.RARE;
-
-      const bs = job.analysis_config.bucket_span;
-      this.setDetectorType(this._detectorType);
-      // set the bucketspan back to the original value
-      // as setDetectorType applies a default
-      this.bucketSpan = bs;
-    }
-  }
-
   public get categorizationPerPartitionField() {
     return this._partitionFieldName;
   }
@@ -204,4 +184,43 @@ export class CategorizationJobCreator extends JobCreator {
       }
     }
   }
+
+  // override the setter and getter for the per-partition toggle
+  // so we can remove the partition field in the wizard when
+  // per-partition categorization is disabled.
+  public get perPartitionCategorization() {
+    return this._job_config.analysis_config.per_partition_categorization?.enabled === true;
+  }
+
+  public set perPartitionCategorization(enabled: boolean) {
+    this._initPerPartitionCategorization();
+    this._job_config.analysis_config.per_partition_categorization!.enabled = enabled;
+    if (enabled === false) {
+      this.categorizationPerPartitionField = null;
+    }
+  }
+
+  public cloneFromExistingJob(job: Job, datafeed: Datafeed) {
+    this._overrideConfigs(job, datafeed);
+    this.createdBy = CREATED_BY_LABEL.CATEGORIZATION;
+    const detectors = getRichDetectors(job, datafeed, this.additionalFields, false);
+
+    const dtr = detectors[0];
+    if (dtr !== undefined && dtr.agg !== null && dtr.field !== null) {
+      const detectorType =
+        dtr.agg.id === ML_JOB_AGGREGATION.COUNT
+          ? ML_JOB_AGGREGATION.COUNT
+          : ML_JOB_AGGREGATION.RARE;
+
+      const bs = job.analysis_config.bucket_span;
+      this.setDetectorType(detectorType);
+      if (dtr.partitionField !== null) {
+        this.categorizationPerPartitionField = dtr.partitionField.id;
+      }
+
+      // set the bucketspan back to the original value
+      // as setDetectorType applies a default
+      this.bucketSpan = bs;
+    }
+  }
 }
diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/common/job_creator/job_creator.ts b/x-pack/plugins/ml/public/application/jobs/new_job/common/job_creator/job_creator.ts
index ba03e86724a150..c3b4471269bb86 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/common/job_creator/job_creator.ts
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/common/job_creator/job_creator.ts
@@ -631,7 +631,7 @@ export class JobCreator {
     return JSON.stringify(this._datafeed_config, null, 2);
   }
 
-  private _initPerPartitionCategorization() {
+  protected _initPerPartitionCategorization() {
     if (this._job_config.analysis_config.per_partition_categorization === undefined) {
       this._job_config.analysis_config.per_partition_categorization = {};
     }

From 1e9e0400a034fb003553234bb517a2385f66a10a Mon Sep 17 00:00:00 2001
From: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>
Date: Mon, 21 Dec 2020 11:59:03 -0500
Subject: [PATCH 67/75] Added docs for fleet UI extensions (#86654)

---
 .../fleet/dev_docs/fleet_ui_extensions.md     | 84 +++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 x-pack/plugins/fleet/dev_docs/fleet_ui_extensions.md

diff --git a/x-pack/plugins/fleet/dev_docs/fleet_ui_extensions.md b/x-pack/plugins/fleet/dev_docs/fleet_ui_extensions.md
new file mode 100644
index 00000000000000..a3d82356af14f8
--- /dev/null
+++ b/x-pack/plugins/fleet/dev_docs/fleet_ui_extensions.md
@@ -0,0 +1,84 @@
+# Fleet UI Extensions
+
+Fleet's Kibana UI supports two types of UI extensions:
+
+- Custom UI components
+- Navigation redirection
+
+More information about these can be found below.
+
+
+## Custom UI Components
+
+Custom UI component extension can be registered with Fleet using the Plugin's `#start()` exposed interface, which contains a method named `registerExtension()`. In order to take advantage of these extension points, a Kibana plugin must set a dependency on Fleet so that the interface can be made available.
+
+Here is an example Security Solution's Endpoint takes advantage of this functionality to register several custom UI extensions:
+
+```typescript
+export class Plugin {
+  //...
+  start(core: CoreStart, startDep: StartDependencies) {
+    const { registerExtension } = startDep.fleet;
+    
+    registerExtension({
+      package: 'endpoint',
+      view: 'package-policy-edit',
+      component: getLazyEndpointPolicyEditExtension(core, plugins),
+    });
+
+    registerExtension({
+      package: 'endpoint',
+      view: 'package-policy-create',
+      component: LazyEndpointPolicyCreateExtension,
+    });
+
+    registerExtension({
+      package: 'endpoint',
+      view: 'package-detail-custom',
+      component: getLazyEndpointPackageCustomExtension(core, plugins),
+    });
+  }
+  //...
+}
+```
+
+> The code above lives in `x-pack/plugins/security_solution/public/plugin.tsx`
+
+For a list of supported Fleet UI extensions, see the `UIExtensionPoint` and associated Union types defined here: `x-pack/plugins/fleet/public/applications/fleet/types/ui_extensions.ts`.
+
+
+
+
+## Navigation Redirection
+
+In order to support better user flows, some of Fleet's pages support changing the behaviour of the certain links and/or button clicks and to where they redirect if a user clicks on it. This type of UI extension does not need a Plugin level dependency on Fleet - it utilizes Route state via `react-router` along with Kibana's `core.application.navigateToApp()` method thus any kibana plugin can take advantage of it.
+
+Here is an example of how to create a link that redirects the user to Fleet's Agent Policy detail page with the Agent Enroll flyout opened, and once the user clicks "done", they are redirected back to the originating page:
+
+```typescript jsx
+const LinkToAgentEnroll = () => {
+  const { services } = useKibana();
+  const handleLinkClick = useCallback((ev) => {
+    ev.preventDefault();
+    
+    const fleetPolicyPageRouteState: AgentPolicyDetailsDeployAgentAction = {
+      onDoneNavigateTo: [
+        'my-app-plugin-id',
+        { path: 'the/page/I/am/currently/on' },
+      ],
+    };
+    
+    services.application.navigateTo(
+      'fleet',
+      {
+        path: '#/policies/123-some-uuid-321?openEnrollmentFlyout=true',
+        state: fleetPolicyPageRouteState
+      }
+    );
+  }, [services.application.navigateTo]);
+  
+  return <EuiLink onClick={handleLinkClick}>Enroll an agent</EuiLink>
+}
+```
+
+For a list of supported Fleet pages, see the type `AnyIntraAppRouteState` and its associated Union types in `x-pack/plugins/fleet/public/applications/fleet/types/intra_app_route_state.ts`

From 256c8cdffb17f6030b657f18189b20e857a1dcf4 Mon Sep 17 00:00:00 2001
From: Jonathan Budzenski <jon@budzenski.me>
Date: Mon, 21 Dec 2020 11:26:35 -0600
Subject: [PATCH 68/75] skip histogram brushing, #86602

---
 test/functional/apps/discover/_discover.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/functional/apps/discover/_discover.ts b/test/functional/apps/discover/_discover.ts
index e52c33078029a3..1b333c377f7774 100644
--- a/test/functional/apps/discover/_discover.ts
+++ b/test/functional/apps/discover/_discover.ts
@@ -110,7 +110,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         });
       });
 
-      it('should modify the time range when the histogram is brushed', async function () {
+      it.skip('should modify the time range when the histogram is brushed', async function () {
         await PageObjects.timePicker.setDefaultAbsoluteRange();
         await PageObjects.discover.brushHistogram();
         await PageObjects.discover.waitUntilSearchingHasFinished();

From 7de243e7fd328da7361eeb50b8cc97955babbb42 Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Mon, 21 Dec 2020 19:54:45 +0100
Subject: [PATCH 69/75] [ML] Fix time range adjustment for the swim lane
 causing the infinite loop update (#86461)

* [ML] fix swim lane time selection adjustment

* [ML] fix adjustment

* [ML] fix tooManyBuckets condition

* [ML] fix typo
---
 .../contexts/kibana/__mocks__/index.ts        |   1 +
 .../kibana/__mocks__/use_timefilter.ts        |  40 ++++++
 .../explorer_charts_container_service.js      |   5 +-
 .../explorer/hooks/use_selected_cells.test.ts | 133 ++++++++++++++++++
 .../explorer/hooks/use_selected_cells.ts      |  80 +++++------
 .../application/routing/routes/explorer.tsx   |   2 +-
 6 files changed, 219 insertions(+), 42 deletions(-)
 create mode 100644 x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/use_timefilter.ts
 create mode 100644 x-pack/plugins/ml/public/application/explorer/hooks/use_selected_cells.test.ts

diff --git a/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/index.ts b/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/index.ts
index 7051abe6dc34ec..dd405ddcc04fa1 100644
--- a/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/index.ts
+++ b/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/index.ts
@@ -5,3 +5,4 @@
  */
 
 export { useMlKibana } from './kibana_context';
+export { useTimefilter } from './use_timefilter';
diff --git a/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/use_timefilter.ts b/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/use_timefilter.ts
new file mode 100644
index 00000000000000..949de51cf2c2de
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/use_timefilter.ts
@@ -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 { TimefilterContract } from '../../../../../../../../src/plugins/data/public';
+import { Observable } from 'rxjs';
+
+/**
+ * Copy from {@link '../../../../../../../../src/plugins/data/public/query/timefilter/timefilter_service.mock'}
+ */
+const timefilterMock: jest.Mocked<TimefilterContract> = {
+  isAutoRefreshSelectorEnabled: jest.fn(),
+  isTimeRangeSelectorEnabled: jest.fn(),
+  isTimeTouched: jest.fn(),
+  getEnabledUpdated$: jest.fn(),
+  getTimeUpdate$: jest.fn(),
+  getRefreshIntervalUpdate$: jest.fn(),
+  getAutoRefreshFetch$: jest.fn(() => new Observable<unknown>()),
+  getFetch$: jest.fn(),
+  getTime: jest.fn(),
+  setTime: jest.fn(),
+  setRefreshInterval: jest.fn(),
+  getRefreshInterval: jest.fn(),
+  getActiveBounds: jest.fn(),
+  disableAutoRefreshSelector: jest.fn(),
+  disableTimeRangeSelector: jest.fn(),
+  enableAutoRefreshSelector: jest.fn(),
+  enableTimeRangeSelector: jest.fn(),
+  getBounds: jest.fn(),
+  calculateBounds: jest.fn(),
+  createFilter: jest.fn(),
+  getRefreshIntervalDefaults: jest.fn(),
+  getTimeDefaults: jest.fn(),
+};
+
+export const useTimefilter = jest.fn(() => {
+  return timefilterMock;
+});
diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js
index 0f1b9c77afced5..47087e776d6dd3 100644
--- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js
+++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js
@@ -694,7 +694,10 @@ function calculateChartRange(
     chartRange.min = chartRange.min + maxBucketSpanMs;
   }
 
-  if (chartRange.min > selectedEarliestMs || chartRange.max < selectedLatestMs) {
+  if (
+    (chartRange.min > selectedEarliestMs || chartRange.max < selectedLatestMs) &&
+    chartRange.max - chartRange.min < selectedLatestMs - selectedEarliestMs
+  ) {
     tooManyBuckets = true;
   }
 
diff --git a/x-pack/plugins/ml/public/application/explorer/hooks/use_selected_cells.test.ts b/x-pack/plugins/ml/public/application/explorer/hooks/use_selected_cells.test.ts
new file mode 100644
index 00000000000000..08c8d11987f196
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/explorer/hooks/use_selected_cells.test.ts
@@ -0,0 +1,133 @@
+/*
+ * 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 { renderHook } from '@testing-library/react-hooks';
+import { useSelectedCells } from './use_selected_cells';
+import { ExplorerAppState } from '../../../../common/types/ml_url_generator';
+import { TimefilterContract } from '../../../../../../../src/plugins/data/public';
+
+import { useTimefilter } from '../../contexts/kibana';
+
+jest.mock('../../contexts/kibana');
+
+describe('useSelectedCells', () => {
+  test('should not set state when the cell selection is correct', () => {
+    (useTimefilter() as jest.Mocked<TimefilterContract>).getBounds.mockReturnValue({
+      min: moment(1498824778 * 1000),
+      max: moment(1502366798 * 1000),
+    });
+
+    const urlState = {
+      mlExplorerSwimlane: {
+        selectedType: 'overall',
+        selectedLanes: ['Overall'],
+        selectedTimes: [1498780800, 1498867200],
+        showTopFieldValues: true,
+        viewByFieldName: 'apache2.access.remote_ip',
+        viewByFromPage: 1,
+        viewByPerPage: 10,
+      },
+      mlExplorerFilter: {},
+    } as ExplorerAppState;
+
+    const setUrlState = jest.fn();
+
+    const bucketInterval = 86400;
+
+    renderHook(() => useSelectedCells(urlState, setUrlState, bucketInterval));
+
+    expect(setUrlState).not.toHaveBeenCalled();
+  });
+
+  test('should reset cell selection when it is completely out of range', () => {
+    (useTimefilter() as jest.Mocked<TimefilterContract>).getBounds.mockReturnValue({
+      min: moment(1501071178 * 1000),
+      max: moment(1502366798 * 1000),
+    });
+
+    const urlState = {
+      mlExplorerSwimlane: {
+        selectedType: 'overall',
+        selectedLanes: ['Overall'],
+        selectedTimes: [1498780800, 1498867200],
+        showTopFieldValues: true,
+        viewByFieldName: 'apache2.access.remote_ip',
+        viewByFromPage: 1,
+        viewByPerPage: 10,
+      },
+      mlExplorerFilter: {},
+    } as ExplorerAppState;
+
+    const setUrlState = jest.fn();
+
+    const bucketInterval = 86400;
+
+    const { result } = renderHook(() => useSelectedCells(urlState, setUrlState, bucketInterval));
+
+    expect(result.current[0]).toEqual({
+      lanes: ['Overall'],
+      showTopFieldValues: true,
+      times: [1498780800, 1498867200],
+      type: 'overall',
+      viewByFieldName: 'apache2.access.remote_ip',
+    });
+
+    expect(setUrlState).toHaveBeenCalledWith({
+      mlExplorerSwimlane: {
+        viewByFieldName: 'apache2.access.remote_ip',
+        viewByFromPage: 1,
+        viewByPerPage: 10,
+      },
+    });
+  });
+
+  test('should adjust cell selection time boundaries based on the main time range', () => {
+    (useTimefilter() as jest.Mocked<TimefilterContract>).getBounds.mockReturnValue({
+      min: moment(1501071178 * 1000),
+      max: moment(1502366798 * 1000),
+    });
+
+    const urlState = {
+      mlExplorerSwimlane: {
+        selectedType: 'overall',
+        selectedLanes: ['Overall'],
+        selectedTimes: [1498780800, 1502366798],
+        showTopFieldValues: true,
+        viewByFieldName: 'apache2.access.remote_ip',
+        viewByFromPage: 1,
+        viewByPerPage: 10,
+      },
+      mlExplorerFilter: {},
+    } as ExplorerAppState;
+
+    const setUrlState = jest.fn();
+
+    const bucketInterval = 86400;
+
+    const { result } = renderHook(() => useSelectedCells(urlState, setUrlState, bucketInterval));
+
+    expect(result.current[0]).toEqual({
+      lanes: ['Overall'],
+      showTopFieldValues: true,
+      times: [1498780800, 1502366798],
+      type: 'overall',
+      viewByFieldName: 'apache2.access.remote_ip',
+    });
+
+    expect(setUrlState).toHaveBeenCalledWith({
+      mlExplorerSwimlane: {
+        selectedLanes: ['Overall'],
+        selectedTimes: [1500984778, 1502366798],
+        selectedType: 'overall',
+        showTopFieldValues: true,
+        viewByFieldName: 'apache2.access.remote_ip',
+        viewByFromPage: 1,
+        viewByPerPage: 10,
+      },
+    });
+  });
+});
diff --git a/x-pack/plugins/ml/public/application/explorer/hooks/use_selected_cells.ts b/x-pack/plugins/ml/public/application/explorer/hooks/use_selected_cells.ts
index 7a279afc22ae77..4ce828b0b76337 100644
--- a/x-pack/plugins/ml/public/application/explorer/hooks/use_selected_cells.ts
+++ b/x-pack/plugins/ml/public/application/explorer/hooks/use_selected_cells.ts
@@ -5,7 +5,6 @@
  */
 
 import { useCallback, useEffect, useMemo } from 'react';
-import { Duration } from 'moment';
 import { SWIMLANE_TYPE } from '../explorer_constants';
 import { AppStateSelectedCells } from '../explorer_utils';
 import { ExplorerAppState } from '../../../../common/types/ml_url_generator';
@@ -14,10 +13,9 @@ import { useTimefilter } from '../../contexts/kibana';
 export const useSelectedCells = (
   appState: ExplorerAppState,
   setAppState: (update: Partial<ExplorerAppState>) => void,
-  bucketInterval: Duration | undefined
+  bucketIntervalInSeconds: number | undefined
 ): [AppStateSelectedCells | undefined, (swimlaneSelectedCells: AppStateSelectedCells) => void] => {
   const timeFilter = useTimefilter();
-
   const timeBounds = timeFilter.getBounds();
 
   // keep swimlane selection, restore selectedCells from AppState
@@ -76,43 +74,45 @@ export const useSelectedCells = (
    * Adjust cell selection with respect to the time boundaries.
    * Reset it entirely when it out of range.
    */
-  useEffect(() => {
-    if (selectedCells?.times === undefined || bucketInterval === undefined) return;
-
-    let [selectedFrom, selectedTo] = selectedCells.times;
-
-    const rangeFrom = timeBounds.min!.unix();
-    /**
-     * Because each cell on the swim lane represent the fixed bucket interval,
-     * the selection range could be outside of the time boundaries with
-     * correction within the bucket interval.
-     */
-    const rangeTo = timeBounds.max!.unix() + bucketInterval.asSeconds();
-
-    selectedFrom = Math.max(selectedFrom, rangeFrom);
-
-    selectedTo = Math.min(selectedTo, rangeTo);
-
-    const isSelectionOutOfRange = rangeFrom > selectedTo || rangeTo < selectedFrom;
-
-    if (isSelectionOutOfRange) {
-      // reset selection
-      setSelectedCells();
-      return;
-    }
-
-    if (selectedFrom !== rangeFrom || selectedTo !== rangeTo) {
-      setSelectedCells({
-        ...selectedCells,
-        times: [selectedFrom, selectedTo],
-      });
-    }
-  }, [
-    timeBounds.min?.valueOf(),
-    timeBounds.max?.valueOf(),
-    selectedCells,
-    bucketInterval?.asMilliseconds(),
-  ]);
+  useEffect(
+    function adjustSwimLaneTimeSelection() {
+      if (selectedCells?.times === undefined || bucketIntervalInSeconds === undefined) return;
+
+      const [selectedFrom, selectedTo] = selectedCells.times;
+
+      /**
+       * Because each cell on the swim lane represent the fixed bucket interval,
+       * the selection range could be outside of the time boundaries with
+       * correction within the bucket interval.
+       */
+      const rangeFrom = timeBounds.min!.unix() - bucketIntervalInSeconds;
+      const rangeTo = timeBounds.max!.unix() + bucketIntervalInSeconds;
+
+      const resultFrom = Math.max(selectedFrom, rangeFrom);
+      const resultTo = Math.min(selectedTo, rangeTo);
+
+      const isSelectionOutOfRange = rangeFrom > resultTo || rangeTo < resultFrom;
+
+      if (isSelectionOutOfRange) {
+        // reset selection
+        setSelectedCells();
+        return;
+      }
+
+      if (selectedFrom === resultFrom && selectedTo === resultTo) {
+        // selection is correct, no need to adjust the range
+        return;
+      }
+
+      if (resultFrom !== rangeFrom || resultTo !== rangeTo) {
+        setSelectedCells({
+          ...selectedCells,
+          times: [resultFrom, resultTo],
+        });
+      }
+    },
+    [timeBounds.min?.unix(), timeBounds.max?.unix(), selectedCells, bucketIntervalInSeconds]
+  );
 
   return [selectedCells, setSelectedCells];
 };
diff --git a/x-pack/plugins/ml/public/application/routing/routes/explorer.tsx b/x-pack/plugins/ml/public/application/routing/routes/explorer.tsx
index 15ce3847f4d9cc..0075846571cee5 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/explorer.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/explorer.tsx
@@ -201,7 +201,7 @@ const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTim
   const [selectedCells, setSelectedCells] = useSelectedCells(
     explorerUrlState,
     setExplorerUrlState,
-    explorerState?.swimlaneBucketInterval
+    explorerState?.swimlaneBucketInterval?.asSeconds()
   );
 
   useEffect(() => {

From 61a0b008029ef63bbaf5f50a4534cf2f5f1a34fd Mon Sep 17 00:00:00 2001
From: "Christiane (Tina) Heiligers" <christiane.heiligers@elastic.co>
Date: Mon, 21 Dec 2020 12:09:23 -0700
Subject: [PATCH 70/75] Migrates kql_telemetry usage collector es client
 (#86585)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../usage_collector/fetch.test.ts             | 70 ++++++++++---------
 .../kql_telemetry/usage_collector/fetch.ts    | 28 ++++----
 2 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/src/plugins/data/server/kql_telemetry/usage_collector/fetch.test.ts b/src/plugins/data/server/kql_telemetry/usage_collector/fetch.test.ts
index 1794df7391cb00..038f340babb1fb 100644
--- a/src/plugins/data/server/kql_telemetry/usage_collector/fetch.test.ts
+++ b/src/plugins/data/server/kql_telemetry/usage_collector/fetch.test.ts
@@ -18,7 +18,7 @@
  */
 
 import { fetchProvider } from './fetch';
-import { LegacyAPICaller } from 'kibana/server';
+import { ElasticsearchClient } from 'kibana/server';
 import { CollectorFetchContext } from 'src/plugins/usage_collection/server';
 import { createCollectorFetchContextMock } from 'src/plugins/usage_collection/server/mocks';
 
@@ -30,7 +30,7 @@ jest.mock('../../../common', () => ({
 }));
 
 let fetch: ReturnType<typeof fetchProvider>;
-let callCluster: LegacyAPICaller;
+let esClient: ElasticsearchClient;
 let collectorFetchContext: CollectorFetchContext;
 const collectorFetchContextMock = createCollectorFetchContextMock();
 
@@ -38,34 +38,33 @@ function setupMockCallCluster(
   optCount: { optInCount?: number; optOutCount?: number } | null,
   language: string | undefined | null
 ) {
-  callCluster = (jest.fn((method, params) => {
-    if (params && 'id' in params && params.id === 'kql-telemetry:kql-telemetry') {
-      if (optCount === null) {
-        return Promise.resolve({
+  function mockedEsGetMethod() {
+    if (optCount === null) {
+      return Promise.resolve({
+        body: {
           _index: '.kibana_1',
           _id: 'kql-telemetry:kql-telemetry',
           found: false,
-        });
-      } else {
-        return Promise.resolve({
+        },
+      });
+    } else {
+      return Promise.resolve({
+        body: {
           _source: {
-            'kql-telemetry': {
-              ...optCount,
-            },
+            'kql-telemetry': { ...optCount },
             type: 'kql-telemetry',
             updated_at: '2018-10-05T20:20:56.258Z',
           },
-        });
-      }
-    } else if (params && 'body' in params && params.body.query.term.type === 'config') {
-      if (language === 'missingConfigDoc') {
-        return Promise.resolve({
-          hits: {
-            hits: [],
-          },
-        });
-      } else {
-        return Promise.resolve({
+        },
+      });
+    }
+  }
+  function mockedEsSearchMethod() {
+    if (language === 'missingConfigDoc') {
+      return Promise.resolve({ body: { hits: { hits: [] } } });
+    } else {
+      return Promise.resolve({
+        body: {
           hits: {
             hits: [
               {
@@ -77,12 +76,15 @@ function setupMockCallCluster(
               },
             ],
           },
-        });
-      }
+        },
+      });
     }
-
-    throw new Error('invalid call');
-  }) as unknown) as LegacyAPICaller;
+  }
+  const esClientMock = ({
+    get: jest.fn().mockImplementation(mockedEsGetMethod),
+    search: jest.fn().mockImplementation(mockedEsSearchMethod),
+  } as unknown) as ElasticsearchClient;
+  esClient = esClientMock;
 }
 
 describe('makeKQLUsageCollector', () => {
@@ -95,7 +97,7 @@ describe('makeKQLUsageCollector', () => {
       setupMockCallCluster({ optInCount: 1 }, 'kuery');
       collectorFetchContext = {
         ...collectorFetchContextMock,
-        callCluster,
+        esClient,
       };
       const fetchResponse = await fetch(collectorFetchContext);
       expect(fetchResponse.optInCount).toBe(1);
@@ -106,7 +108,7 @@ describe('makeKQLUsageCollector', () => {
       setupMockCallCluster({ optInCount: 1 }, 'kuery');
       collectorFetchContext = {
         ...collectorFetchContextMock,
-        callCluster,
+        esClient,
       };
       const fetchResponse = await fetch(collectorFetchContext);
       expect(fetchResponse.defaultQueryLanguage).toBe('kuery');
@@ -117,7 +119,7 @@ describe('makeKQLUsageCollector', () => {
       setupMockCallCluster({ optInCount: 1 }, null);
       collectorFetchContext = {
         ...collectorFetchContextMock,
-        callCluster,
+        esClient,
       };
       const fetchResponse = await fetch(collectorFetchContext);
       expect(fetchResponse.defaultQueryLanguage).toBe('lucene');
@@ -127,7 +129,7 @@ describe('makeKQLUsageCollector', () => {
       setupMockCallCluster({ optInCount: 1 }, undefined);
       collectorFetchContext = {
         ...collectorFetchContextMock,
-        callCluster,
+        esClient,
       };
       const fetchResponse = await fetch(collectorFetchContext);
       expect(fetchResponse.defaultQueryLanguage).toBe('default-lucene');
@@ -137,7 +139,7 @@ describe('makeKQLUsageCollector', () => {
       setupMockCallCluster(null, 'kuery');
       collectorFetchContext = {
         ...collectorFetchContextMock,
-        callCluster,
+        esClient,
       };
       const fetchResponse = await fetch(collectorFetchContext);
       expect(fetchResponse.optInCount).toBe(0);
@@ -148,7 +150,7 @@ describe('makeKQLUsageCollector', () => {
       setupMockCallCluster(null, 'missingConfigDoc');
       collectorFetchContext = {
         ...collectorFetchContextMock,
-        callCluster,
+        esClient,
       };
       const fetchResponse = await fetch(collectorFetchContext);
       expect(fetchResponse.defaultQueryLanguage).toBe('default-lucene');
diff --git a/src/plugins/data/server/kql_telemetry/usage_collector/fetch.ts b/src/plugins/data/server/kql_telemetry/usage_collector/fetch.ts
index 21a1843d1ec816..5178aa65705d8a 100644
--- a/src/plugins/data/server/kql_telemetry/usage_collector/fetch.ts
+++ b/src/plugins/data/server/kql_telemetry/usage_collector/fetch.ts
@@ -30,18 +30,22 @@ export interface Usage {
 }
 
 export function fetchProvider(index: string) {
-  return async ({ callCluster }: CollectorFetchContext): Promise<Usage> => {
-    const [response, config] = await Promise.all([
-      callCluster('get', {
-        index,
-        id: 'kql-telemetry:kql-telemetry',
-        ignore: [404],
-      }),
-      callCluster('search', {
-        index,
-        body: { query: { term: { type: 'config' } } },
-        ignore: [404],
-      }),
+  return async ({ esClient }: CollectorFetchContext): Promise<Usage> => {
+    const [{ body: response }, { body: config }] = await Promise.all([
+      esClient.get(
+        {
+          index,
+          id: 'kql-telemetry:kql-telemetry',
+        },
+        { ignore: [404] }
+      ),
+      esClient.search(
+        {
+          index,
+          body: { query: { term: { type: 'config' } } },
+        },
+        { ignore: [404] }
+      ),
     ]);
 
     const queryLanguageConfigValue: string | null | undefined = get(

From 2db76660ce809de02fa906a19b9741951809e73a Mon Sep 17 00:00:00 2001
From: Gidi Meir Morris <github@gidi.io>
Date: Mon, 21 Dec 2020 19:17:04 +0000
Subject: [PATCH 71/75] [Alerting] Encourage type safe usage of Alerting
 (#86623)

This PR encourages type safe usage of the Alerting framework by replacing the current default Params/State/InstanceState/InstanceContext types (which are `AlertTypeParams`/`AlertTypeState`/etc.) with `never`.
This means that code can continue to omit the specific types for these fields, as long as they aren't referenced.
Once an alert developer wishes to actually reference the parameters (or state/context), then they have to specify the type.

This PR also changed the typing of the `AlertTypeParams` and `AlertTypeState` from `Record<string, any>` to `Record<string, unknown>`, to ensure that where these catch-all types are used they will at least enforce `unknown` rather than `any`.
This change broke some usage in both @elastic/kibana-alerting-services  plugins, but also other plugins in the Stack/Solutions. I tried to fix these where I could, but some of these require new types and refactoring in other teams' code, which I decided is best done by the team who own and maintain that code - I've added explicit `TODO` comments in all of these places, describing the required fix.

This PR also introduced a Generics based typing for the `Alert` type so that the `params` field can be typed as something other than `AlertTypeParams`.
---
 .../alerting_example/common/constants.ts      |   4 +-
 .../public/components/view_astros_alert.tsx   |   4 +-
 .../server/alert_types/astros.ts              |   6 +-
 x-pack/plugins/alerts/common/alert.ts         |  12 +-
 .../create_alert_instance_factory.ts          |  10 +-
 .../alerts/server/alert_type_registry.ts      |  43 +++--
 .../server/alerts_client/alerts_client.ts     |  80 ++++++---
 .../server/alerts_client/tests/create.test.ts |  12 +-
 ...rt_instance_summary_from_event_log.test.ts |   4 +-
 .../alert_instance_summary_from_event_log.ts  |   2 +-
 .../lib/validate_alert_type_params.test.ts    |  72 ++------
 .../server/lib/validate_alert_type_params.ts  |  13 +-
 x-pack/plugins/alerts/server/mocks.ts         |  22 ++-
 .../alerts/server/routes/create.test.ts       |   2 +-
 x-pack/plugins/alerts/server/routes/create.ts |  12 +-
 .../plugins/alerts/server/routes/get.test.ts  |   4 +-
 .../task_runner/alert_task_instance.test.ts   |   4 +-
 .../server/task_runner/alert_task_instance.ts |   5 +-
 .../create_execution_handler.test.ts          |  65 ++++---
 .../task_runner/create_execution_handler.ts   |  23 ++-
 .../server/task_runner/task_runner.test.ts    | 168 ++++++++++++++----
 .../alerts/server/task_runner/task_runner.ts  | 125 ++++++++-----
 .../task_runner/task_runner_factory.test.ts   |   4 +-
 .../server/task_runner/task_runner_factory.ts |   4 +-
 x-pack/plugins/alerts/server/types.ts         |  40 +++--
 .../infra/public/alerting/inventory/index.ts  |  14 +-
 .../public/alerting/metric_threshold/index.ts |  14 +-
 .../inventory_metric_threshold_executor.ts    |  16 +-
 ...r_inventory_metric_threshold_alert_type.ts |  14 +-
 .../log_threshold/log_threshold_executor.ts   |  39 ++--
 .../metric_threshold/lib/evaluate_alert.ts    |  18 +-
 .../metric_threshold_executor.test.ts         |  35 +++-
 .../metric_threshold_executor.ts              |  19 +-
 .../register_metric_threshold_alert_type.ts   |  28 ++-
 .../plugins/monitoring/common/types/alerts.ts |   6 +-
 .../ccr_read_exceptions_alert/index.tsx       |   5 +-
 .../alerts/components/duration/validation.tsx |   2 +
 .../cpu_usage_alert/cpu_usage_alert.tsx       |   4 +-
 .../public/alerts/disk_usage_alert/index.tsx  |   4 +-
 .../alerts/memory_usage_alert/index.tsx       |   4 +-
 .../monitoring/server/alerts/base_alert.ts    |   6 +-
 .../notifications/create_notifications.ts     |   6 +-
 .../notifications/find_notifications.ts       |   4 +-
 .../notifications/read_notifications.ts       |   4 +-
 .../detection_engine/notifications/types.ts   |  32 ++--
 .../notifications/update_notifications.ts     |   6 +-
 .../routes/rules/create_rules_bulk_route.ts   |   9 +-
 .../routes/rules/create_rules_route.ts        |   9 +-
 .../detection_engine/routes/rules/utils.ts    |   9 +-
 .../routes/rules/validate.test.ts             |   5 +-
 .../detection_engine/routes/rules/validate.ts |   9 +-
 .../detection_engine/rules/create_rules.ts    |  10 +-
 .../lib/detection_engine/rules/find_rules.ts  |   3 +-
 .../rules/install_prepacked_rules.ts          |   6 +-
 .../rules/patch_rules.mock.ts                 |  30 +++-
 .../lib/detection_engine/rules/patch_rules.ts |  10 +-
 .../lib/detection_engine/rules/read_rules.ts  |   3 +-
 .../lib/detection_engine/rules/types.ts       |  14 +-
 .../detection_engine/rules/update_rules.ts    |  10 +-
 .../signals/signal_params_schema.ts           |   2 +-
 .../signals/signal_rule_alert_type.test.ts    |   5 +-
 .../signals/signal_rule_alert_type.ts         |  12 +-
 .../lib/detection_engine/signals/types.ts     |  24 ++-
 .../server/lib/detection_engine/types.ts      |   3 +-
 .../alert_types/geo_containment/types.ts      |   3 +-
 .../public/alert_types/geo_threshold/types.ts |   3 +-
 .../alert_types/threshold/expression.tsx      |  12 +-
 .../public/alert_types/threshold/types.ts     |   4 +-
 .../alert_types/geo_containment/alert_type.ts |  38 +++-
 .../geo_containment/geo_containment.ts        |  43 ++---
 .../alert_types/geo_containment/index.ts      |  15 +-
 .../tests/geo_containment.test.ts             |  17 +-
 .../alert_types/geo_threshold/alert_type.ts   |  45 ++++-
 .../geo_threshold/geo_threshold.ts            |  34 +---
 .../public/application/lib/alert_api.test.ts  |  13 +-
 .../triggers_actions_ui/public/plugin.ts      |   4 +-
 .../triggers_actions_ui/public/types.ts       |  26 ++-
 .../uptime/public/state/actions/types.ts      |   5 +-
 .../uptime/public/state/alerts/alerts.ts      |  27 +--
 .../plugins/uptime/public/state/api/alerts.ts |  11 +-
 .../lib/alerts/__tests__/status_check.test.ts |  10 +-
 .../plugins/uptime/server/lib/alerts/types.ts |  11 +-
 .../server/lib/alerts/uptime_alert_wrapper.ts |  28 ++-
 .../plugins/alerts/server/alert_types.ts      |  14 +-
 .../fixtures/plugins/alerts/server/plugin.ts  |  11 +-
 85 files changed, 1044 insertions(+), 523 deletions(-)

diff --git a/x-pack/examples/alerting_example/common/constants.ts b/x-pack/examples/alerting_example/common/constants.ts
index 40cc298db795a6..8e4ea4faf014c1 100644
--- a/x-pack/examples/alerting_example/common/constants.ts
+++ b/x-pack/examples/alerting_example/common/constants.ts
@@ -4,11 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { AlertTypeParams } from '../../../plugins/alerts/common';
+
 export const ALERTING_EXAMPLE_APP_ID = 'AlertingExample';
 
 // always firing
 export const DEFAULT_INSTANCES_TO_GENERATE = 5;
-export interface AlwaysFiringParams {
+export interface AlwaysFiringParams extends AlertTypeParams {
   instances?: number;
   thresholds?: {
     small?: number;
diff --git a/x-pack/examples/alerting_example/public/components/view_astros_alert.tsx b/x-pack/examples/alerting_example/public/components/view_astros_alert.tsx
index e4687c75fa0b7b..eb682a86f5ff66 100644
--- a/x-pack/examples/alerting_example/public/components/view_astros_alert.tsx
+++ b/x-pack/examples/alerting_example/public/components/view_astros_alert.tsx
@@ -23,7 +23,7 @@ import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { CoreStart } from 'kibana/public';
 import { isEmpty } from 'lodash';
 import { Alert, AlertTaskState, BASE_ALERT_API_PATH } from '../../../../plugins/alerts/common';
-import { ALERTING_EXAMPLE_APP_ID } from '../../common/constants';
+import { ALERTING_EXAMPLE_APP_ID, AlwaysFiringParams } from '../../common/constants';
 
 type Props = RouteComponentProps & {
   http: CoreStart['http'];
@@ -34,7 +34,7 @@ function hasCraft(state: any): state is { craft: string } {
   return state && state.craft;
 }
 export const ViewPeopleInSpaceAlertPage = withRouter(({ http, id }: Props) => {
-  const [alert, setAlert] = useState<Alert | null>(null);
+  const [alert, setAlert] = useState<Alert<AlwaysFiringParams> | null>(null);
   const [alertState, setAlertState] = useState<AlertTaskState | null>(null);
 
   useEffect(() => {
diff --git a/x-pack/examples/alerting_example/server/alert_types/astros.ts b/x-pack/examples/alerting_example/server/alert_types/astros.ts
index 27a8bfc7a53a3d..22c2f25c410cd4 100644
--- a/x-pack/examples/alerting_example/server/alert_types/astros.ts
+++ b/x-pack/examples/alerting_example/server/alert_types/astros.ts
@@ -38,7 +38,11 @@ function getCraftFilter(craft: string) {
     craft === Craft.OuterSpace ? true : craft === person.craft;
 }
 
-export const alertType: AlertType = {
+export const alertType: AlertType<
+  { outerSpaceCapacity: number; craft: string; op: string },
+  { peopleInSpace: number },
+  { craft: string }
+> = {
   id: 'example.people-in-space',
   name: 'People In Space Right Now',
   actionGroups: [{ id: 'default', name: 'default' }],
diff --git a/x-pack/plugins/alerts/common/alert.ts b/x-pack/plugins/alerts/common/alert.ts
index d74f66898eff66..ed3fbcf2ddc9bc 100644
--- a/x-pack/plugins/alerts/common/alert.ts
+++ b/x-pack/plugins/alerts/common/alert.ts
@@ -7,10 +7,8 @@
 import { SavedObjectAttribute, SavedObjectAttributes } from 'kibana/server';
 import { AlertNotifyWhenType } from './alert_notify_when_type';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AlertTypeState = Record<string, any>;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AlertTypeParams = Record<string, any>;
+export type AlertTypeState = Record<string, unknown>;
+export type AlertTypeParams = Record<string, unknown>;
 
 export interface IntervalSchedule extends SavedObjectAttributes {
   interval: string;
@@ -52,7 +50,7 @@ export interface AlertAggregations {
   alertExecutionStatus: { [status: string]: number };
 }
 
-export interface Alert {
+export interface Alert<Params extends AlertTypeParams = never> {
   id: string;
   enabled: boolean;
   name: string;
@@ -61,7 +59,7 @@ export interface Alert {
   consumer: string;
   schedule: IntervalSchedule;
   actions: AlertAction[];
-  params: AlertTypeParams;
+  params: Params;
   scheduledTaskId?: string;
   createdBy: string | null;
   updatedBy: string | null;
@@ -76,7 +74,7 @@ export interface Alert {
   executionStatus: AlertExecutionStatus;
 }
 
-export type SanitizedAlert = Omit<Alert, 'apiKey'>;
+export type SanitizedAlert<Params extends AlertTypeParams = never> = Omit<Alert<Params>, 'apiKey'>;
 
 export enum HealthStatus {
   OK = 'ok',
diff --git a/x-pack/plugins/alerts/server/alert_instance/create_alert_instance_factory.ts b/x-pack/plugins/alerts/server/alert_instance/create_alert_instance_factory.ts
index 0b29262ddcc07d..47f013a5d0e552 100644
--- a/x-pack/plugins/alerts/server/alert_instance/create_alert_instance_factory.ts
+++ b/x-pack/plugins/alerts/server/alert_instance/create_alert_instance_factory.ts
@@ -4,12 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { AlertInstanceContext, AlertInstanceState } from '../types';
 import { AlertInstance } from './alert_instance';
 
-export function createAlertInstanceFactory(alertInstances: Record<string, AlertInstance>) {
-  return (id: string): AlertInstance => {
+export function createAlertInstanceFactory<
+  InstanceState extends AlertInstanceState,
+  InstanceContext extends AlertInstanceContext
+>(alertInstances: Record<string, AlertInstance<InstanceState, InstanceContext>>) {
+  return (id: string): AlertInstance<InstanceState, InstanceContext> => {
     if (!alertInstances[id]) {
-      alertInstances[id] = new AlertInstance();
+      alertInstances[id] = new AlertInstance<InstanceState, InstanceContext>();
     }
 
     return alertInstances[id];
diff --git a/x-pack/plugins/alerts/server/alert_type_registry.ts b/x-pack/plugins/alerts/server/alert_type_registry.ts
index d436d1987c0271..5e4188c1f3bc1c 100644
--- a/x-pack/plugins/alerts/server/alert_type_registry.ts
+++ b/x-pack/plugins/alerts/server/alert_type_registry.ts
@@ -32,7 +32,7 @@ export interface ConstructorOptions {
 
 export interface RegistryAlertType
   extends Pick<
-    NormalizedAlertType,
+    UntypedNormalizedAlertType,
     | 'name'
     | 'actionGroups'
     | 'recoveryActionGroup'
@@ -66,16 +66,23 @@ const alertIdSchema = schema.string({
 });
 
 export type NormalizedAlertType<
-  Params extends AlertTypeParams = AlertTypeParams,
-  State extends AlertTypeState = AlertTypeState,
-  InstanceState extends AlertInstanceState = AlertInstanceState,
-  InstanceContext extends AlertInstanceContext = AlertInstanceContext
+  Params extends AlertTypeParams,
+  State extends AlertTypeState,
+  InstanceState extends AlertInstanceState,
+  InstanceContext extends AlertInstanceContext
 > = Omit<AlertType<Params, State, InstanceState, InstanceContext>, 'recoveryActionGroup'> &
   Pick<Required<AlertType<Params, State, InstanceState, InstanceContext>>, 'recoveryActionGroup'>;
 
+export type UntypedNormalizedAlertType = NormalizedAlertType<
+  AlertTypeParams,
+  AlertTypeState,
+  AlertInstanceState,
+  AlertInstanceContext
+>;
+
 export class AlertTypeRegistry {
   private readonly taskManager: TaskManagerSetupContract;
-  private readonly alertTypes: Map<string, NormalizedAlertType> = new Map();
+  private readonly alertTypes: Map<string, UntypedNormalizedAlertType> = new Map();
   private readonly taskRunnerFactory: TaskRunnerFactory;
   private readonly licenseState: ILicenseState;
   private readonly licensing: LicensingPluginSetup;
@@ -96,10 +103,10 @@ export class AlertTypeRegistry {
   }
 
   public register<
-    Params extends AlertTypeParams = AlertTypeParams,
-    State extends AlertTypeState = AlertTypeState,
-    InstanceState extends AlertInstanceState = AlertInstanceState,
-    InstanceContext extends AlertInstanceContext = AlertInstanceContext
+    Params extends AlertTypeParams,
+    State extends AlertTypeState,
+    InstanceState extends AlertInstanceState,
+    InstanceContext extends AlertInstanceContext
   >(alertType: AlertType<Params, State, InstanceState, InstanceContext>) {
     if (this.has(alertType.id)) {
       throw new Error(
@@ -113,14 +120,22 @@ export class AlertTypeRegistry {
     }
     alertType.actionVariables = normalizedActionVariables(alertType.actionVariables);
 
-    const normalizedAlertType = augmentActionGroupsWithReserved(alertType as AlertType);
+    const normalizedAlertType = augmentActionGroupsWithReserved<
+      Params,
+      State,
+      InstanceState,
+      InstanceContext
+    >(alertType);
 
-    this.alertTypes.set(alertIdSchema.validate(alertType.id), normalizedAlertType);
+    this.alertTypes.set(
+      alertIdSchema.validate(alertType.id),
+      normalizedAlertType as UntypedNormalizedAlertType
+    );
     this.taskManager.registerTaskDefinitions({
       [`alerting:${alertType.id}`]: {
         title: alertType.name,
         createTaskRunner: (context: RunContext) =>
-          this.taskRunnerFactory.create(normalizedAlertType, context),
+          this.taskRunnerFactory.create(normalizedAlertType as UntypedNormalizedAlertType, context),
       },
     });
     // No need to notify usage on basic alert types
@@ -170,7 +185,7 @@ export class AlertTypeRegistry {
             producer,
             minimumLicenseRequired,
           },
-        ]: [string, NormalizedAlertType]) => ({
+        ]: [string, UntypedNormalizedAlertType]) => ({
           id,
           name,
           actionGroups,
diff --git a/x-pack/plugins/alerts/server/alerts_client/alerts_client.ts b/x-pack/plugins/alerts/server/alerts_client/alerts_client.ts
index f21cd2b02943a9..e21fee4ce3d61f 100644
--- a/x-pack/plugins/alerts/server/alerts_client/alerts_client.ts
+++ b/x-pack/plugins/alerts/server/alerts_client/alerts_client.ts
@@ -23,13 +23,13 @@ import {
   RawAlert,
   AlertTypeRegistry,
   AlertAction,
-  AlertType,
   IntervalSchedule,
   SanitizedAlert,
   AlertTaskState,
   AlertInstanceSummary,
   AlertExecutionStatusValues,
   AlertNotifyWhenType,
+  AlertTypeParams,
 } from '../types';
 import {
   validateAlertTypeParams,
@@ -44,7 +44,7 @@ import { EncryptedSavedObjectsClient } from '../../../encrypted_saved_objects/se
 import { TaskManagerStartContract } from '../../../task_manager/server';
 import { taskInstanceToAlertTaskInstance } from '../task_runner/alert_task_instance';
 import { deleteTaskIfItExists } from '../lib/delete_task_if_it_exists';
-import { RegistryAlertType } from '../alert_type_registry';
+import { RegistryAlertType, UntypedNormalizedAlertType } from '../alert_type_registry';
 import { AlertsAuthorization, WriteOperations, ReadOperations } from '../authorization';
 import { IEventLogClient } from '../../../../plugins/event_log/server';
 import { parseIsoOrRelativeDate } from '../lib/iso_or_relative_date';
@@ -127,16 +127,16 @@ interface AggregateResult {
   alertExecutionStatus: { [status: string]: number };
 }
 
-export interface FindResult {
+export interface FindResult<Params extends AlertTypeParams> {
   page: number;
   perPage: number;
   total: number;
-  data: SanitizedAlert[];
+  data: Array<SanitizedAlert<Params>>;
 }
 
-export interface CreateOptions {
+export interface CreateOptions<Params extends AlertTypeParams> {
   data: Omit<
-    Alert,
+    Alert<Params>,
     | 'id'
     | 'createdBy'
     | 'updatedBy'
@@ -154,14 +154,14 @@ export interface CreateOptions {
   };
 }
 
-interface UpdateOptions {
+interface UpdateOptions<Params extends AlertTypeParams> {
   id: string;
   data: {
     name: string;
     tags: string[];
     schedule: IntervalSchedule;
     actions: NormalizedAlertAction[];
-    params: Record<string, unknown>;
+    params: Params;
     throttle: string | null;
     notifyWhen: AlertNotifyWhenType | null;
   };
@@ -223,7 +223,10 @@ export class AlertsClient {
     this.auditLogger = auditLogger;
   }
 
-  public async create({ data, options }: CreateOptions): Promise<Alert> {
+  public async create<Params extends AlertTypeParams = never>({
+    data,
+    options,
+  }: CreateOptions<Params>): Promise<Alert<Params>> {
     const id = SavedObjectsUtils.generateId();
 
     try {
@@ -248,7 +251,10 @@ export class AlertsClient {
     // Throws an error if alert type isn't registered
     const alertType = this.alertTypeRegistry.get(data.alertTypeId);
 
-    const validatedAlertTypeParams = validateAlertTypeParams(alertType, data.params);
+    const validatedAlertTypeParams = validateAlertTypeParams(
+      data.params,
+      alertType.validate?.params
+    );
     const username = await this.getUserName();
 
     const createdAPIKey = data.enabled
@@ -334,10 +340,14 @@ export class AlertsClient {
       });
       createdAlert.attributes.scheduledTaskId = scheduledTask.id;
     }
-    return this.getAlertFromRaw(createdAlert.id, createdAlert.attributes, references);
+    return this.getAlertFromRaw<Params>(createdAlert.id, createdAlert.attributes, references);
   }
 
-  public async get({ id }: { id: string }): Promise<SanitizedAlert> {
+  public async get<Params extends AlertTypeParams = never>({
+    id,
+  }: {
+    id: string;
+  }): Promise<SanitizedAlert<Params>> {
     const result = await this.unsecuredSavedObjectsClient.get<RawAlert>('alert', id);
     try {
       await this.authorization.ensureAuthorized(
@@ -361,7 +371,7 @@ export class AlertsClient {
         savedObject: { type: 'alert', id },
       })
     );
-    return this.getAlertFromRaw(result.id, result.attributes, result.references);
+    return this.getAlertFromRaw<Params>(result.id, result.attributes, result.references);
   }
 
   public async getAlertState({ id }: { id: string }): Promise<AlertTaskState | void> {
@@ -426,9 +436,9 @@ export class AlertsClient {
     });
   }
 
-  public async find({
+  public async find<Params extends AlertTypeParams = never>({
     options: { fields, ...options } = {},
-  }: { options?: FindOptions } = {}): Promise<FindResult> {
+  }: { options?: FindOptions } = {}): Promise<FindResult<Params>> {
     let authorizationTuple;
     try {
       authorizationTuple = await this.authorization.getFindAuthorizationFilter();
@@ -475,7 +485,7 @@ export class AlertsClient {
         );
         throw error;
       }
-      return this.getAlertFromRaw(
+      return this.getAlertFromRaw<Params>(
         id,
         fields ? (pick(attributes, fields) as RawAlert) : attributes,
         references
@@ -605,15 +615,21 @@ export class AlertsClient {
     return removeResult;
   }
 
-  public async update({ id, data }: UpdateOptions): Promise<PartialAlert> {
+  public async update<Params extends AlertTypeParams = never>({
+    id,
+    data,
+  }: UpdateOptions<Params>): Promise<PartialAlert<Params>> {
     return await retryIfConflicts(
       this.logger,
       `alertsClient.update('${id}')`,
-      async () => await this.updateWithOCC({ id, data })
+      async () => await this.updateWithOCC<Params>({ id, data })
     );
   }
 
-  private async updateWithOCC({ id, data }: UpdateOptions): Promise<PartialAlert> {
+  private async updateWithOCC<Params extends AlertTypeParams>({
+    id,
+    data,
+  }: UpdateOptions<Params>): Promise<PartialAlert<Params>> {
     let alertSavedObject: SavedObject<RawAlert>;
 
     try {
@@ -658,7 +674,7 @@ export class AlertsClient {
 
     this.alertTypeRegistry.ensureAlertTypeEnabled(alertSavedObject.attributes.alertTypeId);
 
-    const updateResult = await this.updateAlert({ id, data }, alertSavedObject);
+    const updateResult = await this.updateAlert<Params>({ id, data }, alertSavedObject);
 
     await Promise.all([
       alertSavedObject.attributes.apiKey
@@ -692,14 +708,17 @@ export class AlertsClient {
     return updateResult;
   }
 
-  private async updateAlert(
-    { id, data }: UpdateOptions,
+  private async updateAlert<Params extends AlertTypeParams>(
+    { id, data }: UpdateOptions<Params>,
     { attributes, version }: SavedObject<RawAlert>
-  ): Promise<PartialAlert> {
+  ): Promise<PartialAlert<Params>> {
     const alertType = this.alertTypeRegistry.get(attributes.alertTypeId);
 
     // Validate
-    const validatedAlertTypeParams = validateAlertTypeParams(alertType, data.params);
+    const validatedAlertTypeParams = validateAlertTypeParams(
+      data.params,
+      alertType.validate?.params
+    );
     this.validateActions(alertType, data.actions);
 
     const { actions, references } = await this.denormalizeActions(data.actions);
@@ -1343,7 +1362,7 @@ export class AlertsClient {
     }) as Alert['actions'];
   }
 
-  private getAlertFromRaw(
+  private getAlertFromRaw<Params extends AlertTypeParams>(
     id: string,
     rawAlert: RawAlert,
     references: SavedObjectReference[] | undefined
@@ -1351,14 +1370,14 @@ export class AlertsClient {
     // In order to support the partial update API of Saved Objects we have to support
     // partial updates of an Alert, but when we receive an actual RawAlert, it is safe
     // to cast the result to an Alert
-    return this.getPartialAlertFromRaw(id, rawAlert, references) as Alert;
+    return this.getPartialAlertFromRaw<Params>(id, rawAlert, references) as Alert;
   }
 
-  private getPartialAlertFromRaw(
+  private getPartialAlertFromRaw<Params extends AlertTypeParams>(
     id: string,
     { createdAt, updatedAt, meta, notifyWhen, scheduledTaskId, ...rawAlert }: Partial<RawAlert>,
     references: SavedObjectReference[] | undefined
-  ): PartialAlert {
+  ): PartialAlert<Params> {
     // Not the prettiest code here, but if we want to use most of the
     // alert fields from the rawAlert using `...rawAlert` kind of access, we
     // need to specifically delete the executionStatus as it's a different type
@@ -1386,7 +1405,10 @@ export class AlertsClient {
     };
   }
 
-  private validateActions(alertType: AlertType, actions: NormalizedAlertAction[]): void {
+  private validateActions(
+    alertType: UntypedNormalizedAlertType,
+    actions: NormalizedAlertAction[]
+  ): void {
     const { actionGroups: alertTypeActionGroups } = alertType;
     const usedAlertActionGroups = actions.map((action) => action.group);
     const availableAlertTypeActionGroups = new Set(map(alertTypeActionGroups, 'id'));
diff --git a/x-pack/plugins/alerts/server/alerts_client/tests/create.test.ts b/x-pack/plugins/alerts/server/alerts_client/tests/create.test.ts
index 5f830a6c5bc51a..0424a1295c9b99 100644
--- a/x-pack/plugins/alerts/server/alerts_client/tests/create.test.ts
+++ b/x-pack/plugins/alerts/server/alerts_client/tests/create.test.ts
@@ -59,7 +59,11 @@ beforeEach(() => {
 
 setGlobalDate();
 
-function getMockData(overwrites: Record<string, unknown> = {}): CreateOptions['data'] {
+function getMockData(
+  overwrites: Record<string, unknown> = {}
+): CreateOptions<{
+  bar: boolean;
+}>['data'] {
   return {
     enabled: true,
     name: 'abc',
@@ -93,7 +97,11 @@ describe('create()', () => {
   });
 
   describe('authorization', () => {
-    function tryToExecuteOperation(options: CreateOptions): Promise<unknown> {
+    function tryToExecuteOperation(
+      options: CreateOptions<{
+        bar: boolean;
+      }>
+    ): Promise<unknown> {
       unsecuredSavedObjectsClient.bulkGet.mockResolvedValueOnce({
         saved_objects: [
           {
diff --git a/x-pack/plugins/alerts/server/lib/alert_instance_summary_from_event_log.test.ts b/x-pack/plugins/alerts/server/lib/alert_instance_summary_from_event_log.test.ts
index d6357494546b03..0f91e5d0c24a91 100644
--- a/x-pack/plugins/alerts/server/lib/alert_instance_summary_from_event_log.test.ts
+++ b/x-pack/plugins/alerts/server/lib/alert_instance_summary_from_event_log.test.ts
@@ -635,11 +635,11 @@ export class EventsFactory {
   }
 }
 
-function createAlert(overrides: Partial<SanitizedAlert>): SanitizedAlert {
+function createAlert(overrides: Partial<SanitizedAlert>): SanitizedAlert<{ bar: boolean }> {
   return { ...BaseAlert, ...overrides };
 }
 
-const BaseAlert: SanitizedAlert = {
+const BaseAlert: SanitizedAlert<{ bar: boolean }> = {
   id: 'alert-123',
   alertTypeId: '123',
   schedule: { interval: '10s' },
diff --git a/x-pack/plugins/alerts/server/lib/alert_instance_summary_from_event_log.ts b/x-pack/plugins/alerts/server/lib/alert_instance_summary_from_event_log.ts
index f540f9a9b884c8..a020eecd448a40 100644
--- a/x-pack/plugins/alerts/server/lib/alert_instance_summary_from_event_log.ts
+++ b/x-pack/plugins/alerts/server/lib/alert_instance_summary_from_event_log.ts
@@ -9,7 +9,7 @@ import { IEvent } from '../../../event_log/server';
 import { EVENT_LOG_ACTIONS, EVENT_LOG_PROVIDER, LEGACY_EVENT_LOG_ACTIONS } from '../plugin';
 
 export interface AlertInstanceSummaryFromEventLogParams {
-  alert: SanitizedAlert;
+  alert: SanitizedAlert<{ bar: boolean }>;
   events: IEvent[];
   dateStart: string;
   dateEnd: string;
diff --git a/x-pack/plugins/alerts/server/lib/validate_alert_type_params.test.ts b/x-pack/plugins/alerts/server/lib/validate_alert_type_params.test.ts
index 2814eaef3e02a5..634b6885aa59be 100644
--- a/x-pack/plugins/alerts/server/lib/validate_alert_type_params.test.ts
+++ b/x-pack/plugins/alerts/server/lib/validate_alert_type_params.test.ts
@@ -8,51 +8,19 @@ import { schema } from '@kbn/config-schema';
 import { validateAlertTypeParams } from './validate_alert_type_params';
 
 test('should return passed in params when validation not defined', () => {
-  const result = validateAlertTypeParams(
-    {
-      id: 'my-alert-type',
-      name: 'My description',
-      actionGroups: [
-        {
-          id: 'default',
-          name: 'Default',
-        },
-      ],
-      defaultActionGroupId: 'default',
-      minimumLicenseRequired: 'basic',
-      async executor() {},
-      producer: 'alerts',
-    },
-    {
-      foo: true,
-    }
-  );
+  const result = validateAlertTypeParams({
+    foo: true,
+  });
   expect(result).toEqual({ foo: true });
 });
 
 test('should validate and apply defaults when params is valid', () => {
   const result = validateAlertTypeParams(
-    {
-      id: 'my-alert-type',
-      name: 'My description',
-      actionGroups: [
-        {
-          id: 'default',
-          name: 'Default',
-        },
-      ],
-      defaultActionGroupId: 'default',
-      minimumLicenseRequired: 'basic',
-      validate: {
-        params: schema.object({
-          param1: schema.string(),
-          param2: schema.string({ defaultValue: 'default-value' }),
-        }),
-      },
-      async executor() {},
-      producer: 'alerts',
-    },
-    { param1: 'value' }
+    { param1: 'value' },
+    schema.object({
+      param1: schema.string(),
+      param2: schema.string({ defaultValue: 'default-value' }),
+    })
   );
   expect(result).toEqual({
     param1: 'value',
@@ -63,26 +31,10 @@ test('should validate and apply defaults when params is valid', () => {
 test('should validate and throw error when params is invalid', () => {
   expect(() =>
     validateAlertTypeParams(
-      {
-        id: 'my-alert-type',
-        name: 'My description',
-        actionGroups: [
-          {
-            id: 'default',
-            name: 'Default',
-          },
-        ],
-        defaultActionGroupId: 'default',
-        minimumLicenseRequired: 'basic',
-        validate: {
-          params: schema.object({
-            param1: schema.string(),
-          }),
-        },
-        async executor() {},
-        producer: 'alerts',
-      },
-      {}
+      {},
+      schema.object({
+        param1: schema.string(),
+      })
     )
   ).toThrowErrorMatchingInlineSnapshot(
     `"params invalid: [param1]: expected value of type [string] but got [undefined]"`
diff --git a/x-pack/plugins/alerts/server/lib/validate_alert_type_params.ts b/x-pack/plugins/alerts/server/lib/validate_alert_type_params.ts
index a443143d8cbde8..2f510f90a2367a 100644
--- a/x-pack/plugins/alerts/server/lib/validate_alert_type_params.ts
+++ b/x-pack/plugins/alerts/server/lib/validate_alert_type_params.ts
@@ -5,15 +5,14 @@
  */
 
 import Boom from '@hapi/boom';
-import { AlertType, AlertExecutorOptions } from '../types';
+import { AlertTypeParams, AlertTypeParamsValidator } from '../types';
 
-export function validateAlertTypeParams(
-  alertType: AlertType,
-  params: Record<string, unknown>
-): AlertExecutorOptions['params'] {
-  const validator = alertType.validate && alertType.validate.params;
+export function validateAlertTypeParams<Params extends AlertTypeParams>(
+  params: Record<string, unknown>,
+  validator?: AlertTypeParamsValidator<Params>
+): Params {
   if (!validator) {
-    return params as AlertExecutorOptions['params'];
+    return params as Params;
   }
 
   try {
diff --git a/x-pack/plugins/alerts/server/mocks.ts b/x-pack/plugins/alerts/server/mocks.ts
index cfae4c650bd42c..0f042b7a81d6c1 100644
--- a/x-pack/plugins/alerts/server/mocks.ts
+++ b/x-pack/plugins/alerts/server/mocks.ts
@@ -11,6 +11,7 @@ import {
   elasticsearchServiceMock,
   savedObjectsClientMock,
 } from '../../../../src/core/server/mocks';
+import { AlertInstanceContext, AlertInstanceState } from './types';
 
 export { alertsClientMock };
 
@@ -30,8 +31,14 @@ const createStartMock = () => {
   return mock;
 };
 
-export type AlertInstanceMock = jest.Mocked<AlertInstance>;
-const createAlertInstanceFactoryMock = () => {
+export type AlertInstanceMock<
+  State extends AlertInstanceState = AlertInstanceState,
+  Context extends AlertInstanceContext = AlertInstanceContext
+> = jest.Mocked<AlertInstance<State, Context>>;
+const createAlertInstanceFactoryMock = <
+  InstanceState extends AlertInstanceState = AlertInstanceState,
+  InstanceContext extends AlertInstanceContext = AlertInstanceContext
+>() => {
   const mock = {
     hasScheduledActions: jest.fn(),
     isThrottled: jest.fn(),
@@ -50,14 +57,17 @@ const createAlertInstanceFactoryMock = () => {
   mock.unscheduleActions.mockReturnValue(mock);
   mock.scheduleActions.mockReturnValue(mock);
 
-  return (mock as unknown) as AlertInstanceMock;
+  return (mock as unknown) as AlertInstanceMock<InstanceState, InstanceContext>;
 };
 
-const createAlertServicesMock = () => {
-  const alertInstanceFactoryMock = createAlertInstanceFactoryMock();
+const createAlertServicesMock = <
+  InstanceState extends AlertInstanceState = AlertInstanceState,
+  InstanceContext extends AlertInstanceContext = AlertInstanceContext
+>() => {
+  const alertInstanceFactoryMock = createAlertInstanceFactoryMock<InstanceState, InstanceContext>();
   return {
     alertInstanceFactory: jest
-      .fn<jest.Mocked<AlertInstance>, [string]>()
+      .fn<jest.Mocked<AlertInstance<InstanceState, InstanceContext>>, [string]>()
       .mockReturnValue(alertInstanceFactoryMock),
     callCluster: elasticsearchServiceMock.createLegacyScopedClusterClient().callAsCurrentUser,
     getLegacyScopedClusterClient: jest.fn(),
diff --git a/x-pack/plugins/alerts/server/routes/create.test.ts b/x-pack/plugins/alerts/server/routes/create.test.ts
index 5597b315158cd7..fc531821f25b68 100644
--- a/x-pack/plugins/alerts/server/routes/create.test.ts
+++ b/x-pack/plugins/alerts/server/routes/create.test.ts
@@ -49,7 +49,7 @@ describe('createAlertRoute', () => {
     ],
   };
 
-  const createResult: Alert = {
+  const createResult: Alert<{ bar: boolean }> = {
     ...mockedAlert,
     enabled: true,
     muteAll: false,
diff --git a/x-pack/plugins/alerts/server/routes/create.ts b/x-pack/plugins/alerts/server/routes/create.ts
index a34a3118985fa5..a79a9d40b236f2 100644
--- a/x-pack/plugins/alerts/server/routes/create.ts
+++ b/x-pack/plugins/alerts/server/routes/create.ts
@@ -16,7 +16,13 @@ import { ILicenseState } from '../lib/license_state';
 import { verifyApiAccess } from '../lib/license_api_access';
 import { validateDurationSchema } from '../lib';
 import { handleDisabledApiKeysError } from './lib/error_handler';
-import { Alert, AlertNotifyWhenType, BASE_ALERT_API_PATH, validateNotifyWhenType } from '../types';
+import {
+  Alert,
+  AlertNotifyWhenType,
+  AlertTypeParams,
+  BASE_ALERT_API_PATH,
+  validateNotifyWhenType,
+} from '../types';
 import { AlertTypeDisabledError } from '../lib/errors/alert_type_disabled';
 
 export const bodySchema = schema.object({
@@ -65,7 +71,9 @@ export const createAlertRoute = (router: IRouter, licenseState: ILicenseState) =
         const alert = req.body;
         const notifyWhen = alert?.notifyWhen ? (alert.notifyWhen as AlertNotifyWhenType) : null;
         try {
-          const alertRes: Alert = await alertsClient.create({ data: { ...alert, notifyWhen } });
+          const alertRes: Alert<AlertTypeParams> = await alertsClient.create<AlertTypeParams>({
+            data: { ...alert, notifyWhen },
+          });
           return res.ok({
             body: alertRes,
           });
diff --git a/x-pack/plugins/alerts/server/routes/get.test.ts b/x-pack/plugins/alerts/server/routes/get.test.ts
index 21e52ece82d2d6..747f9b11e2b47a 100644
--- a/x-pack/plugins/alerts/server/routes/get.test.ts
+++ b/x-pack/plugins/alerts/server/routes/get.test.ts
@@ -22,7 +22,9 @@ beforeEach(() => {
 });
 
 describe('getAlertRoute', () => {
-  const mockedAlert: Alert = {
+  const mockedAlert: Alert<{
+    bar: true;
+  }> = {
     id: '1',
     alertTypeId: '1',
     schedule: { interval: '10s' },
diff --git a/x-pack/plugins/alerts/server/task_runner/alert_task_instance.test.ts b/x-pack/plugins/alerts/server/task_runner/alert_task_instance.test.ts
index 09236ec5e0ad1a..1bd8b75e2133de 100644
--- a/x-pack/plugins/alerts/server/task_runner/alert_task_instance.test.ts
+++ b/x-pack/plugins/alerts/server/task_runner/alert_task_instance.test.ts
@@ -9,7 +9,9 @@ import { AlertTaskInstance, taskInstanceToAlertTaskInstance } from './alert_task
 import uuid from 'uuid';
 import { SanitizedAlert } from '../types';
 
-const alert: SanitizedAlert = {
+const alert: SanitizedAlert<{
+  bar: boolean;
+}> = {
   id: 'alert-123',
   alertTypeId: '123',
   schedule: { interval: '10s' },
diff --git a/x-pack/plugins/alerts/server/task_runner/alert_task_instance.ts b/x-pack/plugins/alerts/server/task_runner/alert_task_instance.ts
index a290f3fa33c70d..ab074cfdffa1cf 100644
--- a/x-pack/plugins/alerts/server/task_runner/alert_task_instance.ts
+++ b/x-pack/plugins/alerts/server/task_runner/alert_task_instance.ts
@@ -13,6 +13,7 @@ import {
   alertParamsSchema,
   alertStateSchema,
   AlertTaskParams,
+  AlertTypeParams,
 } from '../../common';
 
 export interface AlertTaskInstance extends ConcreteTaskInstance {
@@ -23,9 +24,9 @@ export interface AlertTaskInstance extends ConcreteTaskInstance {
 const enumerateErrorFields = (e: t.Errors) =>
   `${e.map(({ context }) => context.map(({ key }) => key).join('.'))}`;
 
-export function taskInstanceToAlertTaskInstance(
+export function taskInstanceToAlertTaskInstance<Params extends AlertTypeParams>(
   taskInstance: ConcreteTaskInstance,
-  alert?: SanitizedAlert
+  alert?: SanitizedAlert<Params>
 ): AlertTaskInstance {
   return {
     ...taskInstance,
diff --git a/x-pack/plugins/alerts/server/task_runner/create_execution_handler.test.ts b/x-pack/plugins/alerts/server/task_runner/create_execution_handler.test.ts
index b414e726f01010..5603b13a3b1f5c 100644
--- a/x-pack/plugins/alerts/server/task_runner/create_execution_handler.test.ts
+++ b/x-pack/plugins/alerts/server/task_runner/create_execution_handler.test.ts
@@ -4,8 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { AlertType } from '../types';
-import { createExecutionHandler } from './create_execution_handler';
+import { createExecutionHandler, CreateExecutionHandlerOptions } from './create_execution_handler';
 import { loggingSystemMock } from '../../../../../src/core/server/mocks';
 import {
   actionsMock,
@@ -16,12 +15,19 @@ import { eventLoggerMock } from '../../../event_log/server/event_logger.mock';
 import { KibanaRequest } from 'kibana/server';
 import { asSavedObjectExecutionSource } from '../../../actions/server';
 import { InjectActionParamsOpts } from './inject_action_params';
+import { UntypedNormalizedAlertType } from '../alert_type_registry';
+import {
+  AlertTypeParams,
+  AlertTypeState,
+  AlertInstanceState,
+  AlertInstanceContext,
+} from '../types';
 
 jest.mock('./inject_action_params', () => ({
   injectActionParams: jest.fn(),
 }));
 
-const alertType: AlertType = {
+const alertType: UntypedNormalizedAlertType = {
   id: 'test',
   name: 'Test',
   actionGroups: [
@@ -39,18 +45,26 @@ const alertType: AlertType = {
 };
 
 const actionsClient = actionsClientMock.create();
-const createExecutionHandlerParams = {
-  actionsPlugin: actionsMock.createStart(),
+
+const mockActionsPlugin = actionsMock.createStart();
+const mockEventLogger = eventLoggerMock.create();
+const createExecutionHandlerParams: jest.Mocked<
+  CreateExecutionHandlerOptions<
+    AlertTypeParams,
+    AlertTypeState,
+    AlertInstanceState,
+    AlertInstanceContext
+  >
+> = {
+  actionsPlugin: mockActionsPlugin,
   spaceId: 'default',
   alertId: '1',
   alertName: 'name-of-alert',
   tags: ['tag-A', 'tag-B'],
   apiKey: 'MTIzOmFiYw==',
-  spaceIdToNamespace: jest.fn().mockReturnValue(undefined),
-  getBasePath: jest.fn().mockReturnValue(undefined),
   alertType,
   logger: loggingSystemMock.create().get(),
-  eventLogger: eventLoggerMock.create(),
+  eventLogger: mockEventLogger,
   actions: [
     {
       id: '1',
@@ -79,12 +93,10 @@ beforeEach(() => {
     .injectActionParams.mockImplementation(
       ({ actionParams }: InjectActionParamsOpts) => actionParams
     );
-  createExecutionHandlerParams.actionsPlugin.isActionTypeEnabled.mockReturnValue(true);
-  createExecutionHandlerParams.actionsPlugin.isActionExecutable.mockReturnValue(true);
-  createExecutionHandlerParams.actionsPlugin.getActionsClientWithRequest.mockResolvedValue(
-    actionsClient
-  );
-  createExecutionHandlerParams.actionsPlugin.renderActionParameterTemplates.mockImplementation(
+  mockActionsPlugin.isActionTypeEnabled.mockReturnValue(true);
+  mockActionsPlugin.isActionExecutable.mockReturnValue(true);
+  mockActionsPlugin.getActionsClientWithRequest.mockResolvedValue(actionsClient);
+  mockActionsPlugin.renderActionParameterTemplates.mockImplementation(
     renderActionParameterTemplatesDefault
   );
 });
@@ -97,9 +109,9 @@ test('enqueues execution per selected action', async () => {
     context: {},
     alertInstanceId: '2',
   });
-  expect(
-    createExecutionHandlerParams.actionsPlugin.getActionsClientWithRequest
-  ).toHaveBeenCalledWith(createExecutionHandlerParams.request);
+  expect(mockActionsPlugin.getActionsClientWithRequest).toHaveBeenCalledWith(
+    createExecutionHandlerParams.request
+  );
   expect(actionsClient.enqueueExecution).toHaveBeenCalledTimes(1);
   expect(actionsClient.enqueueExecution.mock.calls[0]).toMatchInlineSnapshot(`
     Array [
@@ -124,9 +136,8 @@ test('enqueues execution per selected action', async () => {
     ]
   `);
 
-  const eventLogger = createExecutionHandlerParams.eventLogger;
-  expect(eventLogger.logEvent).toHaveBeenCalledTimes(1);
-  expect(eventLogger.logEvent.mock.calls).toMatchInlineSnapshot(`
+  expect(mockEventLogger.logEvent).toHaveBeenCalledTimes(1);
+  expect(mockEventLogger.logEvent.mock.calls).toMatchInlineSnapshot(`
     Array [
       Array [
         Object {
@@ -171,9 +182,9 @@ test('enqueues execution per selected action', async () => {
 
 test(`doesn't call actionsPlugin.execute for disabled actionTypes`, async () => {
   // Mock two calls, one for check against actions[0] and the second for actions[1]
-  createExecutionHandlerParams.actionsPlugin.isActionExecutable.mockReturnValueOnce(false);
-  createExecutionHandlerParams.actionsPlugin.isActionTypeEnabled.mockReturnValueOnce(false);
-  createExecutionHandlerParams.actionsPlugin.isActionTypeEnabled.mockReturnValueOnce(true);
+  mockActionsPlugin.isActionExecutable.mockReturnValueOnce(false);
+  mockActionsPlugin.isActionTypeEnabled.mockReturnValueOnce(false);
+  mockActionsPlugin.isActionTypeEnabled.mockReturnValueOnce(true);
   const executionHandler = createExecutionHandler({
     ...createExecutionHandlerParams,
     actions: [
@@ -214,9 +225,9 @@ test(`doesn't call actionsPlugin.execute for disabled actionTypes`, async () =>
 });
 
 test('trow error error message when action type is disabled', async () => {
-  createExecutionHandlerParams.actionsPlugin.preconfiguredActions = [];
-  createExecutionHandlerParams.actionsPlugin.isActionExecutable.mockReturnValue(false);
-  createExecutionHandlerParams.actionsPlugin.isActionTypeEnabled.mockReturnValue(false);
+  mockActionsPlugin.preconfiguredActions = [];
+  mockActionsPlugin.isActionExecutable.mockReturnValue(false);
+  mockActionsPlugin.isActionTypeEnabled.mockReturnValue(false);
   const executionHandler = createExecutionHandler({
     ...createExecutionHandlerParams,
     actions: [
@@ -243,7 +254,7 @@ test('trow error error message when action type is disabled', async () => {
 
   expect(actionsClient.enqueueExecution).toHaveBeenCalledTimes(0);
 
-  createExecutionHandlerParams.actionsPlugin.isActionExecutable.mockImplementation(() => true);
+  mockActionsPlugin.isActionExecutable.mockImplementation(() => true);
   const executionHandlerForPreconfiguredAction = createExecutionHandler({
     ...createExecutionHandlerParams,
     actions: [...createExecutionHandlerParams.actions],
diff --git a/x-pack/plugins/alerts/server/task_runner/create_execution_handler.ts b/x-pack/plugins/alerts/server/task_runner/create_execution_handler.ts
index 8c7ad79483194f..8b4412aeb23e5d 100644
--- a/x-pack/plugins/alerts/server/task_runner/create_execution_handler.ts
+++ b/x-pack/plugins/alerts/server/task_runner/create_execution_handler.ts
@@ -15,14 +15,20 @@ import { EVENT_LOG_ACTIONS } from '../plugin';
 import { injectActionParams } from './inject_action_params';
 import {
   AlertAction,
+  AlertTypeParams,
+  AlertTypeState,
   AlertInstanceState,
   AlertInstanceContext,
-  AlertType,
-  AlertTypeParams,
   RawAlert,
 } from '../types';
+import { NormalizedAlertType } from '../alert_type_registry';
 
-interface CreateExecutionHandlerOptions {
+export interface CreateExecutionHandlerOptions<
+  Params extends AlertTypeParams,
+  State extends AlertTypeState,
+  InstanceState extends AlertInstanceState,
+  InstanceContext extends AlertInstanceContext
+> {
   alertId: string;
   alertName: string;
   tags?: string[];
@@ -30,7 +36,7 @@ interface CreateExecutionHandlerOptions {
   actions: AlertAction[];
   spaceId: string;
   apiKey: RawAlert['apiKey'];
-  alertType: AlertType;
+  alertType: NormalizedAlertType<Params, State, InstanceState, InstanceContext>;
   logger: Logger;
   eventLogger: IEventLogger;
   request: KibanaRequest;
@@ -45,7 +51,12 @@ interface ExecutionHandlerOptions {
   state: AlertInstanceState;
 }
 
-export function createExecutionHandler({
+export function createExecutionHandler<
+  Params extends AlertTypeParams,
+  State extends AlertTypeState,
+  InstanceState extends AlertInstanceState,
+  InstanceContext extends AlertInstanceContext
+>({
   logger,
   alertId,
   alertName,
@@ -58,7 +69,7 @@ export function createExecutionHandler({
   eventLogger,
   request,
   alertParams,
-}: CreateExecutionHandlerOptions) {
+}: CreateExecutionHandlerOptions<Params, State, InstanceState, InstanceContext>) {
   const alertTypeActionGroups = new Map(
     alertType.actionGroups.map((actionGroup) => [actionGroup.id, actionGroup.name])
   );
diff --git a/x-pack/plugins/alerts/server/task_runner/task_runner.test.ts b/x-pack/plugins/alerts/server/task_runner/task_runner.test.ts
index a4b565194e4314..967c5263b9730e 100644
--- a/x-pack/plugins/alerts/server/task_runner/task_runner.test.ts
+++ b/x-pack/plugins/alerts/server/task_runner/task_runner.test.ts
@@ -6,7 +6,13 @@
 
 import sinon from 'sinon';
 import { schema } from '@kbn/config-schema';
-import { AlertExecutorOptions } from '../types';
+import {
+  AlertExecutorOptions,
+  AlertTypeParams,
+  AlertTypeState,
+  AlertInstanceState,
+  AlertInstanceContext,
+} from '../types';
 import {
   ConcreteTaskInstance,
   isUnrecoverableError,
@@ -28,9 +34,9 @@ import { IEventLogger } from '../../../event_log/server';
 import { SavedObjectsErrorHelpers } from '../../../../../src/core/server';
 import { Alert, RecoveredActionGroup } from '../../common';
 import { omit } from 'lodash';
-import { NormalizedAlertType } from '../alert_type_registry';
+import { UntypedNormalizedAlertType } from '../alert_type_registry';
 import { alertTypeRegistryMock } from '../alert_type_registry.mock';
-const alertType = {
+const alertType: jest.Mocked<UntypedNormalizedAlertType> = {
   id: 'test',
   name: 'My test alert',
   actionGroups: [{ id: 'default', name: 'Default' }, RecoveredActionGroup],
@@ -91,7 +97,7 @@ describe('Task Runner', () => {
     alertTypeRegistry,
   };
 
-  const mockedAlertTypeSavedObject: Alert = {
+  const mockedAlertTypeSavedObject: Alert<AlertTypeParams> = {
     id: '1',
     consumer: 'bar',
     createdAt: new Date('2019-02-12T21:01:22.479Z'),
@@ -150,7 +156,7 @@ describe('Task Runner', () => {
 
   test('successfully executes the task', async () => {
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       {
         ...mockedTaskInstance,
         state: {
@@ -254,14 +260,21 @@ describe('Task Runner', () => {
     taskRunnerFactoryInitializerParams.actionsPlugin.isActionTypeEnabled.mockReturnValue(true);
     taskRunnerFactoryInitializerParams.actionsPlugin.isActionExecutable.mockReturnValue(true);
     alertType.executor.mockImplementation(
-      ({ services: executorServices }: AlertExecutorOptions) => {
+      async ({
+        services: executorServices,
+      }: AlertExecutorOptions<
+        AlertTypeParams,
+        AlertTypeState,
+        AlertInstanceState,
+        AlertInstanceContext
+      >) => {
         executorServices
           .alertInstanceFactory('1')
           .scheduleActionsWithSubGroup('default', 'subDefault');
       }
     );
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       mockedTaskInstance,
       taskRunnerFactoryInitializerParams
     );
@@ -407,12 +420,19 @@ describe('Task Runner', () => {
     taskRunnerFactoryInitializerParams.actionsPlugin.isActionTypeEnabled.mockReturnValue(true);
     taskRunnerFactoryInitializerParams.actionsPlugin.isActionExecutable.mockReturnValue(true);
     alertType.executor.mockImplementation(
-      ({ services: executorServices }: AlertExecutorOptions) => {
+      async ({
+        services: executorServices,
+      }: AlertExecutorOptions<
+        AlertTypeParams,
+        AlertTypeState,
+        AlertInstanceState,
+        AlertInstanceContext
+      >) => {
         executorServices.alertInstanceFactory('1').scheduleActions('default');
       }
     );
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       mockedTaskInstance,
       taskRunnerFactoryInitializerParams
     );
@@ -516,13 +536,20 @@ describe('Task Runner', () => {
     taskRunnerFactoryInitializerParams.actionsPlugin.isActionTypeEnabled.mockReturnValue(true);
     taskRunnerFactoryInitializerParams.actionsPlugin.isActionExecutable.mockReturnValue(true);
     alertType.executor.mockImplementation(
-      ({ services: executorServices }: AlertExecutorOptions) => {
+      async ({
+        services: executorServices,
+      }: AlertExecutorOptions<
+        AlertTypeParams,
+        AlertTypeState,
+        AlertInstanceState,
+        AlertInstanceContext
+      >) => {
         executorServices.alertInstanceFactory('1').scheduleActions('default');
         executorServices.alertInstanceFactory('2').scheduleActions('default');
       }
     );
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       mockedTaskInstance,
       taskRunnerFactoryInitializerParams
     );
@@ -562,12 +589,19 @@ describe('Task Runner', () => {
     taskRunnerFactoryInitializerParams.actionsPlugin.isActionTypeEnabled.mockReturnValue(true);
     taskRunnerFactoryInitializerParams.actionsPlugin.isActionExecutable.mockReturnValue(true);
     alertType.executor.mockImplementation(
-      ({ services: executorServices }: AlertExecutorOptions) => {
+      async ({
+        services: executorServices,
+      }: AlertExecutorOptions<
+        AlertTypeParams,
+        AlertTypeState,
+        AlertInstanceState,
+        AlertInstanceContext
+      >) => {
         executorServices.alertInstanceFactory('1').scheduleActions('default');
       }
     );
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       {
         ...mockedTaskInstance,
         state: {
@@ -656,12 +690,19 @@ describe('Task Runner', () => {
     taskRunnerFactoryInitializerParams.actionsPlugin.isActionTypeEnabled.mockReturnValue(true);
     taskRunnerFactoryInitializerParams.actionsPlugin.isActionExecutable.mockReturnValue(true);
     alertType.executor.mockImplementation(
-      ({ services: executorServices }: AlertExecutorOptions) => {
+      async ({
+        services: executorServices,
+      }: AlertExecutorOptions<
+        AlertTypeParams,
+        AlertTypeState,
+        AlertInstanceState,
+        AlertInstanceContext
+      >) => {
         executorServices.alertInstanceFactory('1').scheduleActions('default');
       }
     );
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       {
         ...mockedTaskInstance,
         state: {
@@ -696,14 +737,21 @@ describe('Task Runner', () => {
     taskRunnerFactoryInitializerParams.actionsPlugin.isActionTypeEnabled.mockReturnValue(true);
     taskRunnerFactoryInitializerParams.actionsPlugin.isActionExecutable.mockReturnValue(true);
     alertType.executor.mockImplementation(
-      ({ services: executorServices }: AlertExecutorOptions) => {
+      async ({
+        services: executorServices,
+      }: AlertExecutorOptions<
+        AlertTypeParams,
+        AlertTypeState,
+        AlertInstanceState,
+        AlertInstanceContext
+      >) => {
         executorServices
           .alertInstanceFactory('1')
           .scheduleActionsWithSubGroup('default', 'subgroup1');
       }
     );
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       {
         ...mockedTaskInstance,
         state: {
@@ -744,12 +792,19 @@ describe('Task Runner', () => {
     taskRunnerFactoryInitializerParams.actionsPlugin.isActionTypeEnabled.mockReturnValue(true);
     taskRunnerFactoryInitializerParams.actionsPlugin.isActionExecutable.mockReturnValue(true);
     alertType.executor.mockImplementation(
-      ({ services: executorServices }: AlertExecutorOptions) => {
+      async ({
+        services: executorServices,
+      }: AlertExecutorOptions<
+        AlertTypeParams,
+        AlertTypeState,
+        AlertInstanceState,
+        AlertInstanceContext
+      >) => {
         executorServices.alertInstanceFactory('1').scheduleActions('default');
       }
     );
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       mockedTaskInstance,
       taskRunnerFactoryInitializerParams
     );
@@ -912,12 +967,19 @@ describe('Task Runner', () => {
     taskRunnerFactoryInitializerParams.actionsPlugin.isActionExecutable.mockReturnValue(true);
 
     alertType.executor.mockImplementation(
-      ({ services: executorServices }: AlertExecutorOptions) => {
+      async ({
+        services: executorServices,
+      }: AlertExecutorOptions<
+        AlertTypeParams,
+        AlertTypeState,
+        AlertInstanceState,
+        AlertInstanceContext
+      >) => {
         executorServices.alertInstanceFactory('1').scheduleActions('default');
       }
     );
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       {
         ...mockedTaskInstance,
         state: {
@@ -1012,12 +1074,19 @@ describe('Task Runner', () => {
     };
 
     alertTypeWithCustomRecovery.executor.mockImplementation(
-      ({ services: executorServices }: AlertExecutorOptions) => {
+      async ({
+        services: executorServices,
+      }: AlertExecutorOptions<
+        AlertTypeParams,
+        AlertTypeState,
+        AlertInstanceState,
+        AlertInstanceContext
+      >) => {
         executorServices.alertInstanceFactory('1').scheduleActions('default');
       }
     );
     const taskRunner = new TaskRunner(
-      alertTypeWithCustomRecovery as NormalizedAlertType,
+      alertTypeWithCustomRecovery,
       {
         ...mockedTaskInstance,
         state: {
@@ -1103,13 +1172,20 @@ describe('Task Runner', () => {
 
   test('persists alertInstances passed in from state, only if they are scheduled for execution', async () => {
     alertType.executor.mockImplementation(
-      ({ services: executorServices }: AlertExecutorOptions) => {
+      async ({
+        services: executorServices,
+      }: AlertExecutorOptions<
+        AlertTypeParams,
+        AlertTypeState,
+        AlertInstanceState,
+        AlertInstanceContext
+      >) => {
         executorServices.alertInstanceFactory('1').scheduleActions('default');
       }
     );
     const date = new Date().toISOString();
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       {
         ...mockedTaskInstance,
         state: {
@@ -1239,7 +1315,7 @@ describe('Task Runner', () => {
             param1: schema.string(),
           }),
         },
-      } as NormalizedAlertType,
+      },
       mockedTaskInstance,
       taskRunnerFactoryInitializerParams
     );
@@ -1267,7 +1343,7 @@ describe('Task Runner', () => {
 
   test('uses API key when provided', async () => {
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       mockedTaskInstance,
       taskRunnerFactoryInitializerParams
     );
@@ -1300,7 +1376,7 @@ describe('Task Runner', () => {
 
   test(`doesn't use API key when not provided`, async () => {
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       mockedTaskInstance,
       taskRunnerFactoryInitializerParams
     );
@@ -1330,7 +1406,7 @@ describe('Task Runner', () => {
 
   test('rescheduled the Alert if the schedule has update during a task run', async () => {
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       mockedTaskInstance,
       taskRunnerFactoryInitializerParams
     );
@@ -1365,13 +1441,20 @@ describe('Task Runner', () => {
 
   test('recovers gracefully when the AlertType executor throws an exception', async () => {
     alertType.executor.mockImplementation(
-      ({ services: executorServices }: AlertExecutorOptions) => {
+      async ({
+        services: executorServices,
+      }: AlertExecutorOptions<
+        AlertTypeParams,
+        AlertTypeState,
+        AlertInstanceState,
+        AlertInstanceContext
+      >) => {
         throw new Error('OMG');
       }
     );
 
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       mockedTaskInstance,
       taskRunnerFactoryInitializerParams
     );
@@ -1438,7 +1521,7 @@ describe('Task Runner', () => {
     });
 
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       mockedTaskInstance,
       taskRunnerFactoryInitializerParams
     );
@@ -1497,7 +1580,7 @@ describe('Task Runner', () => {
     });
 
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       mockedTaskInstance,
       taskRunnerFactoryInitializerParams
     );
@@ -1564,7 +1647,7 @@ describe('Task Runner', () => {
     });
 
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       mockedTaskInstance,
       taskRunnerFactoryInitializerParams
     );
@@ -1631,7 +1714,7 @@ describe('Task Runner', () => {
     });
 
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       mockedTaskInstance,
       taskRunnerFactoryInitializerParams
     );
@@ -1701,7 +1784,7 @@ describe('Task Runner', () => {
     const legacyTaskInstance = omit(mockedTaskInstance, 'schedule');
 
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       legacyTaskInstance,
       taskRunnerFactoryInitializerParams
     );
@@ -1733,13 +1816,20 @@ describe('Task Runner', () => {
     };
 
     alertType.executor.mockImplementation(
-      ({ services: executorServices }: AlertExecutorOptions) => {
+      async ({
+        services: executorServices,
+      }: AlertExecutorOptions<
+        AlertTypeParams,
+        AlertTypeState,
+        AlertInstanceState,
+        AlertInstanceContext
+      >) => {
         throw new Error('OMG');
       }
     );
 
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       {
         ...mockedTaskInstance,
         state: originalAlertSate,
@@ -1770,7 +1860,7 @@ describe('Task Runner', () => {
     });
 
     const taskRunner = new TaskRunner(
-      alertType as NormalizedAlertType,
+      alertType,
       mockedTaskInstance,
       taskRunnerFactoryInitializerParams
     );
diff --git a/x-pack/plugins/alerts/server/task_runner/task_runner.ts b/x-pack/plugins/alerts/server/task_runner/task_runner.ts
index 44cf7dd91be7d5..c4187145e5a167 100644
--- a/x-pack/plugins/alerts/server/task_runner/task_runner.ts
+++ b/x-pack/plugins/alerts/server/task_runner/task_runner.ts
@@ -26,7 +26,6 @@ import {
   RawAlertInstance,
   AlertTaskState,
   Alert,
-  AlertExecutorOptions,
   SanitizedAlert,
   AlertExecutionStatus,
   AlertExecutionStatusErrorReasons,
@@ -39,7 +38,13 @@ import { IEvent, IEventLogger, SAVED_OBJECT_REL_PRIMARY } from '../../../event_l
 import { isAlertSavedObjectNotFoundError } from '../lib/is_alert_not_found_error';
 import { AlertsClient } from '../alerts_client';
 import { partiallyUpdateAlert } from '../saved_objects';
-import { ActionGroup } from '../../common';
+import {
+  ActionGroup,
+  AlertTypeParams,
+  AlertTypeState,
+  AlertInstanceState,
+  AlertInstanceContext,
+} from '../../common';
 import { NormalizedAlertType } from '../alert_type_registry';
 
 const FALLBACK_RETRY_INTERVAL = '5m';
@@ -55,15 +60,20 @@ interface AlertTaskInstance extends ConcreteTaskInstance {
   state: AlertTaskState;
 }
 
-export class TaskRunner {
+export class TaskRunner<
+  Params extends AlertTypeParams,
+  State extends AlertTypeState,
+  InstanceState extends AlertInstanceState,
+  InstanceContext extends AlertInstanceContext
+> {
   private context: TaskRunnerContext;
   private logger: Logger;
   private taskInstance: AlertTaskInstance;
-  private alertType: NormalizedAlertType;
+  private alertType: NormalizedAlertType<Params, State, InstanceState, InstanceContext>;
   private readonly alertTypeRegistry: AlertTypeRegistry;
 
   constructor(
-    alertType: NormalizedAlertType,
+    alertType: NormalizedAlertType<Params, State, InstanceState, InstanceContext>,
     taskInstance: ConcreteTaskInstance,
     context: TaskRunnerContext
   ) {
@@ -131,8 +141,8 @@ export class TaskRunner {
     tags: string[] | undefined,
     spaceId: string,
     apiKey: RawAlert['apiKey'],
-    actions: Alert['actions'],
-    alertParams: RawAlert['params']
+    actions: Alert<Params>['actions'],
+    alertParams: Params
   ) {
     return createExecutionHandler({
       alertId,
@@ -152,7 +162,7 @@ export class TaskRunner {
 
   async executeAlertInstance(
     alertInstanceId: string,
-    alertInstance: AlertInstance,
+    alertInstance: AlertInstance<InstanceState, InstanceContext>,
     executionHandler: ReturnType<typeof createExecutionHandler>
   ) {
     const {
@@ -168,8 +178,8 @@ export class TaskRunner {
 
   async executeAlertInstances(
     services: Services,
-    alert: SanitizedAlert,
-    params: AlertExecutorOptions['params'],
+    alert: SanitizedAlert<Params>,
+    params: Params,
     executionHandler: ReturnType<typeof createExecutionHandler>,
     spaceId: string,
     event: Event
@@ -190,9 +200,12 @@ export class TaskRunner {
     } = this.taskInstance;
     const namespace = this.context.spaceIdToNamespace(spaceId);
 
-    const alertInstances = mapValues<Record<string, RawAlertInstance>, AlertInstance>(
+    const alertInstances = mapValues<
+      Record<string, RawAlertInstance>,
+      AlertInstance<InstanceState, InstanceContext>
+    >(
       alertRawInstances,
-      (rawAlertInstance) => new AlertInstance(rawAlertInstance)
+      (rawAlertInstance) => new AlertInstance<InstanceState, InstanceContext>(rawAlertInstance)
     );
     const originalAlertInstances = cloneDeep(alertInstances);
 
@@ -205,10 +218,12 @@ export class TaskRunner {
         alertId,
         services: {
           ...services,
-          alertInstanceFactory: createAlertInstanceFactory(alertInstances),
+          alertInstanceFactory: createAlertInstanceFactory<InstanceState, InstanceContext>(
+            alertInstances
+          ),
         },
         params,
-        state: alertTypeState,
+        state: alertTypeState as State,
         startedAt: this.taskInstance.startedAt!,
         previousStartedAt: previousStartedAt ? new Date(previousStartedAt) : null,
         spaceId,
@@ -232,12 +247,15 @@ export class TaskRunner {
     event.event.outcome = 'success';
 
     // Cleanup alert instances that are no longer scheduling actions to avoid over populating the alertInstances object
-    const instancesWithScheduledActions = pickBy(alertInstances, (alertInstance: AlertInstance) =>
-      alertInstance.hasScheduledActions()
+    const instancesWithScheduledActions = pickBy(
+      alertInstances,
+      (alertInstance: AlertInstance<InstanceState, InstanceContext>) =>
+        alertInstance.hasScheduledActions()
     );
     const recoveredAlertInstances = pickBy(
       alertInstances,
-      (alertInstance: AlertInstance) => !alertInstance.hasScheduledActions()
+      (alertInstance: AlertInstance<InstanceState, InstanceContext>) =>
+        !alertInstance.hasScheduledActions()
     );
 
     logActiveAndRecoveredInstances({
@@ -272,7 +290,10 @@ export class TaskRunner {
       const instancesToExecute =
         notifyWhen === 'onActionGroupChange'
           ? Object.entries(instancesWithScheduledActions).filter(
-              ([alertInstanceName, alertInstance]: [string, AlertInstance]) => {
+              ([alertInstanceName, alertInstance]: [
+                string,
+                AlertInstance<InstanceState, InstanceContext>
+              ]) => {
                 const shouldExecuteAction = alertInstance.scheduledActionGroupOrSubgroupHasChanged();
                 if (!shouldExecuteAction) {
                   this.logger.debug(
@@ -283,7 +304,10 @@ export class TaskRunner {
               }
             )
           : Object.entries(instancesWithScheduledActions).filter(
-              ([alertInstanceName, alertInstance]: [string, AlertInstance]) => {
+              ([alertInstanceName, alertInstance]: [
+                string,
+                AlertInstance<InstanceState, InstanceContext>
+              ]) => {
                 const throttled = alertInstance.isThrottled(throttle);
                 const muted = mutedInstanceIdsSet.has(alertInstanceName);
                 const shouldExecuteAction = !throttled && !muted;
@@ -299,8 +323,9 @@ export class TaskRunner {
             );
 
       await Promise.all(
-        instancesToExecute.map(([id, alertInstance]: [string, AlertInstance]) =>
-          this.executeAlertInstance(id, alertInstance, executionHandler)
+        instancesToExecute.map(
+          ([id, alertInstance]: [string, AlertInstance<InstanceState, InstanceContext>]) =>
+            this.executeAlertInstance(id, alertInstance, executionHandler)
         )
       );
     } else {
@@ -309,17 +334,17 @@ export class TaskRunner {
 
     return {
       alertTypeState: updatedAlertTypeState || undefined,
-      alertInstances: mapValues<Record<string, AlertInstance>, RawAlertInstance>(
-        instancesWithScheduledActions,
-        (alertInstance) => alertInstance.toRaw()
-      ),
+      alertInstances: mapValues<
+        Record<string, AlertInstance<InstanceState, InstanceContext>>,
+        RawAlertInstance
+      >(instancesWithScheduledActions, (alertInstance) => alertInstance.toRaw()),
     };
   }
 
   async validateAndExecuteAlert(
     services: Services,
     apiKey: RawAlert['apiKey'],
-    alert: SanitizedAlert,
+    alert: SanitizedAlert<Params>,
     event: Event
   ) {
     const {
@@ -327,7 +352,7 @@ export class TaskRunner {
     } = this.taskInstance;
 
     // Validate
-    const validatedParams = validateAlertTypeParams(this.alertType, alert.params);
+    const validatedParams = validateAlertTypeParams(alert.params, this.alertType.validate?.params);
     const executionHandler = this.getExecutionHandler(
       alertId,
       alert.name,
@@ -359,7 +384,7 @@ export class TaskRunner {
     }
     const [services, alertsClient] = this.getServicesWithSpaceLevelPermissions(spaceId, apiKey);
 
-    let alert: SanitizedAlert;
+    let alert: SanitizedAlert<Params>;
 
     // Ensure API key is still valid and user has access
     try {
@@ -501,19 +526,23 @@ export class TaskRunner {
   }
 }
 
-interface GenerateNewAndRecoveredInstanceEventsParams {
+interface GenerateNewAndRecoveredInstanceEventsParams<
+  InstanceState extends AlertInstanceState,
+  InstanceContext extends AlertInstanceContext
+> {
   eventLogger: IEventLogger;
-  originalAlertInstances: Dictionary<AlertInstance>;
-  currentAlertInstances: Dictionary<AlertInstance>;
-  recoveredAlertInstances: Dictionary<AlertInstance>;
+  originalAlertInstances: Dictionary<AlertInstance<InstanceState, InstanceContext>>;
+  currentAlertInstances: Dictionary<AlertInstance<InstanceState, InstanceContext>>;
+  recoveredAlertInstances: Dictionary<AlertInstance<InstanceState, InstanceContext>>;
   alertId: string;
   alertLabel: string;
   namespace: string | undefined;
 }
 
-function generateNewAndRecoveredInstanceEvents(
-  params: GenerateNewAndRecoveredInstanceEventsParams
-) {
+function generateNewAndRecoveredInstanceEvents<
+  InstanceState extends AlertInstanceState,
+  InstanceContext extends AlertInstanceContext
+>(params: GenerateNewAndRecoveredInstanceEventsParams<InstanceState, InstanceContext>) {
   const {
     eventLogger,
     alertId,
@@ -584,16 +613,22 @@ function generateNewAndRecoveredInstanceEvents(
   }
 }
 
-interface ScheduleActionsForRecoveredInstancesParams {
+interface ScheduleActionsForRecoveredInstancesParams<
+  InstanceState extends AlertInstanceState,
+  InstanceContext extends AlertInstanceContext
+> {
   logger: Logger;
   recoveryActionGroup: ActionGroup;
-  recoveredAlertInstances: Dictionary<AlertInstance>;
+  recoveredAlertInstances: Dictionary<AlertInstance<InstanceState, InstanceContext>>;
   executionHandler: ReturnType<typeof createExecutionHandler>;
   mutedInstanceIdsSet: Set<string>;
   alertLabel: string;
 }
 
-function scheduleActionsForRecoveredInstances(params: ScheduleActionsForRecoveredInstancesParams) {
+function scheduleActionsForRecoveredInstances<
+  InstanceState extends AlertInstanceState,
+  InstanceContext extends AlertInstanceContext
+>(params: ScheduleActionsForRecoveredInstancesParams<InstanceState, InstanceContext>) {
   const {
     logger,
     recoveryActionGroup,
@@ -623,14 +658,20 @@ function scheduleActionsForRecoveredInstances(params: ScheduleActionsForRecovere
   }
 }
 
-interface LogActiveAndRecoveredInstancesParams {
+interface LogActiveAndRecoveredInstancesParams<
+  InstanceState extends AlertInstanceState,
+  InstanceContext extends AlertInstanceContext
+> {
   logger: Logger;
-  activeAlertInstances: Dictionary<AlertInstance>;
-  recoveredAlertInstances: Dictionary<AlertInstance>;
+  activeAlertInstances: Dictionary<AlertInstance<InstanceState, InstanceContext>>;
+  recoveredAlertInstances: Dictionary<AlertInstance<InstanceState, InstanceContext>>;
   alertLabel: string;
 }
 
-function logActiveAndRecoveredInstances(params: LogActiveAndRecoveredInstancesParams) {
+function logActiveAndRecoveredInstances<
+  InstanceState extends AlertInstanceState,
+  InstanceContext extends AlertInstanceContext
+>(params: LogActiveAndRecoveredInstancesParams<InstanceState, InstanceContext>) {
   const { logger, activeAlertInstances, recoveredAlertInstances, alertLabel } = params;
   const activeInstanceIds = Object.keys(activeAlertInstances);
   const recoveredInstanceIds = Object.keys(recoveredAlertInstances);
diff --git a/x-pack/plugins/alerts/server/task_runner/task_runner_factory.test.ts b/x-pack/plugins/alerts/server/task_runner/task_runner_factory.test.ts
index 6c58b64fffa92c..3a5a130f582ed9 100644
--- a/x-pack/plugins/alerts/server/task_runner/task_runner_factory.test.ts
+++ b/x-pack/plugins/alerts/server/task_runner/task_runner_factory.test.ts
@@ -16,10 +16,10 @@ import {
 import { actionsMock } from '../../../actions/server/mocks';
 import { alertsMock, alertsClientMock } from '../mocks';
 import { eventLoggerMock } from '../../../event_log/server/event_logger.mock';
-import { NormalizedAlertType } from '../alert_type_registry';
+import { UntypedNormalizedAlertType } from '../alert_type_registry';
 import { alertTypeRegistryMock } from '../alert_type_registry.mock';
 
-const alertType: NormalizedAlertType = {
+const alertType: UntypedNormalizedAlertType = {
   id: 'test',
   name: 'My test alert',
   actionGroups: [{ id: 'default', name: 'Default' }],
diff --git a/x-pack/plugins/alerts/server/task_runner/task_runner_factory.ts b/x-pack/plugins/alerts/server/task_runner/task_runner_factory.ts
index 1fe94972bd4b07..e266608d80880e 100644
--- a/x-pack/plugins/alerts/server/task_runner/task_runner_factory.ts
+++ b/x-pack/plugins/alerts/server/task_runner/task_runner_factory.ts
@@ -17,7 +17,7 @@ import { AlertTypeRegistry, GetServicesFunction, SpaceIdToNamespaceFunction } fr
 import { TaskRunner } from './task_runner';
 import { IEventLogger } from '../../../event_log/server';
 import { AlertsClient } from '../alerts_client';
-import { NormalizedAlertType } from '../alert_type_registry';
+import { UntypedNormalizedAlertType } from '../alert_type_registry';
 
 export interface TaskRunnerContext {
   logger: Logger;
@@ -44,7 +44,7 @@ export class TaskRunnerFactory {
     this.taskRunnerContext = taskRunnerContext;
   }
 
-  public create(alertType: NormalizedAlertType, { taskInstance }: RunContext) {
+  public create(alertType: UntypedNormalizedAlertType, { taskInstance }: RunContext) {
     if (!this.isInitialized) {
       throw new Error('TaskRunnerFactory not initialized');
     }
diff --git a/x-pack/plugins/alerts/server/types.ts b/x-pack/plugins/alerts/server/types.ts
index 8704068c3e51a1..027f875e2d08db 100644
--- a/x-pack/plugins/alerts/server/types.ts
+++ b/x-pack/plugins/alerts/server/types.ts
@@ -61,10 +61,10 @@ export interface AlertServices<
 }
 
 export interface AlertExecutorOptions<
-  Params extends AlertTypeParams = AlertTypeParams,
-  State extends AlertTypeState = AlertTypeState,
-  InstanceState extends AlertInstanceState = AlertInstanceState,
-  InstanceContext extends AlertInstanceContext = AlertInstanceContext
+  Params extends AlertTypeParams = never,
+  State extends AlertTypeState = never,
+  InstanceState extends AlertInstanceState = never,
+  InstanceContext extends AlertInstanceContext = never
 > {
   alertId: string;
   startedAt: Date;
@@ -85,26 +85,28 @@ export interface ActionVariable {
   description: string;
 }
 
-// signature of the alert type executor function
 export type ExecutorType<
-  Params,
-  State,
-  InstanceState extends AlertInstanceState = AlertInstanceState,
-  InstanceContext extends AlertInstanceContext = AlertInstanceContext
+  Params extends AlertTypeParams = never,
+  State extends AlertTypeState = never,
+  InstanceState extends AlertInstanceState = never,
+  InstanceContext extends AlertInstanceContext = never
 > = (
   options: AlertExecutorOptions<Params, State, InstanceState, InstanceContext>
 ) => Promise<State | void>;
 
+export interface AlertTypeParamsValidator<Params extends AlertTypeParams> {
+  validate: (object: unknown) => Params;
+}
 export interface AlertType<
-  Params extends AlertTypeParams = AlertTypeParams,
-  State extends AlertTypeState = AlertTypeState,
-  InstanceState extends AlertInstanceState = AlertInstanceState,
-  InstanceContext extends AlertInstanceContext = AlertInstanceContext
+  Params extends AlertTypeParams = never,
+  State extends AlertTypeState = never,
+  InstanceState extends AlertInstanceState = never,
+  InstanceContext extends AlertInstanceContext = never
 > {
   id: string;
   name: string;
   validate?: {
-    params?: { validate: (object: unknown) => Params };
+    params?: AlertTypeParamsValidator<Params>;
   };
   actionGroups: ActionGroup[];
   defaultActionGroupId: ActionGroup['id'];
@@ -119,6 +121,13 @@ export interface AlertType<
   minimumLicenseRequired: LicenseType;
 }
 
+export type UntypedAlertType = AlertType<
+  AlertTypeParams,
+  AlertTypeState,
+  AlertInstanceState,
+  AlertInstanceContext
+>;
+
 export interface RawAlertAction extends SavedObjectAttributes {
   group: string;
   actionRef: string;
@@ -142,7 +151,8 @@ export interface RawAlertExecutionStatus extends SavedObjectAttributes {
   };
 }
 
-export type PartialAlert = Pick<Alert, 'id'> & Partial<Omit<Alert, 'id'>>;
+export type PartialAlert<Params extends AlertTypeParams = never> = Pick<Alert<Params>, 'id'> &
+  Partial<Omit<Alert<Params>, 'id'>>;
 
 export interface RawAlert extends SavedObjectAttributes {
   enabled: boolean;
diff --git a/x-pack/plugins/infra/public/alerting/inventory/index.ts b/x-pack/plugins/infra/public/alerting/inventory/index.ts
index 13ce43f77c8b03..da85f363b16ec1 100644
--- a/x-pack/plugins/infra/public/alerting/inventory/index.ts
+++ b/x-pack/plugins/infra/public/alerting/inventory/index.ts
@@ -5,13 +5,21 @@
  */
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { METRIC_INVENTORY_THRESHOLD_ALERT_TYPE_ID } from '../../../server/lib/alerting/inventory_metric_threshold/types';
+import {
+  InventoryMetricConditions,
+  METRIC_INVENTORY_THRESHOLD_ALERT_TYPE_ID,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../../server/lib/alerting/inventory_metric_threshold/types';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { AlertTypeModel } from '../../../../triggers_actions_ui/public/types';
+import { AlertTypeParams } from '../../../../alerts/common';
 import { validateMetricThreshold } from './components/validation';
 
-export function createInventoryMetricAlertType(): AlertTypeModel {
+interface InventoryMetricAlertTypeParams extends AlertTypeParams {
+  criteria: InventoryMetricConditions[];
+}
+
+export function createInventoryMetricAlertType(): AlertTypeModel<InventoryMetricAlertTypeParams> {
   return {
     id: METRIC_INVENTORY_THRESHOLD_ALERT_TYPE_ID,
     description: i18n.translate('xpack.infra.metrics.inventory.alertFlyout.alertDescription', {
diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/index.ts b/x-pack/plugins/infra/public/alerting/metric_threshold/index.ts
index cccd5fbc439d7a..9c32c473f45978 100644
--- a/x-pack/plugins/infra/public/alerting/metric_threshold/index.ts
+++ b/x-pack/plugins/infra/public/alerting/metric_threshold/index.ts
@@ -8,10 +8,18 @@ import React from 'react';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { AlertTypeModel } from '../../../../triggers_actions_ui/public/types';
 import { validateMetricThreshold } from './components/validation';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { METRIC_THRESHOLD_ALERT_TYPE_ID } from '../../../server/lib/alerting/metric_threshold/types';
+import { AlertTypeParams } from '../../../../alerts/common';
+import {
+  MetricExpressionParams,
+  METRIC_THRESHOLD_ALERT_TYPE_ID,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../../server/lib/alerting/metric_threshold/types';
+
+interface MetricThresholdAlertTypeParams extends AlertTypeParams {
+  criteria: MetricExpressionParams[];
+}
 
-export function createMetricThresholdAlertType(): AlertTypeModel {
+export function createMetricThresholdAlertType(): AlertTypeModel<MetricThresholdAlertTypeParams> {
   return {
     id: METRIC_THRESHOLD_ALERT_TYPE_ID,
     description: i18n.translate('xpack.infra.metrics.alertFlyout.alertDescription', {
diff --git a/x-pack/plugins/infra/server/lib/alerting/inventory_metric_threshold/inventory_metric_threshold_executor.ts b/x-pack/plugins/infra/server/lib/alerting/inventory_metric_threshold/inventory_metric_threshold_executor.ts
index 1941ec6326ddb6..54cf8658a3f0d6 100644
--- a/x-pack/plugins/infra/server/lib/alerting/inventory_metric_threshold/inventory_metric_threshold_executor.ts
+++ b/x-pack/plugins/infra/server/lib/alerting/inventory_metric_threshold/inventory_metric_threshold_executor.ts
@@ -9,7 +9,11 @@ import moment from 'moment';
 import { getCustomMetricLabel } from '../../../../common/formatters/get_custom_metric_label';
 import { toMetricOpt } from '../../../../common/snapshot_metric_i18n';
 import { AlertStates, InventoryMetricConditions } from './types';
-import { RecoveredActionGroup } from '../../../../../alerts/common';
+import {
+  AlertInstanceContext,
+  AlertInstanceState,
+  RecoveredActionGroup,
+} from '../../../../../alerts/common';
 import { AlertExecutorOptions } from '../../../../../alerts/server';
 import { InventoryItemType, SnapshotMetricType } from '../../../../common/inventory_models/types';
 import { InfraBackendLibs } from '../../infra_types';
@@ -35,7 +39,15 @@ interface InventoryMetricThresholdParams {
 export const createInventoryMetricThresholdExecutor = (libs: InfraBackendLibs) => async ({
   services,
   params,
-}: AlertExecutorOptions) => {
+}: AlertExecutorOptions<
+  /**
+   * TODO: Remove this use of `any` by utilizing a proper type
+   */
+  Record<string, any>,
+  Record<string, any>,
+  AlertInstanceState,
+  AlertInstanceContext
+>) => {
   const {
     criteria,
     filterQuery,
diff --git a/x-pack/plugins/infra/server/lib/alerting/inventory_metric_threshold/register_inventory_metric_threshold_alert_type.ts b/x-pack/plugins/infra/server/lib/alerting/inventory_metric_threshold/register_inventory_metric_threshold_alert_type.ts
index 2d1df6e8cb4627..a2e8eff34ef982 100644
--- a/x-pack/plugins/infra/server/lib/alerting/inventory_metric_threshold/register_inventory_metric_threshold_alert_type.ts
+++ b/x-pack/plugins/infra/server/lib/alerting/inventory_metric_threshold/register_inventory_metric_threshold_alert_type.ts
@@ -5,7 +5,7 @@
  */
 import { schema } from '@kbn/config-schema';
 import { i18n } from '@kbn/i18n';
-import { AlertType } from '../../../../../alerts/server';
+import { AlertType, AlertInstanceState, AlertInstanceContext } from '../../../../../alerts/server';
 import {
   createInventoryMetricThresholdExecutor,
   FIRED_ACTIONS,
@@ -40,7 +40,17 @@ const condition = schema.object({
   ),
 });
 
-export const registerMetricInventoryThresholdAlertType = (libs: InfraBackendLibs): AlertType => ({
+export const registerMetricInventoryThresholdAlertType = (
+  libs: InfraBackendLibs
+): AlertType<
+  /**
+   * TODO: Remove this use of `any` by utilizing a proper type
+   */
+  Record<string, any>,
+  Record<string, any>,
+  AlertInstanceState,
+  AlertInstanceContext
+> => ({
   id: METRIC_INVENTORY_THRESHOLD_ALERT_TYPE_ID,
   name: i18n.translate('xpack.infra.metrics.inventory.alertName', {
     defaultMessage: 'Inventory',
diff --git a/x-pack/plugins/infra/server/lib/alerting/log_threshold/log_threshold_executor.ts b/x-pack/plugins/infra/server/lib/alerting/log_threshold/log_threshold_executor.ts
index d3d34cd2aad589..dccab5168fb60a 100644
--- a/x-pack/plugins/infra/server/lib/alerting/log_threshold/log_threshold_executor.ts
+++ b/x-pack/plugins/infra/server/lib/alerting/log_threshold/log_threshold_executor.ts
@@ -9,7 +9,10 @@ import {
   AlertExecutorOptions,
   AlertServices,
   AlertInstance,
+  AlertTypeParams,
+  AlertTypeState,
   AlertInstanceContext,
+  AlertInstanceState,
 } from '../../../../../alerts/server';
 import {
   AlertStates,
@@ -34,6 +37,14 @@ import { getIntervalInSeconds } from '../../../utils/get_interval_in_seconds';
 import { decodeOrThrow } from '../../../../common/runtime_types';
 import { UNGROUPED_FACTORY_KEY } from '../common/utils';
 
+type LogThresholdAlertServices = AlertServices<AlertInstanceState, AlertInstanceContext>;
+type LogThresholdAlertExecutorOptions = AlertExecutorOptions<
+  AlertTypeParams,
+  AlertTypeState,
+  AlertInstanceState,
+  AlertInstanceContext
+>;
+
 const COMPOSITE_GROUP_SIZE = 40;
 
 const checkValueAgainstComparatorMap: {
@@ -46,7 +57,7 @@ const checkValueAgainstComparatorMap: {
 };
 
 export const createLogThresholdExecutor = (libs: InfraBackendLibs) =>
-  async function ({ services, params }: AlertExecutorOptions) {
+  async function ({ services, params }: LogThresholdAlertExecutorOptions) {
     const { alertInstanceFactory, savedObjectsClient, callCluster } = services;
     const { sources } = libs;
 
@@ -88,8 +99,8 @@ async function executeAlert(
   alertParams: CountAlertParams,
   timestampField: string,
   indexPattern: string,
-  callCluster: AlertServices['callCluster'],
-  alertInstanceFactory: AlertServices['alertInstanceFactory']
+  callCluster: LogThresholdAlertServices['callCluster'],
+  alertInstanceFactory: LogThresholdAlertServices['alertInstanceFactory']
 ) {
   const query = getESQuery(alertParams, timestampField, indexPattern);
 
@@ -118,8 +129,8 @@ async function executeRatioAlert(
   alertParams: RatioAlertParams,
   timestampField: string,
   indexPattern: string,
-  callCluster: AlertServices['callCluster'],
-  alertInstanceFactory: AlertServices['alertInstanceFactory']
+  callCluster: LogThresholdAlertServices['callCluster'],
+  alertInstanceFactory: LogThresholdAlertServices['alertInstanceFactory']
 ) {
   // Ratio alert params are separated out into two standard sets of alert params
   const numeratorParams: AlertParams = {
@@ -175,7 +186,7 @@ const getESQuery = (
 export const processUngroupedResults = (
   results: UngroupedSearchQueryResponse,
   params: CountAlertParams,
-  alertInstanceFactory: AlertExecutorOptions['services']['alertInstanceFactory'],
+  alertInstanceFactory: LogThresholdAlertExecutorOptions['services']['alertInstanceFactory'],
   alertInstaceUpdater: AlertInstanceUpdater
 ) => {
   const { count, criteria } = params;
@@ -204,7 +215,7 @@ export const processUngroupedRatioResults = (
   numeratorResults: UngroupedSearchQueryResponse,
   denominatorResults: UngroupedSearchQueryResponse,
   params: RatioAlertParams,
-  alertInstanceFactory: AlertExecutorOptions['services']['alertInstanceFactory'],
+  alertInstanceFactory: LogThresholdAlertExecutorOptions['services']['alertInstanceFactory'],
   alertInstaceUpdater: AlertInstanceUpdater
 ) => {
   const { count, criteria } = params;
@@ -259,7 +270,7 @@ const getReducedGroupByResults = (
 export const processGroupByResults = (
   results: GroupedSearchQueryResponse['aggregations']['groups']['buckets'],
   params: CountAlertParams,
-  alertInstanceFactory: AlertExecutorOptions['services']['alertInstanceFactory'],
+  alertInstanceFactory: LogThresholdAlertExecutorOptions['services']['alertInstanceFactory'],
   alertInstaceUpdater: AlertInstanceUpdater
 ) => {
   const { count, criteria } = params;
@@ -292,7 +303,7 @@ export const processGroupByRatioResults = (
   numeratorResults: GroupedSearchQueryResponse['aggregations']['groups']['buckets'],
   denominatorResults: GroupedSearchQueryResponse['aggregations']['groups']['buckets'],
   params: RatioAlertParams,
-  alertInstanceFactory: AlertExecutorOptions['services']['alertInstanceFactory'],
+  alertInstanceFactory: LogThresholdAlertExecutorOptions['services']['alertInstanceFactory'],
   alertInstaceUpdater: AlertInstanceUpdater
 ) => {
   const { count, criteria } = params;
@@ -599,11 +610,17 @@ const getQueryMappingForComparator = (comparator: Comparator) => {
   return queryMappings[comparator];
 };
 
-const getUngroupedResults = async (query: object, callCluster: AlertServices['callCluster']) => {
+const getUngroupedResults = async (
+  query: object,
+  callCluster: LogThresholdAlertServices['callCluster']
+) => {
   return decodeOrThrow(UngroupedSearchQueryResponseRT)(await callCluster('search', query));
 };
 
-const getGroupedResults = async (query: object, callCluster: AlertServices['callCluster']) => {
+const getGroupedResults = async (
+  query: object,
+  callCluster: LogThresholdAlertServices['callCluster']
+) => {
   let compositeGroupBuckets: GroupedSearchQueryResponse['aggregations']['groups']['buckets'] = [];
   let lastAfterKey: GroupedSearchQueryResponse['aggregations']['groups']['after_key'] | undefined;
 
diff --git a/x-pack/plugins/infra/server/lib/alerting/metric_threshold/lib/evaluate_alert.ts b/x-pack/plugins/infra/server/lib/alerting/metric_threshold/lib/evaluate_alert.ts
index 49f82c7ccec0b8..d51d9435fc9043 100644
--- a/x-pack/plugins/infra/server/lib/alerting/metric_threshold/lib/evaluate_alert.ts
+++ b/x-pack/plugins/infra/server/lib/alerting/metric_threshold/lib/evaluate_alert.ts
@@ -12,7 +12,7 @@ import {
 import { InfraSource } from '../../../../../common/http_api/source_api';
 import { InfraDatabaseSearchResponse } from '../../../adapters/framework/adapter_types';
 import { createAfterKeyHandler } from '../../../../utils/create_afterkey_handler';
-import { AlertServices, AlertExecutorOptions } from '../../../../../../alerts/server';
+import { AlertServices } from '../../../../../../alerts/server';
 import { getAllCompositeData } from '../../../../utils/get_all_composite_data';
 import { DOCUMENT_COUNT_I18N } from '../../common/messages';
 import { UNGROUPED_FACTORY_KEY } from '../../common/utils';
@@ -35,17 +35,19 @@ interface CompositeAggregationsResponse {
   };
 }
 
-export const evaluateAlert = (
+export interface EvaluatedAlertParams {
+  criteria: MetricExpressionParams[];
+  groupBy: string | undefined | string[];
+  filterQuery: string | undefined;
+}
+
+export const evaluateAlert = <Params extends EvaluatedAlertParams = EvaluatedAlertParams>(
   callCluster: AlertServices['callCluster'],
-  params: AlertExecutorOptions['params'],
+  params: Params,
   config: InfraSource['configuration'],
   timeframe?: { start: number; end: number }
 ) => {
-  const { criteria, groupBy, filterQuery } = params as {
-    criteria: MetricExpressionParams[];
-    groupBy: string | undefined | string[];
-    filterQuery: string | undefined;
-  };
+  const { criteria, groupBy, filterQuery } = params;
   return Promise.all(
     criteria.map(async (criterion) => {
       const currentValues = await getMetric(
diff --git a/x-pack/plugins/infra/server/lib/alerting/metric_threshold/metric_threshold_executor.test.ts b/x-pack/plugins/infra/server/lib/alerting/metric_threshold/metric_threshold_executor.test.ts
index a1d6428f3b52be..6c9fac9d1133c1 100644
--- a/x-pack/plugins/infra/server/lib/alerting/metric_threshold/metric_threshold_executor.test.ts
+++ b/x-pack/plugins/infra/server/lib/alerting/metric_threshold/metric_threshold_executor.test.ts
@@ -7,13 +7,13 @@ import { createMetricThresholdExecutor, FIRED_ACTIONS } from './metric_threshold
 import { Comparator, AlertStates } from './types';
 import * as mocks from './test_mocks';
 import { RecoveredActionGroup } from '../../../../../alerts/common';
-import { AlertExecutorOptions } from '../../../../../alerts/server';
 import {
   alertsMock,
   AlertServicesMock,
   AlertInstanceMock,
 } from '../../../../../alerts/server/mocks';
 import { InfraSources } from '../../sources';
+import { MetricThresholdAlertExecutorOptions } from './register_metric_threshold_alert_type';
 
 interface AlertTestInstance {
   instance: AlertInstanceMock;
@@ -23,11 +23,23 @@ interface AlertTestInstance {
 
 let persistAlertInstances = false;
 
+const mockOptions = {
+  alertId: '',
+  startedAt: new Date(),
+  previousStartedAt: null,
+  state: {},
+  spaceId: '',
+  name: '',
+  tags: [],
+  createdBy: null,
+  updatedBy: null,
+};
+
 describe('The metric threshold alert type', () => {
   describe('querying the entire infrastructure', () => {
     const instanceID = '*';
     const execute = (comparator: Comparator, threshold: number[], sourceId: string = 'default') =>
-      executor({
+      executor(({
         services,
         params: {
           sourceId,
@@ -39,7 +51,10 @@ describe('The metric threshold alert type', () => {
             },
           ],
         },
-      });
+        /**
+         * TODO: Remove this use of `as` by utilizing a proper type
+         */
+      } as unknown) as MetricThresholdAlertExecutorOptions);
     test('alerts as expected with the > comparator', async () => {
       await execute(Comparator.GT, [0.75]);
       expect(mostRecentAction(instanceID).id).toBe(FIRED_ACTIONS.id);
@@ -109,6 +124,7 @@ describe('The metric threshold alert type', () => {
   describe('querying with a groupBy parameter', () => {
     const execute = (comparator: Comparator, threshold: number[]) =>
       executor({
+        ...mockOptions,
         services,
         params: {
           groupBy: 'something',
@@ -159,6 +175,7 @@ describe('The metric threshold alert type', () => {
       groupBy: string = ''
     ) =>
       executor({
+        ...mockOptions,
         services,
         params: {
           groupBy,
@@ -216,6 +233,7 @@ describe('The metric threshold alert type', () => {
     const instanceID = '*';
     const execute = (comparator: Comparator, threshold: number[]) =>
       executor({
+        ...mockOptions,
         services,
         params: {
           criteria: [
@@ -242,6 +260,7 @@ describe('The metric threshold alert type', () => {
     const instanceID = '*';
     const execute = (comparator: Comparator, threshold: number[]) =>
       executor({
+        ...mockOptions,
         services,
         params: {
           criteria: [
@@ -268,6 +287,7 @@ describe('The metric threshold alert type', () => {
     const instanceID = '*';
     const execute = (comparator: Comparator, threshold: number[]) =>
       executor({
+        ...mockOptions,
         services,
         params: {
           criteria: [
@@ -294,6 +314,7 @@ describe('The metric threshold alert type', () => {
     const instanceID = '*';
     const execute = (alertOnNoData: boolean) =>
       executor({
+        ...mockOptions,
         services,
         params: {
           criteria: [
@@ -323,6 +344,7 @@ describe('The metric threshold alert type', () => {
     const instanceID = '*';
     const execute = () =>
       executor({
+        ...mockOptions,
         services,
         params: {
           criteria: [
@@ -348,6 +370,7 @@ describe('The metric threshold alert type', () => {
     const instanceID = '*';
     const execute = (threshold: number[]) =>
       executor({
+        ...mockOptions,
         services,
         params: {
           criteria: [
@@ -392,6 +415,7 @@ describe('The metric threshold alert type', () => {
     const instanceID = '*';
     const execute = () =>
       executor({
+        ...mockOptions,
         services,
         params: {
           sourceId: 'default',
@@ -435,10 +459,7 @@ const mockLibs: any = {
   configuration: createMockStaticConfiguration({}),
 };
 
-const executor = createMetricThresholdExecutor(mockLibs) as (opts: {
-  params: AlertExecutorOptions['params'];
-  services: { callCluster: AlertExecutorOptions['params']['callCluster'] };
-}) => Promise<void>;
+const executor = createMetricThresholdExecutor(mockLibs);
 
 const services: AlertServicesMock = alertsMock.createAlertServices();
 services.callCluster.mockImplementation(async (_: string, { body, index }: any) => {
diff --git a/x-pack/plugins/infra/server/lib/alerting/metric_threshold/metric_threshold_executor.ts b/x-pack/plugins/infra/server/lib/alerting/metric_threshold/metric_threshold_executor.ts
index 60790648d9a9b9..d63b42cd3b146a 100644
--- a/x-pack/plugins/infra/server/lib/alerting/metric_threshold/metric_threshold_executor.ts
+++ b/x-pack/plugins/infra/server/lib/alerting/metric_threshold/metric_threshold_executor.ts
@@ -7,7 +7,6 @@ import { first, last } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import moment from 'moment';
 import { RecoveredActionGroup } from '../../../../../alerts/common';
-import { AlertExecutorOptions } from '../../../../../alerts/server';
 import { InfraBackendLibs } from '../../infra_types';
 import {
   buildErrorAlertReason,
@@ -18,10 +17,16 @@ import {
 } from '../common/messages';
 import { createFormatter } from '../../../../common/formatters';
 import { AlertStates } from './types';
-import { evaluateAlert } from './lib/evaluate_alert';
+import { evaluateAlert, EvaluatedAlertParams } from './lib/evaluate_alert';
+import {
+  MetricThresholdAlertExecutorOptions,
+  MetricThresholdAlertType,
+} from './register_metric_threshold_alert_type';
 
-export const createMetricThresholdExecutor = (libs: InfraBackendLibs) =>
-  async function (options: AlertExecutorOptions) {
+export const createMetricThresholdExecutor = (
+  libs: InfraBackendLibs
+): MetricThresholdAlertType['executor'] =>
+  async function (options: MetricThresholdAlertExecutorOptions) {
     const { services, params } = options;
     const { criteria } = params;
     if (criteria.length === 0) throw new Error('Cannot execute an alert with 0 conditions');
@@ -36,7 +41,11 @@ export const createMetricThresholdExecutor = (libs: InfraBackendLibs) =>
       sourceId || 'default'
     );
     const config = source.configuration;
-    const alertResults = await evaluateAlert(services.callCluster, params, config);
+    const alertResults = await evaluateAlert(
+      services.callCluster,
+      params as EvaluatedAlertParams,
+      config
+    );
 
     // Because each alert result has the same group definitions, just grab the groups from the first one.
     const groups = Object.keys(first(alertResults)!);
diff --git a/x-pack/plugins/infra/server/lib/alerting/metric_threshold/register_metric_threshold_alert_type.ts b/x-pack/plugins/infra/server/lib/alerting/metric_threshold/register_metric_threshold_alert_type.ts
index f04a1015bcbcde..000c89f5899ef0 100644
--- a/x-pack/plugins/infra/server/lib/alerting/metric_threshold/register_metric_threshold_alert_type.ts
+++ b/x-pack/plugins/infra/server/lib/alerting/metric_threshold/register_metric_threshold_alert_type.ts
@@ -5,7 +5,12 @@
  */
 import { schema } from '@kbn/config-schema';
 import { i18n } from '@kbn/i18n';
-import { AlertType } from '../../../../../alerts/server';
+import {
+  AlertType,
+  AlertInstanceState,
+  AlertInstanceContext,
+  AlertExecutorOptions,
+} from '../../../../../alerts/server';
 import { METRIC_EXPLORER_AGGREGATIONS } from '../../../../common/http_api/metrics_explorer';
 import { createMetricThresholdExecutor, FIRED_ACTIONS } from './metric_threshold_executor';
 import { METRIC_THRESHOLD_ALERT_TYPE_ID, Comparator } from './types';
@@ -21,7 +26,26 @@ import {
   thresholdActionVariableDescription,
 } from '../common/messages';
 
-export function registerMetricThresholdAlertType(libs: InfraBackendLibs): AlertType {
+export type MetricThresholdAlertType = AlertType<
+  /**
+   * TODO: Remove this use of `any` by utilizing a proper type
+   */
+  Record<string, any>,
+  Record<string, any>,
+  AlertInstanceState,
+  AlertInstanceContext
+>;
+export type MetricThresholdAlertExecutorOptions = AlertExecutorOptions<
+  /**
+   * TODO: Remove this use of `any` by utilizing a proper type
+   */
+  Record<string, any>,
+  Record<string, any>,
+  AlertInstanceState,
+  AlertInstanceContext
+>;
+
+export function registerMetricThresholdAlertType(libs: InfraBackendLibs): MetricThresholdAlertType {
   const baseCriterion = {
     threshold: schema.arrayOf(schema.number()),
     comparator: oneOfLiterals(Object.values(Comparator)),
diff --git a/x-pack/plugins/monitoring/common/types/alerts.ts b/x-pack/plugins/monitoring/common/types/alerts.ts
index 93807f9df12b08..df6e169f37f7a2 100644
--- a/x-pack/plugins/monitoring/common/types/alerts.ts
+++ b/x-pack/plugins/monitoring/common/types/alerts.ts
@@ -4,14 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Alert, SanitizedAlert } from '../../../alerts/common';
+import { Alert, AlertTypeParams, SanitizedAlert } from '../../../alerts/common';
 import { AlertParamType, AlertMessageTokenType, AlertSeverity } from '../enums';
 
-export type CommonAlert = Alert | SanitizedAlert;
+export type CommonAlert = Alert<AlertTypeParams> | SanitizedAlert<AlertTypeParams>;
 
 export interface CommonAlertStatus {
   states: CommonAlertState[];
-  rawAlert: Alert | SanitizedAlert;
+  rawAlert: Alert<AlertTypeParams> | SanitizedAlert<AlertTypeParams>;
 }
 
 export interface CommonAlertState {
diff --git a/x-pack/plugins/monitoring/public/alerts/ccr_read_exceptions_alert/index.tsx b/x-pack/plugins/monitoring/public/alerts/ccr_read_exceptions_alert/index.tsx
index 4d22d422ecda6f..6d7751d91b7619 100644
--- a/x-pack/plugins/monitoring/public/alerts/ccr_read_exceptions_alert/index.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/ccr_read_exceptions_alert/index.tsx
@@ -9,8 +9,9 @@ import { i18n } from '@kbn/i18n';
 import { Expression, Props } from '../components/duration/expression';
 import { AlertTypeModel, ValidationResult } from '../../../../triggers_actions_ui/public';
 import { ALERT_CCR_READ_EXCEPTIONS, ALERT_DETAILS } from '../../../common/constants';
+import { AlertTypeParams } from '../../../../alerts/common';
 
-interface ValidateOptions {
+interface ValidateOptions extends AlertTypeParams {
   duration: string;
 }
 
@@ -30,7 +31,7 @@ const validate = (inputValues: ValidateOptions): ValidationResult => {
   return validationResult;
 };
 
-export function createCCRReadExceptionsAlertType(): AlertTypeModel {
+export function createCCRReadExceptionsAlertType(): AlertTypeModel<ValidateOptions> {
   return {
     id: ALERT_CCR_READ_EXCEPTIONS,
     description: ALERT_DETAILS[ALERT_CCR_READ_EXCEPTIONS].description,
diff --git a/x-pack/plugins/monitoring/public/alerts/components/duration/validation.tsx b/x-pack/plugins/monitoring/public/alerts/components/duration/validation.tsx
index 892ee0926ca385..c4e5ff343da176 100644
--- a/x-pack/plugins/monitoring/public/alerts/components/duration/validation.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/components/duration/validation.tsx
@@ -5,9 +5,11 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { AlertTypeParams } from '../../../../../alerts/common';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ValidationResult } from '../../../../../triggers_actions_ui/public/types';
 
+export type MonitoringAlertTypeParams = ValidateOptions & AlertTypeParams;
 interface ValidateOptions {
   duration: string;
   threshold: number;
diff --git a/x-pack/plugins/monitoring/public/alerts/cpu_usage_alert/cpu_usage_alert.tsx b/x-pack/plugins/monitoring/public/alerts/cpu_usage_alert/cpu_usage_alert.tsx
index 1fe40fc8777f4b..d2cec006b1b1d5 100644
--- a/x-pack/plugins/monitoring/public/alerts/cpu_usage_alert/cpu_usage_alert.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/cpu_usage_alert/cpu_usage_alert.tsx
@@ -7,10 +7,10 @@ import React from 'react';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { AlertTypeModel } from '../../../../triggers_actions_ui/public/types';
 import { ALERT_CPU_USAGE, ALERT_DETAILS } from '../../../common/constants';
-import { validate } from '../components/duration/validation';
+import { validate, MonitoringAlertTypeParams } from '../components/duration/validation';
 import { Expression, Props } from '../components/duration/expression';
 
-export function createCpuUsageAlertType(): AlertTypeModel {
+export function createCpuUsageAlertType(): AlertTypeModel<MonitoringAlertTypeParams> {
   return {
     id: ALERT_CPU_USAGE,
     description: ALERT_DETAILS[ALERT_CPU_USAGE].description,
diff --git a/x-pack/plugins/monitoring/public/alerts/disk_usage_alert/index.tsx b/x-pack/plugins/monitoring/public/alerts/disk_usage_alert/index.tsx
index 5579b8e1275a39..bea399ee89f6a3 100644
--- a/x-pack/plugins/monitoring/public/alerts/disk_usage_alert/index.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/disk_usage_alert/index.tsx
@@ -5,14 +5,14 @@
  */
 
 import React from 'react';
-import { validate } from '../components/duration/validation';
+import { validate, MonitoringAlertTypeParams } from '../components/duration/validation';
 import { Expression, Props } from '../components/duration/expression';
 
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { AlertTypeModel } from '../../../../triggers_actions_ui/public/types';
 import { ALERT_DISK_USAGE, ALERT_DETAILS } from '../../../common/constants';
 
-export function createDiskUsageAlertType(): AlertTypeModel {
+export function createDiskUsageAlertType(): AlertTypeModel<MonitoringAlertTypeParams> {
   return {
     id: ALERT_DISK_USAGE,
     description: ALERT_DETAILS[ALERT_DISK_USAGE].description,
diff --git a/x-pack/plugins/monitoring/public/alerts/memory_usage_alert/index.tsx b/x-pack/plugins/monitoring/public/alerts/memory_usage_alert/index.tsx
index 0400810a8c3790..0428e4e7c733e4 100644
--- a/x-pack/plugins/monitoring/public/alerts/memory_usage_alert/index.tsx
+++ b/x-pack/plugins/monitoring/public/alerts/memory_usage_alert/index.tsx
@@ -5,14 +5,14 @@
  */
 
 import React from 'react';
-import { validate } from '../components/duration/validation';
+import { validate, MonitoringAlertTypeParams } from '../components/duration/validation';
 import { Expression, Props } from '../components/duration/expression';
 
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { AlertTypeModel } from '../../../../triggers_actions_ui/public/types';
 import { ALERT_MEMORY_USAGE, ALERT_DETAILS } from '../../../common/constants';
 
-export function createMemoryUsageAlertType(): AlertTypeModel {
+export function createMemoryUsageAlertType(): AlertTypeModel<MonitoringAlertTypeParams> {
   return {
     id: ALERT_MEMORY_USAGE,
     description: ALERT_DETAILS[ALERT_MEMORY_USAGE].description,
diff --git a/x-pack/plugins/monitoring/server/alerts/base_alert.ts b/x-pack/plugins/monitoring/server/alerts/base_alert.ts
index a3bcc310b80847..46adfebfd17bfa 100644
--- a/x-pack/plugins/monitoring/server/alerts/base_alert.ts
+++ b/x-pack/plugins/monitoring/server/alerts/base_alert.ts
@@ -13,7 +13,7 @@ import {
   AlertsClient,
   AlertServices,
 } from '../../../alerts/server';
-import { Alert, RawAlertInstance, SanitizedAlert } from '../../../alerts/common';
+import { Alert, AlertTypeParams, RawAlertInstance, SanitizedAlert } from '../../../alerts/common';
 import { ActionsClient } from '../../../actions/server';
 import {
   AlertState,
@@ -135,7 +135,7 @@ export class BaseAlert {
     alertsClient: AlertsClient,
     actionsClient: ActionsClient,
     actions: AlertEnableAction[]
-  ): Promise<Alert> {
+  ): Promise<Alert<AlertTypeParams>> {
     const existingAlertData = await alertsClient.find({
       options: {
         search: this.alertOptions.id,
@@ -170,7 +170,7 @@ export class BaseAlert {
       throttle = '1d',
       interval = '1m',
     } = this.alertOptions;
-    return await alertsClient.create({
+    return await alertsClient.create<AlertTypeParams>({
       data: {
         enabled: true,
         tags: [],
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/create_notifications.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/create_notifications.ts
index 5731a51aeabc19..f0895f13672892 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/create_notifications.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/create_notifications.ts
@@ -6,7 +6,7 @@
 
 import { Alert } from '../../../../../alerts/common';
 import { SERVER_APP_ID, NOTIFICATIONS_ID } from '../../../../common/constants';
-import { CreateNotificationParams } from './types';
+import { CreateNotificationParams, RuleNotificationAlertTypeParams } from './types';
 import { addTags } from './add_tags';
 import { transformRuleToAlertAction } from '../../../../common/detection_engine/transform_actions';
 
@@ -17,8 +17,8 @@ export const createNotifications = async ({
   ruleAlertId,
   interval,
   name,
-}: CreateNotificationParams): Promise<Alert> =>
-  alertsClient.create({
+}: CreateNotificationParams): Promise<Alert<RuleNotificationAlertTypeParams>> =>
+  alertsClient.create<RuleNotificationAlertTypeParams>({
     data: {
       name,
       tags: addTags([], ruleAlertId),
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/find_notifications.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/find_notifications.ts
index 5d3a328dd6fbb9..1bf07a1574be6f 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/find_notifications.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/find_notifications.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { FindResult } from '../../../../../alerts/server';
+import { AlertTypeParams, FindResult } from '../../../../../alerts/server';
 import { NOTIFICATIONS_ID } from '../../../../common/constants';
 import { FindNotificationParams } from './types';
 
@@ -24,7 +24,7 @@ export const findNotifications = async ({
   filter,
   sortField,
   sortOrder,
-}: FindNotificationParams): Promise<FindResult> =>
+}: FindNotificationParams): Promise<FindResult<AlertTypeParams>> =>
   alertsClient.find({
     options: {
       fields,
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/read_notifications.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/read_notifications.ts
index fe9101335b4f54..74df77bf9bf74d 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/read_notifications.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/read_notifications.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { SanitizedAlert } from '../../../../../alerts/common';
+import { AlertTypeParams, SanitizedAlert } from '../../../../../alerts/common';
 import { ReadNotificationParams, isAlertType } from './types';
 import { findNotifications } from './find_notifications';
 import { INTERNAL_RULE_ALERT_ID_KEY } from '../../../../common/constants';
@@ -13,7 +13,7 @@ export const readNotifications = async ({
   alertsClient,
   id,
   ruleAlertId,
-}: ReadNotificationParams): Promise<SanitizedAlert | null> => {
+}: ReadNotificationParams): Promise<SanitizedAlert<AlertTypeParams> | null> => {
   if (id != null) {
     try {
       const notification = await alertsClient.get({ id });
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/types.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/types.ts
index cc9fb149a7e1b3..e4e9df552101b8 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/types.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/types.ts
@@ -8,18 +8,20 @@ import {
   AlertsClient,
   PartialAlert,
   AlertType,
+  AlertTypeParams,
   AlertTypeState,
+  AlertInstanceState,
+  AlertInstanceContext,
   AlertExecutorOptions,
 } from '../../../../../alerts/server';
 import { Alert } from '../../../../../alerts/common';
 import { NOTIFICATIONS_ID } from '../../../../common/constants';
 import { RuleAlertAction } from '../../../../common/detection_engine/types';
 
-export interface RuleNotificationAlertType extends Alert {
-  params: {
-    ruleAlertId: string;
-  };
+export interface RuleNotificationAlertTypeParams extends AlertTypeParams {
+  ruleAlertId: string;
 }
+export type RuleNotificationAlertType = Alert<RuleNotificationAlertTypeParams>;
 
 export interface FindNotificationParams {
   alertsClient: AlertsClient;
@@ -76,32 +78,36 @@ export interface ReadNotificationParams {
 }
 
 export const isAlertTypes = (
-  partialAlert: PartialAlert[]
+  partialAlert: Array<PartialAlert<AlertTypeParams>>
 ): partialAlert is RuleNotificationAlertType[] => {
   return partialAlert.every((rule) => isAlertType(rule));
 };
 
 export const isAlertType = (
-  partialAlert: PartialAlert
+  partialAlert: PartialAlert<AlertTypeParams>
 ): partialAlert is RuleNotificationAlertType => {
   return partialAlert.alertTypeId === NOTIFICATIONS_ID;
 };
 
-export type NotificationExecutorOptions = Omit<AlertExecutorOptions, 'params'> & {
-  params: {
-    ruleAlertId: string;
-  };
-};
+export type NotificationExecutorOptions = AlertExecutorOptions<
+  RuleNotificationAlertTypeParams,
+  AlertTypeState,
+  AlertInstanceState,
+  AlertInstanceContext
+>;
 
 // This returns true because by default a NotificationAlertTypeDefinition is an AlertType
 // since we are only increasing the strictness of params.
 export const isNotificationAlertExecutor = (
   obj: NotificationAlertTypeDefinition
-): obj is AlertType => {
+): obj is AlertType<AlertTypeParams, AlertTypeState, AlertInstanceState, AlertInstanceContext> => {
   return true;
 };
 
-export type NotificationAlertTypeDefinition = Omit<AlertType, 'executor'> & {
+export type NotificationAlertTypeDefinition = Omit<
+  AlertType<AlertTypeParams, AlertTypeState, AlertInstanceState, AlertInstanceContext>,
+  'executor'
+> & {
   executor: ({
     services,
     params,
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/update_notifications.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/update_notifications.ts
index d6c8973215117e..8528d53b51f5bb 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/update_notifications.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/notifications/update_notifications.ts
@@ -6,7 +6,7 @@
 
 import { PartialAlert } from '../../../../../alerts/server';
 import { readNotifications } from './read_notifications';
-import { UpdateNotificationParams } from './types';
+import { RuleNotificationAlertTypeParams, UpdateNotificationParams } from './types';
 import { addTags } from './add_tags';
 import { createNotifications } from './create_notifications';
 import { transformRuleToAlertAction } from '../../../../common/detection_engine/transform_actions';
@@ -18,11 +18,11 @@ export const updateNotifications = async ({
   ruleAlertId,
   name,
   interval,
-}: UpdateNotificationParams): Promise<PartialAlert | null> => {
+}: UpdateNotificationParams): Promise<PartialAlert<RuleNotificationAlertTypeParams> | null> => {
   const notification = await readNotifications({ alertsClient, id: undefined, ruleAlertId });
 
   if (interval && notification) {
-    return alertsClient.update({
+    return alertsClient.update<RuleNotificationAlertTypeParams>({
       id: notification.id,
       data: {
         tags: addTags([], ruleAlertId),
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/create_rules_bulk_route.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/create_rules_bulk_route.ts
index b185b8780abe29..3473948b000c75 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/create_rules_bulk_route.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/create_rules_bulk_route.ts
@@ -22,6 +22,8 @@ import { buildRouteValidation } from '../../../../utils/build_validation/route_v
 import { transformBulkError, createBulkErrorObject, buildSiemResponse } from '../utils';
 import { updateRulesNotifications } from '../../rules/update_rules_notifications';
 import { convertCreateAPIToInternalSchema } from '../../schemas/rule_converters';
+import { RuleTypeParams } from '../../types';
+import { Alert } from '../../../../../../alerts/common';
 
 export const createRulesBulkRoute = (router: IRouter, ml: SetupPlugins['ml']) => {
   router.post(
@@ -95,9 +97,12 @@ export const createRulesBulkRoute = (router: IRouter, ml: SetupPlugins['ml']) =>
                 });
               }
 
-              const createdRule = await alertsClient.create({
+              /**
+               * TODO: Remove this use of `as` by utilizing the proper type
+               */
+              const createdRule = (await alertsClient.create({
                 data: internalRule,
-              });
+              })) as Alert<RuleTypeParams>;
 
               const ruleActions = await updateRulesNotifications({
                 ruleAlertId: createdRule.id,
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/create_rules_route.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/create_rules_route.ts
index b52248f6701882..c59d5d2a36fd5e 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/create_rules_route.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/create_rules_route.ts
@@ -19,6 +19,8 @@ import { createRulesSchema } from '../../../../../common/detection_engine/schema
 import { newTransformValidate } from './validate';
 import { createRuleValidateTypeDependents } from '../../../../../common/detection_engine/schemas/request/create_rules_type_dependents';
 import { convertCreateAPIToInternalSchema } from '../../schemas/rule_converters';
+import { RuleTypeParams } from '../../types';
+import { Alert } from '../../../../../../alerts/common';
 
 export const createRulesRoute = (router: IRouter, ml: SetupPlugins['ml']): void => {
   router.post(
@@ -85,9 +87,12 @@ export const createRulesRoute = (router: IRouter, ml: SetupPlugins['ml']): void
         // This will create the endpoint list if it does not exist yet
         await context.lists?.getExceptionListClient().createEndpointList();
 
-        const createdRule = await alertsClient.create({
+        /**
+         * TODO: Remove this use of `as` by utilizing the proper type
+         */
+        const createdRule = (await alertsClient.create({
           data: internalRule,
-        });
+        })) as Alert<RuleTypeParams>;
 
         const ruleActions = await updateRulesNotifications({
           ruleAlertId: createdRule.id,
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/utils.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/utils.ts
index 7a6cd707eb1859..bd7f11b2d8756c 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/utils.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/utils.ts
@@ -31,6 +31,7 @@ import {
   OutputError,
 } from '../utils';
 import { RuleActions } from '../../rule_actions/types';
+import { RuleTypeParams } from '../../types';
 
 type PromiseFromStreams = ImportRulesSchemaDecoded | Error;
 
@@ -172,7 +173,7 @@ export const transformAlertsToRules = (alerts: RuleAlertType[]): Array<Partial<R
 };
 
 export const transformFindAlerts = (
-  findResults: FindResult,
+  findResults: FindResult<RuleTypeParams>,
   ruleActions: Array<RuleActions | null>,
   ruleStatuses?: Array<SavedObjectsFindResponse<IRuleSavedAttributesSavedObjectAttributes>>
 ): {
@@ -203,7 +204,7 @@ export const transformFindAlerts = (
 };
 
 export const transform = (
-  alert: PartialAlert,
+  alert: PartialAlert<RuleTypeParams>,
   ruleActions?: RuleActions | null,
   ruleStatus?: SavedObject<IRuleSavedAttributesSavedObjectAttributes>
 ): Partial<RulesSchema> | null => {
@@ -220,7 +221,7 @@ export const transform = (
 
 export const transformOrBulkError = (
   ruleId: string,
-  alert: PartialAlert,
+  alert: PartialAlert<RuleTypeParams>,
   ruleActions: RuleActions,
   ruleStatus?: unknown
 ): Partial<RulesSchema> | BulkError => {
@@ -241,7 +242,7 @@ export const transformOrBulkError = (
 
 export const transformOrImportError = (
   ruleId: string,
-  alert: PartialAlert,
+  alert: PartialAlert<RuleTypeParams>,
   existingImportSuccessError: ImportSuccessError
 ): ImportSuccessError => {
   if (isAlertType(alert)) {
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/validate.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/validate.test.ts
index 8653bdc0427e44..51b08cb3fce899 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/validate.test.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/validate.test.ts
@@ -15,6 +15,7 @@ import { RulesSchema } from '../../../../../common/detection_engine/schemas/resp
 import { getResult, getFindResultStatus } from '../__mocks__/request_responses';
 import { getListArrayMock } from '../../../../../common/detection_engine/schemas/types/lists.mock';
 import { getThreatMock } from '../../../../../common/detection_engine/schemas/types/threat.mock';
+import { RuleTypeParams } from '../../types';
 
 export const ruleOutput = (): RulesSchema => ({
   actions: [],
@@ -88,7 +89,7 @@ describe('validate', () => {
 
   describe('transformValidateFindAlerts', () => {
     test('it should do a validation correctly of a find alert', () => {
-      const findResult: FindResult = {
+      const findResult: FindResult<RuleTypeParams> = {
         data: [getResult()],
         page: 1,
         perPage: 0,
@@ -111,7 +112,7 @@ describe('validate', () => {
     });
 
     test('it should do an in-validation correctly of a partial alert', () => {
-      const findResult: FindResult = {
+      const findResult: FindResult<RuleTypeParams> = {
         data: [getResult()],
         page: 1,
         perPage: 0,
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/validate.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/validate.ts
index 382186df16cd18..3e3b85a407fc21 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/validate.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/rules/validate.ts
@@ -31,9 +31,10 @@ import {
 import { createBulkErrorObject, BulkError } from '../utils';
 import { transformFindAlerts, transform, transformAlertToRule } from './utils';
 import { RuleActions } from '../../rule_actions/types';
+import { RuleTypeParams } from '../../types';
 
 export const transformValidateFindAlerts = (
-  findResults: FindResult,
+  findResults: FindResult<RuleTypeParams>,
   ruleActions: Array<RuleActions | null>,
   ruleStatuses?: Array<SavedObjectsFindResponse<IRuleSavedAttributesSavedObjectAttributes>>
 ): [
@@ -63,7 +64,7 @@ export const transformValidateFindAlerts = (
 };
 
 export const transformValidate = (
-  alert: PartialAlert,
+  alert: PartialAlert<RuleTypeParams>,
   ruleActions?: RuleActions | null,
   ruleStatus?: SavedObject<IRuleSavedAttributesSavedObjectAttributes>
 ): [RulesSchema | null, string | null] => {
@@ -76,7 +77,7 @@ export const transformValidate = (
 };
 
 export const newTransformValidate = (
-  alert: PartialAlert,
+  alert: PartialAlert<RuleTypeParams>,
   ruleActions?: RuleActions | null,
   ruleStatus?: SavedObject<IRuleSavedAttributesSavedObjectAttributes>
 ): [FullResponseSchema | null, string | null] => {
@@ -90,7 +91,7 @@ export const newTransformValidate = (
 
 export const transformValidateBulkError = (
   ruleId: string,
-  alert: PartialAlert,
+  alert: PartialAlert<RuleTypeParams>,
   ruleActions?: RuleActions | null,
   ruleStatus?: SavedObjectsFindResponse<IRuleStatusSOAttributes>
 ): RulesSchema | BulkError => {
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/create_rules.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/create_rules.ts
index 0519a98df1fae8..6339e92eb012b6 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/create_rules.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/create_rules.ts
@@ -9,6 +9,7 @@ import { Alert } from '../../../../../alerts/common';
 import { SERVER_APP_ID, SIGNALS_ID } from '../../../../common/constants';
 import { CreateRulesOptions } from './types';
 import { addTags } from './add_tags';
+import { PartialFilter, RuleTypeParams } from '../types';
 
 export const createRules = async ({
   alertsClient,
@@ -59,8 +60,8 @@ export const createRules = async ({
   version,
   exceptionsList,
   actions,
-}: CreateRulesOptions): Promise<Alert> => {
-  return alertsClient.create({
+}: CreateRulesOptions): Promise<Alert<RuleTypeParams>> => {
+  return alertsClient.create<RuleTypeParams>({
     data: {
       name,
       tags: addTags(tags, ruleId, immutable),
@@ -95,7 +96,10 @@ export const createRules = async ({
         severityMapping,
         threat,
         threshold,
-        threatFilters,
+        /**
+         * TODO: Fix typing inconsistancy between `RuleTypeParams` and `CreateRulesOptions`
+         */
+        threatFilters: threatFilters as PartialFilter[] | undefined,
         threatIndex,
         threatQuery,
         concurrentSearches,
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/find_rules.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/find_rules.ts
index 18b851c440e20a..5ab97262515dad 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/find_rules.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/find_rules.ts
@@ -6,6 +6,7 @@
 
 import { FindResult } from '../../../../../alerts/server';
 import { SIGNALS_ID } from '../../../../common/constants';
+import { RuleTypeParams } from '../types';
 import { FindRuleOptions } from './types';
 
 export const getFilter = (filter: string | null | undefined) => {
@@ -24,7 +25,7 @@ export const findRules = async ({
   filter,
   sortField,
   sortOrder,
-}: FindRuleOptions): Promise<FindResult> => {
+}: FindRuleOptions): Promise<FindResult<RuleTypeParams>> => {
   return alertsClient.find({
     options: {
       fields,
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/install_prepacked_rules.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/install_prepacked_rules.ts
index 4c01318f02cdea..1f43706c17fec8 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/install_prepacked_rules.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/install_prepacked_rules.ts
@@ -5,7 +5,7 @@
  */
 
 import { AddPrepackagedRulesSchemaDecoded } from '../../../../common/detection_engine/schemas/request/add_prepackaged_rules_schema';
-import { Alert } from '../../../../../alerts/common';
+import { Alert, AlertTypeParams } from '../../../../../alerts/common';
 import { AlertsClient } from '../../../../../alerts/server';
 import { createRules } from './create_rules';
 import { PartialFilter } from '../types';
@@ -14,8 +14,8 @@ export const installPrepackagedRules = (
   alertsClient: AlertsClient,
   rules: AddPrepackagedRulesSchemaDecoded[],
   outputIndex: string
-): Array<Promise<Alert>> =>
-  rules.reduce<Array<Promise<Alert>>>((acc, rule) => {
+): Array<Promise<Alert<AlertTypeParams>>> =>
+  rules.reduce<Array<Promise<Alert<AlertTypeParams>>>>((acc, rule) => {
     const {
       anomaly_threshold: anomalyThreshold,
       author,
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/patch_rules.mock.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/patch_rules.mock.ts
index b2303d48b0517a..484dac8e31fb4c 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/patch_rules.mock.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/patch_rules.mock.ts
@@ -9,8 +9,9 @@ import { alertsClientMock } from '../../../../../alerts/server/mocks';
 import { savedObjectsClientMock } from '../../../../../../../src/core/server/mocks';
 import { INTERNAL_RULE_ID_KEY, INTERNAL_IMMUTABLE_KEY } from '../../../../common/constants';
 import { SanitizedAlert } from '../../../../../alerts/common';
+import { RuleTypeParams } from '../types';
 
-const rule: SanitizedAlert = {
+const rule: SanitizedAlert<RuleTypeParams> = {
   id: '04128c15-0d1b-4716-a4c5-46997ac7f3bd',
   name: 'Detect Root/Admin Users',
   tags: [`${INTERNAL_RULE_ID_KEY}:rule-1`, `${INTERNAL_IMMUTABLE_KEY}:false`],
@@ -67,6 +68,8 @@ const rule: SanitizedAlert = {
     note: '# Investigative notes',
     version: 1,
     exceptionsList: [
+      /**
+      TODO: fix this mock. Which the typing has revealed is wrong
       {
         field: 'source.ip',
         values_operator: 'included',
@@ -96,8 +99,31 @@ const rule: SanitizedAlert = {
             ],
           },
         ],
-      },
+      },*/
     ],
+    /**
+     * The fields below were missing as the type was partial and hence not technically correct
+     */
+    author: [],
+    buildingBlockType: undefined,
+    eventCategoryOverride: undefined,
+    license: undefined,
+    savedId: undefined,
+    interval: undefined,
+    riskScoreMapping: undefined,
+    ruleNameOverride: undefined,
+    name: undefined,
+    severityMapping: undefined,
+    tags: undefined,
+    threshold: undefined,
+    threatFilters: undefined,
+    threatIndex: undefined,
+    threatQuery: undefined,
+    threatMapping: undefined,
+    threatLanguage: undefined,
+    concurrentSearches: undefined,
+    itemsPerSearch: undefined,
+    timestampOverride: undefined,
   },
   createdAt: new Date('2019-12-13T16:40:33.400Z'),
   updatedAt: new Date('2019-12-13T16:40:33.400Z'),
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/patch_rules.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/patch_rules.ts
index c86526cee9302f..c1720c4fa35875 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/patch_rules.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/patch_rules.ts
@@ -13,6 +13,7 @@ import { addTags } from './add_tags';
 import { calculateVersion, calculateName, calculateInterval, removeUndefined } from './utils';
 import { ruleStatusSavedObjectsClientFactory } from '../signals/rule_status_saved_objects_client';
 import { internalRuleUpdate } from '../schemas/rule_schemas';
+import { RuleTypeParams } from '../types';
 
 class PatchError extends Error {
   public readonly statusCode: number;
@@ -71,7 +72,7 @@ export const patchRules = async ({
   anomalyThreshold,
   machineLearningJobId,
   actions,
-}: PatchRulesOptions): Promise<PartialAlert | null> => {
+}: PatchRulesOptions): Promise<PartialAlert<RuleTypeParams> | null> => {
   if (rule == null) {
     return null;
   }
@@ -185,10 +186,13 @@ export const patchRules = async ({
     throw new PatchError(`Applying patch would create invalid rule: ${errors}`, 400);
   }
 
-  const update = await alertsClient.update({
+  /**
+   * TODO: Remove this use of `as` by utilizing the proper type
+   */
+  const update = (await alertsClient.update({
     id: rule.id,
     data: validated,
-  });
+  })) as PartialAlert<RuleTypeParams>;
 
   if (rule.enabled && enabled === false) {
     await alertsClient.disable({ id: rule.id });
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/read_rules.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/read_rules.ts
index e4bb65a907e2d5..bc277bd2089a6f 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/read_rules.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/read_rules.ts
@@ -6,6 +6,7 @@
 
 import { SanitizedAlert } from '../../../../../alerts/common';
 import { INTERNAL_RULE_ID_KEY } from '../../../../common/constants';
+import { RuleTypeParams } from '../types';
 import { findRules } from './find_rules';
 import { isAlertType, ReadRuleOptions } from './types';
 
@@ -21,7 +22,7 @@ export const readRules = async ({
   alertsClient,
   id,
   ruleId,
-}: ReadRuleOptions): Promise<SanitizedAlert | null> => {
+}: ReadRuleOptions): Promise<SanitizedAlert<RuleTypeParams> | null> => {
   if (id != null) {
     try {
       const rule = await alertsClient.get({ id });
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/types.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/types.ts
index aaeb487ad9a78c..34dab20c279b46 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/types.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/types.ts
@@ -103,9 +103,7 @@ import { SIGNALS_ID } from '../../../../common/constants';
 import { RuleTypeParams, PartialFilter } from '../types';
 import { ListArrayOrUndefined, ListArray } from '../../../../common/detection_engine/schemas/types';
 
-export interface RuleAlertType extends Alert {
-  params: RuleTypeParams;
-}
+export type RuleAlertType = Alert<RuleTypeParams>;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface IRuleStatusSOAttributes extends Record<string, any> {
@@ -173,11 +171,15 @@ export interface Clients {
   alertsClient: AlertsClient;
 }
 
-export const isAlertTypes = (partialAlert: PartialAlert[]): partialAlert is RuleAlertType[] => {
+export const isAlertTypes = (
+  partialAlert: Array<PartialAlert<RuleTypeParams>>
+): partialAlert is RuleAlertType[] => {
   return partialAlert.every((rule) => isAlertType(rule));
 };
 
-export const isAlertType = (partialAlert: PartialAlert): partialAlert is RuleAlertType => {
+export const isAlertType = (
+  partialAlert: PartialAlert<RuleTypeParams>
+): partialAlert is RuleAlertType => {
   return partialAlert.alertTypeId === SIGNALS_ID;
 };
 
@@ -305,7 +307,7 @@ export interface PatchRulesOptions {
   version: VersionOrUndefined;
   exceptionsList: ListArrayOrUndefined;
   actions: RuleAlertAction[] | undefined;
-  rule: SanitizedAlert | null;
+  rule: SanitizedAlert<RuleTypeParams> | null;
 }
 
 export interface ReadRuleOptions {
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/update_rules.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/update_rules.ts
index c63bd01cd18133..b3e0aaae715c98 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/rules/update_rules.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/rules/update_rules.ts
@@ -15,13 +15,14 @@ import { addTags } from './add_tags';
 import { ruleStatusSavedObjectsClientFactory } from '../signals/rule_status_saved_objects_client';
 import { typeSpecificSnakeToCamel } from '../schemas/rule_converters';
 import { InternalRuleUpdate } from '../schemas/rule_schemas';
+import { RuleTypeParams } from '../types';
 
 export const updateRules = async ({
   alertsClient,
   savedObjectsClient,
   defaultOutputIndex,
   ruleUpdate,
-}: UpdateRulesOptions): Promise<PartialAlert | null> => {
+}: UpdateRulesOptions): Promise<PartialAlert<RuleTypeParams> | null> => {
   const existingRule = await readRules({
     alertsClient,
     ruleId: ruleUpdate.rule_id,
@@ -77,10 +78,13 @@ export const updateRules = async ({
     notifyWhen: null,
   };
 
-  const update = await alertsClient.update({
+  /**
+   * TODO: Remove this use of `as` by utilizing the proper type
+   */
+  const update = (await alertsClient.update({
     id: existingRule.id,
     data: newInternalRule,
-  });
+  })) as PartialAlert<RuleTypeParams>;
 
   if (existingRule.enabled && enabled === false) {
     await alertsClient.disable({ id: existingRule.id });
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 50e740e81830f8..aede91c5af1436 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
@@ -8,7 +8,7 @@ import { schema, TypeOf } from '@kbn/config-schema';
 
 import { DEFAULT_MAX_SIGNALS } from '../../../../common/constants';
 
-const signalSchema = schema.object({
+export const signalSchema = schema.object({
   anomalyThreshold: schema.maybe(schema.number()),
   author: schema.arrayOf(schema.string(), { defaultValue: [] }),
   buildingBlockType: schema.nullable(schema.string()),
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.test.ts
index 9a40573095a1a8..9c2ea0945297e3 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.test.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.test.ts
@@ -49,7 +49,10 @@ jest.mock('./find_ml_signals');
 jest.mock('./bulk_create_ml_signals');
 jest.mock('../../../../common/detection_engine/parse_schedule_dates');
 
-const getPayload = (ruleAlert: RuleAlertType, services: AlertServicesMock) => ({
+const getPayload = (
+  ruleAlert: RuleAlertType,
+  services: AlertServicesMock
+): RuleExecutorOptions => ({
   alertId: ruleAlert.id,
   services,
   params: {
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.ts
index 3928228357d4cb..476b9aa56f572d 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.ts
@@ -66,6 +66,7 @@ import { getIndexVersion } from '../routes/index/get_index_version';
 import { MIN_EQL_RULE_INDEX_VERSION } from '../routes/index/get_signals_template';
 import { filterEventsAgainstList } from './filters/filter_events_against_list';
 import { isOutdated } from '../migrations/helpers';
+import { RuleTypeParams } from '../types';
 
 export const signalRulesAlertType = ({
   logger,
@@ -86,7 +87,16 @@ export const signalRulesAlertType = ({
     actionGroups: siemRuleActionGroups,
     defaultActionGroupId: 'default',
     validate: {
-      params: signalParamsSchema(),
+      /**
+       * TODO: Fix typing inconsistancy between `RuleTypeParams` and `CreateRulesOptions`
+       * Once that's done, you should be able to do:
+       * ```
+       * params: signalParamsSchema(),
+       * ```
+       */
+      params: (signalParamsSchema() as unknown) as {
+        validate: (object: unknown) => RuleTypeParams;
+      },
     },
     producer: SERVER_APP_ID,
     minimumLicenseRequired: 'basic',
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/types.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/types.ts
index 4167d056df885c..62339f50d939cd 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/types.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/types.ts
@@ -11,6 +11,8 @@ import { RulesSchema } from '../../../../common/detection_engine/schemas/respons
 import {
   AlertType,
   AlertTypeState,
+  AlertInstanceState,
+  AlertInstanceContext,
   AlertExecutorOptions,
   AlertServices,
 } from '../../../../../alerts/server';
@@ -128,19 +130,27 @@ export type BaseSignalHit = BaseHit<SignalSource>;
 
 export type EqlSignalSearchResponse = EqlSearchResponse<SignalSource>;
 
-export type RuleExecutorOptions = Omit<AlertExecutorOptions, 'params'> & {
-  params: RuleTypeParams;
-};
+export type RuleExecutorOptions = AlertExecutorOptions<
+  RuleTypeParams,
+  AlertTypeState,
+  AlertInstanceState,
+  AlertInstanceContext
+>;
 
 // This returns true because by default a RuleAlertTypeDefinition is an AlertType
 // since we are only increasing the strictness of params.
-export const isAlertExecutor = (obj: SignalRuleAlertTypeDefinition): obj is AlertType => {
+export const isAlertExecutor = (
+  obj: SignalRuleAlertTypeDefinition
+): obj is AlertType<RuleTypeParams, AlertTypeState, AlertInstanceState, AlertInstanceContext> => {
   return true;
 };
 
-export type SignalRuleAlertTypeDefinition = Omit<AlertType, 'executor'> & {
-  executor: ({ services, params, state }: RuleExecutorOptions) => Promise<AlertTypeState | void>;
-};
+export type SignalRuleAlertTypeDefinition = AlertType<
+  RuleTypeParams,
+  AlertTypeState,
+  AlertInstanceState,
+  AlertInstanceContext
+>;
 
 export interface Ancestor {
   rule?: string;
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/types.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/types.ts
index 57535178c52801..90f2ce638855b5 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/types.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/types.ts
@@ -51,10 +51,11 @@ import {
 import { LegacyCallAPIOptions } from '../../../../../../src/core/server';
 import { Filter } from '../../../../../../src/plugins/data/server';
 import { ListArrayOrUndefined } from '../../../common/detection_engine/schemas/types';
+import { AlertTypeParams } from '../../../../alerts/common';
 
 export type PartialFilter = Partial<Filter>;
 
-export interface RuleTypeParams {
+export interface RuleTypeParams extends AlertTypeParams {
   anomalyThreshold: AnomalyThresholdOrUndefined;
   author: AuthorOrUndefined;
   buildingBlockType: BuildingBlockTypeOrUndefined;
diff --git a/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/types.ts b/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/types.ts
index 89252f7c901042..d1f64c9298f15d 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/types.ts
+++ b/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/types.ts
@@ -4,9 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { AlertTypeParams } from '../../../../alerts/common';
 import { Query } from '../../../../../../src/plugins/data/common';
 
-export interface GeoContainmentAlertParams {
+export interface GeoContainmentAlertParams extends AlertTypeParams {
   index: string;
   indexId: string;
   geoField: string;
diff --git a/x-pack/plugins/stack_alerts/public/alert_types/geo_threshold/types.ts b/x-pack/plugins/stack_alerts/public/alert_types/geo_threshold/types.ts
index 5ac9c7fd29317d..3f487135f0474d 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/geo_threshold/types.ts
+++ b/x-pack/plugins/stack_alerts/public/alert_types/geo_threshold/types.ts
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { AlertTypeParams } from '../../../../alerts/common';
 import { Query } from '../../../../../../src/plugins/data/common';
 
 export enum TrackingEvent {
@@ -12,7 +13,7 @@ export enum TrackingEvent {
   crossed = 'crossed',
 }
 
-export interface GeoThresholdAlertParams {
+export interface GeoThresholdAlertParams extends AlertTypeParams {
   index: string;
   indexId: string;
   geoField: string;
diff --git a/x-pack/plugins/stack_alerts/public/alert_types/threshold/expression.tsx b/x-pack/plugins/stack_alerts/public/alert_types/threshold/expression.tsx
index 3c84f2a5d4f9c0..12e021958f4971 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/threshold/expression.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/threshold/expression.tsx
@@ -71,6 +71,10 @@ interface KibanaDeps {
   http: HttpSetup;
 }
 
+function isString(value: unknown): value is string {
+  return typeof value === 'string';
+}
+
 export const IndexThresholdAlertTypeExpression: React.FunctionComponent<
   AlertTypeParamsExpressionProps<IndexThresholdAlertParams>
 > = ({ alertParams, alertInterval, setAlertParams, setAlertProperty, errors, charts, data }) => {
@@ -190,10 +194,10 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<
             };
           })}
           onChange={async (selected: EuiComboBoxOptionOption[]) => {
-            setAlertParams(
-              'index',
-              selected.map((aSelected) => aSelected.value)
-            );
+            const indicies: string[] = selected
+              .map((aSelected) => aSelected.value)
+              .filter<string>(isString);
+            setAlertParams('index', indicies);
             const indices = selected.map((s) => s.value as string);
 
             // reset time field and expression fields if indices are deleted
diff --git a/x-pack/plugins/stack_alerts/public/alert_types/threshold/types.ts b/x-pack/plugins/stack_alerts/public/alert_types/threshold/types.ts
index 356b0fbbc0845a..4868b92feaeb90 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/threshold/types.ts
+++ b/x-pack/plugins/stack_alerts/public/alert_types/threshold/types.ts
@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { AlertTypeParams } from '../../../../alerts/common';
+
 export interface Comparator {
   text: string;
   value: string;
@@ -24,7 +26,7 @@ export interface GroupByType {
   validNormalizedTypes: string[];
 }
 
-export interface IndexThresholdAlertParams {
+export interface IndexThresholdAlertParams extends AlertTypeParams {
   index: string[];
   timeField?: string;
   aggType: string;
diff --git a/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/alert_type.ts b/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/alert_type.ts
index 51d7361bfe762b..85dcf1125becd0 100644
--- a/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/alert_type.ts
+++ b/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/alert_type.ts
@@ -9,7 +9,13 @@ import { schema } from '@kbn/config-schema';
 import { Logger } from 'src/core/server';
 import { STACK_ALERTS_FEATURE_ID } from '../../../common';
 import { getGeoContainmentExecutor } from './geo_containment';
-import { AlertType } from '../../../../alerts/server';
+import {
+  AlertType,
+  AlertTypeState,
+  AlertInstanceState,
+  AlertInstanceContext,
+  AlertTypeParams,
+} from '../../../../alerts/server';
 import { Query } from '../../../../../../src/plugins/data/common/query';
 
 export const GEO_CONTAINMENT_ID = '.geo-containment';
@@ -96,7 +102,7 @@ export const ParamsSchema = schema.object({
   boundaryIndexQuery: schema.maybe(schema.any({})),
 });
 
-export interface GeoContainmentParams {
+export interface GeoContainmentParams extends AlertTypeParams {
   index: string;
   indexId: string;
   geoField: string;
@@ -111,8 +117,34 @@ export interface GeoContainmentParams {
   indexQuery?: Query;
   boundaryIndexQuery?: Query;
 }
+export interface GeoContainmentState extends AlertTypeState {
+  shapesFilters: Record<string, unknown>;
+  shapesIdsNamesMap: Record<string, unknown>;
+}
+export interface GeoContainmentInstanceState extends AlertInstanceState {
+  location: number[];
+  shapeLocationId: string;
+  dateInShape: string | null;
+  docId: string;
+}
+export interface GeoContainmentInstanceContext extends AlertInstanceContext {
+  entityId: string;
+  entityDateTime: string | null;
+  entityDocumentId: string;
+  detectionDateTime: string;
+  entityLocation: string;
+  containingBoundaryId: string;
+  containingBoundaryName: unknown;
+}
+
+export type GeoContainmentAlertType = AlertType<
+  GeoContainmentParams,
+  GeoContainmentState,
+  GeoContainmentInstanceState,
+  GeoContainmentInstanceContext
+>;
 
-export function getAlertType(logger: Logger): AlertType<GeoContainmentParams> {
+export function getAlertType(logger: Logger): GeoContainmentAlertType {
   const alertTypeName = i18n.translate('xpack.stackAlerts.geoContainment.alertTypeTitle', {
     defaultMessage: 'Tracking containment',
   });
diff --git a/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/geo_containment.ts b/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/geo_containment.ts
index ed951f340f8ed2..612eff30149856 100644
--- a/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/geo_containment.ts
+++ b/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/geo_containment.ts
@@ -8,15 +8,16 @@ import _ from 'lodash';
 import { SearchResponse } from 'elasticsearch';
 import { Logger } from 'src/core/server';
 import { executeEsQueryFactory, getShapesFilters, OTHER_CATEGORY } from './es_query_builder';
-import { AlertServices, AlertTypeState } from '../../../../alerts/server';
-import { ActionGroupId, GEO_CONTAINMENT_ID, GeoContainmentParams } from './alert_type';
+import { AlertServices } from '../../../../alerts/server';
+import {
+  ActionGroupId,
+  GEO_CONTAINMENT_ID,
+  GeoContainmentInstanceState,
+  GeoContainmentAlertType,
+  GeoContainmentInstanceContext,
+} from './alert_type';
 
-export interface LatestEntityLocation {
-  location: number[];
-  shapeLocationId: string;
-  dateInShape: string | null;
-  docId: string;
-}
+export type LatestEntityLocation = GeoContainmentInstanceState;
 
 // Flatten agg results and get latest locations for each entity
 export function transformResults(
@@ -97,9 +98,10 @@ function getOffsetTime(delayOffsetWithUnits: string, oldTime: Date): Date {
 export function getActiveEntriesAndGenerateAlerts(
   prevLocationMap: Record<string, LatestEntityLocation>,
   currLocationMap: Map<string, LatestEntityLocation>,
-  alertInstanceFactory: (
-    x: string
-  ) => { scheduleActions: (x: string, y: Record<string, unknown>) => void },
+  alertInstanceFactory: AlertServices<
+    GeoContainmentInstanceState,
+    GeoContainmentInstanceContext
+  >['alertInstanceFactory'],
   shapesIdsNamesMap: Record<string, unknown>,
   currIntervalEndTime: Date
 ) {
@@ -127,23 +129,8 @@ export function getActiveEntriesAndGenerateAlerts(
   });
   return allActiveEntriesMap;
 }
-
-export const getGeoContainmentExecutor = (log: Logger) =>
-  async function ({
-    previousStartedAt,
-    startedAt,
-    services,
-    params,
-    alertId,
-    state,
-  }: {
-    previousStartedAt: Date | null;
-    startedAt: Date;
-    services: AlertServices;
-    params: GeoContainmentParams;
-    alertId: string;
-    state: AlertTypeState;
-  }): Promise<AlertTypeState> {
+export const getGeoContainmentExecutor = (log: Logger): GeoContainmentAlertType['executor'] =>
+  async function ({ previousStartedAt, startedAt, services, params, alertId, state }) {
     const { shapesFilters, shapesIdsNamesMap } = state.shapesFilters
       ? state
       : await getShapesFilters(
diff --git a/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/index.ts b/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/index.ts
index 02116d0701bfab..86e9e4fa3d672f 100644
--- a/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/index.ts
+++ b/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/index.ts
@@ -6,7 +6,13 @@
 
 import { Logger } from 'src/core/server';
 import { AlertingSetup } from '../../types';
-import { GeoContainmentParams, getAlertType } from './alert_type';
+import {
+  GeoContainmentParams,
+  GeoContainmentState,
+  GeoContainmentInstanceState,
+  GeoContainmentInstanceContext,
+  getAlertType,
+} from './alert_type';
 
 interface RegisterParams {
   logger: Logger;
@@ -15,5 +21,10 @@ interface RegisterParams {
 
 export function register(params: RegisterParams) {
   const { logger, alerts } = params;
-  alerts.registerType<GeoContainmentParams>(getAlertType(logger));
+  alerts.registerType<
+    GeoContainmentParams,
+    GeoContainmentState,
+    GeoContainmentInstanceState,
+    GeoContainmentInstanceContext
+  >(getAlertType(logger));
 }
diff --git a/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/tests/geo_containment.test.ts b/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/tests/geo_containment.test.ts
index 885081e859dd75..26b51060c2e734 100644
--- a/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/tests/geo_containment.test.ts
+++ b/x-pack/plugins/stack_alerts/server/alert_types/geo_containment/tests/geo_containment.test.ts
@@ -10,6 +10,8 @@ import sampleJsonResponseWithNesting from './es_sample_response_with_nesting.jso
 import { getActiveEntriesAndGenerateAlerts, transformResults } from '../geo_containment';
 import { SearchResponse } from 'elasticsearch';
 import { OTHER_CATEGORY } from '../es_query_builder';
+import { alertsMock } from '../../../../../alerts/server/mocks';
+import { GeoContainmentInstanceContext, GeoContainmentInstanceState } from '../alert_type';
 
 describe('geo_containment', () => {
   describe('transformResults', () => {
@@ -191,8 +193,12 @@ describe('geo_containment', () => {
     const emptyShapesIdsNamesMap = {};
 
     const alertInstanceFactory = (instanceId: string) => {
-      return {
-        scheduleActions: (actionGroupId: string, context: Record<string, unknown>) => {
+      const alertInstance = alertsMock.createAlertInstanceFactory<
+        GeoContainmentInstanceState,
+        GeoContainmentInstanceContext
+      >();
+      alertInstance.scheduleActions.mockImplementation(
+        (actionGroupId: string, context?: GeoContainmentInstanceContext) => {
           const contextKeys = Object.keys(expectedContext[0].context);
           const contextSubset = _.pickBy(context, (v, k) => contextKeys.includes(k));
           testAlertActionArr.push({
@@ -200,9 +206,12 @@ describe('geo_containment', () => {
             instanceId,
             context: contextSubset,
           });
-        },
-      };
+          return alertInstance;
+        }
+      );
+      return alertInstance;
     };
+
     const currentDateTime = new Date();
 
     it('should use currently active entities if no older entity entries', () => {
diff --git a/x-pack/plugins/stack_alerts/server/alert_types/geo_threshold/alert_type.ts b/x-pack/plugins/stack_alerts/server/alert_types/geo_threshold/alert_type.ts
index bf5e2fe2289db8..2eccf2ff96fb03 100644
--- a/x-pack/plugins/stack_alerts/server/alert_types/geo_threshold/alert_type.ts
+++ b/x-pack/plugins/stack_alerts/server/alert_types/geo_threshold/alert_type.ts
@@ -9,7 +9,13 @@ import { schema } from '@kbn/config-schema';
 import { Logger } from 'src/core/server';
 import { STACK_ALERTS_FEATURE_ID } from '../../../common';
 import { getGeoThresholdExecutor } from './geo_threshold';
-import { AlertType } from '../../../../alerts/server';
+import {
+  AlertType,
+  AlertTypeState,
+  AlertInstanceState,
+  AlertInstanceContext,
+  AlertTypeParams,
+} from '../../../../alerts/server';
 import { Query } from '../../../../../../src/plugins/data/common/query';
 
 export const GEO_THRESHOLD_ID = '.geo-threshold';
@@ -155,7 +161,7 @@ export const ParamsSchema = schema.object({
   boundaryIndexQuery: schema.maybe(schema.any({})),
 });
 
-export interface GeoThresholdParams {
+export interface GeoThresholdParams extends AlertTypeParams {
   index: string;
   indexId: string;
   geoField: string;
@@ -171,8 +177,41 @@ export interface GeoThresholdParams {
   indexQuery?: Query;
   boundaryIndexQuery?: Query;
 }
+export interface GeoThresholdState extends AlertTypeState {
+  shapesFilters: Record<string, unknown>;
+  shapesIdsNamesMap: Record<string, unknown>;
+  prevLocationArr: GeoThresholdInstanceState[];
+}
+export interface GeoThresholdInstanceState extends AlertInstanceState {
+  location: number[];
+  shapeLocationId: string;
+  entityName: string;
+  dateInShape: string | null;
+  docId: string;
+}
+export interface GeoThresholdInstanceContext extends AlertInstanceContext {
+  entityId: string;
+  timeOfDetection: number;
+  crossingLine: string;
+  toEntityLocation: string;
+  toEntityDateTime: string | null;
+  toEntityDocumentId: string;
+  toBoundaryId: string;
+  toBoundaryName: unknown;
+  fromEntityLocation: string;
+  fromEntityDateTime: string | null;
+  fromEntityDocumentId: string;
+  fromBoundaryId: string;
+  fromBoundaryName: unknown;
+}
 
-export function getAlertType(logger: Logger): AlertType<GeoThresholdParams> {
+export type GeoThresholdAlertType = AlertType<
+  GeoThresholdParams,
+  GeoThresholdState,
+  GeoThresholdInstanceState,
+  GeoThresholdInstanceContext
+>;
+export function getAlertType(logger: Logger): GeoThresholdAlertType {
   const alertTypeName = i18n.translate('xpack.stackAlerts.geoThreshold.alertTypeTitle', {
     defaultMessage: 'Tracking threshold',
   });
diff --git a/x-pack/plugins/stack_alerts/server/alert_types/geo_threshold/geo_threshold.ts b/x-pack/plugins/stack_alerts/server/alert_types/geo_threshold/geo_threshold.ts
index 5cb4156e84623a..a2375537ae6e5c 100644
--- a/x-pack/plugins/stack_alerts/server/alert_types/geo_threshold/geo_threshold.ts
+++ b/x-pack/plugins/stack_alerts/server/alert_types/geo_threshold/geo_threshold.ts
@@ -8,16 +8,14 @@ import _ from 'lodash';
 import { SearchResponse } from 'elasticsearch';
 import { Logger } from 'src/core/server';
 import { executeEsQueryFactory, getShapesFilters, OTHER_CATEGORY } from './es_query_builder';
-import { AlertServices, AlertTypeState } from '../../../../alerts/server';
-import { ActionGroupId, GEO_THRESHOLD_ID, GeoThresholdParams } from './alert_type';
+import {
+  ActionGroupId,
+  GEO_THRESHOLD_ID,
+  GeoThresholdAlertType,
+  GeoThresholdInstanceState,
+} from './alert_type';
 
-interface LatestEntityLocation {
-  location: number[];
-  shapeLocationId: string;
-  entityName: string;
-  dateInShape: string | null;
-  docId: string;
-}
+export type LatestEntityLocation = GeoThresholdInstanceState;
 
 // Flatten agg results and get latest locations for each entity
 export function transformResults(
@@ -172,22 +170,8 @@ function getOffsetTime(delayOffsetWithUnits: string, oldTime: Date): Date {
   return adjustedDate;
 }
 
-export const getGeoThresholdExecutor = (log: Logger) =>
-  async function ({
-    previousStartedAt,
-    startedAt,
-    services,
-    params,
-    alertId,
-    state,
-  }: {
-    previousStartedAt: Date | null;
-    startedAt: Date;
-    services: AlertServices;
-    params: GeoThresholdParams;
-    alertId: string;
-    state: AlertTypeState;
-  }): Promise<AlertTypeState> {
+export const getGeoThresholdExecutor = (log: Logger): GeoThresholdAlertType['executor'] =>
+  async function ({ previousStartedAt, startedAt, services, params, alertId, state }) {
     const { shapesFilters, shapesIdsNamesMap } = state.shapesFilters
       ? state
       : await getShapesFilters(
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/lib/alert_api.test.ts b/x-pack/plugins/triggers_actions_ui/public/application/lib/alert_api.test.ts
index 538c6be89ab4b5..ea654bb21e88b9 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/lib/alert_api.test.ts
+++ b/x-pack/plugins/triggers_actions_ui/public/application/lib/alert_api.test.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Alert, AlertType } from '../../types';
+import { Alert, AlertType, AlertUpdates } from '../../types';
 import { httpServiceMock } from '../../../../../../src/core/public/mocks';
 import {
   createAlert,
@@ -538,7 +538,7 @@ describe('deleteAlerts', () => {
 
 describe('createAlert', () => {
   test('should call create alert API', async () => {
-    const alertToCreate = {
+    const alertToCreate: AlertUpdates = {
       name: 'test',
       consumer: 'alerts',
       tags: ['foo'],
@@ -553,10 +553,13 @@ describe('createAlert', () => {
       notifyWhen: 'onActionGroupChange' as AlertNotifyWhenType,
       createdAt: new Date('1970-01-01T00:00:00.000Z'),
       updatedAt: new Date('1970-01-01T00:00:00.000Z'),
-      apiKey: null,
       apiKeyOwner: null,
+      createdBy: null,
+      updatedBy: null,
+      muteAll: false,
+      mutedInstanceIds: [],
     };
-    const resolvedValue: Alert = {
+    const resolvedValue = {
       ...alertToCreate,
       id: '123',
       createdBy: null,
@@ -576,7 +579,7 @@ describe('createAlert', () => {
       Array [
         "/api/alerts/alert",
         Object {
-          "body": "{\\"name\\":\\"test\\",\\"consumer\\":\\"alerts\\",\\"tags\\":[\\"foo\\"],\\"enabled\\":true,\\"alertTypeId\\":\\"test\\",\\"schedule\\":{\\"interval\\":\\"1m\\"},\\"actions\\":[],\\"params\\":{},\\"throttle\\":null,\\"notifyWhen\\":\\"onActionGroupChange\\",\\"createdAt\\":\\"1970-01-01T00:00:00.000Z\\",\\"updatedAt\\":\\"1970-01-01T00:00:00.000Z\\",\\"apiKey\\":null,\\"apiKeyOwner\\":null}",
+          "body": "{\\"name\\":\\"test\\",\\"consumer\\":\\"alerts\\",\\"tags\\":[\\"foo\\"],\\"enabled\\":true,\\"alertTypeId\\":\\"test\\",\\"schedule\\":{\\"interval\\":\\"1m\\"},\\"actions\\":[],\\"params\\":{},\\"throttle\\":null,\\"notifyWhen\\":\\"onActionGroupChange\\",\\"createdAt\\":\\"1970-01-01T00:00:00.000Z\\",\\"updatedAt\\":\\"1970-01-01T00:00:00.000Z\\",\\"apiKeyOwner\\":null,\\"createdBy\\":null,\\"updatedBy\\":null,\\"muteAll\\":false,\\"mutedInstanceIds\\":[]}",
         },
       ]
     `);
diff --git a/x-pack/plugins/triggers_actions_ui/public/plugin.ts b/x-pack/plugins/triggers_actions_ui/public/plugin.ts
index f2c8957400fa50..05bfba27420c7f 100644
--- a/x-pack/plugins/triggers_actions_ui/public/plugin.ts
+++ b/x-pack/plugins/triggers_actions_ui/public/plugin.ts
@@ -35,12 +35,12 @@ import { AlertEditProps } from './application/sections/alert_form/alert_edit';
 
 export interface TriggersAndActionsUIPublicPluginSetup {
   actionTypeRegistry: TypeRegistry<ActionTypeModel>;
-  alertTypeRegistry: TypeRegistry<AlertTypeModel>;
+  alertTypeRegistry: TypeRegistry<AlertTypeModel<any>>;
 }
 
 export interface TriggersAndActionsUIPublicPluginStart {
   actionTypeRegistry: TypeRegistry<ActionTypeModel>;
-  alertTypeRegistry: TypeRegistry<AlertTypeModel>;
+  alertTypeRegistry: TypeRegistry<AlertTypeModel<any>>;
   getAddConnectorFlyout: (
     props: Omit<ConnectorAddFlyoutProps, 'actionTypeRegistry'>
   ) => ReactElement<ConnectorAddFlyoutProps>;
diff --git a/x-pack/plugins/triggers_actions_ui/public/types.ts b/x-pack/plugins/triggers_actions_ui/public/types.ts
index 3fffe9fe230b4b..43780b324aa569 100644
--- a/x-pack/plugins/triggers_actions_ui/public/types.ts
+++ b/x-pack/plugins/triggers_actions_ui/public/types.ts
@@ -8,12 +8,12 @@ import type { DocLinksStart } from 'kibana/public';
 import { ComponentType } from 'react';
 import { ChartsPluginSetup } from 'src/plugins/charts/public';
 import { DataPublicPluginStart } from 'src/plugins/data/public';
-import { ActionGroup, AlertActionParam } from '../../alerts/common';
+import { ActionGroup, AlertActionParam, AlertTypeParams } from '../../alerts/common';
 import { ActionType } from '../../actions/common';
 import { TypeRegistry } from './application/type_registry';
 import { AlertType as CommonAlertType } from '../../alerts/common';
 import {
-  SanitizedAlert as Alert,
+  SanitizedAlert,
   AlertAction,
   AlertAggregations,
   AlertTaskState,
@@ -23,6 +23,11 @@ import {
   AlertingFrameworkHealth,
   AlertNotifyWhenType,
 } from '../../alerts/common';
+
+// In Triggers and Actions we treat all `Alert`s as `SanitizedAlert<AlertTypeParams>`
+// so the `Params` is a black-box of Record<string, unknown>
+type Alert = SanitizedAlert<AlertTypeParams>;
+
 export {
   Alert,
   AlertAction,
@@ -169,14 +174,17 @@ export interface AlertTableItem extends Alert {
 }
 
 export interface AlertTypeParamsExpressionProps<
-  AlertParamsType = unknown,
+  Params extends AlertTypeParams = AlertTypeParams,
   MetaData = Record<string, any>
 > {
-  alertParams: AlertParamsType;
+  alertParams: Params;
   alertInterval: string;
   alertThrottle: string;
-  setAlertParams: (property: string, value: any) => void;
-  setAlertProperty: <Key extends keyof Alert>(key: Key, value: Alert[Key] | null) => void;
+  setAlertParams: <Key extends keyof Params>(property: Key, value: Params[Key] | undefined) => void;
+  setAlertProperty: <Prop extends keyof Alert>(
+    key: Prop,
+    value: SanitizedAlert<Params>[Prop] | null
+  ) => void;
   errors: IErrorObject;
   defaultActionGroupId: string;
   actionGroups: ActionGroup[];
@@ -185,15 +193,15 @@ export interface AlertTypeParamsExpressionProps<
   data: DataPublicPluginStart;
 }
 
-export interface AlertTypeModel<AlertParamsType = any> {
+export interface AlertTypeModel<Params extends AlertTypeParams = AlertTypeParams> {
   id: string;
   description: string;
   iconClass: string;
   documentationUrl: string | ((docLinks: DocLinksStart) => string) | null;
-  validate: (alertParams: AlertParamsType) => ValidationResult;
+  validate: (alertParams: Params) => ValidationResult;
   alertParamsExpression:
     | React.FunctionComponent<any>
-    | React.LazyExoticComponent<ComponentType<AlertTypeParamsExpressionProps<AlertParamsType>>>;
+    | React.LazyExoticComponent<ComponentType<AlertTypeParamsExpressionProps<Params>>>;
   requiresAppContext: boolean;
   defaultActionMessage?: string;
 }
diff --git a/x-pack/plugins/uptime/public/state/actions/types.ts b/x-pack/plugins/uptime/public/state/actions/types.ts
index 8d87ae5d52cb20..322f1eb0136b4e 100644
--- a/x-pack/plugins/uptime/public/state/actions/types.ts
+++ b/x-pack/plugins/uptime/public/state/actions/types.ts
@@ -6,7 +6,8 @@
 
 import { Action } from 'redux-actions';
 import { IHttpFetchError } from 'src/core/public';
-import { Alert } from '../../../../triggers_actions_ui/public';
+import { Alert } from '../../../../alerts/common';
+import { UptimeAlertTypeParams } from '../alerts/alerts';
 
 export interface AsyncAction<Payload, SuccessPayload> {
   get: (payload: Payload) => Action<Payload>;
@@ -59,5 +60,5 @@ export interface AlertsResult {
   page: number;
   perPage: number;
   total: number;
-  data: Alert[];
+  data: Array<Alert<UptimeAlertTypeParams>>;
 }
diff --git a/x-pack/plugins/uptime/public/state/alerts/alerts.ts b/x-pack/plugins/uptime/public/state/alerts/alerts.ts
index aeb81bb413aa7b..43186e0ef5422a 100644
--- a/x-pack/plugins/uptime/public/state/alerts/alerts.ts
+++ b/x-pack/plugins/uptime/public/state/alerts/alerts.ts
@@ -20,10 +20,8 @@ import {
   fetchMonitorAlertRecords,
   NewAlertParams,
 } from '../api/alerts';
-import {
-  ActionConnector as RawActionConnector,
-  Alert,
-} from '../../../../triggers_actions_ui/public';
+import { ActionConnector as RawActionConnector } from '../../../../triggers_actions_ui/public';
+import { Alert } from '../../../../alerts/common';
 import { kibanaService } from '../kibana_service';
 import { monitorIdSelector } from '../selectors';
 import { AlertsResult, MonitorIdParam } from '../actions/types';
@@ -31,13 +29,22 @@ import { simpleAlertEnabled } from '../../lib/alert_types/alert_messages';
 
 export type ActionConnector = Omit<RawActionConnector, 'secrets'>;
 
-export const createAlertAction = createAsyncAction<NewAlertParams, Alert | null>('CREATE ALERT');
+/**
+ * TODO: Use actual AlertType Params type that's specific to Uptime instead of `any`
+ */
+export type UptimeAlertTypeParams = Record<string, any>;
+
+export const createAlertAction = createAsyncAction<
+  NewAlertParams,
+  Alert<UptimeAlertTypeParams> | null
+>('CREATE ALERT');
 export const getConnectorsAction = createAsyncAction<{}, ActionConnector[]>('GET CONNECTORS');
 export const getMonitorAlertsAction = createAsyncAction<{}, AlertsResult | null>('GET ALERTS');
 
-export const getAnomalyAlertAction = createAsyncAction<MonitorIdParam, Alert>(
-  'GET EXISTING ALERTS'
-);
+export const getAnomalyAlertAction = createAsyncAction<
+  MonitorIdParam,
+  Alert<UptimeAlertTypeParams>
+>('GET EXISTING ALERTS');
 export const deleteAlertAction = createAsyncAction<{ alertId: string }, string | null>(
   'DELETE ALERTS'
 );
@@ -47,9 +54,9 @@ export const deleteAnomalyAlertAction = createAsyncAction<{ alertId: string }, a
 
 interface AlertState {
   connectors: AsyncInitState<ActionConnector[]>;
-  newAlert: AsyncInitState<Alert>;
+  newAlert: AsyncInitState<Alert<UptimeAlertTypeParams>>;
   alerts: AsyncInitState<AlertsResult>;
-  anomalyAlert: AsyncInitState<Alert>;
+  anomalyAlert: AsyncInitState<Alert<UptimeAlertTypeParams>>;
   alertDeletion: AsyncInitState<string>;
   anomalyAlertDeletion: AsyncInitState<boolean>;
 }
diff --git a/x-pack/plugins/uptime/public/state/api/alerts.ts b/x-pack/plugins/uptime/public/state/api/alerts.ts
index da86da12a70cae..9d4dd3a1253c31 100644
--- a/x-pack/plugins/uptime/public/state/api/alerts.ts
+++ b/x-pack/plugins/uptime/public/state/api/alerts.ts
@@ -9,9 +9,10 @@ import { apiService } from './utils';
 import { ActionConnector } from '../alerts/alerts';
 
 import { AlertsResult, MonitorIdParam } from '../actions/types';
-import { Alert, AlertAction } from '../../../../triggers_actions_ui/public';
+import { AlertAction } from '../../../../triggers_actions_ui/public';
 import { API_URLS } from '../../../common/constants';
 import { MonitorStatusTranslations } from '../../../common/translations';
+import { Alert, AlertTypeParams } from '../../../../alerts/common';
 
 const { MONITOR_STATUS } = ACTION_GROUP_DEFINITIONS;
 
@@ -21,7 +22,7 @@ export const fetchConnectors = async () => {
   return await apiService.get(API_URLS.ALERT_ACTIONS);
 };
 
-export interface NewAlertParams {
+export interface NewAlertParams extends AlertTypeParams {
   monitorId: string;
   monitorName?: string;
   defaultActions: ActionConnector[];
@@ -80,7 +81,9 @@ export const fetchMonitorAlertRecords = async (): Promise<AlertsResult> => {
   return await apiService.get(API_URLS.ALERTS_FIND, data);
 };
 
-export const fetchAlertRecords = async ({ monitorId }: MonitorIdParam): Promise<Alert> => {
+export const fetchAlertRecords = async ({
+  monitorId,
+}: MonitorIdParam): Promise<Alert<NewAlertParams>> => {
   const data = {
     page: 1,
     per_page: 500,
@@ -90,7 +93,7 @@ export const fetchAlertRecords = async ({ monitorId }: MonitorIdParam): Promise<
     sort_order: 'asc',
   };
   const alerts = await apiService.get(API_URLS.ALERTS_FIND, data);
-  return alerts.data.find((alert: Alert) => alert.params.monitorId === monitorId);
+  return alerts.data.find((alert: Alert<NewAlertParams>) => alert.params.monitorId === monitorId);
 };
 
 export const disableAlertById = async ({ alertId }: { alertId: string }) => {
diff --git a/x-pack/plugins/uptime/server/lib/alerts/__tests__/status_check.test.ts b/x-pack/plugins/uptime/server/lib/alerts/__tests__/status_check.test.ts
index 4f9fefa4188e5a..d5fd92476dd162 100644
--- a/x-pack/plugins/uptime/server/lib/alerts/__tests__/status_check.test.ts
+++ b/x-pack/plugins/uptime/server/lib/alerts/__tests__/status_check.test.ts
@@ -11,7 +11,13 @@ import {
   getStatusMessage,
   getUniqueIdsByLoc,
 } from '../status_check';
-import { AlertType } from '../../../../../alerts/server';
+import {
+  AlertType,
+  AlertTypeParams,
+  AlertTypeState,
+  AlertInstanceState,
+  AlertInstanceContext,
+} from '../../../../../alerts/server';
 import { IRouter } from 'kibana/server';
 import { UMServerLibs } from '../../lib';
 import { UptimeCorePlugins, UptimeCoreSetup } from '../../adapters';
@@ -868,7 +874,7 @@ describe('status check alert', () => {
   });
 
   describe('alert factory', () => {
-    let alert: AlertType;
+    let alert: AlertType<AlertTypeParams, AlertTypeState, AlertInstanceState, AlertInstanceContext>;
 
     beforeEach(() => {
       const { server, libs, plugins } = bootstrapDependencies();
diff --git a/x-pack/plugins/uptime/server/lib/alerts/types.ts b/x-pack/plugins/uptime/server/lib/alerts/types.ts
index 0a80b36046860d..d143e33fb8e968 100644
--- a/x-pack/plugins/uptime/server/lib/alerts/types.ts
+++ b/x-pack/plugins/uptime/server/lib/alerts/types.ts
@@ -6,10 +6,17 @@
 
 import { UptimeCorePlugins, UptimeCoreSetup } from '../adapters';
 import { UMServerLibs } from '../lib';
-import { AlertType } from '../../../../alerts/server';
+import { AlertType, AlertInstanceState, AlertInstanceContext } from '../../../../alerts/server';
 
+export type UptimeAlertTypeParam = Record<string, any>;
+export type UptimeAlertTypeState = Record<string, any>;
 export type UptimeAlertTypeFactory = (
   server: UptimeCoreSetup,
   libs: UMServerLibs,
   plugins: UptimeCorePlugins
-) => AlertType;
+) => AlertType<
+  UptimeAlertTypeParam,
+  UptimeAlertTypeState,
+  AlertInstanceState,
+  AlertInstanceContext
+>;
diff --git a/x-pack/plugins/uptime/server/lib/alerts/uptime_alert_wrapper.ts b/x-pack/plugins/uptime/server/lib/alerts/uptime_alert_wrapper.ts
index 965287ffbde8e3..a4a2f2c64db1be 100644
--- a/x-pack/plugins/uptime/server/lib/alerts/uptime_alert_wrapper.ts
+++ b/x-pack/plugins/uptime/server/lib/alerts/uptime_alert_wrapper.ts
@@ -5,28 +5,46 @@
  */
 
 import { SavedObjectsClientContract } from 'kibana/server';
-import { AlertExecutorOptions, AlertType, AlertTypeState } from '../../../../alerts/server';
+import {
+  AlertExecutorOptions,
+  AlertInstanceState,
+  AlertInstanceContext,
+} from '../../../../alerts/server';
 import { savedObjectsAdapter } from '../saved_objects';
 import { DynamicSettings } from '../../../common/runtime_types';
 import { createUptimeESClient, UptimeESClient } from '../lib';
+import { UptimeAlertTypeFactory, UptimeAlertTypeParam, UptimeAlertTypeState } from './types';
 
-export interface UptimeAlertType extends Omit<AlertType, 'executor' | 'producer'> {
+export interface UptimeAlertType
+  extends Omit<ReturnType<UptimeAlertTypeFactory>, 'executor' | 'producer'> {
   executor: ({
     options,
     uptimeEsClient,
     dynamicSettings,
   }: {
-    options: AlertExecutorOptions;
+    options: AlertExecutorOptions<
+      UptimeAlertTypeParam,
+      UptimeAlertTypeState,
+      AlertInstanceState,
+      AlertInstanceContext
+    >;
     uptimeEsClient: UptimeESClient;
     dynamicSettings: DynamicSettings;
     savedObjectsClient: SavedObjectsClientContract;
-  }) => Promise<AlertTypeState | void>;
+  }) => Promise<UptimeAlertTypeState | void>;
 }
 
 export const uptimeAlertWrapper = (uptimeAlert: UptimeAlertType) => ({
   ...uptimeAlert,
   producer: 'uptime',
-  executor: async (options: AlertExecutorOptions) => {
+  executor: async (
+    options: AlertExecutorOptions<
+      UptimeAlertTypeParam,
+      UptimeAlertTypeState,
+      AlertInstanceState,
+      AlertInstanceContext
+    >
+  ) => {
     const {
       services: { scopedClusterClient: esClient, savedObjectsClient },
     } = options;
diff --git a/x-pack/test/alerting_api_integration/common/fixtures/plugins/alerts/server/alert_types.ts b/x-pack/test/alerting_api_integration/common/fixtures/plugins/alerts/server/alert_types.ts
index b4ee273e57d614..30c19f735b75db 100644
--- a/x-pack/test/alerting_api_integration/common/fixtures/plugins/alerts/server/alert_types.ts
+++ b/x-pack/test/alerting_api_integration/common/fixtures/plugins/alerts/server/alert_types.ts
@@ -13,6 +13,8 @@ import {
   AlertType,
   AlertInstanceState,
   AlertInstanceContext,
+  AlertTypeState,
+  AlertTypeParams,
 } from '../../../../../../../plugins/alerts/server';
 
 export const EscapableStrings = {
@@ -50,7 +52,7 @@ function getAlwaysFiringAlertType() {
     groupsToScheduleActionsInSeries: schema.maybe(schema.arrayOf(schema.nullable(schema.string()))),
   });
   type ParamsType = TypeOf<typeof paramsSchema>;
-  interface State {
+  interface State extends AlertTypeState {
     groupInSeriesIndex?: number;
   }
   interface InstanceState extends AlertInstanceState {
@@ -59,7 +61,7 @@ function getAlwaysFiringAlertType() {
   interface InstanceContext extends AlertInstanceContext {
     instanceContextValue: boolean;
   }
-  const result: AlertType<ParamsType, State, InstanceState, InstanceContext> = {
+  const result: AlertType<ParamsType & AlertTypeParams, State, InstanceState, InstanceContext> = {
     id: 'test.always-firing',
     name: 'Test: Always Firing',
     actionGroups: [
@@ -141,7 +143,7 @@ async function alwaysFiringExecutor(alertExecutorOptions: any) {
 }
 
 function getCumulativeFiringAlertType() {
-  interface State {
+  interface State extends AlertTypeState {
     runCount?: number;
   }
   interface InstanceState extends AlertInstanceState {
@@ -175,7 +177,7 @@ function getCumulativeFiringAlertType() {
       };
     },
   };
-  return result as AlertType;
+  return result;
 }
 
 function getNeverFiringAlertType() {
@@ -184,7 +186,7 @@ function getNeverFiringAlertType() {
     reference: schema.string(),
   });
   type ParamsType = TypeOf<typeof paramsSchema>;
-  interface State {
+  interface State extends AlertTypeState {
     globalStateValue: boolean;
   }
   const result: AlertType<ParamsType, State, {}, {}> = {
@@ -385,7 +387,7 @@ function getPatternFiringAlertType() {
     reference: schema.maybe(schema.string()),
   });
   type ParamsType = TypeOf<typeof paramsSchema>;
-  interface State {
+  interface State extends AlertTypeState {
     patternIndex?: number;
   }
   const result: AlertType<ParamsType, State, {}, {}> = {
diff --git a/x-pack/test/functional_with_es_ssl/fixtures/plugins/alerts/server/plugin.ts b/x-pack/test/functional_with_es_ssl/fixtures/plugins/alerts/server/plugin.ts
index f6cbc52e7a421a..cf09286fe1ba67 100644
--- a/x-pack/test/functional_with_es_ssl/fixtures/plugins/alerts/server/plugin.ts
+++ b/x-pack/test/functional_with_es_ssl/fixtures/plugins/alerts/server/plugin.ts
@@ -27,7 +27,14 @@ export const noopAlertType: AlertType = {
   producer: 'alerts',
 };
 
-export const alwaysFiringAlertType: AlertType = {
+export const alwaysFiringAlertType: AlertType<
+  { instances: Array<{ id: string; state: any }> },
+  {
+    globalStateValue: boolean;
+    groupInSeriesIndex: number;
+  },
+  { instanceStateValue: boolean; globalStateValue: boolean; groupInSeriesIndex: number }
+> = {
   id: 'test.always-firing',
   name: 'Always Firing',
   actionGroups: [
@@ -37,7 +44,7 @@ export const alwaysFiringAlertType: AlertType = {
   defaultActionGroupId: 'default',
   producer: 'alerts',
   minimumLicenseRequired: 'basic',
-  async executor(alertExecutorOptions: any) {
+  async executor(alertExecutorOptions) {
     const { services, state, params } = alertExecutorOptions;
 
     (params.instances || []).forEach((instance: { id: string; state: any }) => {

From 7930854bea995ef676f52985299f294358af288f Mon Sep 17 00:00:00 2001
From: "Christiane (Tina) Heiligers" <christiane.heiligers@elastic.co>
Date: Mon, 21 Dec 2020 12:22:14 -0700
Subject: [PATCH 72/75] Migrates search telemetry usage collector es client
 from legacy to new (#86597)

---
 .../data/server/search/collectors/fetch.ts    | 39 ++++++++++---------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/plugins/data/server/search/collectors/fetch.ts b/src/plugins/data/server/search/collectors/fetch.ts
index 344bc18c7b4b66..9d0d431cf4eaff 100644
--- a/src/plugins/data/server/search/collectors/fetch.ts
+++ b/src/plugins/data/server/search/collectors/fetch.ts
@@ -20,31 +20,34 @@
 import { Observable } from 'rxjs';
 import { first } from 'rxjs/operators';
 import { SharedGlobalConfig } from 'kibana/server';
+import { SearchResponse } from 'elasticsearch';
 import { CollectorFetchContext } from 'src/plugins/usage_collection/server';
 import { Usage } from './register';
-
-interface SearchTelemetrySavedObject {
+interface SearchTelemetry {
   'search-telemetry': Usage;
 }
+type ESResponse = SearchResponse<SearchTelemetry>;
 
 export function fetchProvider(config$: Observable<SharedGlobalConfig>) {
-  return async ({ callCluster }: CollectorFetchContext): Promise<Usage> => {
+  return async ({ esClient }: CollectorFetchContext): Promise<Usage> => {
     const config = await config$.pipe(first()).toPromise();
-
-    const response = await callCluster<SearchTelemetrySavedObject>('search', {
-      index: config.kibana.index,
-      body: {
-        query: { term: { type: { value: 'search-telemetry' } } },
+    const { body: esResponse } = await esClient.search<ESResponse>(
+      {
+        index: config.kibana.index,
+        body: {
+          query: { term: { type: { value: 'search-telemetry' } } },
+        },
       },
-      ignore: [404],
-    });
-
-    return response.hits.hits.length
-      ? response.hits.hits[0]._source['search-telemetry']
-      : {
-          successCount: 0,
-          errorCount: 0,
-          averageDuration: null,
-        };
+      { ignore: [404] }
+    );
+    const size = esResponse?.hits?.hits?.length ?? 0;
+    if (!size) {
+      return {
+        successCount: 0,
+        errorCount: 0,
+        averageDuration: null,
+      };
+    }
+    return esResponse.hits.hits[0]._source['search-telemetry'];
   };
 }

From 8760fa5a4d3420f49d4f01ad15678a176255ec7d Mon Sep 17 00:00:00 2001
From: Quynh Nguyen <43350163+qn895@users.noreply.github.com>
Date: Mon, 21 Dec 2020 13:30:41 -0600
Subject: [PATCH 73/75] [ML] Fix Single Metric Viewer y domain extending beyond
 the visible focus area (#86655)

---
 .../components/timeseries_chart/timeseries_chart.js             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
index 32fa27b70989e7..768de330cce1d0 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
@@ -689,7 +689,7 @@ class TimeseriesChartIntl extends Component {
         const levels = getAnnotationLevels(focusAnnotationData);
         const maxLevel = d3.max(Object.keys(levels).map((key) => levels[key]));
         // TODO needs revisiting to be a more robust normalization
-        yMax = yMax * (1 + (maxLevel + 1) / 5);
+        yMax += Math.abs(yMax - yMin) * ((maxLevel + 1) / 5);
       }
       this.focusYScale.domain([yMin, yMax]);
     } else {

From 58b429749f4499347620b3d183c020e9a631192f Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Mon, 21 Dec 2020 20:59:23 +0100
Subject: [PATCH 74/75] [ML] Support legacy watcher URL (#86661)

* [ML] update watcher URL, support legacy state

* [ML] fix comment
---
 .../explorer/hooks/use_explorer_url_state.ts        | 13 ++++++++++++-
 .../components/create_watch_flyout/email.html       |  2 +-
 .../ml/public/application/util/url_state.tsx        |  9 ++++++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/explorer/hooks/use_explorer_url_state.ts b/x-pack/plugins/ml/public/application/explorer/hooks/use_explorer_url_state.ts
index d51be619c39eea..805f13f48b01cf 100644
--- a/x-pack/plugins/ml/public/application/explorer/hooks/use_explorer_url_state.ts
+++ b/x-pack/plugins/ml/public/application/explorer/hooks/use_explorer_url_state.ts
@@ -9,5 +9,16 @@ import { ExplorerAppState } from '../../../../common/types/ml_url_generator';
 import { ML_PAGES } from '../../../../common/constants/ml_url_generator';
 
 export function useExplorerUrlState() {
-  return usePageUrlState<ExplorerAppState>(ML_PAGES.ANOMALY_EXPLORER);
+  /**
+   * Originally `mlExplorerSwimlane` resided directly in the app URL state (`_a` URL state key).
+   * With current URL structure it has been moved under the `explorer` key of the app state (_a).
+   */
+  const [legacyExplorerState] = usePageUrlState<ExplorerAppState['mlExplorerSwimlane']>(
+    'mlExplorerSwimlane'
+  );
+
+  return usePageUrlState<ExplorerAppState>(ML_PAGES.ANOMALY_EXPLORER, {
+    mlExplorerSwimlane: legacyExplorerState,
+    mlExplorerFilter: {},
+  });
 }
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/create_watch_flyout/email.html b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/create_watch_flyout/email.html
index 5ce7d9f81f367c..2e93c7eefcf1e5 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/create_watch_flyout/email.html
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/create_watch_flyout/email.html
@@ -22,7 +22,7 @@
     <br />
     <br />
 
-    <a href="<%= serverAddress %>#/explorer/?_g=(ml:(jobIds:!('{{ctx.payload.aggregations.bucket_results.top_bucket_hits.hits.hits.0._source.job_id}}')),time:(from:'{{ctx.payload.aggregations.bucket_results.top_bucket_hits.hits.hits.0.fields.start.0}}',mode:absolute,to:'{{ctx.payload.aggregations.bucket_results.top_bucket_hits.hits.hits.0.fields.end.0}}'))&_a=(filters:!(),mlAnomaliesTable:(intervalValue:auto,thresholdValue:0),mlExplorerSwimlane:(selectedLane:Overall,selectedTime:{{ctx.payload.aggregations.bucket_results.top_bucket_hits.hits.hits.0.fields.timestamp_epoch.0}},selectedType:overall),query:(query_string:(analyze_wildcard:!t,query:'*')))">
+    <a href="<%= serverAddress %>#/explorer/?_g=(ml:(jobIds:!('{{ctx.payload.aggregations.bucket_results.top_bucket_hits.hits.hits.0._source.job_id}}')),time:(from:'{{ctx.payload.aggregations.bucket_results.top_bucket_hits.hits.hits.0.fields.start.0}}',mode:absolute,to:'{{ctx.payload.aggregations.bucket_results.top_bucket_hits.hits.hits.0.fields.end.0}}'))&_a=(explorer:(mlExplorerSwimlane:(selectedLane:Overall,selectedTime:{{ctx.payload.aggregations.bucket_results.top_bucket_hits.hits.hits.0.fields.timestamp_epoch.0}},selectedType:overall)),query:(query_string:(analyze_wildcard:!t,query:'*')))">
       <%= openInAnomalyExplorerLinkText %>
     </a>
     <br />
diff --git a/x-pack/plugins/ml/public/application/util/url_state.tsx b/x-pack/plugins/ml/public/application/util/url_state.tsx
index 6cdc069096dccd..569e7bcc7b7e1a 100644
--- a/x-pack/plugins/ml/public/application/util/url_state.tsx
+++ b/x-pack/plugins/ml/public/application/util/url_state.tsx
@@ -162,7 +162,14 @@ export const useUrlState = (accessor: Accessor) => {
   return [urlState, setUrlState];
 };
 
-type AppStateKey = 'mlSelectSeverity' | 'mlSelectInterval' | 'mlAnomaliesTable' | MlPages;
+type LegacyUrlKeys = 'mlExplorerSwimlane';
+
+type AppStateKey =
+  | 'mlSelectSeverity'
+  | 'mlSelectInterval'
+  | 'mlAnomaliesTable'
+  | MlPages
+  | LegacyUrlKeys;
 
 /**
  * Hook for managing the URL state of the page.

From 68ec9d2f226a0cb6af31558153f4cf70d2e30f2b Mon Sep 17 00:00:00 2001
From: "Christiane (Tina) Heiligers" <christiane.heiligers@elastic.co>
Date: Mon, 21 Dec 2020 13:06:59 -0700
Subject: [PATCH 75/75] Uses the new es client in canvas usage collector's
 fetch methods (#86668)

---
 x-pack/plugins/canvas/server/collectors/collector.ts   |  4 ++--
 .../server/collectors/custom_element_collector.ts      | 10 ++++++----
 .../canvas/server/collectors/workpad_collector.ts      |  9 +++++----
 x-pack/plugins/canvas/types/telemetry.ts               |  4 ++--
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/canvas/server/collectors/collector.ts b/x-pack/plugins/canvas/server/collectors/collector.ts
index a084e8fe3349eb..9cb015eed4c5b5 100644
--- a/x-pack/plugins/canvas/server/collectors/collector.ts
+++ b/x-pack/plugins/canvas/server/collectors/collector.ts
@@ -37,9 +37,9 @@ export function registerCanvasUsageCollector(
   const canvasCollector = usageCollection.makeUsageCollector<CanvasUsage>({
     type: 'canvas',
     isReady: () => true,
-    fetch: async ({ callCluster }: CollectorFetchContext) => {
+    fetch: async ({ esClient }: CollectorFetchContext) => {
       const collectorResults = await Promise.all(
-        collectors.map((collector) => collector(kibanaIndex, callCluster))
+        collectors.map((collector) => collector(kibanaIndex, esClient))
       );
 
       return collectorResults.reduce((reduction, usage) => {
diff --git a/x-pack/plugins/canvas/server/collectors/custom_element_collector.ts b/x-pack/plugins/canvas/server/collectors/custom_element_collector.ts
index d3ed1e17785ee9..8992f78332518b 100644
--- a/x-pack/plugins/canvas/server/collectors/custom_element_collector.ts
+++ b/x-pack/plugins/canvas/server/collectors/custom_element_collector.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { SearchParams } from 'elasticsearch';
+import { SearchResponse } from 'elasticsearch';
 import { get } from 'lodash';
 import { MakeSchemaFrom } from 'src/plugins/usage_collection/server';
 import { collectFns } from './collector_helpers';
@@ -114,9 +114,9 @@ export function summarizeCustomElements(
 
 const customElementCollector: TelemetryCollector = async function customElementCollector(
   kibanaIndex,
-  callCluster
+  esClient
 ) {
-  const customElementParams: SearchParams = {
+  const customElementParams = {
     size: 10000,
     index: kibanaIndex,
     ignoreUnavailable: true,
@@ -124,7 +124,9 @@ const customElementCollector: TelemetryCollector = async function customElementC
     body: { query: { bool: { filter: { term: { type: CUSTOM_ELEMENT_TYPE } } } } },
   };
 
-  const esResponse = await callCluster<CustomElementSearch>('search', customElementParams);
+  const { body: esResponse } = await esClient.search<SearchResponse<CustomElementSearch>>(
+    customElementParams
+  );
 
   if (get(esResponse, 'hits.hits.length') > 0) {
     const customElements = esResponse.hits.hits.map((hit) => hit._source[CUSTOM_ELEMENT_TYPE]);
diff --git a/x-pack/plugins/canvas/server/collectors/workpad_collector.ts b/x-pack/plugins/canvas/server/collectors/workpad_collector.ts
index 04794115288022..5d633a0d4dd1d3 100644
--- a/x-pack/plugins/canvas/server/collectors/workpad_collector.ts
+++ b/x-pack/plugins/canvas/server/collectors/workpad_collector.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { SearchParams } from 'elasticsearch';
+import { SearchResponse } from 'elasticsearch';
 import { sum as arraySum, min as arrayMin, max as arrayMax, get } from 'lodash';
 import { MakeSchemaFrom } from 'src/plugins/usage_collection/server';
 import { CANVAS_TYPE } from '../../common/lib/constants';
@@ -229,9 +229,10 @@ export function summarizeWorkpads(workpadDocs: CanvasWorkpad[]): WorkpadTelemetr
     variables: variableInfo,
   };
 }
+type ESResponse = SearchResponse<WorkpadSearch>;
 
-const workpadCollector: TelemetryCollector = async function (kibanaIndex, callCluster) {
-  const searchParams: SearchParams = {
+const workpadCollector: TelemetryCollector = async function (kibanaIndex, esClient) {
+  const searchParams = {
     size: 10000, // elasticsearch index.max_result_window default value
     index: kibanaIndex,
     ignoreUnavailable: true,
@@ -239,7 +240,7 @@ const workpadCollector: TelemetryCollector = async function (kibanaIndex, callCl
     body: { query: { bool: { filter: { term: { type: CANVAS_TYPE } } } } },
   };
 
-  const esResponse = await callCluster<WorkpadSearch>('search', searchParams);
+  const { body: esResponse } = await esClient.search<ESResponse>(searchParams);
 
   if (get(esResponse, 'hits.hits.length') > 0) {
     const workpads = esResponse.hits.hits.map((hit) => hit._source[CANVAS_TYPE]);
diff --git a/x-pack/plugins/canvas/types/telemetry.ts b/x-pack/plugins/canvas/types/telemetry.ts
index 3b635b2e579269..e323372e879939 100644
--- a/x-pack/plugins/canvas/types/telemetry.ts
+++ b/x-pack/plugins/canvas/types/telemetry.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { LegacyAPICaller } from 'kibana/server';
+import { ElasticsearchClient } from 'kibana/server';
 
 /**
   Function for collecting information about canvas usage
@@ -13,7 +13,7 @@ export type TelemetryCollector = (
   /** The server instance */
   kibanaIndex: string,
   /** Function for calling elasticsearch */
-  callCluster: LegacyAPICaller
+  esClient: ElasticsearchClient
 ) => Record<string, any>;
 
 export interface TelemetryCustomElementDocument {